@ea-lab/reactive-json-docs 0.1.2

package/public/rjbuild/component-doc/core/example/website.yaml

@@ -0,0 +1,1663 @@
+renderView:
+  - type: div
+    attributes:
+      style:
+        minHeight: 100vh
+        display: flex
+        flexDirection: column
+        backgroundColor: "#faf7f0"
+        fontFamily: "'Crimson Text', 'Times New Roman', serif"
+    content:
+      # Header élégant avec logo centré
+      - type: header
+        attributes:
+          style:
+            background: "linear-gradient(135deg, #1a0f0a 0%, #2d1b14 50%, #3d2818 100%)"
+            color: "#f4ead5"
+            padding: 1.5rem 0
+            position: relative
+            boxShadow: "0 4px 20px rgba(45, 27, 20, 0.5), inset 0 1px 0 rgba(184, 134, 11, 0.3)"
+            borderBottom: "1px solid #b8860b"
+        content:
+          # Ornement décoratif supérieur
+          - type: div
+            attributes:
+              style:
+                position: absolute
+                top: 0
+                left: 0
+                right: 0
+                height: 4px
+                background: "linear-gradient(90deg, transparent 0%, #b8860b 20%, #d4af37 50%, #b8860b 80%, transparent 100%)"
+
+          # Motif décoratif de fond
+          - type: div
+            attributes:
+              style:
+                position: absolute
+                top: 0
+                left: 0
+                right: 0
+                bottom: 0
+                opacity: 0.05
+                backgroundImage: "radial-gradient(circle at 20% 50%, #b8860b 2px, transparent 2px), radial-gradient(circle at 80% 50%, #b8860b 1px, transparent 1px)"
+                backgroundSize: "60px 30px, 40px 20px"
+
+          - type: div
+            attributes:
+              style:
+                maxWidth: 1200px
+                margin: 0 auto
+                padding: 0 2rem
+                display: flex
+                justifyContent: space-between
+                alignItems: center
+                position: relative
+                zIndex: 2
+            content:
+              # Navigation gauche
+              - type: nav
+                attributes:
+                  style:
+                    display: flex
+                    gap: 2.5rem
+                    alignItems: center
+                content:
+                  - type: a
+                    attributes:
+                      href: "#accueil"
+                      style:
+                        color: "#f4ead5"
+                        textDecoration: none
+                        fontWeight: 300
+                        fontSize: 1.1rem
+                        fontFamily: "'Crimson Text', serif"
+                        letterSpacing: 1px
+                        padding: 0.5rem 1rem
+                        borderRadius: 3px
+                        transition: "all 0.3s ease"
+                    content: "Accueil"
+
+                  - type: div
+                    attributes:
+                      style:
+                        color: "#b8860b"
+                        fontSize: 0.8rem
+                    content: "❖"
+
+                  - type: a
+                    attributes:
+                      href: "#services"
+                      style:
+                        color: "#f4ead5"
+                        textDecoration: none
+                        fontWeight: 300
+                        fontSize: 1.1rem
+                        fontFamily: "'Crimson Text', serif"
+                        letterSpacing: 1px
+                        padding: 0.5rem 1rem
+                        borderRadius: 3px
+                        transition: "all 0.3s ease"
+                    content: "Collections"
+
+              # Logo central
+              - type: div
+                attributes:
+                  style:
+                    display: flex
+                    flexDirection: column
+                    alignItems: center
+                    textAlign: center
+                content:
+                  # Ornement supérieur
+                  - type: div
+                    attributes:
+                      style:
+                        fontSize: 0.6rem
+                        color: "#b8860b"
+                        marginBottom: 0.2rem
+                        fontFamily: "'Crimson Text', serif"
+                        letterSpacing: 2px
+                    content: "◊ ◊ ◊"
+
+                  # Titre principal
+                  - type: h1
+                    attributes:
+                      style:
+                        margin: 0
+                        fontSize: 1.4rem
+                        fontWeight: 300
+                        fontFamily: "'Playfair Display', 'Times New Roman', serif"
+                        color: "#f4ead5"
+                        letterSpacing: 2px
+                        textShadow: "2px 2px 4px rgba(0,0,0,0.5)"
+                        lineHeight: 1
+                    content: "Bibliothèque"
+
+                  # Sous-titre doré
+                  - type: div
+                    attributes:
+                      style:
+                        fontSize: 0.8rem
+                        color: "#b8860b"
+                        fontFamily: "'Playfair Display', serif"
+                        fontWeight: 400
+                        letterSpacing: 3px
+                        marginTop: 0.1rem
+                        textShadow: "1px 1px 2px rgba(0,0,0,0.3)"
+                    content: "DORÉE"
+
+              # Navigation droite
+              - type: nav
+                attributes:
+                  style:
+                    display: flex
+                    gap: 2.5rem
+                    alignItems: center
+                content:
+                  - type: a
+                    attributes:
+                      href: "#about"
+                      style:
+                        color: "#f4ead5"
+                        textDecoration: none
+                        fontWeight: 300
+                        fontSize: 1.1rem
+                        fontFamily: "'Crimson Text', serif"
+                        letterSpacing: 1px
+                        padding: 0.5rem 1rem
+                        borderRadius: 3px
+                        transition: "all 0.3s ease"
+                    content: "À Propos"
+
+                  - type: div
+                    attributes:
+                      style:
+                        color: "#b8860b"
+                        fontSize: 0.8rem
+                    content: "❖"
+
+                  - type: a
+                    attributes:
+                      href: "#correspondance"
+                      style:
+                        color: "#f4ead5"
+                        textDecoration: none
+                        fontWeight: 300
+                        fontSize: 1.1rem
+                        fontFamily: "'Crimson Text', serif"
+                        letterSpacing: 1px
+                        padding: 0.5rem 1rem
+                        borderRadius: 3px
+                        transition: "all 0.3s ease"
+                    content: "Correspondance"
+
+      # Corps principal élégant
+      - type: main
+        attributes:
+          style:
+            flex: 1
+            padding: 4rem 0 4rem 0
+            position: relative
+            zIndex: 1
+        content:
+          - type: div
+            attributes:
+              style:
+                maxWidth: 1000px
+                margin: 0 auto
+                padding: 0 2rem
+            content:
+              # Section héro littéraire avec vidéo
+              - type: section
+                attributes:
+                  id: accueil
+                  style:
+                    textAlign: center
+                    marginBottom: 6rem
+                    position: relative
+                    padding: 8rem 3rem
+                    overflow: hidden
+                    borderRadius: 20px
+                    border: "4px solid #b8860b"
+                    boxShadow: "0 12px 24px rgba(45, 27, 20, 0.4)"
+                content:
+                  # Vidéo d'arrière-plan
+                  - type: video
+                    attributes:
+                      autoPlay: true
+                      muted: true
+                      loop: true
+                      playsInline: true
+                      style:
+                        position: absolute
+                        top: 0
+                        left: 0
+                        width: 100%
+                        height: 100%
+                        objectFit: cover
+                        zIndex: 1
+                    content:
+                      - type: source
+                        attributes:
+                          src: "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+                          type: "video/mp4"
+
+                  # Overlay littéraire
+                  - type: div
+                    attributes:
+                      style:
+                        position: absolute
+                        top: 0
+                        left: 0
+                        width: 100%
+                        height: 100%
+                        background: "linear-gradient(135deg, rgba(45, 27, 20, 0.8), rgba(139, 69, 19, 0.7))"
+                        zIndex: 2
+
+                  # Contenu héro raffiné
+                  - type: div
+                    attributes:
+                      style:
+                        position: relative
+                        zIndex: 3
+                        color: "#f4ead5"
+                    content:
+                      - type: div
+                        attributes:
+                          style:
+                            fontSize: 1.5rem
+                            marginBottom: 1rem
+                            color: "#b8860b"
+                            fontStyle: italic
+                        content: "« L'art de l'écriture »"
+                      - type: h2
+                        attributes:
+                          style:
+                            fontSize: 4rem
+                            marginBottom: 1.5rem
+                            color: "#f4ead5"
+                            textShadow: "3px 3px 6px rgba(0,0,0,0.8)"
+                            fontWeight: 300
+                            fontFamily: "'Playfair Display', serif"
+                            letterSpacing: 3px
+                            lineHeight: 1.2
+                        content: "Bibliothèque Dorée"
+                      - type: p
+                        attributes:
+                          style:
+                            fontSize: 1.3rem
+                            color: "#f4ead5"
+                            maxWidth: 600px
+                            margin: 0 auto 2.5rem
+                            lineHeight: 1.8
+                            textShadow: "1px 1px 3px rgba(0,0,0,0.8)"
+                            fontStyle: italic
+                        content: "Découvrez un univers littéraire raffiné où chaque mot résonne comme une mélodie, où chaque page révèle les secrets de l'art d'écrire."
+                      - type: button
+                        attributes:
+                          style:
+                            backgroundColor: "rgba(184, 134, 11, 0.9)"
+                            color: "#f4ead5"
+                            border: "2px solid #b8860b"
+                            padding: 1.5rem 3rem
+                            fontSize: 1.1rem
+                            borderRadius: 50px
+                            cursor: pointer
+                            fontWeight: 400
+                            fontFamily: "'Crimson Text', serif"
+                            letterSpacing: 1px
+                            boxShadow: "0 6px 12px rgba(0,0,0,0.4)"
+                            transition: "all 0.3s ease"
+                            textTransform: uppercase
+                        content: "Explorer nos Trésors"
+
+              # Section collections raffinée
+              - type: section
+                attributes:
+                  id: services
+                  style:
+                    marginBottom: 6rem
+                    backgroundColor: "rgba(244, 234, 213, 0.3)"
+                    padding: 4rem 3rem
+                    borderRadius: 15px
+                    border: "1px solid rgba(184, 134, 11, 0.3)"
+                content:
+                  - type: div
+                    attributes:
+                      style:
+                        textAlign: center
+                        marginBottom: 1rem
+                        fontSize: 1rem
+                        color: "#8b4513"
+                        letterSpacing: 2px
+                        textTransform: uppercase
+                    content: "Nos Collections"
+                  - type: h3
+                    attributes:
+                      style:
+                        fontSize: 3rem
+                        textAlign: center
+                        marginBottom: 3rem
+                        color: "#2d1b14"
+                        fontFamily: "'Playfair Display', serif"
+                        fontWeight: 300
+                        letterSpacing: 2px
+                    content: "Œuvres d'Exception"
+                  - type: div
+                    attributes:
+                      style:
+                        display: grid
+                        gridTemplateColumns: repeat(auto-fit, minmax(320px, 1fr))
+                        gap: 2.5rem
+                    content:
+                      # Utilisation du composant Switch pour itérer sur les services
+                      - type: Switch
+                        content: ~.services
+                        singleOption:
+                          load: service-card
+
+              # Section À Propos littéraire
+              - type: section
+                attributes:
+                  id: about
+                  style:
+                    marginBottom: 6rem
+                    padding: 5rem 3rem
+                    background: "linear-gradient(135deg, rgba(45, 27, 20, 0.05) 0%, rgba(184, 134, 11, 0.1) 50%, rgba(45, 27, 20, 0.05) 100%)"
+                    borderRadius: 20px
+                    border: "2px solid rgba(184, 134, 11, 0.3)"
+                    position: relative
+                    overflow: hidden
+                content:
+                  # Ornement décoratif
+                  - type: div
+                    attributes:
+                      style:
+                        position: absolute
+                        top: -50px
+                        right: -50px
+                        width: 200px
+                        height: 200px
+                        background: "radial-gradient(circle, rgba(184, 134, 11, 0.1) 0%, transparent 70%)"
+                        borderRadius: 50%
+
+                  - type: div
+                    attributes:
+                      style:
+                        position: relative
+                        zIndex: 2
+                        maxWidth: 800px
+                        margin: 0 auto
+                        textAlign: center
+                    content:
+                      # En-tête de section
+                      - type: div
+                        attributes:
+                          style:
+                            marginBottom: 1.5rem
+                            fontSize: 1rem
+                            color: "#8b4513"
+                            letterSpacing: 3px
+                            textTransform: uppercase
+                            fontFamily: "'Crimson Text', serif"
+                        content: "Notre Histoire"
+
+                      - type: h3
+                        attributes:
+                          style:
+                            fontSize: 3.5rem
+                            marginBottom: 3rem
+                            color: "#2d1b14"
+                            fontFamily: "'Playfair Display', serif"
+                            fontWeight: 300
+                            letterSpacing: 2px
+                            lineHeight: 1.2
+                        content: "L'Art des Lettres"
+
+                      # Contenu principal en deux colonnes
+                      - type: div
+                        attributes:
+                          style:
+                            display: grid
+                            gridTemplateColumns: "1fr 1fr"
+                            gap: 4rem
+                            marginBottom: 3rem
+                            textAlign: left
+                        content:
+                          # Première colonne
+                          - type: div
+                            content:
+                              - type: p
+                                attributes:
+                                  style:
+                                    fontSize: 1.2rem
+                                    lineHeight: 1.8
+                                    color: "#2d1b14"
+                                    marginBottom: 2rem
+                                    fontFamily: "'Crimson Text', serif"
+                                    fontStyle: italic
+                                content: "Depuis les premiers manuscrits enluminés jusqu'aux éditions contemporaines les plus raffinées, la Bibliothèque Dorée perpétue une tradition millénaire de préservation et de transmission du savoir littéraire."
+
+                              - type: p
+                                attributes:
+                                  style:
+                                    fontSize: 1.1rem
+                                    lineHeight: 1.7
+                                    color: "#3d2818"
+                                    fontFamily: "'Crimson Text', serif"
+                                content: "Notre collection, constituée au fil des siècles par des bibliophiles passionnés, rassemble des trésors uniques : manuscrits médiévaux, éditions princeps, reliures précieuses et correspondances d'auteurs illustres."
+
+                          # Deuxième colonne
+                          - type: div
+                            content:
+                              - type: p
+                                attributes:
+                                  style:
+                                    fontSize: 1.1rem
+                                    lineHeight: 1.7
+                                    color: "#3d2818"
+                                    marginBottom: 2rem
+                                    fontFamily: "'Crimson Text', serif"
+                                content: "Chaque ouvrage qui compose notre fonds témoigne d'un art consommé de l'écriture et de l'édition. Nos artisans relieurs perpétuent des techniques ancestrales, créant des écrins dignes des plus beaux textes."
+
+                              - type: p
+                                attributes:
+                                  style:
+                                    fontSize: 1.2rem
+                                    lineHeight: 1.8
+                                    color: "#2d1b14"
+                                    fontFamily: "'Crimson Text', serif"
+                                    fontStyle: italic
+                                content: "« Dans chaque livre réside une âme, dans chaque page bat un cœur, dans chaque mot vibre l'éternité de la pensée humaine. »"
+
+                      # Citation ornementée
+                      - type: div
+                        attributes:
+                          style:
+                            backgroundColor: "rgba(184, 134, 11, 0.1)"
+                            padding: 2.5rem
+                            borderRadius: 15px
+                            border: "1px solid rgba(184, 134, 11, 0.3)"
+                            marginBottom: 3rem
+                            position: relative
+                        content:
+                          # Guillemets décoratifs
+                          - type: div
+                            attributes:
+                              style:
+                                position: absolute
+                                top: -10px
+                                left: 20px
+                                fontSize: 4rem
+                                color: "#b8860b"
+                                fontFamily: "'Playfair Display', serif"
+                                lineHeight: 1
+                                opacity: 0.7
+                            content: "\""
+
+                          - type: blockquote
+                            attributes:
+                              style:
+                                fontSize: 1.3rem
+                                fontStyle: italic
+                                color: "#2d1b14"
+                                textAlign: center
+                                margin: 0
+                                fontFamily: "'Playfair Display', serif"
+                                letterSpacing: 1px
+                                lineHeight: 1.6
+                            content: "La vraie bibliothèque n'est pas un simple dépôt de livres, mais un temple où l'esprit humain dialogue avec l'éternité."
+
+                          - type: cite
+                            attributes:
+                              style:
+                                display: block
+                                marginTop: 1.5rem
+                                fontSize: 1rem
+                                color: "#8b4513"
+                                fontFamily: "'Crimson Text', serif"
+                                letterSpacing: 2px
+                                textTransform: uppercase
+                            content: "— Fondateur de la Bibliothèque, MDCCCXII"
+
+                      # Statistiques élégantes
+                      - type: div
+                        attributes:
+                          style:
+                            display: grid
+                            gridTemplateColumns: repeat(3, 1fr)
+                            gap: 2rem
+                            marginTop: 2rem
+                        content:
+                          - type: div
+                            attributes:
+                              style:
+                                textAlign: center
+                                padding: 1.5rem
+                            content:
+                              - type: div
+                                attributes:
+                                  style:
+                                    fontSize: 2.5rem
+                                    fontWeight: bold
+                                    color: "#b8860b"
+                                    fontFamily: "'Playfair Display', serif"
+                                    marginBottom: 0.5rem
+                                content: "12,847"
+                              - type: div
+                                attributes:
+                                  style:
+                                    fontSize: 0.9rem
+                                    color: "#8b4513"
+                                    letterSpacing: 1px
+                                    textTransform: uppercase
+                                    fontFamily: "'Crimson Text', serif"
+                                content: "Manuscrits Précieux"
+
+                          - type: div
+                            attributes:
+                              style:
+                                textAlign: center
+                                padding: 1.5rem
+                            content:
+                              - type: div
+                                attributes:
+                                  style:
+                                    fontSize: 2.5rem
+                                    fontWeight: bold
+                                    color: "#b8860b"
+                                    fontFamily: "'Playfair Display', serif"
+                                    marginBottom: 0.5rem
+                                content: "214"
+                              - type: div
+                                attributes:
+                                  style:
+                                    fontSize: 0.9rem
+                                    color: "#8b4513"
+                                    letterSpacing: 1px
+                                    textTransform: uppercase
+                                    fontFamily: "'Crimson Text', serif"
+                                content: "Années d'Histoire"
+
+                          - type: div
+                            attributes:
+                              style:
+                                textAlign: center
+                                padding: 1.5rem
+                            content:
+                              - type: div
+                                attributes:
+                                  style:
+                                    fontSize: 2.5rem
+                                    fontWeight: bold
+                                    color: "#b8860b"
+                                    fontFamily: "'Playfair Display', serif"
+                                    marginBottom: 0.5rem
+                                content: "∞"
+                              - type: div
+                                attributes:
+                                  style:
+                                    fontSize: 0.9rem
+                                    color: "#8b4513"
+                                    letterSpacing: 1px
+                                    textTransform: uppercase
+                                    fontFamily: "'Crimson Text', serif"
+                                content: "Sagesse Préservée"
+
+              # Section Catalogue d'ouvrages
+              - type: section
+                attributes:
+                  id: catalogue
+                  style:
+                    marginBottom: 6rem
+                    padding: 5rem 3rem
+                    background: "linear-gradient(135deg, rgba(184, 134, 11, 0.08) 0%, rgba(45, 27, 20, 0.05) 50%, rgba(184, 134, 11, 0.08) 100%)"
+                    borderRadius: 20px
+                    border: "2px solid rgba(184, 134, 11, 0.2)"
+                    position: relative
+                content:
+                  # Titre de section
+                  - type: div
+                    attributes:
+                      style:
+                        textAlign: center
+                        marginBottom: 1rem
+                        fontSize: 1rem
+                        color: "#8b4513"
+                        letterSpacing: 2px
+                        textTransform: uppercase
+                    content: "Catalogue Littéraire"
+
+                  - type: h3
+                    attributes:
+                      style:
+                        fontSize: 3rem
+                        textAlign: center
+                        marginBottom: 4rem
+                        color: "#2d1b14"
+                        fontFamily: "'Playfair Display', serif"
+                        fontWeight: 300
+                        letterSpacing: 2px
+                    content: "Trésors Bibliographiques"
+
+                  # Interface de filtrage
+                  - type: div
+                    attributes:
+                      style:
+                        backgroundColor: "rgba(255, 255, 255, 0.7)"
+                        padding: 2rem
+                        borderRadius: 15px
+                        marginBottom: 3rem
+                        border: "1px solid rgba(184, 134, 11, 0.3)"
+                        boxShadow: "0 4px 8px rgba(45, 27, 20, 0.1)"
+                    content:
+                      - type: h4
+                        attributes:
+                          style:
+                            fontSize: 1.4rem
+                            marginBottom: 1.5rem
+                            color: "#2d1b14"
+                            fontFamily: "'Playfair Display', serif"
+                            fontWeight: 400
+                            letterSpacing: 1px
+                        content: "Filtres de Recherche"
+
+                      - type: div
+                        attributes:
+                          style:
+                            display: grid
+                            gridTemplateColumns: "1fr 1fr 1fr"
+                            gap: 1.5rem
+                            marginBottom: 1.5rem
+                        content:
+                          # Recherche textuelle
+                          - type: TextField
+                            dataLocation: ~.livre_filters.recherche
+                            label: "Recherche :"
+                            placeholder: "Titre, auteur, résumé..."
+                            inputAttributes:
+                              style:
+                                fontFamily: "'Crimson Text', serif"
+                                border: "2px solid rgba(184, 134, 11, 0.3)"
+                                borderRadius: 8px
+                                padding: 0.7rem
+
+                          # Date de début
+                          - type: TextField
+                            dataLocation: ~.livre_filters.publie_apres
+                            label: "Publié après :"
+                            inputType: "date"
+                            inputAttributes:
+                              style:
+                                fontFamily: "'Crimson Text', serif"
+                                border: "2px solid rgba(184, 134, 11, 0.3)"
+                                borderRadius: 8px
+                                padding: 0.7rem
+
+                          # Date de fin
+                          - type: TextField
+                            dataLocation: ~.livre_filters.publie_avant
+                            label: "Publié avant :"
+                            inputType: "date"
+                            inputAttributes:
+                              style:
+                                fontFamily: "'Crimson Text', serif"
+                                border: "2px solid rgba(184, 134, 11, 0.3)"
+                                borderRadius: 8px
+                                padding: 0.7rem
+
+                      # Filtres par statut (checkboxes)
+                      - type: div
+                        content:
+                          - type: div
+                            attributes:
+                              style:
+                                fontSize: 1rem
+                                marginBottom: 1rem
+                                color: "#8b4513"
+                                fontFamily: "'Crimson Text', serif"
+                                fontWeight: 500
+                            content: "Statut de publication :"
+
+                          - type: div
+                            attributes:
+                              style:
+                                display: flex
+                                gap: 2rem
+                                flexWrap: wrap
+                            content:
+                              - type: CheckBoxField
+                                dataLocation: ~.livre_filters.statuts.precommande
+                                options:
+                                  - value: true
+                                    label: "Précommande"
+                                attributes:
+                                  style:
+                                    fontFamily: "'Crimson Text', serif"
+
+                              - type: CheckBoxField
+                                dataLocation: ~.livre_filters.statuts.disponible
+                                options:
+                                  - value: true
+                                    label: "Disponible"
+                                attributes:
+                                  style:
+                                    fontFamily: "'Crimson Text', serif"
+
+                              - type: CheckBoxField
+                                dataLocation: ~.livre_filters.statuts.fin_commercialisation
+                                options:
+                                  - value: true
+                                    label: "Fin de commercialisation"
+                                attributes:
+                                  style:
+                                    fontFamily: "'Crimson Text', serif"
+
+                  # Liste filtrée des ouvrages
+                  - type: DataFilter
+                    context: global
+                    filters:
+                      - subjectsWithProperty: ouvrage
+                        andConditions:
+                          # Filtre recherche textuelle
+                          - orConditions:
+                              - when: ~.livre_filters.recherche
+                                isEmpty: true
+                              - whenFilterableData: ouvrage.contenu_recherchable
+                                contains: ~.livre_filters.recherche
+
+                          # Filtre date après
+                          - orConditions:
+                              - when: ~.livre_filters.publie_apres
+                                isEmpty: true
+                              - whenFilterableData: ouvrage.date_publication
+                                ">=": ~.livre_filters.publie_apres
+                                compareAsDates: true
+
+                          # Filtre date avant
+                          - orConditions:
+                              - when: ~.livre_filters.publie_avant
+                                isEmpty: true
+                              - whenFilterableData: ouvrage.date_publication
+                                "<=": ~.livre_filters.publie_avant
+                                compareAsDates: true
+
+                          # Filtre statuts (logique OR entre les statuts cochés)
+                          - orConditions:
+                              # Si aucun statut n'est coché, on affiche tout
+                              - andConditions:
+                                  - when: ~.livre_filters.statuts.precommande
+                                    isNot: true
+                                  - when: ~.livre_filters.statuts.disponible
+                                    isNot: true
+                                  - when: ~.livre_filters.statuts.fin_commercialisation
+                                    isNot: true
+
+                              # Si précommande est coché
+                              - andConditions:
+                                  - when: ~.livre_filters.statuts.precommande
+                                    is: true
+                                  - whenFilterableData: ouvrage.statut
+                                    is: "precommande"
+
+                              # Si disponible est coché
+                              - andConditions:
+                                  - when: ~.livre_filters.statuts.disponible
+                                    is: true
+                                  - whenFilterableData: ouvrage.statut
+                                    is: "disponible"
+
+                              # Si fin de commercialisation est coché
+                              - andConditions:
+                                  - when: ~.livre_filters.statuts.fin_commercialisation
+                                    is: true
+                                  - whenFilterableData: ouvrage.statut
+                                    is: "fin_commercialisation"
+
+                    content:
+                      - type: Switch
+                        contentWrapper:
+                          tag: section
+                          attributes:
+                            style:
+                              display: grid
+                              gridTemplateColumns: "repeat(auto-fill, minmax(350px, 1fr))"
+                              gap: 2rem
+                        content: ~~.ouvrages
+                        singleOption:
+                          load: carte-ouvrage
+                        paginated: true
+                        paginationProps:
+                          pageMaxItemCount: 4
+                          maxPageButtonsCount: 5
+                        after:
+                          type: div
+                          attributes:
+                            style:
+                              display: flex
+                              justifyContent: center
+                              marginTop: 2rem
+                              padding: 1rem
+                              backgroundColor: "rgba(255, 255, 255, 0.5)"
+                              borderRadius: 10px
+                              border: "1px solid rgba(184, 134, 11, 0.2)"
+                          content:
+                            type: PageControls
+      # Footer élégant
+      - type: footer
+        attributes:
+          id: correspondance
+          style:
+            backgroundColor: "#2d1b14"
+            color: "#f4ead5"
+            padding: 3rem 0
+            marginTop: auto
+            borderTop: "3px solid #b8860b"
+        content:
+          - type: div
+            attributes:
+              style:
+                maxWidth: 1000px
+                margin: 0 auto
+                padding: 0 2rem
+                textAlign: center
+            content:
+              - type: div
+                attributes:
+                  style:
+                    marginBottom: 2rem
+                content:
+                  - type: h4
+                    attributes:
+                      style:
+                        marginBottom: 1.5rem
+                        fontSize: 1.8rem
+                        fontFamily: "'Playfair Display', serif"
+                        color: "#b8860b"
+                        letterSpacing: 1px
+                    content: "Correspondance"
+                  - type: p
+                    attributes:
+                      style:
+                        margin: 0.8rem 0
+                        fontSize: 1.1rem
+                        fontFamily: "'Crimson Text', serif"
+                    content: "Missive : contact@bibliotheque-doree.fr"
+                  - type: p
+                    attributes:
+                      style:
+                        margin: 0.8rem 0
+                        fontSize: 1.1rem
+                        fontFamily: "'Crimson Text', serif"
+                    content: "Télégraphe : 01 23 45 67 89"
+
+                    # Bouton pour ouvrir le modal de contact
+                  - type: button
+                    attributes:
+                      style:
+                        backgroundColor: "#b8860b"
+                        color: "#f4ead5"
+                        border: "2px solid #d4af37"
+                        padding: 1rem 2.5rem
+                        fontSize: 1.1rem
+                        borderRadius: 50px
+                        cursor: pointer
+                        fontWeight: 400
+                        fontFamily: "'Crimson Text', serif"
+                        letterSpacing: 1px
+                        marginTop: 1.5rem
+                        boxShadow: "0 4px 8px rgba(0,0,0,0.3)"
+                        transition: "all 0.3s ease"
+                    actions:
+                      - what: setData
+                        on: click
+                        path: ~.show_contact_modal
+                        value: true
+                        when: ~.message_sent
+                        isEmpty: true
+                      - what: setData
+                        on: click
+                        path: ~.contact_form_step
+                        value: 1
+                        when: ~.message_sent
+                        isEmpty: true
+                      - what: hide
+                        when: ~.message_sent
+                        is: true
+                    content: "Contactez-nous"
+
+                  # Message de confirmation après envoi
+                  - type: div
+                    attributes:
+                      style:
+                        marginTop: 2.5rem
+                        padding: 1rem 1.5rem
+                        backgroundColor: "rgba(184, 134, 11, 0.1)"
+                        border: "1px solid rgba(184, 134, 11, 0.3)"
+                        borderRadius: 8px
+                        textAlign: center
+                        fontFamily: "'Crimson Text', serif"
+                        fontSize: 1rem
+                        color: "#8b4513"
+                        fontStyle: italic
+                    actions:
+                      - what: hide
+                        when: ~.message_sent
+                        isEmpty: true
+                    content: "✉️ Merci pour votre envoi, nous allons regarder bientôt votre missive avec attention."
+
+                  - type: div
+                    attributes:
+                      style:
+                        borderTop: "1px solid rgba(184, 134, 11, 0.5)"
+                        marginTop: 3rem
+                        paddingTop: 2rem
+                        fontSize: 0.95rem
+                        color: "rgba(244, 234, 213, 0.8)"
+                        fontStyle: italic
+                    content: "© MMXXIV Bibliothèque Dorée • Tous droits réservés avec déférence"
+
+      # Modal de contact
+      - type: Modal
+        showBoolPath: ~.show_contact_modal
+        closeButton: true
+        headerTitle:
+          type: div
+          attributes:
+            style:
+              textAlign: center
+              color: "#2d1b14"
+              fontFamily: "'Playfair Display', serif"
+              fontSize: 1.8rem
+              fontWeight: 300
+              letterSpacing: 1px
+          content: "Correspondance Distinguée"
+        body:
+          type: div
+          attributes:
+            style:
+              padding: 2rem
+              fontFamily: "'Crimson Text', serif"
+          content:
+            - type: div
+              attributes:
+                style:
+                  marginBottom: 2rem
+                  textAlign: center
+                  color: "#8b4513"
+                  fontStyle: italic
+              content: "Adressez-nous votre missive avec déférence"
+
+            # Indicateur d'étape
+            - type: div
+              attributes:
+                style:
+                  display: flex
+                  justifyContent: center
+                  alignItems: center
+                  marginBottom: 2rem
+                  gap: 1rem
+              content:
+                - type: div
+                  attributes:
+                    style:
+                      display: flex
+                      alignItems: center
+                      gap: 0.5rem
+                      padding: 0.5rem 1rem
+                      borderRadius: 20px
+                      backgroundColor: "#b8860b"
+                      color: "#f4ead5"
+                      fontSize: 0.9rem
+                      fontFamily: "'Crimson Text', serif"
+                      fontWeight: 500
+                  actions:
+                    - what: hide
+                      when: ~.contact_form_step
+                      is: 2
+                  content:
+                    - "1"
+                    - type: span
+                      attributes:
+                        style:
+                          marginLeft: 0.5rem
+                      content: "Informations"
+
+                - type: div
+                  attributes:
+                    style:
+                      display: flex
+                      alignItems: center
+                      gap: 0.5rem
+                      padding: 0.5rem 1rem
+                      borderRadius: 20px
+                      backgroundColor: "rgba(184, 134, 11, 0.3)"
+                      color: "#8b4513"
+                      fontSize: 0.9rem
+                      fontFamily: "'Crimson Text', serif"
+                      fontWeight: 500
+                  actions:
+                    - what: hide
+                      when: ~.contact_form_step
+                      is: 1
+                  content:
+                    - "1"
+                    - type: span
+                      attributes:
+                        style:
+                          marginLeft: 0.5rem
+                      content: "Informations ✓"
+
+                - type: div
+                  attributes:
+                    style:
+                      fontSize: 1.5rem
+                      color: "#b8860b"
+                  content: "→"
+
+                - type: div
+                  attributes:
+                    style:
+                      display: flex
+                      alignItems: center
+                      gap: 0.5rem
+                      padding: 0.5rem 1rem
+                      borderRadius: 20px
+                      backgroundColor: "rgba(184, 134, 11, 0.3)"
+                      color: "#8b4513"
+                      fontSize: 0.9rem
+                      fontFamily: "'Crimson Text', serif"
+                      fontWeight: 500
+                  actions:
+                    - what: hide
+                      when: ~.contact_form_step
+                      is: 2
+                  content:
+                    - "2"
+                    - type: span
+                      attributes:
+                        style:
+                          marginLeft: 0.5rem
+                      content: "Message"
+
+                - type: div
+                  attributes:
+                    style:
+                      display: flex
+                      alignItems: center
+                      gap: 0.5rem
+                      padding: 0.5rem 1rem
+                      borderRadius: 20px
+                      backgroundColor: "#b8860b"
+                      color: "#f4ead5"
+                      fontSize: 0.9rem
+                      fontFamily: "'Crimson Text', serif"
+                      fontWeight: 500
+                  actions:
+                    - what: hide
+                      when: ~.contact_form_step
+                      is: 1
+                  content:
+                    - "2"
+                    - type: span
+                      attributes:
+                        style:
+                          marginLeft: 0.5rem
+                      content: "Message"
+
+            # Formulaire de contact multistep
+            - type: div
+              attributes:
+                style:
+                  maxWidth: 500px
+                  margin: 0 auto
+              content:
+                # ÉTAPE 1 : Informations personnelles
+                - type: div
+                  attributes:
+                    style:
+                      display: block
+                  actions:
+                    - what: hide
+                      when: ~.contact_form_step
+                      is: 2
+                  content:
+                    - type: TextField
+                      dataLocation: ~.contact_form.nom
+                      label: "Nom & Titre :"
+                      placeholder: "Monsieur le Comte de..."
+                      inputAttributes:
+                        style:
+                          fontFamily: "'Crimson Text', serif"
+                          border: "2px solid rgba(184, 134, 11, 0.3)"
+                          borderRadius: 8px
+                          padding: 0.8rem
+
+                    - type: TextField
+                      dataLocation: ~.contact_form.email
+                      label: "Missive électronique :"
+                      placeholder: "votre.missive@domaine.fr"
+                      inputType: "email"
+                      inputAttributes:
+                        style:
+                          fontFamily: "'Crimson Text', serif"
+                          border: "2px solid rgba(184, 134, 11, 0.3)"
+                          borderRadius: 8px
+                          padding: 0.8rem
+
+                    - type: SelectField
+                      dataLocation: ~.contact_form.sujet
+                      label: "Objet de la correspondance :"
+                      options:
+                        - label: "Veuillez choisir l'objet de votre missive..."
+                          value: ""
+                        - label: "Consultation littéraire & expertise"
+                          value: "consultation"
+                        - label: "Acquisition d'ouvrages précieux"
+                          value: "acquisition"
+                        - label: "Restauration de manuscrits"
+                          value: "restauration"
+                        - label: "Reliure d'exception"
+                          value: "reliure"
+                        - label: "Évaluation & estimation"
+                          value: "evaluation"
+                        - label: "Donation & legs littéraires"
+                          value: "donation"
+                        - label: "Visite privée de la bibliothèque"
+                          value: "visite"
+                        - label: "Autre correspondance"
+                          value: "autre"
+                      inputAttributes:
+                        style:
+                          fontFamily: "'Crimson Text', serif"
+                          border: "2px solid rgba(184, 134, 11, 0.3)"
+                          borderRadius: 8px
+                          padding: 0.8rem
+
+                # ÉTAPE 2 : Message
+                - type: div
+                  attributes:
+                    style:
+                      display: block
+                  actions:
+                    - what: hide
+                      when: ~.contact_form_step
+                      is: 1
+                  content:
+                    - type: TextAreaField
+                      dataLocation: ~.contact_form.message
+                      label: "Votre message :"
+                      placeholder: "Honoré Bibliothécaire,\n\nJ'ai l'honneur de vous écrire concernant..."
+                      rows: 8
+                      inputAttributes:
+                        style:
+                          fontFamily: "'Crimson Text', serif"
+                          border: "2px solid rgba(184, 134, 11, 0.3)"
+                          borderRadius: 8px
+                          padding: 0.8rem
+                          resize: "vertical"
+
+                # Boutons de navigation - ÉTAPE 1
+                - type: div
+                  attributes:
+                    style:
+                      display: flex
+                      justifyContent: space-between
+                      marginTop: 2rem
+                      gap: 1rem
+                  actions:
+                    - what: hide
+                      when: ~.contact_form_step
+                      is: 2
+                  content:
+                    - type: button
+                      attributes:
+                        style:
+                          backgroundColor: "transparent"
+                          color: "#8b4513"
+                          border: "2px solid #8b4513"
+                          padding: 0.8rem 2rem
+                          borderRadius: 25px
+                          cursor: pointer
+                          fontFamily: "'Crimson Text', serif"
+                          fontSize: 1rem
+                          transition: "all 0.3s ease"
+                      actions:
+                        - what: setData
+                          on: click
+                          path: ~.show_contact_modal
+                          value: false
+                        - what: setData
+                          on: click
+                          path: ~.contact_form_step
+                          value: 1
+                      content: "Annuler"
+
+                    # Bouton Suivant désactivé si champs étape 1 vides
+                    - type: button
+                      attributes:
+                        style:
+                          backgroundColor: "#8b7355"
+                          color: "#d3c7b8"
+                          border: "2px solid #8b7355"
+                          padding: 0.8rem 2rem
+                          borderRadius: 25px
+                          cursor: "not-allowed"
+                          fontFamily: "'Crimson Text', serif"
+                          fontSize: 1rem
+                          transition: "all 0.3s ease"
+                          opacity: 0.6
+                      actions:
+                        - what: hide
+                          andConditions:
+                            - when: ~.contact_form.nom
+                              isEmpty: "not"
+                            - when: ~.contact_form.email
+                              isEmpty: "not"
+                            - when: ~.contact_form.sujet
+                              isEmpty: "not"
+                      content: "Complétez tous les champs"
+
+                    # Bouton Suivant actif
+                    - type: button
+                      attributes:
+                        style:
+                          backgroundColor: "#b8860b"
+                          color: "#f4ead5"
+                          border: "2px solid #b8860b"
+                          padding: 0.8rem 2rem
+                          borderRadius: 25px
+                          cursor: pointer
+                          fontFamily: "'Crimson Text', serif"
+                          fontSize: 1rem
+                          boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
+                          transition: "all 0.3s ease"
+                      actions:
+                        - what: hide
+                          when: ~.contact_form.nom
+                          isEmpty: true
+                        - what: hide
+                          when: ~.contact_form.email
+                          isEmpty: true
+                        - what: hide
+                          when: ~.contact_form.sujet
+                          isEmpty: true
+                        - what: setData
+                          on: click
+                          path: ~.contact_form_step
+                          value: 2
+                          andConditions:
+                            - when: ~.contact_form.nom
+                              isEmpty: "not"
+                            - when: ~.contact_form.email
+                              isEmpty: "not"
+                            - when: ~.contact_form.sujet
+                              isEmpty: "not"
+                      content: "Suivant →"
+
+                # Boutons de navigation - ÉTAPE 2
+                - type: div
+                  attributes:
+                    style:
+                      display: flex
+                      justifyContent: space-between
+                      marginTop: 2rem
+                      gap: 1rem
+                  actions:
+                    - what: hide
+                      when: ~.contact_form_step
+                      is: 1
+                  content:
+                    - type: button
+                      attributes:
+                        style:
+                          backgroundColor: "transparent"
+                          color: "#8b4513"
+                          border: "2px solid #8b4513"
+                          padding: 0.8rem 2rem
+                          borderRadius: 25px
+                          cursor: pointer
+                          fontFamily: "'Crimson Text', serif"
+                          fontSize: 1rem
+                          transition: "all 0.3s ease"
+                      actions:
+                        - what: setData
+                          on: click
+                          path: ~.contact_form_step
+                          value: 1
+                      content: "← Précédent"
+
+                    # Bouton Envoyer désactivé si message vide
+                    - type: button
+                      attributes:
+                        style:
+                          backgroundColor: "#8b7355"
+                          color: "#d3c7b8"
+                          border: "2px solid #8b7355"
+                          padding: 0.8rem 2rem
+                          borderRadius: 25px
+                          cursor: "not-allowed"
+                          fontFamily: "'Crimson Text', serif"
+                          fontSize: 1rem
+                          transition: "all 0.3s ease"
+                          opacity: 0.6
+                      actions:
+                        - what: hide
+                          when: ~.contact_form.message
+                          isEmpty: "not"
+                      content: "Veuillez saisir votre message"
+
+                    # Bouton Envoyer actif
+                    - type: button
+                      attributes:
+                        style:
+                          backgroundColor: "#b8860b"
+                          color: "#f4ead5"
+                          border: "2px solid #b8860b"
+                          padding: 0.8rem 2rem
+                          borderRadius: 25px
+                          cursor: pointer
+                          fontFamily: "'Crimson Text', serif"
+                          fontSize: 1rem
+                          boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
+                          transition: "all 0.3s ease"
+                      actions:
+                        - what: hide
+                          when: ~.contact_form.message
+                          isEmpty: true
+                        - what: setData
+                          on: click
+                          path: ~.show_contact_modal
+                          value: false
+                          when: ~.contact_form.message
+                          isEmpty: "not"
+                        - what: setData
+                          on: click
+                          path: ~.message_sent
+                          value: true
+                          when: ~.contact_form.message
+                          isEmpty: "not"
+                        - what: setData
+                          on: click
+                          path: ~.contact_form_step
+                          value: 1
+                          when: ~.contact_form.message
+                          isEmpty: "not"
+                      content: "Envoyer la Missive"
+
+templates:
+  service-card:
+    type: div
+    attributes:
+      style:
+        padding: 2.5rem
+        backgroundColor: "rgba(255, 255, 255, 0.9)"
+        borderRadius: 15px
+        textAlign: center
+        boxShadow: "0 8px 16px rgba(45, 27, 20, 0.2)"
+        border: "1px solid rgba(184, 134, 11, 0.3)"
+        transition: "all 0.3s ease"
+        position: relative
+    content:
+      # Image d'illustration
+      - type: img
+        attributes:
+          src: ~.image
+          alt: ~.title
+          style:
+            width: 80px
+            height: 80px
+            objectFit: cover
+            borderRadius: 50%
+            margin: 0 auto 1.5rem
+            border: "3px solid #b8860b"
+            filter: "sepia(20%) saturate(1.2)"
+
+      - type: div
+        attributes:
+          style:
+            width: 60px
+            height: 2px
+            backgroundColor: "#b8860b"
+            margin: 0 auto 1.5rem
+      - type: h4
+        attributes:
+          style:
+            marginBottom: 1.5rem
+            color: "#2d1b14"
+            fontSize: 1.6rem
+            fontFamily: "'Playfair Display', serif"
+            fontWeight: 400
+            letterSpacing: 1px
+        content: ~.title
+      - type: p
+        attributes:
+          style:
+            color: "#8b4513"
+            lineHeight: 1.7
+            fontSize: 1.05rem
+            fontFamily: "'Crimson Text', serif"
+            fontStyle: italic
+        content: ~.description
+
+  carte-ouvrage:
+    type: div
+    attributes:
+      style:
+        backgroundColor: "rgba(255, 255, 255, 0.95)"
+        borderRadius: 15px
+        overflow: hidden
+        boxShadow: "0 6px 12px rgba(45, 27, 20, 0.15)"
+        border: "1px solid rgba(184, 134, 11, 0.2)"
+        transition: "all 0.3s ease"
+        cursor: pointer
+    content:
+      # Image de couverture
+      - type: img
+        attributes:
+          src: ~.ouvrage.couverture
+          alt: ~.ouvrage.titre
+          style:
+            width: 100%
+            height: 200px
+            objectFit: cover
+            borderBottom: "2px solid rgba(184, 134, 11, 0.3)"
+
+      # Contenu de la carte
+      - type: div
+        attributes:
+          style:
+            padding: 1.5rem
+        content:
+          # Badge de statut
+          - type: div
+            attributes:
+              style:
+                marginBottom: 1rem
+                display: flex
+                justifyContent: flex-start
+            content:
+              # Badge Précommande
+              - type: span
+                attributes:
+                  style:
+                    backgroundColor: "#ffc107"
+                    color: "#000"
+                    padding: 0.3rem 0.8rem
+                    borderRadius: 12px
+                    fontSize: 0.8rem
+                    fontWeight: 500
+                    fontFamily: "'Crimson Text', serif"
+                    textTransform: uppercase
+                    letterSpacing: 0.5px
+                actions:
+                  - what: hide
+                    when: ~.ouvrage.statut
+                    isNot: "precommande"
+                content: "Précommande"
+
+              # Badge Disponible
+              - type: span
+                attributes:
+                  style:
+                    backgroundColor: "#28a745"
+                    color: "#fff"
+                    padding: 0.3rem 0.8rem
+                    borderRadius: 12px
+                    fontSize: 0.8rem
+                    fontWeight: 500
+                    fontFamily: "'Crimson Text', serif"
+                    textTransform: uppercase
+                    letterSpacing: 0.5px
+                actions:
+                  - what: hide
+                    when: ~.ouvrage.statut
+                    isNot: "disponible"
+                content: "Disponible"
+
+              # Badge Fin de commercialisation
+              - type: span
+                attributes:
+                  style:
+                    backgroundColor: "#dc3545"
+                    color: "#fff"
+                    padding: 0.3rem 0.8rem
+                    borderRadius: 12px
+                    fontSize: 0.8rem
+                    fontWeight: 500
+                    fontFamily: "'Crimson Text', serif"
+                    textTransform: uppercase
+                    letterSpacing: 0.5px
+                actions:
+                  - what: hide
+                    when: ~.ouvrage.statut
+                    isNot: "fin_commercialisation"
+                content: "Fin de commercialisation"
+
+          # Titre
+          - type: h5
+            attributes:
+              style:
+                fontSize: 1.3rem
+                marginBottom: 0.5rem
+                color: "#2d1b14"
+                fontFamily: "'Playfair Display', serif"
+                fontWeight: 500
+                letterSpacing: 0.5px
+                lineHeight: 1.3
+            content: ~.ouvrage.titre
+
+          # Auteur
+          - type: p
+            attributes:
+              style:
+                fontSize: 1rem
+                marginBottom: 0.8rem
+                color: "#8b4513"
+                fontFamily: "'Crimson Text', serif"
+                fontStyle: italic
+                fontWeight: 400
+            content: ~.ouvrage.auteur
+
+          # Date de publication formatée
+          - type: div
+            attributes:
+              style:
+                fontSize: 0.9rem
+                color: "#6c5ce7"
+                fontFamily: "'Crimson Text', serif"
+                marginBottom: 0.5rem
+                fontWeight: 400
+            content:
+              - "Publié le "
+              # Format personnalisé de la date (approximatif pour l'instant)
+              - ~.ouvrage.date_publication_formatee
+
+data:
+  show_contact_modal: false
+  message_sent: false
+  contact_form_step: 1
+  contact_form:
+    nom: ""
+    email: ""
+    sujet: ""
+    message: ""
+  livre_filters:
+    recherche: ""
+    publie_apres: ""
+    publie_avant: ""
+    statuts:
+      precommande: false
+      disponible: false
+      fin_commercialisation: false
+  services:
+    - title: "Écriture & Style"
+      description: "L'art subtil de manier la plume avec élégance, où chaque phrase devient une symphonie de mots soigneusement orchestrée."
+      image: "https://images.unsplash.com/photo-1455390582262-044cdead277a?w=200&h=200&fit=crop&crop=center"
+    - title: "Reliure Précieuse"
+      description: "Des ouvrages magnifiquement reliés, témoins d'un savoir-faire ancestral et gardiens de la beauté littéraire."
+      image: "https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=200&h=200&fit=crop&crop=center"
+    - title: "Manuscrits Rares"
+      description: "Conservation et restauration de documents précieux, préservant l'héritage culturel pour les générations futures."
+      image: "https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=200&h=200&fit=crop&crop=center"
+  ouvrages:
+    - ouvrage:
+        couverture: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=400&fit=crop&crop=center"
+        titre: "Les Mystères de la Rose Noire"
+        auteur: "Marguerite de Beaumont"
+        date_publication: "2023-03-15"
+        date_publication_formatee: "15 Mars 2023"
+        statut: "disponible"
+        resume_court: "Un roman gothique plein de mystères et de passion, situé dans un château du XVIII siècle."
+        contenu_recherchable: "Les Mystères de la Rose Noire Marguerite de Beaumont roman gothique mystères passion château XVIII siècle"
+
+    - ouvrage:
+        couverture: "https://images.unsplash.com/photo-1544947950-fa07a98d237f?w=300&h=400&fit=crop&crop=center"
+        titre: "Chroniques des Temps Perdus"
+        auteur: "Alexandre Dufresne"
+        date_publication: "2024-01-20"
+        date_publication_formatee: "20 Janvier 2024"
+        statut: "precommande"
+        resume_court: "Une épopée fantastique retraçant les légendes oubliées d'un royaume perdu."
+        contenu_recherchable: "Chroniques des Temps Perdus Alexandre Dufresne épopée fantastique légendes oubliées royaume perdu"
+
+    - ouvrage:
+        couverture: "https://images.unsplash.com/photo-1512820790803-83ca734da794?w=300&h=400&fit=crop&crop=center"
+        titre: "L'Art de la Calligraphie Ancienne"
+        auteur: "Professeur Henri Lavoisier"
+        date_publication: "2022-09-10"
+        date_publication_formatee: "10 Septembre 2022"
+        statut: "fin_commercialisation"
+        resume_court: "Guide pratique sur les techniques ancestrales de calligraphie européenne."
+        contenu_recherchable: "L'Art de la Calligraphie Ancienne Professeur Henri Lavoisier guide pratique techniques ancestrales calligraphie européenne"
+
+    - ouvrage:
+        couverture: "https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=300&h=400&fit=crop&crop=center"
+        titre: "Mémoires d'un Bibliothécaire"
+        auteur: "Jean-Baptiste Rousseau"
+        date_publication: "2023-11-05"
+        date_publication_formatee: "5 Novembre 2023"
+        statut: "disponible"
+        resume_court: "Récit autobiographique d'un garde des manuscrits parisien."
+        contenu_recherchable: "Mémoires d'un Bibliothécaire Jean-Baptiste Rousseau récit autobiographique garde manuscrits parisien"
+
+    - ouvrage:
+        couverture: "https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?w=300&h=400&fit=crop&crop=center"
+        titre: "La Poésie de l'Âme"
+        auteur: "Céleste de Montclair"
+        date_publication: "2024-06-30"
+        date_publication_formatee: "30 Juin 2024"
+        statut: "precommande"
+        resume_court: "Recueil de vers romantiques inspirés par la nature et l'amour."
+        contenu_recherchable: "La Poésie de l'Âme Céleste de Montclair recueil vers romantiques inspirés nature amour"
+
+    - ouvrage:
+        couverture: "https://images.unsplash.com/photo-1532012197267-da84d127e765?w=300&h=400&fit=crop&crop=center"
+        titre: "Histoire des Manuscrits Enluminés"
+        auteur: "Dr. Marie-Claire Dubois"
+        date_publication: "2021-12-03"
+        date_publication_formatee: "3 Décembre 2021"
+        statut: "fin_commercialisation"
+        resume_court: "Étude approfondie de l'art de l'enluminure du Moyen Âge."
+        contenu_recherchable: "Histoire des Manuscrits Enluminés Dr. Marie-Claire Dubois étude approfondie art enluminure Moyen Âge"