/* Fil d'Ariane — Metaconcept Core. Remplace dipi_breadcrumbs. Charte metaconcept : OR #D5AE05, GRIS FONCÉ #4D4D4D. Les tokens du site (--c-link, --c-base) priment ; les valeurs de charte sont le repli. */ .mc-breadcrumbs { font-size: 13px; line-height: 1.5; } .mc-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .mc-breadcrumbs__item { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; } .mc-breadcrumbs__item a { color: var(--c-base, #4D4D4D); text-decoration: none; transition: color .16s cubic-bezier(.22, 1, .36, 1); } .mc-breadcrumbs__item a:hover, .mc-breadcrumbs__item a:focus-visible { color: var(--c-link, #D5AE05); } .mc-breadcrumbs__item [aria-current="page"] { color: var(--c-base, #4D4D4D); font-weight: 600; } .mc-breadcrumbs__sep { color: #C7CBD0; } /* ------------------------------------------------------------------ LE FIL D'ARIANE POSÉ SUR LA BANDE SOMBRE ------------------------------------------------------------------ Sur une fiche, il occupe sa propre section claire, au-dessus du hero. Le gabarit d'archive, lui, n'a que trois sections : le fil et le hero partagent la première, et depuis que cette section peint son fond sombre, le fil s'y retrouve en gris foncé sur brun — lisible de justesse, et il donnait l'impression de passer DERRIÈRE la bande (relevé le 02/10 sur /applications/alliages-fusibles/). On ne le déplace pas pour autant : un fil d'Ariane posé sur la bande est une disposition courante et lisible, à condition d'être écrit en clair. Le blanc à 72 % tient le contraste exigé sur ce brun, et la page courante monte à 92 % pour rester la plus lisible des trois. La règle se déclenche sur la PRÉSENCE d'un hero sombre dans la même section : aucune classe à ajouter dans les gabarits. Elle ne dit plus « hero d'ARCHIVE sombre » mais « hero sombre » (02/10) : si le fil est un jour posé dans la section du hero d'une fiche ou d'une gamme — la structure la plus simple, une section au lieu de deux — il y est écrit en clair sans une ligne de CSS de plus. */ /* ------------------------------------------------------------------ POURQUOI « :not(.mc-lp-hero) » SUR CES QUATRE RÈGLES — 08/10 ------------------------------------------------------------------ Signalé sur /moules-silicone-fabrication-bijoux/ : le dernier maillon du fil sortait en blanc sur la bande claire, donc invisible. La cause est une différence de structure que « même section » ne distingue pas : — sur une archive comme /produits/, la section ENTIÈRE est sombre (mesuré : #1A1816 derrière le fil). Le blanc y est juste, et ces règles doivent continuer de s'appliquer ; — sur une page d'atterrissage, le hero est un BLOC sombre posé dans une section claire. Le fil est au-dessus de lui, sur le clair — et pourtant dans la même section. La règle mordait, et écrivait blanc sur clair. On ne peut pas trancher en CSS sur la couleur réelle du fond : elle vient d'un réglage Divi numéroté, pas d'une classe. Mais on peut trancher sur la FORME, et c'est la vraie différence : un hero de LP porte mc-lp-hero, une bande d'archive non. D'où l'exclusion, qui ne retire rien aux pages où le blanc était justifié. Vérifié le 08/10 : le fil est blanc sur /produits/ (fond #1A1816) et redevient sombre sur les pages LP (fond blanc). ------------------------------------------------------------------ */ .et_pb_section:has(.mc-hero--sombre:not(.mc-lp-hero)) .mc-breadcrumbs__item a { color: rgba(255, 255, 255, 0.72); } .et_pb_section:has(.mc-hero--sombre:not(.mc-lp-hero)) .mc-breadcrumbs__item a:hover, .et_pb_section:has(.mc-hero--sombre:not(.mc-lp-hero)) .mc-breadcrumbs__item a:focus-visible { color: var(--mc-or, #D5AE05); } .et_pb_section:has(.mc-hero--sombre:not(.mc-lp-hero)) .mc-breadcrumbs__item [aria-current="page"] { color: rgba(255, 255, 255, 0.92); } .et_pb_section:has(.mc-hero--sombre:not(.mc-lp-hero)) .mc-breadcrumbs__sep { color: rgba(255, 255, 255, 0.38); } /* Fil et hero dans la MÊME section : il faut dégager le haut, sinon le fil se colle sous l'en-tête fixe. Même valeur que les archives, qui sont déjà dans ce cas. */ .et_pb_section:has(.mc-breadcrumbs):has(.mc-hero) { padding-top: 18px; } .et_pb_section:has(.mc-hero--sombre) .mc-breadcrumbs { margin-bottom: 18px; } /* ------------------------------------------------------------------ LE FIL FAIT PARTIE DE LA BANDE DU HERO — PARTOUT ------------------------------------------------------------------ ARBITRAGE DU 02/10, 14 h. Trois états essayés dans la journée ; celui-ci est le dernier, et il est pris pour une raison claire : l'uniformité à coût nul. Les quatre gabarits d'archive (Alliage, Forme, Application, Élément) posent le fil DANS la section du hero — c'est la structure livrée ce matin, et la ressortir demanderait de rouvrir les quatre gabarits dans le Theme Builder. Les fiches, les gammes et les pages, elles, donnent au fil sa propre section. Deux familles, deux rendus. Plutôt que d'éditer quatre gabarits, on aligne par le CSS : la section du fil, quand elle précède immédiatement un hero sombre, reprend la matière de ce hero. Le fil se lit alors partout comme le haut de la bande sombre, qu'il soit dans la section du hero ou juste au-dessus. Aucun gabarit à ouvrir, sur aucune des deux familles. LE RACCORD. Le dégradé du hero est à 135°. Sur une bande très large et très courte (59 px) son axe est presque horizontal, sur le hero (400 à 433 px) un peu moins ; les deux premiers tiers se superposent assez pour que la jonction ne se voie pas — vérifié à l'écran avant d'être écrit. Un aplat uni, lui, avait été essayé le 01/10 (#151311) : il donnait une couture franche sur toute la largeur, c'est le « fond noir » relevé sur la fiche CS000006. LA VALEUR EST RECOPIÉE DU GABARIT DIVI, qui la porte sur la section du hero : une section Divi ne peut pas prêter son fond à sa voisine. Elle est isolée dans une variable, pour n'avoir qu'un endroit à corriger si le hero change de teinte. SI UN JOUR ON VEUT L'INVERSE — le fil sur fond clair partout, comme les formations avant aujourd'hui — il faudra sortir le fil de la section du hero dans les quatre gabarits d'archive, puis supprimer ce bloc. Le reste du fichier est déjà prêt pour ce cas. */ :root { --mc-bande-sombre: linear-gradient(135deg, #3A352A 0%, #262420 55%, #1C1B18 100%); } #main-content .et_pb_section.mc-sec-ariane:has(+ .et_pb_section .mc-hero--sombre) { background: var(--mc-bande-sombre); border-bottom: none; } #main-content .et_pb_section.mc-sec-ariane:has(+ .et_pb_section .mc-hero--sombre) .mc-breadcrumbs__item a { color: rgba(255, 255, 255, 0.72); } #main-content .et_pb_section.mc-sec-ariane:has(+ .et_pb_section .mc-hero--sombre) .mc-breadcrumbs__item a:hover, #main-content .et_pb_section.mc-sec-ariane:has(+ .et_pb_section .mc-hero--sombre) .mc-breadcrumbs__item a:focus-visible { color: var(--mc-or, #D5AE05); } #main-content .et_pb_section.mc-sec-ariane:has(+ .et_pb_section .mc-hero--sombre) .mc-breadcrumbs__item [aria-current="page"] { color: rgba(255, 255, 255, 0.92); } #main-content .et_pb_section.mc-sec-ariane:has(+ .et_pb_section .mc-hero--sombre) .mc-breadcrumbs__sep { color: rgba(255, 255, 255, 0.38); } /* Le fil d'Ariane n'a pas sa place sur l'accueil. */ .home .mc-breadcrumbs { display: none; } /* ------------------------------------------------------------------ La section qui ne porte QUE le fil d'Ariane ------------------------------------------------------------------ Mesuré le 30/09 sur la fiche RR100005 : 383 px pour une ligne de texte de 20 px. Trois épaisseurs s'additionnent — 72 px de section en haut et en bas, 36 px de ligne de chaque côté, et 128 px de marge haute posés par une règle du site sur la PREMIÈRE ligne de la première section : #main-content .et-l .et_pb_section:first-child .et_pb_row:first-child { margin-top: 8rem !important } Ces 128 px ne sont pas une erreur : ils dégagent l'en-tête fixe, qui recouvre sinon le haut du contenu. On les garde. Ce qu'on retire, c'est le double rembourrage d'une section qui n'a rien à espacer. :has() ancre la règle sur notre propre composant : elle ne peut pas atteindre une section qui ne porte pas de fil d'Ariane, quel que soit l'ordre des sections dans un gabarit. */ .et_pb_section:has(.mc-breadcrumbs) { padding-top: 0; padding-bottom: 0; } .et_pb_section:has(.mc-breadcrumbs) .et_pb_row { padding-top: 12px; padding-bottom: 12px; }