/* ========================================================================== eko-grille.css — SOCLE DE GRILLE MODULAIRE, 2M Numérique -------------------------------------------------------------------------- Discipline reprise du système de Josef Müller-Brockmann : une grille porteuse, pas décorative. Un seul endroit décide des colonnes, de la gouttière, de la marge et de la ligne de base ; tout le reste s'y réfère. APPLIQUÉ EN DIRECT (décision de Mathieu, 2026-07-31). Le socle — variables, conteneur, rythme vertical, échelle typographique — agit sans condition. SEULE LA SUPERPOSITION DE CONTRÔLE reste sous garde `html[data-grille]`, posée par eko-grille.js quand on appelle ?grille=1. Une trame de mesure n'est pas du design : c'est un instrument, et il n'a rien à faire sous les yeux d'un client. CHARTE CONSERVÉE. Le skill prescrit blanc, encre quasi noire et un accent rouge suisse. Décision de Mathieu : on garde l'aubergine et le corail. La discipline porte donc sur la STRUCTURE — grille, rythme, échelle — jamais sur la couleur, qui reste celle de la marque et vaut aussi pour les e-mails, les devis et la signature. CE QUE CE FICHIER NE TOUCHE PAS. Les documents AxonCreator — accueil, en-tête, pied de page, /content/8 — portent leurs styles EN LIGNE, qui l'emportent sur toute feuille. Ils gardent donc leur mise en page ; la reconstruction de l'accueil sur la grille est un chantier distinct. ========================================================================== */ :root { /* ── LA SOURCE DE VÉRITÉ ──────────────────────────────────────────── Ces valeurs commandent toute la mise en page. Aucune autre feuille ne doit redéclarer une colonne, une gouttière ou un pas d'espacement : elle s'y réfère, ou elle a tort. */ --eko-bl: 8px; /* ligne de base — le pas de tout le vertical */ --eko-lh: 24px; /* interlignage = 3 × ligne de base */ --eko-cols: 12; /* colonnes */ --eko-gout: 24px; /* gouttière = 3 × ligne de base */ --eko-marge: 24px; /* marge latérale = 3 × ligne de base */ /* 1272 et non 1280. Pourquoi : avec 12 colonnes, 11 gouttières de 24 px et 2 marges de 24 px, la zone de contenu vaut 1272 − 48 = 1224 px, et 1224 − (11 × 24) = 960, soit exactement 80 px par colonne. À 1280 on obtenait 80,67 px : des colonnes fractionnaires, donc une grille qu'aucune mesure ne peut valider. Huit pixels de moins, et elle devient vérifiable. 1272 = 159 × 8, 1224 = 153 × 8. */ --eko-maxw: 1272px; --eko-col: 80px; /* ── ÉCHELLE TYPOGRAPHIQUE ────────────────────────────────────────── Six tailles, écarts francs (rapport ≈ 1,4), contre 32 tailles distinctes relevées dans les feuilles actuelles — une échelle subie, héritée du thème Akira converti depuis des rem. Règle non négociable : la TAILLE peut être quelconque, l'INTERLIGNAGE doit être un multiple entier de la ligne de base. C'est lui qui cale le texte sur la trame, pas la taille du glyphe. */ --eko-t-display: 56px; --eko-lh-display: 64px; /* 8 × 8 */ --eko-t-h1: 40px; --eko-lh-h1: 48px; /* 6 × 8 */ --eko-t-h2: 32px; --eko-lh-h2: 40px; /* 5 × 8 */ --eko-t-h3: 24px; --eko-lh-h3: 32px; /* 4 × 8 */ --eko-t-h4: 20px; --eko-lh-h4: 24px; /* 3 × 8 */ --eko-t-body: 16px; --eko-lh-body: 24px; /* 3 × 8 */ --eko-t-small: 13px; --eko-lh-small: 16px; /* 2 × 8 */ /* Le titre de page vaut 48 px sur ce site, et non 40 (--eko-t-h1) ni 56 (--eko-t-display). Relevé sur les 24 familles de gabarits : c'est la valeur réellement en service partout. On ne la redresse PAS — redresser la taille du titre de 482 pages serait une refonte graphique, que personne n'a demandée. On lui donne son échelon dans l'échelle, et on cale son interlignage : 48 / 56 = 1,17, sept lignes de base. */ --eko-t-titre: 48px; --eko-lh-titre: 56px; /* 7 × 8 */ /* ── PAS D'ESPACEMENT ─────────────────────────────────────────────── Tous multiples de la ligne de base. Les valeurs mesurées dans les feuilles actuelles — 12, 20, 44, 28, 10, 14, 18, 36 px — n'en ont aucune : 61,6 % des espacements tombaient hors rythme. */ --eko-e1: 8px; --eko-e2: 16px; --eko-e3: 24px; --eko-e4: 32px; --eko-e5: 48px; --eko-e6: 64px; --eko-e7: 96px; --eko-e8: 128px; } /* Sous 720 px la grille passe à 4 colonnes : douze colonnes de 80 px n'ont aucun sens sur un téléphone, et prétendre le contraire produirait des colonnes de 15 px. La marge se resserre d'un cran, et les deux plus grandes tailles descendent — 56 px sur 375 px de large ne tient pas. */ @media (max-width: 719.98px) { :root { --eko-cols: 4; --eko-gout: 16px; --eko-marge: 16px; --eko-t-display: 36px; --eko-lh-display: 40px; /* 5 × 8 */ --eko-t-h1: 30px; --eko-lh-h1: 40px; /* 5 × 8 */ --eko-t-h2: 24px; --eko-lh-h2: 32px; /* 4 × 8 */ /* 30 px est la taille déjà servie aux titres de page sur téléphone : on garde, on cale l'interlignage. 30 / 40 = 1,33. */ --eko-t-titre: 30px; --eko-lh-titre: 40px; /* 5 × 8 */ } } /* ── LE CONTENEUR ─────────────────────────────────────────────────────── Une seule largeur. C'est aussi la boîte qui accueillera la superposition : le skill en fait son premier avertissement — une trame posée en FRÈRE d'un conteneur centré dérive dès que la fenêtre dépasse la largeur maximale, et l'on croit alors mesurer la grille alors qu'on mesure l'écart entre deux boîtes différentes. */ .eko-wrap, .container { position: relative; box-sizing: border-box; width: 100%; max-width: var(--eko-maxw); margin-inline: auto; padding-inline: var(--eko-marge); } /* ── BANDE EN SOUS-GRILLE ─────────────────────────────────────────────── Chaque bande occupe toutes les colonnes et les ré-expose à ses enfants, qui se placent alors par NUMÉRO DE LIGNE — `grid-column: 2 / 8` — et non par largeur en pourcentage. C'est ce qui rend le placement vérifiable : une largeur en pourcentage ne tombe juste que par hasard. */ .eko-bande { display: grid; grid-template-columns: repeat(var(--eko-cols), 1fr); column-gap: var(--eko-gout); row-gap: var(--eko-lh); } .eko-bande > * { grid-column: 1 / -1; } /* Placements courants, nommés pour être lisibles dans les gabarits. */ .eko-col-plein { grid-column: 1 / -1; } .eko-col-texte { grid-column: 2 / 9; } /* colonne de lecture, 7 colonnes */ .eko-col-large { grid-column: 1 / 10; } .eko-col-cote { grid-column: 10 / -1; } .eko-col-moitie { grid-column: span 6; } .eko-col-tiers { grid-column: span 4; } .eko-col-quart { grid-column: span 3; } @media (max-width: 719.98px) { .eko-col-texte, .eko-col-large, .eko-col-cote, .eko-col-moitie, .eko-col-tiers, .eko-col-quart { grid-column: 1 / -1; } } /* ── RYTHME VERTICAL ──────────────────────────────────────────────────── Le corps de texte est calé sur l'interlignage, et tout ce qui s'intercale est un multiple de la ligne de base. Les marges sont posées en `margin-block-end` seul : cumuler haut et bas fait fusionner les marges de façon imprévisible et casse le calage. PORTÉE VOLONTAIREMENT LIMITÉE au contenu éditorial. On ne touche ni aux documents AxonCreator, ni aux formulaires, ni aux éléments d'interface du thème parent : y imposer un rythme sans les avoir relus casserait des mises en page qui fonctionnent. */ .eko-prose p, .eko-prose ul, .eko-prose ol, .eko-prose table, .eko-prose blockquote, .eko-prose figure, .post-content p, .post-content ul, .post-content ol, .post-content table, .cms-content p, .cms-content ul, .cms-content ol { margin-block: 0 var(--eko-lh); font-size: var(--eko-t-body); line-height: var(--eko-lh-body); } .eko-prose h2, .post-content h2, .cms-content h2, .eko-prose h3, .post-content h3, .cms-content h3 { font-family: var(--eko-font-display); /* Le titre reçoit son blanc AVANT lui, jamais après : c'est ce qui le rattache visuellement au texte qu'il annonce plutôt qu'à celui qu'il quitte. La somme des deux reste un multiple de la ligne de base. */ margin-block: var(--eko-e5) var(--eko-e3); text-wrap: balance; } /* Ces deux règles portaient les échelons h2 et h3. C'était une erreur de lecture de ma part, corrigée après relevé des 24 familles de gabarits : le VRAI titre de niveau 2 d'une page de détail n'est pas le `h2` interne au corps de texte, c'est `.eko-section__title`, qui ouvre chaque section. Le `h2` de `.eko-prose` est donc un TROISIÈME niveau, et son `h3` un quatrième. Les faire monter à 32 px les aurait rendus plus gros que le titre de section qui les surplombe — hiérarchie inversée sur environ 250 pages. Le calage des titres de section, lui, est plus bas, avec les autres blocs. */ .eko-prose h2, .post-content h2, .cms-content h2, .eko-content-page .eko-prose h2 { font-size: var(--eko-t-h3); line-height: var(--eko-lh-h3); } .eko-prose h3, .post-content h3, .cms-content h3, .eko-content-page .eko-prose h3 { font-size: var(--eko-t-h4); line-height: var(--eko-lh-h4); } /* Le premier élément d'un bloc ne prend pas de blanc supérieur : le bloc porte déjà son espacement, et les cumuler décale l'ensemble. */ .eko-prose > :first-child, .post-content > :first-child, .cms-content > :first-child, .eko-bande > :first-child { margin-block-start: 0; } /* Une image dont la hauteur n'est pas un multiple de l'interlignage décale tout ce qui la suit — c'est la cause la plus fréquente d'une trame qui « glisse » en bas de page. */ .eko-prose img, .post-content img, .cms-content img { display: block; max-width: 100%; height: auto; } /* ── SUPERPOSITION DE CONTRÔLE ────────────────────────────────────────── Sous garde : seul ?grille=1 la rend disponible, et la touche G l'affiche. Elle vit DANS le conteneur, avec les mêmes marges et la même définition de colonnes que le contenu. Toute autre implantation ment. */ html[data-grille] .eko-guides { position: absolute; inset-block: 0; inset-inline: var(--eko-marge); z-index: 9998; display: none; pointer-events: none; grid-template-columns: repeat(var(--eko-cols), 1fr); column-gap: var(--eko-gout); } html[data-grille][data-guides] .eko-guides { display: grid; } html[data-grille] .eko-guides > i { display: block; background: rgb(234 101 114 / .12); border-inline: 1px solid rgb(234 101 114 / .28); } /* La trame horizontale est peinte en dégradé répété plutôt qu'en éléments : des milliers de sur une page longue coûteraient bien plus cher qu'un fond, pour un résultat identique. Trait marqué à chaque interlignage, trait fin à chaque ligne de base. */ html[data-grille][data-guides] body::after { content: ""; position: fixed; inset: 0; z-index: 9997; pointer-events: none; background-image: repeating-linear-gradient(to bottom, rgb(48 33 75 / .22) 0 1px, transparent 1px var(--eko-lh)), repeating-linear-gradient(to bottom, rgb(48 33 75 / .07) 0 1px, transparent 1px var(--eko-bl)); } html[data-grille] .eko-guides-btn { position: fixed; inset-block-end: var(--eko-e2); inset-inline-start: var(--eko-e2); z-index: 9999; padding: var(--eko-e1) var(--eko-e2); font-family: var(--eko-font-body); font-size: var(--eko-t-small); line-height: var(--eko-lh-small); color: #fff; background: var(--eko-aubergine-700, #30214b); border: 0; border-radius: 4px; cursor: pointer; opacity: .55; } html[data-grille] .eko-guides-btn:hover { opacity: 1; } @media print { html[data-grille] .eko-guides, html[data-grille] .eko-guides-btn { display: none !important; } } /* ── ALIGNEMENT DES DOCUMENTS AXONCREATOR ─────────────────────────────── Accueil, en-tête, pied de page et /content/8 sont bâtis dans AxonCreator, dont la mise en page vit dans du JSON avec styles en ligne. On ne la reconstruit PAS : on l'aligne. Mesuré sur l'accueil à 1440 px de large : 26 conteneurs de section à 1232 px, trois à 1280 px, contre 1224 px pour la zone de contenu de la grille. Huit pixels d'écart, invisibles à l'œil, mais qui suffisent à ce que l'accueil ne partage aucune ligne de colonne avec le reste du site. En ramenant tous les conteneurs à 1224 px, les 33 sections de l'accueil tombent sur les mêmes lignes que les pages éditoriales — sans toucher à un seul des 430 éléments du document, donc sans rien risquer de ce qui a été validé. CE QUE CELA NE FAIT PAS : les colonnes INTERNES d'Elementor restent en pourcentage (50 % d'une zone de 1224 donne 612 px, quand six colonnes de grille valent 600). Les faire coïncider exactement demanderait de réécrire le JSON — c'est un chantier distinct, à décider séparément. Le sélecteur reste étroit : uniquement le conteneur de section, jamais les colonnes ni les widgets, dont les largeurs en ligne l'emportent de toute façon. */ .elementor-section > .elementor-container { max-width: calc(var(--eko-maxw) - 2 * var(--eko-marge)) !important; /* 1224 px */ margin-inline: auto; box-sizing: border-box; } /* Les sections en pleine largeur assumée gardent leur débord : les ramener au conteneur retirerait l'effet recherché. On ne vise que celles qui étaient déjà bornées. */ .elementor-section.elementor-section-full_width > .elementor-container { max-width: none; padding-inline: 0; } /* ── ENCADRÉ DE NOTE DE L'ACCUEIL ─────────────────────────────────────── Signalé par Mathieu : « l'encadré 4,6★ n'est pas joli sur l'accueil ». MESURÉ : la rangée fait 1222 px pour 546 px de contenu réel — note 156, mention 240, bouton 150. La pastille blanche s'étire donc sur toute la largeur, et la mention « Basé sur 81 avis clients (Google + Avis Garantis) », enfermée dans 240 px, se casse en deux lignes au milieu d'une parenthèse. Sur les pages secteurs, le même bandeau est compact et centré — c'est ce rendu-là qui plaît. On le reproduit ici sans toucher au carrousel, que Mathieu souhaite conserver. `width: fit-content` fait épouser le contenu, `margin-inline: auto` recentre, `flex-wrap: nowrap` empêche le retour à la ligne. La mention retrouve sa largeur naturelle et tient sur une ligne. :has() cible la rangée PAR SON CONTENU — c'est le seul moyen de la distinguer de celle du carrousel sans dépendre d'un identifiant Elementor qui changerait à la première réédition du document. Navigateur sans :has() : la règle est ignorée, on retrouve l'affichage actuel. Aucune régression. */ /* ── CALAGE DU RYTHME SUR LES BLOCS EXISTANTS ─────────────────────────── Relevé le 2026-08-01 sur les 24 familles de gabarits du sitemap, en 1280 px et en 375 px, par lecture de `getComputedStyle` dans la page réelle. Sur les ~40 couples taille/interlignage mesurés, TROIS seulement tombaient sur la ligne de base. Le rythme n'était pas incomplet : il était absent partout sauf accident. Deux principes, tenus sans exception ici : 1. ON NE TOUCHE PAS AUX TAILLES qui fonctionnent. Le titre de page reste à 48 px, le titre de formulaire à 36, le titre de carte à 18. Les seules tailles redressées sont celles qui créaient une marche fausse — un titre de section à 30 px là où l'échelle en prévoit 32, un corps d'article à 14 px là où le reste du site lit à 16. 2. C'EST L'INTERLIGNAGE QUI SE CALE. Il passe en pixels, multiple entier de 8. Un interlignage sans unité (1,25 ; 1,4) ne peut PAS tomber sur la trame : il suit la taille du glyphe, qui n'a aucune raison d'être un multiple de la ligne de base. C'est la cause unique des 45, 52,8 et 19,6 px relevés. Aucune règle n'est marquée !important : le sélecteur reprend exactement la spécificité de celui qu'il doit battre, et cette feuille est chargée APRÈS le paquet concaténé. L'ordre suffit. Les spécificités à égaler ont été relevées une par une, pas devinées. PORTÉE : contenu éditorial, pages d'index, formulaires, articles de blog. Les documents AxonCreator restent DEHORS — leur habillage est généré par élément, avec une spécificité qui n'obéit qu'à !important, et leurs titres mesurent déjà 36/40 et 48/48, donc sur la trame. Deux composants d'accueil y échappent encore (encadré d'icône, 18/27,9 et 14/19,6) ; ils demandent un passage par le constructeur, pas par cette feuille. */ /* Titre de page. Spécificité à égaler : .eko-content-page .eko-hero__title (020), qui posait `clamp(30px, 17px + 2.4vw, 48px)` et `line-height: 1.1`. POURQUOI ABANDONNER LE CLAMP. Une taille fluide et une trame de base sont incompatibles par construction : si la taille varie en continu, aucun interlignage fixe ne peut lui rester proportionné, et un interlignage proportionnel (1,1) ne tombe sur la ligne de base que par accident. Mesuré : 47,72/52,49 à 1280 px de large. C'est le seul endroit du site où le compromis devait être tranché. On reprend donc les TROIS PALIERS que le thème déclarait déjà lui-même (30 / 36 / 48 aux ruptures 640 et 1280) et on cale l'interlignage de chacun. Rien n'est inventé : ces valeurs sont celles du thème, seul le clamp qui les court-circuitait disparaît. */ .eko-hero__title, .eko-content-page .eko-hero__title { font-size: 30px; line-height: 40px; /* 5 × 8 — rapport 1,33 */ } @media (min-width: 640px) { .eko-hero__title, .eko-content-page .eko-hero__title { font-size: 36px; line-height: 48px; /* 6 × 8 — rapport 1,33 */ } } @media (min-width: 1280px) { .eko-hero__title, .eko-content-page .eko-hero__title { font-size: var(--eko-t-titre); line-height: var(--eko-lh-titre); /* 48 / 56 — rapport 1,17 */ } } /* Titre de section. Spécificité à égaler : .eko-content-page .eko-section__title (020). Mesuré 30/36 sur bureau, et 23/27,6 ou 30/36 sur téléphone selon la famille de pages — trois valeurs pour un même rôle. */ .eko-section__title, .eko-content-page .eko-section__title, /* Les pages d'index déclaraient leur PROPRE progression pour ce même rôle, à une spécificité de 030 : 30/36 sous 1024 px, puis 36/40 au-dessus. Deux tailles de plus pour un rôle qui n'en demande qu'une. */ .eko-index .eko-content-page .eko-section__title, .eko-idx-sec__title, .eko-panel__title { font-size: var(--eko-t-h2); line-height: var(--eko-lh-h2); } /* Titre de sous-groupe d'index. Mesuré 20/28. ATTENTION — cette règle DOIT reposer sa taille. L'élément porte les DEUX classes, `eko-idx-sec__title eko-idx-sec__title--small` : la règle du dessus lui donnerait 32 px, et n'ayant réglé ici que l'interlignage, j'ai produit du 32/24 — un interlignage plus petit que le corps, donc des lignes qui se chevauchent. Mesuré en production, corrigé aussitôt. Les deux sélecteurs ont la même spécificité (010) : c'est l'ordre dans ce fichier qui départage, et le modificateur doit donc rester APRÈS. */ .eko-idx-sec__title--small { font-size: var(--eko-t-h4); line-height: var(--eko-lh-h4); } /* Titre de carte. Mesuré 18/28,0008 — l'interlignage sans unité 1,5556 rendu par le navigateur. 18/24 rend la carte haute d'un nombre entier de lignes. */ .eko-card__title { line-height: var(--eko-lh-body); } /* Textes bornés à trois lignes. Leur hauteur vaut exactement trois interlignages : calés, ils occupent 72 px, soit neuf lignes de base. Non calés, ils en occupaient 69,3 et 68,25 — et décalaient tout le bas de la carte. C'est le cas où le rythme se voit le plus. */ .eko-card__lead, .eko-cards--tile .eko-card__lead, /* spécificité à égaler : 020, lh 1,375 */ .eko-review__text, .eko-content-page .eko-review__text { /* spécificité à égaler : 020, lh 1,65 */ line-height: var(--eko-lh-body); } /* Accroche de formulaire — devis, devenir revendeur. Mesuré 16/26. */ .ekof-lead { line-height: var(--eko-lh-body); } /* Texte d'atout. Mesuré 12/18. À 12 px, deux lignes de base suffisent : 12/16 donne 1,33. Spécificité à égaler : .eko-content-page .eko-atout__text (020). */ .eko-atout__text, .eko-content-page .eko-atout__text { line-height: var(--eko-lh-small); } /* Fiche « guide ». Spécificité à égaler : .eko-content-page .eko-card--guide .eko-card__title (030), qui posait 1,45 — soit 23,2 px pour 16. La classe discriminante `eko-card--guide` est posée sur le CONTENEUR de cartes, pas sur la carte : elle n'apparaissait pas dans mon premier relevé d'ancêtres, qui n'imprimait que la première classe de chaque niveau. Le sélecteur ci-dessous a été copié depuis la règle gagnante, pas reconstruit. */ .eko-content-page .eko-card--guide .eko-card__title { line-height: var(--eko-lh-body); } /* Titre d'atout. Mesuré 14/19,6. À 14 px l'interlignage calé le plus proche vaut 24, soit un rapport de 1,71 — trop lâche pour un titre. On monte donc la taille au corps de texte : 16/24 donne 1,5, et une marche de moins dans une échelle qui en comptait déjà trente-deux. Spécificité à égaler : .eko-content-page .eko-atout__title (020). */ .eko-atout__title, .eko-content-page .eko-atout__title { font-size: var(--eko-t-body); line-height: var(--eko-lh-body); } /* Titre de formulaire — devis, estimateur, devenir revendeur. Mesuré 36/45 sur bureau, 30/37,5 sur téléphone. La taille reste, l'interlignage se cale au cran supérieur : 48 sur bureau, 40 sur téléphone. */ .ekof-title { line-height: 48px; } /* ── PAGE D'ARTICLE : COLONNE DE LECTURE ──────────────────────────────── La colonne latérale de smartblog a été retirée du gabarit (surcharge du thème enfant, 2026-08-02) : le contenu occupe désormais toute la largeur. Sans borne, une ligne de texte ferait 1224 px, soit près de 190 signes — trois fois la longueur de ligne lisible. 768 px, comme le `max-w-3xl` du site source, et comme la bande « À lire aussi » qui suit immédiatement. 768 = 96 × 8 : la colonne elle-même tombe sur la trame. */ #blog-details .blog-single-inner { max-width: 768px; margin-inline: auto; } /* Le bandeau du fil d'Ariane portait `margin-top: -40px`, un décalage prévu pour le faire chevaucher le titre de page. Ce titre ayant été retiré, le décalage glissait le fil d'Ariane SOUS l'en-tête collant, qui mesure 79 px. Mesuré à 39 px du haut, donc illisible sur ses deux premières lignes. On remet le bandeau à sa place et on lui donne le blanc du rythme. */ #blog-details .page-title { margin-top: 0; padding-block: var(--eko-e4) var(--eko-e3); } /* Le fil d'Ariane lui-même : 14/21 mesuré, dernier élément hors trame de la page. Sans effet sur les autres familles, qui le masquent au profit du fil inscrit dans leur héros. */ .axps-breadcrumb { line-height: var(--eko-lh-body); } /* Le bandeau de partage garde sa place — arbitrage retenu — mais prend le blanc du rythme plutôt que celui de smartblog. */ #blog-details .single-footer { margin-block-start: var(--eko-e5); padding-block-start: var(--eko-e3); border-block-start: 1px solid var(--eko-aubergine-100); } /* Article de blog. Le corps lisait à 14/21 quand tout le reste du site lit à 16/24 : c'est la seule famille où j'ai redressé la taille du corps, et la seule qui n'était couverte par AUCUNE règle — `.ax-text-page-content` vient du module de blog, absent de mes sélecteurs jusqu'ici. On ne modifie pas ce module : on écrit la règle dans notre propre feuille. */ .entry-title { line-height: 48px; } .ax-text-page-content p, .ax-text-page-content li, .ax-text-page-content blockquote { font-size: var(--eko-t-body); line-height: var(--eko-lh-body); } .ax-text-page-content h2 { font-size: var(--eko-t-h3); line-height: var(--eko-lh-h3); } .ax-text-page-content h3 { font-size: var(--eko-t-h4); line-height: var(--eko-lh-h4); } @media (max-width: 719.98px) { /* Les deux titres dont l'interlignage est écrit en dur descendent d'un cran : à 30 px, 48 serait aussi faux par excès que 37,5 l'était par défaut. */ .ekof-title, .entry-title { line-height: 40px; } } .eko-hb__reviews .elementor-widget-wrap:has(> .eko-hb__score-natif) { flex: 0 0 auto !important; align-self: center !important; width: fit-content !important; max-width: 100% !important; margin-inline: auto; flex-wrap: nowrap; align-items: center; gap: var(--eko-e3); } /* ── eko-hb__reviews-double-cadre ──────────────────────────── Le composant natif porte SA propre carte — fond blanc, rayon de 16 px, ombre. Or la colonne qui l'accueille en portait déjà une : celle qui encadrait les trois anciens widgets. D'où deux cadres imbriqués, signalés par Mathieu. On efface celui de la colonne, devenu sans objet, et on ne touche pas au composant : c'est lui qui doit rester, puisque c'est le rendu retenu. Les QUATRE propriétés comptent. Une première passe n'avait neutralisé que le fond, le rayon et l'ombre : il restait un rectangle vide de 1224 px, dessiné par le seul filet de bordure. Un cadre se défait en entier. Portée étroite : la seule section des avis de l'accueil. */ .eko-hb__reviews .elementor-column-wrap { background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }