Lancement d'un nouveau site de démonstration

Tôt · Oct 04, 2026, 03:47 PM

Bonjour,

Je vous présente un tout nouveau site de démonstration.

Pour ce projet, j'ai choisi de ne pas intégrer le menu burger classique afin de simplifier la navigation : l'ensemble des liens redirige ainsi l'utilisateur vers la page d'accueil.

Veuillez noter que le lien « Mentions légales », situé en bas à droite, n'est volontairement pas actif. S'agissant d'un défi personnel et non d'un site destiné à la production, la création de cette page n'était pas requise.

Je vous souhaite une excellente visite.

SITE

Cordialement,

Tôt · Oct 04, 2026, 04:01 PM

Re,

J'ai finalement intégré la page « Mentions légales » afin de vous proposer une version de démonstration totalement complète.

Par ailleurs, concernant la section « Contact & Accès », le module de formulaire n'a pas été activé.
Vous pouvez toutefois tester son fonctionnement exact via le module disponible sur la page « Réservation », qui utilise le même système.

Je vous souhaite une excellente fin de week-end et une bonne visite.

Cordialement,

Sylvain · Oct 05, 2026, 08:59 AM

Bonjour Tôt,

J'ai regardé ton site sur petit et grand écran. C'est moderne, très agréable à consulter, très réussi graphiquement. bravo !

La diversité de blocs et de "boutons" que tu utilises peut être une mine pour Deltacms. On est justement en train de développer à côté des gabarits pour Tinymce des éléments que l'on nomme "Composants" et qui regroupent actuellement les éléments avec image et vidéo déjà dans la 6101 mais avec un paramétrage intégré, exemple avec le composant texte sur image :

You cannot view this attachment.

Tu as eu recours à pas mal de script html saisi en code source, ce qui est souvent délicat et qui se prête mal au réemploi. C'est pour ça que ces "Composants" et les "Gabarits" ont été créés puis développés dans Deltacms.

L'idée serait que tu définisses selon tes besoins un composant et ses besoins de paramétrage et qu'on puisse les proposer.

Cordialement

PS : le menu burger est très léger avec ses possibilités de transparence, ce serait peut être mieux que "Retour à l'accueil"

Tôt · Oct 05, 2026, 05:46 PM

Propositions de Composants pour DeltaCMS (Basé sur la maquette demo4)

Bonjour,

Merci beaucoup pour votre retour positif sur la modernité, l'esthétique et le comportement responsive de ma maquette !

Effectivement, vous avez vu juste : pour cette démo, j'ai massivement eu recours à du style *inline* et à des événements JavaScript (`onmouseenter` / `onmouseleave`) saisis directement dans le code source afin d'obtenir rapidement les animations et effets visuels au survol. C'est pratique pour une maquette statique, mais c'est une solution lourde, délicate et peu adaptée au réemploi pour un utilisateur final.

L'idée de transformer ces éléments en **"Composants" natifs et paramétrables dans TinyMCE** pour DeltaCMS est excellente. Pour vous aider à concevoir l'interface de configuration de ces nouveaux modules, voici le code source complet extrait de ma page, structuré en 3 grands composants logiques avec la liste des variables qu'il serait idéal de pouvoir administrer :

---

#### 1. Composant : "Bandeau Hero Inversé" (Section 1)
Ce bloc crée un fort impact visuel en scindant l'écran en deux : une identité visuelle sombre à gauche, et un appel à l'action clair et épuré à droite.
* **Champs paramétrables suggérés :**
* *Partie Gauche (Sombre) :* Slogan/Accroche haute (ex: "Maison Fondée en 2026"), Titre Principal (H1), Court texte descriptif.
* *Partie Droite (Claire) :* Titre de section (H2), Paragraphe d'introduction, Bouton Principal (Texte + Lien), Bouton Secondaire (Texte + Lien).
* *Option globale :* Choix de la couleur d'accentuation (actuellement le doré `#c5a880`).

<details>

Code Sélectionner

<p>&nbsp;</p>
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #222222; max-width: 1200px; margin: 0 auto; padding: 20px;">
        <div style="display: flex; flex-wrap: wrap; background: #fdfdfd; border: 1px solid #eaeaea; border-radius: 12px; overflow: hidden; margin-bottom: 50px; box-shadow: 0 4px 20px rgba(0,0,0,0.02);">
                <!-- Côté gauche : Identité visuelle sombre textuelle -->
                <div style="flex: 1; min-width: 300px; background: #1a1a1a; color: #ffffff; padding: 50px 40px; display: flex; flex-direction: column; justify-content: center;">
                        <span style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 3px; color: #c5a880; font-weight: bold; margin-bottom: 15px; display: block;">Maison Fond&eacute;e en 2026</span>
                        <h1 style="font-size: 2.4rem; font-weight: bold; color: #ffffff; margin: 0 0 15px 0; line-height: 1.2; letter-spacing: -0.5px;">L'&Eacute;picurien</h1>
                        <div style="width: 40px; height: 2px; background: #c5a880; margin-bottom: 20px;"></div>
                        <p style="font-size: 1.05rem; color: #cccccc; line-height: 1.6; margin: 0 0 25px 0;">Une table d'exception o&ugrave; la haute gastronomie rencontre la convivialit&eacute;.</p>
                </div>
                <!-- Côté droit : Appel à l'action lumineux -->
                <div style="flex: 1.2; min-width: 300px; padding: 50px 40px; display: flex; flex-direction: column; justify-content: center; background: #fafafa;">
                        <h2 style="font-size: 1.6rem; font-weight: 600; color: #1a1a1a; margin: 0 0 15px 0;">Une exp&eacute;rience sensorielle dict&eacute;e par la nature</h2>
                        <p style="font-size: 1rem; color: #666666; line-height: 1.6; margin: 0 0 30px 0;">D&eacute;couvrez une cuisine sincere, centr&eacute;e sur la puret&eacute; des go&ucirc;ts et le respect absolu du produit local de saison.</p>
                        <div style="display: flex; flex-wrap: wrap; gap: 15px;">
                                <a href="reservation" style="display: inline-block; background-color: #c5a880; color: #ffffff !important; text-decoration: none !important; padding: 14px 28px; font-weight: 600; font-size: 0.9rem; border-radius: 6px; transition: background 0.3s;" onmouseenter="this.style.backgroundColor='#1a1a1a'" onmouseleave="this.style.backgroundColor='#c5a880'"> R&eacute;server une table </a> 
                                <a href="univers" style="display: inline-block; background-color: transparent; color: #1a1a1a !important; border: 1px solid #1a1a1a; text-decoration: none !important; padding: 14px 28px; font-weight: 600; font-size: 0.9rem; border-radius: 6px; transition: all 0.3s;" onmouseenter="this.style.backgroundColor='#1a1a1a'; this.style.color='#ffffff'" onmouseleave="this.style.backgroundColor='transparent'; this.style.color='#1a1a1a'"> Notre univers </a>
                        </div>
                </div>
        </div>

----

#### 2. Composant : "Contenu Éditorial + Encart Pratique" (Section 2)
Idéal pour raconter une histoire ou présenter une philosophie, tout en affichant de manière structurée des données pratiques (horaires, adresse) sur une carte latérale dotée d'une bordure colorée.
* **Champs paramétrables suggérés :**
* *Zone Éditoriale (Gauche) :* Surlignage du titre (ex: "L'exigence du fait maison"), Titre (H2), blocs de paragraphes libres.
* *Encart Infos (Droite) :* Titre de l'encart (ex: "Informations Utiles"), Bloc de données 1 (Titre + Contenu), Bloc de données 2 (Titre + Contenu), Ligne d'avertissement basse facultative (en italique).

Code Sélectionner

        <div id="decouvrir" style="display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; align-items: stretch;">
                <!-- Texte descriptif (Histoire & Philosophie) -->
                <div style="flex: 1.2; min-width: 300px; display: flex; flex-direction: column; justify-content: center;">
                        <span style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: #c5a880; font-weight: bold; display: block; margin-bottom: 10px;">L'exigence du fait maison</span>
                        <h2 style="font-size: 1.9rem; font-weight: 600; margin: 0 0 20px 0; color: #1a1a1a; letter-spacing: -0.5px;">Le Chef &amp; Son Savoir-Faire</h2>
                        <p style="font-size: 1.05rem; color: #555555; line-height: 1.7; margin: 0 0 20px 0;">Men&eacute;e avec passion, notre &eacute;quipe s'efforce de sublimer les tr&eacute;sors de nos terroirs. Nous travaillons main dans la main avec des mara&icirc;chers, &eacute;leveurs et artisans passionn&eacute;s pour vous garantir une fra&icirc;cheur absolue de la terre &agrave; l'assiette.</p>
                        <p style="font-size: 1.05rem; color: #555555; line-height: 1.7; margin: 0;">Chaque assiette raconte une histoire, un &eacute;quilibre subtil entre textures craquantes, &eacute;mulsions l&eacute;g&egrave;res et sauces d'exception r&eacute;duites avec patience.</p>
                </div>
                <!-- Carte latérale des coordonnées et horaires -->
                <div style="flex: 0.8; min-width: 300px; background: #ffffff; border-right: 4px solid #c5a880; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; border-left: 1px solid #eaeaea; padding: 40px; border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between;">
                        <div>
                                <h3 style="margin: 0 0 20px 0; font-size: 1.25rem; font-weight: 600; color: #1a1a1a; letter-spacing: -0.3px;">Informations Utiles</h3>
                                <div style="margin-bottom: 20px;">
                                        <p style="font-size: 0.9rem; font-weight: bold; margin: 0 0 5px 0; color: #c5a880;">Nos Horaires</p>
                                        <p style="font-size: 0.95rem; color: #555555; margin: 0; line-height: 1.5;">Du Mardi au Samedi<br>12h00 - 14h00 | 19h00 - 21h30</p>
                                </div>
                                <div>
                                        <p style="font-size: 0.9rem; font-weight: bold; margin: 0 0 5px 0; color: #c5a880;">Notre Adresse</p>
                                        <p style="font-size: 0.95rem; color: #555555; margin: 0; line-height: 1.5;">Av. de l'&Eacute;picerie 42,<br>4000 Li&egrave;ge, Belgique</p>
                                </div>
                        </div>
                        <div style="margin-top: 30px; padding-top: 20px; border-top: 1px dashed #eaeaea; font-size: 0.9rem; color: #666666; font-style: italic;">* Les animaux de compagnie bien &eacute;lev&eacute;s sont accept&eacute;s en salle.</div>
                </div>
        </div>

Tôt · Oct 05, 2026, 05:47 PM

Suite puisque le forum bloque à 2000 caractères...

-----

#### 3. Composant : "Grille Fluid de Cartes Multi-Colonnes" (Section 3)
Ce bloc repose sur une grille CSS (`display: grid`) totalement responsive qui s'adapte sans media-queries. L'effet d'élévation CSS au survol (`translateY(-6px)`) donne un aspect très applicatif.
* **Champs paramétrables suggérés :**
* *En-tête du bloc :* Titre global (H2) + ligne de séparation.
* *Configuration par Carte (Répétable / Duplicable à l'infini) :* Sélection de l'icône, Titre, Mention/Prix, Description, Texte du lien + URL.
* *Option de mise en avant :* Une case à cocher permettant de basculer la bordure supérieure de la carte en doré au lieu de la couleur sombre par défaut (utilisé pour les cartes *Signature* et *Suggestions*).

Code Sélectionner



        <div style="margin-bottom: 40px;">
                <div style="text-align: center; margin-bottom: 40px;">
                        <h2 style="font-size: 1.8rem; font-weight: 600; margin: 0 0 10px 0; color: #1a1a1a;">Nos Formules &amp; Menus d'&Eacute;motion</h2>
                        <div style="width: 60px; height: 2px; background: #c5a880; margin: 0 auto;"></div>
                </div>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px;">
                        
                        <!-- Carte 1 -->
                        <div onmouseenter="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 15px 35px rgba(197, 168, 128, 0.15)'; this.style.borderColor='#c5a880';" onmouseleave="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 10px rgba(0,0,0,0.03)'; this.style.borderColor='#eaeaea';" style="background: #ffffff; border: 1px solid #eaeaea; border-top: 4px solid #1a1a1a; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); min-height: 320px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 8px; cursor: pointer;">
                                <div>
                                        <div style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fdfdfd; border: 1px solid #eaeaea; border-radius: 50%; color: #c5a880; font-size: 1.2rem; margin-bottom: 25px;"><i class="fa-solid fa-sun"></i></div>
                                        <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;">
                                                <h3 style="font-size: 1.3rem; font-weight: 600; color: #1a1a1a; margin: 0;">Menu March&eacute;</h3>
                                                <span style="font-size: 1.2rem; font-weight: bold; color: #c5a880;">35&euro;</span></div>
                                        <p style="font-size: 0.95rem; color: #666666; line-height: 1.6; margin: 0;">Servi exclusivement au d&eacute;jeuner du mardi au vendredi. Une formule vive en 2 ou 3 services selon l'inspiration matinale du Chef.</p>
                                </div>
                                <a href="menu-du-marche" style="font-size: 0.85rem; font-weight: 600; color: #1a1a1a !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; width: fit-content; border-bottom: 1px solid #1a1a1a; padding-bottom: 2px;">Voir la formule</a>
                        </div>

                        <!-- Carte 2 (Mis en avant) -->
                        <div onmouseenter="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 15px 35px rgba(197, 168, 128, 0.15)'; this.style.borderColor='#c5a880';" onmouseleave="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 10px rgba(0,0,0,0.03)'; this.style.borderColor='#eaeaea';" style="background: #ffffff; border: 1px solid #eaeaea; border-top: 4px solid #c5a880; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); min-height: 320px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 8px; cursor: pointer;">
                                <div>
                                        <div style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fdfdfd; border: 1px solid #eaeaea; border-radius: 50%; color: #c5a880; font-size: 1.2rem; margin-bottom: 25px;"><i class="fa-solid fa-star"></i></div>
                                        <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;">
                                                <h3 style="font-size: 1.3rem; font-weight: 600; color: #1a1a1a; margin: 0;">Menu Signature</h3>
                                                <span style="font-size: 1.2rem; font-weight: bold; color: #c5a880;">65&euro;</span></div>
                                        <p style="font-size: 0.95rem; color: #666666; line-height: 1.6; margin: 0;">Notre parcours d'initiation culinaire phare en 5 temps. Une harmonie m&eacute;ticuleuse combinant nos plus belles sp&eacute;cialit&eacute;s terre et mer.</p>
                                </div>
                                <a href="menu-signature" style="font-size: 0.85rem; font-weight: 600; color: #c5a880 !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; width: fit-content; border-bottom: 1px solid #c5a880; padding-bottom: 2px;">Voir la formule</a>
                        </div>

                        <!-- Carte 3 -->
                        <div onmouseenter="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 15px 35px rgba(197, 168, 128, 0.15)'; this.style.borderColor='#c5a880';" onmouseleave="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 10px rgba(0,0,0,0.03)'; this.style.borderColor='#eaeaea';" style="background: #ffffff; border: 1px solid #eaeaea; border-top: 4px solid #1a1a1a; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); min-height: 320px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 8px; cursor: pointer;">
                                <div>
                                        <div style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fdfdfd; border: 1px solid #eaeaea; border-radius: 50%; color: #c5a880; font-size: 1.2rem; margin-bottom: 25px;"><i class="fa-solid fa-wine-glass"></i></div>
                                        <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;">
                                                <h3 style="font-size: 1.3rem; font-weight: 600; color: #1a1a1a; margin: 0;">Grand Voyage</h3>
                                                <span style="font-size: 1.2rem; font-weight: bold; color: #c5a880;">95&euro;</span></div>
                                        <p style="font-size: 0.95rem; color: #666666; line-height: 1.6; margin: 0;">L'exp&eacute;rience ultime en 7 services. Laissez carte blanche totale au Chef pour un voyage m&eacute;morable, disponible avec accords mets &amp; vins.</p>
                                </div>
                                <a href="menu-grand-voyage" style="font-size: 0.85rem; font-weight: 600; color: #1a1a1a !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; width: fit-content; border-bottom: 1px solid #1a1a1a; padding-bottom: 2px;">Voir la formule</a>
                        </div>

                        <!-- Carte 4 -->
                        <div onmouseenter="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 15px 35px rgba(197, 168, 128, 0.15)'; this.style.borderColor='#c5a880';" onmouseleave="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 10px rgba(0,0,0,0.03)'; this.style.borderColor='#eaeaea';" style="background: #ffffff; border: 1px solid #eaeaea; border-top: 4px solid #1a1a1a; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); min-height: 320px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 8px; cursor: pointer;">
                                <div>
                                        <div style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fdfdfd; border: 1px solid #eaeaea; border-radius: 50%; color: #c5a880; font-size: 1.2rem; margin-bottom: 25px;"><i class="fa-solid fa-utensils"></i></div>
                                        <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;">
                                                <h3 style="font-size: 1.3rem; font-weight: 600; color: #1a1a1a; margin: 0;">La Carte</h3>
                                                <span style="font-size: 0.9rem; font-weight: bold; color: #666666;">Au choix</span></div>
                                        <p style="font-size: 0.95rem; color: #666666; line-height: 1.6; margin: 0;">Composez votre repas selon vos envies. Une s&eacute;lection d'entr&eacute;es raffin&eacute;es et de plats signatures cuisin&eacute;s &agrave; la commande.</p>
                                </div>
                                <a href="la-carte" style="font-size: 0.85rem; font-weight: 600; color: #1a1a1a !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; width: fit-content; border-bottom: 1px solid #1a1a1a; padding-bottom: 2px;">Explorer la carte</a>
                        </div>

                        <!-- Carte 5 (Mis en avant) -->
                        <div onmouseenter="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 15px 35px rgba(197, 168, 128, 0.15)'; this.style.borderColor='#c5a880';" onmouseleave="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 10px rgba(0,0,0,0.03)'; this.style.borderColor='#eaeaea';" style="background: #ffffff; border: 1px solid #eaeaea; border-top: 4px solid #c5a880; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); min-height: 320px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 8px; cursor: pointer;">
                                <div>
                                        <div style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fdfdfd; border: 1px solid #eaeaea; border-radius: 50%; color: #c5a880; font-size: 1.2rem; margin-bottom: 25px;"><i class="fa-solid fa-lightbulb"></i></div>
                                        <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;">
                                                <h3 style="font-size: 1.3rem; font-weight: 600; color: #1a1a1a; margin: 0;">Nos Suggestions</h3>
                                                <span style="font-size: 0.9rem; font-weight: bold; color: #c5a880;">Arrivages</span></div>
                                        <p style="font-size: 0.95rem; color: #666666; line-height: 1.6; margin: 0;">Les inspirations &eacute;ph&eacute;m&egrave;res du Chef. Des plats exclusifs cr&eacute;&eacute;s minute autour des produits d'exception re&ccedil;us le matin m&ecirc;me.</p>
                                </div>
                                <a href="suggestions" style="font-size: 0.85rem; font-weight: 600; color: #c5a880 !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; width: fit-content; border-bottom: 1px solid #c5a880; padding-bottom: 2px;">Voir les suggestions</a>
                        </div>

                        <!-- Carte 6 -->
                        <div onmouseenter="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 15px 35px rgba(197, 168, 128, 0.15)'; this.style.borderColor='#c5a880';" onmouseleave="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 10px rgba(0,0,0,0.03)'; this.style.borderColor='#eaeaea';" style="background: #ffffff; border: 1px solid #eaeaea; border-top: 4px solid #1a1a1a; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); min-height: 320px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 8px; cursor: pointer;">
                                <div>
                                        <div style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fdfdfd; border: 1px solid #eaeaea; border-radius: 50%; color: #c5a880; font-size: 1.2rem; margin-bottom: 25px;"><i class="fa-solid fa-ice-cream"></i></div>
                                        <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;">
                                                <h3 style="font-size: 1.3rem; font-weight: 600; color: #1a1a1a; margin: 0;">Nos Desserts</h3>
                                                <span style="font-size: 0.9rem; font-weight: bold; color: #666666;">Douceurs</span></div>
                                        <p style="font-size: 0.95rem; color: #666666; line-height: 1.6; margin: 0;">Finissez sur une note sucr&eacute;e. P&acirc;tisseries l&eacute;g&egrave;res, textures craquantes, chocolats grands crus et sorbets maison turbin&eacute;s sur place.</p>
                                </div>
                                <a href="desserts" style="font-size: 0.85rem; font-weight: 600; color: #1a1a1a !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; width: fit-content; border-bottom: 1px solid #1a1a1a; padding-bottom: 2px;">D&eacute;couvrir les desserts</a>
                        </div>

                        <!-- Carte 7 -->
                        <div onmouseenter="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 15px 35px rgba(197, 168, 128, 0.15)'; this.style.borderColor='#c5a880';" onmouseleave="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 10px rgba(0,0,0,0.03)'; this.style.borderColor='#eaeaea';" style="background: #ffffff; border: 1px solid #eaeaea; border-top: 4px solid #1a1a1a; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); min-height: 320px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 8px; cursor: pointer;">
                                <div>
                                        <div style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fdfdfd; border: 1px solid #eaeaea; border-radius: 50%; color: #c5a880; font-size: 1.2rem; margin-bottom: 25px;"><i class="fa-solid fa-wine-bottle"></i></div>
                                        <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;">
                                                <h3 style="font-size: 1.3rem; font-weight: 600; color: #1a1a1a; margin: 0;">Nos Vins</h3>
                                                <span style="font-size: 0.9rem; font-weight: bold; color: #666666;">Cave</span></div>
                                        <p style="font-size: 0.95rem; color: #666666; line-height: 1.6; margin: 0;">Une s&eacute;lection rigoureuse de domaines d'exception, de grands classiques et de flacons d'artisans en biodynamie pour sublimer vos plats.</p>
                                </div>
                                <a href="nos-vins" style="font-size: 0.85rem; font-weight: 600; color: #1a1a1a !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; width: fit-content; border-bottom: 1px solid #1a1a1a; padding-bottom: 2px;">Consulter la cave</a>
                        </div>

                        <!-- Carte 8 -->
                        <div onmouseenter="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 15px 35px rgba(197, 168, 128, 0.15)'; this.style.borderColor='#c5a880';" onmouseleave="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 10px rgba(0,0,0,0.03)'; this.style.borderColor='#eaeaea';" style="background: #ffffff; border: 1px solid #eaeaea; border-top: 4px solid #1a1a1a; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); min-height: 320px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 8px; cursor: pointer;">
                                <div>
                                        <div style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fdfdfd; border: 1px solid #eaeaea; border-radius: 50%; color: #c5a880; font-size: 1.2rem; margin-bottom: 25px;"><i class="fa-solid fa-glass-water"></i></div>
                                        <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;">
                                                <h3 style="font-size: 1.3rem; font-weight: 600; color: #1a1a1a; margin: 0;">Nos Boissons</h3>
                                                <span style="font-size: 0.9rem; font-weight: bold; color: #666666;">Ap&eacute;ritifs</span></div>
                                        <p style="font-size: 0.95rem; color: #666666; line-height: 1.6; margin: 0;">D&eacute;couvrez nos jus de fruits artisanaux, nos softs locaux, spiritueux fins et cr&eacute;ations de cocktails maison avec ou sans alcool.</p>
                                </div>
                                <a href="nos-boissons" style="font-size: 0.85rem; font-weight: 600; color: #1a1a1a !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; width: fit-content; border-bottom: 1px solid #1a1a1a; padding-bottom: 2px;">Voir la carte</a>
                        </div>

                </div>
        </div>
</div>
<p>&nbsp;</p>

---

*(Note technique pour l'intégration : Pour la version industrielle finale, l'idéal serait d'encapsuler ces animations et styles de survol dans une classe CSS globale propre à DeltaCMS afin de nettoyer complètement les balises HTML de ces scripts inline).*

Pour finir, j'ai bien pris note de votre excellente remarque concernant le **menu burger et sa transparence**. C'est très pertinent, et je vais regarder pour enlever le bouton textuel "Retour à l'accueil" afin de rendre l'en-tête encore plus léger, fluide et moderne.

Si vous avez besoin que je fasse d'autres tests sur l'intégration ou les paramètres de ces composants, n'hésitez pas !

Cordialement,
Tôt

Tôt · Oct 05, 2026, 06:20 PM

Bonjour,

Je vais créer une copie du site sur le serveur et je vous transmettrai, par message privé, vos identifiants de connexion avec les accès administrateur.

Cela vous permettra d'analyser plus facilement les options disponibles pour l'évolution de Delta.

N'hésitez pas à faire des tests et à explorer l'interface : cet environnement est dédié à vos manipulations.

Dites-moi simplement quand je pourrai le supprimer du serveur.

Adresse ici :https://root.my.be/sylvain

Cordialement,

Sylvain · **Aujourd'hui** à 08:39 AM

Bonjour Tôt,

Merci pour toutes ces informations et pour le site dédié.

On va commencer doucement par le bandeau Hero inversé.

Deltacms dispose actuellement de gabarits blocs d'aspect disons assez classique. On pose le bloc sur la page et ensuite on saisit texte, titre et lien sur l'écran principal de Tinymce.

Pour limiter au maximum le nombre de paramètres je propose ces réglages :
- couleurs des fonds sombre et clair (sans réglage de l'opacité)
- couleurs des textes (réglables également en écran principal)
- alignement horizontal du bandeau (gauche, centre, droite)
- largeur du bandeau

L'arrondi et l'ombre pourrait être ceux des blocs ou constants dans une feuille de style.

Il y aura un composant "bouton", peut-être aussi "bloc de 2 boutons", qui pourra être disposé dans une page, un bloc, un bandeau.

Ce serait intéressant de disposer des paragraphes pour structurer la mise en page dans le bandeau, mais si on inscrit des titres ou des liens il faudrait normalement ajouter le réglage de leur couleur et je ne souhaite pas multiplier le nombre de paramètres.

Voilà une première réflexion

Cordialement

Tôt · **Aujourd'hui** à 05:34 PM

Réflexion sur le bandeau Hero inversé - Deltacms

Bonjour,

Merci pour ce retour et pour cette réflexion très claire.
Vos propositions me conviennent parfaitement. Je partage tout à fait votre vision : limiter le nombre de paramètres est la meilleure solution pour que le site reste simple à administrer au quotidien et que le design reste cohérent.

Voici mes retours sur les différents points :

• Réglages du bandeau (fonds, alignement, largeur) : C'est validé. C'est amplement suffisant pour habiller les pages sans alourdir l'interface.
• Arrondis et ombres : Excellente idée de les figer dans la feuille de style générale pour garantir l'harmonie du site.
• Composant bouton / double bouton : Très bonne initiative, ce sera très utile et très flexible.
• Pour le dilemme des paragraphes, titres et liens : Pour éviter de multiplier les boutons de réglages (ce que nous voulons à tout prix éviter), on pourrait simplement définir une règle automatique où les couleurs s'adaptent selon que le fond est clair ou sombre. Il serait judicieux d'intégrer cela directement à Tinymce : cela ne devrait pas poser de problème technique et permettra au rédacteur de voir directement le bon rendu.
• Ma suggestion pour garder une flexibilité totale : Serait-il possible d'ajouter, dans l'administration de chaque page, un champ spécifique en dessous des balises Meta SEO ? Cela permettrait d'y injecter du code CSS personnalisé uniquement pour la page concernée. De cette façon, si on a besoin d'un réglage très précis ou d'une exception, on peut le faire de manière isolée sans toucher aux fichiers CSS de base de Delta et sans risquer de casser le script général.

Qu'en pensez-vous ? Vous pouvez partir sur cette base pour la suite !

Bien cordialement,