/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


/
MacBook Pro de Augustin, Connecté
Modifié un fichier, créé un fichier, et 3 étapes supplémentaires
Le menu Ressources est prêt dans mega-menu-ressources.html. Il suit la même structure que les deux autres menus.

Bandeau : en vert (HoliGREEN avec un léger dégradé), avec la tagline “Toutes les clés pour maîtriser votre HACCP”. Chaque menu a ainsi sa couleur : orange pour Produit, bleu pour Secteurs, vert pour Ressources.
Colonne Ressources : Blog et Guides et ebooks, les deux entrées de l’ancien dropdown, avec une icône et une courte description chacune.
Colonne “À télécharger” : les 3 guides et ebooks actuellement en ligne, avec leurs vraies URLs. Il y a le guide des températures de conservation, l’ebook sur l’inspection d’hygiène et celui sur les capteurs connectés. Ce sont vos aimants à leads : les mettre directement dans le menu leur donne plus de visibilité que la page liste.
Pied de menu : “Une question sur votre HACCP ? Contactez-nous →”.
Tous les liens sont réels, il n’y a aucun lien provisoire.

J’ai aussi mis à jour hf-mega-menu.css avec la variante verte du bandeau. Remplace la version du thème par celle-ci, sinon le bandeau du menu Ressources s’affichera en orange. Rien ne change pour les menus Produit et Secteurs.

Quand l’ebook “Guide HACCP pour les cuisines collectives” sera publié, il suffira de dupliquer un bloc de la colonne “À télécharger” pour l’ajouter. Je peux aussi le faire pour toi.


Hf mega menu
Code·CSS 

Mega menu ressources
Code·HTML 
Dans l'idée de faire une tagline avec un fond différents, que propose tu pour le fond de l'onglet ressource ?

Choisissant des couleurs alternatives pour la bande de ressources.
Choisissant des couleurs alternatives pour la bande de ressources.
Pour que les trois menus se distinguent bien, il faut une couleur assez éloignée de l’orange (Produit) et du bleu (Secteurs). Voici mes pistes, toutes tirées de la palette secondaire :

HoliPURPLE (#826094) : c’est ma recommandation. Le violet évoque le savoir et l’éditorial, ce qui colle bien à des ressources. C’est la couleur la plus éloignée des deux autres bandeaux, donc la différence se voit au premier coup d’œil. Le surlignage jaune ressort très bien dessus.
HoliGREEN (#007f47) : c’est la version actuelle. Elle fonctionne et évoque la fraîcheur et la conformité. Son défaut : le vert est déjà utilisé pour les icônes Commande, Stock et Retail, donc il est un peu moins “propre” à ce menu.
HoliNAVY (#0079ed) : sobre et sérieux, mais trop proche du bleu du menu Secteurs. Quelqu’un qui passe d’un onglet à l’autre ne verrait presque pas la différence.
HoliYellow (#FFBC4D) : chaleureux, mais il faudrait passer le texte en gris foncé pour qu’il reste lisible, et le surlignage jaune ne se verrait plus. Ça casse la cohérence avec les deux autres bandeaux.
Je partirais sur le violet, avec un léger dégradé comme le bleu. Dis-moi si ça te va et je mets à jour le CSS et le menu Ressources. Le changement tient en deux lignes.

Fait moi une proposition HoliYellow

Modifié 2 fichiers, partagé 3 fichiers, exécuté une commande
apercu-bandeaux.html montre les trois bandeaux les uns sous les autres, puis le menu Ressources complet en jaune.

La version HoliYellow :

Fond : un léger dégradé jaune, d’un jaune clair à un jaune plus chaud, comme pour le bleu.
Texte : en gris foncé HoliDARK, puisque le blanc ne serait pas lisible sur du jaune.
Surlignage : “maîtriser votre HACCP” passe dans une pastille blanche avec le texte en HoliRed, puisque la pastille jaune habituelle disparaîtrait sur ce fond.
Cercles en filigrane : un peu plus marqués, pour rester visibles sur un fond clair.
Mon avis : le jaune distingue bien le menu, et la pastille blanche avec le texte rouge rend la tagline très lisible. Mais c’est le seul bandeau à texte foncé : il paraît plus léger et moins “marque” que les deux autres, presque comme un bandeau d’information. À toi de voir dans l’aperçu si ça te convient ou si le violet tiendrait mieux la série.

hf-mega-menu.css et mega-menu-ressources.html sont déjà passés en jaune. J’ai gardé la variante verte dans le CSS : pour revenir en arrière, il suffit de remplacer --yellow par --green dans le HTML.


Hf mega menu
Code·CSS 

Mega menu ressources
Code·HTML 

Apercu bandeaux
Code·HTML 
J'aime bien ta proposition. Tu as adapter le code ?

Oui, c’est déjà fait. Les deux fichiers que je t’ai envoyés avec l’aperçu sont à jour :

hf-mega-menu.css contient la variante jaune. Remplace tout le CSS du thème par cette version.
mega-menu-ressources.html utilise déjà le bandeau jaune. Colle-le dans le module du menu Ressources.
Rien ne change pour les menus Produit et Secteurs : leur HTML reste le même, ils profitent juste du CSS mis à jour.


Vous avez utilisé 90 % de votre limite de session.


Hf mega menu · CSS
/* ==========================================================================
   Holifresh - Méga menus (Produit + Secteurs + Ressources)
   CSS commun, à coller dans la feuille de style du thème HubSpot.
   Desktop uniquement.
 
   Tout est préfixé .hf-mm et renforcé (double classe + !important) pour ne
   pas hériter des styles du menu du thème (tirets, couleurs de liens, fonds).
   Les polices Josefin Sans / Cabin sont supposées déjà chargées par le thème.
 
   Sommaire
   1. Base et reset
   2. Bandeau tagline (orange par défaut, variantes --blue, --green, --yellow)
   3. Mises en page (2/3 - 1/3 et 1/2 - 1/2)
   4. Titres et groupes
   5. Liens avec icône (modules, secteurs)
   6. Pastilles d'icônes (couleurs)
   7. Carte Capteurs
   8. Success stories
   9. Pied de menu
   ========================================================================== */
 
 
/* 1. Base et reset ------------------------------------------------------- */
 
.hf-mm.hf-mm *::before,
.hf-mm.hf-mm *::after {
  content: none !important;
  display: none !important;
}
 
.hf-mm.hf-mm {
  font-family: "Cabin", Aptos, Lato, Calibri, sans-serif !important;
  color: #272727 !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
.hf-mm.hf-mm * { box-sizing: border-box !important; }
 
 
/* 2. Bandeau tagline ----------------------------------------------------- */
 
.hf-mm.hf-mm .hf-mm__tagline {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 0 18px !important;
  padding: 18px 24px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: radial-gradient(circle at 15% 130%, #DA3B17 0%, #FF914D 55%, #FFBC4D 115%) !important;
  text-align: center !important;
  font-family: "Josefin Sans", "Cabin", sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #ffffff !important;
}
 
/* Variante bleue (menu Secteurs) : HoliBlue avec un léger dégradé */
.hf-mm.hf-mm .hf-mm__tagline--blue {
  background: radial-gradient(circle at 85% -40%, #74C2EA 0%, #4DADDF 45%, #3496D0 110%) !important;
}
 
/* Variante verte : HoliGREEN avec un léger dégradé */
.hf-mm.hf-mm .hf-mm__tagline--green {
  background: radial-gradient(circle at 85% -40%, #1FA067 0%, #007f47 50%, #006a3b 110%) !important;
}
 
/* Variante jaune (menu Ressources) : HoliYellow avec un léger dégradé.
   Fond clair : texte en HoliDARK et surlignage en pastille blanche. */
.hf-mm.hf-mm .hf-mm__tagline--yellow {
  background: radial-gradient(circle at 85% -40%, #FFD68A 0%, #FFBC4D 50%, #FFA92E 110%) !important;
  color: #272727 !important;
}
.hf-mm.hf-mm .hf-mm__tagline--yellow .hf-mm__tagline-text { color: #272727 !important; }
.hf-mm.hf-mm .hf-mm__tagline--yellow .hf-mm__tagline-highlight {
  background: #ffffff !important;
  color: #DA3B17 !important;
}
.hf-mm.hf-mm .hf-mm__tagline--yellow .hf-mm__pulse { border-color: rgba(255, 255, 255, .55) !important; }
.hf-mm.hf-mm .hf-mm__tagline--yellow .hf-mm__pulse--r2 { border-color: rgba(255, 255, 255, .35) !important; }
.hf-mm.hf-mm .hf-mm__tagline--yellow .hf-mm__pulse--r3 { border-color: rgba(255, 255, 255, .2) !important; }
 
.hf-mm.hf-mm .hf-mm__tagline-text {
  position: relative !important;
  z-index: 1 !important;
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #ffffff !important;
}
.hf-mm.hf-mm .hf-mm__tagline-highlight {
  display: inline-block !important;
  margin: 0 !important;
  padding: 2px 10px 0 !important;
  border-radius: 8px !important;
  background: #FFBC4D !important;
  color: #272727 !important;
}
 
/* Cercles HoliCIRCLE décoratifs */
.hf-mm.hf-mm .hf-mm__pulse {
  position: absolute !important;
  z-index: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, .35) !important;
  background: none !important;
  pointer-events: none !important;
}
.hf-mm.hf-mm .hf-mm__pulse--r1 { width: 120px !important; height: 120px !important; right: -30px !important; top: -40px !important; }
.hf-mm.hf-mm .hf-mm__pulse--r2 { width: 200px !important; height: 200px !important; right: -70px !important; top: -80px !important; border-color: rgba(255, 255, 255, .2) !important; }
.hf-mm.hf-mm .hf-mm__pulse--r3 { width: 280px !important; height: 280px !important; right: -110px !important; top: -120px !important; border-color: rgba(255, 255, 255, .1) !important; }
.hf-mm.hf-mm .hf-mm__pulse--l1 { width: 90px !important; height: 90px !important; left: -30px !important; bottom: -40px !important; }
.hf-mm.hf-mm .hf-mm__pulse--l2 { width: 160px !important; height: 160px !important; left: -65px !important; bottom: -75px !important; border-color: rgba(255, 255, 255, .18) !important; }
 
 
/* 3. Mises en page ------------------------------------------------------- */
 
/* Produit : 2/3 - 1/3 */
.hf-mm.hf-mm .hf-mm__layout {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  column-gap: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Secteurs : 1/2 - 1/2 */
.hf-mm.hf-mm .hf-mm__layout-half {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
}
 
.hf-mm.hf-mm .hf-mm__col { margin: 0 !important; padding: 0 !important; min-width: 0 !important; }
.hf-mm.hf-mm .hf-mm__col--divider {
  display: flex !important;
  flex-direction: column !important;
  padding-left: 32px !important;
  border-left: 1px solid #eeeeee !important;
}
 
/* Sous-colonnes à l'intérieur d'une colonne */
.hf-mm.hf-mm .hf-mm__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hf-mm.hf-mm .hf-mm__grid--tight { column-gap: 16px !important; }
 
 
/* 4. Titres et groupes --------------------------------------------------- */
 
.hf-mm.hf-mm .hf-mm__title {
  display: block !important;
  font-family: "Josefin Sans", "Cabin", sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: #272727 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
 
.hf-mm.hf-mm .hf-mm__group { margin: 0 !important; padding: 0 !important; }
.hf-mm.hf-mm .hf-mm__group + .hf-mm__group { margin-top: 12px !important; }
 
.hf-mm.hf-mm .hf-mm__group-label {
  display: block !important;
  font-family: "Cabin", Aptos, Lato, Calibri, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #737373 !important;
  margin: 0 0 2px !important;
  padding: 0 0 0 10px !important;
  border: 0 !important;
  background: none !important;
}
 
 
/* 5. Liens avec icône ---------------------------------------------------- */
 
.hf-mm.hf-mm a.hf-mm__link {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #272727 !important;
  box-shadow: none !important;
  transition: background-color .15s ease !important;
}
.hf-mm.hf-mm a.hf-mm__link:hover,
.hf-mm.hf-mm a.hf-mm__link:focus-visible {
  background: #fff7f1 !important;
  outline: none !important;
}
 
.hf-mm.hf-mm .hf-mm__text {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}
 
.hf-mm.hf-mm .hf-mm__name {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  font-family: "Cabin", Aptos, Lato, Calibri, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  color: #272727 !important;
  text-transform: none !important;
  transition: color .15s ease !important;
}
.hf-mm.hf-mm a:hover .hf-mm__name,
.hf-mm.hf-mm a:focus-visible .hf-mm__name { color: #4DADDF !important; }
 
.hf-mm.hf-mm .hf-mm__desc {
  display: block !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  font-family: "Cabin", Aptos, Lato, Calibri, sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #737373 !important;
  text-transform: none !important;
}
 
 
/* 6. Pastilles d'icônes -------------------------------------------------- */
 
.hf-mm.hf-mm .hf-mm__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #4DADDF !important;
  color: #ffffff !important;
}
.hf-mm.hf-mm .hf-mm__icon svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.hf-mm.hf-mm .hf-mm__icon svg * {
  fill: none !important;
  stroke: #ffffff !important;
}
 
/* Palette Holifresh */
.hf-mm.hf-mm .hf-mm__icon--blue   { background: #4DADDF !important; } /* HoliBlue   */
.hf-mm.hf-mm .hf-mm__icon--red    { background: #DA3B17 !important; } /* HoliRed    */
.hf-mm.hf-mm .hf-mm__icon--orange { background: #FF914D !important; } /* HoliOrange */
.hf-mm.hf-mm .hf-mm__icon--yellow { background: #FFBC4D !important; } /* HoliYellow */
.hf-mm.hf-mm .hf-mm__icon--green  { background: #007f47 !important; } /* HoliGREEN  */
.hf-mm.hf-mm .hf-mm__icon--navy   { background: #0079ed !important; } /* HoliNAVY   */
.hf-mm.hf-mm .hf-mm__icon--purple { background: #826094 !important; } /* HoliPURPLE */
.hf-mm.hf-mm .hf-mm__icon--pink   { background: #ce2258 !important; } /* HoliPINK   */
.hf-mm.hf-mm .hf-mm__icon--grey   { background: #737373 !important; } /* HoliGREY   */
 
 
/* 7. Carte Capteurs ------------------------------------------------------ */
 
.hf-mm.hf-mm a.hf-mm__sensor-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #fff7f1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  color: #272727 !important;
  box-shadow: none !important;
  transition: box-shadow .15s ease !important;
}
.hf-mm.hf-mm a.hf-mm__sensor-card:hover,
.hf-mm.hf-mm a.hf-mm__sensor-card:focus-visible {
  box-shadow: 0 4px 16px rgba(39, 39, 39, .08) !important;
  outline: none !important;
}
 
.hf-mm.hf-mm .hf-mm__sensor-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 140px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
}
.hf-mm.hf-mm .hf-mm__sensor-visual img {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain !important;
  border: 0 !important;
  box-shadow: none !important;
}
 
.hf-mm.hf-mm .hf-mm__sensor-cta {
  display: block !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #4DADDF !important;
  background: none !important;
}
.hf-mm.hf-mm a.hf-mm__sensor-card:hover .hf-mm__sensor-cta { text-decoration: underline !important; }
 
 
/* 8. Success stories ----------------------------------------------------- */
 
.hf-mm.hf-mm a.hf-mm__story {
  display: block !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  text-decoration: none !important;
  text-transform: none !important;
  color: #272727 !important;
  box-shadow: none !important;
  transition: background-color .15s ease !important;
}
.hf-mm.hf-mm a.hf-mm__story:hover,
.hf-mm.hf-mm a.hf-mm__story:focus-visible {
  background: #fff7f1 !important;
  outline: none !important;
}
 
.hf-mm.hf-mm .hf-mm__story-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}
 
.hf-mm.hf-mm .hf-mm__tag {
  display: inline-block !important;
  margin: 0 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: rgba(77, 173, 223, .15) !important;
  color: #0079ed !important;
  font-family: "Cabin", Aptos, Lato, Calibri, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
 
.hf-mm.hf-mm a.hf-mm__more {
  display: inline-block !important;
  margin: 8px 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #4DADDF !important;
  text-decoration: none !important;
  text-transform: none !important;
}
.hf-mm.hf-mm a.hf-mm__more:hover,
.hf-mm.hf-mm a.hf-mm__more:focus-visible { text-decoration: underline !important; }
 
 
/* 9. Pied de menu -------------------------------------------------------- */
 
.hf-mm.hf-mm .hf-mm__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 10px 0 0 !important;
  padding: 10px 10px 0 !important;
  border: 0 !important;
  border-top: 1px solid #eeeeee !important;
  font-size: 14px !important;
  color: #737373 !important;
}
.hf-mm.hf-mm a.hf-mm__cta {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  font-weight: 700 !important;
  color: #4DADDF !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
}
.hf-mm.hf-mm a.hf-mm__cta:hover,
.hf-mm.hf-mm a.hf-mm__cta:focus-visible { text-decoration: underline !important; }
 
Claude a terminé sa réponse.