/* Hero éditorial — Metaconcept Core. Charte metaconcept : OR #D5AE05, GRIS FONCÉ #4D4D4D. Les tokens du site (--c-link, --c-base) priment ; les valeurs de charte sont le repli. Aucune règle ne cible un sélecteur Divi, et aucune ne touche aux CTA : .gg-ref-cta est habillé par le CSS du site depuis l'ancien snippet, et le redéfinir ici créerait le deuxième endroit où un bouton peut changer d'avis. */ .mc-hero { --mc-gold: var(--c-link, #D5AE05); --mc-dark: var(--c-base, #4D4D4D); --mc-hero-fg: var(--mc-dark); --mc-hero-kicker: var(--mc-gold); } /* ------------------------------------------------------------------ 1. Avec image à la une : deux colonnes ------------------------------------------------------------------ La colonne média est posée en premier dans le balisage — sur une fiche produit, l'image EST le sujet. grid-template-columns porte un minmax(0, 1fr) et non 1fr : le plancher automatique d'une piste de grille est min-content, et un titre long élargirait la colonne au lieu de passer à la ligne. */ .mc-hero--avec-media { display: grid; /* 220 px. L'image est carrée : sa largeur EST la hauteur plancher du hero. Tant qu'elle faisait 360, aucun réglage de texte ne pouvait descendre la bande en dessous de 420 px. */ grid-template-columns: 220px minmax(0, 1fr); gap: 40px; /* UNE SEULE HAUTEUR DE BANDE POUR TOUTES LES PAGES PRODUIT. Une gamme porte moins de contenu qu'une fiche — pas de chapô long, pas de picto, pas de rangée de commande — et sa bande tombait à 303 px contre 425. Deux pages voisines dont la bande ne fait pas la même hauteur se voient au basculement de l'une à l'autre. La valeur est 400 px, demandée le 01/10 ; c'est un plancher, donc une fiche au chapô plus long reste libre de dépasser. */ min-height: 400px; box-sizing: border-box; /* center, depuis que les boutons sont remontés dans la colonne de texte : les deux colonnes ont désormais des hauteurs comparables, et c'est l'alignement centré qui les tient ensemble. */ align-items: center; } .mc-hero__media { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 16px; border: 1px solid rgba(77, 77, 77, 0.12); background: #fff; } .mc-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; } .mc-hero--sombre .mc-hero__media { border-color: rgba(255, 255, 255, 0.12); } /* ------------------------------------------------------------------ 2. Le corps ------------------------------------------------------------------ */ .mc-hero__corps { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--mc-hero-fg); } .mc-hero__kicker { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mc-hero-kicker); } .mc-hero__titre { margin: 0; max-width: 22ch; color: inherit; } .mc-hero__intro { margin: 0; max-width: 62ch; } .mc-hero__intro > p:first-child { margin-top: 0; } .mc-hero__intro > p:last-child { margin-bottom: 0; } .mc-hero__actions, .mc-hero__recherche { width: 100%; } /* La recherche produits garde sa largeur de champ confortable sans déborder d'une colonne étroite : un ne descend pas sous son attribut size tant que min-width n'est pas remis à zéro. */ .mc-hero__recherche { max-width: 620px; } .mc-hero__recherche input { min-width: 0; } /* ------------------------------------------------------------------ 2 bis. Le hero d'une archive de taxonomie ------------------------------------------------------------------ C'EST LA SECTION QUI PEINT, PAS LE HERO. Sur une fiche, le fond sombre vient de la section Divi, qui occupe toute la largeur de l'écran. Dans un gabarit d'archive, le hero est posé dans un module de code : peint lui-même, il donnerait une carte sombre flottant au milieu du blanc. PREMIÈRE TENTATIVE, ÉCARTÉE : étendre le hero aux bords de la fenêtre par des marges négatives en vw. Calcul juste, résultat faux — 100vw compte la barre de défilement, la page devenait plus large que la fenêtre, et tout glissait vers la gauche (relevé en direct le 02/10 : le fil d'Ariane et la barre utilitaire coupés au bord gauche). On fait donc peindre la SECTION qui contient le hero, exactement comme sur les fiches. Aucun vw, aucune marge négative, et le texte garde la largeur de lecture de la rangée sans qu'on y touche. */ #main-content .et_pb_section:has(.mc-hero--archive.mc-hero--sombre) { background-color: var(--mc-noir, #1A1816); background-image: linear-gradient(115deg, #1A1816 0%, #2A2620 55%, #3A332A 100%); } /* Le fil d'Ariane partage la section : sans ce rembourrage, il se colle au bord supérieur de la bande, juste sous l'en-tête. La règle du socle met ces sections à zéro — d'où le sélecteur un cran plus spécifique, avec body devant, plutôt qu'un !important. */ body #page-container .et_pb_section:has(.mc-hero--archive) { padding-top: 18px; } .mc-hero--archive { box-sizing: border-box; /* La même hauteur de bande que les fiches et les gammes, décidée le 01/10. C'est un plancher : un chapô long reste libre de dépasser. */ min-height: 400px; } /* ------------------------------------------------------------------ LA COLONNE DE DROITE — 15/10 ------------------------------------------------------------------ Demandée pour /cours-metaux/ : le titre à gauche comme sur toutes les autres pages, le graphique des cours à droite. POURQUOI UN SECOND MODIFICATEUR PLUTÔT QU'UN RÉGLAGE DU PREMIER. mc-hero--avec-media sert les fiches produit : 220 px à GAUCHE, parce que l'image y est le sujet et qu'elle est carrée. Un graphique ne tient ni dans 220 px ni à gauche du titre. Élargir la piste pour tout le monde aurait déplacé l'image de mille fiches ; on ajoute donc une variante, et les fiches ne bougent pas d'un pixel. LES DEUX PISTES SONT INÉGALES — 1fr contre 1,15fr. À parts égales le titre tombait sur trois lignes pendant que le graphique gardait du blanc à sa droite ; le graphique a besoin de largeur, le titre de moins. minmax(0, …) sur les deux : sans lui, le plancher d'une piste est min-content, et un mot long élargit la colonne au lieu de passer à la ligne. */ /* LA COLONNE SE RÈGLE EN PIXELS, ET C'EST VOULU — 15/10. Elle était en 1,15fr, donc 732 px sur un écran de 1440. Or le graphique des cours ne dessine pas au-delà de 388 px : mesuré dans le cadre, le contenu s'arrête là, et 309 px de la colonne restaient vides. Un graphique perdu au bord d'un grand rectangle vide se lit comme un défaut d'affichage. POURQUOI RESSERRER PLUTÔT QU'ÉTIRER. Le graphique est un SVG de 300 × 220 SANS viewBox, posé dans un carrousel qui place ses onze panneaux au pixel près. Il ne s'étire donc pas par la largeur. Un transform:scale() fonctionne — testé, le carrousel reste aligné — mais il agrandit dans les deux sens : pour remplir 697 px il faudrait une bande de 700 px de haut au lieu de 500, et toutes les pages du site tiennent la même hauteur de bande depuis le 01/10. On adapte donc le contenant au contenu, et non l'inverse. 452 PX = 400 pour le cadre + les 2 × 26 de rembourrage du panneau. 400 laisse 12 px de marge après les 388 utiles : de quoi encaisser une légende un peu plus large sans rien rogner. La variable permet de régler un autre bloc depuis Divi sans revenir ici. */ .mc-hero--media-droite { grid-template-columns: minmax(0, 1fr) minmax(0, var(--mc-hero-media, 452px)); align-items: center; } /* LA COLONNE CESSE D'ÊTRE UN CADRE CARRÉ — corrigé le 15/10, au vu du rendu. DEUX CHOSES ÉTAIENT POSÉES SUR .mc-hero__media POUR LES PHOTOS, et toutes deux se retournaient contre un graphique : • aspect-ratio 1/1. Sur une fiche, la colonne fait 220 px et la photo est carrée. Ici la colonne fait 732 px, donc la bande faisait 773 px de haut — mesuré — avec un panneau de 459 px perdu dans le vide et le titre flottant au milieu de rien. • le cadre blanc : fond, bordure, rayon, ombre. Le panneau des cours porte déjà les siens, il se retrouvait encadré deux fois. LE PRÉFIXE #page-container N'EST PAS DÉCORATIF. La règle du cadre est écrite « #page-container .mc-hero__media » dans composants.css — un IDENTIFIANT. Une correction en classes seules ne pouvait pas gagner : c'est exactement la panne du lien « Voir tout le catalogue » le matin même, et je l'ai refaite l'après-midi. La règle sans préfixe reste dessous, pour le cas où le hero serait servi hors de #page-container. */ .mc-hero--media-droite .mc-hero__media, #page-container .mc-hero--media-droite .mc-hero__media { aspect-ratio: auto; height: auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } @media (max-width: 900px) { /* Sous 900 px la grille est déjà repliée en une colonne par la règle de mc-hero--avec-media. Il reste à défaire le plafond de 260 px posé pour les images carrées : un graphique illisible sur 260 px de large ne sert à rien. */ .mc-hero--media-droite .mc-hero__media { max-width: none; } } /* Sans image, la grille à deux colonnes ne s'applique pas : on centre le texte dans la hauteur plutôt que de le coller en haut d'une bande de 400 px. */ .mc-hero--archive:not(.mc-hero--avec-media) { display: flex; flex-direction: column; justify-content: center; padding-top: 36px; padding-bottom: 36px; } /* Le chapô d'une archive est souvent la description du terme, écrite pour le référencement : on la laisse respirer sans la laisser courir sur toute la largeur de l'écran. */ .mc-hero--archive .mc-hero__intro { max-width: 86ch; } /* ------------------------------------------------------------------ 3. Variante sombre — accueil, recyclage ------------------------------------------------------------------ */ .mc-hero--sombre { --mc-hero-fg: #FFFFFF; --mc-hero-kicker: var(--mc-gold); } .mc-hero--sombre .mc-hero__intro { color: rgba(255, 255, 255, 0.86); } /* ------------------------------------------------------------------ 4. Mobile ------------------------------------------------------------------ */ @media (max-width: 900px) { .mc-hero--avec-media { grid-template-columns: minmax(0, 1fr); gap: 28px; } .mc-hero__media { max-width: 260px; } } @media (max-width: 640px) { .mc-hero__titre { max-width: none; } .mc-hero__corps { gap: 12px; } } /* ------------------------------------------------------------------ 5. La bande autour d'un bloc hérité ------------------------------------------------------------------ [mc_hero variante="sombre"][sc_h1_et_intro][/mc_hero] pose la bande des archives autour d'un balisage que nous n'écrivons pas : un

nu et un

, sortis du shortcode hérité des quatre pages pivots. Ces deux-là ne portent donc pas .mc-hero__titre ni .mc-hero__intro. Plutôt que de recopier les règles, on les leur applique : ce sont les mêmes rôles, rendus par d'autres mains. */ .mc-hero--herite .mc-hero__corps > h1 { margin: 0; max-width: 22ch; color: inherit; } .mc-hero--herite .mc-hero__corps > p.intro { margin: 0; max-width: 86ch; } .mc-hero--sombre.mc-hero--herite .mc-hero__corps > p.intro { color: rgba(255, 255, 255, 0.86); } /* ------------------------------------------------------------------ 6. UN HERO POSÉ DANS UNE PAGE, ET NON DANS UN GABARIT ------------------------------------------------------------------ Sur les archives, le hero est rendu par le gabarit du Theme Builder : il occupe la ligne entière. Posé dans une PAGE, il vit dans un module texte de Divi, et deux choses lui arrivent. 1. IL RÉTRÉCIT. .et_pb_text_inner est un conteneur flex ; le hero en devient un ÉLÉMENT flex, qui prend la largeur de son contenu au lieu de celle de son parent. Mesuré le 05/10 sur /presentation/ : 546 px au lieu de 1 040, le texte tassé à gauche et la moitié droite de la bande vide. width:100% le remet à sa place, quel que soit le display du parent — c'est une largeur, pas une rustine contre flex. 2. IL DOUBLE SA HAUTEUR. La bande .mc-sec-hero--bande ajoute 40 px en haut et en bas, ce qui est juste quand elle entoure un titre nu — c'est le cas de la page Formations. Mais .mc-hero--archive garantit déjà 400 px : les deux ensemble donnaient 480 px, soit une bande plus haute que partout ailleurs sur le site. Quand la bande contient déjà un hero, elle lui laisse sa hauteur. L'important est nécessaire : Divi 5 écrit l'espacement de ses sections dans un @layer, et une déclaration importante d'un layer l'emporte sur une déclaration importante hors layer. */ .mc-hero { width: 100%; } body #page-container .et_pb_section.mc-sec-hero--bande:has(.mc-hero--archive) { padding-top: 0 !important; padding-bottom: 0 !important; } /* 6.1 — LE CENTRAGE QUI NE VENAIT PAS DE NOUS ------------------------------------------------------------------ Dans un module texte Divi, les paragraphes reçoivent une marge horizontale « auto ». Dans un flux normal elle ne se voit pas ; dans notre colonne flex, une marge auto absorbe l'espace libre et CENTRE l'élément. Mesuré le 05/10 sur /presentation/ : le sur-titre partait à 776 px quand le H1 restait à 338 — un seul des trois éléments décalé, ce qui se lit comme une erreur de maquette alors que c'est une marge héritée. La règle vise les enfants du corps, et non le seul sur-titre : le jour où le chapô ou les boutons passeront en

, ils tomberaient dans le même piège. Aucune variante de hero ne centre son texte horizontalement — vérifié dans cette feuille — donc rien n'est perdu. L'important est là pour la même raison qu'au-dessus : Divi 5 écrit ces marges dans un @layer, et un @layer l'emporte sur l'important hors layer. */ body #page-container .mc-hero__corps > * { margin-left: 0 !important; margin-right: 0 !important; }