autour — aucun style de marge ne s'applique donc plus (`.article__description-- start__text p{ margin:0 }`, style.css, ne concerne que les vrais

), d'où le titre collé au texte qui suit (repéré par l'utilisateur, capture à l'appui, "partout" = ce même schéma sur toutes les catégories). */ body.theme-v19 .article__description--start__text h2{ margin: 0 0 var(--ev-space-2xs); } /* Titre de carte produit (grille "Gammes de produits") sur 1 ligne pour un nom court ("Poêle à granulés A10 Light") mais 2 lignes pour un nom plus long ("... A10 Classic Plus") : chaque carte a sa propre grille interne (style.css `.article__item-content{ grid-template-areas: "title" "description" ... }`), indépendante des cartes voisines — la zone description démarre donc juste après SON titre à elle, à une hauteur qui varie d'une carte à l'autre selon que le titre tienne sur 1 ou 2 lignes, ce qui décale tout le bas de carte (description, CTA) d'une carte à l'autre sur une même rangée (repéré par l'utilisateur, capture à l'appui). Hauteur de titre réservée pour 2 lignes systématiquement (les titres plus courts gardent l'espace vide plutôt que de laisser la description remonter), + line-clamp à 2 lignes en garde-fou si jamais un titre futur était encore plus long. */ body.theme-v19 .article--list .article__item-content .title{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; } /* Fiche article (main.article--details) : après le bandeau .page-hero (fond pleine largeur, mais avec son propre .container interne pour le texte — inchangé ici), tout le reste de la page (tableau de caractéristiques + blocs paragraphe : personnalisation, accordéons...) est enveloppé dans un vrai

Bootstrap (style.css : `.container-fluid{ max-width: var(--ev-container-fluid- max-width, initial) }`, donc réellement illimité), contrairement au reste du site qui passe systématiquement par .container (~1140px) ou --ev-grid-max-width (1420px). Résultat : le corps de la fiche s'étire en continu avec la largeur d'écran, jusqu'à ~2530px de large mesuré sur un viewport de 2560px — repéré par l'utilisateur ("container fluide"), qui ne correspond à aucune autre page du site. Recentré avec les mêmes valeurs que .container (mêmes variables). Certains blocs à l'intérieur (ex. .color-palette__container) ont déjà leur propre max-width/padding interne : sans effet indésirable ici, la colonne qui les contient (.article__container--criteria, grille 70/30) est de toute façon déjà plus étroite que --ev-grid-max-width à tous les gabarits d'écran courants — leur propre contrainte ne s'active donc jamais en pratique. */ body.theme-v19 main.article--details > .container-fluid{ max-width: var(--ev-grid-max-width); margin-inline: auto; padding-inline: var(--ev-grid-gutter); } /* Le tableau de caractéristiques (.article__criteria, 2e colonne de la grille 70/30 .article__container--criteria) doit rester aéré/continuer jusqu'au bord droit de l'écran, contrairement à la colonne de texte à sa gauche qui reste dans le conteneur recentré ci-dessus (demande explicite de l'utilisateur, capture à l'appui — pas un retour en arrière sur le recentrage : seule cette colonne "casse" volontairement le conteneur). Marge négative = exactement l'espace retiré par le recentrage ci-dessus (padding-right du conteneur + la moitié de l'espace au-delà de --ev-grid-max-width, quand l'écran est plus large) ; padding-right repose ensuite un peu d'air propre entre le tableau et le vrai bord de l'écran plutôt qu'un collage complet — porté à 62px (largeur mesurée d'un bouton rond de #sidebar_cta, fixed right:0, présent sur toutes les pages) + le gutter habituel : sans cette marge, les valeurs alignées à droite du tableau (ex. "3,4 – 9,3") passaient sous les boutons flottants au lieu de s'arrêter avant (#sidebar_cta est vertical, ~30% de la hauteur d'écran, mais .article__criteria est sticky sur ~88vh : les deux se croisent forcément pendant le défilement). */ body.theme-v19 .article--details .article__criteria{ /* --ev-grid-gutter fixé en dur ici (2.5rem, PAS la variable) : ce calc n'agit qu'à partir de 992px (colonne masquée en dessous), où le gutter fluide vaut maintenant moins que 2.5rem jusqu'à 1420px — réduire ce padding-right réduirait d'autant le dégagement déjà ajusté au pixel près contre #sidebar_cta (62px, largeur mesurée du bouton rond fixed), recréant le chevauchement que ce correctif visait justement à éviter. Comportement figé à l'identique d'avant le passage du gutter en fluide. */ margin-right: calc(-1 * (2.5rem + max(0px, (100vw - var(--ev-grid-max-width)) / 2))); padding-right: calc(62px + 2.5rem); } /* ============ FICHE ARTICLE — TABLEAU DE CARACTÉRISTIQUES ============ style.css ne fixe aucune taille de police pour .article__criteria-item : il hérite donc du corps de texte courant (--ev-step-0, 16-18px selon la largeur d'écran) — correct pour un paragraphe, mais visuellement gros pour un tableau dense de caractéristiques techniques (repéré par l'utilisateur, capture à l'appui : 18px à 1440px). Ramené à --ev-step--1 (12.8-14.2px), déjà utilisé ailleurs sur le site pour ce type de texte secondaire dense (badges, aide de formulaire...). */ body.theme-v19 .article--details .article__criteria-item{ font-size: var(--ev-step--1); } /* Trait sous "Informations générales"/"Technologies" (.article__criteria-title ::after, style.css) : `background-color: var(--ev-primary-300, var(--ev-neutral))` — --ev-primary-300 n'est jamais défini à la racine (seulement à l'intérieur de classes utilitaires .text-danger/.bg-success/etc., sans rapport ici), retombe donc sur --ev-neutral (#25303b, un bleu-ardoise sombre) — perçu comme bleu par l'utilisateur, capture à l'appui. Recoloré en rouge (--ev-primary), cohérent avec les autres accents/soulignés du thème. Règle déjà commune à toutes les fiches produit avec tableau de caractéristiques (aucun scope supplémentaire nécessaire pour "partout"). */ body.theme-v19 .article--details .article__criteria-title::after{ background-color: var(--ev-primary); } /* Puces "Couleurs disponibles" (critère à plusieurs valeurs, ex. "# blanc", "# noir"...) : style.css transforme ces liens en chips grises génériques (background #e9ecef, texte #495057, contour gris #d0d0d0, préfixe "#" en ::before) — un style de secours neutre, sans rapport avec la charte du site, avec ce "#" que l'utilisateur n'aime pas (capture à l'appui). Repassé en marine doux plutôt que rouge (1er essai) : ces puces affichent de VRAIES couleurs produit (blanc, noir, bordeaux...) — les teinter toutes en rouge égalait leur sens informatif à celui d'un CTA, incohérent avec .label-secondary (badge catégorie des cartes produit, plus haut dans ce fichier) déjà repassé en marine pour la même raison de badge informatif plutôt qu'accent. Rouge réservé aux boutons/CTA/accents (bouton "Découvrir nos produits", traits sous les titres...), marine aux badges d'info — cohérence gardée entre les deux badges similaires du site plutôt qu'un choix isolé au cas par cas. */ /* !important nécessaire sur color : style.css groupe ce même sélecteur avec .btn (`.btn, .article--details .article__criteria-item:not( [data-tag-number="1"]) a { color: var(--btn-color) !important }`) — --btn-color n'est jamais définie ici (aucune classe .btn-primary/ .btn-outline-primary posée sur ce lien), var() invalide retombe alors sur la couleur héritée (gris ~#666, ni le gris d'origine ni la nôtre). !important nécessaire sur padding pour la même raison : une autre règle de style.css pose `padding: var(--ev-space-2xs) var(--ev-space-m) var(--ev-space-xs) !important` (haut ≠ bas, ~10px/~15px) — texte décalé verticalement dans la puce plutôt que centré (repéré par l'utilisateur, capture à l'appui). Repassé symétrique. */ body.theme-v19 .article--details .article__criteria-item:not([data-tag-number="1"]) a{ background-color: color-mix(in srgb, var(--ev-navy) 8%, white); color: var(--ev-navy) !important; border: 1px solid color-mix(in srgb, var(--ev-navy) 25%, white); padding: var(--ev-space-2xs) var(--ev-space-m) !important; } body.theme-v19 .article--details .article__criteria-item:not([data-tag-number="1"]) a::before{ content: none; } body.theme-v19 .article--details .article__criteria-item:not([data-tag-number="1"]) a:hover, body.theme-v19 .article--details .article__criteria-item:not([data-tag-number="1"]) a:focus{ background-color: var(--ev-navy); color: #fff !important; border-color: var(--ev-navy); } /* ============ FICHE ARTICLE — BLOCS OBJET DANS LA COLONNE ÉTROITE ============ `.article__container--criteria` (posée par details.html.twig uniquement si criteriaGroup est défini — donc seulement quand un tableau de caractéristiques existe) réduit la colonne de contenu (paragraphes, FAQ...) à ~70% de la largeur de page, au lieu de la pleine largeur. Les blocs "objet" du CMS insérés dans cette colonne (accordéon FAQ, palette de couleurs...) sont conçus par objet.css pour occuper jusqu'à --ev-grid-max-width (1420px) en 2 colonnes côte à côte (question/kicker à gauche, contenu à droite) — cette disposition ne passe déjà en 1 colonne empilée qu'en dessous de 992px de LARGEUR D'ÉCRAN (media query), qui ne sait rien de la largeur réelle, bien plus étroite, de cette colonne à 70%. Résultat sur desktop large : les 2 sous-colonnes de l'accordéon FAQ ("Questions fréquentes sur...") se retrouvaient écrasées sur ~400px chacune, texte des questions cassé n'importe où, gros vide sous le bandeau de titre à gauche pendant que les questions s'empilent à droite — repéré par l'utilisateur ("tout est décalé"), capture à l'appui. Rebasculé en disposition empilée (comme sous 992px) dès que ce bloc est dans la colonne étroite, quelle que soit la largeur d'écran réelle. */ body.theme-v19 .article__container--criteria .accordion__row{ flex-direction: column; } body.theme-v19 .article__container--criteria .accordion__header:has(.accordion__figure){ flex: 1; } /* .accordion__body-wrap (liste des questions) a `margin-top:3.25rem` (52px, objet.css) : pensé pour la disposition 2 colonnes d'origine, où ce décalage aligne à peu près le haut des questions sur le texte du titre à côté. Une fois rebasculé en pile (règle ci-dessus), ce même décalage devient un grand vide entre le titre et la 1ère question — déjà neutralisé par objet.css en dessous de 992px de largeur d'écran (même schéma que la correction précédente), mais pas dans ce cas (colonne étroite due au tableau de caractéristiques, largeur d'écran normale) — repéré par l'utilisateur, capture à l'appui. */ body.theme-v19 .article__container--criteria .accordion__body-wrap{ margin-top: 0; } /* Même cause, sur le FAQ accordéon de l'accueil (#accordion-90029, avec image ajoutée à la demande de l'utilisateur) : objet.css pousse `.accordion__body-wrap` de 3.25rem (52px) vers le bas, pensé pour compenser la hauteur du seul titre+kicker à côté (disposition d'origine, sans image) — une fois une image ajoutée sous le titre, ce décalage fixe n'a plus de rapport avec le contenu réel de la colonne de gauche et pousse la 1ère question plus bas que le haut de l'image, sans raison — repéré par l'utilisateur ("l'image ne doit pas être décalée par rapport aux questions"). Scopé à cet objet précis (pas une règle générale sur .accordion__header:has(.accordion__figure), qui existe aussi ailleurs sur des fiches produit non concernées par cette demande). */ body.theme-v19 #accordion-90029 .accordion__body-wrap{ margin-top: 0; } /* Titre collé à l'image (#accordion-90029) : objet.css prévoit un espace au-dessus de la figure (`.accordion__figure{ margin-top: var(--ev-space-m) }`) mais TROIS règles l'écrasent en cascade : `body.theme-v19 figure{ margin:0 }` (reset générique, plus haut dans ce fichier) est déjà battue par `figure{ margin:0 !important }` posée par style.css (sélecteur nu, sans scoping — probablement un reset générique visant blockquote/figure/etc.), qui gagne quelle que soit la spécificité en face tant qu'elle n'est pas elle-même battue par un autre !important — vérifié via CSS.getMatchedStylesForNode (CDP), qui montre la valeur finale calculée à 0px malgré la règle `.accordion__figure` d'objet.css. D'où le titre collé directement au sommet de l'image, sans le moindre espace — repéré par l'utilisateur, capture à l'appui. !important nécessaire ici pour la même raison que `.grid-column{ gap:...!important }` un peu plus haut dans ce fichier. Pas scopé à #accordion-90029 : la même figure `.accordion__figure` existe aussi sur plusieurs fiches produit (ex. "Tout savoir sur l'insert à granulés") avec exactement le même bug latent, jamais signalé jusqu'ici mais pas propre à l'accueil — restaure l'espacement prévu par objet.css partout où ce composant a une image. */ body.theme-v19 .accordion__figure{ margin-top: var(--ev-space-m) !important; } /* "Espace sous la dernière question" / section qui semble décalée (#accordion-90029) : `.accordion__row{ display:flex }` (objet.css, sans align-items déclaré donc stretch par défaut) étire la colonne de gauche (.accordion__header, titre+kicker+image) à la même hauteur que la colonne de droite (.accordion__body-wrap, 4 questions + bouton, plus haute) — mais l'image elle-même garde sa taille fixe (400px), elle ne grandit pas avec cet étirement invisible : il reste donc un bloc de vide blanc sous l'image, à peu près à la hauteur du bouton "Une autre question ?" en face — repéré par l'utilisateur (capture, flèche sous le bouton). Fait grandir l'image elle-même pour occuper tout l'espace disponible dans la colonne étirée (recadrée en hauteur via object-fit:cover, sans déformation ni recadrage horizontal) au lieu de laisser un vide à côté d'elle. Scopé à cet objet précis : les autres accordéons avec image (fiches produit) ont une seule question courte en face, pas de déséquilibre de hauteur comparable à corriger là-bas. */ body.theme-v19 #accordion-90029 .accordion__header{ display: flex; flex-direction: column; } body.theme-v19 #accordion-90029 .accordion__figure{ flex: 1 1 auto; min-height: 0; } body.theme-v19 #accordion-90029 .accordion__img{ width: 100%; height: 100%; object-fit: cover; } /* Kicker "Les réponses qui peuvent faire la différence" en pastille grise (#accordion-90029) : objet.css le stylise via `.accordion__header .accordion__description` (fond gris clair, contour arrondi en pilule, texte marine) — un style repris de l'exemple produit dont ce markup est issu (nécessaire pour placer correctement l'image, cf. plus haut), mais visuellement à part du reste de l'accueil, où chaque section utilise le même kicker "eyebrow" : texte rouge, majuscules, sans fond ni contour (ex. "CONSEILS" sur .blog-news, "Où nous trouver" sur .location-map) — repéré par l'utilisateur en comparant les deux captures. Réaligné sur ce même style .eyebrow (mêmes jetons --ev-eyebrow-*) plutôt que d'inventer une couleur : cohérent avec tout le reste de la page. Scopé à cet objet précis : la pastille grise reste inchangée sur les fiches produit qui utilisent la même figure (pas concernées par cette demande, propre à l'accueil). */ body.theme-v19 #accordion-90029 .accordion__description{ background: none; border: none; border-radius: 0; padding: 0; display: block; width: auto; color: var(--ev-eyebrow-color); font-family: var(--ev-heading-font-family); font-size: var(--ev-eyebrow-font-size); font-weight: var(--ev-eyebrow-font-weight); letter-spacing: var(--ev-eyebrow-letter-spacing); text-transform: var(--ev-eyebrow-case); margin: 0 0 var(--ev-eyebrow-margin-bottom); } /* Le texte du kicker vit dans un

imbriqué (`

...

`) : `body.theme-v19 p{ color:... }` plus haut dans ce fichier matche ce

DIRECTEMENT et l'emporte sur la couleur seulement héritée du div ci-dessus, quelle que soit sa spécificité (même leçon que .color-palette__description / .callout-color-bg__description déjà rencontrée dans ce fichier). */ body.theme-v19 #accordion-90029 .accordion__description p{ color: inherit; margin: 0; } /* .accordion (bloc FAQ, ex. "Questions fréquentes sur ...") n'a lui-même aucune marge propre (contrairement à .color-palette, plus haut, qui en a une) : collé directement au bloc paragraphe précédent, dont le bouton CTA se retrouvait à ~8px du kicker "Les réponses qui peuvent faire la différence" du FAQ suivant — repéré par l'utilisateur sur une fiche produit, capture à l'appui, demande explicite "partout dans le site" (le bloc FAQ est un objet CMS générique, réutilisé sur toute fiche produit qui en a un, pas propre à cette seule page). Même espace que .color-palette pour une respiration cohérente entre blocs consécutifs. */ body.theme-v19 .accordion{ margin-top: var(--ev-space-l); } /* .accordion__item-header (question + bouton +/-) : objet.css ne pose pas d'align-items (défaut "stretch") — sur desktop la question tient sur 1 ligne, ça ne se voit pas, mais sur mobile une question longue passe sur 4-5 lignes ("Quelle est la puissance de chauffe du poêle à granulés 10 Lisa ?") : le bouton s'étire alors sur toute cette hauteur et l'icône +/- à l'intérieur (simple , pas elle-même centrée) atterrit collée en haut du bouton au lieu d'être alignée avec le texte — flottement visuel au milieu du bloc, repéré par l'utilisateur ("pas tout à fait responsive"), demande explicite "partout" (composant CMS générique, réutilisé sur toutes les fiches produit avec FAQ). Bouton aligné en haut de la question (aligné à la 1ère ligne, lecture naturelle) plutôt qu'étiré, et centré sur lui-même quelle que soit sa hauteur propre. */ body.theme-v19 .accordion__item-header{ align-items: flex-start; } body.theme-v19 .accordion__item-toggler{ display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.2em; } /* public/assets/css/style.css:7061 pose `.article__criteria-label{ white-space: nowrap }` sans exception mobile : le libellé le plus long d'une fiche produit (ex. "Puissance électrique en fonctionnement (W)") forçait alors `.article__criteria-item` (flex row, sans wrap) à dépasser du viewport (débordement horizontal mesuré : 39px à 375px). Fichier tiers non modifié : autorisé à repasser à la ligne uniquement sous 768px, où la place manque (au-dessus, la sidebar sticky a la place voulue). */ @media (max-width: 767px) { body.theme-v19 .article--details .article__criteria-label{ white-space: normal; } } /* ============ BLOC OBJET "CALLOUT-COLOR-BG" — IMAGE OPTIONNELLE ============ .callout-color-bg (ex. objet 16072 "<<<#entreprise.nom#>>>, le confort d'un chauffage performant et élégant", page "À propos") a par défaut une flamme SVG décorative posée en ::after par objet.css, hotlink vers l'ancien CDN Nobis (/nobis/svg/abstract-1.svg) — demande de l'utilisateur : remplacer cette flamme par un VRAI champ image (400x400), configurable à gauche ou à droite, capture à l'appui. CONTRAT (à copier tel quel pour un nouvel objet basé sur ce même bloc, ou pour un objet EXISTANT qui utilise déjà .callout-color-bg et qu'on veut faire passer à une image réelle) : - ajouter, en enfant direct de .callout-color-bg__container, À CÔTÉ de .callout-color-bg__content (pas dedans) :

- data-position="right" ou "left" choisit le côté. - ACTIVER/DÉSACTIVER l'image (config demandée par l'utilisateur) : ajouter l'attribut HTML `hidden` sur la balise
pour la désactiver (texte seul, sans flamme, qui reprend automatiquement toute la largeur disponible — voir juste en dessous) ; retirer `hidden` pour la réactiver. Rien d'autre à changer : l'attribut `src`/position restent en place, prêts à réafficher l'image telle quelle dès que `hidden` est retiré. RÉTROCOMPATIBILITÉ (sujet explicite de l'utilisateur — 3 autres objets utilisent déjà .callout-color-bg SANS ce champ image du tout : 16070 (pages 2606244871/2606244872), 16071 (page 2606244873)) : tout est scopé via :has(.callout-color-bg__media), donc SANS EFFET sur un objet qui n'a pas ajouté cette figure — il continue de s'afficher exactement comme avant (texte seul + flamme SVG en ::after, inchangée). La flamme n'est neutralisée QUE sur les instances qui ont VRAIMENT une figure .callout- color-bg__media dans leur HTML — qu'elle soit actuellement affichée ou désactivée via `hidden` (un objet qui a adopté ce nouveau système d'image ne doit plus jamais revoir l'ancienne flamme, même image désactivée) ; seule la mise en page à 2 colonnes (texte + image) dépend elle de :not([hidden]) — désactivée, le texte repasse en 1 colonne centrée pleine largeur automatiquement, pas besoin d'ajuster autre chose. */ body.theme-v19 .callout-color-bg:has(.callout-color-bg__media)::after{ content: none; } body.theme-v19 .callout-color-bg__container:has(.callout-color-bg__media:not([hidden])){ display: flex; align-items: center; gap: var(--ev-space-xl); flex-wrap: wrap; } body.theme-v19 .callout-color-bg__container:has(.callout-color-bg__media:not([hidden])) .callout-color-bg__content{ flex: 1 1 380px; min-width: 0; max-width: none; } /* Image désactivée (hidden) ou tout simplement absente : le texte reprend toute la largeur du conteneur, centré, plutôt que de rester calé à gauche avec un grand vide à droite (l'ancien espace de la flamme). */ body.theme-v19 .callout-color-bg__container:has(.callout-color-bg__media[hidden]) .callout-color-bg__content{ max-width: 640px; margin-inline: auto; text-align: center; } body.theme-v19 .callout-color-bg__media{ flex: 0 0 auto; width: min(400px, 100%); aspect-ratio: 1 / 1; border-radius: var(--ev-border-radius); overflow: hidden; margin: 0; } body.theme-v19 .callout-color-bg__media img{ width: 100%; height: 100%; object-fit: cover; display: block; } body.theme-v19 .callout-color-bg__media[data-position="left"]{ order: -1; } @media (width < 640px) { /* Empilé verticalement plutôt que côte à côte trop resserré : image après le texte quel que soit data-position (le texte doit rester lu en premier sur mobile). */ body.theme-v19 .callout-color-bg__media{ order: 1; width: 100%; max-width: 400px; margin-inline: auto; } } /* Espace avant/après la carte : objet.css pose padding-block:var(--ev-space-2xl) (jusqu'à 96px en haut ET en bas) sur .callout-color-bg — pensé pour une section pleine largeur entre 2 blocs de page, ça fait beaucoup de vide une fois que .callout-color-bg est une carte blanche compacte avec ses propres coins arrondis (repéré par l'utilisateur, capture à l'appui, traits au-dessus du titre et en dessous du bouton/image). Réduit à --ev-space-l : s'applique aux 4 objets existants (composant partagé), aucun n'a signalé ce padding réduit comme un problème. */ body.theme-v19 .callout-color-bg{ padding-block: var(--ev-space-l); } /* Espace titre -> description : objet.css pose .callout-color-bg__description { margin-block: var(--ev-space-l) ... } (48px au-dessus), redéfini une 2e fois plus loin dans le fichier avec la même valeur — la règle de reset .callout-color-bg__content > *{ margin:0 } (même spécificité, plus tôt dans le fichier) ne l'emporte donc pas. Repéré par l'utilisateur sur la variante centrée sans image, capture à l'appui, mais la règle est commune aux 4 objets qui partagent ce composant. Resserré à --ev-space-xs. */ body.theme-v19 .callout-color-bg__description{ margin-top: var(--ev-space-xs); } /* ============ BLOC OBJET "CALLOUT-COLOR-BG" — COULEUR DE FOND ============ Demande de l'utilisateur : pouvoir choisir le fond de la carte entre blanc/clair, rouge et bleu marine (les 3 couleurs de la charte), avec une config pour ça — en vérifiant d'abord si ça existe déjà. ÇA EXISTAIT DÉJÀ EN PARTIE, MAIS CASSÉ : le
porte un style inline `--bg-color: var(--ev-light)` (visible sur les 4 objets existants), qui ressemble à une config de couleur... mais objet.css n'utilise JAMAIS cette variable : `.callout-color-bg{ background-color: var(--ev-light) }` est câblé en dur. Ce style inline n'a donc jamais eu d'effet, sur aucun des 4 objets. Remplacé par un mécanisme qui fonctionne réellement. CONFIG (attribut `data-theme` posé directement sur l'élément qui porte la classe .callout-color-bg —
, PAS sur le
parent, qui ne porte pas cette classe) — 3 valeurs : data-theme="light" fond clair (défaut actuel), titre/texte marine, bouton rouge plein data-theme="primary" fond rouge, titre/texte blancs, bouton inversé (fond blanc, texte rouge) data-theme="navy" fond marine, titre/texte blancs, bouton rouge plein (déjà lisible sur marine, même traitement que .final-cta ailleurs sur le site) Sans attribut data-theme du tout (objet qui n'a pas encore adopté cette config) : comportement inchangé, fond clair par défaut — rétrocompatible avec les 4 objets existants. */ body.theme-v19 .callout-color-bg[data-theme="primary"]{ background-color: var(--ev-primary); } body.theme-v19 .callout-color-bg[data-theme="navy"]{ background-color: var(--ev-navy); } /* .callout-color-bg__description contient un
(contenu CSV) : lui poser color:#fff ne suffit pas, un
matche directement `body.theme-v19 p` (même passé en :where() plus haut dans ce fichier, pour battre .color- palette__description au même titre) — un
a beau être moins spécifique, une couleur posée DIRECTEMENT sur un élément l'emporte toujours sur une couleur seulement HÉRITÉE d'un ancêtre (même leçon que .color-palette__description un peu plus haut) : il faut viser le
lui -même, pas seulement son parent .callout-color-bg__description. */ body.theme-v19 .callout-color-bg[data-theme="primary"] .callout-color-bg__title, body.theme-v19 .callout-color-bg[data-theme="primary"] .callout-color-bg__description, body.theme-v19 .callout-color-bg[data-theme="primary"] .callout-color-bg__description p, body.theme-v19 .callout-color-bg[data-theme="navy"] .callout-color-bg__title, body.theme-v19 .callout-color-bg[data-theme="navy"] .callout-color-bg__description, body.theme-v19 .callout-color-bg[data-theme="navy"] .callout-color-bg__description p{ color: #fff; } body.theme-v19 .callout-color-bg[data-theme="primary"] .btn-primary{ background: #fff !important; border-color: #fff !important; color: var(--ev-primary) !important; } /* ============ BARRE DE DÉBOGAGE SYMFONY (web debug toolbar) ============ Repéré par l'utilisateur en bas de page (capture) : "Loading the web debug toolbar… Attempt #1" restait bloqué au lieu de disparaître, au lieu du contenu normal de la barre (temps de réponse, requêtes SQL…). Ce texte de secours vient de WebProfilerBundle lui-même (vendor/symfony/ web-profiler-bundle/Resources/views/Profiler/cancel.html.twig) : la barre se charge normalement via une requête JS de fond vers /_wdt/{token} une fois la page affichée, et affiche ce placeholder tant que cette requête n'a pas abouti. Cause probable, hors périmètre de ce dépôt : nobis.arbi.entmail.fr est derrière une passerelle SSO (auth.arbi.entmail.fr, vérifié — toute requête vers le domaine, y compris de simples pages, y est redirigée) ; si cette passerelle intercepte aussi la requête de fond vers /_wdt/*, celle-ci échoue en boucle et la barre reste bloquée sur ce message. Cette passerelle est configurée au niveau de l'infrastructure (VPS/Cloudflare), pas dans ce dépôt (nobis/_save) : aucun fichier ici ne peut agir dessus. En local (sans cette passerelle), la même requête répond 200 sans problème — le mécanisme applicatif lui-même n'est pas en cause. Cette barre est un outil de DEBUG DEV uniquement (jamais censée être vue par un vrai visiteur, cf. APP_ENV=dev documenté dans CLAUDE.md) : on la masque entièrement plutôt que de laisser cet état cassé visible, y compris son "clearer" (réservait l'espace en bas de page pour elle, sinon un vide inutile subsisterait à sa place une fois masquée). */ body.theme-v19 .sf-toolbar, body.theme-v19 .sf-toolbar-clearer{ display: none !important; } /* ============ H3 CMS dans un bloc "paragraph" (ex. page mentions légales : "Éditeur du site :", "Hébergeur du site :"...) ============ Le contenu vient du back-office sous forme de
Titre :
Texte...
directement dans .paragraph__description, sans
autour du texte (un H3 n'est pas autorisé dans un
, donc le navigateur referme le
dès qu'il le rencontre) : le texte qui suit est un simple nœud de texte, pas un bloc. style.css ne fixe aucune marge sur h1..h6 (laissée aux composants), donc seule la marge propre du H3 sépare le titre du texte — ici quasi nulle, d'où le collage titre/texte repéré par l'utilisateur. */ body.theme-v19 .paragraph__description h2, body.theme-v19 .paragraph__description h3{ margin: var(--ev-space-m) 0 var(--ev-space-3xs); } body.theme-v19 .paragraph__description h2:first-child, body.theme-v19 .paragraph__description h3:first-child{ margin-top: 0; } /* ============ OBJET CMS #16552 "Nos services de débouchage WC et sanitaires" ============ Import eva-section du 2026-09-14 (objet.csv/objet.css/objet.js, cf. _sources/Nos services de débouchage WC et sanitaires.zip). Son thème `data-theme="section-transparent"` force `padding: 0 ... !important` en haut (objet.css) — pensé pour s'empiler SANS coupure sous une section colorée, mais ici collé directement à .final-cta juste au-dessus (repéré par l'utilisateur). Ciblé par ID plutôt que sur `[data-theme="section- transparent"]` en général : ce thème est réutilisable par d'autres objets (actuels ou futurs) où ce padding nul en haut peut être voulu. */ #eva_section-16552{ padding-top: var(--ev-space-2xl) !important; } /* Titre illisible dans les pastilles "visible-cadre" (fond rouge, cf. capture utilisateur) : objet.css met le texte en blanc via `color: var(--eva-theme-card-title-color)` sur .eva-card__title-link (le lien qui porte le fond dégradé), mais .eva-card__title-text hérite aussi de la classe .item-title — un utilitaire du thème V19 (générique, utilisé par plein d'autres cartes du site) qui pose sa propre couleur (bleu marine) *directement* sur ce même span. Une valeur posée directement bat toujours une valeur héritée, quelle que soit la spécificité : d'où le texte marine au lieu du blanc voulu. Pas propre à l'objet #16552 : tout futur import eva-section avec ce style de titre buterait sur le même conflit. */ body.theme-v19 .eva-section[data-show-title="visible-cadre"] .eva-card__title-text.item-title{ color: #fff; }

` pour un titre de carte d'article, `

Titre

(bloc dans bloc) : le navigateur ferme le
avant, laissant le

Titre :

` pour un titre de carte d'article, `

Titre

(bloc dans bloc) : le navigateur ferme le avant, laissant le

Titre :

(bloc dans bloc) : le navigateur ferme le
avant, laissant le