Fiche Technique — Les 44 Blocs de l'Éditeur Unifié (v3.1)
Introduction
Cette fiche recense, bloc par bloc, la totalité des 44 types de blocs de l'Éditeur Unifié de Sites Internet Edelweiss (v3.1), avec pour chacun : ses champs de saisie exacts, son comportement de rendu détaillé, ses valeurs par défaut, et ses particularités techniques. Document purement technique, destiné à servir de référence exhaustive plutôt que de guide pédagogique.
Deux options universelles. Depuis la v3.1, tout bloc — à l'exception des blocs Sous-titre et Séparateur décoratif eux-mêmes — dispose de deux options supplémentaires, ajoutées en bas de sa carte d'édition : « Sous-titre intégré » (insère, juste avant ce bloc, un vrai `<h2>` identique en tout point au bloc Sous-titre — mêmes champs Centrer et Apparition animée, même alimentation automatique de la table des matières) et « Séparateur intégré » (insère, juste après ce bloc, un séparateur décoratif identique au bloc Séparateur — mêmes 4 styles, même réglage d'espacement). Ces deux ajouts ferment systématiquement la carte visuelle en cours avant de s'afficher, exactement comme le feraient les vrais blocs correspondants. Au rechargement d'une page existante, ces éléments intégrés sont relus comme 3 blocs strictement séparés (Sous-titre, bloc d'origine, Séparateur) : aucune perte de contenu, mais la représentation « bloc unique + options » ne survit pas à un rechargement. Cette colonne est notée « Oui » ou « Non (exclu) » dans les tableaux ci-dessous.
Le principe de la « carte ». La plupart des blocs de contenu s'affichent regroupés dans un même encadré visuel (« carte ») tant qu'aucun bloc dit « structurant » ne vient rompre ce regroupement. Deux blocs Paragraphe consécutifs partagent ainsi la même carte et la même couleur de fond ; un Sous-titre intercalé — qu'il soit un vrai bloc ou une option intégrée — ferme systématiquement la carte en cours.
Couleurs. Sur la vingtaine de blocs qui proposent des champs de couleur, le principe reste constant : les deux champs (fond et texte) sont facultatifs et indépendants — si un seul des deux est renseigné, l'autre se calcule automatiquement pour rester lisible.
%%ESPACEUR-GRAND%%
Famille 1 — Texte et encadrés
| Bloc | Champs | Fonctionnement détaillé | Options univ. |
|---|---|---|---|
| Paragraphe (`paragraphe`) | Texte (avec bouton Insérer un lien) ; case Centrer les titres ; case Apparition animée ; Couleur de fond ; Couleur du texte | Le bloc le plus utilisé de l'outil. Passe par la fonction `paragraphes()`, qui interprète l'intégralité de la syntaxe (gras `mot`, italique `mot`, souligné `mot`, rouge `mot`, liens `[[mot => adresse]]`, sous-titres internes `##`/`###`/`####`, listes `-`/`>`/`+`/`1.`/`1)`). Un retour à la ligne simple démarre un nouveau `<p>`. Plusieurs Paragraphes consécutifs partagent la même carte : seule la couleur du premier du groupe s'applique à l'ensemble. | Oui |
| Sous-titre (`soustitre2`) | Texte (`<h2>`) ; case Centrer ; case Apparition animée | Ferme systématiquement la carte en cours avant de s'afficher — jamais inclus dans un encadré, toujours en pleine largeur. Alimente automatiquement la table des matières « Sur cette page » (balayage de tous les `<h2>`/`<h3>` de la page). Accepte la mise en forme en ligne mais pas les listes ni des sous-titres imbriqués. | Non (exclu) |
| Citation (`citation`) | Texte ; case Centrer les titres ; case Apparition animée ; Couleur de fond ; Couleur du texte | S'affiche dans un encadré `<blockquote class="citation-reflexion">`, en italique par défaut. Accepte la même richesse de mise en forme que le Paragraphe, gras compris. | Oui |
| Actualité datée (`actualite`) | Date (texte libre, ex. « 02/01/2026 ») ; Texte ; case Centrer les titres ; case Apparition animée ; Couleur de fond ; Couleur du texte | Associe une date affichée en évidence à un texte de brève. Pensé pour un usage répété sur une même page, chaque actualité dans sa propre carte si séparée par un bloc structurant, ou regroupées sinon. Date pré-remplie à « 02/01/2026 » par défaut, à modifier systématiquement. | Oui |
| Liste de slogans (`slogans`) | Texte (un slogan par ligne) ; case Apparition animée ; Couleur de fond ; Couleur du texte | Chaque ligne devient un slogan distinct, présenté automatiquement en grille à deux colonnes (mise en page CSS, aucun réglage manuel). Pas de case Centrer — la grille rend cette option sans objet. | Oui |
| Grille de réflexions (`reflexions`) | Texte (groupes séparés par une ligne vide ; 1re ligne du groupe = titre) ; case Apparition animée | Chaque réflexion est un groupe de lignes séparé du suivant par une ligne strictement vide. Dans chaque groupe, deux instructions facultatives en texte : `couleur: #A8E6CF` et `couleur-texte: #123456` — un réglage par réflexion, contrairement aux autres blocs. Aucun champ de couleur globale au niveau du bloc. | Oui |
| Onglets (`onglets`) | Texte (groupes séparés par une ligne vide ; 1re ligne = titre de l'onglet) | Même syntaxe de groupes que Grille de réflexions, avec les mêmes instructions `couleur:`/`couleur-texte:` disponibles par onglet. Le texte de chaque onglet accepte toute la mise en forme habituelle. Un seul onglet affiché à la fois ; bascule au clic sur les titres, en rangée au-dessus du contenu. | Oui |
| Texte qui défile (`texte-defilant`) | Message à faire défiler (une seule ligne) ; Couleur de fond ; Couleur du texte | Affiche une unique ligne de texte défilant en boucle continue de droite à gauche. Accepte gras/italique/souligné/rouge, mais pas les liens ni sous-titres (contrainte d'une ligne unique). Pensé pour une information ponctuelle et courte. | Oui |
| Sommaire Sticky (`sommaire-sticky`) | Couleur de fond du sommaire ; Couleur du texte du sommaire — aucun autre champ | Entièrement automatique dans son contenu : se construit à partir des `##`/`###` de la page, rien à saisir. Barre latérale fixe (position sticky), visible pendant toute la lecture, devient un bouton « ☰ Sommaire » sur téléphone. Un seul exemplaire suffit par page, quel que soit son emplacement dans la liste. | Oui |
%%ESPACEUR-GRAND%%
Famille 2 — Mise en page
| Bloc | Champs | Fonctionnement détaillé | Options univ. |
|---|---|---|---|
| **2 colonnes : texte \ | photo, et photo \ | texte** (`col-texte-photo`, `col-photo-texte`) | Texte ; case Centrer les titres ; Nom du fichier photo ; Légende ; Sous-dossier ; case Apparition animée ; Couleur de fond ; Couleur du texte |
| 2 colonnes : texte fluide (`texte-2col`) | Texte ; case Centrer les titres ; Couleur de fond ; Couleur du texte | Un seul champ de texte, réparti automatiquement entre deux colonnes par la mise en page CSS (`column-count`), à la manière d'un journal imprimé — aucun découpage manuel possible. | Oui |
| **2 colonnes : texte \ | vidéo, et vidéo \ | texte** (`col-texte-video`, `col-video-texte`) | Texte ; case Centrer les titres ; Lien de la vidéo ; Titre de la vidéo ; Couleur de fond ; Couleur du texte |
| **2 colonnes : photo \ | vidéo, et vidéo \ | photo** (`col-photo-video`, `col-video-photo`) | Nom du fichier photo ; Légende ; Sous-dossier de la photo ; Lien de la vidéo ; Titre de la vidéo ; Couleur de fond ; Couleur du texte |
| **1/3 Image \ | 2/3 Texte**, et l'inverse (`col-image-tiers-texte`, `col-texte-tiers-image`) | Texte (convention `## Titre` pour le grand titre) ; case Centrer ; Nom du fichier photo ; Légende ; Sous-dossier ; Texte du bouton ; Adresse du bouton ; case Apparition animée ; Couleur de fond de la carte ; Couleur du texte | Conçu pour une mise en avant type « fiche » ou « offre » : image sur un tiers, titre + texte + bouton facultatif sur les deux tiers restants. Le bouton ne s'affiche que si son champ Texte est renseigné ; son adresse peut être une URL complète ou une ancre `#xxx`. |
| **1/3 Code (iFrame) \ | 2/3 Texte**, et l'inverse (`col-code-tiers-texte`, `col-texte-tiers-code`) | Texte (convention `## Titre`) ; case Centrer ; Code à coller (police à chasse fixe) ; Hauteur du cadre en pixels (défaut 400) ; case Apparition animée ; Couleur de fond ; Couleur du texte | Variante du bloc précédent où l'image est remplacée par un cadre de code brut (typiquement une animation Lottiefile). Avertissement explicite : ne coller que du code d'un site de confiance. La hauteur du cadre est le seul réglage manuel de mise en page. |
| Photo + Programme (`col-photo-programme`) | Nom du fichier photo ; Légende ; Sous-dossier ; Titre du petit encart ; Texte du petit encart ; Texte principal (zone large, à droite) ; case Apparition animée ; Couleur des bandeaux de titre ; Couleur de fond de la carte ; Couleur du texte | Le bloc le plus riche de la famille : photo + petit encart libre sur un tiers à gauche, grand texte structuré sur deux tiers à droite. Les `##`/`###` du texte principal se transforment en bandeaux de couleur (réglable), plutôt qu'en simples titres — une mise en forme propre à ce bloc. | Oui |
| Section épinglée (`section-epinglee`) | Nom du fichier image ; Sous-dossier ; Légendes qui s'enchaînent (une par ligne, 2 à 4 conseillées) ; Durée du défilement (Courte/Moyenne/Longue) ; Couleur des légendes | Effet « scrollytelling » : l'image reste fixe (position sticky, hauteur 100vh) pendant que chaque légende apparaît puis disparaît en fondu, au rythme du défilement. Depuis le 29 août, l'image est enveloppée dans une vraie `<figure class="bloc-photo">`, cliquable pour s'agrandir. | Oui |
| Espaceur Horizontal (`espaceur`) | Hauteur de l'espace (Petit/Moyen/Grand) | Un simple espace vide entre deux blocs, sans contenu ni bordure. Ferme systématiquement la carte en cours. | Oui |
| Séparateur décoratif (`separateur`) | Style (Vague/Crête de montagne/Filet simple/Filet épais) ; Espace au-dessus et en-dessous (Petit/Moyen/Grand) | Ferme la carte en cours puis affiche une frise graphique en pleine largeur (SVG pour Vague/Montagne, bordure simple pour les Filets). Le même espace s'applique symétriquement au-dessus et en-dessous. | Non (exclu) |
| Groupe de boutons ronds (`boutonsronds`) | Texte (un bouton par ligne, « Libellé \ | lien ») ; Libellé du bouton actif | Chaque ligne produit un bouton en forme de pilule ; le lien peut être une adresse complète ou une ancre `#xxx`. Le libellé actif doit correspondre exactement à l'un des libellés saisis — une faute de frappe empêche silencieusement la mise en avant, sans message d'erreur. |
| Tableau (`tableau`) | Nombre de colonnes (1 à 12) ; case Première ligne = en-tête ; grille de saisie dédiée | Le nombre de colonnes redessine immédiatement la grille de saisie. Produit un vrai `<table>` HTML, avec ou sans `<thead>` selon la case cochée. | Oui |
| Plan du site (`plan-site`) | Aucun | Entièrement automatique : reconstruit, au téléchargement, l'arborescence complète du site à partir du Plan du Site chargé en mémoire. Aucune vérification de fraîcheur : à l'utilisateur de s'assurer que ce Plan est à jour. | Oui |
| Page d'Information (`page-information`) | Aucun | Automatique comme ci-dessus, mais filtré : ne liste que les pages au badge « En ligne » (les « À venir » sont exclues de cette liste, sans être retirées du vrai Plan du Site). | Oui |
| Date de mise à jour du site, et de la page (`date-site`, `date-page`) | Aucun | Deux blocs jumeaux, entièrement automatiques : affichent « Site/Page mis à jour le [date] », toujours celle du jour de génération — jamais figée. Régénérer la page, même sans autre changement, pour rafraîchir la date affichée. | Oui |
%%ESPACEUR-GRAND%%
Famille 3 — Médias
| Bloc | Champs | Fonctionnement détaillé | Options univ. |
|---|---|---|---|
| Photo (`photo`) | Nom du fichier image (champ strict — un avertissement rappelle de n'écrire que le nom du fichier) ; Légende ; Sous-dossier ; case Apparition animée | Produit une vraie `<figure class="bloc-photo">`, cliquable pour s'agrandir via le mécanisme général `mvInitLightbox()` (sélecteur `.galerie figure, .mosaique-photo, figure.bloc-photo`). Ferme systématiquement la carte en cours. | Oui |
| Galerie de photos (`galerie`) | Texte (une photo par ligne, « nom-fichier.jpg \ | légende ») ; Sous-dossier pour toute la galerie | Chaque ligne produit une `<figure>` au sein d'un conteneur `.galerie` — même agrandissement au clic que le bloc Photo, via le sélecteur partagé. Le sous-dossier s'applique à l'ensemble des photos de la liste, sans possibilité de sous-dossier différent par photo. |
| Diaporama (`diaporama`) | Titre ; Texte (diapositives, format simple ou enrichi) ; Sous-dossier ; Présentation (Automatique/Non automatique) ; Transition (Fondu/Glissement/Aucune) ; Musique de fond (un morceau par ligne) ; Sous-dossier pour la musique | Le bloc le plus complexe de l'outil. Deux syntaxes : forme simple `nom-fichier.jpg \ | légende` sur une ligne, ou forme enrichie sur plusieurs lignes étiquetées (`photo:`, `vidéo:`, `audio:`, `légende:`, `titre:`, `texte:`, `encadre:`, `duree:`), séparées par une ligne `---`. Une diapositive peut n'avoir aucun média. Présentation automatique : 4 secondes par défaut, `duree:` personnalisée en secondes (convertie en `data-duree` en ms). Pause au survol de la souris. Musique : s'enchaîne piste par piste puis boucle depuis le début ; démarre automatiquement coupée (contrainte navigateur), icône 🔇/🔊 discrète pour l'activer. Correctif du 29 août : le compteur de diapositives (« 1/10 » puis « 2/3 ») était erroné lorsque plusieurs diaporamas coexistaient sur une page — total désormais mémorisé par identifiant plutôt que dans une variable partagée. |
| Vidéo (`video`) | Lien de la vidéo (YouTube ou .mp4) ; Titre | Passe par `iframeVideo()` (accepte YouTube complet, code à 11 caractères, ou .mp4 direct). Dans l'aperçu de travail, une vidéo YouTube s'affiche en vignette cliquable plutôt qu'en lecteur intégré (restriction propre à YouTube, erreur 153) ; sur la page publiée, elle fonctionne normalement. | Oui |
| Vidéo double (`videodouble`) | Vidéo 1 — lien ; Vidéo 1 — titre ; Vidéo 2 — lien ; Vidéo 2 — titre | Deux vidéos indépendantes côte à côte (l'une sous l'autre sur téléphone), chacune passant séparément par `iframeVideo()`. | Oui |
| Mur de Vidéo (`mur-video`) | Texte (une vidéo par ligne, « lien \ | titre ») | Se range automatiquement en grille à deux colonnes, sans réglage de disposition manuel. Titre facultatif par vidéo. |
| Podcast (`podcast`) | Nom du fichier audio (.mp3) ; Titre ; case Centrer le titre ; Sous-dossier ; Couleur de fond du bloc ; Couleur du texte ; Couleur de fond du lecteur | Lecteur pour un seul fichier, trois zones de couleur indépendantes : fond du bloc, texte (titre et minuteur), fond du lecteur natif. Cette 3e couleur ne fonctionne que sur Chrome/Edge/Safari ; sur Firefox, le lecteur garde son apparence par défaut sans problème fonctionnel. | Oui |
| Jukebox (`jukebox`) | Texte (un morceau par ligne, « fichier.mp3 \ | titre » ou lien direct) ; Sous-dossier ; case Centrer les titres ; Couleur de fond ; Couleur du texte ; Couleur de fond des lecteurs | Plusieurs morceaux en grille à deux colonnes, chacun son propre lecteur natif. Mêmes trois zones de couleur que le Podcast, appliquées uniformément. Le sous-dossier n'a aucun effet sur les liens directs complets. |
| Jukebox YouTube (`jukebox-yt`) | Texte (fichier local, lien direct, ou lien YouTube mélangés) ; Sous-dossier ; case Centrer les titres ; Couleur de fond ; Couleur du texte ; Couleur de fond des lecteurs | Variante acceptant, ligne par ligne, indifféremment audio local, lien direct, ou vidéo YouTube (affichée en petite vidéo). La couleur de fond des lecteurs ne s'applique qu'aux lignes audio, sans effet sur les vidéos YouTube. | Oui |
| Document PDF (`pdf`) | Nom du fichier PDF ; Titre ; case Centrer le titre ; Sous-dossier | Le PDF se trouve dans `medias/pdf/`. Consultable directement dans la page (visionneuse intégrée du navigateur), sans téléchargement obligatoire. | Oui |
| Mosaïque Photos & Texte (`mosaique`) | Texte (damier de cases séparées par `---` — photo : `photo:`+`légende:` ; encadré : `titre:`, `texte:`, `couleur:`, `texte-clair: oui`) ; Sous-dossier pour les photos | Chaque case est une photo (cliquable, via `.mosaique-photo`) ou un encadré de texte coloré. Si `couleur:` vide, une teinte est choisie automatiquement dans une palette de 6 couleurs, tour à tour. `texte-clair: oui` force un texte clair sur fond sombre. | Oui |
%%ESPACEUR-GRAND%%
Famille 4 — Bloc avancé
| Bloc | Champs | Fonctionnement détaillé | Options univ. |
|---|---|---|---|
| Code HTML (`code`) | Titre ; case Centrer le titre ; Code à coller (police à chasse fixe) ; Hauteur du cadre en pixels | Intègre tel quel un code fourni par un site de confiance (Google, Canva, YouTube...), via son bouton Intégrer/Partager. Avertissement : jamais de mot de passe, jamais de modification du code fourni. Aucun filtrage appliqué par l'outil — seul bloc de tout l'Éditeur à fonctionner ainsi, tous les autres construisant leur HTML depuis des champs structurés. | Oui |
%%ESPACEUR-GRAND%%
Famille 5 — Accès protégé
| Bloc | Champs | Fonctionnement détaillé | Options univ. |
|---|---|---|---|
| Lien protégé par code (`acces-code`) | Libellé du bouton ; Couleur du bouton ; Type de contenu (Téléchargement/Audio/Vidéo) ; puis selon le type : dossier + nom de fichier, ou lien direct + titre ; Code à 6 chiffres ; bouton Verrouiller | Ne révèle son contenu qu'après saisie du bon code — vrai chiffrement AES-GCM, clé dérivée par PBKDF2 (310 000 itérations), pas une simple vérification de façade. Une fois verrouillé, le lien d'origine ne peut plus jamais être redonné en clair par l'outil — le code doit être noté à part. Pour une vidéo protégée : même règle d'aperçu qu'ailleurs (vignette cliquable dans l'aperçu de travail, détection par `window.opener`/`window.parent` pointant vers l'Éditeur ; lecteur intégré fonctionnel sur la page réellement publiée). | Oui |
%%ESPACEUR-GRAND%%
Famille 6 — Interaction
| Bloc | Champs | Fonctionnement détaillé | Options univ. |
|---|---|---|---|
| Formulaire (`formulaire`) | Titre ; Texte d'introduction ; case Demander l'e-mail (facultatif pour le visiteur) ; Texte du bouton d'envoi ; Message de confirmation | Vrai formulaire de contact : messages reçus directement par e-mail via un petit script à déposer une fois sur l'hébergement, sans jamais passer par un service extérieur. Double protection anti-robot discrète intégrée, non réglable depuis ce formulaire. | Oui |
| Recherche sur le site (`recherche`) | Titre ; Texte indicatif du champ ; Nombre de résultats maximum | Recherche réelle dans le texte des pages, entièrement dans le navigateur du visiteur, sans serveur. Suppose l'existence d'un fichier `index-recherche.json` à la racine, préparé avec l'outil compagnon Indexer le site. | Oui |
| Lien commenté (`lien-commente`) | Couleur de fond des boutons ; Couleur du texte des boutons ; grille de liens (intitulé + adresse, sur 2 colonnes) | Grille de boutons vers des sites externes, chacun avec son intitulé et son adresse propres, sur deux colonnes. Une couleur qui accroche est déjà appliquée par défaut. | Oui |
%%ESPACEUR-GRAND%%
Résumé chiffré
| Repère | Valeur |
|---|---|
| Nombre total de types de blocs | 44 |
| Nombre de familles | 6 |
| Blocs disposant des 2 options universelles | 42 |
| Blocs exclus des options universelles | 2 (Sous-titre, Séparateur décoratif) |
| Blocs proposant la case Apparition animée | 12 |
| Blocs entièrement automatiques (aucun champ de contenu) | 4 (Plan du site, Page d'Information, Date du site, Date de la page) |
| Blocs reposant sur un vrai chiffrement | 1 (Lien protégé par code) — et la protection de page entière, hors liste des blocs |