Galerie des blocs

Voir le HTML rendu

<div id="sample_button_001" class="gas-block-anchor" data-gas-block-id="sample_button_001"><div class="gas-block-button gas-block-button--align-center" data-block-type="button">
    <a class="gas-button gas-button--primary" href="/activites/" data-gas-field-key="sample.button.label">
                <span class="gas-block-button__label">Découvrir nos activités</span>
                    <span class="gas-block-button__icon" aria-hidden="true"><svg class="gas-block-button__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span>
            </a>
</div>
</div>

variante : secondary

Voir le HTML rendu

<div id="sample_button_001" class="gas-block-anchor" data-gas-block-id="sample_button_001"><div class="gas-block-button gas-block-button--align-center" data-block-type="button">
    <a class="gas-button gas-button--secondary" href="/activites/" data-gas-field-key="sample.button.label">
                <span class="gas-block-button__label">Découvrir nos activités</span>
                    <span class="gas-block-button__icon" aria-hidden="true"><svg class="gas-block-button__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span>
            </a>
</div>
</div>

variante : outline

Voir le HTML rendu

<div id="sample_button_001" class="gas-block-anchor" data-gas-block-id="sample_button_001"><div class="gas-block-button gas-block-button--align-center" data-block-type="button">
    <a class="gas-button gas-button--outline" href="/activites/" data-gas-field-key="sample.button.label">
                <span class="gas-block-button__label">Découvrir nos activités</span>
                    <span class="gas-block-button__icon" aria-hidden="true"><svg class="gas-block-button__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span>
            </a>
</div>
</div>

variante : link

Voir le HTML rendu

<div id="sample_button_001" class="gas-block-anchor" data-gas-block-id="sample_button_001"><div class="gas-block-button gas-block-button--align-center" data-block-type="button">
    <a class="gas-button gas-button--link" href="/activites/" data-gas-field-key="sample.button.label">
                <span class="gas-block-button__label">Découvrir nos activités</span>
                    <span class="gas-block-button__icon" aria-hidden="true"><svg class="gas-block-button__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span>
            </a>
</div>
</div>

Séparateur `divider`

Trait horizontal fin séparant deux sections de contenu. À suggérer quand une capture montre une ligne visible (pleine, pointillée ou tiretée) isolée entre deux blocs. Ne pas confondre avec `spacer` (aucun trait visible, juste de l'espace) ni avec les bordures internes déjà gérées par d'autres blocs (ex. `section` avec fond alterné).

variante : solid

Voir le HTML rendu

<div id="sample_divider_001" class="gas-block-anchor" data-gas-block-id="sample_divider_001"><hr
    class="gas-block-divider gas-block-divider--style-solid gas-block-divider--width-thin gas-block-divider--spacing-m gas-block-divider--color-muted"
    data-block-type="divider"
/>
</div>

variante : dashed

Voir le HTML rendu

<div id="sample_divider_001" class="gas-block-anchor" data-gas-block-id="sample_divider_001"><hr
    class="gas-block-divider gas-block-divider--style-dashed gas-block-divider--width-thin gas-block-divider--spacing-m gas-block-divider--color-muted"
    data-block-type="divider"
/>
</div>

variante : dotted

Voir le HTML rendu

<div id="sample_divider_001" class="gas-block-anchor" data-gas-block-id="sample_divider_001"><hr
    class="gas-block-divider gas-block-divider--style-dotted gas-block-divider--width-thin gas-block-divider--spacing-m gas-block-divider--color-muted"
    data-block-type="divider"
/>
</div>

Groupe `group`

Conteneur de flux horizontal ou vertical pour disposer des atomes côte à côte (l'équivalent d'un frame auto-layout Figma). À suggérer quand une capture montre plusieurs petits éléments alignés sur une même rangée sans grille ni colonnes dédiées (ex. deux boutons côte à côte, une icône + un badge sur une ligne, un nuage de badges). Ne pas confondre avec `section` (conteneur de page avec grille de colonnes, fond, padding) ni avec `row` (mise en page 2-3 colonnes de blocs de contenu complets).

Voir le calendrier Nous contacter

Nouveau

Voir le HTML rendu

<div id="sample_group_001" class="gas-block-anchor" data-gas-block-id="sample_group_001"><div class="gas-block-group gas-block-group--row gas-block-group--wrap gas-block-group--align-center gas-block-group--justify-start gas-block-group--gap-sm" data-block-type="group">
            <div class="gas-block-group__item">
            <div id="sample_group_child_001" class="gas-block-anchor" data-gas-block-id="sample_group_child_001"><div class="gas-block-button gas-block-button--align-left" data-block-type="button">
    <a class="gas-button gas-button--primary" href="/activites/" data-gas-field-key="sample.group.primary_button.label">
                <span class="gas-block-button__label">Découvrir nos activités</span>
            </a>
</div>
</div>        </div>
            <div class="gas-block-group__item">
            <div id="sample_group_child_002" class="gas-block-anchor" data-gas-block-id="sample_group_child_002"><div class="gas-block-button gas-block-button--align-left" data-block-type="button">
    <a class="gas-button gas-button--outline" href="/a-propos/" data-gas-field-key="sample.group.secondary_button.label">
                <span class="gas-block-button__label">En savoir plus</span>
            </a>
</div>
</div>        </div>
            <div class="gas-block-group__item">
            <div id="sample_group_child_003" class="gas-block-anchor" data-gas-block-id="sample_group_child_003"><span
    class="gas-block-badge gas-block-badge--tone-success gas-block-badge--size-medium"
    data-block-type="badge"
     data-gas-field-key="sample.group.badge.label">Nouveau</span>
</div>        </div>
    </div>
</div>

Icône `icon`

Une seule icône décorative autonome, sans texte ni carte associée. À suggérer quand une capture montre UNE icône isolée entre deux sections (séparateur visuel, symbole ornemental). Ne pas confondre avec les icônes intégrées à d'autres blocs (`features_grid`, `icon_list`, boutons) qui restent gérées par leur bloc parent — ce bloc sert uniquement à une icône complètement seule dans la mise en page.

Voir le HTML rendu

<div id="sample_icon_001" class="gas-block-anchor" data-gas-block-id="sample_icon_001"><div
    class="gas-block-icon gas-block-icon--size-large gas-block-icon--color-primary gas-block-icon--align-center"
    data-block-type="icon"
>
            <span class="gas-block-icon__inner" aria-hidden="true"><svg class="gas-block-icon__svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg></span>
    </div>
</div>

Liste à puces-icônes `icon_list`

Liste compacte d'éléments courts, chacun précédé d'une icône (ex. liste d'avantages, de prérequis). À suggérer quand une capture montre plusieurs lignes courtes avec une petite icône répétée à gauche de chaque ligne, SANS titre par item ni mise en page en cartes. Ne pas confondre avec `features_grid` (grille de cartes avec titre + texte par item), `link_list` (liste de liens cliquables, icon en string libre non branchée sur GasBlockIcons) ni `stats` (chiffres, pas de puces).

variante : stacked

Formation gratuite pour les nouveaux bénévoles
Encadrement par des moniteurs diplômés
Matériel fourni sur place
Certificat de participation en fin de saison

Voir le HTML rendu

<div id="sample_icon_list_001" class="gas-block-anchor" data-gas-block-id="sample_icon_list_001"><ul
    class="gas-block-icon-list gas-block-icon-list--layout-stacked gas-block-icon-list--icon-color-primary gas-block-icon-list--icon-size-small"
    data-block-type="icon_list"
>
                    <li class="gas-block-icon-list__item">
                            <span class="gas-block-icon-list__icon" aria-hidden="true"><svg class="gas-block-icon-list__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg></span>
                        <span class="gas-block-icon-list__text" data-gas-field-key="sample.icon_list.items.0.text">Formation gratuite pour les nouveaux bénévoles</span>
        </li>
                    <li class="gas-block-icon-list__item">
                            <span class="gas-block-icon-list__icon" aria-hidden="true"><svg class="gas-block-icon-list__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg></span>
                        <span class="gas-block-icon-list__text" data-gas-field-key="sample.icon_list.items.1.text">Encadrement par des moniteurs diplômés</span>
        </li>
                    <li class="gas-block-icon-list__item">
                            <span class="gas-block-icon-list__icon" aria-hidden="true"><svg class="gas-block-icon-list__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg></span>
                        <span class="gas-block-icon-list__text" data-gas-field-key="sample.icon_list.items.2.text">Matériel fourni sur place</span>
        </li>
                    <li class="gas-block-icon-list__item">
                            <span class="gas-block-icon-list__icon" aria-hidden="true"><svg class="gas-block-icon-list__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg></span>
                        <span class="gas-block-icon-list__text" data-gas-field-key="sample.icon_list.items.3.text">Certificat de participation en fin de saison</span>
        </li>
    </ul>
</div>

variante : inline

Formation gratuite pour les nouveaux bénévoles
Encadrement par des moniteurs diplômés
Matériel fourni sur place
Certificat de participation en fin de saison

Voir le HTML rendu

<div id="sample_icon_list_001" class="gas-block-anchor" data-gas-block-id="sample_icon_list_001"><ul
    class="gas-block-icon-list gas-block-icon-list--layout-inline gas-block-icon-list--icon-color-primary gas-block-icon-list--icon-size-small"
    data-block-type="icon_list"
>
                    <li class="gas-block-icon-list__item">
                            <span class="gas-block-icon-list__icon" aria-hidden="true"><svg class="gas-block-icon-list__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg></span>
                        <span class="gas-block-icon-list__text" data-gas-field-key="sample.icon_list.items.0.text">Formation gratuite pour les nouveaux bénévoles</span>
        </li>
                    <li class="gas-block-icon-list__item">
                            <span class="gas-block-icon-list__icon" aria-hidden="true"><svg class="gas-block-icon-list__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg></span>
                        <span class="gas-block-icon-list__text" data-gas-field-key="sample.icon_list.items.1.text">Encadrement par des moniteurs diplômés</span>
        </li>
                    <li class="gas-block-icon-list__item">
                            <span class="gas-block-icon-list__icon" aria-hidden="true"><svg class="gas-block-icon-list__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg></span>
                        <span class="gas-block-icon-list__text" data-gas-field-key="sample.icon_list.items.2.text">Matériel fourni sur place</span>
        </li>
                    <li class="gas-block-icon-list__item">
                            <span class="gas-block-icon-list__icon" aria-hidden="true"><svg class="gas-block-icon-list__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg></span>
                        <span class="gas-block-icon-list__text" data-gas-field-key="sample.icon_list.items.3.text">Certificat de participation en fin de saison</span>
        </li>
    </ul>
</div>

variante : columns-2

Formation gratuite pour les nouveaux bénévoles
Encadrement par des moniteurs diplômés
Matériel fourni sur place
Certificat de participation en fin de saison

Voir le HTML rendu

<div id="sample_icon_list_001" class="gas-block-anchor" data-gas-block-id="sample_icon_list_001"><ul
    class="gas-block-icon-list gas-block-icon-list--layout-columns-2 gas-block-icon-list--icon-color-primary gas-block-icon-list--icon-size-small"
    data-block-type="icon_list"
>
                    <li class="gas-block-icon-list__item">
                            <span class="gas-block-icon-list__icon" aria-hidden="true"><svg class="gas-block-icon-list__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg></span>
                        <span class="gas-block-icon-list__text" data-gas-field-key="sample.icon_list.items.0.text">Formation gratuite pour les nouveaux bénévoles</span>
        </li>
                    <li class="gas-block-icon-list__item">
                            <span class="gas-block-icon-list__icon" aria-hidden="true"><svg class="gas-block-icon-list__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg></span>
                        <span class="gas-block-icon-list__text" data-gas-field-key="sample.icon_list.items.1.text">Encadrement par des moniteurs diplômés</span>
        </li>
                    <li class="gas-block-icon-list__item">
                            <span class="gas-block-icon-list__icon" aria-hidden="true"><svg class="gas-block-icon-list__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg></span>
                        <span class="gas-block-icon-list__text" data-gas-field-key="sample.icon_list.items.2.text">Matériel fourni sur place</span>
        </li>
                    <li class="gas-block-icon-list__item">
                            <span class="gas-block-icon-list__icon" aria-hidden="true"><svg class="gas-block-icon-list__icon-svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg></span>
                        <span class="gas-block-icon-list__text" data-gas-field-key="sample.icon_list.items.3.text">Certificat de participation en fin de saison</span>
        </li>
    </ul>
</div>

Espaceur `spacer`

Espace vertical vide entre deux blocs. À suggérer quand une capture montre un écart inhabituellement grand entre deux sections qui n'est pas déjà porté par les marges normales des blocs environnants. Ne pas confondre avec les marges internes d'un bloc `section` (modificateur density) ni avec un `divider` (qui affiche un trait visible) — le spacer ne rend jamais aucun élément visuel.

Voir le HTML rendu

<div id="sample_spacer_001" class="gas-block-anchor" data-gas-block-id="sample_spacer_001"><div class="gas-block-spacer gas-block-spacer--size-xl" data-block-type="spacer" aria-hidden="true"></div>
</div>

Statistique isolée `stat`

Un seul chiffre clé avec son libellé, autonome (pas une liste). À suggérer quand une capture montre UN SEUL gros chiffre mis en avant hors grille (ex. "10 ans d'expérience" en solo dans une bande). Ne pas confondre avec `stats` (repeater de plusieurs statistiques en grille/liste) ni avec les cellules kind=stat internes de `bento_grid` (non réutilisables hors bento) — si la capture montre PLUSIEURS chiffres alignés, c'est `stats`, pas `stat`.

128

bénévoles actifs cette année

Voir le HTML rendu

<div id="sample_stat_001" class="gas-block-anchor" data-gas-block-id="sample_stat_001"><div class="gas-block-stat gas-block-stat--size-large gas-block-stat--align-center" data-block-type="stat">
    <div class="gas-block-stat__value" data-gas-field-key="sample.stat.value">
                128            </div>
            <div class="gas-block-stat__label" data-gas-field-key="sample.stat.label">bénévoles actifs cette année</div>
    </div>
</div>

content

En-tête article `article_header`

Héro d’article avec image, titre, sous-titre et métadonnées.

variante : hero

Titre d’article de démonstration

Sous-titre de démonstration.

Voir le HTML rendu

<div id="sample_article_header_001" class="gas-block-anchor" data-gas-block-id="sample_article_header_001"><header class="gas-block-article-header gas-block-article-header--hero gas-editorial-single__header gas-editorial-single__header--hero" data-block-type="article_header">
    
    <div class="gas-block-article-header__content">
                    <h1 class="gas-block-article-header__title">Titre d’article de démonstration</h1>
        
        
                    <p class="gas-block-article-header__subtitle gas-editorial-single__excerpt">Sous-titre de démonstration.</p>
            </div>
</header>
</div>

variante : compact

Titre d’article de démonstration

Sous-titre de démonstration.

Voir le HTML rendu

<div id="sample_article_header_001" class="gas-block-anchor" data-gas-block-id="sample_article_header_001"><header class="gas-block-article-header gas-block-article-header--compact gas-editorial-single__header gas-editorial-single__header--compact" data-block-type="article_header">
    
    <div class="gas-block-article-header__content">
                    <h1 class="gas-block-article-header__title">Titre d’article de démonstration</h1>
        
        
                    <p class="gas-block-article-header__subtitle gas-editorial-single__excerpt">Sous-titre de démonstration.</p>
            </div>
</header>
</div>

variante : overlay

Titre d’article de démonstration

Sous-titre de démonstration.

Voir le HTML rendu

<div id="sample_article_header_001" class="gas-block-anchor" data-gas-block-id="sample_article_header_001"><header class="gas-block-article-header gas-block-article-header--overlay gas-editorial-single__header gas-editorial-single__header--overlay" data-block-type="article_header">
    
    <div class="gas-block-article-header__content">
                    <h1 class="gas-block-article-header__title">Titre d’article de démonstration</h1>
        
        
                    <p class="gas-block-article-header__subtitle gas-editorial-single__excerpt">Sous-titre de démonstration.</p>
            </div>
</header>
</div>

variante : split

Titre d’article de démonstration

Sous-titre de démonstration.

Voir le HTML rendu

<div id="sample_article_header_001" class="gas-block-anchor" data-gas-block-id="sample_article_header_001"><header class="gas-block-article-header gas-block-article-header--split gas-editorial-single__header gas-editorial-single__header--split" data-block-type="article_header">
    
    <div class="gas-block-article-header__content">
                    <h1 class="gas-block-article-header__title">Titre d’article de démonstration</h1>
        
        
                    <p class="gas-block-article-header__subtitle gas-editorial-single__excerpt">Sous-titre de démonstration.</p>
            </div>
</header>
</div>

variante : band

Titre d’article de démonstration

Sous-titre de démonstration.

Voir le HTML rendu

<div id="sample_article_header_001" class="gas-block-anchor" data-gas-block-id="sample_article_header_001"><header class="gas-block-article-header gas-block-article-header--band gas-editorial-single__header gas-editorial-single__header--band" data-block-type="article_header">
    
    <div class="gas-block-article-header__content">
                    <h1 class="gas-block-article-header__title">Titre d’article de démonstration</h1>
        
        
                    <p class="gas-block-article-header__subtitle gas-editorial-single__excerpt">Sous-titre de démonstration.</p>
            </div>
</header>
</div>

variante : card

Titre d’article de démonstration

Sous-titre de démonstration.

Voir le HTML rendu

<div id="sample_article_header_001" class="gas-block-anchor" data-gas-block-id="sample_article_header_001"><header class="gas-block-article-header gas-block-article-header--card gas-editorial-single__header gas-editorial-single__header--card" data-block-type="article_header">
    
    <div class="gas-block-article-header__content">
                    <h1 class="gas-block-article-header__title">Titre d’article de démonstration</h1>
        
        
                    <p class="gas-block-article-header__subtitle gas-editorial-single__excerpt">Sous-titre de démonstration.</p>
            </div>
</header>
</div>

variante : offset

Titre d’article de démonstration

Sous-titre de démonstration.

Voir le HTML rendu

<div id="sample_article_header_001" class="gas-block-anchor" data-gas-block-id="sample_article_header_001"><header class="gas-block-article-header gas-block-article-header--offset gas-editorial-single__header gas-editorial-single__header--offset" data-block-type="article_header">
    
    <div class="gas-block-article-header__content">
                    <h1 class="gas-block-article-header__title">Titre d’article de démonstration</h1>
        
        
                    <p class="gas-block-article-header__subtitle gas-editorial-single__excerpt">Sous-titre de démonstration.</p>
            </div>
</header>
</div>

variante : title_only

Titre d’article de démonstration

Sous-titre de démonstration.

Voir le HTML rendu

<div id="sample_article_header_001" class="gas-block-anchor" data-gas-block-id="sample_article_header_001"><header class="gas-block-article-header gas-block-article-header--title_only gas-editorial-single__header gas-editorial-single__header--title_only" data-block-type="article_header">
    
    <div class="gas-block-article-header__content">
                    <h1 class="gas-block-article-header__title">Titre d’article de démonstration</h1>
        
        
                    <p class="gas-block-article-header__subtitle gas-editorial-single__excerpt">Sous-titre de démonstration.</p>
            </div>
</header>
</div>

variante : none

Aucun rendu visuel — bloc piloté par des données réelles (vide avec l'échantillon par défaut).

Lecteur audio `audio_player`

Intègre un lecteur Spotify, SoundCloud, YouTube ou Bandcamp avec artwork. Idéal pour partager un extrait musical ou une playlist.

variante : spotify

Notre dernier single

Extrait de l'album « Horizons » — enregistré en public.

Voir le HTML rendu

<div id="sample_audio_player_001" class="gas-block-anchor" data-gas-block-id="sample_audio_player_001"><div class="gas-block-audio-player gas-block-audio-player--spotify gas-block-audio-player--standard"
     data-block-type="audio_player"
     style="--gas-container: var(--gas-container-default)">
    <div class="gas-block-audio-player__inner">
                    <h2 class="gas-block-audio-player__title">Notre dernier single</h2>
                <div class="gas-block-audio-player__frame" style="--_player-h: 352px">
            <iframe
                src="https://open.spotify.com/embed/track/3n3Ppam7vgaVa1iaRUc9Lp?utm_source=generator"
                height="352"
                frameborder="0"
                allowtransparency="true"
                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                loading="lazy"
                title="Notre dernier single"
                class="gas-block-audio-player__iframe"
            ></iframe>
        </div>
                    <p class="gas-block-audio-player__caption">Extrait de l&#039;album « Horizons » — enregistré en public.</p>
            </div>
</div>
</div>

variante : soundcloud

Notre dernier single

Extrait de l'album « Horizons » — enregistré en public.

Voir le HTML rendu

<div id="sample_audio_player_001" class="gas-block-anchor" data-gas-block-id="sample_audio_player_001"><div class="gas-block-audio-player gas-block-audio-player--soundcloud gas-block-audio-player--standard"
     data-block-type="audio_player"
     style="--gas-container: var(--gas-container-default)">
    <div class="gas-block-audio-player__inner">
                    <h2 class="gas-block-audio-player__title">Notre dernier single</h2>
                <div class="gas-block-audio-player__frame" style="--_player-h: 300px">
            <iframe
                src="https://w.soundcloud.com/player/?url=https%3A%2F%2Fsoundcloud.com%2Fforss%2Fflickermood&#038;color=%23ffef79&#038;auto_play=false&#038;hide_related=true&#038;show_comments=false&#038;show_user=true&#038;show_reposts=false&#038;show_teaser=false"
                height="300"
                frameborder="0"
                allowtransparency="true"
                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                loading="lazy"
                title="Notre dernier single"
                class="gas-block-audio-player__iframe"
            ></iframe>
        </div>
                    <p class="gas-block-audio-player__caption">Extrait de l&#039;album « Horizons » — enregistré en public.</p>
            </div>
</div>
</div>

variante : youtube

Notre dernier single

Extrait de l'album « Horizons » — enregistré en public.

Voir le HTML rendu

<div id="sample_audio_player_001" class="gas-block-anchor" data-gas-block-id="sample_audio_player_001"><div class="gas-block-audio-player gas-block-audio-player--youtube gas-block-audio-player--standard"
     data-block-type="audio_player"
     style="--gas-container: var(--gas-container-default)">
    <div class="gas-block-audio-player__inner">
                    <h2 class="gas-block-audio-player__title">Notre dernier single</h2>
                <div class="gas-block-audio-player__frame" style="--_player-h: 280px">
            <iframe
                src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&#038;showinfo=0"
                height="280"
                frameborder="0"
                allowtransparency="true"
                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                loading="lazy"
                title="Notre dernier single"
                class="gas-block-audio-player__iframe"
            ></iframe>
        </div>
                    <p class="gas-block-audio-player__caption">Extrait de l&#039;album « Horizons » — enregistré en public.</p>
            </div>
</div>
</div>

variante : bandcamp

Notre dernier single

Extrait de l'album « Horizons » — enregistré en public.

Voir le HTML rendu

<div id="sample_audio_player_001" class="gas-block-anchor" data-gas-block-id="sample_audio_player_001"><div class="gas-block-audio-player gas-block-audio-player--bandcamp gas-block-audio-player--standard"
     data-block-type="audio_player"
     style="--gas-container: var(--gas-container-default)">
    <div class="gas-block-audio-player__inner">
                    <h2 class="gas-block-audio-player__title">Notre dernier single</h2>
                <div class="gas-block-audio-player__frame" style="--_player-h: 350px">
            <iframe
                src="https://bandcamp.com/EmbeddedPlayer/album=1335577396/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=false/transparent=true/"
                height="350"
                frameborder="0"
                allowtransparency="true"
                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                loading="lazy"
                title="Notre dernier single"
                class="gas-block-audio-player__iframe"
            ></iframe>
        </div>
                    <p class="gas-block-audio-player__caption">Extrait de l&#039;album « Horizons » — enregistré en public.</p>
            </div>
</div>
</div>

variante : default

Notre dernier single

Extrait de l'album « Horizons » — enregistré en public.

Voir le HTML rendu

<div id="sample_audio_player_001" class="gas-block-anchor" data-gas-block-id="sample_audio_player_001"><div class="gas-block-audio-player gas-block-audio-player--spotify gas-block-audio-player--standard"
     data-block-type="audio_player"
     style="--gas-container: var(--gas-container-default)">
    <div class="gas-block-audio-player__inner">
                    <h2 class="gas-block-audio-player__title">Notre dernier single</h2>
                <div class="gas-block-audio-player__frame" style="--_player-h: 352px">
            <iframe
                src="https://open.spotify.com/embed/track/3n3Ppam7vgaVa1iaRUc9Lp?utm_source=generator"
                height="352"
                frameborder="0"
                allowtransparency="true"
                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                loading="lazy"
                title="Notre dernier single"
                class="gas-block-audio-player__iframe"
            ></iframe>
        </div>
                    <p class="gas-block-audio-player__caption">Extrait de l&#039;album « Horizons » — enregistré en public.</p>
            </div>
</div>
</div>

Avant / Après `before_after`

Comparateur d'images avant/après avec curseur draggable qui révèle l'une ou l'autre.

La différence saute aux yeux

Glissez le curseur pour comparer l'avant et l'après de la restauration.

Voir le HTML rendu

<div id="sample_before_after_001" class="gas-block-anchor" data-gas-block-id="sample_before_after_001"><section
    class="gas-block-before-after"
    data-block-type="before_after"
    data-gas-block-enhancer="before_after"
    data-gas-block-config="{&quot;start&quot;:50}"
>
    <div class="gas-block-before-after__inner">
                    <h2 class="gas-block-before-after__title">La différence saute aux yeux</h2>
                            <p class="gas-block-before-after__subtitle">Glissez le curseur pour comparer l&#039;avant et l&#039;après de la restauration.</p>
        
        <figure
            class="gas-block-before-after__figure"
            style="--gas-ba-start:50%"
            data-ba-figure
        >
            <div class="gas-block-before-after__pane gas-block-before-after__pane--after">
                <img class="gas-block-before-after__image" src="/wp-content/plugins/aph-gestion/common/assets/img/sample-hero.jpg" alt="Façade après rénovation" loading="lazy" decoding="async" draggable="false" />                <span class="gas-block-before-after__badge gas-block-before-after__badge--after">Après</span>
            </div>

            <div class="gas-block-before-after__pane gas-block-before-after__pane--before" data-ba-clip>
                <img class="gas-block-before-after__image" src="/wp-content/plugins/aph-gestion/common/assets/img/sample-hero.jpg" alt="Façade avant rénovation" loading="lazy" decoding="async" draggable="false" />                <span class="gas-block-before-after__badge gas-block-before-after__badge--before">Avant</span>
            </div>

            <button
                type="button"
                class="gas-block-before-after__handle"
                data-ba-handle
                role="slider"
                aria-label="Avant / Après"
                aria-valuemin="0"
                aria-valuemax="100"
                aria-valuenow="50"
                aria-orientation="horizontal"
            >
                <span class="gas-block-before-after__handle-line" aria-hidden="true"></span>
                <span class="gas-block-before-after__handle-grip" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
                        <path d="m9 7-5 5 5 5" /><path d="m15 7 5 5-5 5" />
                    </svg>
                </span>
            </button>
        </figure>
    </div>
</section>
</div>

Carrousel de cards `card_carousel`

Rangée horizontale scrollable de cards image+titre. Idéal pour des catalogues de livres, produits, podcasts ou contenus mis en avant.

variante : default

Découvrez nos contenus

Voir le HTML rendu

<div id="pretty_card_carousel_001" class="gas-block-anchor" data-gas-block-id="pretty_card_carousel_001"><section class="gas-block-card-carousel gas-block-card-carousel--default gas-block-card-carousel--cols-4 gas-block-card-carousel--controls" style="--gas-carousel-prev-label:&quot;Précédent&quot;;--gas-carousel-next-label:&quot;Suivant&quot;;" data-block-type="card_carousel">
            <h2 class="gas-block-card-carousel__title">Découvrez nos contenus</h2>
        <div class="gas-block-card-carousel__viewport">
        <ul class="gas-block-card-carousel__track">
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-1/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1543002588-bfa74002ed7e?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                                    <span class="gas-block-card-carousel__badge">NOUVEAU</span>
                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">L&#039;art de bien penser</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Essai · 2024</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-2/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">Cercles de parole</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Guide pratique</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-3/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1495446815901-a7297e633e8d?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">Présence au monde</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Essai · 2023</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-4/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1532012197267-da84d127e765?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                                    <span class="gas-block-card-carousel__badge">BESTSELLER</span>
                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">Vulnérabilité partagée</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Récit · 2022</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-5/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1519682337058-a94d519337bc?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">Pratiques narratives</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Manuel · 2021</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-6/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1535905557558-afc4877a26fc?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">L&#039;écoute active</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Essai · 2020</p>
                                            </a>
                </li>
                    </ul>
    </div>
</section>
</div>

variante : compact

Découvrez nos contenus

Voir le HTML rendu

<div id="pretty_card_carousel_001" class="gas-block-anchor" data-gas-block-id="pretty_card_carousel_001"><section class="gas-block-card-carousel gas-block-card-carousel--compact gas-block-card-carousel--cols-4 gas-block-card-carousel--controls" style="--gas-carousel-prev-label:&quot;Précédent&quot;;--gas-carousel-next-label:&quot;Suivant&quot;;" data-block-type="card_carousel">
            <h2 class="gas-block-card-carousel__title">Découvrez nos contenus</h2>
        <div class="gas-block-card-carousel__viewport">
        <ul class="gas-block-card-carousel__track">
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-1/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1543002588-bfa74002ed7e?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                                    <span class="gas-block-card-carousel__badge">NOUVEAU</span>
                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">L&#039;art de bien penser</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Essai · 2024</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-2/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">Cercles de parole</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Guide pratique</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-3/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1495446815901-a7297e633e8d?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">Présence au monde</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Essai · 2023</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-4/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1532012197267-da84d127e765?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                                    <span class="gas-block-card-carousel__badge">BESTSELLER</span>
                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">Vulnérabilité partagée</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Récit · 2022</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-5/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1519682337058-a94d519337bc?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">Pratiques narratives</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Manuel · 2021</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-6/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1535905557558-afc4877a26fc?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">L&#039;écoute active</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Essai · 2020</p>
                                            </a>
                </li>
                    </ul>
    </div>
</section>
</div>

variante : with_peek

Découvrez nos contenus

Voir le HTML rendu

<div id="pretty_card_carousel_001" class="gas-block-anchor" data-gas-block-id="pretty_card_carousel_001"><section class="gas-block-card-carousel gas-block-card-carousel--with-peek gas-block-card-carousel--cols-4 gas-block-card-carousel--controls" style="--gas-carousel-prev-label:&quot;Précédent&quot;;--gas-carousel-next-label:&quot;Suivant&quot;;" data-block-type="card_carousel">
            <h2 class="gas-block-card-carousel__title">Découvrez nos contenus</h2>
        <div class="gas-block-card-carousel__viewport">
        <ul class="gas-block-card-carousel__track">
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-1/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1543002588-bfa74002ed7e?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                                    <span class="gas-block-card-carousel__badge">NOUVEAU</span>
                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">L&#039;art de bien penser</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Essai · 2024</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-2/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">Cercles de parole</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Guide pratique</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-3/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1495446815901-a7297e633e8d?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">Présence au monde</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Essai · 2023</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-4/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1532012197267-da84d127e765?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                                    <span class="gas-block-card-carousel__badge">BESTSELLER</span>
                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">Vulnérabilité partagée</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Récit · 2022</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-5/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1519682337058-a94d519337bc?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">Pratiques narratives</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Manuel · 2021</p>
                                            </a>
                </li>
                                            <li class="gas-block-card-carousel__item" style="position:relative;">
                    <a class="gas-block-card-carousel__link" href="/livre-6/">
                                                    <figure class="gas-block-card-carousel__media">
                                <img class="gas-block-card-carousel__image" src="https://images.unsplash.com/photo-1535905557558-afc4877a26fc?w=400&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                                            </figure>
                                                <h3 class="gas-block-card-carousel__title-item">L&#039;écoute active</h3>
                                                    <p class="gas-block-card-carousel__subtitle">Essai · 2020</p>
                                            </a>
                </li>
                    </ul>
    </div>
</section>
</div>

Collection — activités `collection_activites`

Les activités membres de la collection courante (tournée, thème…), avec date, lieu et lien vers la fiche.

Programme de la tournée

Voir le HTML rendu

<div id="sample_collection_activites_001" class="gas-block-anchor" data-gas-block-id="sample_collection_activites_001"><section class="gas-collection-activites" data-block-type="collection_activites"><h2 class="gas-collection-activites__title">Programme de la tournée</h2><ul class="gas-collection-activites__list"><li class="gas-collection-activites__item"><a class="gas-collection-activites__link" href="#"><img class="gas-collection-activites__img" src="https://picsum.photos/seed/gas-collection-1/480/320" alt="" loading="lazy" /><span class="gas-collection-activites__body"><span class="gas-collection-activites__name">Atelier d&#039;ouverture</span><span class="gas-collection-activites__date">12 mars 2026</span></span></a></li><li class="gas-collection-activites__item"><a class="gas-collection-activites__link" href="#"><img class="gas-collection-activites__img" src="https://picsum.photos/seed/gas-collection-2/480/320" alt="" loading="lazy" /><span class="gas-collection-activites__body"><span class="gas-collection-activites__name">Rencontre avec le public</span><span class="gas-collection-activites__date">19 mars 2026</span></span></a></li><li class="gas-collection-activites__item"><a class="gas-collection-activites__link" href="#"><img class="gas-collection-activites__img" src="https://picsum.photos/seed/gas-collection-3/480/320" alt="" loading="lazy" /><span class="gas-collection-activites__body"><span class="gas-collection-activites__name">Représentation de clôture</span><span class="gas-collection-activites__date">26 mars 2026</span></span></a></li></ul></section></div>

Coordonnées `contact_info`

Bloc de coordonnées structurées : adresse, téléphone, email, horaires et réseaux sociaux, avec icônes et liens cliquables (tel:, mailto:, carte). Pour pages contact, footer ou sidebar.

variante : stacked

Nous contacter

Une question ? Écrivez-nous ou passez nous voir.

Rue de l'Exemple 1, 1200 Genève
+41 22 000 00 00
contact@example.org
Lun–Ven, 9h–17h

Voir le HTML rendu

<div id="sample_contact_info_001" class="gas-block-anchor" data-gas-block-id="sample_contact_info_001"><section class="gas-block-contact-info gas-block-contact-info--layout-stacked" data-block-type="contact_info">
    <div class="gas-block-contact-info__inner">
                    <header class="gas-block-contact-info__head">
                <h2 class="gas-block-contact-info__title">Nous contacter</h2>                <p class="gas-block-contact-info__intro">&lt;p&gt;Une question ? Écrivez-nous ou passez nous voir.&lt;/p&gt;</p>            </header>
        
        <ul class="gas-block-contact-info__list">
                            <li class="gas-block-contact-info__item gas-block-contact-info__item--address">
                    <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 21s-7-6.5-7-11a7 7 0 0 1 14 0c0 4.5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>                    <div class="gas-block-contact-info__value">
                        <address class="gas-block-contact-info__address">Rue de l&#039;Exemple 1, 1200 Genève</address>
                                            </div>
                </li>
            
                            <li class="gas-block-contact-info__item gas-block-contact-info__item--phone">
                    <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>                    <a class="gas-block-contact-info__value" href="tel:+41220000000">+41 22 000 00 00</a>
                </li>
            
                            <li class="gas-block-contact-info__item gas-block-contact-info__item--email">
                    <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>                    <a class="gas-block-contact-info__value" href="mailto:contact@example.org">contact@example.org</a>
                </li>
            
                            <li class="gas-block-contact-info__item gas-block-contact-info__item--hours">
                    <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>                    <div class="gas-block-contact-info__value">Lun–Ven, 9h–17h</div>
                </li>
                    </ul>

                    <ul class="gas-block-contact-info__socials">
                                                        <li class="gas-block-contact-info__social">
                        <a class="gas-block-contact-info__social-link" href="#" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                            <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 8h2V5h-2a3 3 0 0 0-3 3v2H9v3h2v6h3v-6h2.2l.4-3H14V8.5c0-.4.2-.5.5-.5z"/></svg>                        </a>
                    </li>
                                                        <li class="gas-block-contact-info__social">
                        <a class="gas-block-contact-info__social-link" href="#" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                            <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="3.5"/><circle cx="17.2" cy="6.8" r="1"/></svg>                        </a>
                    </li>
                            </ul>
            </div>
</section>
</div>

variante : grid

Nous contacter

Une question ? Écrivez-nous ou passez nous voir.

Rue de l'Exemple 1, 1200 Genève
+41 22 000 00 00
contact@example.org
Lun–Ven, 9h–17h

Voir le HTML rendu

<div id="sample_contact_info_001" class="gas-block-anchor" data-gas-block-id="sample_contact_info_001"><section class="gas-block-contact-info gas-block-contact-info--layout-grid" data-block-type="contact_info">
    <div class="gas-block-contact-info__inner">
                    <header class="gas-block-contact-info__head">
                <h2 class="gas-block-contact-info__title">Nous contacter</h2>                <p class="gas-block-contact-info__intro">&lt;p&gt;Une question ? Écrivez-nous ou passez nous voir.&lt;/p&gt;</p>            </header>
        
        <ul class="gas-block-contact-info__list">
                            <li class="gas-block-contact-info__item gas-block-contact-info__item--address">
                    <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 21s-7-6.5-7-11a7 7 0 0 1 14 0c0 4.5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>                    <div class="gas-block-contact-info__value">
                        <address class="gas-block-contact-info__address">Rue de l&#039;Exemple 1, 1200 Genève</address>
                                            </div>
                </li>
            
                            <li class="gas-block-contact-info__item gas-block-contact-info__item--phone">
                    <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>                    <a class="gas-block-contact-info__value" href="tel:+41220000000">+41 22 000 00 00</a>
                </li>
            
                            <li class="gas-block-contact-info__item gas-block-contact-info__item--email">
                    <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>                    <a class="gas-block-contact-info__value" href="mailto:contact@example.org">contact@example.org</a>
                </li>
            
                            <li class="gas-block-contact-info__item gas-block-contact-info__item--hours">
                    <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>                    <div class="gas-block-contact-info__value">Lun–Ven, 9h–17h</div>
                </li>
                    </ul>

                    <ul class="gas-block-contact-info__socials">
                                                        <li class="gas-block-contact-info__social">
                        <a class="gas-block-contact-info__social-link" href="#" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                            <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 8h2V5h-2a3 3 0 0 0-3 3v2H9v3h2v6h3v-6h2.2l.4-3H14V8.5c0-.4.2-.5.5-.5z"/></svg>                        </a>
                    </li>
                                                        <li class="gas-block-contact-info__social">
                        <a class="gas-block-contact-info__social-link" href="#" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                            <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="3.5"/><circle cx="17.2" cy="6.8" r="1"/></svg>                        </a>
                    </li>
                            </ul>
            </div>
</section>
</div>

variante : inline

Nous contacter

Une question ? Écrivez-nous ou passez nous voir.

Rue de l'Exemple 1, 1200 Genève
+41 22 000 00 00
contact@example.org
Lun–Ven, 9h–17h

Voir le HTML rendu

<div id="sample_contact_info_001" class="gas-block-anchor" data-gas-block-id="sample_contact_info_001"><section class="gas-block-contact-info gas-block-contact-info--layout-inline" data-block-type="contact_info">
    <div class="gas-block-contact-info__inner">
                    <header class="gas-block-contact-info__head">
                <h2 class="gas-block-contact-info__title">Nous contacter</h2>                <p class="gas-block-contact-info__intro">&lt;p&gt;Une question ? Écrivez-nous ou passez nous voir.&lt;/p&gt;</p>            </header>
        
        <ul class="gas-block-contact-info__list">
                            <li class="gas-block-contact-info__item gas-block-contact-info__item--address">
                    <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 21s-7-6.5-7-11a7 7 0 0 1 14 0c0 4.5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>                    <div class="gas-block-contact-info__value">
                        <address class="gas-block-contact-info__address">Rue de l&#039;Exemple 1, 1200 Genève</address>
                                            </div>
                </li>
            
                            <li class="gas-block-contact-info__item gas-block-contact-info__item--phone">
                    <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>                    <a class="gas-block-contact-info__value" href="tel:+41220000000">+41 22 000 00 00</a>
                </li>
            
                            <li class="gas-block-contact-info__item gas-block-contact-info__item--email">
                    <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>                    <a class="gas-block-contact-info__value" href="mailto:contact@example.org">contact@example.org</a>
                </li>
            
                            <li class="gas-block-contact-info__item gas-block-contact-info__item--hours">
                    <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>                    <div class="gas-block-contact-info__value">Lun–Ven, 9h–17h</div>
                </li>
                    </ul>

                    <ul class="gas-block-contact-info__socials">
                                                        <li class="gas-block-contact-info__social">
                        <a class="gas-block-contact-info__social-link" href="#" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                            <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 8h2V5h-2a3 3 0 0 0-3 3v2H9v3h2v6h3v-6h2.2l.4-3H14V8.5c0-.4.2-.5.5-.5z"/></svg>                        </a>
                    </li>
                                                        <li class="gas-block-contact-info__social">
                        <a class="gas-block-contact-info__social-link" href="#" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                            <svg class="gas-block-contact-info__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="3.5"/><circle cx="17.2" cy="6.8" r="1"/></svg>                        </a>
                    </li>
                            </ul>
            </div>
</section>
</div>

CTA `cta`

Bloc d appel a l action

variante : default

Prêt à démarrer ?

Voir le HTML rendu

<div id="pretty_cta_001" class="gas-block-anchor" data-gas-block-id="pretty_cta_001"><section class="gas-block-cta gas-block-cta--none gas-block-cta--variant-default" data-block-type="cta">
    <div class="gas-block-cta__inner">
        <h2 class="gas-block-cta__title" data-gas-field-key="sample.cta.pretty.title">Prêt à démarrer ?</h2>                                    <div class="gas-block-cta__actions"><a class="gas-button gas-button--primary" href="/calendrier/">Voir le calendrier</a><a class="gas-button gas-button--outline" href="/contact/">Nous contacter</a></div>
            </div>
</section>
</div>

variante : split_image

Prêt à démarrer ?

Voir le calendrier Nous contacter

Voir le HTML rendu

<div id="pretty_cta_001" class="gas-block-anchor" data-gas-block-id="pretty_cta_001">    <section class="gas-block-cta gas-block-cta--none gas-block-cta--variant-split_image gas-block-cta--media-left" data-block-type="cta">
        <div class="gas-block-cta__inner">
                        <div class="gas-block-cta__body">
                <h2 class="gas-block-cta__title" data-gas-field-key="sample.cta.pretty.title">Prêt à démarrer ?</h2>                                                                    <div class="gas-block-cta__actions"><a class="gas-button gas-button--primary" href="/calendrier/">Voir le calendrier</a><a class="gas-button gas-button--outline" href="/contact/">Nous contacter</a></div>
                            </div>
        </div>
    </section>
    </div>

variante : with_background

Prêt à démarrer ?

Voir le calendrier Nous contacter

Voir le HTML rendu

<div id="pretty_cta_001" class="gas-block-anchor" data-gas-block-id="pretty_cta_001">    <section class="gas-block-cta gas-block-cta--none gas-block-cta--variant-with_background" data-block-type="cta" style="--gas-block-cta-overlay-opacity:0.55;">
        <div class="gas-block-cta__overlay" aria-hidden="true"></div>
        <div class="gas-block-cta__inner">
            <div class="gas-block-cta__body">
                <h2 class="gas-block-cta__title" data-gas-field-key="sample.cta.pretty.title">Prêt à démarrer ?</h2>                                                                    <div class="gas-block-cta__actions"><a class="gas-button gas-button--primary" href="/calendrier/">Voir le calendrier</a><a class="gas-button gas-button--outline" href="/contact/">Nous contacter</a></div>
                            </div>
        </div>
    </section>
    </div>

Annuaire cartographié `directory_map`

Carte (OpenStreetMap, sans clé) + liste filtrable de lieux géolocalisés (adresse, catégorie, lien). Recherche et filtres pilotés par l'URL ; carte en amélioration progressive.

variante : map_right

Nos antennes régionales

Retrouvez nos points d'accueil près de chez vous.

3 lieux

Antenne de Genève
Antenne
Rue du Rhône 12, 1204 Genève
Antenne de Lausanne
Antenne
Avenue de la Gare 8, 1003 Lausanne
Permanence de Fribourg
Permanence
Boulevard de Pérolles 25, 1700 Fribourg

Voir le HTML rendu

<div id="sample_directory_map_001" class="gas-block-anchor" data-gas-block-id="sample_directory_map_001"><section class="gas-block-directory-map gas-block-directory-map--map_right gas-block-directory-map--h-m" data-block-type="directory_map">
    <div class="gas-block-directory-map__inner">
                    <header class="gas-block-directory-map__head">
                <h2 class="gas-block-directory-map__title">Nos antennes régionales</h2>                <p class="gas-block-directory-map__lead">Retrouvez nos points d&#039;accueil près de chez vous.</p>            </header>
        
        <div class="gas-block-directory-map__layout">
            <div class="gas-block-directory-map__panel">
                                    <div class="gas-block-directory-map__toolbar">
                                                    <form class="gas-block-directory-map__search" method="get" role="search">
                                                                <input class="gas-block-directory-map__search-input" type="search" name="dm_q" value=""
                                       placeholder="Rechercher"
                                       aria-label="Rechercher" />
                                <button class="gas-button gas-button--primary" type="submit">Rechercher</button>
                            </form>
                                                                            <div class="gas-block-directory-map__facets" role="group">
                                <a class="gas-block-directory-map__chip is-active" href="/wp-json/gas/v1/design/preview/directory_map/map_right">Tous</a>
                                                                    <a class="gas-block-directory-map__chip" href="/wp-json/gas/v1/design/preview/directory_map/map_right?dm_cat=antenne">
                                        Antenne<span class="gas-block-directory-map__chip-count">2</span>
                                    </a>
                                                                    <a class="gas-block-directory-map__chip" href="/wp-json/gas/v1/design/preview/directory_map/map_right?dm_cat=permanence">
                                        Permanence<span class="gas-block-directory-map__chip-count">1</span>
                                    </a>
                                                            </div>
                                            </div>
                
                <p class="gas-block-directory-map__count" aria-live="polite">3 lieux</p>

                                    <ul class="gas-block-directory-map__list">
                                                    <li class="gas-block-directory-map__item" data-dm-index="0" data-dm-lat="46.2044" data-dm-lng="6.1432">
                                <h3 class="gas-block-directory-map__item-title">
                                    <a href="#">Antenne de Genève</a>                                </h3>
                                <span class="gas-block-directory-map__item-cat">Antenne</span>                                <p class="gas-block-directory-map__item-address">Rue du Rhône 12, 1204 Genève</p>                            </li>
                                                    <li class="gas-block-directory-map__item" data-dm-index="1" data-dm-lat="46.5197" data-dm-lng="6.6323">
                                <h3 class="gas-block-directory-map__item-title">
                                    <a href="#">Antenne de Lausanne</a>                                </h3>
                                <span class="gas-block-directory-map__item-cat">Antenne</span>                                <p class="gas-block-directory-map__item-address">Avenue de la Gare 8, 1003 Lausanne</p>                            </li>
                                                    <li class="gas-block-directory-map__item" data-dm-index="2" data-dm-lat="46.8065" data-dm-lng="7.1619">
                                <h3 class="gas-block-directory-map__item-title">
                                    <a href="#">Permanence de Fribourg</a>                                </h3>
                                <span class="gas-block-directory-map__item-cat">Permanence</span>                                <p class="gas-block-directory-map__item-address">Boulevard de Pérolles 25, 1700 Fribourg</p>                            </li>
                                            </ul>
                            </div>

            <div class="gas-block-directory-map__map"
                 data-gas-block-enhancer="directory_map"
                 data-gas-block-config="{&quot;zoom&quot;:12,&quot;points&quot;:[{&quot;i&quot;:0,&quot;lat&quot;:46.2044,&quot;lng&quot;:6.1432,&quot;label&quot;:&quot;Antenne de Gen\u00e8ve&quot;,&quot;url&quot;:&quot;#&quot;},{&quot;i&quot;:1,&quot;lat&quot;:46.5197,&quot;lng&quot;:6.6323,&quot;label&quot;:&quot;Antenne de Lausanne&quot;,&quot;url&quot;:&quot;#&quot;},{&quot;i&quot;:2,&quot;lat&quot;:46.8065,&quot;lng&quot;:7.1619,&quot;label&quot;:&quot;Permanence de Fribourg&quot;,&quot;url&quot;:&quot;#&quot;}]}">
                <div class="gas-block-directory-map__canvas" role="application" aria-label="Carte"></div>
                <noscript><p class="gas-block-directory-map__noscript">Carte — JavaScript requis.</p></noscript>
            </div>
        </div>
    </div>
</section>
</div>

variante : map_left

Nos antennes régionales

Retrouvez nos points d'accueil près de chez vous.

3 lieux

Antenne de Genève
Antenne
Rue du Rhône 12, 1204 Genève
Antenne de Lausanne
Antenne
Avenue de la Gare 8, 1003 Lausanne
Permanence de Fribourg
Permanence
Boulevard de Pérolles 25, 1700 Fribourg

Voir le HTML rendu

<div id="sample_directory_map_001" class="gas-block-anchor" data-gas-block-id="sample_directory_map_001"><section class="gas-block-directory-map gas-block-directory-map--map_left gas-block-directory-map--h-m" data-block-type="directory_map">
    <div class="gas-block-directory-map__inner">
                    <header class="gas-block-directory-map__head">
                <h2 class="gas-block-directory-map__title">Nos antennes régionales</h2>                <p class="gas-block-directory-map__lead">Retrouvez nos points d&#039;accueil près de chez vous.</p>            </header>
        
        <div class="gas-block-directory-map__layout">
            <div class="gas-block-directory-map__panel">
                                    <div class="gas-block-directory-map__toolbar">
                                                    <form class="gas-block-directory-map__search" method="get" role="search">
                                                                <input class="gas-block-directory-map__search-input" type="search" name="dm_q" value=""
                                       placeholder="Rechercher"
                                       aria-label="Rechercher" />
                                <button class="gas-button gas-button--primary" type="submit">Rechercher</button>
                            </form>
                                                                            <div class="gas-block-directory-map__facets" role="group">
                                <a class="gas-block-directory-map__chip is-active" href="/wp-json/gas/v1/design/preview/directory_map/map_left">Tous</a>
                                                                    <a class="gas-block-directory-map__chip" href="/wp-json/gas/v1/design/preview/directory_map/map_left?dm_cat=antenne">
                                        Antenne<span class="gas-block-directory-map__chip-count">2</span>
                                    </a>
                                                                    <a class="gas-block-directory-map__chip" href="/wp-json/gas/v1/design/preview/directory_map/map_left?dm_cat=permanence">
                                        Permanence<span class="gas-block-directory-map__chip-count">1</span>
                                    </a>
                                                            </div>
                                            </div>
                
                <p class="gas-block-directory-map__count" aria-live="polite">3 lieux</p>

                                    <ul class="gas-block-directory-map__list">
                                                    <li class="gas-block-directory-map__item" data-dm-index="0" data-dm-lat="46.2044" data-dm-lng="6.1432">
                                <h3 class="gas-block-directory-map__item-title">
                                    <a href="#">Antenne de Genève</a>                                </h3>
                                <span class="gas-block-directory-map__item-cat">Antenne</span>                                <p class="gas-block-directory-map__item-address">Rue du Rhône 12, 1204 Genève</p>                            </li>
                                                    <li class="gas-block-directory-map__item" data-dm-index="1" data-dm-lat="46.5197" data-dm-lng="6.6323">
                                <h3 class="gas-block-directory-map__item-title">
                                    <a href="#">Antenne de Lausanne</a>                                </h3>
                                <span class="gas-block-directory-map__item-cat">Antenne</span>                                <p class="gas-block-directory-map__item-address">Avenue de la Gare 8, 1003 Lausanne</p>                            </li>
                                                    <li class="gas-block-directory-map__item" data-dm-index="2" data-dm-lat="46.8065" data-dm-lng="7.1619">
                                <h3 class="gas-block-directory-map__item-title">
                                    <a href="#">Permanence de Fribourg</a>                                </h3>
                                <span class="gas-block-directory-map__item-cat">Permanence</span>                                <p class="gas-block-directory-map__item-address">Boulevard de Pérolles 25, 1700 Fribourg</p>                            </li>
                                            </ul>
                            </div>

            <div class="gas-block-directory-map__map"
                 data-gas-block-enhancer="directory_map"
                 data-gas-block-config="{&quot;zoom&quot;:12,&quot;points&quot;:[{&quot;i&quot;:0,&quot;lat&quot;:46.2044,&quot;lng&quot;:6.1432,&quot;label&quot;:&quot;Antenne de Gen\u00e8ve&quot;,&quot;url&quot;:&quot;#&quot;},{&quot;i&quot;:1,&quot;lat&quot;:46.5197,&quot;lng&quot;:6.6323,&quot;label&quot;:&quot;Antenne de Lausanne&quot;,&quot;url&quot;:&quot;#&quot;},{&quot;i&quot;:2,&quot;lat&quot;:46.8065,&quot;lng&quot;:7.1619,&quot;label&quot;:&quot;Permanence de Fribourg&quot;,&quot;url&quot;:&quot;#&quot;}]}">
                <div class="gas-block-directory-map__canvas" role="application" aria-label="Carte"></div>
                <noscript><p class="gas-block-directory-map__noscript">Carte — JavaScript requis.</p></noscript>
            </div>
        </div>
    </div>
</section>
</div>

variante : map_top

Nos antennes régionales

Retrouvez nos points d'accueil près de chez vous.

3 lieux

Antenne de Genève
Antenne
Rue du Rhône 12, 1204 Genève
Antenne de Lausanne
Antenne
Avenue de la Gare 8, 1003 Lausanne
Permanence de Fribourg
Permanence
Boulevard de Pérolles 25, 1700 Fribourg

Voir le HTML rendu

<div id="sample_directory_map_001" class="gas-block-anchor" data-gas-block-id="sample_directory_map_001"><section class="gas-block-directory-map gas-block-directory-map--map_top gas-block-directory-map--h-m" data-block-type="directory_map">
    <div class="gas-block-directory-map__inner">
                    <header class="gas-block-directory-map__head">
                <h2 class="gas-block-directory-map__title">Nos antennes régionales</h2>                <p class="gas-block-directory-map__lead">Retrouvez nos points d&#039;accueil près de chez vous.</p>            </header>
        
        <div class="gas-block-directory-map__layout">
            <div class="gas-block-directory-map__panel">
                                    <div class="gas-block-directory-map__toolbar">
                                                    <form class="gas-block-directory-map__search" method="get" role="search">
                                                                <input class="gas-block-directory-map__search-input" type="search" name="dm_q" value=""
                                       placeholder="Rechercher"
                                       aria-label="Rechercher" />
                                <button class="gas-button gas-button--primary" type="submit">Rechercher</button>
                            </form>
                                                                            <div class="gas-block-directory-map__facets" role="group">
                                <a class="gas-block-directory-map__chip is-active" href="/wp-json/gas/v1/design/preview/directory_map/map_top">Tous</a>
                                                                    <a class="gas-block-directory-map__chip" href="/wp-json/gas/v1/design/preview/directory_map/map_top?dm_cat=antenne">
                                        Antenne<span class="gas-block-directory-map__chip-count">2</span>
                                    </a>
                                                                    <a class="gas-block-directory-map__chip" href="/wp-json/gas/v1/design/preview/directory_map/map_top?dm_cat=permanence">
                                        Permanence<span class="gas-block-directory-map__chip-count">1</span>
                                    </a>
                                                            </div>
                                            </div>
                
                <p class="gas-block-directory-map__count" aria-live="polite">3 lieux</p>

                                    <ul class="gas-block-directory-map__list">
                                                    <li class="gas-block-directory-map__item" data-dm-index="0" data-dm-lat="46.2044" data-dm-lng="6.1432">
                                <h3 class="gas-block-directory-map__item-title">
                                    <a href="#">Antenne de Genève</a>                                </h3>
                                <span class="gas-block-directory-map__item-cat">Antenne</span>                                <p class="gas-block-directory-map__item-address">Rue du Rhône 12, 1204 Genève</p>                            </li>
                                                    <li class="gas-block-directory-map__item" data-dm-index="1" data-dm-lat="46.5197" data-dm-lng="6.6323">
                                <h3 class="gas-block-directory-map__item-title">
                                    <a href="#">Antenne de Lausanne</a>                                </h3>
                                <span class="gas-block-directory-map__item-cat">Antenne</span>                                <p class="gas-block-directory-map__item-address">Avenue de la Gare 8, 1003 Lausanne</p>                            </li>
                                                    <li class="gas-block-directory-map__item" data-dm-index="2" data-dm-lat="46.8065" data-dm-lng="7.1619">
                                <h3 class="gas-block-directory-map__item-title">
                                    <a href="#">Permanence de Fribourg</a>                                </h3>
                                <span class="gas-block-directory-map__item-cat">Permanence</span>                                <p class="gas-block-directory-map__item-address">Boulevard de Pérolles 25, 1700 Fribourg</p>                            </li>
                                            </ul>
                            </div>

            <div class="gas-block-directory-map__map"
                 data-gas-block-enhancer="directory_map"
                 data-gas-block-config="{&quot;zoom&quot;:12,&quot;points&quot;:[{&quot;i&quot;:0,&quot;lat&quot;:46.2044,&quot;lng&quot;:6.1432,&quot;label&quot;:&quot;Antenne de Gen\u00e8ve&quot;,&quot;url&quot;:&quot;#&quot;},{&quot;i&quot;:1,&quot;lat&quot;:46.5197,&quot;lng&quot;:6.6323,&quot;label&quot;:&quot;Antenne de Lausanne&quot;,&quot;url&quot;:&quot;#&quot;},{&quot;i&quot;:2,&quot;lat&quot;:46.8065,&quot;lng&quot;:7.1619,&quot;label&quot;:&quot;Permanence de Fribourg&quot;,&quot;url&quot;:&quot;#&quot;}]}">
                <div class="gas-block-directory-map__canvas" role="application" aria-label="Carte"></div>
                <noscript><p class="gas-block-directory-map__noscript">Carte — JavaScript requis.</p></noscript>
            </div>
        </div>
    </div>
</section>
</div>

Bibliothèque de fichiers `downloads_list`

Liste de documents téléchargeables en grille de cartes (PDF, ZIP…), avec badge type + taille. Accès public ou membres.

Documents à télécharger

Retrouvez ici nos ressources en libre accès.

Rapport annuel 2025 Bilan d'activité et comptes de l'exercice. PDF · 1,2 Mo Charte de l'association Valeurs, missions et engagements. PDF · 320 Ko Formulaire d'adhésion À compléter et à nous retourner. PDF · 180 Ko

Voir le HTML rendu

<div id="sample_downloads_list_001" class="gas-block-anchor" data-gas-block-id="sample_downloads_list_001"><section class="gas-block-downloads-list gas-block-downloads-list--cols-2 gas-block-downloads-list--style-outline gas-block-downloads-list--access-public" data-block-type="downloads_list" data-access="public">
    <div class="gas-block-downloads-list__inner">
                    <header class="gas-block-downloads-list__head">
                <h2 class="gas-block-downloads-list__title">Documents à télécharger</h2>                <p class="gas-block-downloads-list__lead">Retrouvez ici nos ressources en libre accès.</p>            </header>
        
                    <div class="gas-block-downloads-list__grid">
                                                        <a class="gas-block-downloads-list__card" href="#" download>
                        <span class="gas-block-downloads-list__ext" aria-hidden="true">PDF</span>
                        <span class="gas-block-downloads-list__body">
                            <span class="gas-block-downloads-list__label">Rapport annuel 2025</span>
                            <span class="gas-block-downloads-list__desc">Bilan d&#039;activité et comptes de l&#039;exercice.</span>                                                            <span class="gas-block-downloads-list__meta">PDF · 1,2 Mo</span>
                                                    </span>
                        <span class="gas-block-downloads-list__action" aria-hidden="true">↓</span>
                    </a>
                                                        <a class="gas-block-downloads-list__card" href="#" download>
                        <span class="gas-block-downloads-list__ext" aria-hidden="true">PDF</span>
                        <span class="gas-block-downloads-list__body">
                            <span class="gas-block-downloads-list__label">Charte de l&#039;association</span>
                            <span class="gas-block-downloads-list__desc">Valeurs, missions et engagements.</span>                                                            <span class="gas-block-downloads-list__meta">PDF · 320 Ko</span>
                                                    </span>
                        <span class="gas-block-downloads-list__action" aria-hidden="true">↓</span>
                    </a>
                                                        <a class="gas-block-downloads-list__card" href="#" download>
                        <span class="gas-block-downloads-list__ext" aria-hidden="true">PDF</span>
                        <span class="gas-block-downloads-list__body">
                            <span class="gas-block-downloads-list__label">Formulaire d&#039;adhésion</span>
                            <span class="gas-block-downloads-list__desc">À compléter et à nous retourner.</span>                                                            <span class="gas-block-downloads-list__meta">PDF · 180 Ko</span>
                                                    </span>
                        <span class="gas-block-downloads-list__action" aria-hidden="true">↓</span>
                    </a>
                            </div>
            </div>
</section>
</div>

Fiche — champ `entity_field`

Un champ précis de la fiche courante (clé du schéma du type, ex. "instrument"). La valeur est résolue automatiquement (libellé enum, image, lien…).

Instrument

Violoncelle

Voir le HTML rendu

<div id="sample_entity_field_001" class="gas-block-anchor" data-gas-block-id="sample_entity_field_001"><div class="gas-block-entity-field gas-entity-single__field gas-entity-single__field--instrument" data-block-type="entity_field"><span class="gas-entity-single__field-label">Instrument</span><div class="gas-entity-single__field-value" data-gas-field-key="entity.instrument">Violoncelle</div></div></div>

Fiche — champs `entity_fields`

Les champs de la fiche courante (tous par défaut, ou une liste de clés séparées par des virgules). L'ordre de la liste est respecté.

Instrument

Violoncelle

Tessiture

Baryton

Année d'entrée

2019

Voir le HTML rendu

<div id="sample_entity_fields_001" class="gas-block-anchor" data-gas-block-id="sample_entity_fields_001"><div class="gas-block-entity-fields gas-entity-single__body" data-block-type="entity_fields"><div class="gas-entity-single__field gas-entity-single__field--instrument"><span class="gas-entity-single__field-label">Instrument</span><div class="gas-entity-single__field-value" data-gas-field-key="entity.instrument">Violoncelle</div></div><div class="gas-entity-single__field gas-entity-single__field--tessiture"><span class="gas-entity-single__field-label">Tessiture</span><div class="gas-entity-single__field-value" data-gas-field-key="entity.tessiture">Baryton</div></div><div class="gas-entity-single__field gas-entity-single__field--annee_entree"><span class="gas-entity-single__field-label">Année d&#039;entrée</span><div class="gas-entity-single__field-value" data-gas-field-key="entity.annee_entree">2019</div></div></div></div>

Fiche — en-tête `entity_hero`

En-tête de la fiche courante (titre, catégorie, image principale). À poser dans un layout de fiche : le contenu vient automatiquement de la fiche affichée.

Voir le HTML rendu

<div id="sample_entity_hero_001" class="gas-block-anchor" data-gas-block-id="sample_entity_hero_001"><div class="gas-block-entity-hero" data-block-type="entity_hero"><header class="gas-entity-single__header"><p class="gas-entity-single__category">Violoncelliste</p><h1 class="gas-entity-single__title" data-gas-field-key="entity.title">Camille Rousseau</h1></header><figure class="gas-entity-single__media"><img class="gas-entity-single__image" src="https://picsum.photos/seed/gas-entity-hero-1/960/540" alt="Portrait de Camille Rousseau" loading="lazy" /></figure></div></div>

Fiche — relations `entity_relations`

Les relations de la fiche courante (ex. groupes d'un musicien), avec liens vers les fiches liées. Choisir une relation précise ou tout afficher.

Spectacles

Les Nuits blanches 2024 · Premier rôle
Concerto d'automne 2023 · Soliste

Collaborateurs

Léa Fontaine Piano
Marc Dubois Alto

Voir le HTML rendu

<div id="sample_entity_relations_001" class="gas-block-anchor" data-gas-block-id="sample_entity_relations_001"><div class="gas-block-entity-relations" data-block-type="entity_relations"><section class="gas-entity-single__relations gas-entity-single__relations--spectacles"><h2 class="gas-entity-single__relations-title">Spectacles</h2><ul class="gas-entity-single__relation-list"><li class="gas-entity-single__relation"><a class="gas-entity-single__relation-link" href="#">Les Nuits blanches</a> <span class="gas-entity-single__relation-meta">2024 · Premier rôle</span></li><li class="gas-entity-single__relation"><a class="gas-entity-single__relation-link" href="#">Concerto d&#039;automne</a> <span class="gas-entity-single__relation-meta">2023 · Soliste</span></li></ul></section><section class="gas-entity-single__relations gas-entity-single__relations--collaborateurs"><h2 class="gas-entity-single__relations-title">Collaborateurs</h2><ul class="gas-entity-single__relation-list"><li class="gas-entity-single__relation"><a class="gas-entity-single__relation-link" href="#">Léa Fontaine</a> <span class="gas-entity-single__relation-meta">Piano</span></li><li class="gas-entity-single__relation"><a class="gas-entity-single__relation-link" href="#">Marc Dubois</a> <span class="gas-entity-single__relation-meta">Alto</span></li></ul></section></div></div>

Fiche entité `entity_single`

Affiche une fiche du moteur Entity Kit (musicien, groupe…) choisie par type + slug : titre, catégorie, média, champs et relations. Données résolues côté serveur (portable WP/Astro).

Aucune fiche.

Voir le HTML rendu

<div id="sample_entity_single_001" class="gas-block-anchor" data-gas-block-id="sample_entity_single_001"><div class="gas-block-entity-single" data-block-type="entity_single"><p class="gas-block-entity-single__empty">Aucune fiche.</p></div></div>

FAQ `faq`

Liste de questions reponses

variante : accordion

Questions fréquentes

Faut-il de l'expérience préalable pour participer ?

Aucune. Nos activités sont conçues pour accueillir des débutants comme des praticiens expérimentés. Les animateurs adaptent le rythme au groupe.

Combien de personnes par session ?

Entre 8 et 14 personnes maximum. Au-delà, la qualité d'écoute se dégrade et on perd l'esprit de cercle.

Comment se déroule une session type ?

Accueil, partage initial, exercice central, intégration, partage final. Comptez 3h pour une session courte, un week-end complet pour une immersion.

Y a-t-il un suivi après la session ?

Oui. Chaque participant reçoit un livret d'intégration et peut rejoindre notre cercle de pratique mensuel (gratuit, ouvert à tous les anciens).

Voir le HTML rendu

<div id="pretty_faq_001" class="gas-block-anchor" data-gas-block-id="pretty_faq_001"><section class="gas-block-faq gas-block-faq--accordion" data-block-type="faq">
    <h2 class="gas-block-faq__title" data-gas-field-key="sample.faq.pretty.title">Questions fréquentes</h2>    <div class="gas-block-faq__items">
                                                <details class="gas-block-faq__item"><summary data-gas-field-key="sample.faq.pretty.items.0.question">Faut-il de l&#039;expérience préalable pour participer ?</summary><div data-gas-field-key="sample.faq.pretty.items.0.answer"><p>Aucune. Nos activités sont conçues pour accueillir des débutants comme des praticiens expérimentés. Les animateurs adaptent le rythme au groupe.</p></div></details>
                                                            <details class="gas-block-faq__item"><summary data-gas-field-key="sample.faq.pretty.items.1.question">Combien de personnes par session ?</summary><div data-gas-field-key="sample.faq.pretty.items.1.answer"><p>Entre 8 et 14 personnes maximum. Au-delà, la qualité d'écoute se dégrade et on perd l'esprit de cercle.</p></div></details>
                                                            <details class="gas-block-faq__item"><summary data-gas-field-key="sample.faq.pretty.items.2.question">Comment se déroule une session type ?</summary><div data-gas-field-key="sample.faq.pretty.items.2.answer"><p>Accueil, partage initial, exercice central, intégration, partage final. Comptez 3h pour une session courte, un week-end complet pour une immersion.</p></div></details>
                                                            <details class="gas-block-faq__item"><summary data-gas-field-key="sample.faq.pretty.items.3.question">Y a-t-il un suivi après la session ?</summary><div data-gas-field-key="sample.faq.pretty.items.3.answer"><p>Oui. Chaque participant reçoit un livret d'intégration et peut rejoindre notre cercle de pratique mensuel (gratuit, ouvert à tous les anciens).</p></div></details>
                        </div>
</section>
</div>

variante : flat

Questions fréquentes

Faut-il de l'expérience préalable pour participer ?

Aucune. Nos activités sont conçues pour accueillir des débutants comme des praticiens expérimentés. Les animateurs adaptent le rythme au groupe.

Combien de personnes par session ?

Entre 8 et 14 personnes maximum. Au-delà, la qualité d'écoute se dégrade et on perd l'esprit de cercle.

Comment se déroule une session type ?

Accueil, partage initial, exercice central, intégration, partage final. Comptez 3h pour une session courte, un week-end complet pour une immersion.

Y a-t-il un suivi après la session ?

Oui. Chaque participant reçoit un livret d'intégration et peut rejoindre notre cercle de pratique mensuel (gratuit, ouvert à tous les anciens).

Voir le HTML rendu

<div id="pretty_faq_001" class="gas-block-anchor" data-gas-block-id="pretty_faq_001"><section class="gas-block-faq gas-block-faq--flat" data-block-type="faq">
    <h2 class="gas-block-faq__title" data-gas-field-key="sample.faq.pretty.title">Questions fréquentes</h2>    <div class="gas-block-faq__items">
                                                <article class="gas-block-faq__item">
                                        <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.0.question">Faut-il de l&#039;expérience préalable pour participer ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.0.answer"><p>Aucune. Nos activités sont conçues pour accueillir des débutants comme des praticiens expérimentés. Les animateurs adaptent le rythme au groupe.</p></div>
                </article>
                                                            <article class="gas-block-faq__item">
                                        <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.1.question">Combien de personnes par session ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.1.answer"><p>Entre 8 et 14 personnes maximum. Au-delà, la qualité d'écoute se dégrade et on perd l'esprit de cercle.</p></div>
                </article>
                                                            <article class="gas-block-faq__item">
                                        <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.2.question">Comment se déroule une session type ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.2.answer"><p>Accueil, partage initial, exercice central, intégration, partage final. Comptez 3h pour une session courte, un week-end complet pour une immersion.</p></div>
                </article>
                                                            <article class="gas-block-faq__item">
                                        <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.3.question">Y a-t-il un suivi après la session ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.3.answer"><p>Oui. Chaque participant reçoit un livret d'intégration et peut rejoindre notre cercle de pratique mensuel (gratuit, ouvert à tous les anciens).</p></div>
                </article>
                        </div>
</section>
</div>

variante : cards

Questions fréquentes

Faut-il de l'expérience préalable pour participer ?

Aucune. Nos activités sont conçues pour accueillir des débutants comme des praticiens expérimentés. Les animateurs adaptent le rythme au groupe.

Combien de personnes par session ?

Entre 8 et 14 personnes maximum. Au-delà, la qualité d'écoute se dégrade et on perd l'esprit de cercle.

Comment se déroule une session type ?

Accueil, partage initial, exercice central, intégration, partage final. Comptez 3h pour une session courte, un week-end complet pour une immersion.

Y a-t-il un suivi après la session ?

Oui. Chaque participant reçoit un livret d'intégration et peut rejoindre notre cercle de pratique mensuel (gratuit, ouvert à tous les anciens).

Voir le HTML rendu

<div id="pretty_faq_001" class="gas-block-anchor" data-gas-block-id="pretty_faq_001"><section class="gas-block-faq gas-block-faq--cards" data-block-type="faq">
    <h2 class="gas-block-faq__title" data-gas-field-key="sample.faq.pretty.title">Questions fréquentes</h2>    <div class="gas-block-faq__items">
                                                <article class="gas-block-faq__item">
                                        <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.0.question">Faut-il de l&#039;expérience préalable pour participer ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.0.answer"><p>Aucune. Nos activités sont conçues pour accueillir des débutants comme des praticiens expérimentés. Les animateurs adaptent le rythme au groupe.</p></div>
                </article>
                                                            <article class="gas-block-faq__item">
                                        <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.1.question">Combien de personnes par session ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.1.answer"><p>Entre 8 et 14 personnes maximum. Au-delà, la qualité d'écoute se dégrade et on perd l'esprit de cercle.</p></div>
                </article>
                                                            <article class="gas-block-faq__item">
                                        <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.2.question">Comment se déroule une session type ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.2.answer"><p>Accueil, partage initial, exercice central, intégration, partage final. Comptez 3h pour une session courte, un week-end complet pour une immersion.</p></div>
                </article>
                                                            <article class="gas-block-faq__item">
                                        <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.3.question">Y a-t-il un suivi après la session ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.3.answer"><p>Oui. Chaque participant reçoit un livret d'intégration et peut rejoindre notre cercle de pratique mensuel (gratuit, ouvert à tous les anciens).</p></div>
                </article>
                        </div>
</section>
</div>

variante : numbered

Questions fréquentes

Faut-il de l'expérience préalable pour participer ?

Aucune. Nos activités sont conçues pour accueillir des débutants comme des praticiens expérimentés. Les animateurs adaptent le rythme au groupe.

Combien de personnes par session ?

Entre 8 et 14 personnes maximum. Au-delà, la qualité d'écoute se dégrade et on perd l'esprit de cercle.

Comment se déroule une session type ?

Accueil, partage initial, exercice central, intégration, partage final. Comptez 3h pour une session courte, un week-end complet pour une immersion.

Y a-t-il un suivi après la session ?

Oui. Chaque participant reçoit un livret d'intégration et peut rejoindre notre cercle de pratique mensuel (gratuit, ouvert à tous les anciens).

Voir le HTML rendu

<div id="pretty_faq_001" class="gas-block-anchor" data-gas-block-id="pretty_faq_001"><section class="gas-block-faq gas-block-faq--numbered" data-block-type="faq">
    <h2 class="gas-block-faq__title" data-gas-field-key="sample.faq.pretty.title">Questions fréquentes</h2>    <div class="gas-block-faq__items">
                                                <article class="gas-block-faq__item">
                    <span class="gas-block-faq__number">1</span>                    <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.0.question">Faut-il de l&#039;expérience préalable pour participer ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.0.answer"><p>Aucune. Nos activités sont conçues pour accueillir des débutants comme des praticiens expérimentés. Les animateurs adaptent le rythme au groupe.</p></div>
                </article>
                                                            <article class="gas-block-faq__item">
                    <span class="gas-block-faq__number">2</span>                    <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.1.question">Combien de personnes par session ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.1.answer"><p>Entre 8 et 14 personnes maximum. Au-delà, la qualité d'écoute se dégrade et on perd l'esprit de cercle.</p></div>
                </article>
                                                            <article class="gas-block-faq__item">
                    <span class="gas-block-faq__number">3</span>                    <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.2.question">Comment se déroule une session type ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.2.answer"><p>Accueil, partage initial, exercice central, intégration, partage final. Comptez 3h pour une session courte, un week-end complet pour une immersion.</p></div>
                </article>
                                                            <article class="gas-block-faq__item">
                    <span class="gas-block-faq__number">4</span>                    <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.3.question">Y a-t-il un suivi après la session ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.3.answer"><p>Oui. Chaque participant reçoit un livret d'intégration et peut rejoindre notre cercle de pratique mensuel (gratuit, ouvert à tous les anciens).</p></div>
                </article>
                        </div>
</section>
</div>

variante : side_by_side

Questions fréquentes

Faut-il de l'expérience préalable pour participer ?

Aucune. Nos activités sont conçues pour accueillir des débutants comme des praticiens expérimentés. Les animateurs adaptent le rythme au groupe.

Combien de personnes par session ?

Entre 8 et 14 personnes maximum. Au-delà, la qualité d'écoute se dégrade et on perd l'esprit de cercle.

Comment se déroule une session type ?

Accueil, partage initial, exercice central, intégration, partage final. Comptez 3h pour une session courte, un week-end complet pour une immersion.

Y a-t-il un suivi après la session ?

Oui. Chaque participant reçoit un livret d'intégration et peut rejoindre notre cercle de pratique mensuel (gratuit, ouvert à tous les anciens).

Voir le HTML rendu

<div id="pretty_faq_001" class="gas-block-anchor" data-gas-block-id="pretty_faq_001"><section class="gas-block-faq gas-block-faq--side_by_side" data-block-type="faq">
    <h2 class="gas-block-faq__title" data-gas-field-key="sample.faq.pretty.title">Questions fréquentes</h2>    <div class="gas-block-faq__items">
                                                <article class="gas-block-faq__item">
                                        <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.0.question">Faut-il de l&#039;expérience préalable pour participer ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.0.answer"><p>Aucune. Nos activités sont conçues pour accueillir des débutants comme des praticiens expérimentés. Les animateurs adaptent le rythme au groupe.</p></div>
                </article>
                                                            <article class="gas-block-faq__item">
                                        <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.1.question">Combien de personnes par session ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.1.answer"><p>Entre 8 et 14 personnes maximum. Au-delà, la qualité d'écoute se dégrade et on perd l'esprit de cercle.</p></div>
                </article>
                                                            <article class="gas-block-faq__item">
                                        <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.2.question">Comment se déroule une session type ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.2.answer"><p>Accueil, partage initial, exercice central, intégration, partage final. Comptez 3h pour une session courte, un week-end complet pour une immersion.</p></div>
                </article>
                                                            <article class="gas-block-faq__item">
                                        <h3 class="gas-block-faq__question" data-gas-field-key="sample.faq.pretty.items.3.question">Y a-t-il un suivi après la session ?</h3>
                    <div class="gas-block-faq__answer" data-gas-field-key="sample.faq.pretty.items.3.answer"><p>Oui. Chaque participant reçoit un livret d'intégration et peut rejoindre notre cercle de pratique mensuel (gratuit, ouvert à tous les anciens).</p></div>
                </article>
                        </div>
</section>
</div>

FAQ en colonnes `faq_columns`

Questions/réponses ouvertes disposées en deux colonnes (sans accordéon).

variante : plain

Questions fréquentes

Tout ce qu'il faut savoir avant de vous lancer.

Comment créer un compte ?

L'inscription se fait en deux minutes depuis la page d'accueil, sans carte bancaire requise.

L'adhésion est-elle payante ?

Une formule gratuite est disponible. Les formules payantes débloquent l'accès à toutes les activités.

Puis-je annuler à tout moment ?

Oui, votre abonnement peut être résilié depuis votre espace membre, sans frais ni délai.

Mes données sont-elles protégées ?

Vos informations sont hébergées en Suisse et ne sont jamais transmises à des tiers à des fins commerciales.

Comment contacter le support ?

Notre équipe répond par courriel sous 24 heures ouvrées via le formulaire de contact.

Y a-t-il une application mobile ?

Le site est entièrement responsive et s'utilise confortablement sur smartphone et tablette.

Voir le HTML rendu

<div id="sample_faq_columns_001" class="gas-block-anchor" data-gas-block-id="sample_faq_columns_001"><section class="gas-block-faq-columns gas-block-faq-columns--style-plain" data-block-type="faq_columns">
    <div class="gas-block-faq-columns__inner">
                    <h2 class="gas-block-faq-columns__title">Questions fréquentes</h2>
                            <p class="gas-block-faq-columns__subtitle">Tout ce qu&#039;il faut savoir avant de vous lancer.</p>
        
        <div class="gas-block-faq-columns__grid">
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Comment créer un compte ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>L'inscription se fait en deux minutes depuis la page d'accueil, sans carte bancaire requise.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">L&#039;adhésion est-elle payante ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Une formule gratuite est disponible. Les formules payantes débloquent l'accès à toutes les activités.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Puis-je annuler à tout moment ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Oui, votre abonnement peut être résilié depuis votre espace membre, sans frais ni délai.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Mes données sont-elles protégées ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Vos informations sont hébergées en Suisse et ne sont jamais transmises à des tiers à des fins commerciales.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Comment contacter le support ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Notre équipe répond par courriel sous 24 heures ouvrées via le formulaire de contact.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Y a-t-il une application mobile ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Le site est entièrement responsive et s'utilise confortablement sur smartphone et tablette.</p></div>
                                    </article>
                    </div>
    </div>
</section>
</div>

variante : bordered

Questions fréquentes

Tout ce qu'il faut savoir avant de vous lancer.

Comment créer un compte ?

L'inscription se fait en deux minutes depuis la page d'accueil, sans carte bancaire requise.

L'adhésion est-elle payante ?

Une formule gratuite est disponible. Les formules payantes débloquent l'accès à toutes les activités.

Puis-je annuler à tout moment ?

Oui, votre abonnement peut être résilié depuis votre espace membre, sans frais ni délai.

Mes données sont-elles protégées ?

Vos informations sont hébergées en Suisse et ne sont jamais transmises à des tiers à des fins commerciales.

Comment contacter le support ?

Notre équipe répond par courriel sous 24 heures ouvrées via le formulaire de contact.

Y a-t-il une application mobile ?

Le site est entièrement responsive et s'utilise confortablement sur smartphone et tablette.

Voir le HTML rendu

<div id="sample_faq_columns_001" class="gas-block-anchor" data-gas-block-id="sample_faq_columns_001"><section class="gas-block-faq-columns gas-block-faq-columns--style-bordered" data-block-type="faq_columns">
    <div class="gas-block-faq-columns__inner">
                    <h2 class="gas-block-faq-columns__title">Questions fréquentes</h2>
                            <p class="gas-block-faq-columns__subtitle">Tout ce qu&#039;il faut savoir avant de vous lancer.</p>
        
        <div class="gas-block-faq-columns__grid">
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Comment créer un compte ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>L'inscription se fait en deux minutes depuis la page d'accueil, sans carte bancaire requise.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">L&#039;adhésion est-elle payante ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Une formule gratuite est disponible. Les formules payantes débloquent l'accès à toutes les activités.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Puis-je annuler à tout moment ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Oui, votre abonnement peut être résilié depuis votre espace membre, sans frais ni délai.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Mes données sont-elles protégées ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Vos informations sont hébergées en Suisse et ne sont jamais transmises à des tiers à des fins commerciales.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Comment contacter le support ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Notre équipe répond par courriel sous 24 heures ouvrées via le formulaire de contact.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Y a-t-il une application mobile ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Le site est entièrement responsive et s'utilise confortablement sur smartphone et tablette.</p></div>
                                    </article>
                    </div>
    </div>
</section>
</div>

variante : separated

Questions fréquentes

Tout ce qu'il faut savoir avant de vous lancer.

Comment créer un compte ?

L'inscription se fait en deux minutes depuis la page d'accueil, sans carte bancaire requise.

L'adhésion est-elle payante ?

Une formule gratuite est disponible. Les formules payantes débloquent l'accès à toutes les activités.

Puis-je annuler à tout moment ?

Oui, votre abonnement peut être résilié depuis votre espace membre, sans frais ni délai.

Mes données sont-elles protégées ?

Vos informations sont hébergées en Suisse et ne sont jamais transmises à des tiers à des fins commerciales.

Comment contacter le support ?

Notre équipe répond par courriel sous 24 heures ouvrées via le formulaire de contact.

Y a-t-il une application mobile ?

Le site est entièrement responsive et s'utilise confortablement sur smartphone et tablette.

Voir le HTML rendu

<div id="sample_faq_columns_001" class="gas-block-anchor" data-gas-block-id="sample_faq_columns_001"><section class="gas-block-faq-columns gas-block-faq-columns--style-separated" data-block-type="faq_columns">
    <div class="gas-block-faq-columns__inner">
                    <h2 class="gas-block-faq-columns__title">Questions fréquentes</h2>
                            <p class="gas-block-faq-columns__subtitle">Tout ce qu&#039;il faut savoir avant de vous lancer.</p>
        
        <div class="gas-block-faq-columns__grid">
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Comment créer un compte ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>L'inscription se fait en deux minutes depuis la page d'accueil, sans carte bancaire requise.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">L&#039;adhésion est-elle payante ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Une formule gratuite est disponible. Les formules payantes débloquent l'accès à toutes les activités.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Puis-je annuler à tout moment ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Oui, votre abonnement peut être résilié depuis votre espace membre, sans frais ni délai.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Mes données sont-elles protégées ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Vos informations sont hébergées en Suisse et ne sont jamais transmises à des tiers à des fins commerciales.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Comment contacter le support ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Notre équipe répond par courriel sous 24 heures ouvrées via le formulaire de contact.</p></div>
                                    </article>
                                            <article class="gas-block-faq-columns__item">
                                            <h3 class="gas-block-faq-columns__question">Y a-t-il une application mobile ?</h3>
                                                                <div class="gas-block-faq-columns__answer"><p>Le site est entièrement responsive et s'utilise confortablement sur smartphone et tablette.</p></div>
                                    </article>
                    </div>
    </div>
</section>
</div>

Vedette + sidebar `feature_lead`

Contenu vedette (grande image, titre, texte, bouton) accompagné d'une colonne latérale de 2 à 6 cards secondaires. Idéal pour mettre en avant un contenu phare avec du contexte autour.

variante : default

À LA UNE

L'art de tenir le silence en cercle

Un long format de Marie Dupuis sur ce que change vraiment la qualité d'écoute en groupe — et pourquoi nos animateurs y travaillent quinze ans.

Lire l'article

Voir le HTML rendu

<div id="pretty_feature_lead_001" class="gas-block-anchor" data-gas-block-id="pretty_feature_lead_001"><section class="gas-block-feature-lead gas-block-feature-lead--default gas-block-feature-lead--featured-left" data-block-type="feature_lead">
    <div class="gas-block-feature-lead__inner">
        <article class="gas-block-feature-lead__featured">
                            <figure class="gas-block-feature-lead__featured-media">
                    <img class="gas-block-feature-lead__featured-image" src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?w=1200&#038;auto=format&#038;fit=crop&#038;q=70" alt="Vue de paysage de montagne" loading="lazy" decoding="async" />                </figure>
                        <div class="gas-block-feature-lead__featured-body">
                                    <p class="gas-block-feature-lead__kicker">À LA UNE</p>
                                                    <h2 class="gas-block-feature-lead__featured-title">L&#039;art de tenir le silence en cercle</h2>
                                                    <p class="gas-block-feature-lead__featured-description">Un long format de Marie Dupuis sur ce que change vraiment la qualité d&#039;écoute en groupe — et pourquoi nos animateurs y travaillent quinze ans.</p>
                                                    <a class="gas-button gas-button--primary gas-block-feature-lead__featured-cta" href="/exemple/">
                        Lire l&#039;article                    </a>
                            </div>
        </article>
                    <aside class="gas-block-feature-lead__sidebar">
                                    <h3 class="gas-block-feature-lead__sidebar-title">À découvrir aussi</h3>
                                <ul class="gas-block-feature-lead__sidebar-list">
                                                                    <li class="gas-block-feature-lead__sidebar-item">
                            <a class="gas-block-feature-lead__sidebar-link" href="/article-1/">
                                                                    <figure class="gas-block-feature-lead__sidebar-media">
                                        <img class="gas-block-feature-lead__sidebar-thumb" src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                    </figure>
                                                                <div class="gas-block-feature-lead__sidebar-body">
                                                                            <span class="gas-block-feature-lead__sidebar-kicker">ARTICLE</span>
                                                                        <span class="gas-block-feature-lead__sidebar-name">Pourquoi nos sessions durent un week-end entier</span>
                                </div>
                            </a>
                        </li>
                                                                    <li class="gas-block-feature-lead__sidebar-item">
                            <a class="gas-block-feature-lead__sidebar-link" href="/guide-1/">
                                                                    <figure class="gas-block-feature-lead__sidebar-media">
                                        <img class="gas-block-feature-lead__sidebar-thumb" src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                    </figure>
                                                                <div class="gas-block-feature-lead__sidebar-body">
                                                                            <span class="gas-block-feature-lead__sidebar-kicker">GUIDE</span>
                                                                        <span class="gas-block-feature-lead__sidebar-name">Préparer son arrivée : 5 questions à se poser</span>
                                </div>
                            </a>
                        </li>
                                                                    <li class="gas-block-feature-lead__sidebar-item">
                            <a class="gas-block-feature-lead__sidebar-link" href="/video-1/">
                                                                    <figure class="gas-block-feature-lead__sidebar-media">
                                        <img class="gas-block-feature-lead__sidebar-thumb" src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                    </figure>
                                                                <div class="gas-block-feature-lead__sidebar-body">
                                                                            <span class="gas-block-feature-lead__sidebar-kicker">VIDÉO</span>
                                                                        <span class="gas-block-feature-lead__sidebar-name">Interview de Bruno Schmid sur la communication consciente</span>
                                </div>
                            </a>
                        </li>
                                                                    <li class="gas-block-feature-lead__sidebar-item">
                            <a class="gas-block-feature-lead__sidebar-link" href="/podcast-1/">
                                                                    <figure class="gas-block-feature-lead__sidebar-media">
                                        <img class="gas-block-feature-lead__sidebar-thumb" src="https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                    </figure>
                                                                <div class="gas-block-feature-lead__sidebar-body">
                                                                            <span class="gas-block-feature-lead__sidebar-kicker">PODCAST</span>
                                                                        <span class="gas-block-feature-lead__sidebar-name">Épisode 12 — Vulnérabilité et leadership</span>
                                </div>
                            </a>
                        </li>
                                    </ul>
            </aside>
            </div>
</section>
</div>

variante : magazine

À LA UNE

L'art de tenir le silence en cercle

Un long format de Marie Dupuis sur ce que change vraiment la qualité d'écoute en groupe — et pourquoi nos animateurs y travaillent quinze ans.

Lire l'article

Voir le HTML rendu

<div id="pretty_feature_lead_001" class="gas-block-anchor" data-gas-block-id="pretty_feature_lead_001"><section class="gas-block-feature-lead gas-block-feature-lead--magazine gas-block-feature-lead--featured-left" data-block-type="feature_lead">
    <div class="gas-block-feature-lead__inner">
        <article class="gas-block-feature-lead__featured">
                            <figure class="gas-block-feature-lead__featured-media">
                    <img class="gas-block-feature-lead__featured-image" src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?w=1200&#038;auto=format&#038;fit=crop&#038;q=70" alt="Vue de paysage de montagne" loading="lazy" decoding="async" />                </figure>
                        <div class="gas-block-feature-lead__featured-body">
                                    <p class="gas-block-feature-lead__kicker">À LA UNE</p>
                                                    <h2 class="gas-block-feature-lead__featured-title">L&#039;art de tenir le silence en cercle</h2>
                                                    <p class="gas-block-feature-lead__featured-description">Un long format de Marie Dupuis sur ce que change vraiment la qualité d&#039;écoute en groupe — et pourquoi nos animateurs y travaillent quinze ans.</p>
                                                    <a class="gas-button gas-button--primary gas-block-feature-lead__featured-cta" href="/exemple/">
                        Lire l&#039;article                    </a>
                            </div>
        </article>
                    <aside class="gas-block-feature-lead__sidebar">
                                    <h3 class="gas-block-feature-lead__sidebar-title">À découvrir aussi</h3>
                                <ul class="gas-block-feature-lead__sidebar-list">
                                                                    <li class="gas-block-feature-lead__sidebar-item">
                            <a class="gas-block-feature-lead__sidebar-link" href="/article-1/">
                                                                    <figure class="gas-block-feature-lead__sidebar-media">
                                        <img class="gas-block-feature-lead__sidebar-thumb" src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                    </figure>
                                                                <div class="gas-block-feature-lead__sidebar-body">
                                                                            <span class="gas-block-feature-lead__sidebar-kicker">ARTICLE</span>
                                                                        <span class="gas-block-feature-lead__sidebar-name">Pourquoi nos sessions durent un week-end entier</span>
                                </div>
                            </a>
                        </li>
                                                                    <li class="gas-block-feature-lead__sidebar-item">
                            <a class="gas-block-feature-lead__sidebar-link" href="/guide-1/">
                                                                    <figure class="gas-block-feature-lead__sidebar-media">
                                        <img class="gas-block-feature-lead__sidebar-thumb" src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                    </figure>
                                                                <div class="gas-block-feature-lead__sidebar-body">
                                                                            <span class="gas-block-feature-lead__sidebar-kicker">GUIDE</span>
                                                                        <span class="gas-block-feature-lead__sidebar-name">Préparer son arrivée : 5 questions à se poser</span>
                                </div>
                            </a>
                        </li>
                                                                    <li class="gas-block-feature-lead__sidebar-item">
                            <a class="gas-block-feature-lead__sidebar-link" href="/video-1/">
                                                                    <figure class="gas-block-feature-lead__sidebar-media">
                                        <img class="gas-block-feature-lead__sidebar-thumb" src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                    </figure>
                                                                <div class="gas-block-feature-lead__sidebar-body">
                                                                            <span class="gas-block-feature-lead__sidebar-kicker">VIDÉO</span>
                                                                        <span class="gas-block-feature-lead__sidebar-name">Interview de Bruno Schmid sur la communication consciente</span>
                                </div>
                            </a>
                        </li>
                                                                    <li class="gas-block-feature-lead__sidebar-item">
                            <a class="gas-block-feature-lead__sidebar-link" href="/podcast-1/">
                                                                    <figure class="gas-block-feature-lead__sidebar-media">
                                        <img class="gas-block-feature-lead__sidebar-thumb" src="https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                    </figure>
                                                                <div class="gas-block-feature-lead__sidebar-body">
                                                                            <span class="gas-block-feature-lead__sidebar-kicker">PODCAST</span>
                                                                        <span class="gas-block-feature-lead__sidebar-name">Épisode 12 — Vulnérabilité et leadership</span>
                                </div>
                            </a>
                        </li>
                                    </ul>
            </aside>
            </div>
</section>
</div>

variante : stacked

À LA UNE

L'art de tenir le silence en cercle

Un long format de Marie Dupuis sur ce que change vraiment la qualité d'écoute en groupe — et pourquoi nos animateurs y travaillent quinze ans.

Lire l'article

Voir le HTML rendu

<div id="pretty_feature_lead_001" class="gas-block-anchor" data-gas-block-id="pretty_feature_lead_001"><section class="gas-block-feature-lead gas-block-feature-lead--stacked gas-block-feature-lead--featured-left" data-block-type="feature_lead">
    <div class="gas-block-feature-lead__inner">
        <article class="gas-block-feature-lead__featured">
                            <figure class="gas-block-feature-lead__featured-media">
                    <img class="gas-block-feature-lead__featured-image" src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?w=1200&#038;auto=format&#038;fit=crop&#038;q=70" alt="Vue de paysage de montagne" loading="lazy" decoding="async" />                </figure>
                        <div class="gas-block-feature-lead__featured-body">
                                    <p class="gas-block-feature-lead__kicker">À LA UNE</p>
                                                    <h2 class="gas-block-feature-lead__featured-title">L&#039;art de tenir le silence en cercle</h2>
                                                    <p class="gas-block-feature-lead__featured-description">Un long format de Marie Dupuis sur ce que change vraiment la qualité d&#039;écoute en groupe — et pourquoi nos animateurs y travaillent quinze ans.</p>
                                                    <a class="gas-button gas-button--primary gas-block-feature-lead__featured-cta" href="/exemple/">
                        Lire l&#039;article                    </a>
                            </div>
        </article>
                    <aside class="gas-block-feature-lead__sidebar">
                                    <h3 class="gas-block-feature-lead__sidebar-title">À découvrir aussi</h3>
                                <ul class="gas-block-feature-lead__sidebar-list">
                                                                    <li class="gas-block-feature-lead__sidebar-item">
                            <a class="gas-block-feature-lead__sidebar-link" href="/article-1/">
                                                                    <figure class="gas-block-feature-lead__sidebar-media">
                                        <img class="gas-block-feature-lead__sidebar-thumb" src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                    </figure>
                                                                <div class="gas-block-feature-lead__sidebar-body">
                                                                            <span class="gas-block-feature-lead__sidebar-kicker">ARTICLE</span>
                                                                        <span class="gas-block-feature-lead__sidebar-name">Pourquoi nos sessions durent un week-end entier</span>
                                </div>
                            </a>
                        </li>
                                                                    <li class="gas-block-feature-lead__sidebar-item">
                            <a class="gas-block-feature-lead__sidebar-link" href="/guide-1/">
                                                                    <figure class="gas-block-feature-lead__sidebar-media">
                                        <img class="gas-block-feature-lead__sidebar-thumb" src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                    </figure>
                                                                <div class="gas-block-feature-lead__sidebar-body">
                                                                            <span class="gas-block-feature-lead__sidebar-kicker">GUIDE</span>
                                                                        <span class="gas-block-feature-lead__sidebar-name">Préparer son arrivée : 5 questions à se poser</span>
                                </div>
                            </a>
                        </li>
                                                                    <li class="gas-block-feature-lead__sidebar-item">
                            <a class="gas-block-feature-lead__sidebar-link" href="/video-1/">
                                                                    <figure class="gas-block-feature-lead__sidebar-media">
                                        <img class="gas-block-feature-lead__sidebar-thumb" src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                    </figure>
                                                                <div class="gas-block-feature-lead__sidebar-body">
                                                                            <span class="gas-block-feature-lead__sidebar-kicker">VIDÉO</span>
                                                                        <span class="gas-block-feature-lead__sidebar-name">Interview de Bruno Schmid sur la communication consciente</span>
                                </div>
                            </a>
                        </li>
                                                                    <li class="gas-block-feature-lead__sidebar-item">
                            <a class="gas-block-feature-lead__sidebar-link" href="/podcast-1/">
                                                                    <figure class="gas-block-feature-lead__sidebar-media">
                                        <img class="gas-block-feature-lead__sidebar-thumb" src="https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                                    </figure>
                                                                <div class="gas-block-feature-lead__sidebar-body">
                                                                            <span class="gas-block-feature-lead__sidebar-kicker">PODCAST</span>
                                                                        <span class="gas-block-feature-lead__sidebar-name">Épisode 12 — Vulnérabilité et leadership</span>
                                </div>
                            </a>
                        </li>
                                    </ul>
            </aside>
            </div>
</section>
</div>

Rencontre mise en avant `featured_encounter`

Bloc éditorial en trois zones pour mettre en avant une vidéo, une interview ou un contenu phare avec texte d’introduction, média central, fiche détail et phrase de clôture.

variante : default

LATEST ENCOUNTER

A new voice to sit with.

Each encounter opens a question. Take a few minutes and let it resonate.

View all encounters

Portrait vidéo d'un intervenant assis en intérieur

INTERVIEW

On finding stillness in conflict

Rami Elhanan

A bereaved father from Jerusalem on forgiveness, grief, and what remains when everything else falls away.

Watch the encounter

Interview · 4 min

Keywords: mindfulness present

New encounters are shared when they are ready. No noise, no pressure… only what feels worth offering.

Voir le HTML rendu

<div id="pretty_featured_encounter_001" class="gas-block-anchor" data-gas-block-id="pretty_featured_encounter_001"><section class="gas-block-featured-encounter gas-block-featured-encounter--default" data-block-type="featured_encounter">
    <div class="gas-block-featured-encounter__inner">
        <div class="gas-block-featured-encounter__intro">
                            <p class="gas-block-featured-encounter__eyebrow">LATEST ENCOUNTER</p>
                                        <h2 class="gas-block-featured-encounter__headline">
                                            <span class="gas-block-featured-encounter__headline-primary">A new voice</span>
                                                                <span class="gas-block-featured-encounter__headline-secondary">to sit with.</span>
                                    </h2>
                                        <p class="gas-block-featured-encounter__intro-text">Each encounter opens a question. Take a few minutes and let it resonate.</p>
                                        <a class="gas-block-featured-encounter__archive-link" href="/encounters/">
                    <span>View all encounters</span>
                    <span aria-hidden="true">→</span>
                </a>
                    </div>

        <figure class="gas-block-featured-encounter__media">
            <a class="gas-block-featured-encounter__media-frame" href="/encounters/on-finding-stillness/" aria-label="Regarder la rencontre">
                                    <img class="gas-block-featured-encounter__image" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=1400&#038;auto=format&#038;fit=crop&#038;q=80" alt="Portrait vidéo d&#039;un intervenant assis en intérieur" loading="lazy" decoding="async" />                                <span class="gas-block-featured-encounter__play" aria-hidden="true"></span>
            </a>
        </figure>

        <aside class="gas-block-featured-encounter__detail">
                            <p class="gas-block-featured-encounter__type">INTERVIEW</p>
                                        <h3 class="gas-block-featured-encounter__title">On finding stillness in conflict</h3>
                                        <p class="gas-block-featured-encounter__person">Rami Elhanan</p>
                                        <p class="gas-block-featured-encounter__description">A bereaved father from Jerusalem on forgiveness, grief, and what remains when everything else falls away.</p>
                                        <a class="gas-block-featured-encounter__watch-link" href="/encounters/on-finding-stillness/">
                    <span>Watch the encounter</span>
                    <span aria-hidden="true">→</span>
                </a>
                                        <div class="gas-block-featured-encounter__meta">
                                            <p>Interview · 4 min</p>
                                                                <p>
                                                            <span class="gas-block-featured-encounter__keywords-label">Keywords:</span>
                                                        <span class="gas-block-featured-encounter__keywords">mindfulness present</span>
                        </p>
                                    </div>
                    </aside>
    </div>
            <p class="gas-block-featured-encounter__closing">New encounters are shared when they are ready. No noise, no pressure… only what feels worth offering.</p>
    </section>
</div>

variante : compact

LATEST ENCOUNTER

A new voice to sit with.

Each encounter opens a question. Take a few minutes and let it resonate.

View all encounters

INTERVIEW

On finding stillness in conflict

Rami Elhanan

A bereaved father from Jerusalem on forgiveness, grief, and what remains when everything else falls away.

Watch the encounter

Interview · 4 min

Keywords: mindfulness present

New encounters are shared when they are ready. No noise, no pressure… only what feels worth offering.

Voir le HTML rendu

<div id="pretty_featured_encounter_001" class="gas-block-anchor" data-gas-block-id="pretty_featured_encounter_001"><section class="gas-block-featured-encounter gas-block-featured-encounter--compact" data-block-type="featured_encounter">
    <div class="gas-block-featured-encounter__inner">
        <div class="gas-block-featured-encounter__intro">
                            <p class="gas-block-featured-encounter__eyebrow">LATEST ENCOUNTER</p>
                                        <h2 class="gas-block-featured-encounter__headline">
                                            <span class="gas-block-featured-encounter__headline-primary">A new voice</span>
                                                                <span class="gas-block-featured-encounter__headline-secondary">to sit with.</span>
                                    </h2>
                                        <p class="gas-block-featured-encounter__intro-text">Each encounter opens a question. Take a few minutes and let it resonate.</p>
                                        <a class="gas-block-featured-encounter__archive-link" href="/encounters/">
                    <span>View all encounters</span>
                    <span aria-hidden="true">→</span>
                </a>
                    </div>

        <figure class="gas-block-featured-encounter__media">
            <a class="gas-block-featured-encounter__media-frame" href="/encounters/on-finding-stillness/" aria-label="Regarder la rencontre">
                                    <img class="gas-block-featured-encounter__image" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=1400&#038;auto=format&#038;fit=crop&#038;q=80" alt="Portrait vidéo d&#039;un intervenant assis en intérieur" loading="lazy" decoding="async" />                                <span class="gas-block-featured-encounter__play" aria-hidden="true"></span>
            </a>
        </figure>

        <aside class="gas-block-featured-encounter__detail">
                            <p class="gas-block-featured-encounter__type">INTERVIEW</p>
                                        <h3 class="gas-block-featured-encounter__title">On finding stillness in conflict</h3>
                                        <p class="gas-block-featured-encounter__person">Rami Elhanan</p>
                                        <p class="gas-block-featured-encounter__description">A bereaved father from Jerusalem on forgiveness, grief, and what remains when everything else falls away.</p>
                                        <a class="gas-block-featured-encounter__watch-link" href="/encounters/on-finding-stillness/">
                    <span>Watch the encounter</span>
                    <span aria-hidden="true">→</span>
                </a>
                                        <div class="gas-block-featured-encounter__meta">
                                            <p>Interview · 4 min</p>
                                                                <p>
                                                            <span class="gas-block-featured-encounter__keywords-label">Keywords:</span>
                                                        <span class="gas-block-featured-encounter__keywords">mindfulness present</span>
                        </p>
                                    </div>
                    </aside>
    </div>
            <p class="gas-block-featured-encounter__closing">New encounters are shared when they are ready. No noise, no pressure… only what feels worth offering.</p>
    </section>
</div>

Téléchargement `file_download`

Téléchargement d'un ou plusieurs fichiers (carte mono-fichier ou liste). Accès public ou réservé aux membres.

Programme de la saison Toutes les dates au format PDF. PDF · 2,4 Mo Télécharger
Plan d'accès Comment nous rejoindre. PDF · 540 Ko Télécharger

Voir le HTML rendu

<div id="sample_file_download_001" class="gas-block-anchor" data-gas-block-id="sample_file_download_001"><section class="gas-block-file-download gas-block-file-download--list gas-block-file-download--access-public" data-block-type="file_download" data-access="public">
    <div class="gas-block-file-download__inner">
                    <ul class="gas-block-file-download__list">
                                                        <li class="gas-block-file-download__file">
                        <span class="gas-block-file-download__ext" aria-hidden="true">PDF</span>
                        <span class="gas-block-file-download__file-body">
                            <span class="gas-block-file-download__file-label">Programme de la saison</span>
                            <span class="gas-block-file-download__file-desc">Toutes les dates au format PDF.</span>                                                            <span class="gas-block-file-download__file-meta">PDF · 2,4 Mo</span>
                                                    </span>
                        <a class="gas-button gas-button--primary gas-block-file-download__btn" href="#" download>Télécharger</a>
                    </li>
                                                        <li class="gas-block-file-download__file">
                        <span class="gas-block-file-download__ext" aria-hidden="true">PDF</span>
                        <span class="gas-block-file-download__file-body">
                            <span class="gas-block-file-download__file-label">Plan d&#039;accès</span>
                            <span class="gas-block-file-download__file-desc">Comment nous rejoindre.</span>                                                            <span class="gas-block-file-download__file-meta">PDF · 540 Ko</span>
                                                    </span>
                        <a class="gas-button gas-button--primary gas-block-file-download__btn" href="#" download>Télécharger</a>
                    </li>
                            </ul>
            </div>
</section>
</div>

Galerie `gallery`

Galerie média éditoriale : images, vidéos, filtrage, lightbox, hotspots et photo-essay.

variante : grid

Moments de nos ateliers

Séquence vidéo de nature — Séquence vidéo courte

Voir le HTML rendu

<div id="pretty_gallery_001" class="gas-block-anchor" data-gas-block-id="pretty_gallery_001"><section class="gas-block-gallery gas-block-gallery--layout-grid gas-block-gallery--tile-motion-scroll gas-block-gallery--cols-3" data-block-type="gallery" data-gas-block-enhancer="gallery" data-gas-block-config="{&quot;lightbox&quot;:true,&quot;engine&quot;:&quot;native&quot;,&quot;filterable&quot;:true}">
    <h2 class="gas-block-gallery__title">Moments de nos ateliers</h2>            <div class="gas-block-gallery__filters" data-gallery-filters>
            <label class="screen-reader-text" for="gas-block-gallery-pretty_gallery_001-search">Rechercher dans la galerie</label>
            <input id="gas-block-gallery-pretty_gallery_001-search" class="gas-block-gallery__search" type="search" data-gallery-search placeholder="Rechercher une photo ou une vidéo" />
            <div class="gas-block-gallery__filter-chips" role="list" aria-label="Filtres de galerie">
                <button type="button" class="gas-block-gallery__filter-chip is-active" data-gallery-filter="all" role="listitem">Tout</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ateliers" role="listitem">Ateliers</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="exterieur" role="listitem">extérieur</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="groupe" role="listitem">groupe</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ecriture" role="listitem">écriture</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="sorties" role="listitem">Sorties</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="marche" role="listitem">marche</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="videos" role="listitem">Vidéos</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="musique" role="listitem">musique</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="nature" role="listitem">nature</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="rencontres" role="listitem">Rencontres</button>
                            </div>
        </div>
            <div class="gas-block-gallery__grid" data-gallery-id="gas-block-gallery-pretty_gallery_001">
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#d8c4a5;" data-gallery-item data-gallery-lqip data-index="0" data-gallery-filter-values="ateliers exterieur groupe" data-gallery-search-text="cercle de partage en extérieur cercle de partage en extérieur ateliers extérieur groupe">
                <a href="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Cercle de partage en extérieur" data-credit="Photo Unsplash">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Cercle de partage en extérieur" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Cercle de partage en extérieur</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#c8b49c;" data-gallery-item data-gallery-lqip data-index="1" data-gallery-filter-values="ateliers ecriture" data-gallery-search-text="atelier d&#039;écriture atelier d&#039;écriture ateliers écriture">
                <a href="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Atelier d&#039;écriture" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Atelier d&#039;écriture" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Atelier d&#039;écriture</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b9c7b3;" data-gallery-item data-gallery-lqip data-index="2" data-gallery-filter-values="sorties exterieur marche" data-gallery-search-text="marche méditative marche méditative sorties extérieur marche">
                <a href="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Marche méditative" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Marche méditative" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Marche méditative</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#9fb0c4;" data-gallery-item data-gallery-lqip data-index="3" data-gallery-filter-values="ateliers groupe" data-gallery-search-text="discussion en petit groupe discussion en petit groupe ateliers groupe">
                <a href="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Discussion en petit groupe" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Discussion en petit groupe" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Discussion en petit groupe</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#3f4659;" data-gallery-item data-gallery-lqip data-index="4" data-gallery-filter-values="videos musique" data-gallery-search-text="session de musique en vidéo session de musique vidéos musique">
                <a href="https://www.youtube.com/watch?v=ysz5S6PUM-U" class="gas-block-gallery__link" data-gallery-link data-kind="video_embed" data-caption="Session de musique en vidéo" data-credit="Vidéo de démonstration" data-video-provider="youtube" data-video-id="ysz5S6PUM-U">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Session de musique" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <figcaption class="gas-block-gallery__caption">Session de musique en vidéo</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#91a96f;" data-gallery-item data-gallery-lqip data-index="5" data-gallery-filter-values="videos nature" data-gallery-search-text="séquence vidéo courte séquence vidéo de nature vidéos nature">
                <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" class="gas-block-gallery__link" data-gallery-link data-kind="video_file" data-caption="Séquence vidéo courte" data-credit="" data-video-url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Séquence vidéo de nature" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <figcaption class="gas-block-gallery__caption">Séquence vidéo courte</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b89072;" data-gallery-item data-gallery-lqip data-index="6" data-gallery-filter-values="rencontres groupe" data-gallery-search-text="repas partagé repas partagé rencontres groupe">
                <a href="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Repas partagé" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Repas partagé" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Repas partagé</figcaption>
                            </figure>
                    </div>
    </section>
</div>

variante : feature

Moments de nos ateliers

Voir le HTML rendu

<div id="pretty_gallery_001" class="gas-block-anchor" data-gas-block-id="pretty_gallery_001"><section class="gas-block-gallery gas-block-gallery--layout-feature gas-block-gallery--tile-motion-scroll" data-block-type="gallery" data-gas-block-enhancer="gallery" data-gas-block-config="{&quot;lightbox&quot;:true,&quot;engine&quot;:&quot;native&quot;,&quot;filterable&quot;:true}">
    <h2 class="gas-block-gallery__title">Moments de nos ateliers</h2>            <div class="gas-block-gallery__filters" data-gallery-filters>
            <label class="screen-reader-text" for="gas-block-gallery-pretty_gallery_001-search">Rechercher dans la galerie</label>
            <input id="gas-block-gallery-pretty_gallery_001-search" class="gas-block-gallery__search" type="search" data-gallery-search placeholder="Rechercher une photo ou une vidéo" />
            <div class="gas-block-gallery__filter-chips" role="list" aria-label="Filtres de galerie">
                <button type="button" class="gas-block-gallery__filter-chip is-active" data-gallery-filter="all" role="listitem">Tout</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ateliers" role="listitem">Ateliers</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="exterieur" role="listitem">extérieur</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="groupe" role="listitem">groupe</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ecriture" role="listitem">écriture</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="sorties" role="listitem">Sorties</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="marche" role="listitem">marche</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="videos" role="listitem">Vidéos</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="musique" role="listitem">musique</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="nature" role="listitem">nature</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="rencontres" role="listitem">Rencontres</button>
                            </div>
        </div>
            <div class="gas-block-gallery__grid" data-gallery-id="gas-block-gallery-pretty_gallery_001">
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#d8c4a5;" data-gallery-item data-gallery-lqip data-index="0" data-gallery-filter-values="ateliers exterieur groupe" data-gallery-search-text="cercle de partage en extérieur cercle de partage en extérieur ateliers extérieur groupe">
                <a href="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Cercle de partage en extérieur" data-credit="Photo Unsplash">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Cercle de partage en extérieur" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#c8b49c;" data-gallery-item data-gallery-lqip data-index="1" data-gallery-filter-values="ateliers ecriture" data-gallery-search-text="atelier d&#039;écriture atelier d&#039;écriture ateliers écriture">
                <a href="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Atelier d&#039;écriture" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Atelier d&#039;écriture" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b9c7b3;" data-gallery-item data-gallery-lqip data-index="2" data-gallery-filter-values="sorties exterieur marche" data-gallery-search-text="marche méditative marche méditative sorties extérieur marche">
                <a href="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Marche méditative" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Marche méditative" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#9fb0c4;" data-gallery-item data-gallery-lqip data-index="3" data-gallery-filter-values="ateliers groupe" data-gallery-search-text="discussion en petit groupe discussion en petit groupe ateliers groupe">
                <a href="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Discussion en petit groupe" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Discussion en petit groupe" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--more gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#3f4659;" data-gallery-item data-gallery-lqip data-index="4" data-gallery-filter-values="videos musique" data-gallery-search-text="session de musique en vidéo session de musique vidéos musique">
                <a href="https://www.youtube.com/watch?v=ysz5S6PUM-U" class="gas-block-gallery__link" data-gallery-link data-kind="video_embed" data-caption="Session de musique en vidéo" data-credit="Vidéo de démonstration" data-video-provider="youtube" data-video-id="ysz5S6PUM-U">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Session de musique" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                                <span class="gas-block-gallery__more" aria-hidden="true">
                            <svg class="gas-block-gallery__more-icon" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
                            <span class="gas-block-gallery__more-label">Voir les 7 photos</span>
                        </span>
                                    </a>
                                            </figure>
                                            <figure class="gas-block-gallery__item is-hidden gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#91a96f;" data-gallery-item data-gallery-lqip data-index="5" data-gallery-filter-values="videos nature" data-gallery-search-text="séquence vidéo courte séquence vidéo de nature vidéos nature">
                <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" class="gas-block-gallery__link" data-gallery-link data-kind="video_file" data-caption="Séquence vidéo courte" data-credit="" data-video-url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Séquence vidéo de nature" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                            </figure>
                                            <figure class="gas-block-gallery__item is-hidden" style="--gas-gallery-placeholder-color:#b89072;" data-gallery-item data-gallery-lqip data-index="6" data-gallery-filter-values="rencontres groupe" data-gallery-search-text="repas partagé repas partagé rencontres groupe">
                <a href="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Repas partagé" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Repas partagé" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                            </figure>
                    </div>
    </section>
</div>

variante : masonry

Moments de nos ateliers

Voir le HTML rendu

<div id="pretty_gallery_001" class="gas-block-anchor" data-gas-block-id="pretty_gallery_001"><section class="gas-block-gallery gas-block-gallery--layout-masonry gas-block-gallery--tile-motion-scroll gas-block-gallery--cols-3" data-block-type="gallery" data-gas-block-enhancer="gallery" data-gas-block-config="{&quot;lightbox&quot;:true,&quot;engine&quot;:&quot;native&quot;,&quot;filterable&quot;:true}">
    <h2 class="gas-block-gallery__title">Moments de nos ateliers</h2>            <div class="gas-block-gallery__filters" data-gallery-filters>
            <label class="screen-reader-text" for="gas-block-gallery-pretty_gallery_001-search">Rechercher dans la galerie</label>
            <input id="gas-block-gallery-pretty_gallery_001-search" class="gas-block-gallery__search" type="search" data-gallery-search placeholder="Rechercher une photo ou une vidéo" />
            <div class="gas-block-gallery__filter-chips" role="list" aria-label="Filtres de galerie">
                <button type="button" class="gas-block-gallery__filter-chip is-active" data-gallery-filter="all" role="listitem">Tout</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ateliers" role="listitem">Ateliers</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="exterieur" role="listitem">extérieur</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="groupe" role="listitem">groupe</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ecriture" role="listitem">écriture</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="sorties" role="listitem">Sorties</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="marche" role="listitem">marche</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="videos" role="listitem">Vidéos</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="musique" role="listitem">musique</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="nature" role="listitem">nature</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="rencontres" role="listitem">Rencontres</button>
                            </div>
        </div>
            <div class="gas-block-gallery__grid" data-gallery-id="gas-block-gallery-pretty_gallery_001">
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#d8c4a5;" data-gallery-item data-gallery-lqip data-index="0" data-gallery-filter-values="ateliers exterieur groupe" data-gallery-search-text="cercle de partage en extérieur cercle de partage en extérieur ateliers extérieur groupe">
                <a href="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Cercle de partage en extérieur" data-credit="Photo Unsplash">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Cercle de partage en extérieur" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Cercle de partage en extérieur</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#c8b49c;" data-gallery-item data-gallery-lqip data-index="1" data-gallery-filter-values="ateliers ecriture" data-gallery-search-text="atelier d&#039;écriture atelier d&#039;écriture ateliers écriture">
                <a href="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Atelier d&#039;écriture" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Atelier d&#039;écriture" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Atelier d&#039;écriture</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b9c7b3;" data-gallery-item data-gallery-lqip data-index="2" data-gallery-filter-values="sorties exterieur marche" data-gallery-search-text="marche méditative marche méditative sorties extérieur marche">
                <a href="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Marche méditative" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Marche méditative" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Marche méditative</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#9fb0c4;" data-gallery-item data-gallery-lqip data-index="3" data-gallery-filter-values="ateliers groupe" data-gallery-search-text="discussion en petit groupe discussion en petit groupe ateliers groupe">
                <a href="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Discussion en petit groupe" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Discussion en petit groupe" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Discussion en petit groupe</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#3f4659;" data-gallery-item data-gallery-lqip data-index="4" data-gallery-filter-values="videos musique" data-gallery-search-text="session de musique en vidéo session de musique vidéos musique">
                <a href="https://www.youtube.com/watch?v=ysz5S6PUM-U" class="gas-block-gallery__link" data-gallery-link data-kind="video_embed" data-caption="Session de musique en vidéo" data-credit="Vidéo de démonstration" data-video-provider="youtube" data-video-id="ysz5S6PUM-U">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Session de musique" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <figcaption class="gas-block-gallery__caption">Session de musique en vidéo</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#91a96f;" data-gallery-item data-gallery-lqip data-index="5" data-gallery-filter-values="videos nature" data-gallery-search-text="séquence vidéo courte séquence vidéo de nature vidéos nature">
                <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" class="gas-block-gallery__link" data-gallery-link data-kind="video_file" data-caption="Séquence vidéo courte" data-credit="" data-video-url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Séquence vidéo de nature" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <figcaption class="gas-block-gallery__caption">Séquence vidéo courte</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b89072;" data-gallery-item data-gallery-lqip data-index="6" data-gallery-filter-values="rencontres groupe" data-gallery-search-text="repas partagé repas partagé rencontres groupe">
                <a href="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Repas partagé" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Repas partagé" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Repas partagé</figcaption>
                            </figure>
                    </div>
    </section>
</div>

variante : carousel

Moments de nos ateliers

Voir le HTML rendu

<div id="pretty_gallery_001" class="gas-block-anchor" data-gas-block-id="pretty_gallery_001"><section class="gas-block-gallery gas-block-gallery--layout-carousel gas-block-gallery--engine-native gas-block-gallery--tile-motion-scroll gas-block-gallery--cols-3" style="--gas-carousel-prev-label:&quot;Précédent&quot;;--gas-carousel-next-label:&quot;Suivant&quot;;" data-block-type="gallery" data-carousel-engine="native" data-gas-block-enhancer="gallery" data-gas-block-config="{&quot;lightbox&quot;:true,&quot;engine&quot;:&quot;native&quot;,&quot;filterable&quot;:true}">
    <h2 class="gas-block-gallery__title">Moments de nos ateliers</h2>            <div class="gas-block-gallery__filters" data-gallery-filters>
            <label class="screen-reader-text" for="gas-block-gallery-pretty_gallery_001-search">Rechercher dans la galerie</label>
            <input id="gas-block-gallery-pretty_gallery_001-search" class="gas-block-gallery__search" type="search" data-gallery-search placeholder="Rechercher une photo ou une vidéo" />
            <div class="gas-block-gallery__filter-chips" role="list" aria-label="Filtres de galerie">
                <button type="button" class="gas-block-gallery__filter-chip is-active" data-gallery-filter="all" role="listitem">Tout</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ateliers" role="listitem">Ateliers</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="exterieur" role="listitem">extérieur</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="groupe" role="listitem">groupe</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ecriture" role="listitem">écriture</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="sorties" role="listitem">Sorties</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="marche" role="listitem">marche</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="videos" role="listitem">Vidéos</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="musique" role="listitem">musique</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="nature" role="listitem">nature</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="rencontres" role="listitem">Rencontres</button>
                            </div>
        </div>
        <div class="gas-block-gallery__viewport">    <div class="gas-block-gallery__grid" data-gallery-id="gas-block-gallery-pretty_gallery_001">
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#d8c4a5;" data-gallery-item data-gallery-lqip data-index="0" data-gallery-filter-values="ateliers exterieur groupe" data-gallery-search-text="cercle de partage en extérieur cercle de partage en extérieur ateliers extérieur groupe">
                <a href="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Cercle de partage en extérieur" data-credit="Photo Unsplash">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Cercle de partage en extérieur" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Cercle de partage en extérieur</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#c8b49c;" data-gallery-item data-gallery-lqip data-index="1" data-gallery-filter-values="ateliers ecriture" data-gallery-search-text="atelier d&#039;écriture atelier d&#039;écriture ateliers écriture">
                <a href="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Atelier d&#039;écriture" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Atelier d&#039;écriture" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Atelier d&#039;écriture</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b9c7b3;" data-gallery-item data-gallery-lqip data-index="2" data-gallery-filter-values="sorties exterieur marche" data-gallery-search-text="marche méditative marche méditative sorties extérieur marche">
                <a href="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Marche méditative" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Marche méditative" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Marche méditative</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#9fb0c4;" data-gallery-item data-gallery-lqip data-index="3" data-gallery-filter-values="ateliers groupe" data-gallery-search-text="discussion en petit groupe discussion en petit groupe ateliers groupe">
                <a href="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Discussion en petit groupe" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Discussion en petit groupe" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Discussion en petit groupe</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#3f4659;" data-gallery-item data-gallery-lqip data-index="4" data-gallery-filter-values="videos musique" data-gallery-search-text="session de musique en vidéo session de musique vidéos musique">
                <a href="https://www.youtube.com/watch?v=ysz5S6PUM-U" class="gas-block-gallery__link" data-gallery-link data-kind="video_embed" data-caption="Session de musique en vidéo" data-credit="Vidéo de démonstration" data-video-provider="youtube" data-video-id="ysz5S6PUM-U">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Session de musique" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <figcaption class="gas-block-gallery__caption">Session de musique en vidéo</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#91a96f;" data-gallery-item data-gallery-lqip data-index="5" data-gallery-filter-values="videos nature" data-gallery-search-text="séquence vidéo courte séquence vidéo de nature vidéos nature">
                <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" class="gas-block-gallery__link" data-gallery-link data-kind="video_file" data-caption="Séquence vidéo courte" data-credit="" data-video-url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Séquence vidéo de nature" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <figcaption class="gas-block-gallery__caption">Séquence vidéo courte</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b89072;" data-gallery-item data-gallery-lqip data-index="6" data-gallery-filter-values="rencontres groupe" data-gallery-search-text="repas partagé repas partagé rencontres groupe">
                <a href="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Repas partagé" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Repas partagé" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Repas partagé</figcaption>
                            </figure>
                    </div>
    </div></section>
</div>

variante : justified

Moments de nos ateliers

Voir le HTML rendu

<div id="pretty_gallery_001" class="gas-block-anchor" data-gas-block-id="pretty_gallery_001"><section class="gas-block-gallery gas-block-gallery--layout-justified gas-block-gallery--tile-motion-scroll gas-block-gallery--cols-3" data-block-type="gallery" data-gas-block-enhancer="gallery" data-gas-block-config="{&quot;lightbox&quot;:true,&quot;engine&quot;:&quot;native&quot;,&quot;filterable&quot;:true}">
    <h2 class="gas-block-gallery__title">Moments de nos ateliers</h2>            <div class="gas-block-gallery__filters" data-gallery-filters>
            <label class="screen-reader-text" for="gas-block-gallery-pretty_gallery_001-search">Rechercher dans la galerie</label>
            <input id="gas-block-gallery-pretty_gallery_001-search" class="gas-block-gallery__search" type="search" data-gallery-search placeholder="Rechercher une photo ou une vidéo" />
            <div class="gas-block-gallery__filter-chips" role="list" aria-label="Filtres de galerie">
                <button type="button" class="gas-block-gallery__filter-chip is-active" data-gallery-filter="all" role="listitem">Tout</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ateliers" role="listitem">Ateliers</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="exterieur" role="listitem">extérieur</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="groupe" role="listitem">groupe</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ecriture" role="listitem">écriture</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="sorties" role="listitem">Sorties</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="marche" role="listitem">marche</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="videos" role="listitem">Vidéos</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="musique" role="listitem">musique</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="nature" role="listitem">nature</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="rencontres" role="listitem">Rencontres</button>
                            </div>
        </div>
            <div class="gas-block-gallery__grid" data-gallery-id="gas-block-gallery-pretty_gallery_001">
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#d8c4a5;--gas-gallery-item-ratio:1;--gas-gallery-item-basis:160px;flex-grow:1;" data-gallery-item data-gallery-lqip data-index="0" data-gallery-filter-values="ateliers exterieur groupe" data-gallery-search-text="cercle de partage en extérieur cercle de partage en extérieur ateliers extérieur groupe">
                <a href="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Cercle de partage en extérieur" data-credit="Photo Unsplash">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Cercle de partage en extérieur" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Cercle de partage en extérieur</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#c8b49c;--gas-gallery-item-ratio:1;--gas-gallery-item-basis:160px;flex-grow:1;" data-gallery-item data-gallery-lqip data-index="1" data-gallery-filter-values="ateliers ecriture" data-gallery-search-text="atelier d&#039;écriture atelier d&#039;écriture ateliers écriture">
                <a href="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Atelier d&#039;écriture" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Atelier d&#039;écriture" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Atelier d&#039;écriture</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b9c7b3;--gas-gallery-item-ratio:1;--gas-gallery-item-basis:160px;flex-grow:1;" data-gallery-item data-gallery-lqip data-index="2" data-gallery-filter-values="sorties exterieur marche" data-gallery-search-text="marche méditative marche méditative sorties extérieur marche">
                <a href="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Marche méditative" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Marche méditative" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Marche méditative</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#9fb0c4;--gas-gallery-item-ratio:1;--gas-gallery-item-basis:160px;flex-grow:1;" data-gallery-item data-gallery-lqip data-index="3" data-gallery-filter-values="ateliers groupe" data-gallery-search-text="discussion en petit groupe discussion en petit groupe ateliers groupe">
                <a href="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Discussion en petit groupe" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Discussion en petit groupe" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Discussion en petit groupe</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#3f4659;--gas-gallery-item-ratio:1;--gas-gallery-item-basis:160px;flex-grow:1;" data-gallery-item data-gallery-lqip data-index="4" data-gallery-filter-values="videos musique" data-gallery-search-text="session de musique en vidéo session de musique vidéos musique">
                <a href="https://www.youtube.com/watch?v=ysz5S6PUM-U" class="gas-block-gallery__link" data-gallery-link data-kind="video_embed" data-caption="Session de musique en vidéo" data-credit="Vidéo de démonstration" data-video-provider="youtube" data-video-id="ysz5S6PUM-U">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Session de musique" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <figcaption class="gas-block-gallery__caption">Session de musique en vidéo</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#91a96f;--gas-gallery-item-ratio:1;--gas-gallery-item-basis:160px;flex-grow:1;" data-gallery-item data-gallery-lqip data-index="5" data-gallery-filter-values="videos nature" data-gallery-search-text="séquence vidéo courte séquence vidéo de nature vidéos nature">
                <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" class="gas-block-gallery__link" data-gallery-link data-kind="video_file" data-caption="Séquence vidéo courte" data-credit="" data-video-url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Séquence vidéo de nature" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <figcaption class="gas-block-gallery__caption">Séquence vidéo courte</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b89072;--gas-gallery-item-ratio:1;--gas-gallery-item-basis:160px;flex-grow:1;" data-gallery-item data-gallery-lqip data-index="6" data-gallery-filter-values="rencontres groupe" data-gallery-search-text="repas partagé repas partagé rencontres groupe">
                <a href="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Repas partagé" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Repas partagé" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Repas partagé</figcaption>
                            </figure>
                    </div>
    </section>
</div>

variante : marquee

Moments de nos ateliers

Voir le HTML rendu

<div id="pretty_gallery_001" class="gas-block-anchor" data-gas-block-id="pretty_gallery_001"><section class="gas-block-gallery gas-block-gallery--layout-marquee gas-block-gallery--tile-motion-scroll gas-block-gallery--cols-3" data-block-type="gallery" data-gas-block-enhancer="gallery" data-gas-block-config="{&quot;lightbox&quot;:true,&quot;engine&quot;:&quot;native&quot;,&quot;filterable&quot;:true}">
    <h2 class="gas-block-gallery__title">Moments de nos ateliers</h2>            <div class="gas-block-gallery__filters" data-gallery-filters>
            <label class="screen-reader-text" for="gas-block-gallery-pretty_gallery_001-search">Rechercher dans la galerie</label>
            <input id="gas-block-gallery-pretty_gallery_001-search" class="gas-block-gallery__search" type="search" data-gallery-search placeholder="Rechercher une photo ou une vidéo" />
            <div class="gas-block-gallery__filter-chips" role="list" aria-label="Filtres de galerie">
                <button type="button" class="gas-block-gallery__filter-chip is-active" data-gallery-filter="all" role="listitem">Tout</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ateliers" role="listitem">Ateliers</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="exterieur" role="listitem">extérieur</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="groupe" role="listitem">groupe</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ecriture" role="listitem">écriture</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="sorties" role="listitem">Sorties</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="marche" role="listitem">marche</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="videos" role="listitem">Vidéos</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="musique" role="listitem">musique</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="nature" role="listitem">nature</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="rencontres" role="listitem">Rencontres</button>
                            </div>
        </div>
            <div class="gas-block-gallery__grid" data-gallery-id="gas-block-gallery-pretty_gallery_001">
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#d8c4a5;" data-gallery-item data-gallery-lqip data-index="0" data-gallery-filter-values="ateliers exterieur groupe" data-gallery-search-text="cercle de partage en extérieur cercle de partage en extérieur ateliers extérieur groupe">
                <a href="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Cercle de partage en extérieur" data-credit="Photo Unsplash">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Cercle de partage en extérieur" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Cercle de partage en extérieur</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#c8b49c;" data-gallery-item data-gallery-lqip data-index="1" data-gallery-filter-values="ateliers ecriture" data-gallery-search-text="atelier d&#039;écriture atelier d&#039;écriture ateliers écriture">
                <a href="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Atelier d&#039;écriture" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Atelier d&#039;écriture" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Atelier d&#039;écriture</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b9c7b3;" data-gallery-item data-gallery-lqip data-index="2" data-gallery-filter-values="sorties exterieur marche" data-gallery-search-text="marche méditative marche méditative sorties extérieur marche">
                <a href="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Marche méditative" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Marche méditative" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Marche méditative</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#9fb0c4;" data-gallery-item data-gallery-lqip data-index="3" data-gallery-filter-values="ateliers groupe" data-gallery-search-text="discussion en petit groupe discussion en petit groupe ateliers groupe">
                <a href="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Discussion en petit groupe" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Discussion en petit groupe" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Discussion en petit groupe</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#3f4659;" data-gallery-item data-gallery-lqip data-index="4" data-gallery-filter-values="videos musique" data-gallery-search-text="session de musique en vidéo session de musique vidéos musique">
                <a href="https://www.youtube.com/watch?v=ysz5S6PUM-U" class="gas-block-gallery__link" data-gallery-link data-kind="video_embed" data-caption="Session de musique en vidéo" data-credit="Vidéo de démonstration" data-video-provider="youtube" data-video-id="ysz5S6PUM-U">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Session de musique" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <figcaption class="gas-block-gallery__caption">Session de musique en vidéo</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#91a96f;" data-gallery-item data-gallery-lqip data-index="5" data-gallery-filter-values="videos nature" data-gallery-search-text="séquence vidéo courte séquence vidéo de nature vidéos nature">
                <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" class="gas-block-gallery__link" data-gallery-link data-kind="video_file" data-caption="Séquence vidéo courte" data-credit="" data-video-url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Séquence vidéo de nature" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <figcaption class="gas-block-gallery__caption">Séquence vidéo courte</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b89072;" data-gallery-item data-gallery-lqip data-index="6" data-gallery-filter-values="rencontres groupe" data-gallery-search-text="repas partagé repas partagé rencontres groupe">
                <a href="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Repas partagé" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Repas partagé" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Repas partagé</figcaption>
                            </figure>
                                                        <figure class="gas-block-gallery__item" aria-hidden="true">
                    <span class="gas-block-gallery__link">
                                                    <picture>
                                                                <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />
                            </picture>
                                                                    </span>
                </figure>
                            <figure class="gas-block-gallery__item" aria-hidden="true">
                    <span class="gas-block-gallery__link">
                                                    <picture>
                                                                <img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />
                            </picture>
                                                                    </span>
                </figure>
                            <figure class="gas-block-gallery__item" aria-hidden="true">
                    <span class="gas-block-gallery__link">
                                                    <picture>
                                                                <img src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />
                            </picture>
                                                                    </span>
                </figure>
                            <figure class="gas-block-gallery__item" aria-hidden="true">
                    <span class="gas-block-gallery__link">
                                                    <picture>
                                                                <img src="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />
                            </picture>
                                                                    </span>
                </figure>
                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" aria-hidden="true">
                    <span class="gas-block-gallery__link">
                                                    <picture>
                                                                <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />
                            </picture>
                                                <span class="gas-block-gallery__play-badge" aria-hidden="true"><svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span>                    </span>
                </figure>
                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" aria-hidden="true">
                    <span class="gas-block-gallery__link">
                                                    <picture>
                                                                <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />
                            </picture>
                                                <span class="gas-block-gallery__play-badge" aria-hidden="true"><svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span>                    </span>
                </figure>
                            <figure class="gas-block-gallery__item" aria-hidden="true">
                    <span class="gas-block-gallery__link">
                                                    <picture>
                                                                <img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />
                            </picture>
                                                                    </span>
                </figure>
                        </div>
    </section>
</div>

variante : stack

Moments de nos ateliers

Voir le HTML rendu

<div id="pretty_gallery_001" class="gas-block-anchor" data-gas-block-id="pretty_gallery_001"><section class="gas-block-gallery gas-block-gallery--layout-stack gas-block-gallery--tile-motion-scroll gas-block-gallery--cols-3" data-block-type="gallery" data-gas-block-enhancer="gallery" data-gas-block-config="{&quot;lightbox&quot;:true,&quot;engine&quot;:&quot;native&quot;,&quot;filterable&quot;:true}">
    <h2 class="gas-block-gallery__title">Moments de nos ateliers</h2>            <div class="gas-block-gallery__filters" data-gallery-filters>
            <label class="screen-reader-text" for="gas-block-gallery-pretty_gallery_001-search">Rechercher dans la galerie</label>
            <input id="gas-block-gallery-pretty_gallery_001-search" class="gas-block-gallery__search" type="search" data-gallery-search placeholder="Rechercher une photo ou une vidéo" />
            <div class="gas-block-gallery__filter-chips" role="list" aria-label="Filtres de galerie">
                <button type="button" class="gas-block-gallery__filter-chip is-active" data-gallery-filter="all" role="listitem">Tout</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ateliers" role="listitem">Ateliers</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="exterieur" role="listitem">extérieur</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="groupe" role="listitem">groupe</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ecriture" role="listitem">écriture</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="sorties" role="listitem">Sorties</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="marche" role="listitem">marche</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="videos" role="listitem">Vidéos</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="musique" role="listitem">musique</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="nature" role="listitem">nature</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="rencontres" role="listitem">Rencontres</button>
                            </div>
        </div>
            <div class="gas-block-gallery__grid" data-gallery-id="gas-block-gallery-pretty_gallery_001">
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#d8c4a5;" data-gallery-item data-gallery-lqip data-index="0" data-gallery-filter-values="ateliers exterieur groupe" data-gallery-search-text="cercle de partage en extérieur cercle de partage en extérieur ateliers extérieur groupe">
                <a href="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Cercle de partage en extérieur" data-credit="Photo Unsplash">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Cercle de partage en extérieur" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Cercle de partage en extérieur</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#c8b49c;" data-gallery-item data-gallery-lqip data-index="1" data-gallery-filter-values="ateliers ecriture" data-gallery-search-text="atelier d&#039;écriture atelier d&#039;écriture ateliers écriture">
                <a href="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Atelier d&#039;écriture" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Atelier d&#039;écriture" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Atelier d&#039;écriture</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b9c7b3;" data-gallery-item data-gallery-lqip data-index="2" data-gallery-filter-values="sorties exterieur marche" data-gallery-search-text="marche méditative marche méditative sorties extérieur marche">
                <a href="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Marche méditative" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Marche méditative" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Marche méditative</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#9fb0c4;" data-gallery-item data-gallery-lqip data-index="3" data-gallery-filter-values="ateliers groupe" data-gallery-search-text="discussion en petit groupe discussion en petit groupe ateliers groupe">
                <a href="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Discussion en petit groupe" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Discussion en petit groupe" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Discussion en petit groupe</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#3f4659;" data-gallery-item data-gallery-lqip data-index="4" data-gallery-filter-values="videos musique" data-gallery-search-text="session de musique en vidéo session de musique vidéos musique">
                <a href="https://www.youtube.com/watch?v=ysz5S6PUM-U" class="gas-block-gallery__link" data-gallery-link data-kind="video_embed" data-caption="Session de musique en vidéo" data-credit="Vidéo de démonstration" data-video-provider="youtube" data-video-id="ysz5S6PUM-U">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Session de musique" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <figcaption class="gas-block-gallery__caption">Session de musique en vidéo</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#91a96f;" data-gallery-item data-gallery-lqip data-index="5" data-gallery-filter-values="videos nature" data-gallery-search-text="séquence vidéo courte séquence vidéo de nature vidéos nature">
                <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" class="gas-block-gallery__link" data-gallery-link data-kind="video_file" data-caption="Séquence vidéo courte" data-credit="" data-video-url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Séquence vidéo de nature" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <figcaption class="gas-block-gallery__caption">Séquence vidéo courte</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b89072;" data-gallery-item data-gallery-lqip data-index="6" data-gallery-filter-values="rencontres groupe" data-gallery-search-text="repas partagé repas partagé rencontres groupe">
                <a href="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Repas partagé" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Repas partagé" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Repas partagé</figcaption>
                            </figure>
                    </div>
    </section>
</div>

variante : hotspots

Moments de nos ateliers

Voir le HTML rendu

<div id="pretty_gallery_001" class="gas-block-anchor" data-gas-block-id="pretty_gallery_001"><section class="gas-block-gallery gas-block-gallery--layout-hotspots gas-block-gallery--tile-motion-scroll gas-block-gallery--cols-3" data-block-type="gallery" data-gas-block-enhancer="gallery" data-gas-block-config="{&quot;lightbox&quot;:true,&quot;engine&quot;:&quot;native&quot;,&quot;filterable&quot;:true}">
    <h2 class="gas-block-gallery__title">Moments de nos ateliers</h2>            <div class="gas-block-gallery__filters" data-gallery-filters>
            <label class="screen-reader-text" for="gas-block-gallery-pretty_gallery_001-search">Rechercher dans la galerie</label>
            <input id="gas-block-gallery-pretty_gallery_001-search" class="gas-block-gallery__search" type="search" data-gallery-search placeholder="Rechercher une photo ou une vidéo" />
            <div class="gas-block-gallery__filter-chips" role="list" aria-label="Filtres de galerie">
                <button type="button" class="gas-block-gallery__filter-chip is-active" data-gallery-filter="all" role="listitem">Tout</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ateliers" role="listitem">Ateliers</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="exterieur" role="listitem">extérieur</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="groupe" role="listitem">groupe</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ecriture" role="listitem">écriture</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="sorties" role="listitem">Sorties</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="marche" role="listitem">marche</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="videos" role="listitem">Vidéos</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="musique" role="listitem">musique</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="nature" role="listitem">nature</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="rencontres" role="listitem">Rencontres</button>
                            </div>
        </div>
            <div class="gas-block-gallery__grid" data-gallery-id="gas-block-gallery-pretty_gallery_001">
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#d8c4a5;" data-gallery-item data-gallery-lqip data-index="0" data-gallery-filter-values="ateliers exterieur groupe" data-gallery-search-text="cercle de partage en extérieur cercle de partage en extérieur ateliers extérieur groupe">
                <a href="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Cercle de partage en extérieur" data-credit="Photo Unsplash">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Cercle de partage en extérieur" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Cercle de partage en extérieur</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#c8b49c;" data-gallery-item data-gallery-lqip data-index="1" data-gallery-filter-values="ateliers ecriture" data-gallery-search-text="atelier d&#039;écriture atelier d&#039;écriture ateliers écriture">
                <a href="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Atelier d&#039;écriture" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Atelier d&#039;écriture" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Atelier d&#039;écriture</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b9c7b3;" data-gallery-item data-gallery-lqip data-index="2" data-gallery-filter-values="sorties exterieur marche" data-gallery-search-text="marche méditative marche méditative sorties extérieur marche">
                <a href="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Marche méditative" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Marche méditative" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Marche méditative</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#9fb0c4;" data-gallery-item data-gallery-lqip data-index="3" data-gallery-filter-values="ateliers groupe" data-gallery-search-text="discussion en petit groupe discussion en petit groupe ateliers groupe">
                <a href="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Discussion en petit groupe" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Discussion en petit groupe" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Discussion en petit groupe</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#3f4659;" data-gallery-item data-gallery-lqip data-index="4" data-gallery-filter-values="videos musique" data-gallery-search-text="session de musique en vidéo session de musique vidéos musique">
                <a href="https://www.youtube.com/watch?v=ysz5S6PUM-U" class="gas-block-gallery__link" data-gallery-link data-kind="video_embed" data-caption="Session de musique en vidéo" data-credit="Vidéo de démonstration" data-video-provider="youtube" data-video-id="ysz5S6PUM-U">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Session de musique" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <figcaption class="gas-block-gallery__caption">Session de musique en vidéo</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#91a96f;" data-gallery-item data-gallery-lqip data-index="5" data-gallery-filter-values="videos nature" data-gallery-search-text="séquence vidéo courte séquence vidéo de nature vidéos nature">
                <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" class="gas-block-gallery__link" data-gallery-link data-kind="video_file" data-caption="Séquence vidéo courte" data-credit="" data-video-url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Séquence vidéo de nature" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <figcaption class="gas-block-gallery__caption">Séquence vidéo courte</figcaption>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b89072;" data-gallery-item data-gallery-lqip data-index="6" data-gallery-filter-values="rencontres groupe" data-gallery-search-text="repas partagé repas partagé rencontres groupe">
                <a href="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Repas partagé" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Repas partagé" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <figcaption class="gas-block-gallery__caption">Repas partagé</figcaption>
                            </figure>
                    </div>
    </section>
</div>

variante : photo_essay

Moments de nos ateliers

Voir le HTML rendu

<div id="pretty_gallery_001" class="gas-block-anchor" data-gas-block-id="pretty_gallery_001"><section class="gas-block-gallery gas-block-gallery--layout-photo_essay gas-block-gallery--tile-motion-scroll gas-block-gallery--cols-3" data-block-type="gallery" data-gas-block-enhancer="gallery" data-gas-block-config="{&quot;lightbox&quot;:true,&quot;engine&quot;:&quot;native&quot;,&quot;filterable&quot;:true}">
    <h2 class="gas-block-gallery__title">Moments de nos ateliers</h2>            <div class="gas-block-gallery__filters" data-gallery-filters>
            <label class="screen-reader-text" for="gas-block-gallery-pretty_gallery_001-search">Rechercher dans la galerie</label>
            <input id="gas-block-gallery-pretty_gallery_001-search" class="gas-block-gallery__search" type="search" data-gallery-search placeholder="Rechercher une photo ou une vidéo" />
            <div class="gas-block-gallery__filter-chips" role="list" aria-label="Filtres de galerie">
                <button type="button" class="gas-block-gallery__filter-chip is-active" data-gallery-filter="all" role="listitem">Tout</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ateliers" role="listitem">Ateliers</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="exterieur" role="listitem">extérieur</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="groupe" role="listitem">groupe</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="ecriture" role="listitem">écriture</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="sorties" role="listitem">Sorties</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="marche" role="listitem">marche</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="videos" role="listitem">Vidéos</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="musique" role="listitem">musique</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="nature" role="listitem">nature</button>
                                    <button type="button" class="gas-block-gallery__filter-chip" data-gallery-filter="rencontres" role="listitem">Rencontres</button>
                            </div>
        </div>
            <div class="gas-block-gallery__grid" data-gallery-id="gas-block-gallery-pretty_gallery_001">
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#d8c4a5;" data-gallery-item data-gallery-lqip data-index="0" data-gallery-filter-values="ateliers exterieur groupe" data-gallery-search-text="cercle de partage en extérieur cercle de partage en extérieur ateliers extérieur groupe">
                <a href="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Cercle de partage en extérieur" data-credit="Photo Unsplash">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Cercle de partage en extérieur" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <div class="gas-block-gallery__essay-copy">
                        <figcaption class="gas-block-gallery__caption">Cercle de partage en extérieur</figcaption>                                            </div>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#c8b49c;" data-gallery-item data-gallery-lqip data-index="1" data-gallery-filter-values="ateliers ecriture" data-gallery-search-text="atelier d&#039;écriture atelier d&#039;écriture ateliers écriture">
                <a href="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Atelier d&#039;écriture" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Atelier d&#039;écriture" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <div class="gas-block-gallery__essay-copy">
                        <figcaption class="gas-block-gallery__caption">Atelier d&#039;écriture</figcaption>                                            </div>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b9c7b3;" data-gallery-item data-gallery-lqip data-index="2" data-gallery-filter-values="sorties exterieur marche" data-gallery-search-text="marche méditative marche méditative sorties extérieur marche">
                <a href="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Marche méditative" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Marche méditative" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <div class="gas-block-gallery__essay-copy">
                        <figcaption class="gas-block-gallery__caption">Marche méditative</figcaption>                                            </div>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#9fb0c4;" data-gallery-item data-gallery-lqip data-index="3" data-gallery-filter-values="ateliers groupe" data-gallery-search-text="discussion en petit groupe discussion en petit groupe ateliers groupe">
                <a href="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Discussion en petit groupe" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1543269664-7eef42226a21?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Discussion en petit groupe" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <div class="gas-block-gallery__essay-copy">
                        <figcaption class="gas-block-gallery__caption">Discussion en petit groupe</figcaption>                                            </div>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#3f4659;" data-gallery-item data-gallery-lqip data-index="4" data-gallery-filter-values="videos musique" data-gallery-search-text="session de musique en vidéo session de musique vidéos musique">
                <a href="https://www.youtube.com/watch?v=ysz5S6PUM-U" class="gas-block-gallery__link" data-gallery-link data-kind="video_embed" data-caption="Session de musique en vidéo" data-credit="Vidéo de démonstration" data-video-provider="youtube" data-video-id="ysz5S6PUM-U">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Session de musique" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <div class="gas-block-gallery__essay-copy">
                        <figcaption class="gas-block-gallery__caption">Session de musique en vidéo</figcaption>                                            </div>
                            </figure>
                                            <figure class="gas-block-gallery__item gas-block-gallery__item--video" style="--gas-gallery-placeholder-color:#91a96f;" data-gallery-item data-gallery-lqip data-index="5" data-gallery-filter-values="videos nature" data-gallery-search-text="séquence vidéo courte séquence vidéo de nature vidéos nature">
                <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" class="gas-block-gallery__link" data-gallery-link data-kind="video_file" data-caption="Séquence vidéo courte" data-credit="" data-video-url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Séquence vidéo de nature" loading="lazy" decoding="async" />
                        </picture>
                                                                <span class="gas-block-gallery__play-badge" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        <span class="screen-reader-text">Lire la vidéo</span>
                                                        </a>
                                                    <div class="gas-block-gallery__essay-copy">
                        <figcaption class="gas-block-gallery__caption">Séquence vidéo courte</figcaption>                                            </div>
                            </figure>
                                            <figure class="gas-block-gallery__item" style="--gas-gallery-placeholder-color:#b89072;" data-gallery-item data-gallery-lqip data-index="6" data-gallery-filter-values="rencontres groupe" data-gallery-search-text="repas partagé repas partagé rencontres groupe">
                <a href="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" class="gas-block-gallery__link" data-gallery-link data-kind="image" data-caption="Repas partagé" data-credit="">
                                            <picture>
                                                        <img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Repas partagé" loading="lazy" decoding="async" />
                        </picture>
                                                                            </a>
                                                    <div class="gas-block-gallery__essay-copy">
                        <figcaption class="gas-block-gallery__caption">Repas partagé</figcaption>                                            </div>
                            </figure>
                    </div>
    </section>
</div>

Image `image`

Image responsive avec légende optionnelle. Le navigateur charge automatiquement la taille adaptée à l'écran.

variante : none

Voir le HTML rendu

<div id="pretty_image_001" class="gas-block-anchor" data-gas-block-id="pretty_image_001"><section class="gas-block-image gas-block-image--default gas-block-image--frame-none" data-block-type="image">
    <figure class="gas-block-image__figure">
        
        <span class="gas-block-image__frame gas-frame gas-frame--none">
                        <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=1600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Paysage de montagne au lever du soleil" class="gas-block-image__img" loading="lazy" decoding="async" data-gas-field-key="blocks.pretty_image_001.image.url" />        </span>

        
            </figure>
</section>
</div>

variante : ring

Voir le HTML rendu

<div id="pretty_image_001" class="gas-block-anchor" data-gas-block-id="pretty_image_001"><section class="gas-block-image gas-block-image--default gas-block-image--frame-ring" data-block-type="image">
    <figure class="gas-block-image__figure">
        
        <span class="gas-block-image__frame gas-frame gas-frame--ring">
                        <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=1600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Paysage de montagne au lever du soleil" class="gas-block-image__img" loading="lazy" decoding="async" data-gas-field-key="blocks.pretty_image_001.image.url" />        </span>

        
            </figure>
</section>
</div>

variante : shadow

Voir le HTML rendu

<div id="pretty_image_001" class="gas-block-anchor" data-gas-block-id="pretty_image_001"><section class="gas-block-image gas-block-image--default gas-block-image--frame-shadow" data-block-type="image">
    <figure class="gas-block-image__figure">
        
        <span class="gas-block-image__frame gas-frame gas-frame--shadow">
                        <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=1600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Paysage de montagne au lever du soleil" class="gas-block-image__img" loading="lazy" decoding="async" data-gas-field-key="blocks.pretty_image_001.image.url" />        </span>

        
            </figure>
</section>
</div>

variante : browser

Voir le HTML rendu

<div id="pretty_image_001" class="gas-block-anchor" data-gas-block-id="pretty_image_001"><section class="gas-block-image gas-block-image--default gas-block-image--frame-browser" data-block-type="image">
    <figure class="gas-block-image__figure">
        
        <span class="gas-block-image__frame gas-frame gas-frame--browser">
                            <span class="gas-frame__bar" aria-hidden="true"></span>
                        <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=1600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Paysage de montagne au lever du soleil" class="gas-block-image__img" loading="lazy" decoding="async" data-gas-field-key="blocks.pretty_image_001.image.url" />        </span>

        
            </figure>
</section>
</div>

variante : device

Voir le HTML rendu

<div id="pretty_image_001" class="gas-block-anchor" data-gas-block-id="pretty_image_001"><section class="gas-block-image gas-block-image--default gas-block-image--frame-device" data-block-type="image">
    <figure class="gas-block-image__figure">
        
        <span class="gas-block-image__frame gas-frame gas-frame--device">
                        <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=1600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Paysage de montagne au lever du soleil" class="gas-block-image__img" loading="lazy" decoding="async" data-gas-field-key="blocks.pretty_image_001.image.url" />        </span>

        
            </figure>
</section>
</div>

variante : default

Voir le HTML rendu

<div id="pretty_image_001" class="gas-block-anchor" data-gas-block-id="pretty_image_001"><section class="gas-block-image gas-block-image--default gas-block-image--frame-none" data-block-type="image">
    <figure class="gas-block-image__figure">
        
        <span class="gas-block-image__frame gas-frame gas-frame--none">
                        <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=1600&#038;auto=format&#038;fit=crop&#038;q=70" alt="Paysage de montagne au lever du soleil" class="gas-block-image__img" loading="lazy" decoding="async" data-gas-field-key="blocks.pretty_image_001.image.url" />        </span>

        
            </figure>
</section>
</div>

Collage d'images `image_collage`

Composition de tuiles images qui se chevauchent, chacune avec un libellé et une légende en surimpression. Une tuile peut être une carte statistique (chiffre + texte) et une autre porter une icône de lecture vidéo.

variante : editorial-feature

Conference publique — Conférences Rencontres publiques

Atelier en petit groupe — Ateliers En petit groupe

Rencontre conviviale — Méditation Moments de calme

80+ PERSONNES RENCONTRÉES

lors de nos évènements

Voir le HTML rendu

<div id="pretty_image_collage_001" class="gas-block-anchor" data-gas-block-id="pretty_image_collage_001"><div class="gas-block-image-collage gas-block-image-collage--editorial-feature" data-block-type="image_collage">
                                            <figure class="gas-block-image-collage__tile gas-block-image-collage__tile--image gas-block-image-collage__tile--pos-1">
                                    <img class="gas-block-image-collage__image" src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=900&#038;auto=format&#038;fit=crop&#038;q=70" alt="Conference publique" loading="lazy" decoding="async" />                                                    <span class="gas-block-image-collage__play">
                        <svg class="gas-block-image-collage__play-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 5v14l11-7z"/></svg>                    </span>
                                                    <figcaption class="gas-block-image-collage__overlay">
                                                    <span class="gas-block-image-collage__label">Conférences</span>
                                                                            <span class="gas-block-image-collage__caption">Rencontres publiques</span>
                                            </figcaption>
                            </figure>
                                                    <figure class="gas-block-image-collage__tile gas-block-image-collage__tile--image gas-block-image-collage__tile--pos-2">
                                    <img class="gas-block-image-collage__image" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=700&#038;auto=format&#038;fit=crop&#038;q=70" alt="Atelier en petit groupe" loading="lazy" decoding="async" />                                                                    <figcaption class="gas-block-image-collage__overlay">
                                                    <span class="gas-block-image-collage__label">Ateliers</span>
                                                                            <span class="gas-block-image-collage__caption">En petit groupe</span>
                                            </figcaption>
                            </figure>
                                                    <figure class="gas-block-image-collage__tile gas-block-image-collage__tile--image gas-block-image-collage__tile--pos-3">
                                    <img class="gas-block-image-collage__image" src="https://images.unsplash.com/photo-1515187029135-18ee286d815b?w=700&#038;auto=format&#038;fit=crop&#038;q=70" alt="Rencontre conviviale" loading="lazy" decoding="async" />                                                                    <figcaption class="gas-block-image-collage__overlay">
                                                    <span class="gas-block-image-collage__label">Méditation</span>
                                                                            <span class="gas-block-image-collage__caption">Moments de calme</span>
                                            </figcaption>
                            </figure>
                                                    <div class="gas-block-image-collage__tile gas-block-image-collage__tile--stat gas-block-image-collage__tile--pos-4">
                <div class="gas-block-image-collage__stat">
                                            <span class="gas-block-image-collage__stat-value">80+</span>
                                                                <span class="gas-block-image-collage__stat-label">PERSONNES RENCONTRÉES</span>
                                                                <p class="gas-block-image-collage__stat-text">lors de nos évènements</p>
                                    </div>
            </div>
            </div>
</div>

variante : staggered-3

80+ PERSONNES RENCONTRÉES

lors de nos évènements

Voir le HTML rendu

<div id="pretty_image_collage_001" class="gas-block-anchor" data-gas-block-id="pretty_image_collage_001"><div class="gas-block-image-collage gas-block-image-collage--staggered-3" data-block-type="image_collage">
                                            <figure class="gas-block-image-collage__tile gas-block-image-collage__tile--image gas-block-image-collage__tile--pos-1">
                                    <img class="gas-block-image-collage__image" src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=900&#038;auto=format&#038;fit=crop&#038;q=70" alt="Conference publique" loading="lazy" decoding="async" />                                                    <span class="gas-block-image-collage__play">
                        <svg class="gas-block-image-collage__play-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 5v14l11-7z"/></svg>                    </span>
                                                    <figcaption class="gas-block-image-collage__overlay">
                                                    <span class="gas-block-image-collage__label">Conférences</span>
                                                                            <span class="gas-block-image-collage__caption">Rencontres publiques</span>
                                            </figcaption>
                            </figure>
                                                    <figure class="gas-block-image-collage__tile gas-block-image-collage__tile--image gas-block-image-collage__tile--pos-2">
                                    <img class="gas-block-image-collage__image" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=700&#038;auto=format&#038;fit=crop&#038;q=70" alt="Atelier en petit groupe" loading="lazy" decoding="async" />                                                                    <figcaption class="gas-block-image-collage__overlay">
                                                    <span class="gas-block-image-collage__label">Ateliers</span>
                                                                            <span class="gas-block-image-collage__caption">En petit groupe</span>
                                            </figcaption>
                            </figure>
                                                    <figure class="gas-block-image-collage__tile gas-block-image-collage__tile--image gas-block-image-collage__tile--pos-3">
                                    <img class="gas-block-image-collage__image" src="https://images.unsplash.com/photo-1515187029135-18ee286d815b?w=700&#038;auto=format&#038;fit=crop&#038;q=70" alt="Rencontre conviviale" loading="lazy" decoding="async" />                                                                    <figcaption class="gas-block-image-collage__overlay">
                                                    <span class="gas-block-image-collage__label">Méditation</span>
                                                                            <span class="gas-block-image-collage__caption">Moments de calme</span>
                                            </figcaption>
                            </figure>
                                                    <div class="gas-block-image-collage__tile gas-block-image-collage__tile--stat gas-block-image-collage__tile--pos-4">
                <div class="gas-block-image-collage__stat">
                                            <span class="gas-block-image-collage__stat-value">80+</span>
                                                                <span class="gas-block-image-collage__stat-label">PERSONNES RENCONTRÉES</span>
                                                                <p class="gas-block-image-collage__stat-text">lors de nos évènements</p>
                                    </div>
            </div>
            </div>
</div>

variante : mosaic-4

80+ PERSONNES RENCONTRÉES

lors de nos évènements

Voir le HTML rendu

<div id="pretty_image_collage_001" class="gas-block-anchor" data-gas-block-id="pretty_image_collage_001"><div class="gas-block-image-collage gas-block-image-collage--mosaic-4" data-block-type="image_collage">
                                            <figure class="gas-block-image-collage__tile gas-block-image-collage__tile--image gas-block-image-collage__tile--pos-1">
                                    <img class="gas-block-image-collage__image" src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=900&#038;auto=format&#038;fit=crop&#038;q=70" alt="Conference publique" loading="lazy" decoding="async" />                                                    <span class="gas-block-image-collage__play">
                        <svg class="gas-block-image-collage__play-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 5v14l11-7z"/></svg>                    </span>
                                                    <figcaption class="gas-block-image-collage__overlay">
                                                    <span class="gas-block-image-collage__label">Conférences</span>
                                                                            <span class="gas-block-image-collage__caption">Rencontres publiques</span>
                                            </figcaption>
                            </figure>
                                                    <figure class="gas-block-image-collage__tile gas-block-image-collage__tile--image gas-block-image-collage__tile--pos-2">
                                    <img class="gas-block-image-collage__image" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=700&#038;auto=format&#038;fit=crop&#038;q=70" alt="Atelier en petit groupe" loading="lazy" decoding="async" />                                                                    <figcaption class="gas-block-image-collage__overlay">
                                                    <span class="gas-block-image-collage__label">Ateliers</span>
                                                                            <span class="gas-block-image-collage__caption">En petit groupe</span>
                                            </figcaption>
                            </figure>
                                                    <figure class="gas-block-image-collage__tile gas-block-image-collage__tile--image gas-block-image-collage__tile--pos-3">
                                    <img class="gas-block-image-collage__image" src="https://images.unsplash.com/photo-1515187029135-18ee286d815b?w=700&#038;auto=format&#038;fit=crop&#038;q=70" alt="Rencontre conviviale" loading="lazy" decoding="async" />                                                                    <figcaption class="gas-block-image-collage__overlay">
                                                    <span class="gas-block-image-collage__label">Méditation</span>
                                                                            <span class="gas-block-image-collage__caption">Moments de calme</span>
                                            </figcaption>
                            </figure>
                                                    <div class="gas-block-image-collage__tile gas-block-image-collage__tile--stat gas-block-image-collage__tile--pos-4">
                <div class="gas-block-image-collage__stat">
                                            <span class="gas-block-image-collage__stat-value">80+</span>
                                                                <span class="gas-block-image-collage__stat-label">PERSONNES RENCONTRÉES</span>
                                                                <p class="gas-block-image-collage__stat-text">lors de nos évènements</p>
                                    </div>
            </div>
            </div>
</div>

Encadré d'information `info_box`

Encadré coloré pour mettre en avant un message important, un avertissement ou une astuce. 4 tons selon l'importance.

Information importante

Les inscriptions à la session de printemps 2026 ferment le 15 mars 2026. Il reste 3 places. Pour t'inscrire ou poser une question, contacte-nous directement.

Voir le HTML rendu

<div id="pretty_info_box_001" class="gas-block-anchor" data-gas-block-id="pretty_info_box_001"><section class="gas-block-info-box gas-block-info-box--info" data-block-type="info_box">
    <span class="gas-block-info-box__icon" aria-hidden="true">info</span>    <div class="gas-block-info-box__body">
        <h3 class="gas-block-info-box__title">Information importante</h3>        <div class="gas-block-info-box__text"><p>Les inscriptions à la session de printemps 2026 ferment le <strong>15 mars 2026</strong>. Il reste 3 places. Pour t'inscrire ou poser une question, contacte-nous directement.</p></div>    </div>
</section>
</div>

Parcours de formation `learning_pathway`

Plan d'un parcours de formation (module learning) : sections, étapes et lien vers la fiche. Résolu côté serveur depuis le read-model des parcours publiés (portable WP/Astro).

Aucun parcours disponible pour le moment.

Voir le HTML rendu

<div id="sample_learning_pathway_001" class="gas-block-anchor" data-gas-block-id="sample_learning_pathway_001"><section class="gas-block-learning-pathway" data-block-type="learning_pathway"><p class="gas-block-learning-pathway__empty">Aucun parcours disponible pour le moment.</p></section></div>

Lettre éditoriale `letter`

En-tête centré (sur-titre, titre, accroche) suivi d'une feuille de texte « papier » posée sur un effet de feuilles empilées. Idéal pour une lettre, un manifeste ou un édito mis en avant.

Ceci est un texte de démonstration. Il occupe la place du contenu final tant que celui-ci n'est pas prêt. Une fois la rédaction terminée, ce texte sera remplacé par le vrai contenu de la lettre.

Notre association s'attache depuis de nombreuses années à faire connaître son métier avec rigueur et bienveillance.

Merci de votre confiance et de votre engagement à nos côtés.

Voir le HTML rendu

<div id="sample_letter_001" class="gas-block-anchor" data-gas-block-id="sample_letter_001"><section class="gas-block-letter gas-block-letter--align-center is-stacked" data-block-type="letter">
            <header class="gas-block-letter__header">
                            <p class="gas-block-letter__eyebrow">NOTRE ENGAGEMENT</p>
                                        <h2 class="gas-block-letter__title">Une lettre ouverte à nos membres</h2>
                                        <div class="gas-block-letter__lead"><p>Quelques mots sur ce qui nous rassemble, et sur la direction que nous prenons ensemble.</p></div>
                    </header>
    
            <article class="gas-block-letter__sheet">
                        <div class="gas-block-letter__body">
                <p>Ceci est un texte de démonstration. Il occupe la place du contenu final tant que celui-ci n'est pas prêt. Une fois la rédaction terminée, ce texte sera remplacé par le vrai contenu de la lettre.</p><p>Notre association s'attache depuis de nombreuses années à faire connaître son métier avec rigueur et bienveillance.</p><p>Merci de votre confiance et de votre engagement à nos côtés.</p>                            </div>
        </article>
    </section>
</div>

Liste de liens `link_list`

Liste manuelle de liens, compacte pour footer, liens légaux ou réseaux sociaux.

variante : stacked

Voir le HTML rendu

<div id="sample_link_list_001" class="gas-block-anchor" data-gas-block-id="sample_link_list_001"><nav class="gas-block-link-list gas-block-link-list--stacked" data-block-type="link_list">
            <h2 class="gas-block-link-list__title">Liens utiles</h2>
        <ul class="gas-block-link-list__items">
                                <li class="gas-block-link-list__item">
                <a class="gas-block-link-list__link" href="/politique-de-confidentialite/">
                                        <span>Confidentialité</span>
                </a>
            </li>
                                <li class="gas-block-link-list__item">
                <a class="gas-block-link-list__link" href="/mentions-legales/">
                                        <span>Mentions légales</span>
                </a>
            </li>
            </ul>
</nav>
</div>

variante : inline

Voir le HTML rendu

<div id="sample_link_list_001" class="gas-block-anchor" data-gas-block-id="sample_link_list_001"><nav class="gas-block-link-list gas-block-link-list--inline" data-block-type="link_list">
            <h2 class="gas-block-link-list__title">Liens utiles</h2>
        <ul class="gas-block-link-list__items">
                                <li class="gas-block-link-list__item">
                <a class="gas-block-link-list__link" href="/politique-de-confidentialite/">
                                        <span>Confidentialité</span>
                </a>
            </li>
                                <li class="gas-block-link-list__item">
                <a class="gas-block-link-list__link" href="/mentions-legales/">
                                        <span>Mentions légales</span>
                </a>
            </li>
            </ul>
</nav>
</div>

variante : social

Voir le HTML rendu

<div id="sample_link_list_001" class="gas-block-anchor" data-gas-block-id="sample_link_list_001"><nav class="gas-block-link-list gas-block-link-list--social" data-block-type="link_list">
            <h2 class="gas-block-link-list__title">Liens utiles</h2>
        <ul class="gas-block-link-list__items">
                                <li class="gas-block-link-list__item">
                <a class="gas-block-link-list__link" href="/politique-de-confidentialite/">
                                        <span>Confidentialité</span>
                </a>
            </li>
                                <li class="gas-block-link-list__item">
                <a class="gas-block-link-list__link" href="/mentions-legales/">
                                        <span>Mentions légales</span>
                </a>
            </li>
            </ul>
</nav>
</div>

Carte `map`

Carte de localisation intégrée (iframe, sans clé API). "osm" = OpenStreetMap via coordonnées (respectueux de la vie privée), "google" = Google Maps via adresse texte. Hauteur réglable.

variante : osm

Notre localisation à Genève

Voir le HTML rendu

<div id="sample_map_001" class="gas-block-anchor" data-gas-block-id="sample_map_001"><section class="gas-block-map gas-block-map--h-m" data-block-type="map">
    <figure class="gas-block-map__figure">
        <div class="gas-block-map__frame">
            <iframe class="gas-block-map__iframe"
                    src="https://www.openstreetmap.org/export/embed.html?bbox=6.094371875,46.155571875,6.192028125,46.253228125&#038;layer=mapnik&#038;marker=46.2044,6.1432"
                    title="Notre localisation à Genève"
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"
                    style="border:0"></iframe>
        </div>
                    <figcaption class="gas-block-map__caption">Notre localisation à Genève</figcaption>
            </figure>
</section>
</div>

variante : google

Notre localisation à Genève

Voir le HTML rendu

<div id="sample_map_001" class="gas-block-anchor" data-gas-block-id="sample_map_001"><section class="gas-block-map gas-block-map--h-m" data-block-type="map">
    <figure class="gas-block-map__figure">
        <div class="gas-block-map__frame">
            <iframe class="gas-block-map__iframe"
                    src="https://www.google.com/maps?q=Gen%C3%A8ve%2C%20Suisse&#038;z=12&#038;output=embed"
                    title="Notre localisation à Genève"
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"
                    style="border:0"></iframe>
        </div>
                    <figcaption class="gas-block-map__caption">Notre localisation à Genève</figcaption>
            </figure>
</section>
</div>

variante : default

Notre localisation à Genève

Voir le HTML rendu

<div id="sample_map_001" class="gas-block-anchor" data-gas-block-id="sample_map_001"><section class="gas-block-map gas-block-map--h-m" data-block-type="map">
    <figure class="gas-block-map__figure">
        <div class="gas-block-map__frame">
            <iframe class="gas-block-map__iframe"
                    src="https://www.openstreetmap.org/export/embed.html?bbox=6.094371875,46.155571875,6.192028125,46.253228125&#038;layer=mapnik&#038;marker=46.2044,6.1432"
                    title="Notre localisation à Genève"
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"
                    style="border:0"></iframe>
        </div>
                    <figcaption class="gas-block-map__caption">Notre localisation à Genève</figcaption>
            </figure>
</section>
</div>

Mention de confidentialité `privacy_notice`

Mention légale / RGPD inline : court texte + lien politique + action optionnelle, avec pictogramme bouclier et dispositions left/center/right/full. Présentation uniquement (le consentement cookies reste géré par le module dédié).

variante : left

Nous utilisons des cookies pour améliorer votre expérience. En poursuivant, vous acceptez notre politique de confidentialité.

J'accepte

Voir le HTML rendu

<div id="sample_privacy_notice_001" class="gas-block-anchor" data-gas-block-id="sample_privacy_notice_001"><section class="gas-block-privacy-notice gas-block-privacy-notice--variant-left gas-block-privacy-notice--tone-surface" data-block-type="privacy_notice">
    <div class="gas-block-privacy-notice__inner">
                    <svg class="gas-block-privacy-notice__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="m9 12 2 2 4-4"/></svg>                <div class="gas-block-privacy-notice__text"><p>Nous utilisons des cookies pour améliorer votre expérience. En poursuivant, vous acceptez notre politique de confidentialité.</p></div>
                    <a class="gas-button gas-button--outline gas-block-privacy-notice__cta" href="#">J&#039;accepte</a>
            </div>
</section>
</div>

variante : center

Nous utilisons des cookies pour améliorer votre expérience. En poursuivant, vous acceptez notre politique de confidentialité.

J'accepte

Voir le HTML rendu

<div id="sample_privacy_notice_001" class="gas-block-anchor" data-gas-block-id="sample_privacy_notice_001"><section class="gas-block-privacy-notice gas-block-privacy-notice--variant-center gas-block-privacy-notice--tone-surface" data-block-type="privacy_notice">
    <div class="gas-block-privacy-notice__inner">
                    <svg class="gas-block-privacy-notice__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="m9 12 2 2 4-4"/></svg>                <div class="gas-block-privacy-notice__text"><p>Nous utilisons des cookies pour améliorer votre expérience. En poursuivant, vous acceptez notre politique de confidentialité.</p></div>
                    <a class="gas-button gas-button--outline gas-block-privacy-notice__cta" href="#">J&#039;accepte</a>
            </div>
</section>
</div>

variante : right

Nous utilisons des cookies pour améliorer votre expérience. En poursuivant, vous acceptez notre politique de confidentialité.

J'accepte

Voir le HTML rendu

<div id="sample_privacy_notice_001" class="gas-block-anchor" data-gas-block-id="sample_privacy_notice_001"><section class="gas-block-privacy-notice gas-block-privacy-notice--variant-right gas-block-privacy-notice--tone-surface" data-block-type="privacy_notice">
    <div class="gas-block-privacy-notice__inner">
                    <svg class="gas-block-privacy-notice__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="m9 12 2 2 4-4"/></svg>                <div class="gas-block-privacy-notice__text"><p>Nous utilisons des cookies pour améliorer votre expérience. En poursuivant, vous acceptez notre politique de confidentialité.</p></div>
                    <a class="gas-button gas-button--outline gas-block-privacy-notice__cta" href="#">J&#039;accepte</a>
            </div>
</section>
</div>

variante : full

Nous utilisons des cookies pour améliorer votre expérience. En poursuivant, vous acceptez notre politique de confidentialité.

J'accepte

Voir le HTML rendu

<div id="sample_privacy_notice_001" class="gas-block-anchor" data-gas-block-id="sample_privacy_notice_001"><section class="gas-block-privacy-notice gas-block-privacy-notice--variant-full gas-block-privacy-notice--tone-surface" data-block-type="privacy_notice">
    <div class="gas-block-privacy-notice__inner">
                    <svg class="gas-block-privacy-notice__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="m9 12 2 2 4-4"/></svg>                <div class="gas-block-privacy-notice__text"><p>Nous utilisons des cookies pour améliorer votre expérience. En poursuivant, vous acceptez notre politique de confidentialité.</p></div>
                    <a class="gas-button gas-button--outline gas-block-privacy-notice__cta" href="#">J&#039;accepte</a>
            </div>
</section>
</div>

Processus par étapes `process_steps`

Processus/méthode en étapes : aside de navigation collante (scrollspy) + cartes d'étapes empilées (sticky), chacune avec un panneau « ce que nous faisons » (livrables + CTA).

Découverte

1 - 2 semaines

On apprend à se connaître avant de dessiner quoi que ce soit.

Entretiens avec les parties prenantes, audit de l'existant et cadrage des objectifs. Cette étape pose les bases de tout ce qui suit.

Ce que nous faisons

Entretiens parties prenantes
Audit de l'existant
Document de cadrage

Voir un exemple de cadrage

Stratégie

1 - 2 semaines

On transforme les constats en direction claire.

Définition du positionnement, de l'architecture de contenu et des priorités. Le plan qui guide la suite du projet.

Ce que nous faisons

Positionnement et messages clés
Architecture de contenu
Feuille de route priorisée

Construction

6 - 9 semaines

On construit, on teste, on ajuste.

Développement itératif avec points d'étape réguliers. Chaque livraison est testée avant de passer à la suivante.

Sprints de deux semaines
Démonstrations régulières

Ce que nous faisons

Maquettes validées
Développement par lots
Tests de qualité continus

Lancement

1 - 2 semaines

La mise en ligne, sans surprise.

Vérifications finales, migration des contenus et bascule en production accompagnée.

Ce que nous faisons

Recette finale
Migration des contenus
Bascule en production

Optimisation continue

En continu

Le travail ne s'arrête pas à la mise en ligne.

Suivi des performances, ajustements réguliers et accompagnement dans la durée pour que le site continue de progresser.

Ce que nous faisons

Suivi des indicateurs
Ajustements réguliers
Support continu

Découvrir nos formules de suivi

Voir le HTML rendu

<div id="sample_process_steps_001" class="gas-block-anchor" data-gas-block-id="sample_process_steps_001"><section class="gas-block-process-steps gas-block-process-steps--nav-scrollspy gas-block-process-steps--stacking-stacked" data-block-type="process_steps" data-gas-block-enhancer="process_steps" data-gas-block-config="{&quot;blockId&quot;:&quot;sample_process_steps_001&quot;}">
    <div class="gas-block-process-steps__inner">
                    <nav class="gas-block-process-steps__nav" aria-label="Notre méthode">
                                    <h2 class="gas-block-process-steps__nav-title" data-gas-field-key="sample.process_steps.title">Notre méthode</h2>
                                <ul class="gas-block-process-steps__nav-list">
                                                                    <li class="gas-block-process-steps__nav-item">
                            <a class="gas-block-process-steps__nav-link" href="#sample_process_steps_001-step-0" data-process-steps-nav-link data-step-index="0">
                                                                    <span class="gas-block-process-steps__nav-count" aria-hidden="true"></span>
                                                                <span class="gas-block-process-steps__nav-label-text" data-gas-field-key="sample.process_steps.steps.0.title">Découverte</span>
                                                                    <span class="gas-block-process-steps__nav-duration" data-gas-field-key="sample.process_steps.steps.0.duration">1 - 2 semaines</span>
                                                            </a>
                        </li>
                                                                    <li class="gas-block-process-steps__nav-item">
                            <a class="gas-block-process-steps__nav-link" href="#sample_process_steps_001-step-1" data-process-steps-nav-link data-step-index="1">
                                                                    <span class="gas-block-process-steps__nav-count" aria-hidden="true"></span>
                                                                <span class="gas-block-process-steps__nav-label-text" data-gas-field-key="sample.process_steps.steps.1.title">Stratégie</span>
                                                                    <span class="gas-block-process-steps__nav-duration" data-gas-field-key="sample.process_steps.steps.1.duration">1 - 2 semaines</span>
                                                            </a>
                        </li>
                                                                    <li class="gas-block-process-steps__nav-item">
                            <a class="gas-block-process-steps__nav-link" href="#sample_process_steps_001-step-2" data-process-steps-nav-link data-step-index="2">
                                                                    <span class="gas-block-process-steps__nav-count" aria-hidden="true"></span>
                                                                <span class="gas-block-process-steps__nav-label-text" data-gas-field-key="sample.process_steps.steps.2.title">Construction</span>
                                                                    <span class="gas-block-process-steps__nav-duration" data-gas-field-key="sample.process_steps.steps.2.duration">6 - 9 semaines</span>
                                                            </a>
                        </li>
                                                                    <li class="gas-block-process-steps__nav-item">
                            <a class="gas-block-process-steps__nav-link" href="#sample_process_steps_001-step-3" data-process-steps-nav-link data-step-index="3">
                                                                    <span class="gas-block-process-steps__nav-count" aria-hidden="true"></span>
                                                                <span class="gas-block-process-steps__nav-label-text" data-gas-field-key="sample.process_steps.steps.3.title">Lancement</span>
                                                                    <span class="gas-block-process-steps__nav-duration" data-gas-field-key="sample.process_steps.steps.3.duration">1 - 2 semaines</span>
                                                            </a>
                        </li>
                                                                    <li class="gas-block-process-steps__nav-item">
                            <a class="gas-block-process-steps__nav-link" href="#sample_process_steps_001-step-4" data-process-steps-nav-link data-step-index="4">
                                                                    <span class="gas-block-process-steps__nav-count" aria-hidden="true"></span>
                                                                <span class="gas-block-process-steps__nav-label-text" data-gas-field-key="sample.process_steps.steps.4.title">Optimisation continue</span>
                                                                    <span class="gas-block-process-steps__nav-duration" data-gas-field-key="sample.process_steps.steps.4.duration">En continu</span>
                                                            </a>
                        </li>
                                    </ul>
            </nav>
        
        <div class="gas-block-process-steps__cards" data-process-steps-cards>
                                            <article class="gas-block-process-steps__card" id="sample_process_steps_001-step-0" data-process-steps-card data-step-index="0">
                    <div class="gas-block-process-steps__card-content">
                        <header class="gas-block-process-steps__card-header">
                                                            <span class="gas-block-process-steps__card-count" aria-hidden="true"></span>
                                                        <h3 class="gas-block-process-steps__card-title" data-gas-field-key="sample.process_steps.steps.0.title">Découverte</h3>
                                                            <span class="gas-block-process-steps__card-duration" data-gas-field-key="sample.process_steps.steps.0.duration">1 - 2 semaines</span>
                                                    </header>

                                                    <p class="gas-block-process-steps__card-summary" data-gas-field-key="sample.process_steps.steps.0.summary">On apprend à se connaître avant de dessiner quoi que ce soit.</p>
                        
                                                    <div class="gas-block-process-steps__card-body" data-gas-field-key="sample.process_steps.steps.0.body">
                                <p>Entretiens avec les parties prenantes, audit de l'existant et cadrage des objectifs. Cette étape pose les bases de tout ce qui suit.</p>                            </div>
                                            </div>

                                            <div class="gas-block-process-steps__panel">
                                                            <h4 class="gas-block-process-steps__panel-title" data-gas-field-key="sample.process_steps.steps.0.deliverables_title">Ce que nous faisons</h4>
                                <ul class="gas-block-process-steps__panel-list" data-gas-field-key="sample.process_steps.steps.0.deliverables">
                                                                            <li class="gas-block-process-steps__panel-item">Entretiens parties prenantes</li>
                                                                            <li class="gas-block-process-steps__panel-item">Audit de l&#039;existant</li>
                                                                            <li class="gas-block-process-steps__panel-item">Document de cadrage</li>
                                                                    </ul>
                                                                                        <a class="gas-button gas-button--primary gas-block-process-steps__cta" href="/contact/" data-gas-field-key="sample.process_steps.steps.0.cta_label">
                                    Voir un exemple de cadrage                                </a>
                                                    </div>
                                    </article>
                                            <article class="gas-block-process-steps__card" id="sample_process_steps_001-step-1" data-process-steps-card data-step-index="1">
                    <div class="gas-block-process-steps__card-content">
                        <header class="gas-block-process-steps__card-header">
                                                            <span class="gas-block-process-steps__card-count" aria-hidden="true"></span>
                                                        <h3 class="gas-block-process-steps__card-title" data-gas-field-key="sample.process_steps.steps.1.title">Stratégie</h3>
                                                            <span class="gas-block-process-steps__card-duration" data-gas-field-key="sample.process_steps.steps.1.duration">1 - 2 semaines</span>
                                                    </header>

                                                    <p class="gas-block-process-steps__card-summary" data-gas-field-key="sample.process_steps.steps.1.summary">On transforme les constats en direction claire.</p>
                        
                                                    <div class="gas-block-process-steps__card-body" data-gas-field-key="sample.process_steps.steps.1.body">
                                <p>Définition du positionnement, de l'architecture de contenu et des priorités. Le plan qui guide la suite du projet.</p>                            </div>
                                            </div>

                                            <div class="gas-block-process-steps__panel">
                                                            <h4 class="gas-block-process-steps__panel-title" data-gas-field-key="sample.process_steps.steps.1.deliverables_title">Ce que nous faisons</h4>
                                <ul class="gas-block-process-steps__panel-list" data-gas-field-key="sample.process_steps.steps.1.deliverables">
                                                                            <li class="gas-block-process-steps__panel-item">Positionnement et messages clés</li>
                                                                            <li class="gas-block-process-steps__panel-item">Architecture de contenu</li>
                                                                            <li class="gas-block-process-steps__panel-item">Feuille de route priorisée</li>
                                                                    </ul>
                                                                                </div>
                                    </article>
                                            <article class="gas-block-process-steps__card" id="sample_process_steps_001-step-2" data-process-steps-card data-step-index="2">
                    <div class="gas-block-process-steps__card-content">
                        <header class="gas-block-process-steps__card-header">
                                                            <span class="gas-block-process-steps__card-count" aria-hidden="true"></span>
                                                        <h3 class="gas-block-process-steps__card-title" data-gas-field-key="sample.process_steps.steps.2.title">Construction</h3>
                                                            <span class="gas-block-process-steps__card-duration" data-gas-field-key="sample.process_steps.steps.2.duration">6 - 9 semaines</span>
                                                    </header>

                                                    <p class="gas-block-process-steps__card-summary" data-gas-field-key="sample.process_steps.steps.2.summary">On construit, on teste, on ajuste.</p>
                        
                                                    <div class="gas-block-process-steps__card-body" data-gas-field-key="sample.process_steps.steps.2.body">
                                <p>Développement itératif avec points d'étape réguliers. Chaque livraison est testée avant de passer à la suivante.</p><ul><li>Sprints de deux semaines</li><li>Démonstrations régulières</li></ul>                            </div>
                                            </div>

                                            <div class="gas-block-process-steps__panel">
                                                            <h4 class="gas-block-process-steps__panel-title" data-gas-field-key="sample.process_steps.steps.2.deliverables_title">Ce que nous faisons</h4>
                                <ul class="gas-block-process-steps__panel-list" data-gas-field-key="sample.process_steps.steps.2.deliverables">
                                                                            <li class="gas-block-process-steps__panel-item">Maquettes validées</li>
                                                                            <li class="gas-block-process-steps__panel-item">Développement par lots</li>
                                                                            <li class="gas-block-process-steps__panel-item">Tests de qualité continus</li>
                                                                    </ul>
                                                                                </div>
                                    </article>
                                            <article class="gas-block-process-steps__card" id="sample_process_steps_001-step-3" data-process-steps-card data-step-index="3">
                    <div class="gas-block-process-steps__card-content">
                        <header class="gas-block-process-steps__card-header">
                                                            <span class="gas-block-process-steps__card-count" aria-hidden="true"></span>
                                                        <h3 class="gas-block-process-steps__card-title" data-gas-field-key="sample.process_steps.steps.3.title">Lancement</h3>
                                                            <span class="gas-block-process-steps__card-duration" data-gas-field-key="sample.process_steps.steps.3.duration">1 - 2 semaines</span>
                                                    </header>

                                                    <p class="gas-block-process-steps__card-summary" data-gas-field-key="sample.process_steps.steps.3.summary">La mise en ligne, sans surprise.</p>
                        
                                                    <div class="gas-block-process-steps__card-body" data-gas-field-key="sample.process_steps.steps.3.body">
                                <p>Vérifications finales, migration des contenus et bascule en production accompagnée.</p>                            </div>
                                            </div>

                                            <div class="gas-block-process-steps__panel">
                                                            <h4 class="gas-block-process-steps__panel-title" data-gas-field-key="sample.process_steps.steps.3.deliverables_title">Ce que nous faisons</h4>
                                <ul class="gas-block-process-steps__panel-list" data-gas-field-key="sample.process_steps.steps.3.deliverables">
                                                                            <li class="gas-block-process-steps__panel-item">Recette finale</li>
                                                                            <li class="gas-block-process-steps__panel-item">Migration des contenus</li>
                                                                            <li class="gas-block-process-steps__panel-item">Bascule en production</li>
                                                                    </ul>
                                                                                </div>
                                    </article>
                                            <article class="gas-block-process-steps__card" id="sample_process_steps_001-step-4" data-process-steps-card data-step-index="4">
                    <div class="gas-block-process-steps__card-content">
                        <header class="gas-block-process-steps__card-header">
                                                            <span class="gas-block-process-steps__card-count" aria-hidden="true"></span>
                                                        <h3 class="gas-block-process-steps__card-title" data-gas-field-key="sample.process_steps.steps.4.title">Optimisation continue</h3>
                                                            <span class="gas-block-process-steps__card-duration" data-gas-field-key="sample.process_steps.steps.4.duration">En continu</span>
                                                    </header>

                                                    <p class="gas-block-process-steps__card-summary" data-gas-field-key="sample.process_steps.steps.4.summary">Le travail ne s&#039;arrête pas à la mise en ligne.</p>
                        
                                                    <div class="gas-block-process-steps__card-body" data-gas-field-key="sample.process_steps.steps.4.body">
                                <p>Suivi des performances, ajustements réguliers et accompagnement dans la durée pour que le site continue de progresser.</p>                            </div>
                                            </div>

                                            <div class="gas-block-process-steps__panel">
                                                            <h4 class="gas-block-process-steps__panel-title" data-gas-field-key="sample.process_steps.steps.4.deliverables_title">Ce que nous faisons</h4>
                                <ul class="gas-block-process-steps__panel-list" data-gas-field-key="sample.process_steps.steps.4.deliverables">
                                                                            <li class="gas-block-process-steps__panel-item">Suivi des indicateurs</li>
                                                                            <li class="gas-block-process-steps__panel-item">Ajustements réguliers</li>
                                                                            <li class="gas-block-process-steps__panel-item">Support continu</li>
                                                                    </ul>
                                                                                        <a class="gas-button gas-button--primary gas-block-process-steps__cta" href="/contact/" data-gas-field-key="sample.process_steps.steps.4.cta_label">
                                    Découvrir nos formules de suivi                                </a>
                                                    </div>
                                    </article>
                    </div>
    </div>
</section>
</div>

Citation `quote`

Citation mise en valeur avec son auteur. Idéal pour témoignages, paroles d'experts, extraits.

variante : default

Ce qui m'a le plus marqué, c'est la qualité d'écoute et la profondeur des échanges. J'en suis ressorti avec une perspective neuve sur mon travail et mes relations.
Marie L.

Voir le HTML rendu

<div id="pretty_quote_001" class="gas-block-anchor" data-gas-block-id="pretty_quote_001"><blockquote class="gas-block-quote gas-block-quote--default" data-block-type="quote">
    <p class="gas-block-quote__text" data-gas-field-key="sample.quote.pretty.text">Ce qui m&#039;a le plus marqué, c&#039;est la qualité d&#039;écoute et la profondeur des échanges. J&#039;en suis ressorti avec une perspective neuve sur mon travail et mes relations.</p>
    <cite class="gas-block-quote__author" data-gas-field-key="sample.quote.pretty.author">Marie L.</cite></blockquote>
</div>

variante : highlight

Ce qui m'a le plus marqué, c'est la qualité d'écoute et la profondeur des échanges. J'en suis ressorti avec une perspective neuve sur mon travail et mes relations.
Marie L.

Voir le HTML rendu

<div id="pretty_quote_001" class="gas-block-anchor" data-gas-block-id="pretty_quote_001"><blockquote class="gas-block-quote gas-block-quote--highlight" data-block-type="quote">
    <p class="gas-block-quote__text" data-gas-field-key="sample.quote.pretty.text">Ce qui m&#039;a le plus marqué, c&#039;est la qualité d&#039;écoute et la profondeur des échanges. J&#039;en suis ressorti avec une perspective neuve sur mon travail et mes relations.</p>
    <cite class="gas-block-quote__author" data-gas-field-key="sample.quote.pretty.author">Marie L.</cite></blockquote>
</div>

variante : card

Ce qui m'a le plus marqué, c'est la qualité d'écoute et la profondeur des échanges. J'en suis ressorti avec une perspective neuve sur mon travail et mes relations.
Marie L.

Voir le HTML rendu

<div id="pretty_quote_001" class="gas-block-anchor" data-gas-block-id="pretty_quote_001"><blockquote class="gas-block-quote gas-block-quote--card" data-block-type="quote">
    <p class="gas-block-quote__text" data-gas-field-key="sample.quote.pretty.text">Ce qui m&#039;a le plus marqué, c&#039;est la qualité d&#039;écoute et la profondeur des échanges. J&#039;en suis ressorti avec une perspective neuve sur mon travail et mes relations.</p>
    <cite class="gas-block-quote__author" data-gas-field-key="sample.quote.pretty.author">Marie L.</cite></blockquote>
</div>

variante : pull

Ce qui m'a le plus marqué, c'est la qualité d'écoute et la profondeur des échanges. J'en suis ressorti avec une perspective neuve sur mon travail et mes relations.
Marie L.

Voir le HTML rendu

<div id="pretty_quote_001" class="gas-block-anchor" data-gas-block-id="pretty_quote_001"><blockquote class="gas-block-quote gas-block-quote--pull" data-block-type="quote">
    <p class="gas-block-quote__text" data-gas-field-key="sample.quote.pretty.text">Ce qui m&#039;a le plus marqué, c&#039;est la qualité d&#039;écoute et la profondeur des échanges. J&#039;en suis ressorti avec une perspective neuve sur mon travail et mes relations.</p>
    <cite class="gas-block-quote__author" data-gas-field-key="sample.quote.pretty.author">Marie L.</cite></blockquote>
</div>

Fiches liées `related_entities`

Met en avant des fiches Entity Kit liées à ce contenu (ex. les musiciens dont parle un article). Références « type:slug » séparées par des virgules. La fiche affichera ce contenu dans sa section « Apparaît dans ».

Voir le HTML rendu

<div id="sample_related_entities_001" class="gas-block-anchor" data-gas-block-id="sample_related_entities_001"><section class="gas-block-related-entities" data-block-type="related_entities"><h2 class="gas-block-related-entities__heading">Fiches liées</h2><ul class="gas-block-related-entities__list"><li class="gas-block-related-entities__item"><img class="gas-block-related-entities__image" src="https://picsum.photos/seed/gas-related-entities-1/480/320" alt="Camille Rousseau" loading="lazy" /><div class="gas-block-related-entities__body"><p class="gas-block-related-entities__category">Violoncelliste</p><p class="gas-block-related-entities__title">Camille Rousseau</p><a class="gas-block-related-entities__link" href="#">Voir la fiche</a></div></li><li class="gas-block-related-entities__item"><img class="gas-block-related-entities__image" src="https://picsum.photos/seed/gas-related-entities-2/480/320" alt="Léa Fontaine" loading="lazy" /><div class="gas-block-related-entities__body"><p class="gas-block-related-entities__category">Pianiste</p><p class="gas-block-related-entities__title">Léa Fontaine</p><a class="gas-block-related-entities__link" href="#">Voir la fiche</a></div></li><li class="gas-block-related-entities__item"><img class="gas-block-related-entities__image" src="https://picsum.photos/seed/gas-related-entities-3/480/320" alt="Marc Dubois" loading="lazy" /><div class="gas-block-related-entities__body"><p class="gas-block-related-entities__category">Altiste</p><p class="gas-block-related-entities__title">Marc Dubois</p><a class="gas-block-related-entities__link" href="#">Voir la fiche</a></div></li></ul></section></div>

Phrase d'accroche `statement`

Grande phrase typographique pleine largeur avec mots colorés (tokens du design system). Idéal pour un slogan ou un manifeste.

variante : l

NOTRE MANIFESTE

Nous croyons en une parole vivante, des liens authentiques et une présence pleine et entière au monde.

Voir le HTML rendu

<div id="sample_statement_001" class="gas-block-anchor" data-gas-block-id="sample_statement_001"><section class="gas-block-statement gas-block-statement--size-l is-align-center" data-block-type="statement">
    <div class="gas-block-statement__inner">
                    <p class="gas-block-statement__eyebrow">NOTRE MANIFESTE</p>
                            <div class="gas-block-statement__text">
                <p>Nous croyons en une parole <span class="gas-rt-color--primary">vivante</span>, des liens <span class="gas-rt-color--accent">authentiques</span> et une présence pleine et entière <span class="gas-rt-color--primary">au monde</span>.</p>            </div>
            </div>
</section>
</div>

variante : xl

NOTRE MANIFESTE

Nous croyons en une parole vivante, des liens authentiques et une présence pleine et entière au monde.

Voir le HTML rendu

<div id="sample_statement_001" class="gas-block-anchor" data-gas-block-id="sample_statement_001"><section class="gas-block-statement gas-block-statement--size-xl is-align-center" data-block-type="statement">
    <div class="gas-block-statement__inner">
                    <p class="gas-block-statement__eyebrow">NOTRE MANIFESTE</p>
                            <div class="gas-block-statement__text">
                <p>Nous croyons en une parole <span class="gas-rt-color--primary">vivante</span>, des liens <span class="gas-rt-color--accent">authentiques</span> et une présence pleine et entière <span class="gas-rt-color--primary">au monde</span>.</p>            </div>
            </div>
</section>
</div>

variante : display

NOTRE MANIFESTE

Nous croyons en une parole vivante, des liens authentiques et une présence pleine et entière au monde.

Voir le HTML rendu

<div id="sample_statement_001" class="gas-block-anchor" data-gas-block-id="sample_statement_001"><section class="gas-block-statement gas-block-statement--size-display is-align-center" data-block-type="statement">
    <div class="gas-block-statement__inner">
                    <p class="gas-block-statement__eyebrow">NOTRE MANIFESTE</p>
                            <div class="gas-block-statement__text">
                <p>Nous croyons en une parole <span class="gas-rt-color--primary">vivante</span>, des liens <span class="gas-rt-color--accent">authentiques</span> et une présence pleine et entière <span class="gas-rt-color--primary">au monde</span>.</p>            </div>
            </div>
</section>
</div>

variante : default

NOTRE MANIFESTE

Nous croyons en une parole vivante, des liens authentiques et une présence pleine et entière au monde.

Voir le HTML rendu

<div id="sample_statement_001" class="gas-block-anchor" data-gas-block-id="sample_statement_001"><section class="gas-block-statement gas-block-statement--size-display is-align-center" data-block-type="statement">
    <div class="gas-block-statement__inner">
                    <p class="gas-block-statement__eyebrow">NOTRE MANIFESTE</p>
                            <div class="gas-block-statement__text">
                <p>Nous croyons en une parole <span class="gas-rt-color--primary">vivante</span>, des liens <span class="gas-rt-color--accent">authentiques</span> et une présence pleine et entière <span class="gas-rt-color--primary">au monde</span>.</p>            </div>
            </div>
</section>
</div>

Récit au défilement `sticky_story`

Scrollytelling : média épinglé + étapes qui s'activent au fil du scroll, avec image changeante par étape (crossfade). Layouts split (deux colonnes) ou overlay (cartes par-dessus le média plein écran).

variante : media

Votre parcours

Devenir membre, pas à pas

De la découverte à l'engagement : voici comment rejoindre l'association, à votre rythme.

Praticiens réunis lors d'une rencontre de l'association

Étape 1

Découvrir

Assistez à un évènement public ou parcourez nos ressources en libre accès pour sentir l'esprit de l'association.

Étape 2

Rencontrer

Échangez avec des membres lors d'une rencontre régionale : posez vos questions, faites-vous une idée concrète.

Étape 3

Adhérer

Choisissez la formule qui vous correspond et rejoignez la communauté en quelques minutes.

Étape 4

Participer

Accédez aux formations, aux groupes de pratique et aux évènements réservés aux membres.

Devenir membre

Voir le HTML rendu

<div id="sample_sticky_story_001" class="gas-block-anchor" data-gas-block-id="sample_sticky_story_001"><section
    class="gas-block-sticky-story gas-block-sticky-story--layout-split gas-block-sticky-story--media-left gas-block-sticky-story--style-plain gas-block-sticky-story--transition-crossfade gas-block-sticky-story--offset-default gas-block-sticky-story--mobile-media-top gas-block-sticky-story--progress-dots gas-block-sticky-story--frame-shadow"
    data-block-type="sticky_story"
    data-gas-block-enhancer="sticky_story"
    data-active-step="0"
>
        <header class="gas-block-sticky-story__header">
        <p class="gas-block-sticky-story__eyebrow" data-gas-field-key="sample.sticky_story.eyebrow">Votre parcours</p>        <h2 class="gas-block-sticky-story__title" data-gas-field-key="sample.sticky_story.title">Devenir membre, pas à pas</h2>        <div class="gas-block-sticky-story__intro" data-gas-field-key="sample.sticky_story.intro"><p>De la découverte à l'engagement : voici comment rejoindre l'association, à votre rythme.</p></div>    </header>
    
    <div class="gas-block-sticky-story__scene">
                <div class="gas-block-sticky-story__media">
            <div class="gas-block-sticky-story__layers">
                                <figure
                    class="gas-block-sticky-story__layer is-current"
                    data-story-layer="0"
                                    ><img class="gas-block-sticky-story__image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Praticiens réunis lors d&#039;une rencontre de l&#039;association" decoding="async" /></figure>
                                <figure
                    class="gas-block-sticky-story__layer"
                    data-story-layer="1"
                    aria-hidden="true"                ><img class="gas-block-sticky-story__image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Évènement public de découverte" loading="lazy" decoding="async" /></figure>
                                <figure
                    class="gas-block-sticky-story__layer"
                    data-story-layer="2"
                    aria-hidden="true"                ><img class="gas-block-sticky-story__image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Rencontre régionale entre membres" loading="lazy" decoding="async" /></figure>
                                <figure
                    class="gas-block-sticky-story__layer"
                    data-story-layer="3"
                    aria-hidden="true"                ><img class="gas-block-sticky-story__image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="" loading="lazy" decoding="async" /></figure>
                                <figure
                    class="gas-block-sticky-story__layer"
                    data-story-layer="4"
                    aria-hidden="true"                ><img class="gas-block-sticky-story__image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Atelier de pratique entre membres" loading="lazy" decoding="async" /></figure>
                            </div>
                        <div class="gas-block-sticky-story__progress gas-block-sticky-story__progress--dots" aria-hidden="true">
                                <span class="gas-block-sticky-story__dot is-active" data-story-dot="0"></span>
                                <span class="gas-block-sticky-story__dot" data-story-dot="1"></span>
                                <span class="gas-block-sticky-story__dot" data-story-dot="2"></span>
                                <span class="gas-block-sticky-story__dot" data-story-dot="3"></span>
                            </div>
                    </div>
        
        <div class="gas-block-sticky-story__steps">
                                    <article
                class="gas-block-sticky-story__step is-active"
                id="sample_sticky_story_001-story-step-1"
                style="--gas-story-i:0"
                data-story-step="0"
                data-story-layer-target="1"
                aria-current="step"            >
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.0.kicker">Étape 1</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.0.title">Découvrir</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.0.text"><p>Assistez à un évènement public ou parcourez nos ressources en libre accès pour sentir l'esprit de l'association.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Évènement public de découverte" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                        <article
                class="gas-block-sticky-story__step"
                id="sample_sticky_story_001-story-step-2"
                style="--gas-story-i:1"
                data-story-step="1"
                data-story-layer-target="2"
                            >
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.1.kicker">Étape 2</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.1.title">Rencontrer</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.1.text"><p>Échangez avec des membres lors d'une rencontre régionale : posez vos questions, faites-vous une idée concrète.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Rencontre régionale entre membres" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                        <article
                class="gas-block-sticky-story__step"
                id="sample_sticky_story_001-story-step-3"
                style="--gas-story-i:2"
                data-story-step="2"
                data-story-layer-target="3"
                            >
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.2.kicker">Étape 3</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.2.title">Adhérer</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.2.text"><p>Choisissez la formule qui vous correspond et rejoignez la communauté en quelques minutes.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                        <article
                class="gas-block-sticky-story__step"
                id="sample_sticky_story_001-story-step-4"
                style="--gas-story-i:3"
                data-story-step="3"
                data-story-layer-target="4"
                            >
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.3.kicker">Étape 4</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.3.title">Participer</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.3.text"><p>Accédez aux formations, aux groupes de pratique et aux évènements réservés aux membres.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Atelier de pratique entre membres" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                    </div>
    </div>

        <div class="gas-block-sticky-story__footer">
        <a class="gas-button gas-button--primary gas-button--l" href="/contact/" data-gas-field-key="sample.sticky_story.cta_label">Devenir membre</a>
    </div>
    </section>
</div>

variante : media_overlay

Votre parcours

Devenir membre, pas à pas

De la découverte à l'engagement : voici comment rejoindre l'association, à votre rythme.

Étape 1

Découvrir

Assistez à un évènement public ou parcourez nos ressources en libre accès pour sentir l'esprit de l'association.

Étape 2

Rencontrer

Échangez avec des membres lors d'une rencontre régionale : posez vos questions, faites-vous une idée concrète.

Étape 3

Adhérer

Choisissez la formule qui vous correspond et rejoignez la communauté en quelques minutes.

Étape 4

Participer

Accédez aux formations, aux groupes de pratique et aux évènements réservés aux membres.

Devenir membre

Voir le HTML rendu

<div id="sample_sticky_story_001" class="gas-block-anchor" data-gas-block-id="sample_sticky_story_001"><section
    class="gas-block-sticky-story gas-block-sticky-story--layout-overlay gas-block-sticky-story--media-left gas-block-sticky-story--style-card gas-block-sticky-story--transition-crossfade gas-block-sticky-story--offset-default gas-block-sticky-story--mobile-media-top gas-block-sticky-story--progress-dots"
    data-block-type="sticky_story"
    data-gas-block-enhancer="sticky_story"
    data-active-step="0"
>
        <header class="gas-block-sticky-story__header">
        <p class="gas-block-sticky-story__eyebrow" data-gas-field-key="sample.sticky_story.eyebrow">Votre parcours</p>        <h2 class="gas-block-sticky-story__title" data-gas-field-key="sample.sticky_story.title">Devenir membre, pas à pas</h2>        <div class="gas-block-sticky-story__intro" data-gas-field-key="sample.sticky_story.intro"><p>De la découverte à l'engagement : voici comment rejoindre l'association, à votre rythme.</p></div>    </header>
    
    <div class="gas-block-sticky-story__scene">
                <div class="gas-block-sticky-story__media">
            <div class="gas-block-sticky-story__layers">
                                <figure
                    class="gas-block-sticky-story__layer is-current"
                    data-story-layer="0"
                                    ><img class="gas-block-sticky-story__image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Praticiens réunis lors d&#039;une rencontre de l&#039;association" decoding="async" /></figure>
                                <figure
                    class="gas-block-sticky-story__layer"
                    data-story-layer="1"
                    aria-hidden="true"                ><img class="gas-block-sticky-story__image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Évènement public de découverte" loading="lazy" decoding="async" /></figure>
                                <figure
                    class="gas-block-sticky-story__layer"
                    data-story-layer="2"
                    aria-hidden="true"                ><img class="gas-block-sticky-story__image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Rencontre régionale entre membres" loading="lazy" decoding="async" /></figure>
                                <figure
                    class="gas-block-sticky-story__layer"
                    data-story-layer="3"
                    aria-hidden="true"                ><img class="gas-block-sticky-story__image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="" loading="lazy" decoding="async" /></figure>
                                <figure
                    class="gas-block-sticky-story__layer"
                    data-story-layer="4"
                    aria-hidden="true"                ><img class="gas-block-sticky-story__image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Atelier de pratique entre membres" loading="lazy" decoding="async" /></figure>
                            </div>
                        <div class="gas-block-sticky-story__progress gas-block-sticky-story__progress--dots" aria-hidden="true">
                                <span class="gas-block-sticky-story__dot is-active" data-story-dot="0"></span>
                                <span class="gas-block-sticky-story__dot" data-story-dot="1"></span>
                                <span class="gas-block-sticky-story__dot" data-story-dot="2"></span>
                                <span class="gas-block-sticky-story__dot" data-story-dot="3"></span>
                            </div>
                    </div>
        
        <div class="gas-block-sticky-story__steps">
                                    <article
                class="gas-block-sticky-story__step is-active"
                id="sample_sticky_story_001-story-step-1"
                style="--gas-story-i:0"
                data-story-step="0"
                data-story-layer-target="1"
                aria-current="step"            >
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.0.kicker">Étape 1</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.0.title">Découvrir</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.0.text"><p>Assistez à un évènement public ou parcourez nos ressources en libre accès pour sentir l'esprit de l'association.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Évènement public de découverte" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                        <article
                class="gas-block-sticky-story__step"
                id="sample_sticky_story_001-story-step-2"
                style="--gas-story-i:1"
                data-story-step="1"
                data-story-layer-target="2"
                            >
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.1.kicker">Étape 2</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.1.title">Rencontrer</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.1.text"><p>Échangez avec des membres lors d'une rencontre régionale : posez vos questions, faites-vous une idée concrète.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Rencontre régionale entre membres" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                        <article
                class="gas-block-sticky-story__step"
                id="sample_sticky_story_001-story-step-3"
                style="--gas-story-i:2"
                data-story-step="2"
                data-story-layer-target="3"
                            >
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.2.kicker">Étape 3</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.2.title">Adhérer</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.2.text"><p>Choisissez la formule qui vous correspond et rejoignez la communauté en quelques minutes.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                        <article
                class="gas-block-sticky-story__step"
                id="sample_sticky_story_001-story-step-4"
                style="--gas-story-i:3"
                data-story-step="3"
                data-story-layer-target="4"
                            >
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.3.kicker">Étape 4</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.3.title">Participer</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.3.text"><p>Accédez aux formations, aux groupes de pratique et aux évènements réservés aux membres.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Atelier de pratique entre membres" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                    </div>
    </div>

        <div class="gas-block-sticky-story__footer">
        <a class="gas-button gas-button--primary gas-button--l" href="/contact/" data-gas-field-key="sample.sticky_story.cta_label">Devenir membre</a>
    </div>
    </section>
</div>

variante : phrase

Votre parcours

Devenir membre, pas à pas

De la découverte à l'engagement : voici comment rejoindre l'association, à votre rythme.

Devenir membre, pas à pas

Étape 1

Découvrir

Assistez à un évènement public ou parcourez nos ressources en libre accès pour sentir l'esprit de l'association.

Étape 2

Rencontrer

Échangez avec des membres lors d'une rencontre régionale : posez vos questions, faites-vous une idée concrète.

Étape 3

Adhérer

Choisissez la formule qui vous correspond et rejoignez la communauté en quelques minutes.

Étape 4

Participer

Accédez aux formations, aux groupes de pratique et aux évènements réservés aux membres.

Devenir membre

Voir le HTML rendu

<div id="sample_sticky_story_001" class="gas-block-anchor" data-gas-block-id="sample_sticky_story_001"><section
    class="gas-block-sticky-story gas-block-sticky-story--layout-phrase gas-block-sticky-story--media-left gas-block-sticky-story--style-plain gas-block-sticky-story--transition-crossfade gas-block-sticky-story--offset-default gas-block-sticky-story--mobile-media-top gas-block-sticky-story--progress-dots"
    data-block-type="sticky_story"
    data-gas-block-enhancer="sticky_story"
    data-active-step="0"
>
        <header class="gas-block-sticky-story__header">
        <p class="gas-block-sticky-story__eyebrow" data-gas-field-key="sample.sticky_story.eyebrow">Votre parcours</p>        <h2 class="gas-block-sticky-story__title" data-gas-field-key="sample.sticky_story.title">Devenir membre, pas à pas</h2>        <div class="gas-block-sticky-story__intro" data-gas-field-key="sample.sticky_story.intro"><p>De la découverte à l'engagement : voici comment rejoindre l'association, à votre rythme.</p></div>    </header>
    
    <div class="gas-block-sticky-story__scene">
                <div class="gas-block-sticky-story__media">
            <div class="gas-block-sticky-story__layers">
                                <figure
                    class="gas-block-sticky-story__layer is-current"
                    data-story-layer="0"
                                    ><span class="gas-block-sticky-story__phrase-text">Devenir membre, pas à pas</span></figure>
                                <figure
                    class="gas-block-sticky-story__layer"
                    data-story-layer="1"
                    aria-hidden="true"                ><span class="gas-block-sticky-story__phrase-text">Découvrir</span></figure>
                                <figure
                    class="gas-block-sticky-story__layer"
                    data-story-layer="2"
                    aria-hidden="true"                ><span class="gas-block-sticky-story__phrase-text">Rencontrer</span></figure>
                                <figure
                    class="gas-block-sticky-story__layer"
                    data-story-layer="3"
                    aria-hidden="true"                ><span class="gas-block-sticky-story__phrase-text">Adhérer</span></figure>
                                <figure
                    class="gas-block-sticky-story__layer"
                    data-story-layer="4"
                    aria-hidden="true"                ><span class="gas-block-sticky-story__phrase-text">Participer</span></figure>
                            </div>
                        <div class="gas-block-sticky-story__progress gas-block-sticky-story__progress--dots" aria-hidden="true">
                                <span class="gas-block-sticky-story__dot is-active" data-story-dot="0"></span>
                                <span class="gas-block-sticky-story__dot" data-story-dot="1"></span>
                                <span class="gas-block-sticky-story__dot" data-story-dot="2"></span>
                                <span class="gas-block-sticky-story__dot" data-story-dot="3"></span>
                            </div>
                    </div>
        
        <div class="gas-block-sticky-story__steps">
                                    <article
                class="gas-block-sticky-story__step is-active"
                id="sample_sticky_story_001-story-step-1"
                style="--gas-story-i:0"
                data-story-step="0"
                data-story-layer-target="1"
                aria-current="step"            >
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.0.kicker">Étape 1</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.0.title">Découvrir</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.0.text"><p>Assistez à un évènement public ou parcourez nos ressources en libre accès pour sentir l'esprit de l'association.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Évènement public de découverte" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                        <article
                class="gas-block-sticky-story__step"
                id="sample_sticky_story_001-story-step-2"
                style="--gas-story-i:1"
                data-story-step="1"
                data-story-layer-target="2"
                            >
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.1.kicker">Étape 2</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.1.title">Rencontrer</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.1.text"><p>Échangez avec des membres lors d'une rencontre régionale : posez vos questions, faites-vous une idée concrète.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Rencontre régionale entre membres" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                        <article
                class="gas-block-sticky-story__step"
                id="sample_sticky_story_001-story-step-3"
                style="--gas-story-i:2"
                data-story-step="2"
                data-story-layer-target="3"
                            >
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.2.kicker">Étape 3</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.2.title">Adhérer</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.2.text"><p>Choisissez la formule qui vous correspond et rejoignez la communauté en quelques minutes.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                        <article
                class="gas-block-sticky-story__step"
                id="sample_sticky_story_001-story-step-4"
                style="--gas-story-i:3"
                data-story-step="3"
                data-story-layer-target="4"
                            >
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.3.kicker">Étape 4</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.3.title">Participer</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.3.text"><p>Accédez aux formations, aux groupes de pratique et aux évènements réservés aux membres.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Atelier de pratique entre membres" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                    </div>
    </div>

        <div class="gas-block-sticky-story__footer">
        <a class="gas-button gas-button--primary gas-button--l" href="/contact/" data-gas-field-key="sample.sticky_story.cta_label">Devenir membre</a>
    </div>
    </section>
</div>

variante : timeline

Votre parcours

Devenir membre, pas à pas

De la découverte à l'engagement : voici comment rejoindre l'association, à votre rythme.

Étape 1

Découvrir

Assistez à un évènement public ou parcourez nos ressources en libre accès pour sentir l'esprit de l'association.

Étape 2

Rencontrer

Échangez avec des membres lors d'une rencontre régionale : posez vos questions, faites-vous une idée concrète.

Étape 3

Adhérer

Choisissez la formule qui vous correspond et rejoignez la communauté en quelques minutes.

Étape 4

Participer

Accédez aux formations, aux groupes de pratique et aux évènements réservés aux membres.

Devenir membre

Voir le HTML rendu

<div id="sample_sticky_story_001" class="gas-block-anchor" data-gas-block-id="sample_sticky_story_001"><section
    class="gas-block-sticky-story gas-block-sticky-story--layout-timeline gas-block-sticky-story--media-left gas-block-sticky-story--style-plain gas-block-sticky-story--transition-crossfade gas-block-sticky-story--offset-default gas-block-sticky-story--mobile-media-top gas-block-sticky-story--progress-none"
    data-block-type="sticky_story"
    data-gas-block-enhancer="sticky_story"
    data-active-step="0"
>
        <header class="gas-block-sticky-story__header">
        <p class="gas-block-sticky-story__eyebrow" data-gas-field-key="sample.sticky_story.eyebrow">Votre parcours</p>        <h2 class="gas-block-sticky-story__title" data-gas-field-key="sample.sticky_story.title">Devenir membre, pas à pas</h2>        <div class="gas-block-sticky-story__intro" data-gas-field-key="sample.sticky_story.intro"><p>De la découverte à l'engagement : voici comment rejoindre l'association, à votre rythme.</p></div>    </header>
    
    <div class="gas-block-sticky-story__scene">
        
        <div class="gas-block-sticky-story__steps">
                        <span class="gas-block-sticky-story__rail" aria-hidden="true"><span class="gas-block-sticky-story__rail-fill"></span></span>
                                    <article
                class="gas-block-sticky-story__step is-active"
                id="sample_sticky_story_001-story-step-1"
                style="--gas-story-i:0"
                data-story-step="0"
                data-story-layer-target="0"
                aria-current="step"            >
                                <span class="gas-block-sticky-story__marker" aria-hidden="true"></span>
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.0.kicker">Étape 1</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.0.title">Découvrir</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.0.text"><p>Assistez à un évènement public ou parcourez nos ressources en libre accès pour sentir l'esprit de l'association.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Évènement public de découverte" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                        <article
                class="gas-block-sticky-story__step"
                id="sample_sticky_story_001-story-step-2"
                style="--gas-story-i:1"
                data-story-step="1"
                data-story-layer-target="0"
                            >
                                <span class="gas-block-sticky-story__marker" aria-hidden="true"></span>
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.1.kicker">Étape 2</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.1.title">Rencontrer</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.1.text"><p>Échangez avec des membres lors d'une rencontre régionale : posez vos questions, faites-vous une idée concrète.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Rencontre régionale entre membres" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                        <article
                class="gas-block-sticky-story__step"
                id="sample_sticky_story_001-story-step-3"
                style="--gas-story-i:2"
                data-story-step="2"
                data-story-layer-target="0"
                            >
                                <span class="gas-block-sticky-story__marker" aria-hidden="true"></span>
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.2.kicker">Étape 3</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.2.title">Adhérer</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.2.text"><p>Choisissez la formule qui vous correspond et rejoignez la communauté en quelques minutes.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                        <article
                class="gas-block-sticky-story__step"
                id="sample_sticky_story_001-story-step-4"
                style="--gas-story-i:3"
                data-story-step="3"
                data-story-layer-target="0"
                            >
                                <span class="gas-block-sticky-story__marker" aria-hidden="true"></span>
                                <div class="gas-block-sticky-story__step-body">
                    <p class="gas-block-sticky-story__step-kicker" data-gas-field-key="sample.sticky_story.steps.3.kicker">Étape 4</p>                    <h3 class="gas-block-sticky-story__step-title" data-gas-field-key="sample.sticky_story.steps.3.title">Participer</h3>                    <div class="gas-block-sticky-story__step-text" data-gas-field-key="sample.sticky_story.steps.3.text"><p>Accédez aux formations, aux groupes de pratique et aux évènements réservés aux membres.</p></div>                                                            <figure class="gas-block-sticky-story__step-inline-media"><img class="gas-block-sticky-story__step-inline-image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Atelier de pratique entre membres" loading="lazy" decoding="async" /></figure>
                                                        </div>
            </article>
                    </div>
    </div>

        <div class="gas-block-sticky-story__footer">
        <a class="gas-button gas-button--primary gas-button--l" href="/contact/" data-gas-field-key="sample.sticky_story.cta_label">Devenir membre</a>
    </div>
    </section>
</div>

Colonnes de tags `tag_columns`

Panneau statique de colonnes de tags-pills de navigation (2 à 4 colonnes titrées, tags = liens curatés). Navigation éditoriale, pas un filtre dynamique. Sans JavaScript.

Par catégorie

Par besoin

Par usage

Voir le HTML rendu

<div id="sample_tag_columns_001" class="gas-block-anchor" data-gas-block-id="sample_tag_columns_001"><section class="gas-block-tag-columns gas-block-tag-columns--cols-3" data-block-type="tag_columns">
    <div class="gas-block-tag-columns__inner">
                    <header class="gas-block-tag-columns__header">
                                    <h2 class="gas-block-tag-columns__title">Trouvez le bon produit</h2>
                                                    <p class="gas-block-tag-columns__subtitle">Explorez le catalogue par catégorie, besoin ou usage.</p>
                            </header>
                <nav class="gas-block-tag-columns__columns" aria-label="Trouvez le bon produit">
                            <div class="gas-block-tag-columns__column">
                                            <h3 class="gas-block-tag-columns__col-title">Par catégorie</h3>
                                                                <ul class="gas-block-tag-columns__tags">
                                                            <li class="gas-block-tag-columns__tag-item">
                                                                            <a class="gas-block-tag-columns__tag" href="/boutique/ordinateurs/">Ordinateurs</a>
                                                                    </li>
                                                            <li class="gas-block-tag-columns__tag-item">
                                                                            <a class="gas-block-tag-columns__tag" href="/boutique/ecrans/">Écrans</a>
                                                                    </li>
                                                            <li class="gas-block-tag-columns__tag-item">
                                                                            <a class="gas-block-tag-columns__tag" href="/boutique/accessoires/">Accessoires</a>
                                                                    </li>
                                                    </ul>
                                    </div>
                            <div class="gas-block-tag-columns__column">
                                            <h3 class="gas-block-tag-columns__col-title">Par besoin</h3>
                                                                <ul class="gas-block-tag-columns__tags">
                                                            <li class="gas-block-tag-columns__tag-item">
                                                                            <a class="gas-block-tag-columns__tag" href="/boutique/teletravail/">Télétravail</a>
                                                                    </li>
                                                            <li class="gas-block-tag-columns__tag-item">
                                                                            <a class="gas-block-tag-columns__tag" href="/boutique/creation/">Création</a>
                                                                    </li>
                                                            <li class="gas-block-tag-columns__tag-item">
                                                                            <a class="gas-block-tag-columns__tag" href="/boutique/bureautique/">Bureautique</a>
                                                                    </li>
                                                    </ul>
                                    </div>
                            <div class="gas-block-tag-columns__column">
                                            <h3 class="gas-block-tag-columns__col-title">Par usage</h3>
                                                                <ul class="gas-block-tag-columns__tags">
                                                            <li class="gas-block-tag-columns__tag-item">
                                                                            <a class="gas-block-tag-columns__tag" href="/boutique/debutant/">Débutant</a>
                                                                    </li>
                                                            <li class="gas-block-tag-columns__tag-item">
                                                                            <a class="gas-block-tag-columns__tag" href="/boutique/intensif/">Intensif</a>
                                                                    </li>
                                                    </ul>
                                    </div>
                    </nav>
    </div>
</section>
</div>

Texte riche `text`

Paragraphe(s) de contenu avec titre optionnel et formatage HTML limité (gras, italique, liens, listes).

variante : plain

L'art de bien penser

Le bloc text est la brique éditoriale fondamentale. Il accepte du HTML riche : titres, paragraphes, listes, liens, citations en ligne, et même des images inline si tu le souhaites.

Sous-titre niveau 2

Avec une largeur default, le texte reste lisible (max ~65ch). Pour des articles longs, c'est le réglage par défaut idéal.

Liste à puces accessible
Avec des éléments multiples
Et un lien interne

Une citation pour illustrer le rendu typographique.

Voir le HTML rendu

<div id="pretty_text_001" class="gas-block-anchor" data-gas-block-id="pretty_text_001"><section class="gas-block-text gas-block-text--default gas-block-text--plain gas-block-text--align-left gas-block-text--cols-1" data-block-type="text">
    <div class="gas-block-text__inner">
                    <h2 class="gas-block-text__title" data-gas-field-key="sample.text.pretty.title">L&#039;art de bien penser</h2>
        
                    <div class="gas-block-text__content" data-gas-field-key="sample.text.pretty.content">
                <p>Le bloc <strong>text</strong> est la brique éditoriale fondamentale. Il accepte du HTML riche : titres, paragraphes, listes, liens, citations en ligne, et même des images inline si tu le souhaites.</p><h2>Sous-titre niveau 2</h2><p>Avec une largeur <code>default</code>, le texte reste lisible (max ~65ch). Pour des articles longs, c'est le réglage par défaut idéal.</p><ul><li>Liste à puces accessible</li><li>Avec des éléments multiples</li><li>Et un <a href="#">lien interne</a></li></ul><blockquote>Une citation pour illustrer le rendu typographique.</blockquote>            </div>
            </div>
</section>
</div>

variante : card

L'art de bien penser

Le bloc text est la brique éditoriale fondamentale. Il accepte du HTML riche : titres, paragraphes, listes, liens, citations en ligne, et même des images inline si tu le souhaites.

Sous-titre niveau 2

Avec une largeur default, le texte reste lisible (max ~65ch). Pour des articles longs, c'est le réglage par défaut idéal.

Liste à puces accessible
Avec des éléments multiples
Et un lien interne

Une citation pour illustrer le rendu typographique.

Voir le HTML rendu

<div id="pretty_text_001" class="gas-block-anchor" data-gas-block-id="pretty_text_001"><section class="gas-block-text gas-block-text--default gas-block-text--card gas-block-text--align-left gas-block-text--cols-1" data-block-type="text">
    <div class="gas-block-text__inner">
                    <h2 class="gas-block-text__title" data-gas-field-key="sample.text.pretty.title">L&#039;art de bien penser</h2>
        
                    <div class="gas-block-text__content" data-gas-field-key="sample.text.pretty.content">
                <p>Le bloc <strong>text</strong> est la brique éditoriale fondamentale. Il accepte du HTML riche : titres, paragraphes, listes, liens, citations en ligne, et même des images inline si tu le souhaites.</p><h2>Sous-titre niveau 2</h2><p>Avec une largeur <code>default</code>, le texte reste lisible (max ~65ch). Pour des articles longs, c'est le réglage par défaut idéal.</p><ul><li>Liste à puces accessible</li><li>Avec des éléments multiples</li><li>Et un <a href="#">lien interne</a></li></ul><blockquote>Une citation pour illustrer le rendu typographique.</blockquote>            </div>
            </div>
</section>
</div>

variante : highlight

L'art de bien penser

Le bloc text est la brique éditoriale fondamentale. Il accepte du HTML riche : titres, paragraphes, listes, liens, citations en ligne, et même des images inline si tu le souhaites.

Sous-titre niveau 2

Avec une largeur default, le texte reste lisible (max ~65ch). Pour des articles longs, c'est le réglage par défaut idéal.

Liste à puces accessible
Avec des éléments multiples
Et un lien interne

Une citation pour illustrer le rendu typographique.

Voir le HTML rendu

<div id="pretty_text_001" class="gas-block-anchor" data-gas-block-id="pretty_text_001"><section class="gas-block-text gas-block-text--default gas-block-text--highlight gas-block-text--align-left gas-block-text--cols-1" data-block-type="text">
    <div class="gas-block-text__inner">
                    <h2 class="gas-block-text__title" data-gas-field-key="sample.text.pretty.title">L&#039;art de bien penser</h2>
        
                    <div class="gas-block-text__content" data-gas-field-key="sample.text.pretty.content">
                <p>Le bloc <strong>text</strong> est la brique éditoriale fondamentale. Il accepte du HTML riche : titres, paragraphes, listes, liens, citations en ligne, et même des images inline si tu le souhaites.</p><h2>Sous-titre niveau 2</h2><p>Avec une largeur <code>default</code>, le texte reste lisible (max ~65ch). Pour des articles longs, c'est le réglage par défaut idéal.</p><ul><li>Liste à puces accessible</li><li>Avec des éléments multiples</li><li>Et un <a href="#">lien interne</a></li></ul><blockquote>Une citation pour illustrer le rendu typographique.</blockquote>            </div>
            </div>
</section>
</div>

Frise chronologique `timeline`

Étapes successives reliées par une ligne (process, roadmap, parcours).

variante : vertical

Comment ça marche

Quatre étapes simples pour démarrer.

Étape 1
Créez votre compte

Inscription en deux minutes, sans carte bancaire.
Étape 2
Complétez votre profil

Ajoutez vos informations et vos préférences.
Étape 3
Explorez les activités

Parcourez le catalogue et réservez en un clic.
Étape 4
Profitez

Accédez à tout votre espace membre.

Voir le HTML rendu

<div id="sample_timeline_001" class="gas-block-anchor" data-gas-block-id="sample_timeline_001"><section class="gas-block-timeline gas-block-timeline--vertical" data-block-type="timeline">
    <div class="gas-block-timeline__inner">
                    <h2 class="gas-block-timeline__title" data-gas-field-key="sample.timeline.title">Comment ça marche</h2>
                            <p class="gas-block-timeline__subtitle" data-gas-field-key="sample.timeline.subtitle">Quatre étapes simples pour démarrer.</p>
        
        <ol class="gas-block-timeline__list">
                                            <li class="gas-block-timeline__item">
                    <span class="gas-block-timeline__dot" aria-hidden="true">1</span>
                    <div class="gas-block-timeline__body">
                                                    <span class="gas-block-timeline__marker" data-gas-field-key="sample.timeline.items.0.marker">Étape 1</span>
                                                                            <h3 class="gas-block-timeline__item-title" data-gas-field-key="sample.timeline.items.0.title">Créez votre compte</h3>
                                                                            <p class="gas-block-timeline__item-text" data-gas-field-key="sample.timeline.items.0.content">Inscription en deux minutes, sans carte bancaire.</p>
                                            </div>
                </li>
                                            <li class="gas-block-timeline__item">
                    <span class="gas-block-timeline__dot" aria-hidden="true">2</span>
                    <div class="gas-block-timeline__body">
                                                    <span class="gas-block-timeline__marker" data-gas-field-key="sample.timeline.items.1.marker">Étape 2</span>
                                                                            <h3 class="gas-block-timeline__item-title" data-gas-field-key="sample.timeline.items.1.title">Complétez votre profil</h3>
                                                                            <p class="gas-block-timeline__item-text" data-gas-field-key="sample.timeline.items.1.content">Ajoutez vos informations et vos préférences.</p>
                                            </div>
                </li>
                                            <li class="gas-block-timeline__item">
                    <span class="gas-block-timeline__dot" aria-hidden="true">3</span>
                    <div class="gas-block-timeline__body">
                                                    <span class="gas-block-timeline__marker" data-gas-field-key="sample.timeline.items.2.marker">Étape 3</span>
                                                                            <h3 class="gas-block-timeline__item-title" data-gas-field-key="sample.timeline.items.2.title">Explorez les activités</h3>
                                                                            <p class="gas-block-timeline__item-text" data-gas-field-key="sample.timeline.items.2.content">Parcourez le catalogue et réservez en un clic.</p>
                                            </div>
                </li>
                                            <li class="gas-block-timeline__item">
                    <span class="gas-block-timeline__dot" aria-hidden="true">4</span>
                    <div class="gas-block-timeline__body">
                                                    <span class="gas-block-timeline__marker" data-gas-field-key="sample.timeline.items.3.marker">Étape 4</span>
                                                                            <h3 class="gas-block-timeline__item-title" data-gas-field-key="sample.timeline.items.3.title">Profitez</h3>
                                                                            <p class="gas-block-timeline__item-text" data-gas-field-key="sample.timeline.items.3.content">Accédez à tout votre espace membre.</p>
                                            </div>
                </li>
                    </ol>
    </div>
</section>
</div>

variante : alternating

Comment ça marche

Quatre étapes simples pour démarrer.

Étape 1
Créez votre compte

Inscription en deux minutes, sans carte bancaire.
Étape 2
Complétez votre profil

Ajoutez vos informations et vos préférences.
Étape 3
Explorez les activités

Parcourez le catalogue et réservez en un clic.
Étape 4
Profitez

Accédez à tout votre espace membre.

Voir le HTML rendu

<div id="sample_timeline_001" class="gas-block-anchor" data-gas-block-id="sample_timeline_001"><section class="gas-block-timeline gas-block-timeline--alternating" data-block-type="timeline">
    <div class="gas-block-timeline__inner">
                    <h2 class="gas-block-timeline__title" data-gas-field-key="sample.timeline.title">Comment ça marche</h2>
                            <p class="gas-block-timeline__subtitle" data-gas-field-key="sample.timeline.subtitle">Quatre étapes simples pour démarrer.</p>
        
        <ol class="gas-block-timeline__list">
                                            <li class="gas-block-timeline__item">
                    <span class="gas-block-timeline__dot" aria-hidden="true">1</span>
                    <div class="gas-block-timeline__body">
                                                    <span class="gas-block-timeline__marker" data-gas-field-key="sample.timeline.items.0.marker">Étape 1</span>
                                                                            <h3 class="gas-block-timeline__item-title" data-gas-field-key="sample.timeline.items.0.title">Créez votre compte</h3>
                                                                            <p class="gas-block-timeline__item-text" data-gas-field-key="sample.timeline.items.0.content">Inscription en deux minutes, sans carte bancaire.</p>
                                            </div>
                </li>
                                            <li class="gas-block-timeline__item">
                    <span class="gas-block-timeline__dot" aria-hidden="true">2</span>
                    <div class="gas-block-timeline__body">
                                                    <span class="gas-block-timeline__marker" data-gas-field-key="sample.timeline.items.1.marker">Étape 2</span>
                                                                            <h3 class="gas-block-timeline__item-title" data-gas-field-key="sample.timeline.items.1.title">Complétez votre profil</h3>
                                                                            <p class="gas-block-timeline__item-text" data-gas-field-key="sample.timeline.items.1.content">Ajoutez vos informations et vos préférences.</p>
                                            </div>
                </li>
                                            <li class="gas-block-timeline__item">
                    <span class="gas-block-timeline__dot" aria-hidden="true">3</span>
                    <div class="gas-block-timeline__body">
                                                    <span class="gas-block-timeline__marker" data-gas-field-key="sample.timeline.items.2.marker">Étape 3</span>
                                                                            <h3 class="gas-block-timeline__item-title" data-gas-field-key="sample.timeline.items.2.title">Explorez les activités</h3>
                                                                            <p class="gas-block-timeline__item-text" data-gas-field-key="sample.timeline.items.2.content">Parcourez le catalogue et réservez en un clic.</p>
                                            </div>
                </li>
                                            <li class="gas-block-timeline__item">
                    <span class="gas-block-timeline__dot" aria-hidden="true">4</span>
                    <div class="gas-block-timeline__body">
                                                    <span class="gas-block-timeline__marker" data-gas-field-key="sample.timeline.items.3.marker">Étape 4</span>
                                                                            <h3 class="gas-block-timeline__item-title" data-gas-field-key="sample.timeline.items.3.title">Profitez</h3>
                                                                            <p class="gas-block-timeline__item-text" data-gas-field-key="sample.timeline.items.3.content">Accédez à tout votre espace membre.</p>
                                            </div>
                </li>
                    </ol>
    </div>
</section>
</div>

variante : default

Comment ça marche

Quatre étapes simples pour démarrer.

Étape 1
Créez votre compte

Inscription en deux minutes, sans carte bancaire.
Étape 2
Complétez votre profil

Ajoutez vos informations et vos préférences.
Étape 3
Explorez les activités

Parcourez le catalogue et réservez en un clic.
Étape 4
Profitez

Accédez à tout votre espace membre.

Voir le HTML rendu

<div id="sample_timeline_001" class="gas-block-anchor" data-gas-block-id="sample_timeline_001"><section class="gas-block-timeline gas-block-timeline--vertical" data-block-type="timeline">
    <div class="gas-block-timeline__inner">
                    <h2 class="gas-block-timeline__title" data-gas-field-key="sample.timeline.title">Comment ça marche</h2>
                            <p class="gas-block-timeline__subtitle" data-gas-field-key="sample.timeline.subtitle">Quatre étapes simples pour démarrer.</p>
        
        <ol class="gas-block-timeline__list">
                                            <li class="gas-block-timeline__item">
                    <span class="gas-block-timeline__dot" aria-hidden="true">1</span>
                    <div class="gas-block-timeline__body">
                                                    <span class="gas-block-timeline__marker" data-gas-field-key="sample.timeline.items.0.marker">Étape 1</span>
                                                                            <h3 class="gas-block-timeline__item-title" data-gas-field-key="sample.timeline.items.0.title">Créez votre compte</h3>
                                                                            <p class="gas-block-timeline__item-text" data-gas-field-key="sample.timeline.items.0.content">Inscription en deux minutes, sans carte bancaire.</p>
                                            </div>
                </li>
                                            <li class="gas-block-timeline__item">
                    <span class="gas-block-timeline__dot" aria-hidden="true">2</span>
                    <div class="gas-block-timeline__body">
                                                    <span class="gas-block-timeline__marker" data-gas-field-key="sample.timeline.items.1.marker">Étape 2</span>
                                                                            <h3 class="gas-block-timeline__item-title" data-gas-field-key="sample.timeline.items.1.title">Complétez votre profil</h3>
                                                                            <p class="gas-block-timeline__item-text" data-gas-field-key="sample.timeline.items.1.content">Ajoutez vos informations et vos préférences.</p>
                                            </div>
                </li>
                                            <li class="gas-block-timeline__item">
                    <span class="gas-block-timeline__dot" aria-hidden="true">3</span>
                    <div class="gas-block-timeline__body">
                                                    <span class="gas-block-timeline__marker" data-gas-field-key="sample.timeline.items.2.marker">Étape 3</span>
                                                                            <h3 class="gas-block-timeline__item-title" data-gas-field-key="sample.timeline.items.2.title">Explorez les activités</h3>
                                                                            <p class="gas-block-timeline__item-text" data-gas-field-key="sample.timeline.items.2.content">Parcourez le catalogue et réservez en un clic.</p>
                                            </div>
                </li>
                                            <li class="gas-block-timeline__item">
                    <span class="gas-block-timeline__dot" aria-hidden="true">4</span>
                    <div class="gas-block-timeline__body">
                                                    <span class="gas-block-timeline__marker" data-gas-field-key="sample.timeline.items.3.marker">Étape 4</span>
                                                                            <h3 class="gas-block-timeline__item-title" data-gas-field-key="sample.timeline.items.3.title">Profitez</h3>
                                                                            <p class="gas-block-timeline__item-text" data-gas-field-key="sample.timeline.items.3.content">Accédez à tout votre espace membre.</p>
                                            </div>
                </li>
                    </ol>
    </div>
</section>
</div>

Titre `title_block`

Titre indépendant pour structurer la page. Permet de choisir son niveau hiérarchique (H1, H2, H3, H4).

variante : none

Bienvenue dans le catalogue

Voir le HTML rendu

<div id="pretty_title_block_001" class="gas-block-anchor" data-gas-block-id="pretty_title_block_001"><section class="gas-block-title-block gas-block-title-block--align-center gas-block-title-block--decor-none" data-block-type="title_block">
        <h2 class="gas-block-title-block__title">Bienvenue dans le catalogue</h2>
</section>
</div>

variante : underline

Bienvenue dans le catalogue

Voir le HTML rendu

<div id="pretty_title_block_001" class="gas-block-anchor" data-gas-block-id="pretty_title_block_001"><section class="gas-block-title-block gas-block-title-block--align-center gas-block-title-block--decor-underline" data-block-type="title_block">
        <h2 class="gas-block-title-block__title">Bienvenue dans le catalogue</h2>
</section>
</div>

variante : gradient

Bienvenue dans le catalogue

Voir le HTML rendu

<div id="pretty_title_block_001" class="gas-block-anchor" data-gas-block-id="pretty_title_block_001"><section class="gas-block-title-block gas-block-title-block--align-center gas-block-title-block--decor-gradient" data-block-type="title_block">
        <h2 class="gas-block-title-block__title">Bienvenue dans le catalogue</h2>
</section>
</div>

variante : side

Bienvenue dans le catalogue

Voir le HTML rendu

<div id="pretty_title_block_001" class="gas-block-anchor" data-gas-block-id="pretty_title_block_001"><section class="gas-block-title-block gas-block-title-block--align-center gas-block-title-block--decor-side" data-block-type="title_block">
        <h2 class="gas-block-title-block__title">Bienvenue dans le catalogue</h2>
</section>
</div>

variante : default

Bienvenue dans le catalogue

Voir le HTML rendu

<div id="pretty_title_block_001" class="gas-block-anchor" data-gas-block-id="pretty_title_block_001"><section class="gas-block-title-block gas-block-title-block--align-center gas-block-title-block--decor-none" data-block-type="title_block">
        <h2 class="gas-block-title-block__title">Bienvenue dans le catalogue</h2>
</section>
</div>

interactive

Accordion `accordion`

Liste repliable de questions/reponses

variante : plain

Programme détaillé

Module 1 — Fondations (jour 1, matin)

Accueil, présentations croisées, contrat de groupe, premier exercice d'ancrage corporel.

Module 2 — Exploration (jour 1, après-midi)

Cercle de parole, exercice de cartographie personnelle, intégration en duo.

Module 3 — Pratique (jour 2)

Mise en pratique des outils découverts la veille, en sous-groupes accompagnés.

Module 4 — Intégration (jour 2, soir)

Cercle de clôture, engagement personnel, ressources pour poursuivre seul ou en groupe.

Voir le HTML rendu

<div id="pretty_accordion_001" class="gas-block-anchor" data-gas-block-id="pretty_accordion_001"><section class="gas-block-accordion gas-block-accordion--style-plain" data-block-type="accordion" data-gas-block-enhancer="accordion" data-gas-block-config="{&quot;allowMultipleOpen&quot;:false}">
    <div class="gas-block-accordion__inner">
        <h2 class="gas-block-accordion__title" data-gas-field-key="sample.accordion.pretty.title">Programme détaillé</h2>        <div class="gas-block-accordion__items">
                                            <div class="gas-block-accordion__item is-open" data-accordion-item>
                    <button
                        type="button"
                        class="gas-block-accordion__question"
                        id="gas-accordion-trigger-pretty_accordion_001-0"
                        aria-expanded="true"
                        aria-controls="gas-accordion-panel-pretty_accordion_001-0"
                         data-gas-field-key="sample.accordion.pretty.items.0.question"                    >Module 1 — Fondations (jour 1, matin)</button>
                    <div
                        class="gas-block-accordion__answer-wrapper"
                        id="gas-accordion-panel-pretty_accordion_001-0"
                        role="region"
                        aria-labelledby="gas-accordion-trigger-pretty_accordion_001-0"
                    >
                        <div class="gas-block-accordion__answer" data-gas-field-key="sample.accordion.pretty.items.0.answer"><p>Accueil, présentations croisées, contrat de groupe, premier exercice d'ancrage corporel.</p></div>
                    </div>
                </div>
                                            <div class="gas-block-accordion__item" data-accordion-item>
                    <button
                        type="button"
                        class="gas-block-accordion__question"
                        id="gas-accordion-trigger-pretty_accordion_001-1"
                        aria-expanded="false"
                        aria-controls="gas-accordion-panel-pretty_accordion_001-1"
                         data-gas-field-key="sample.accordion.pretty.items.1.question"                    >Module 2 — Exploration (jour 1, après-midi)</button>
                    <div
                        class="gas-block-accordion__answer-wrapper"
                        id="gas-accordion-panel-pretty_accordion_001-1"
                        role="region"
                        aria-labelledby="gas-accordion-trigger-pretty_accordion_001-1"
                    >
                        <div class="gas-block-accordion__answer" data-gas-field-key="sample.accordion.pretty.items.1.answer"><p>Cercle de parole, exercice de cartographie personnelle, intégration en duo.</p></div>
                    </div>
                </div>
                                            <div class="gas-block-accordion__item" data-accordion-item>
                    <button
                        type="button"
                        class="gas-block-accordion__question"
                        id="gas-accordion-trigger-pretty_accordion_001-2"
                        aria-expanded="false"
                        aria-controls="gas-accordion-panel-pretty_accordion_001-2"
                         data-gas-field-key="sample.accordion.pretty.items.2.question"                    >Module 3 — Pratique (jour 2)</button>
                    <div
                        class="gas-block-accordion__answer-wrapper"
                        id="gas-accordion-panel-pretty_accordion_001-2"
                        role="region"
                        aria-labelledby="gas-accordion-trigger-pretty_accordion_001-2"
                    >
                        <div class="gas-block-accordion__answer" data-gas-field-key="sample.accordion.pretty.items.2.answer"><p>Mise en pratique des outils découverts la veille, en sous-groupes accompagnés.</p></div>
                    </div>
                </div>
                                            <div class="gas-block-accordion__item" data-accordion-item>
                    <button
                        type="button"
                        class="gas-block-accordion__question"
                        id="gas-accordion-trigger-pretty_accordion_001-3"
                        aria-expanded="false"
                        aria-controls="gas-accordion-panel-pretty_accordion_001-3"
                         data-gas-field-key="sample.accordion.pretty.items.3.question"                    >Module 4 — Intégration (jour 2, soir)</button>
                    <div
                        class="gas-block-accordion__answer-wrapper"
                        id="gas-accordion-panel-pretty_accordion_001-3"
                        role="region"
                        aria-labelledby="gas-accordion-trigger-pretty_accordion_001-3"
                    >
                        <div class="gas-block-accordion__answer" data-gas-field-key="sample.accordion.pretty.items.3.answer"><p>Cercle de clôture, engagement personnel, ressources pour poursuivre seul ou en groupe.</p></div>
                    </div>
                </div>
                    </div>
    </div>
</section>
</div>

variante : bordered

Programme détaillé

Module 1 — Fondations (jour 1, matin)

Accueil, présentations croisées, contrat de groupe, premier exercice d'ancrage corporel.

Module 2 — Exploration (jour 1, après-midi)

Cercle de parole, exercice de cartographie personnelle, intégration en duo.

Module 3 — Pratique (jour 2)

Mise en pratique des outils découverts la veille, en sous-groupes accompagnés.

Module 4 — Intégration (jour 2, soir)

Cercle de clôture, engagement personnel, ressources pour poursuivre seul ou en groupe.

Voir le HTML rendu

<div id="pretty_accordion_001" class="gas-block-anchor" data-gas-block-id="pretty_accordion_001"><section class="gas-block-accordion gas-block-accordion--style-bordered" data-block-type="accordion" data-gas-block-enhancer="accordion" data-gas-block-config="{&quot;allowMultipleOpen&quot;:false}">
    <div class="gas-block-accordion__inner">
        <h2 class="gas-block-accordion__title" data-gas-field-key="sample.accordion.pretty.title">Programme détaillé</h2>        <div class="gas-block-accordion__items">
                                            <div class="gas-block-accordion__item is-open" data-accordion-item>
                    <button
                        type="button"
                        class="gas-block-accordion__question"
                        id="gas-accordion-trigger-pretty_accordion_001-0"
                        aria-expanded="true"
                        aria-controls="gas-accordion-panel-pretty_accordion_001-0"
                         data-gas-field-key="sample.accordion.pretty.items.0.question"                    >Module 1 — Fondations (jour 1, matin)</button>
                    <div
                        class="gas-block-accordion__answer-wrapper"
                        id="gas-accordion-panel-pretty_accordion_001-0"
                        role="region"
                        aria-labelledby="gas-accordion-trigger-pretty_accordion_001-0"
                    >
                        <div class="gas-block-accordion__answer" data-gas-field-key="sample.accordion.pretty.items.0.answer"><p>Accueil, présentations croisées, contrat de groupe, premier exercice d'ancrage corporel.</p></div>
                    </div>
                </div>
                                            <div class="gas-block-accordion__item" data-accordion-item>
                    <button
                        type="button"
                        class="gas-block-accordion__question"
                        id="gas-accordion-trigger-pretty_accordion_001-1"
                        aria-expanded="false"
                        aria-controls="gas-accordion-panel-pretty_accordion_001-1"
                         data-gas-field-key="sample.accordion.pretty.items.1.question"                    >Module 2 — Exploration (jour 1, après-midi)</button>
                    <div
                        class="gas-block-accordion__answer-wrapper"
                        id="gas-accordion-panel-pretty_accordion_001-1"
                        role="region"
                        aria-labelledby="gas-accordion-trigger-pretty_accordion_001-1"
                    >
                        <div class="gas-block-accordion__answer" data-gas-field-key="sample.accordion.pretty.items.1.answer"><p>Cercle de parole, exercice de cartographie personnelle, intégration en duo.</p></div>
                    </div>
                </div>
                                            <div class="gas-block-accordion__item" data-accordion-item>
                    <button
                        type="button"
                        class="gas-block-accordion__question"
                        id="gas-accordion-trigger-pretty_accordion_001-2"
                        aria-expanded="false"
                        aria-controls="gas-accordion-panel-pretty_accordion_001-2"
                         data-gas-field-key="sample.accordion.pretty.items.2.question"                    >Module 3 — Pratique (jour 2)</button>
                    <div
                        class="gas-block-accordion__answer-wrapper"
                        id="gas-accordion-panel-pretty_accordion_001-2"
                        role="region"
                        aria-labelledby="gas-accordion-trigger-pretty_accordion_001-2"
                    >
                        <div class="gas-block-accordion__answer" data-gas-field-key="sample.accordion.pretty.items.2.answer"><p>Mise en pratique des outils découverts la veille, en sous-groupes accompagnés.</p></div>
                    </div>
                </div>
                                            <div class="gas-block-accordion__item" data-accordion-item>
                    <button
                        type="button"
                        class="gas-block-accordion__question"
                        id="gas-accordion-trigger-pretty_accordion_001-3"
                        aria-expanded="false"
                        aria-controls="gas-accordion-panel-pretty_accordion_001-3"
                         data-gas-field-key="sample.accordion.pretty.items.3.question"                    >Module 4 — Intégration (jour 2, soir)</button>
                    <div
                        class="gas-block-accordion__answer-wrapper"
                        id="gas-accordion-panel-pretty_accordion_001-3"
                        role="region"
                        aria-labelledby="gas-accordion-trigger-pretty_accordion_001-3"
                    >
                        <div class="gas-block-accordion__answer" data-gas-field-key="sample.accordion.pretty.items.3.answer"><p>Cercle de clôture, engagement personnel, ressources pour poursuivre seul ou en groupe.</p></div>
                    </div>
                </div>
                    </div>
    </div>
</section>
</div>

variante : filled

Programme détaillé

Module 1 — Fondations (jour 1, matin)

Accueil, présentations croisées, contrat de groupe, premier exercice d'ancrage corporel.

Module 2 — Exploration (jour 1, après-midi)

Cercle de parole, exercice de cartographie personnelle, intégration en duo.

Module 3 — Pratique (jour 2)

Mise en pratique des outils découverts la veille, en sous-groupes accompagnés.

Module 4 — Intégration (jour 2, soir)

Cercle de clôture, engagement personnel, ressources pour poursuivre seul ou en groupe.

Voir le HTML rendu

<div id="pretty_accordion_001" class="gas-block-anchor" data-gas-block-id="pretty_accordion_001"><section class="gas-block-accordion gas-block-accordion--style-filled" data-block-type="accordion" data-gas-block-enhancer="accordion" data-gas-block-config="{&quot;allowMultipleOpen&quot;:false}">
    <div class="gas-block-accordion__inner">
        <h2 class="gas-block-accordion__title" data-gas-field-key="sample.accordion.pretty.title">Programme détaillé</h2>        <div class="gas-block-accordion__items">
                                            <div class="gas-block-accordion__item is-open" data-accordion-item>
                    <button
                        type="button"
                        class="gas-block-accordion__question"
                        id="gas-accordion-trigger-pretty_accordion_001-0"
                        aria-expanded="true"
                        aria-controls="gas-accordion-panel-pretty_accordion_001-0"
                         data-gas-field-key="sample.accordion.pretty.items.0.question"                    >Module 1 — Fondations (jour 1, matin)</button>
                    <div
                        class="gas-block-accordion__answer-wrapper"
                        id="gas-accordion-panel-pretty_accordion_001-0"
                        role="region"
                        aria-labelledby="gas-accordion-trigger-pretty_accordion_001-0"
                    >
                        <div class="gas-block-accordion__answer" data-gas-field-key="sample.accordion.pretty.items.0.answer"><p>Accueil, présentations croisées, contrat de groupe, premier exercice d'ancrage corporel.</p></div>
                    </div>
                </div>
                                            <div class="gas-block-accordion__item" data-accordion-item>
                    <button
                        type="button"
                        class="gas-block-accordion__question"
                        id="gas-accordion-trigger-pretty_accordion_001-1"
                        aria-expanded="false"
                        aria-controls="gas-accordion-panel-pretty_accordion_001-1"
                         data-gas-field-key="sample.accordion.pretty.items.1.question"                    >Module 2 — Exploration (jour 1, après-midi)</button>
                    <div
                        class="gas-block-accordion__answer-wrapper"
                        id="gas-accordion-panel-pretty_accordion_001-1"
                        role="region"
                        aria-labelledby="gas-accordion-trigger-pretty_accordion_001-1"
                    >
                        <div class="gas-block-accordion__answer" data-gas-field-key="sample.accordion.pretty.items.1.answer"><p>Cercle de parole, exercice de cartographie personnelle, intégration en duo.</p></div>
                    </div>
                </div>
                                            <div class="gas-block-accordion__item" data-accordion-item>
                    <button
                        type="button"
                        class="gas-block-accordion__question"
                        id="gas-accordion-trigger-pretty_accordion_001-2"
                        aria-expanded="false"
                        aria-controls="gas-accordion-panel-pretty_accordion_001-2"
                         data-gas-field-key="sample.accordion.pretty.items.2.question"                    >Module 3 — Pratique (jour 2)</button>
                    <div
                        class="gas-block-accordion__answer-wrapper"
                        id="gas-accordion-panel-pretty_accordion_001-2"
                        role="region"
                        aria-labelledby="gas-accordion-trigger-pretty_accordion_001-2"
                    >
                        <div class="gas-block-accordion__answer" data-gas-field-key="sample.accordion.pretty.items.2.answer"><p>Mise en pratique des outils découverts la veille, en sous-groupes accompagnés.</p></div>
                    </div>
                </div>
                                            <div class="gas-block-accordion__item" data-accordion-item>
                    <button
                        type="button"
                        class="gas-block-accordion__question"
                        id="gas-accordion-trigger-pretty_accordion_001-3"
                        aria-expanded="false"
                        aria-controls="gas-accordion-panel-pretty_accordion_001-3"
                         data-gas-field-key="sample.accordion.pretty.items.3.question"                    >Module 4 — Intégration (jour 2, soir)</button>
                    <div
                        class="gas-block-accordion__answer-wrapper"
                        id="gas-accordion-panel-pretty_accordion_001-3"
                        role="region"
                        aria-labelledby="gas-accordion-trigger-pretty_accordion_001-3"
                    >
                        <div class="gas-block-accordion__answer" data-gas-field-key="sample.accordion.pretty.items.3.answer"><p>Cercle de clôture, engagement personnel, ressources pour poursuivre seul ou en groupe.</p></div>
                    </div>
                </div>
                    </div>
    </div>
</section>
</div>

Formulaire contact `contact_form`

Wrapper interactif du module formulaire

Une question ? Écris-nous

L'équipe répond sous 48h ouvrées. Pour les questions urgentes liées à une activité en cours, appelle directement le secrétariat.

Voir le HTML rendu

<div id="pretty_contact_form_001" class="gas-block-anchor" data-gas-block-id="pretty_contact_form_001"><section class="gas-block-contact-form gas-block-contact-form--mock" data-block-type="contact_form" data-gas-block-enhancer="contact_form" data-gas-block-config="{&quot;formId&quot;:0,&quot;formKey&quot;:&quot;design-demo-contact&quot;}">
    <h2 class="gas-block-contact-form__title">Une question ? Écris-nous</h2>    <div class="gas-block-contact-form__text"><p>L'équipe répond sous 48h ouvrées. Pour les questions urgentes liées à une activité en cours, appelle directement le secrétariat.</p></div>    <div class="gas-block-contact-form__form"><form class="gas-block-contact-form__mock" onsubmit="event.preventDefault();" aria-label="Aperçu visuel du formulaire (mock)"><div class="gas-block-contact-form__mock-row"><label class="gas-block-contact-form__mock-label"><span>Prénom</span><input type="text" placeholder="Marie" /></label><label class="gas-block-contact-form__mock-label"><span>Nom</span><input type="text" placeholder="Dupont" /></label></div><label class="gas-block-contact-form__mock-label"><span>Email</span><input type="email" placeholder="marie@exemple.fr" /></label><label class="gas-block-contact-form__mock-label"><span>Sujet</span><select><option>Demande d'information</option><option>Inscription à une activité</option><option>Question administrative</option><option>Autre</option></select></label><label class="gas-block-contact-form__mock-label"><span>Message</span><textarea rows="5" placeholder="Bonjour, je souhaiterais en savoir plus sur…"></textarea></label><label class="gas-block-contact-form__mock-consent"><input type="checkbox" /> <span>J'accepte que mes données soient utilisées pour me répondre.</span></label><button class="gas-button gas-button--primary" type="submit">Envoyer</button><p class="gas-block-contact-form__mock-note"><em>Aperçu visuel — connecte un formulaire via <code>form_id</code> ou <code>form_slug</code> pour activer la version interactive.</em></p></form></div>
</section>
</div>

Compte à rebours `countdown`

Compte à rebours animé vers une date cible (événement, lancement). Affiche jours/heures/minutes/secondes, puis un message à l'échéance.

variante : boxes

165 jours

10 heures

26 min

27 sec

Voir le HTML rendu

<div id="sample_countdown_001" class="gas-block-anchor" data-gas-block-id="sample_countdown_001"><section class="gas-block-countdown gas-block-countdown--boxes" data-block-type="countdown"
         data-gas-block-enhancer="countdown" data-gas-block-config="{&quot;targetMs&quot;:1798757940000,&quot;showSeconds&quot;:true,&quot;expiredMessage&quot;:&quot;C&#039;est l&#039;heure !&quot;}">
    <div class="gas-block-countdown__inner">
                
        <div class="gas-block-countdown__timer" data-countdown-timer>
                            <div class="gas-block-countdown__unit">
                    <span class="gas-block-countdown__value" data-countdown-unit="days">165</span>
                    <span class="gas-block-countdown__label">jours</span>
                </div>
                            <div class="gas-block-countdown__unit">
                    <span class="gas-block-countdown__value" data-countdown-unit="hours">10</span>
                    <span class="gas-block-countdown__label">heures</span>
                </div>
                            <div class="gas-block-countdown__unit">
                    <span class="gas-block-countdown__value" data-countdown-unit="minutes">26</span>
                    <span class="gas-block-countdown__label">min</span>
                </div>
                            <div class="gas-block-countdown__unit">
                    <span class="gas-block-countdown__value" data-countdown-unit="seconds">27</span>
                    <span class="gas-block-countdown__label">sec</span>
                </div>
                    </div>

        <p class="gas-block-countdown__expired" data-countdown-expired hidden>C&#039;est l&#039;heure !</p>
    </div>
</section>
</div>

variante : inline

165 jours

10 heures

26 min

27 sec

Voir le HTML rendu

<div id="sample_countdown_001" class="gas-block-anchor" data-gas-block-id="sample_countdown_001"><section class="gas-block-countdown gas-block-countdown--inline" data-block-type="countdown"
         data-gas-block-enhancer="countdown" data-gas-block-config="{&quot;targetMs&quot;:1798757940000,&quot;showSeconds&quot;:true,&quot;expiredMessage&quot;:&quot;C&#039;est l&#039;heure !&quot;}">
    <div class="gas-block-countdown__inner">
                
        <div class="gas-block-countdown__timer" data-countdown-timer>
                            <div class="gas-block-countdown__unit">
                    <span class="gas-block-countdown__value" data-countdown-unit="days">165</span>
                    <span class="gas-block-countdown__label">jours</span>
                </div>
                            <div class="gas-block-countdown__unit">
                    <span class="gas-block-countdown__value" data-countdown-unit="hours">10</span>
                    <span class="gas-block-countdown__label">heures</span>
                </div>
                            <div class="gas-block-countdown__unit">
                    <span class="gas-block-countdown__value" data-countdown-unit="minutes">26</span>
                    <span class="gas-block-countdown__label">min</span>
                </div>
                            <div class="gas-block-countdown__unit">
                    <span class="gas-block-countdown__value" data-countdown-unit="seconds">27</span>
                    <span class="gas-block-countdown__label">sec</span>
                </div>
                    </div>

        <p class="gas-block-countdown__expired" data-countdown-expired hidden>C&#039;est l&#039;heure !</p>
    </div>
</section>
</div>

Inscription newsletter `newsletter_signup`

Bandeau d'inscription à la newsletter (texte + formulaire). Inscrit l'email dans une liste du module comm (double opt-in). Champs configurables : email seul ou prénom + nom + email. Couleur de fond paramétrable.

variante : side_by_side

Aucun rendu visuel — bloc piloté par des données réelles (vide avec l'échantillon par défaut).

variante : stacked

Aucun rendu visuel — bloc piloté par des données réelles (vide avec l'échantillon par défaut).

variante : centered_card

Aucun rendu visuel — bloc piloté par des données réelles (vide avec l'échantillon par défaut).

Quiz `quiz_embed`

Intègre un quiz interactif (module quiz) dans la page : player complet côté WordPress, carte + lien vers /quiz/{slug} côté Astro statique.

Introuvable

Voir le HTML rendu

<div id="sample_quiz_embed_001" class="gas-block-anchor" data-gas-block-id="sample_quiz_embed_001"><section class="gas-block-quiz-embed" data-block-type="quiz_embed"><p class="gas-block-quiz-embed__empty">Introuvable</p></section></div>

Champ de recherche `search_box`

Barre de recherche (formulaire GET, paramètre « q ») vers une page de résultats ou la page courante. Sans JavaScript. Se couple au bloc search_results. Variante "guided" : entrée de recherche en langage naturel orientée ressenti (pré-titre, note manuscrite, réassurance).

variante : default

Voir le HTML rendu

<div id="sample_search_box_001" class="gas-block-anchor" data-gas-block-id="sample_search_box_001"><section class="gas-block-search-box gas-block-search-box--large" data-block-type="search_box">
    <div class="gas-block-search-box__inner">
                                        <form class="gas-block-search-box__form" role="search" method="get">
            <input class="gas-block-search-box__input" type="search" name="q" value=""
                   placeholder="Rechercher" aria-label="Rechercher" />
                            <button class="gas-button gas-button--primary gas-block-search-box__btn" type="submit">Rechercher</button>
                    </form>
            </div>
</section>
</div>

variante : guided

Voir le HTML rendu

<div id="sample_search_box_001" class="gas-block-anchor" data-gas-block-id="sample_search_box_001"><section class="gas-block-search-box gas-block-search-box--large gas-block-search-box--guided" data-block-type="search_box">
    <div class="gas-block-search-box__inner">
                                        <form class="gas-block-search-box__form" role="search" method="get">
            <input class="gas-block-search-box__input" type="search" name="q" value=""
                   placeholder="Rechercher" aria-label="Rechercher" />
                            <button class="gas-button gas-button--primary gas-block-search-box__btn" type="submit">Rechercher</button>
                    </form>
            </div>
</section>
</div>

Résultats de recherche `search_results`

Liste paginée des résultats de recherche transverse pour le terme « q » de l'URL (documents, activités, annonces, membres…). Accès filtré côté serveur. Se couple au bloc search_box.

Saisissez un terme pour lancer la recherche.

Voir le HTML rendu

<div id="sample_search_results_001" class="gas-block-anchor" data-gas-block-id="sample_search_results_001"><section class="gas-block-search-results" data-block-type="search_results">
    <div class="gas-block-search-results__inner">
                
                    <p class="gas-block-search-results__hint">Saisissez un terme pour lancer la recherche.</p>
            </div>
</section>
</div>

Publication sociale `social_embed`

Intègre une publication ou vidéo de réseau social (YouTube, Vimeo, X, Instagram, TikTok…) depuis son URL. Privacy-first : chargement à la demande, sans clé API.

Voir le HTML rendu

<div id="sample_social_embed_001" class="gas-block-anchor" data-gas-block-id="sample_social_embed_001"><section class="gas-block-social-embed gas-block-social-embed--youtube" data-block-type="social_embed"
         data-gas-block-enhancer="social_embed" data-gas-block-config="{&quot;url&quot;:&quot;https:\/\/www.youtube.com\/watch?v=dQw4w9WgXcQ&quot;,&quot;provider&quot;:&quot;youtube&quot;,&quot;kind&quot;:&quot;iframe&quot;}">
    <div class="gas-block-social-embed__inner">
        
        <div class="gas-block-social-embed__placeholder" data-social-placeholder>
            <span class="gas-block-social-embed__provider">YouTube</span>
            <p class="gas-block-social-embed__notice">En affichant ce contenu, vous acceptez le dépôt de cookies par YouTube.</p>
                            <button class="gas-button gas-button--primary" type="button" data-social-load>Afficher la publication</button>
                <noscript><a class="gas-block-social-embed__fallback" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener noreferrer">YouTube →</a></noscript>
                    </div>
        <div class="gas-block-social-embed__mount" data-social-mount hidden></div>

            </div>
</section>
</div>

Temoignages `testimonials`

Temoignages en carousel ou grille

variante : carousel

Ce qu'ils en disent

Une expérience transformatrice. J'ai mis un an avant de venir et je le regrette : j'aurais dû franchir le pas plus tôt.

Pierre M.

Cadre · Lausanne

La qualité d'écoute des animateurs est rare. Ils savent quand intervenir et quand laisser le silence faire son travail.

Sophie R.

Thérapeute · Genève

J'avais peur de l'aspect 'développement personnel'. Finalement c'est très ancré, très concret, et 100% laïque.

Marc D.

Ingénieur · Berne

Voir le HTML rendu

<div id="pretty_testimonials_001" class="gas-block-anchor" data-gas-block-id="pretty_testimonials_001"><section class="is-tone-dark gas-block-testimonials gas-block-testimonials--carousel gas-block-testimonials--avatar-medium" data-block-type="testimonials" data-gas-block-enhancer="testimonials" data-gas-block-config="{&quot;mode&quot;:&quot;carousel&quot;,&quot;autoplayMs&quot;:5000}">
    <div class="gas-block-testimonials__inner">
        <h2 class="gas-block-testimonials__title">Ce qu&#039;ils en disent</h2>        <div class="gas-block-testimonials__track" data-testimonials-track>
                                                            <article class="gas-block-testimonials__item" data-testimonial-item>
                                            <div class="gas-block-testimonials__avatar"><img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" /></div>
                                                            <blockquote class="gas-block-testimonials__quote">Une expérience transformatrice. J&#039;ai mis un an avant de venir et je le regrette : j&#039;aurais dû franchir le pas plus tôt.</blockquote>                    <p class="gas-block-testimonials__author">Pierre M.</p>                    <p class="gas-block-testimonials__role">Cadre · Lausanne</p>                </article>
                                                            <article class="gas-block-testimonials__item" data-testimonial-item>
                                            <div class="gas-block-testimonials__avatar"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" /></div>
                                                            <blockquote class="gas-block-testimonials__quote">La qualité d&#039;écoute des animateurs est rare. Ils savent quand intervenir et quand laisser le silence faire son travail.</blockquote>                    <p class="gas-block-testimonials__author">Sophie R.</p>                    <p class="gas-block-testimonials__role">Thérapeute · Genève</p>                </article>
                                                            <article class="gas-block-testimonials__item" data-testimonial-item>
                                            <div class="gas-block-testimonials__avatar"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" /></div>
                                                            <blockquote class="gas-block-testimonials__quote">J&#039;avais peur de l&#039;aspect &#039;développement personnel&#039;. Finalement c&#039;est très ancré, très concret, et 100% laïque.</blockquote>                    <p class="gas-block-testimonials__author">Marc D.</p>                    <p class="gas-block-testimonials__role">Ingénieur · Berne</p>                </article>
                    </div>
                    <div class="gas-block-testimonials__controls">
                <button type="button" class="gas-button gas-button--outline" data-testimonials-prev aria-label="Précédent">&larr;</button>
                <button type="button" class="gas-button gas-button--outline" data-testimonials-next aria-label="Suivant">&rarr;</button>
            </div>
            </div>
</section>
</div>

variante : grid

Ce qu'ils en disent

Une expérience transformatrice. J'ai mis un an avant de venir et je le regrette : j'aurais dû franchir le pas plus tôt.

Pierre M.

Cadre · Lausanne

La qualité d'écoute des animateurs est rare. Ils savent quand intervenir et quand laisser le silence faire son travail.

Sophie R.

Thérapeute · Genève

J'avais peur de l'aspect 'développement personnel'. Finalement c'est très ancré, très concret, et 100% laïque.

Marc D.

Ingénieur · Berne

Voir le HTML rendu

<div id="pretty_testimonials_001" class="gas-block-anchor" data-gas-block-id="pretty_testimonials_001"><section class="is-tone-dark gas-block-testimonials gas-block-testimonials--grid gas-block-testimonials--avatar-medium" data-block-type="testimonials" data-gas-block-enhancer="testimonials" data-gas-block-config="{&quot;mode&quot;:&quot;grid&quot;,&quot;autoplayMs&quot;:5000}">
    <div class="gas-block-testimonials__inner">
        <h2 class="gas-block-testimonials__title">Ce qu&#039;ils en disent</h2>        <div class="gas-block-testimonials__track" data-testimonials-track>
                                                            <article class="gas-block-testimonials__item" data-testimonial-item>
                                            <div class="gas-block-testimonials__avatar"><img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" /></div>
                                                            <blockquote class="gas-block-testimonials__quote">Une expérience transformatrice. J&#039;ai mis un an avant de venir et je le regrette : j&#039;aurais dû franchir le pas plus tôt.</blockquote>                    <p class="gas-block-testimonials__author">Pierre M.</p>                    <p class="gas-block-testimonials__role">Cadre · Lausanne</p>                </article>
                                                            <article class="gas-block-testimonials__item" data-testimonial-item>
                                            <div class="gas-block-testimonials__avatar"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" /></div>
                                                            <blockquote class="gas-block-testimonials__quote">La qualité d&#039;écoute des animateurs est rare. Ils savent quand intervenir et quand laisser le silence faire son travail.</blockquote>                    <p class="gas-block-testimonials__author">Sophie R.</p>                    <p class="gas-block-testimonials__role">Thérapeute · Genève</p>                </article>
                                                            <article class="gas-block-testimonials__item" data-testimonial-item>
                                            <div class="gas-block-testimonials__avatar"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" /></div>
                                                            <blockquote class="gas-block-testimonials__quote">J&#039;avais peur de l&#039;aspect &#039;développement personnel&#039;. Finalement c&#039;est très ancré, très concret, et 100% laïque.</blockquote>                    <p class="gas-block-testimonials__author">Marc D.</p>                    <p class="gas-block-testimonials__role">Ingénieur · Berne</p>                </article>
                    </div>
            </div>
</section>
</div>

variante : featured

Ce qu'ils en disent

Une expérience transformatrice. J'ai mis un an avant de venir et je le regrette : j'aurais dû franchir le pas plus tôt.

Pierre M. Cadre · Lausanne

Voir le HTML rendu

<div id="pretty_testimonials_001" class="gas-block-anchor" data-gas-block-id="pretty_testimonials_001">    <section class="is-tone-dark gas-block-testimonials gas-block-testimonials--featured gas-block-testimonials--avatar-medium" data-block-type="testimonials">
        <div class="gas-block-testimonials__inner">
            <h2 class="gas-block-testimonials__title">Ce qu&#039;ils en disent</h2>                            <figure class="gas-block-testimonials__featured" data-testimonial-item>
                                                            <blockquote class="gas-block-testimonials__featured-quote">Une expérience transformatrice. J&#039;ai mis un an avant de venir et je le regrette : j&#039;aurais dû franchir le pas plus tôt.</blockquote>                    <figcaption class="gas-block-testimonials__featured-cite">
                                                    <div class="gas-block-testimonials__avatar gas-block-testimonials__featured-avatar"><img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" /></div>
                                                <span class="gas-block-testimonials__featured-meta">
                            <span class="gas-block-testimonials__author gas-block-testimonials__featured-author">Pierre M.</span>                            <span class="gas-block-testimonials__role gas-block-testimonials__featured-role">Cadre · Lausanne</span>                        </span>
                    </figcaption>
                </figure>
                    </div>
    </section>
    </div>

variante : side_by_side

Ce qu'ils en disent

Une expérience transformatrice. J'ai mis un an avant de venir et je le regrette : j'aurais dû franchir le pas plus tôt.

Pierre M. Cadre · Lausanne

Voir le HTML rendu

<div id="pretty_testimonials_001" class="gas-block-anchor" data-gas-block-id="pretty_testimonials_001">    <section class="is-tone-dark gas-block-testimonials gas-block-testimonials--side_by_side gas-block-testimonials--avatar-medium" data-block-type="testimonials">
        <div class="gas-block-testimonials__inner">
            <h2 class="gas-block-testimonials__title">Ce qu&#039;ils en disent</h2>                            <figure class="gas-block-testimonials__sbs" data-testimonial-item>
                                            <div class="gas-block-testimonials__sbs-media"><img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" /></div>
                                        <div class="gas-block-testimonials__sbs-body">
                                                <blockquote class="gas-block-testimonials__quote gas-block-testimonials__sbs-quote">Une expérience transformatrice. J&#039;ai mis un an avant de venir et je le regrette : j&#039;aurais dû franchir le pas plus tôt.</blockquote>                        <figcaption class="gas-block-testimonials__sbs-cite">
                            <span class="gas-block-testimonials__author">Pierre M.</span>                            <span class="gas-block-testimonials__role">Cadre · Lausanne</span>                        </figcaption>
                    </div>
                </figure>
                    </div>
    </section>
    </div>

Video embed `video_embed`

Lecteur video lazy-load

Exemple video embed

Voir le HTML rendu

<div id="sample_video_embed_001" class="gas-block-anchor" data-gas-block-id="sample_video_embed_001"><section class="gas-block-video-embed gas-block-video-embed--ratio-16-9" data-block-type="video_embed" data-gas-block-enhancer="video_embed" data-gas-block-config="{&quot;provider&quot;:&quot;youtube&quot;,&quot;videoId&quot;:&quot;dQw4w9WgXcQ&quot;,&quot;dbVideoId&quot;:1,&quot;activiteId&quot;:1,&quot;ratio&quot;:&quot;16:9&quot;}">
    <h2 class="gas-block-video-embed__title">Exemple video embed</h2>    <div class="gas-block-video-embed__frame" data-video-frame>
                    <button type="button" class="gas-button gas-button--primary" data-video-load>Load video</button>
            </div>
    </section>
</div>

marketing

Bento grid `bento_grid`

Grille modulaire de cellules de tailles variées (texte / icône / image)

variante : default

Tout ce dont vous avez besoin

Une plateforme complète pour accompagner vos membres.

Plateforme

Espace membre unifié

Activités, ressources et communauté réunies dans un seul espace clair et accessible.

Rapide

Des pages légères et instantanées.

Confiance

Sécurisé

Vos données protégées, hébergées en Suisse, conformes RGPD.

Multilingue

Un contenu adapté à chaque audience, dans sa langue.

Bienveillant

Une communauté à votre écoute.

12 ans D'accompagnement

450+ Membres actifs

Une communauté à votre écoute, qui a changé ma façon de vivre mes activités au quotidien.
Un membre depuis 2019

Voir le HTML rendu

<div id="sample_bento_grid_001" class="gas-block-anchor" data-gas-block-id="sample_bento_grid_001"><section class="gas-block-bento-grid gas-block-bento-grid--default" data-block-type="bento_grid">
    <div class="gas-block-bento-grid__inner">
                    <h2 class="gas-block-bento-grid__title">Tout ce dont vous avez besoin</h2>
                            <p class="gas-block-bento-grid__subtitle">Une plateforme complète pour accompagner vos membres.</p>
        
        <div class="gas-block-bento-grid__grid">
                            <a class="gas-block-bento-grid__item gas-block-bento-grid__item--large" href="#">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">✦</span>
                                                                                        <span class="gas-block-bento-grid__eyebrow">Plateforme</span>
                                                                                        <h3 class="gas-block-bento-grid__item-title">Espace membre unifié</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Activités, ressources et communauté réunies dans un seul espace clair et accessible.</p>
                                                    </div>
                                    </a>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--small">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">⚡</span>
                                                                                                                    <h3 class="gas-block-bento-grid__item-title">Rapide</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Des pages légères et instantanées.</p>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--tall">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">🔒</span>
                                                                                        <span class="gas-block-bento-grid__eyebrow">Confiance</span>
                                                                                        <h3 class="gas-block-bento-grid__item-title">Sécurisé</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Vos données protégées, hébergées en Suisse, conformes RGPD.</p>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--wide">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">🌍</span>
                                                                                                                    <h3 class="gas-block-bento-grid__item-title">Multilingue</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Un contenu adapté à chaque audience, dans sa langue.</p>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--small">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">♥</span>
                                                                                                                    <h3 class="gas-block-bento-grid__item-title">Bienveillant</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Une communauté à votre écoute.</p>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--small">
                                                                <div class="gas-block-bento-grid__body gas-block-bento-grid__stat">
                                                            <span class="gas-block-bento-grid__stat-value">12 ans</span>
                                                                                        <span class="gas-block-bento-grid__stat-label">D&#039;accompagnement</span>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--small">
                                                                <div class="gas-block-bento-grid__body gas-block-bento-grid__stat">
                                                            <span class="gas-block-bento-grid__stat-value">450+</span>
                                                                                        <span class="gas-block-bento-grid__stat-label">Membres actifs</span>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--wide">
                                                                <blockquote class="gas-block-bento-grid__body gas-block-bento-grid__quote">
                                                            <p class="gas-block-bento-grid__quote-text">Une communauté à votre écoute, qui a changé ma façon de vivre mes activités au quotidien.</p>
                                                                                        <cite class="gas-block-bento-grid__quote-cite">Un membre depuis 2019</cite>
                                                    </blockquote>
                                    </div>
                    </div>
    </div>
</section>
</div>

variante : magazine

Tout ce dont vous avez besoin

Une plateforme complète pour accompagner vos membres.

Plateforme

Espace membre unifié

Activités, ressources et communauté réunies dans un seul espace clair et accessible.

Rapide

Des pages légères et instantanées.

Confiance

Sécurisé

Vos données protégées, hébergées en Suisse, conformes RGPD.

Multilingue

Un contenu adapté à chaque audience, dans sa langue.

Bienveillant

Une communauté à votre écoute.

12 ans D'accompagnement

450+ Membres actifs

Une communauté à votre écoute, qui a changé ma façon de vivre mes activités au quotidien.
Un membre depuis 2019

Voir le HTML rendu

<div id="sample_bento_grid_001" class="gas-block-anchor" data-gas-block-id="sample_bento_grid_001"><section class="gas-block-bento-grid gas-block-bento-grid--magazine" data-block-type="bento_grid">
    <div class="gas-block-bento-grid__inner">
                    <h2 class="gas-block-bento-grid__title">Tout ce dont vous avez besoin</h2>
                            <p class="gas-block-bento-grid__subtitle">Une plateforme complète pour accompagner vos membres.</p>
        
        <div class="gas-block-bento-grid__grid">
                            <a class="gas-block-bento-grid__item gas-block-bento-grid__item--large gas-block-bento-grid__item--kind-content gas-block-bento-grid__item--pos-1" href="#">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">✦</span>
                                                                                        <span class="gas-block-bento-grid__eyebrow">Plateforme</span>
                                                                                        <h3 class="gas-block-bento-grid__item-title">Espace membre unifié</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Activités, ressources et communauté réunies dans un seul espace clair et accessible.</p>
                                                    </div>
                                    </a>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--small gas-block-bento-grid__item--kind-content gas-block-bento-grid__item--pos-2">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">⚡</span>
                                                                                                                    <h3 class="gas-block-bento-grid__item-title">Rapide</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Des pages légères et instantanées.</p>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--tall gas-block-bento-grid__item--kind-content gas-block-bento-grid__item--pos-3">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">🔒</span>
                                                                                        <span class="gas-block-bento-grid__eyebrow">Confiance</span>
                                                                                        <h3 class="gas-block-bento-grid__item-title">Sécurisé</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Vos données protégées, hébergées en Suisse, conformes RGPD.</p>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--wide gas-block-bento-grid__item--kind-content gas-block-bento-grid__item--pos-4">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">🌍</span>
                                                                                                                    <h3 class="gas-block-bento-grid__item-title">Multilingue</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Un contenu adapté à chaque audience, dans sa langue.</p>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--small gas-block-bento-grid__item--kind-content gas-block-bento-grid__item--pos-5">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">♥</span>
                                                                                                                    <h3 class="gas-block-bento-grid__item-title">Bienveillant</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Une communauté à votre écoute.</p>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--small gas-block-bento-grid__item--kind-stat gas-block-bento-grid__item--pos-6">
                                                                <div class="gas-block-bento-grid__body gas-block-bento-grid__stat">
                                                            <span class="gas-block-bento-grid__stat-value">12 ans</span>
                                                                                        <span class="gas-block-bento-grid__stat-label">D&#039;accompagnement</span>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--small gas-block-bento-grid__item--kind-stat gas-block-bento-grid__item--pos-7">
                                                                <div class="gas-block-bento-grid__body gas-block-bento-grid__stat">
                                                            <span class="gas-block-bento-grid__stat-value">450+</span>
                                                                                        <span class="gas-block-bento-grid__stat-label">Membres actifs</span>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--wide gas-block-bento-grid__item--kind-quote gas-block-bento-grid__item--pos-8">
                                                                <blockquote class="gas-block-bento-grid__body gas-block-bento-grid__quote">
                                                            <p class="gas-block-bento-grid__quote-text">Une communauté à votre écoute, qui a changé ma façon de vivre mes activités au quotidien.</p>
                                                                                        <cite class="gas-block-bento-grid__quote-cite">Un membre depuis 2019</cite>
                                                    </blockquote>
                                    </div>
                    </div>
    </div>
</section>
</div>

variante : quilt

Tout ce dont vous avez besoin

Une plateforme complète pour accompagner vos membres.

Plateforme

Espace membre unifié

Activités, ressources et communauté réunies dans un seul espace clair et accessible.

Rapide

Des pages légères et instantanées.

Confiance

Sécurisé

Vos données protégées, hébergées en Suisse, conformes RGPD.

Multilingue

Un contenu adapté à chaque audience, dans sa langue.

Bienveillant

Une communauté à votre écoute.

12 ans D'accompagnement

450+ Membres actifs

Une communauté à votre écoute, qui a changé ma façon de vivre mes activités au quotidien.
Un membre depuis 2019

Voir le HTML rendu

<div id="sample_bento_grid_001" class="gas-block-anchor" data-gas-block-id="sample_bento_grid_001"><section class="gas-block-bento-grid gas-block-bento-grid--quilt" data-block-type="bento_grid">
    <div class="gas-block-bento-grid__inner">
                    <h2 class="gas-block-bento-grid__title">Tout ce dont vous avez besoin</h2>
                            <p class="gas-block-bento-grid__subtitle">Une plateforme complète pour accompagner vos membres.</p>
        
        <div class="gas-block-bento-grid__grid">
                            <a class="gas-block-bento-grid__item gas-block-bento-grid__item--large gas-block-bento-grid__item--kind-content gas-block-bento-grid__item--pos-1" href="#">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">✦</span>
                                                                                        <span class="gas-block-bento-grid__eyebrow">Plateforme</span>
                                                                                        <h3 class="gas-block-bento-grid__item-title">Espace membre unifié</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Activités, ressources et communauté réunies dans un seul espace clair et accessible.</p>
                                                    </div>
                                    </a>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--small gas-block-bento-grid__item--kind-content gas-block-bento-grid__item--pos-2">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">⚡</span>
                                                                                                                    <h3 class="gas-block-bento-grid__item-title">Rapide</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Des pages légères et instantanées.</p>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--tall gas-block-bento-grid__item--kind-content gas-block-bento-grid__item--pos-3">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">🔒</span>
                                                                                        <span class="gas-block-bento-grid__eyebrow">Confiance</span>
                                                                                        <h3 class="gas-block-bento-grid__item-title">Sécurisé</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Vos données protégées, hébergées en Suisse, conformes RGPD.</p>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--wide gas-block-bento-grid__item--kind-content gas-block-bento-grid__item--pos-4">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">🌍</span>
                                                                                                                    <h3 class="gas-block-bento-grid__item-title">Multilingue</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Un contenu adapté à chaque audience, dans sa langue.</p>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--small gas-block-bento-grid__item--kind-content gas-block-bento-grid__item--pos-5">
                                                                <div class="gas-block-bento-grid__body">
                                                            <span class="gas-block-bento-grid__icon" aria-hidden="true">♥</span>
                                                                                                                    <h3 class="gas-block-bento-grid__item-title">Bienveillant</h3>
                                                                                        <p class="gas-block-bento-grid__item-text">Une communauté à votre écoute.</p>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--small gas-block-bento-grid__item--kind-stat gas-block-bento-grid__item--pos-6">
                                                                <div class="gas-block-bento-grid__body gas-block-bento-grid__stat">
                                                            <span class="gas-block-bento-grid__stat-value">12 ans</span>
                                                                                        <span class="gas-block-bento-grid__stat-label">D&#039;accompagnement</span>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--small gas-block-bento-grid__item--kind-stat gas-block-bento-grid__item--pos-7">
                                                                <div class="gas-block-bento-grid__body gas-block-bento-grid__stat">
                                                            <span class="gas-block-bento-grid__stat-value">450+</span>
                                                                                        <span class="gas-block-bento-grid__stat-label">Membres actifs</span>
                                                    </div>
                                    </div>
                            <div class="gas-block-bento-grid__item gas-block-bento-grid__item--wide gas-block-bento-grid__item--kind-quote gas-block-bento-grid__item--pos-8">
                                                                <blockquote class="gas-block-bento-grid__body gas-block-bento-grid__quote">
                                                            <p class="gas-block-bento-grid__quote-text">Une communauté à votre écoute, qui a changé ma façon de vivre mes activités au quotidien.</p>
                                                                                        <cite class="gas-block-bento-grid__quote-cite">Un membre depuis 2019</cite>
                                                    </blockquote>
                                    </div>
                    </div>
    </div>
</section>
</div>

Archive filtrable `card_archive`

Collection dynamique filtrable, cherchable et paginée (annonces, personnes, activités, documents, comité, entités). En-tête + barre de recherche + filtres à facettes + grille de cartes + pagination. Consomme la source dynamique via /gas/v1/cards/archive.

variante : grid

0 résultats

Aucun résultat

Voir le HTML rendu

<div id="sample_card_archive_001" class="gas-block-anchor" data-gas-block-id="sample_card_archive_001"><section class="gas-block-card-archive gas-block-card-archive--cols-3 gas-block-card-archive--style-elevated gas-block-card-archive--layout-grid gas-block-card-archive--fit-cover gas-block-card-archive--source-annonce gas-block-card-archive--filters-chips"
         data-block-type="card_archive"
         data-source="annonce"
         data-pagination-mode="paginated"
         data-gas-block-enhancer="card_archive"
         data-gas-block-config="{&quot;source&quot;:&quot;annonce&quot;,&quot;isManual&quot;:false,&quot;perPage&quot;:12,&quot;restUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive&quot;,&quot;aiSearchRestUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive\/ai-search&quot;,&quot;locale&quot;:&quot;fr&quot;,&quot;layout&quot;:&quot;grid&quot;,&quot;allowViewToggle&quot;:false,&quot;paginationMode&quot;:&quot;paginated&quot;,&quot;filtersLayout&quot;:&quot;chips&quot;,&quot;aiSearchEnabled&quot;:false,&quot;aiSearchMode&quot;:&quot;assistive&quot;,&quot;showSort&quot;:true,&quot;sortOptions&quot;:[{&quot;value&quot;:&quot;latest&quot;,&quot;label&quot;:&quot;Plus r\u00e9cents&quot;},{&quot;value&quot;:&quot;title&quot;,&quot;label&quot;:&quot;A \u2192 Z&quot;},{&quot;value&quot;:&quot;oldest&quot;,&quot;label&quot;:&quot;Plus anciens&quot;},{&quot;value&quot;:&quot;manual&quot;,&quot;label&quot;:&quot;Ordre \u00e9ditorial&quot;}],&quot;showAutocomplete&quot;:true,&quot;lockedFieldFilters&quot;:[],&quot;prevLabel&quot;:&quot;Pr\u00e9c\u00e9dent&quot;,&quot;nextLabel&quot;:&quot;Suivant&quot;,&quot;loadMoreLabel&quot;:&quot;Charger plus&quot;,&quot;loadingLabel&quot;:&quot;Chargement\u2026&quot;,&quot;resultsLabel&quot;:&quot;%n% r\u00e9sultat|%n% r\u00e9sultats&quot;,&quot;resetLabel&quot;:&quot;R\u00e9initialiser&quot;,&quot;activeFiltersLabel&quot;:&quot;Filtres actifs&quot;,&quot;aiSearchLabel&quot;:&quot;Recherche guid\u00e9e&quot;,&quot;aiSearchButton&quot;:&quot;Explorer&quot;,&quot;aiSearchLoading&quot;:&quot;Analyse\u2026&quot;,&quot;aiSearchError&quot;:&quot;Recherche guid\u00e9e momentan\u00e9ment indisponible.&quot;,&quot;aiSearchFallback&quot;:&quot;Recherche simple appliqu\u00e9e.&quot;,&quot;aiSearchSemantic&quot;:&quot;R\u00e9sultats par pertinence s\u00e9mantique&quot;,&quot;aiStatusSemantic&quot;:&quot;Class\u00e9 par pertinence pour \u00ab %query% \u00bb&quot;,&quot;aiStatusSemanticApproximate&quot;:&quot;R\u00e9sultats approximatifs pour \u00ab %query% \u00bb&quot;,&quot;aiStatusFallback&quot;:&quot;Recherche simple pour \u00ab %query% \u00bb&quot;,&quot;aiStatusClear&quot;:&quot;Effacer&quot;,&quot;semanticMinGoodScore&quot;:0.45}">
    <div class="gas-block-card-archive__inner">
        
                            <div class="gas-block-card-archive__toolbar">
                
                                    <form class="gas-block-card-archive__search" method="get" role="search">
                                                                                                                        <input class="gas-block-card-archive__search-input" type="search" name="ca_q" value=""
                               placeholder="Rechercher…"
                               aria-label="Rechercher"
                               list="gas-card-archive-suggestions-1" />
                                                    <datalist id="gas-card-archive-suggestions-1" class="gas-block-card-archive__suggestions">
                                                            </datalist>
                                                <button class="gas-button gas-button--primary gas-block-card-archive__search-btn" type="submit">Rechercher</button>
                    </form>
                
                                    <form class="gas-block-card-archive__sort" method="get">
                                                                                                                        <label class="gas-block-card-archive__sort-label" for="ca-sort-select">Trier</label>
                        <select id="ca-sort-select" class="gas-block-card-archive__sort-select" name="ca_sort">
                                                            <option value="latest" selected='selected'>Plus récents</option>
                                                            <option value="title">A → Z</option>
                                                            <option value="oldest">Plus anciens</option>
                                                            <option value="manual">Ordre éditorial</option>
                                                    </select>
                        <noscript><button type="submit" class="gas-button gas-button--secondary">OK</button></noscript>
                    </form>
                
                
                                                    
                                    
                
                
                
                            </div>
        
        
        
        
                <p class="gas-block-card-archive__count" aria-live="polite">0 résultats</p>

                    <div class="gas-block-card-archive__empty">Aucun résultat</div>
                    </div>
</section>
</div>

variante : list

0 résultats

Aucun résultat

Voir le HTML rendu

<div id="sample_card_archive_001" class="gas-block-anchor" data-gas-block-id="sample_card_archive_001"><section class="gas-block-card-archive gas-block-card-archive--cols-3 gas-block-card-archive--style-elevated gas-block-card-archive--layout-list gas-block-card-archive--fit-cover gas-block-card-archive--source-annonce gas-block-card-archive--filters-chips"
         data-block-type="card_archive"
         data-source="annonce"
         data-pagination-mode="paginated"
         data-gas-block-enhancer="card_archive"
         data-gas-block-config="{&quot;source&quot;:&quot;annonce&quot;,&quot;isManual&quot;:false,&quot;perPage&quot;:12,&quot;restUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive&quot;,&quot;aiSearchRestUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive\/ai-search&quot;,&quot;locale&quot;:&quot;fr&quot;,&quot;layout&quot;:&quot;list&quot;,&quot;allowViewToggle&quot;:false,&quot;paginationMode&quot;:&quot;paginated&quot;,&quot;filtersLayout&quot;:&quot;chips&quot;,&quot;aiSearchEnabled&quot;:false,&quot;aiSearchMode&quot;:&quot;assistive&quot;,&quot;showSort&quot;:true,&quot;sortOptions&quot;:[{&quot;value&quot;:&quot;latest&quot;,&quot;label&quot;:&quot;Plus r\u00e9cents&quot;},{&quot;value&quot;:&quot;title&quot;,&quot;label&quot;:&quot;A \u2192 Z&quot;},{&quot;value&quot;:&quot;oldest&quot;,&quot;label&quot;:&quot;Plus anciens&quot;},{&quot;value&quot;:&quot;manual&quot;,&quot;label&quot;:&quot;Ordre \u00e9ditorial&quot;}],&quot;showAutocomplete&quot;:true,&quot;lockedFieldFilters&quot;:[],&quot;prevLabel&quot;:&quot;Pr\u00e9c\u00e9dent&quot;,&quot;nextLabel&quot;:&quot;Suivant&quot;,&quot;loadMoreLabel&quot;:&quot;Charger plus&quot;,&quot;loadingLabel&quot;:&quot;Chargement\u2026&quot;,&quot;resultsLabel&quot;:&quot;%n% r\u00e9sultat|%n% r\u00e9sultats&quot;,&quot;resetLabel&quot;:&quot;R\u00e9initialiser&quot;,&quot;activeFiltersLabel&quot;:&quot;Filtres actifs&quot;,&quot;aiSearchLabel&quot;:&quot;Recherche guid\u00e9e&quot;,&quot;aiSearchButton&quot;:&quot;Explorer&quot;,&quot;aiSearchLoading&quot;:&quot;Analyse\u2026&quot;,&quot;aiSearchError&quot;:&quot;Recherche guid\u00e9e momentan\u00e9ment indisponible.&quot;,&quot;aiSearchFallback&quot;:&quot;Recherche simple appliqu\u00e9e.&quot;,&quot;aiSearchSemantic&quot;:&quot;R\u00e9sultats par pertinence s\u00e9mantique&quot;,&quot;aiStatusSemantic&quot;:&quot;Class\u00e9 par pertinence pour \u00ab %query% \u00bb&quot;,&quot;aiStatusSemanticApproximate&quot;:&quot;R\u00e9sultats approximatifs pour \u00ab %query% \u00bb&quot;,&quot;aiStatusFallback&quot;:&quot;Recherche simple pour \u00ab %query% \u00bb&quot;,&quot;aiStatusClear&quot;:&quot;Effacer&quot;,&quot;semanticMinGoodScore&quot;:0.45}">
    <div class="gas-block-card-archive__inner">
        
                            <div class="gas-block-card-archive__toolbar">
                
                                    <form class="gas-block-card-archive__search" method="get" role="search">
                                                                                                                        <input class="gas-block-card-archive__search-input" type="search" name="ca_q" value=""
                               placeholder="Rechercher…"
                               aria-label="Rechercher"
                               list="gas-card-archive-suggestions-1" />
                                                    <datalist id="gas-card-archive-suggestions-1" class="gas-block-card-archive__suggestions">
                                                            </datalist>
                                                <button class="gas-button gas-button--primary gas-block-card-archive__search-btn" type="submit">Rechercher</button>
                    </form>
                
                                    <form class="gas-block-card-archive__sort" method="get">
                                                                                                                        <label class="gas-block-card-archive__sort-label" for="ca-sort-select">Trier</label>
                        <select id="ca-sort-select" class="gas-block-card-archive__sort-select" name="ca_sort">
                                                            <option value="latest" selected='selected'>Plus récents</option>
                                                            <option value="title">A → Z</option>
                                                            <option value="oldest">Plus anciens</option>
                                                            <option value="manual">Ordre éditorial</option>
                                                    </select>
                        <noscript><button type="submit" class="gas-button gas-button--secondary">OK</button></noscript>
                    </form>
                
                
                                                    
                                    
                
                
                
                            </div>
        
        
        
        
                <p class="gas-block-card-archive__count" aria-live="polite">0 résultats</p>

                    <div class="gas-block-card-archive__empty">Aucun résultat</div>
                    </div>
</section>
</div>

variante : gallery

0 résultats

Aucun résultat

Voir le HTML rendu

<div id="sample_card_archive_001" class="gas-block-anchor" data-gas-block-id="sample_card_archive_001"><section class="gas-block-card-archive gas-block-card-archive--cols-3 gas-block-card-archive--style-elevated gas-block-card-archive--layout-gallery gas-block-card-archive--fit-cover gas-block-card-archive--source-annonce gas-block-card-archive--filters-chips"
         data-block-type="card_archive"
         data-source="annonce"
         data-pagination-mode="paginated"
         data-gas-block-enhancer="card_archive"
         data-gas-block-config="{&quot;source&quot;:&quot;annonce&quot;,&quot;isManual&quot;:false,&quot;perPage&quot;:12,&quot;restUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive&quot;,&quot;aiSearchRestUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive\/ai-search&quot;,&quot;locale&quot;:&quot;fr&quot;,&quot;layout&quot;:&quot;gallery&quot;,&quot;allowViewToggle&quot;:false,&quot;paginationMode&quot;:&quot;paginated&quot;,&quot;filtersLayout&quot;:&quot;chips&quot;,&quot;aiSearchEnabled&quot;:false,&quot;aiSearchMode&quot;:&quot;assistive&quot;,&quot;showSort&quot;:true,&quot;sortOptions&quot;:[{&quot;value&quot;:&quot;latest&quot;,&quot;label&quot;:&quot;Plus r\u00e9cents&quot;},{&quot;value&quot;:&quot;title&quot;,&quot;label&quot;:&quot;A \u2192 Z&quot;},{&quot;value&quot;:&quot;oldest&quot;,&quot;label&quot;:&quot;Plus anciens&quot;},{&quot;value&quot;:&quot;manual&quot;,&quot;label&quot;:&quot;Ordre \u00e9ditorial&quot;}],&quot;showAutocomplete&quot;:true,&quot;lockedFieldFilters&quot;:[],&quot;prevLabel&quot;:&quot;Pr\u00e9c\u00e9dent&quot;,&quot;nextLabel&quot;:&quot;Suivant&quot;,&quot;loadMoreLabel&quot;:&quot;Charger plus&quot;,&quot;loadingLabel&quot;:&quot;Chargement\u2026&quot;,&quot;resultsLabel&quot;:&quot;%n% r\u00e9sultat|%n% r\u00e9sultats&quot;,&quot;resetLabel&quot;:&quot;R\u00e9initialiser&quot;,&quot;activeFiltersLabel&quot;:&quot;Filtres actifs&quot;,&quot;aiSearchLabel&quot;:&quot;Recherche guid\u00e9e&quot;,&quot;aiSearchButton&quot;:&quot;Explorer&quot;,&quot;aiSearchLoading&quot;:&quot;Analyse\u2026&quot;,&quot;aiSearchError&quot;:&quot;Recherche guid\u00e9e momentan\u00e9ment indisponible.&quot;,&quot;aiSearchFallback&quot;:&quot;Recherche simple appliqu\u00e9e.&quot;,&quot;aiSearchSemantic&quot;:&quot;R\u00e9sultats par pertinence s\u00e9mantique&quot;,&quot;aiStatusSemantic&quot;:&quot;Class\u00e9 par pertinence pour \u00ab %query% \u00bb&quot;,&quot;aiStatusSemanticApproximate&quot;:&quot;R\u00e9sultats approximatifs pour \u00ab %query% \u00bb&quot;,&quot;aiStatusFallback&quot;:&quot;Recherche simple pour \u00ab %query% \u00bb&quot;,&quot;aiStatusClear&quot;:&quot;Effacer&quot;,&quot;semanticMinGoodScore&quot;:0.45}">
    <div class="gas-block-card-archive__inner">
        
                            <div class="gas-block-card-archive__toolbar">
                
                                    <form class="gas-block-card-archive__search" method="get" role="search">
                                                                                                                        <input class="gas-block-card-archive__search-input" type="search" name="ca_q" value=""
                               placeholder="Rechercher…"
                               aria-label="Rechercher"
                               list="gas-card-archive-suggestions-1" />
                                                    <datalist id="gas-card-archive-suggestions-1" class="gas-block-card-archive__suggestions">
                                                            </datalist>
                                                <button class="gas-button gas-button--primary gas-block-card-archive__search-btn" type="submit">Rechercher</button>
                    </form>
                
                                    <form class="gas-block-card-archive__sort" method="get">
                                                                                                                        <label class="gas-block-card-archive__sort-label" for="ca-sort-select">Trier</label>
                        <select id="ca-sort-select" class="gas-block-card-archive__sort-select" name="ca_sort">
                                                            <option value="latest" selected='selected'>Plus récents</option>
                                                            <option value="title">A → Z</option>
                                                            <option value="oldest">Plus anciens</option>
                                                            <option value="manual">Ordre éditorial</option>
                                                    </select>
                        <noscript><button type="submit" class="gas-button gas-button--secondary">OK</button></noscript>
                    </form>
                
                
                                                    
                                    
                
                
                
                            </div>
        
        
        
        
                <p class="gas-block-card-archive__count" aria-live="polite">0 résultats</p>

                    <div class="gas-block-card-archive__empty">Aucun résultat</div>
                    </div>
</section>
</div>

variante : quote

0 résultats

Aucun résultat

Voir le HTML rendu

<div id="sample_card_archive_001" class="gas-block-anchor" data-gas-block-id="sample_card_archive_001"><section class="gas-block-card-archive gas-block-card-archive--cols-3 gas-block-card-archive--style-elevated gas-block-card-archive--layout-quote gas-block-card-archive--fit-cover gas-block-card-archive--source-annonce gas-block-card-archive--filters-chips"
         data-block-type="card_archive"
         data-source="annonce"
         data-pagination-mode="paginated"
         data-gas-block-enhancer="card_archive"
         data-gas-block-config="{&quot;source&quot;:&quot;annonce&quot;,&quot;isManual&quot;:false,&quot;perPage&quot;:12,&quot;restUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive&quot;,&quot;aiSearchRestUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive\/ai-search&quot;,&quot;locale&quot;:&quot;fr&quot;,&quot;layout&quot;:&quot;quote&quot;,&quot;allowViewToggle&quot;:false,&quot;paginationMode&quot;:&quot;paginated&quot;,&quot;filtersLayout&quot;:&quot;chips&quot;,&quot;aiSearchEnabled&quot;:false,&quot;aiSearchMode&quot;:&quot;assistive&quot;,&quot;showSort&quot;:true,&quot;sortOptions&quot;:[{&quot;value&quot;:&quot;latest&quot;,&quot;label&quot;:&quot;Plus r\u00e9cents&quot;},{&quot;value&quot;:&quot;title&quot;,&quot;label&quot;:&quot;A \u2192 Z&quot;},{&quot;value&quot;:&quot;oldest&quot;,&quot;label&quot;:&quot;Plus anciens&quot;},{&quot;value&quot;:&quot;manual&quot;,&quot;label&quot;:&quot;Ordre \u00e9ditorial&quot;}],&quot;showAutocomplete&quot;:true,&quot;lockedFieldFilters&quot;:[],&quot;prevLabel&quot;:&quot;Pr\u00e9c\u00e9dent&quot;,&quot;nextLabel&quot;:&quot;Suivant&quot;,&quot;loadMoreLabel&quot;:&quot;Charger plus&quot;,&quot;loadingLabel&quot;:&quot;Chargement\u2026&quot;,&quot;resultsLabel&quot;:&quot;%n% r\u00e9sultat|%n% r\u00e9sultats&quot;,&quot;resetLabel&quot;:&quot;R\u00e9initialiser&quot;,&quot;activeFiltersLabel&quot;:&quot;Filtres actifs&quot;,&quot;aiSearchLabel&quot;:&quot;Recherche guid\u00e9e&quot;,&quot;aiSearchButton&quot;:&quot;Explorer&quot;,&quot;aiSearchLoading&quot;:&quot;Analyse\u2026&quot;,&quot;aiSearchError&quot;:&quot;Recherche guid\u00e9e momentan\u00e9ment indisponible.&quot;,&quot;aiSearchFallback&quot;:&quot;Recherche simple appliqu\u00e9e.&quot;,&quot;aiSearchSemantic&quot;:&quot;R\u00e9sultats par pertinence s\u00e9mantique&quot;,&quot;aiStatusSemantic&quot;:&quot;Class\u00e9 par pertinence pour \u00ab %query% \u00bb&quot;,&quot;aiStatusSemanticApproximate&quot;:&quot;R\u00e9sultats approximatifs pour \u00ab %query% \u00bb&quot;,&quot;aiStatusFallback&quot;:&quot;Recherche simple pour \u00ab %query% \u00bb&quot;,&quot;aiStatusClear&quot;:&quot;Effacer&quot;,&quot;semanticMinGoodScore&quot;:0.45}">
    <div class="gas-block-card-archive__inner">
        
                            <div class="gas-block-card-archive__toolbar">
                
                                    <form class="gas-block-card-archive__search" method="get" role="search">
                                                                                                                        <input class="gas-block-card-archive__search-input" type="search" name="ca_q" value=""
                               placeholder="Rechercher…"
                               aria-label="Rechercher"
                               list="gas-card-archive-suggestions-1" />
                                                    <datalist id="gas-card-archive-suggestions-1" class="gas-block-card-archive__suggestions">
                                                            </datalist>
                                                <button class="gas-button gas-button--primary gas-block-card-archive__search-btn" type="submit">Rechercher</button>
                    </form>
                
                                    <form class="gas-block-card-archive__sort" method="get">
                                                                                                                        <label class="gas-block-card-archive__sort-label" for="ca-sort-select">Trier</label>
                        <select id="ca-sort-select" class="gas-block-card-archive__sort-select" name="ca_sort">
                                                            <option value="latest" selected='selected'>Plus récents</option>
                                                            <option value="title">A → Z</option>
                                                            <option value="oldest">Plus anciens</option>
                                                            <option value="manual">Ordre éditorial</option>
                                                    </select>
                        <noscript><button type="submit" class="gas-button gas-button--secondary">OK</button></noscript>
                    </form>
                
                
                                                    
                                    
                
                
                
                            </div>
        
        
        
        
                <p class="gas-block-card-archive__count" aria-live="polite">0 résultats</p>

                    <div class="gas-block-card-archive__empty">Aucun résultat</div>
                    </div>
</section>
</div>

variante : title_only

0 résultats

Aucun résultat

Voir le HTML rendu

<div id="sample_card_archive_001" class="gas-block-anchor" data-gas-block-id="sample_card_archive_001"><section class="gas-block-card-archive gas-block-card-archive--cols-3 gas-block-card-archive--style-elevated gas-block-card-archive--layout-title_only gas-block-card-archive--fit-cover gas-block-card-archive--source-annonce gas-block-card-archive--filters-chips"
         data-block-type="card_archive"
         data-source="annonce"
         data-pagination-mode="paginated"
         data-gas-block-enhancer="card_archive"
         data-gas-block-config="{&quot;source&quot;:&quot;annonce&quot;,&quot;isManual&quot;:false,&quot;perPage&quot;:12,&quot;restUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive&quot;,&quot;aiSearchRestUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive\/ai-search&quot;,&quot;locale&quot;:&quot;fr&quot;,&quot;layout&quot;:&quot;title_only&quot;,&quot;allowViewToggle&quot;:false,&quot;paginationMode&quot;:&quot;paginated&quot;,&quot;filtersLayout&quot;:&quot;chips&quot;,&quot;aiSearchEnabled&quot;:false,&quot;aiSearchMode&quot;:&quot;assistive&quot;,&quot;showSort&quot;:true,&quot;sortOptions&quot;:[{&quot;value&quot;:&quot;latest&quot;,&quot;label&quot;:&quot;Plus r\u00e9cents&quot;},{&quot;value&quot;:&quot;title&quot;,&quot;label&quot;:&quot;A \u2192 Z&quot;},{&quot;value&quot;:&quot;oldest&quot;,&quot;label&quot;:&quot;Plus anciens&quot;},{&quot;value&quot;:&quot;manual&quot;,&quot;label&quot;:&quot;Ordre \u00e9ditorial&quot;}],&quot;showAutocomplete&quot;:true,&quot;lockedFieldFilters&quot;:[],&quot;prevLabel&quot;:&quot;Pr\u00e9c\u00e9dent&quot;,&quot;nextLabel&quot;:&quot;Suivant&quot;,&quot;loadMoreLabel&quot;:&quot;Charger plus&quot;,&quot;loadingLabel&quot;:&quot;Chargement\u2026&quot;,&quot;resultsLabel&quot;:&quot;%n% r\u00e9sultat|%n% r\u00e9sultats&quot;,&quot;resetLabel&quot;:&quot;R\u00e9initialiser&quot;,&quot;activeFiltersLabel&quot;:&quot;Filtres actifs&quot;,&quot;aiSearchLabel&quot;:&quot;Recherche guid\u00e9e&quot;,&quot;aiSearchButton&quot;:&quot;Explorer&quot;,&quot;aiSearchLoading&quot;:&quot;Analyse\u2026&quot;,&quot;aiSearchError&quot;:&quot;Recherche guid\u00e9e momentan\u00e9ment indisponible.&quot;,&quot;aiSearchFallback&quot;:&quot;Recherche simple appliqu\u00e9e.&quot;,&quot;aiSearchSemantic&quot;:&quot;R\u00e9sultats par pertinence s\u00e9mantique&quot;,&quot;aiStatusSemantic&quot;:&quot;Class\u00e9 par pertinence pour \u00ab %query% \u00bb&quot;,&quot;aiStatusSemanticApproximate&quot;:&quot;R\u00e9sultats approximatifs pour \u00ab %query% \u00bb&quot;,&quot;aiStatusFallback&quot;:&quot;Recherche simple pour \u00ab %query% \u00bb&quot;,&quot;aiStatusClear&quot;:&quot;Effacer&quot;,&quot;semanticMinGoodScore&quot;:0.45}">
    <div class="gas-block-card-archive__inner">
        
                            <div class="gas-block-card-archive__toolbar">
                
                                    <form class="gas-block-card-archive__search" method="get" role="search">
                                                                                                                        <input class="gas-block-card-archive__search-input" type="search" name="ca_q" value=""
                               placeholder="Rechercher…"
                               aria-label="Rechercher"
                               list="gas-card-archive-suggestions-1" />
                                                    <datalist id="gas-card-archive-suggestions-1" class="gas-block-card-archive__suggestions">
                                                            </datalist>
                                                <button class="gas-button gas-button--primary gas-block-card-archive__search-btn" type="submit">Rechercher</button>
                    </form>
                
                                    <form class="gas-block-card-archive__sort" method="get">
                                                                                                                        <label class="gas-block-card-archive__sort-label" for="ca-sort-select">Trier</label>
                        <select id="ca-sort-select" class="gas-block-card-archive__sort-select" name="ca_sort">
                                                            <option value="latest" selected='selected'>Plus récents</option>
                                                            <option value="title">A → Z</option>
                                                            <option value="oldest">Plus anciens</option>
                                                            <option value="manual">Ordre éditorial</option>
                                                    </select>
                        <noscript><button type="submit" class="gas-button gas-button--secondary">OK</button></noscript>
                    </form>
                
                
                                                    
                                    
                
                
                
                            </div>
        
        
        
        
                <p class="gas-block-card-archive__count" aria-live="polite">0 résultats</p>

                    <div class="gas-block-card-archive__empty">Aucun résultat</div>
                    </div>
</section>
</div>

variante : title_excerpt

0 résultats

Aucun résultat

Voir le HTML rendu

<div id="sample_card_archive_001" class="gas-block-anchor" data-gas-block-id="sample_card_archive_001"><section class="gas-block-card-archive gas-block-card-archive--cols-3 gas-block-card-archive--style-elevated gas-block-card-archive--layout-title_excerpt gas-block-card-archive--fit-cover gas-block-card-archive--source-annonce gas-block-card-archive--filters-chips"
         data-block-type="card_archive"
         data-source="annonce"
         data-pagination-mode="paginated"
         data-gas-block-enhancer="card_archive"
         data-gas-block-config="{&quot;source&quot;:&quot;annonce&quot;,&quot;isManual&quot;:false,&quot;perPage&quot;:12,&quot;restUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive&quot;,&quot;aiSearchRestUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive\/ai-search&quot;,&quot;locale&quot;:&quot;fr&quot;,&quot;layout&quot;:&quot;title_excerpt&quot;,&quot;allowViewToggle&quot;:false,&quot;paginationMode&quot;:&quot;paginated&quot;,&quot;filtersLayout&quot;:&quot;chips&quot;,&quot;aiSearchEnabled&quot;:false,&quot;aiSearchMode&quot;:&quot;assistive&quot;,&quot;showSort&quot;:true,&quot;sortOptions&quot;:[{&quot;value&quot;:&quot;latest&quot;,&quot;label&quot;:&quot;Plus r\u00e9cents&quot;},{&quot;value&quot;:&quot;title&quot;,&quot;label&quot;:&quot;A \u2192 Z&quot;},{&quot;value&quot;:&quot;oldest&quot;,&quot;label&quot;:&quot;Plus anciens&quot;},{&quot;value&quot;:&quot;manual&quot;,&quot;label&quot;:&quot;Ordre \u00e9ditorial&quot;}],&quot;showAutocomplete&quot;:true,&quot;lockedFieldFilters&quot;:[],&quot;prevLabel&quot;:&quot;Pr\u00e9c\u00e9dent&quot;,&quot;nextLabel&quot;:&quot;Suivant&quot;,&quot;loadMoreLabel&quot;:&quot;Charger plus&quot;,&quot;loadingLabel&quot;:&quot;Chargement\u2026&quot;,&quot;resultsLabel&quot;:&quot;%n% r\u00e9sultat|%n% r\u00e9sultats&quot;,&quot;resetLabel&quot;:&quot;R\u00e9initialiser&quot;,&quot;activeFiltersLabel&quot;:&quot;Filtres actifs&quot;,&quot;aiSearchLabel&quot;:&quot;Recherche guid\u00e9e&quot;,&quot;aiSearchButton&quot;:&quot;Explorer&quot;,&quot;aiSearchLoading&quot;:&quot;Analyse\u2026&quot;,&quot;aiSearchError&quot;:&quot;Recherche guid\u00e9e momentan\u00e9ment indisponible.&quot;,&quot;aiSearchFallback&quot;:&quot;Recherche simple appliqu\u00e9e.&quot;,&quot;aiSearchSemantic&quot;:&quot;R\u00e9sultats par pertinence s\u00e9mantique&quot;,&quot;aiStatusSemantic&quot;:&quot;Class\u00e9 par pertinence pour \u00ab %query% \u00bb&quot;,&quot;aiStatusSemanticApproximate&quot;:&quot;R\u00e9sultats approximatifs pour \u00ab %query% \u00bb&quot;,&quot;aiStatusFallback&quot;:&quot;Recherche simple pour \u00ab %query% \u00bb&quot;,&quot;aiStatusClear&quot;:&quot;Effacer&quot;,&quot;semanticMinGoodScore&quot;:0.45}">
    <div class="gas-block-card-archive__inner">
        
                            <div class="gas-block-card-archive__toolbar">
                
                                    <form class="gas-block-card-archive__search" method="get" role="search">
                                                                                                                        <input class="gas-block-card-archive__search-input" type="search" name="ca_q" value=""
                               placeholder="Rechercher…"
                               aria-label="Rechercher"
                               list="gas-card-archive-suggestions-1" />
                                                    <datalist id="gas-card-archive-suggestions-1" class="gas-block-card-archive__suggestions">
                                                            </datalist>
                                                <button class="gas-button gas-button--primary gas-block-card-archive__search-btn" type="submit">Rechercher</button>
                    </form>
                
                                    <form class="gas-block-card-archive__sort" method="get">
                                                                                                                        <label class="gas-block-card-archive__sort-label" for="ca-sort-select">Trier</label>
                        <select id="ca-sort-select" class="gas-block-card-archive__sort-select" name="ca_sort">
                                                            <option value="latest" selected='selected'>Plus récents</option>
                                                            <option value="title">A → Z</option>
                                                            <option value="oldest">Plus anciens</option>
                                                            <option value="manual">Ordre éditorial</option>
                                                    </select>
                        <noscript><button type="submit" class="gas-button gas-button--secondary">OK</button></noscript>
                    </form>
                
                
                                                    
                                    
                
                
                
                            </div>
        
        
        
        
                <p class="gas-block-card-archive__count" aria-live="polite">0 résultats</p>

                    <div class="gas-block-card-archive__empty">Aucun résultat</div>
                    </div>
</section>
</div>

variante : media_left

0 résultats

Aucun résultat

Voir le HTML rendu

<div id="sample_card_archive_001" class="gas-block-anchor" data-gas-block-id="sample_card_archive_001"><section class="gas-block-card-archive gas-block-card-archive--cols-3 gas-block-card-archive--style-elevated gas-block-card-archive--layout-media_left gas-block-card-archive--fit-cover gas-block-card-archive--source-annonce gas-block-card-archive--filters-chips"
         data-block-type="card_archive"
         data-source="annonce"
         data-pagination-mode="paginated"
         data-gas-block-enhancer="card_archive"
         data-gas-block-config="{&quot;source&quot;:&quot;annonce&quot;,&quot;isManual&quot;:false,&quot;perPage&quot;:12,&quot;restUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive&quot;,&quot;aiSearchRestUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive\/ai-search&quot;,&quot;locale&quot;:&quot;fr&quot;,&quot;layout&quot;:&quot;media_left&quot;,&quot;allowViewToggle&quot;:false,&quot;paginationMode&quot;:&quot;paginated&quot;,&quot;filtersLayout&quot;:&quot;chips&quot;,&quot;aiSearchEnabled&quot;:false,&quot;aiSearchMode&quot;:&quot;assistive&quot;,&quot;showSort&quot;:true,&quot;sortOptions&quot;:[{&quot;value&quot;:&quot;latest&quot;,&quot;label&quot;:&quot;Plus r\u00e9cents&quot;},{&quot;value&quot;:&quot;title&quot;,&quot;label&quot;:&quot;A \u2192 Z&quot;},{&quot;value&quot;:&quot;oldest&quot;,&quot;label&quot;:&quot;Plus anciens&quot;},{&quot;value&quot;:&quot;manual&quot;,&quot;label&quot;:&quot;Ordre \u00e9ditorial&quot;}],&quot;showAutocomplete&quot;:true,&quot;lockedFieldFilters&quot;:[],&quot;prevLabel&quot;:&quot;Pr\u00e9c\u00e9dent&quot;,&quot;nextLabel&quot;:&quot;Suivant&quot;,&quot;loadMoreLabel&quot;:&quot;Charger plus&quot;,&quot;loadingLabel&quot;:&quot;Chargement\u2026&quot;,&quot;resultsLabel&quot;:&quot;%n% r\u00e9sultat|%n% r\u00e9sultats&quot;,&quot;resetLabel&quot;:&quot;R\u00e9initialiser&quot;,&quot;activeFiltersLabel&quot;:&quot;Filtres actifs&quot;,&quot;aiSearchLabel&quot;:&quot;Recherche guid\u00e9e&quot;,&quot;aiSearchButton&quot;:&quot;Explorer&quot;,&quot;aiSearchLoading&quot;:&quot;Analyse\u2026&quot;,&quot;aiSearchError&quot;:&quot;Recherche guid\u00e9e momentan\u00e9ment indisponible.&quot;,&quot;aiSearchFallback&quot;:&quot;Recherche simple appliqu\u00e9e.&quot;,&quot;aiSearchSemantic&quot;:&quot;R\u00e9sultats par pertinence s\u00e9mantique&quot;,&quot;aiStatusSemantic&quot;:&quot;Class\u00e9 par pertinence pour \u00ab %query% \u00bb&quot;,&quot;aiStatusSemanticApproximate&quot;:&quot;R\u00e9sultats approximatifs pour \u00ab %query% \u00bb&quot;,&quot;aiStatusFallback&quot;:&quot;Recherche simple pour \u00ab %query% \u00bb&quot;,&quot;aiStatusClear&quot;:&quot;Effacer&quot;,&quot;semanticMinGoodScore&quot;:0.45}">
    <div class="gas-block-card-archive__inner">
        
                            <div class="gas-block-card-archive__toolbar">
                
                                    <form class="gas-block-card-archive__search" method="get" role="search">
                                                                                                                        <input class="gas-block-card-archive__search-input" type="search" name="ca_q" value=""
                               placeholder="Rechercher…"
                               aria-label="Rechercher"
                               list="gas-card-archive-suggestions-1" />
                                                    <datalist id="gas-card-archive-suggestions-1" class="gas-block-card-archive__suggestions">
                                                            </datalist>
                                                <button class="gas-button gas-button--primary gas-block-card-archive__search-btn" type="submit">Rechercher</button>
                    </form>
                
                                    <form class="gas-block-card-archive__sort" method="get">
                                                                                                                        <label class="gas-block-card-archive__sort-label" for="ca-sort-select">Trier</label>
                        <select id="ca-sort-select" class="gas-block-card-archive__sort-select" name="ca_sort">
                                                            <option value="latest" selected='selected'>Plus récents</option>
                                                            <option value="title">A → Z</option>
                                                            <option value="oldest">Plus anciens</option>
                                                            <option value="manual">Ordre éditorial</option>
                                                    </select>
                        <noscript><button type="submit" class="gas-button gas-button--secondary">OK</button></noscript>
                    </form>
                
                
                                                    
                                    
                
                
                
                            </div>
        
        
        
        
                <p class="gas-block-card-archive__count" aria-live="polite">0 résultats</p>

                    <div class="gas-block-card-archive__empty">Aucun résultat</div>
                    </div>
</section>
</div>

variante : media_right

0 résultats

Aucun résultat

Voir le HTML rendu

<div id="sample_card_archive_001" class="gas-block-anchor" data-gas-block-id="sample_card_archive_001"><section class="gas-block-card-archive gas-block-card-archive--cols-3 gas-block-card-archive--style-elevated gas-block-card-archive--layout-media_right gas-block-card-archive--fit-cover gas-block-card-archive--source-annonce gas-block-card-archive--filters-chips"
         data-block-type="card_archive"
         data-source="annonce"
         data-pagination-mode="paginated"
         data-gas-block-enhancer="card_archive"
         data-gas-block-config="{&quot;source&quot;:&quot;annonce&quot;,&quot;isManual&quot;:false,&quot;perPage&quot;:12,&quot;restUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive&quot;,&quot;aiSearchRestUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive\/ai-search&quot;,&quot;locale&quot;:&quot;fr&quot;,&quot;layout&quot;:&quot;media_right&quot;,&quot;allowViewToggle&quot;:false,&quot;paginationMode&quot;:&quot;paginated&quot;,&quot;filtersLayout&quot;:&quot;chips&quot;,&quot;aiSearchEnabled&quot;:false,&quot;aiSearchMode&quot;:&quot;assistive&quot;,&quot;showSort&quot;:true,&quot;sortOptions&quot;:[{&quot;value&quot;:&quot;latest&quot;,&quot;label&quot;:&quot;Plus r\u00e9cents&quot;},{&quot;value&quot;:&quot;title&quot;,&quot;label&quot;:&quot;A \u2192 Z&quot;},{&quot;value&quot;:&quot;oldest&quot;,&quot;label&quot;:&quot;Plus anciens&quot;},{&quot;value&quot;:&quot;manual&quot;,&quot;label&quot;:&quot;Ordre \u00e9ditorial&quot;}],&quot;showAutocomplete&quot;:true,&quot;lockedFieldFilters&quot;:[],&quot;prevLabel&quot;:&quot;Pr\u00e9c\u00e9dent&quot;,&quot;nextLabel&quot;:&quot;Suivant&quot;,&quot;loadMoreLabel&quot;:&quot;Charger plus&quot;,&quot;loadingLabel&quot;:&quot;Chargement\u2026&quot;,&quot;resultsLabel&quot;:&quot;%n% r\u00e9sultat|%n% r\u00e9sultats&quot;,&quot;resetLabel&quot;:&quot;R\u00e9initialiser&quot;,&quot;activeFiltersLabel&quot;:&quot;Filtres actifs&quot;,&quot;aiSearchLabel&quot;:&quot;Recherche guid\u00e9e&quot;,&quot;aiSearchButton&quot;:&quot;Explorer&quot;,&quot;aiSearchLoading&quot;:&quot;Analyse\u2026&quot;,&quot;aiSearchError&quot;:&quot;Recherche guid\u00e9e momentan\u00e9ment indisponible.&quot;,&quot;aiSearchFallback&quot;:&quot;Recherche simple appliqu\u00e9e.&quot;,&quot;aiSearchSemantic&quot;:&quot;R\u00e9sultats par pertinence s\u00e9mantique&quot;,&quot;aiStatusSemantic&quot;:&quot;Class\u00e9 par pertinence pour \u00ab %query% \u00bb&quot;,&quot;aiStatusSemanticApproximate&quot;:&quot;R\u00e9sultats approximatifs pour \u00ab %query% \u00bb&quot;,&quot;aiStatusFallback&quot;:&quot;Recherche simple pour \u00ab %query% \u00bb&quot;,&quot;aiStatusClear&quot;:&quot;Effacer&quot;,&quot;semanticMinGoodScore&quot;:0.45}">
    <div class="gas-block-card-archive__inner">
        
                            <div class="gas-block-card-archive__toolbar">
                
                                    <form class="gas-block-card-archive__search" method="get" role="search">
                                                                                                                        <input class="gas-block-card-archive__search-input" type="search" name="ca_q" value=""
                               placeholder="Rechercher…"
                               aria-label="Rechercher"
                               list="gas-card-archive-suggestions-1" />
                                                    <datalist id="gas-card-archive-suggestions-1" class="gas-block-card-archive__suggestions">
                                                            </datalist>
                                                <button class="gas-button gas-button--primary gas-block-card-archive__search-btn" type="submit">Rechercher</button>
                    </form>
                
                                    <form class="gas-block-card-archive__sort" method="get">
                                                                                                                        <label class="gas-block-card-archive__sort-label" for="ca-sort-select">Trier</label>
                        <select id="ca-sort-select" class="gas-block-card-archive__sort-select" name="ca_sort">
                                                            <option value="latest" selected='selected'>Plus récents</option>
                                                            <option value="title">A → Z</option>
                                                            <option value="oldest">Plus anciens</option>
                                                            <option value="manual">Ordre éditorial</option>
                                                    </select>
                        <noscript><button type="submit" class="gas-button gas-button--secondary">OK</button></noscript>
                    </form>
                
                
                                                    
                                    
                
                
                
                            </div>
        
        
        
        
                <p class="gas-block-card-archive__count" aria-live="polite">0 résultats</p>

                    <div class="gas-block-card-archive__empty">Aucun résultat</div>
                    </div>
</section>
</div>

variante : split_media_left

0 résultats

Aucun résultat

Voir le HTML rendu

<div id="sample_card_archive_001" class="gas-block-anchor" data-gas-block-id="sample_card_archive_001"><section class="gas-block-card-archive gas-block-card-archive--cols-3 gas-block-card-archive--style-elevated gas-block-card-archive--layout-split_media_left gas-block-card-archive--fit-cover gas-block-card-archive--source-annonce gas-block-card-archive--filters-chips"
         data-block-type="card_archive"
         data-source="annonce"
         data-pagination-mode="paginated"
         data-gas-block-enhancer="card_archive"
         data-gas-block-config="{&quot;source&quot;:&quot;annonce&quot;,&quot;isManual&quot;:false,&quot;perPage&quot;:12,&quot;restUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive&quot;,&quot;aiSearchRestUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive\/ai-search&quot;,&quot;locale&quot;:&quot;fr&quot;,&quot;layout&quot;:&quot;split_media_left&quot;,&quot;allowViewToggle&quot;:false,&quot;paginationMode&quot;:&quot;paginated&quot;,&quot;filtersLayout&quot;:&quot;chips&quot;,&quot;aiSearchEnabled&quot;:false,&quot;aiSearchMode&quot;:&quot;assistive&quot;,&quot;showSort&quot;:true,&quot;sortOptions&quot;:[{&quot;value&quot;:&quot;latest&quot;,&quot;label&quot;:&quot;Plus r\u00e9cents&quot;},{&quot;value&quot;:&quot;title&quot;,&quot;label&quot;:&quot;A \u2192 Z&quot;},{&quot;value&quot;:&quot;oldest&quot;,&quot;label&quot;:&quot;Plus anciens&quot;},{&quot;value&quot;:&quot;manual&quot;,&quot;label&quot;:&quot;Ordre \u00e9ditorial&quot;}],&quot;showAutocomplete&quot;:true,&quot;lockedFieldFilters&quot;:[],&quot;prevLabel&quot;:&quot;Pr\u00e9c\u00e9dent&quot;,&quot;nextLabel&quot;:&quot;Suivant&quot;,&quot;loadMoreLabel&quot;:&quot;Charger plus&quot;,&quot;loadingLabel&quot;:&quot;Chargement\u2026&quot;,&quot;resultsLabel&quot;:&quot;%n% r\u00e9sultat|%n% r\u00e9sultats&quot;,&quot;resetLabel&quot;:&quot;R\u00e9initialiser&quot;,&quot;activeFiltersLabel&quot;:&quot;Filtres actifs&quot;,&quot;aiSearchLabel&quot;:&quot;Recherche guid\u00e9e&quot;,&quot;aiSearchButton&quot;:&quot;Explorer&quot;,&quot;aiSearchLoading&quot;:&quot;Analyse\u2026&quot;,&quot;aiSearchError&quot;:&quot;Recherche guid\u00e9e momentan\u00e9ment indisponible.&quot;,&quot;aiSearchFallback&quot;:&quot;Recherche simple appliqu\u00e9e.&quot;,&quot;aiSearchSemantic&quot;:&quot;R\u00e9sultats par pertinence s\u00e9mantique&quot;,&quot;aiStatusSemantic&quot;:&quot;Class\u00e9 par pertinence pour \u00ab %query% \u00bb&quot;,&quot;aiStatusSemanticApproximate&quot;:&quot;R\u00e9sultats approximatifs pour \u00ab %query% \u00bb&quot;,&quot;aiStatusFallback&quot;:&quot;Recherche simple pour \u00ab %query% \u00bb&quot;,&quot;aiStatusClear&quot;:&quot;Effacer&quot;,&quot;semanticMinGoodScore&quot;:0.45}">
    <div class="gas-block-card-archive__inner">
        
                            <div class="gas-block-card-archive__toolbar">
                
                                    <form class="gas-block-card-archive__search" method="get" role="search">
                                                                                                                        <input class="gas-block-card-archive__search-input" type="search" name="ca_q" value=""
                               placeholder="Rechercher…"
                               aria-label="Rechercher"
                               list="gas-card-archive-suggestions-1" />
                                                    <datalist id="gas-card-archive-suggestions-1" class="gas-block-card-archive__suggestions">
                                                            </datalist>
                                                <button class="gas-button gas-button--primary gas-block-card-archive__search-btn" type="submit">Rechercher</button>
                    </form>
                
                                    <form class="gas-block-card-archive__sort" method="get">
                                                                                                                        <label class="gas-block-card-archive__sort-label" for="ca-sort-select">Trier</label>
                        <select id="ca-sort-select" class="gas-block-card-archive__sort-select" name="ca_sort">
                                                            <option value="latest" selected='selected'>Plus récents</option>
                                                            <option value="title">A → Z</option>
                                                            <option value="oldest">Plus anciens</option>
                                                            <option value="manual">Ordre éditorial</option>
                                                    </select>
                        <noscript><button type="submit" class="gas-button gas-button--secondary">OK</button></noscript>
                    </form>
                
                
                                                    
                                    
                
                
                
                            </div>
        
        
        
        
                <p class="gas-block-card-archive__count" aria-live="polite">0 résultats</p>

                    <div class="gas-block-card-archive__empty">Aucun résultat</div>
                    </div>
</section>
</div>

variante : split_media_right

0 résultats

Aucun résultat

Voir le HTML rendu

<div id="sample_card_archive_001" class="gas-block-anchor" data-gas-block-id="sample_card_archive_001"><section class="gas-block-card-archive gas-block-card-archive--cols-3 gas-block-card-archive--style-elevated gas-block-card-archive--layout-split_media_right gas-block-card-archive--fit-cover gas-block-card-archive--source-annonce gas-block-card-archive--filters-chips"
         data-block-type="card_archive"
         data-source="annonce"
         data-pagination-mode="paginated"
         data-gas-block-enhancer="card_archive"
         data-gas-block-config="{&quot;source&quot;:&quot;annonce&quot;,&quot;isManual&quot;:false,&quot;perPage&quot;:12,&quot;restUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive&quot;,&quot;aiSearchRestUrl&quot;:&quot;https:\/\/gas-kiener-burkina.ddev.site\/wp-json\/gas\/v1\/cards\/archive\/ai-search&quot;,&quot;locale&quot;:&quot;fr&quot;,&quot;layout&quot;:&quot;split_media_right&quot;,&quot;allowViewToggle&quot;:false,&quot;paginationMode&quot;:&quot;paginated&quot;,&quot;filtersLayout&quot;:&quot;chips&quot;,&quot;aiSearchEnabled&quot;:false,&quot;aiSearchMode&quot;:&quot;assistive&quot;,&quot;showSort&quot;:true,&quot;sortOptions&quot;:[{&quot;value&quot;:&quot;latest&quot;,&quot;label&quot;:&quot;Plus r\u00e9cents&quot;},{&quot;value&quot;:&quot;title&quot;,&quot;label&quot;:&quot;A \u2192 Z&quot;},{&quot;value&quot;:&quot;oldest&quot;,&quot;label&quot;:&quot;Plus anciens&quot;},{&quot;value&quot;:&quot;manual&quot;,&quot;label&quot;:&quot;Ordre \u00e9ditorial&quot;}],&quot;showAutocomplete&quot;:true,&quot;lockedFieldFilters&quot;:[],&quot;prevLabel&quot;:&quot;Pr\u00e9c\u00e9dent&quot;,&quot;nextLabel&quot;:&quot;Suivant&quot;,&quot;loadMoreLabel&quot;:&quot;Charger plus&quot;,&quot;loadingLabel&quot;:&quot;Chargement\u2026&quot;,&quot;resultsLabel&quot;:&quot;%n% r\u00e9sultat|%n% r\u00e9sultats&quot;,&quot;resetLabel&quot;:&quot;R\u00e9initialiser&quot;,&quot;activeFiltersLabel&quot;:&quot;Filtres actifs&quot;,&quot;aiSearchLabel&quot;:&quot;Recherche guid\u00e9e&quot;,&quot;aiSearchButton&quot;:&quot;Explorer&quot;,&quot;aiSearchLoading&quot;:&quot;Analyse\u2026&quot;,&quot;aiSearchError&quot;:&quot;Recherche guid\u00e9e momentan\u00e9ment indisponible.&quot;,&quot;aiSearchFallback&quot;:&quot;Recherche simple appliqu\u00e9e.&quot;,&quot;aiSearchSemantic&quot;:&quot;R\u00e9sultats par pertinence s\u00e9mantique&quot;,&quot;aiStatusSemantic&quot;:&quot;Class\u00e9 par pertinence pour \u00ab %query% \u00bb&quot;,&quot;aiStatusSemanticApproximate&quot;:&quot;R\u00e9sultats approximatifs pour \u00ab %query% \u00bb&quot;,&quot;aiStatusFallback&quot;:&quot;Recherche simple pour \u00ab %query% \u00bb&quot;,&quot;aiStatusClear&quot;:&quot;Effacer&quot;,&quot;semanticMinGoodScore&quot;:0.45}">
    <div class="gas-block-card-archive__inner">
        
                            <div class="gas-block-card-archive__toolbar">
                
                                    <form class="gas-block-card-archive__search" method="get" role="search">
                                                                                                                        <input class="gas-block-card-archive__search-input" type="search" name="ca_q" value=""
                               placeholder="Rechercher…"
                               aria-label="Rechercher"
                               list="gas-card-archive-suggestions-1" />
                                                    <datalist id="gas-card-archive-suggestions-1" class="gas-block-card-archive__suggestions">
                                                            </datalist>
                                                <button class="gas-button gas-button--primary gas-block-card-archive__search-btn" type="submit">Rechercher</button>
                    </form>
                
                                    <form class="gas-block-card-archive__sort" method="get">
                                                                                                                        <label class="gas-block-card-archive__sort-label" for="ca-sort-select">Trier</label>
                        <select id="ca-sort-select" class="gas-block-card-archive__sort-select" name="ca_sort">
                                                            <option value="latest" selected='selected'>Plus récents</option>
                                                            <option value="title">A → Z</option>
                                                            <option value="oldest">Plus anciens</option>
                                                            <option value="manual">Ordre éditorial</option>
                                                    </select>
                        <noscript><button type="submit" class="gas-button gas-button--secondary">OK</button></noscript>
                    </form>
                
                
                                                    
                                    
                
                
                
                            </div>
        
        
        
        
                <p class="gas-block-card-archive__count" aria-live="polite">0 résultats</p>

                    <div class="gas-block-card-archive__empty">Aucun résultat</div>
                    </div>
</section>
</div>

Cartes `cards`

Collection de cartes, manuelle ou dynamique. Anatomie header/corps/footer, variantes (couverture, standard, minimal, horizontal), dispositions (grille, vedette en tête, liste). Couvre services, articles, archives, annuaires.

variante : grid

À DÉCOUVRIR

Une sélection de cartes

Présentez vos contenus sous forme de cartes harmonisées.

Première carte

Deuxième carte

Troisième carte

Voir le HTML rendu

<div id="sample_cards_001" class="gas-block-anchor" data-gas-block-id="sample_cards_001"><section class="gas-block-cards gas-block-cards--layout-grid gas-block-cards--cols-3 gas-block-cards--style-elevated gas-block-cards--align-left gas-block-cards--fit-cover" data-block-type="cards">
    <div class="gas-block-cards__inner">
                    <header class="gas-block-cards__head">
                <p class="gas-block-cards__eyebrow" data-gas-field-key="sample.cards.eyebrow">À DÉCOUVRIR</p>                <h2 class="gas-block-cards__title" data-gas-field-key="sample.cards.title">Une sélection de cartes</h2>                <p class="gas-block-cards__lead" data-gas-field-key="sample.cards.lead">&lt;p&gt;Présentez vos contenus sous forme de cartes harmonisées.&lt;/p&gt;</p>            </header>
                <div class="gas-block-cards__grid">
                                            <div class="gas-block-cards__cell">
                    <a class="gas-block-cards__card gas-block-cards__card--standard" href="#"><figure class="gas-block-cards__media"><img src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Première carte" loading="lazy" decoding="async" /></figure><div class="gas-block-cards__body"><h3 class="gas-block-cards__card-title" data-gas-field-key="sample.cards.items.0.title">Première carte</h3></div></a>                </div>
                                            <div class="gas-block-cards__cell">
                    <a class="gas-block-cards__card gas-block-cards__card--standard" href="#"><figure class="gas-block-cards__media"><img src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Deuxième carte" loading="lazy" decoding="async" /></figure><div class="gas-block-cards__body"><h3 class="gas-block-cards__card-title" data-gas-field-key="sample.cards.items.1.title">Deuxième carte</h3></div></a>                </div>
                                            <div class="gas-block-cards__cell">
                    <a class="gas-block-cards__card gas-block-cards__card--standard" href="#"><figure class="gas-block-cards__media"><img src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Troisième carte" loading="lazy" decoding="async" /></figure><div class="gas-block-cards__body"><h3 class="gas-block-cards__card-title" data-gas-field-key="sample.cards.items.2.title">Troisième carte</h3></div></a>                </div>
                    </div>
            </div>
</section>
</div>

variante : featured-first

À DÉCOUVRIR

Une sélection de cartes

Présentez vos contenus sous forme de cartes harmonisées.

Première carte

Deuxième carte

Troisième carte

Voir le HTML rendu

<div id="sample_cards_001" class="gas-block-anchor" data-gas-block-id="sample_cards_001"><section class="gas-block-cards gas-block-cards--layout-featured-first gas-block-cards--cols-3 gas-block-cards--style-elevated gas-block-cards--align-left gas-block-cards--fit-cover" data-block-type="cards">
    <div class="gas-block-cards__inner">
                    <header class="gas-block-cards__head">
                <p class="gas-block-cards__eyebrow" data-gas-field-key="sample.cards.eyebrow">À DÉCOUVRIR</p>                <h2 class="gas-block-cards__title" data-gas-field-key="sample.cards.title">Une sélection de cartes</h2>                <p class="gas-block-cards__lead" data-gas-field-key="sample.cards.lead">&lt;p&gt;Présentez vos contenus sous forme de cartes harmonisées.&lt;/p&gt;</p>            </header>
                <div class="gas-block-cards__grid">
                                            <div class="gas-block-cards__cell gas-block-cards__cell--featured">
                    <a class="gas-block-cards__card gas-block-cards__card--cover" href="#"><figure class="gas-block-cards__media"><img src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Première carte" loading="lazy" decoding="async" /></figure><div class="gas-block-cards__body"><h3 class="gas-block-cards__card-title" data-gas-field-key="sample.cards.items.0.title">Première carte</h3></div></a>                </div>
                                            <div class="gas-block-cards__cell">
                    <a class="gas-block-cards__card gas-block-cards__card--standard" href="#"><figure class="gas-block-cards__media"><img src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Deuxième carte" loading="lazy" decoding="async" /></figure><div class="gas-block-cards__body"><h3 class="gas-block-cards__card-title" data-gas-field-key="sample.cards.items.1.title">Deuxième carte</h3></div></a>                </div>
                                            <div class="gas-block-cards__cell">
                    <a class="gas-block-cards__card gas-block-cards__card--standard" href="#"><figure class="gas-block-cards__media"><img src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Troisième carte" loading="lazy" decoding="async" /></figure><div class="gas-block-cards__body"><h3 class="gas-block-cards__card-title" data-gas-field-key="sample.cards.items.2.title">Troisième carte</h3></div></a>                </div>
                    </div>
            </div>
</section>
</div>

variante : list

À DÉCOUVRIR

Une sélection de cartes

Présentez vos contenus sous forme de cartes harmonisées.

Première carte

Deuxième carte

Troisième carte

Voir le HTML rendu

<div id="sample_cards_001" class="gas-block-anchor" data-gas-block-id="sample_cards_001"><section class="gas-block-cards gas-block-cards--layout-list gas-block-cards--cols-3 gas-block-cards--style-elevated gas-block-cards--align-left gas-block-cards--fit-cover" data-block-type="cards">
    <div class="gas-block-cards__inner">
                    <header class="gas-block-cards__head">
                <p class="gas-block-cards__eyebrow" data-gas-field-key="sample.cards.eyebrow">À DÉCOUVRIR</p>                <h2 class="gas-block-cards__title" data-gas-field-key="sample.cards.title">Une sélection de cartes</h2>                <p class="gas-block-cards__lead" data-gas-field-key="sample.cards.lead">&lt;p&gt;Présentez vos contenus sous forme de cartes harmonisées.&lt;/p&gt;</p>            </header>
                <div class="gas-block-cards__grid">
                                            <div class="gas-block-cards__cell">
                    <a class="gas-block-cards__card gas-block-cards__card--standard" href="#"><figure class="gas-block-cards__media"><img src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Première carte" loading="lazy" decoding="async" /></figure><div class="gas-block-cards__body"><h3 class="gas-block-cards__card-title" data-gas-field-key="sample.cards.items.0.title">Première carte</h3></div></a>                </div>
                                            <div class="gas-block-cards__cell">
                    <a class="gas-block-cards__card gas-block-cards__card--standard" href="#"><figure class="gas-block-cards__media"><img src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Deuxième carte" loading="lazy" decoding="async" /></figure><div class="gas-block-cards__body"><h3 class="gas-block-cards__card-title" data-gas-field-key="sample.cards.items.1.title">Deuxième carte</h3></div></a>                </div>
                                            <div class="gas-block-cards__cell">
                    <a class="gas-block-cards__card gas-block-cards__card--standard" href="#"><figure class="gas-block-cards__media"><img src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Troisième carte" loading="lazy" decoding="async" /></figure><div class="gas-block-cards__body"><h3 class="gas-block-cards__card-title" data-gas-field-key="sample.cards.items.2.title">Troisième carte</h3></div></a>                </div>
                    </div>
            </div>
</section>
</div>

Tableau comparatif `comparison_table`

Comparatif features × plans (✓ / ✗ / texte court). Complète pricing_table.

Comparez les formules

Trouvez le plan adapté à vos besoins.

	Découverte	Membre	Pro
Accès aux activités	✓	✓	✓
Newsletter	✓	✓	✓
Support prioritaire	✗	✓	✓
Facturation entreprise	✗	✗	✓
Nombre de membres	1	5	Illimité

Voir le HTML rendu

<div id="sample_comparison_001" class="gas-block-anchor" data-gas-block-id="sample_comparison_001"><section class="gas-block-comparison-table" data-block-type="comparison_table">
    <div class="gas-block-comparison-table__inner">
                    <h2 class="gas-block-comparison-table__title">Comparez les formules</h2>
                            <p class="gas-block-comparison-table__subtitle">Trouvez le plan adapté à vos besoins.</p>
        
        <div class="gas-block-comparison-table__scroll">
            <table class="gas-block-comparison-table__table">
                <thead>
                    <tr>
                        <th scope="col"></th>
                                                    <th scope="col" class="gas-block-comparison-table__col">
                                Découverte                            </th>
                                                    <th scope="col" class="gas-block-comparison-table__col is-featured">
                                Membre                            </th>
                                                    <th scope="col" class="gas-block-comparison-table__col">
                                Pro                            </th>
                                            </tr>
                </thead>
                <tbody>
                                                                    <tr>
                            <th scope="row" class="gas-block-comparison-table__feature">Accès aux activités</th>
                                                            <td class="gas-block-comparison-table__cell">
                                    <span class="gas-block-comparison-table__yes" aria-label="Oui">✓</span>                                </td>
                                                            <td class="gas-block-comparison-table__cell is-featured">
                                    <span class="gas-block-comparison-table__yes" aria-label="Oui">✓</span>                                </td>
                                                            <td class="gas-block-comparison-table__cell">
                                    <span class="gas-block-comparison-table__yes" aria-label="Oui">✓</span>                                </td>
                                                    </tr>
                                                                    <tr>
                            <th scope="row" class="gas-block-comparison-table__feature">Newsletter</th>
                                                            <td class="gas-block-comparison-table__cell">
                                    <span class="gas-block-comparison-table__yes" aria-label="Oui">✓</span>                                </td>
                                                            <td class="gas-block-comparison-table__cell is-featured">
                                    <span class="gas-block-comparison-table__yes" aria-label="Oui">✓</span>                                </td>
                                                            <td class="gas-block-comparison-table__cell">
                                    <span class="gas-block-comparison-table__yes" aria-label="Oui">✓</span>                                </td>
                                                    </tr>
                                                                    <tr>
                            <th scope="row" class="gas-block-comparison-table__feature">Support prioritaire</th>
                                                            <td class="gas-block-comparison-table__cell">
                                    <span class="gas-block-comparison-table__no" aria-label="Non">✗</span>                                </td>
                                                            <td class="gas-block-comparison-table__cell is-featured">
                                    <span class="gas-block-comparison-table__yes" aria-label="Oui">✓</span>                                </td>
                                                            <td class="gas-block-comparison-table__cell">
                                    <span class="gas-block-comparison-table__yes" aria-label="Oui">✓</span>                                </td>
                                                    </tr>
                                                                    <tr>
                            <th scope="row" class="gas-block-comparison-table__feature">Facturation entreprise</th>
                                                            <td class="gas-block-comparison-table__cell">
                                    <span class="gas-block-comparison-table__no" aria-label="Non">✗</span>                                </td>
                                                            <td class="gas-block-comparison-table__cell is-featured">
                                    <span class="gas-block-comparison-table__no" aria-label="Non">✗</span>                                </td>
                                                            <td class="gas-block-comparison-table__cell">
                                    <span class="gas-block-comparison-table__yes" aria-label="Oui">✓</span>                                </td>
                                                    </tr>
                                                                    <tr>
                            <th scope="row" class="gas-block-comparison-table__feature">Nombre de membres</th>
                                                            <td class="gas-block-comparison-table__cell">
                                    <span class="gas-block-comparison-table__val">1</span>                                </td>
                                                            <td class="gas-block-comparison-table__cell is-featured">
                                    <span class="gas-block-comparison-table__val">5</span>                                </td>
                                                            <td class="gas-block-comparison-table__cell">
                                    <span class="gas-block-comparison-table__val">Illimité</span>                                </td>
                                                    </tr>
                                    </tbody>
            </table>
        </div>
    </div>
</section>
</div>

Nuage de valeurs `country_cloud`

Liste de termes/valeurs affichés en nuage typographique (tailles et couleurs variables), sur une image de fond optionnelle. Mots-clés, valeurs, thématiques, pays…

France
Suisse
Belgique
Canada
Sénégal
Maroc
Liban
Côte d'Ivoire
Luxembourg
Tunisie
Madagascar
Cameroun

… et bien d'autres pays

Voir le HTML rendu

<div id="sample_country_cloud_001" class="gas-block-anchor" data-gas-block-id="sample_country_cloud_001"><section class="gas-block-country-cloud is-align-center" data-block-type="country_cloud">
    <div class="gas-block-country-cloud__inner">
                                    <ul class="gas-block-country-cloud__list">
                                                        <li class="gas-block-country-cloud__item gas-block-country-cloud__item--size-xl">
                        <span class="gas-rt-color--primary">France</span>
                    </li>
                                                        <li class="gas-block-country-cloud__item gas-block-country-cloud__item--size-l">
                        <span class="gas-rt-color--accent">Suisse</span>
                    </li>
                                                        <li class="gas-block-country-cloud__item gas-block-country-cloud__item--size-m">
                        <span class="gas-rt-color--secondary">Belgique</span>
                    </li>
                                                        <li class="gas-block-country-cloud__item gas-block-country-cloud__item--size-l">
                        <span class="gas-rt-color--accent-dark">Canada</span>
                    </li>
                                                        <li class="gas-block-country-cloud__item gas-block-country-cloud__item--size-m">
                        <span class="gas-rt-color--neutral-700">Sénégal</span>
                    </li>
                                                        <li class="gas-block-country-cloud__item gas-block-country-cloud__item--size-s">
                        <span class="gas-rt-color--neutral-500">Maroc</span>
                    </li>
                                                        <li class="gas-block-country-cloud__item gas-block-country-cloud__item--size-m">
                        <span class="gas-rt-color--primary">Liban</span>
                    </li>
                                                        <li class="gas-block-country-cloud__item gas-block-country-cloud__item--size-l">
                        <span class="gas-rt-color--success">Côte d&#039;Ivoire</span>
                    </li>
                                                        <li class="gas-block-country-cloud__item gas-block-country-cloud__item--size-s">
                        <span class="gas-rt-color--neutral-700">Luxembourg</span>
                    </li>
                                                        <li class="gas-block-country-cloud__item gas-block-country-cloud__item--size-m">
                        <span class="gas-rt-color--accent">Tunisie</span>
                    </li>
                                                        <li class="gas-block-country-cloud__item gas-block-country-cloud__item--size-s">
                        <span class="gas-rt-color--secondary">Madagascar</span>
                    </li>
                                                        <li class="gas-block-country-cloud__item gas-block-country-cloud__item--size-m">
                        <span class="gas-rt-color--neutral-500">Cameroun</span>
                    </li>
                            </ul>
                            <p class="gas-block-country-cloud__more">… et bien d&#039;autres pays</p>
            </div>
</section>
</div>

Barre CTA flottante `cta_sticky_bar`

Barre d'appel à l'action persistante en bas d'écran (texte + bouton + fermeture)

Voir le HTML rendu

<div id="sample_cta_sticky_bar_001" class="gas-block-anchor" data-gas-block-id="sample_cta_sticky_bar_001"><aside class="gas-block-cta-sticky-bar gas-block-cta-sticky-bar--position-bottom" data-block-type="cta_sticky_bar"
       data-gas-block-enhancer="cta_sticky_bar"
       data-gas-block-config="{&quot;scrollOffset&quot;:200,&quot;storageKey&quot;:&quot;cta_sticky_bar:f9ccd1de64&quot;}"
       hidden>
    <div class="gas-block-cta-sticky-bar__inner">
                    <p class="gas-block-cta-sticky-bar__text">Les inscriptions pour la saison 2026 sont ouvertes — places limitées.</p>
                <div class="gas-block-cta-sticky-bar__actions">
                            <a class="gas-button gas-button--primary gas-block-cta-sticky-bar__cta" href="/inscription">
                    Je m&#039;inscris                </a>
                        <button type="button" class="gas-block-cta-sticky-bar__close"
                    data-cta-sticky-close
                    aria-label="Masquer cette barre">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
</aside>
</div>

Mise en avant produit `feature_showcase`

Grande capture encadrée + suraccroche, titre, texte et liste de bénéfices cochés. Idéal pour présenter une fonctionnalité ou un produit (style SaaS).

variante : split

FONCTIONNALITÉ

Une présentation claire de ce qui compte

Mettez en avant une fonctionnalité phare avec un visuel et une liste de points clés.

Voir le HTML rendu

<div id="sample_feature_showcase_001" class="gas-block-anchor" data-gas-block-id="sample_feature_showcase_001"><section class="gas-block-feature-showcase gas-block-feature-showcase--split gas-block-feature-showcase--media-right" data-block-type="feature_showcase">
    <div class="gas-block-feature-showcase__inner">
        <div class="gas-block-feature-showcase__content">
                            <p class="gas-block-feature-showcase__eyebrow">FONCTIONNALITÉ</p>
                                        <h2 class="gas-block-feature-showcase__title">Une présentation claire de ce qui compte</h2>
                                        <p class="gas-block-feature-showcase__text">&lt;p&gt;Mettez en avant une fonctionnalité phare avec un visuel et une liste de points clés.&lt;/p&gt;</p>
                                            </div>
                    <figure class="gas-block-feature-showcase__media gas-frame gas-frame--shadow">
                                <img class="gas-block-feature-showcase__image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="" loading="lazy" decoding="async" srcset="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg 684w, https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-200x300.jpeg 200w, https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-768x1151.jpeg 768w, https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-1025x1536.jpeg 1025w, https://media.kiener-burkina.monasso.cloud/2026/07/couture-v.jpeg 1367w" />            </figure>
            </div>
</section>
</div>

variante : stacked

FONCTIONNALITÉ

Une présentation claire de ce qui compte

Mettez en avant une fonctionnalité phare avec un visuel et une liste de points clés.

Voir le HTML rendu

<div id="sample_feature_showcase_001" class="gas-block-anchor" data-gas-block-id="sample_feature_showcase_001"><section class="gas-block-feature-showcase gas-block-feature-showcase--stacked" data-block-type="feature_showcase">
    <div class="gas-block-feature-showcase__inner">
        <div class="gas-block-feature-showcase__content">
                            <p class="gas-block-feature-showcase__eyebrow">FONCTIONNALITÉ</p>
                                        <h2 class="gas-block-feature-showcase__title">Une présentation claire de ce qui compte</h2>
                                        <p class="gas-block-feature-showcase__text">&lt;p&gt;Mettez en avant une fonctionnalité phare avec un visuel et une liste de points clés.&lt;/p&gt;</p>
                                            </div>
                    <figure class="gas-block-feature-showcase__media gas-frame gas-frame--shadow">
                                <img class="gas-block-feature-showcase__image" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="" loading="lazy" decoding="async" srcset="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg 684w, https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-200x300.jpeg 200w, https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-768x1151.jpeg 768w, https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-1025x1536.jpeg 1025w, https://media.kiener-burkina.monasso.cloud/2026/07/couture-v.jpeg 1367w" />            </figure>
            </div>
</section>
</div>

Fonctionnalités en onglets `feature_tabs`

Fonctionnalités présentées en onglets : liste de titres + panneau actif (titre, texte, visuel).

Tout ce dont vous avez besoin

Une plateforme complète pour gérer votre association.

Gérez vos membres sans effort

Inscriptions en ligne, renouvellements automatiques et suivi des cotisations depuis un tableau de bord unique.

Voir le HTML rendu

<div id="sample_feature_tabs_001" class="gas-block-anchor" data-gas-block-id="sample_feature_tabs_001"><section class="gas-block-feature-tabs" data-block-type="feature_tabs" data-gas-block-enhancer="feature_tabs" data-gas-block-config="[]">
    <div class="gas-block-feature-tabs__inner">
                    <h2 class="gas-block-feature-tabs__title">Tout ce dont vous avez besoin</h2>
                            <p class="gas-block-feature-tabs__subtitle">Une plateforme complète pour gérer votre association.</p>
        
        <div class="gas-block-feature-tabs__tablist" role="tablist" aria-orientation="horizontal">
                                            <button
                    type="button"
                    class="gas-block-feature-tabs__tab is-active"
                    role="tab"
                    id="gas-ft-tab-sample_feature_tabs_001-0"
                    aria-selected="true"
                    aria-controls="gas-ft-panel-sample_feature_tabs_001-0"
                    tabindex="0"
                    data-feature-tab>
                    Adhésions                </button>
                                            <button
                    type="button"
                    class="gas-block-feature-tabs__tab"
                    role="tab"
                    id="gas-ft-tab-sample_feature_tabs_001-1"
                    aria-selected="false"
                    aria-controls="gas-ft-panel-sample_feature_tabs_001-1"
                    tabindex="-1"
                    data-feature-tab>
                    Activités                </button>
                                            <button
                    type="button"
                    class="gas-block-feature-tabs__tab"
                    role="tab"
                    id="gas-ft-tab-sample_feature_tabs_001-2"
                    aria-selected="false"
                    aria-controls="gas-ft-panel-sample_feature_tabs_001-2"
                    tabindex="-1"
                    data-feature-tab>
                    Communication                </button>
                                            <button
                    type="button"
                    class="gas-block-feature-tabs__tab"
                    role="tab"
                    id="gas-ft-tab-sample_feature_tabs_001-3"
                    aria-selected="false"
                    aria-controls="gas-ft-panel-sample_feature_tabs_001-3"
                    tabindex="-1"
                    data-feature-tab>
                    Paiements                </button>
                    </div>

        <div class="gas-block-feature-tabs__panels">
                                            <div
                    class="gas-block-feature-tabs__panel is-active"
                    role="tabpanel"
                    id="gas-ft-panel-sample_feature_tabs_001-0"
                    aria-labelledby="gas-ft-tab-sample_feature_tabs_001-0"
                    tabindex="0"
                                        data-feature-panel>
                    <div class="gas-block-feature-tabs__panel-body">
                                                    <h3 class="gas-block-feature-tabs__panel-title">Gérez vos membres sans effort</h3>
                                                                            <p class="gas-block-feature-tabs__panel-text">Inscriptions en ligne, renouvellements automatiques et suivi des cotisations depuis un tableau de bord unique.</p>
                                            </div>
                                            <div class="gas-block-feature-tabs__panel-media"><img class="gas-block-feature-tabs__image" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&#038;fit=crop&#038;w=1200&#038;q=80" alt="Équipe réunie autour d&#039;un ordinateur" loading="lazy" /></div>
                                    </div>
                                            <div
                    class="gas-block-feature-tabs__panel"
                    role="tabpanel"
                    id="gas-ft-panel-sample_feature_tabs_001-1"
                    aria-labelledby="gas-ft-tab-sample_feature_tabs_001-1"
                    tabindex="0"
                    hidden                    data-feature-panel>
                    <div class="gas-block-feature-tabs__panel-body">
                                                    <h3 class="gas-block-feature-tabs__panel-title">Organisez et publiez vos activités</h3>
                                                                            <p class="gas-block-feature-tabs__panel-text">Créez vos événements, ouvrez les réservations et tenez vos participants informés en quelques clics.</p>
                                            </div>
                                            <div class="gas-block-feature-tabs__panel-media"><img class="gas-block-feature-tabs__image" src="https://images.unsplash.com/photo-1511795409834-ef04bbd61622?auto=format&#038;fit=crop&#038;w=1200&#038;q=80" alt="Participants lors d&#039;un atelier" loading="lazy" /></div>
                                    </div>
                                            <div
                    class="gas-block-feature-tabs__panel"
                    role="tabpanel"
                    id="gas-ft-panel-sample_feature_tabs_001-2"
                    aria-labelledby="gas-ft-tab-sample_feature_tabs_001-2"
                    tabindex="0"
                    hidden                    data-feature-panel>
                    <div class="gas-block-feature-tabs__panel-body">
                                                    <h3 class="gas-block-feature-tabs__panel-title">Touchez votre communauté</h3>
                                                                            <p class="gas-block-feature-tabs__panel-text">Campagnes ciblées, newsletters et messages automatisés pour garder le lien avec vos membres.</p>
                                            </div>
                                            <div class="gas-block-feature-tabs__panel-media"><img class="gas-block-feature-tabs__image" src="https://images.unsplash.com/photo-1557200134-90327ee9fafa?auto=format&#038;fit=crop&#038;w=1200&#038;q=80" alt="Personne consultant son téléphone" loading="lazy" /></div>
                                    </div>
                                            <div
                    class="gas-block-feature-tabs__panel"
                    role="tabpanel"
                    id="gas-ft-panel-sample_feature_tabs_001-3"
                    aria-labelledby="gas-ft-tab-sample_feature_tabs_001-3"
                    tabindex="0"
                    hidden                    data-feature-panel>
                    <div class="gas-block-feature-tabs__panel-body">
                                                    <h3 class="gas-block-feature-tabs__panel-title">Encaissez en toute sécurité</h3>
                                                                            <p class="gas-block-feature-tabs__panel-text">Paiements en ligne, factures automatiques et rapprochements comptables intégrés.</p>
                                            </div>
                                            <div class="gas-block-feature-tabs__panel-media"><img class="gas-block-feature-tabs__image" src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&#038;fit=crop&#038;w=1200&#038;q=80" alt="Paiement par carte bancaire" loading="lazy" /></div>
                                    </div>
                    </div>
    </div>
</section>
</div>

Features grid `features_grid`

Grille de points forts avec icônes (registre SVG ou emoji) et textes

variante : plain

Pourquoi nous rejoindre

Trois piliers qui guident notre pédagogie

Apprentissage par la pratique

Des ateliers concrets, pas de cours magistraux. On comprend en faisant.

Communauté bienveillante

Un cadre sécurisant où chacun progresse à son rythme, accompagné.

Animateurs certifiés

Tous nos animateurs ont suivi un parcours rigoureux de 18 mois minimum.

Voir le HTML rendu

<div id="pretty_features_grid_001" class="gas-block-anchor" data-gas-block-id="pretty_features_grid_001"><section class="gas-block-features-grid gas-block-features-grid--cols-3 gas-block-features-grid--style-plain gas-block-features-grid--icon-medium" data-block-type="features_grid">
    <div class="gas-block-features-grid__inner">
                    <h2 class="gas-block-features-grid__title" data-gas-field-key="sample.features_grid.pretty.title">Pourquoi nous rejoindre</h2>
        
                    <p class="gas-block-features-grid__subtitle" data-gas-field-key="sample.features_grid.pretty.subtitle">Trois piliers qui guident notre pédagogie</p>
        
        <div class="gas-block-features-grid__grid">
                                            <article class="gas-block-features-grid__item">
                                            <span class="gas-block-features-grid__icon" aria-hidden="true">👐</span>
                                                                <h3 class="gas-block-features-grid__item-title" data-gas-field-key="sample.features_grid.pretty.items.0.title">Apprentissage par la pratique</h3>
                                                                <p class="gas-block-features-grid__item-text" data-gas-field-key="sample.features_grid.pretty.items.0.content">Des ateliers concrets, pas de cours magistraux. On comprend en faisant.</p>
                                    </article>
                                            <article class="gas-block-features-grid__item">
                                            <span class="gas-block-features-grid__icon" aria-hidden="true">🤝</span>
                                                                <h3 class="gas-block-features-grid__item-title" data-gas-field-key="sample.features_grid.pretty.items.1.title">Communauté bienveillante</h3>
                                                                <p class="gas-block-features-grid__item-text" data-gas-field-key="sample.features_grid.pretty.items.1.content">Un cadre sécurisant où chacun progresse à son rythme, accompagné.</p>
                                    </article>
                                            <article class="gas-block-features-grid__item">
                                            <span class="gas-block-features-grid__icon" aria-hidden="true">🎓</span>
                                                                <h3 class="gas-block-features-grid__item-title" data-gas-field-key="sample.features_grid.pretty.items.2.title">Animateurs certifiés</h3>
                                                                <p class="gas-block-features-grid__item-text" data-gas-field-key="sample.features_grid.pretty.items.2.content">Tous nos animateurs ont suivi un parcours rigoureux de 18 mois minimum.</p>
                                    </article>
                    </div>
    </div>
</section>
</div>

variante : cards

Pourquoi nous rejoindre

Trois piliers qui guident notre pédagogie

Apprentissage par la pratique

Des ateliers concrets, pas de cours magistraux. On comprend en faisant.

Communauté bienveillante

Un cadre sécurisant où chacun progresse à son rythme, accompagné.

Animateurs certifiés

Tous nos animateurs ont suivi un parcours rigoureux de 18 mois minimum.

Voir le HTML rendu

<div id="pretty_features_grid_001" class="gas-block-anchor" data-gas-block-id="pretty_features_grid_001"><section class="gas-block-features-grid gas-block-features-grid--cols-3 gas-block-features-grid--style-cards gas-block-features-grid--icon-medium" data-block-type="features_grid">
    <div class="gas-block-features-grid__inner">
                    <h2 class="gas-block-features-grid__title" data-gas-field-key="sample.features_grid.pretty.title">Pourquoi nous rejoindre</h2>
        
                    <p class="gas-block-features-grid__subtitle" data-gas-field-key="sample.features_grid.pretty.subtitle">Trois piliers qui guident notre pédagogie</p>
        
        <div class="gas-block-features-grid__grid">
                                            <article class="gas-block-features-grid__item">
                                            <span class="gas-block-features-grid__icon" aria-hidden="true">👐</span>
                                                                <h3 class="gas-block-features-grid__item-title" data-gas-field-key="sample.features_grid.pretty.items.0.title">Apprentissage par la pratique</h3>
                                                                <p class="gas-block-features-grid__item-text" data-gas-field-key="sample.features_grid.pretty.items.0.content">Des ateliers concrets, pas de cours magistraux. On comprend en faisant.</p>
                                    </article>
                                            <article class="gas-block-features-grid__item">
                                            <span class="gas-block-features-grid__icon" aria-hidden="true">🤝</span>
                                                                <h3 class="gas-block-features-grid__item-title" data-gas-field-key="sample.features_grid.pretty.items.1.title">Communauté bienveillante</h3>
                                                                <p class="gas-block-features-grid__item-text" data-gas-field-key="sample.features_grid.pretty.items.1.content">Un cadre sécurisant où chacun progresse à son rythme, accompagné.</p>
                                    </article>
                                            <article class="gas-block-features-grid__item">
                                            <span class="gas-block-features-grid__icon" aria-hidden="true">🎓</span>
                                                                <h3 class="gas-block-features-grid__item-title" data-gas-field-key="sample.features_grid.pretty.items.2.title">Animateurs certifiés</h3>
                                                                <p class="gas-block-features-grid__item-text" data-gas-field-key="sample.features_grid.pretty.items.2.content">Tous nos animateurs ont suivi un parcours rigoureux de 18 mois minimum.</p>
                                    </article>
                    </div>
    </div>
</section>
</div>

variante : bordered

Pourquoi nous rejoindre

Trois piliers qui guident notre pédagogie

Apprentissage par la pratique

Des ateliers concrets, pas de cours magistraux. On comprend en faisant.

Communauté bienveillante

Un cadre sécurisant où chacun progresse à son rythme, accompagné.

Animateurs certifiés

Tous nos animateurs ont suivi un parcours rigoureux de 18 mois minimum.

Voir le HTML rendu

<div id="pretty_features_grid_001" class="gas-block-anchor" data-gas-block-id="pretty_features_grid_001"><section class="gas-block-features-grid gas-block-features-grid--cols-3 gas-block-features-grid--style-bordered gas-block-features-grid--icon-medium" data-block-type="features_grid">
    <div class="gas-block-features-grid__inner">
                    <h2 class="gas-block-features-grid__title" data-gas-field-key="sample.features_grid.pretty.title">Pourquoi nous rejoindre</h2>
        
                    <p class="gas-block-features-grid__subtitle" data-gas-field-key="sample.features_grid.pretty.subtitle">Trois piliers qui guident notre pédagogie</p>
        
        <div class="gas-block-features-grid__grid">
                                            <article class="gas-block-features-grid__item">
                                            <span class="gas-block-features-grid__icon" aria-hidden="true">👐</span>
                                                                <h3 class="gas-block-features-grid__item-title" data-gas-field-key="sample.features_grid.pretty.items.0.title">Apprentissage par la pratique</h3>
                                                                <p class="gas-block-features-grid__item-text" data-gas-field-key="sample.features_grid.pretty.items.0.content">Des ateliers concrets, pas de cours magistraux. On comprend en faisant.</p>
                                    </article>
                                            <article class="gas-block-features-grid__item">
                                            <span class="gas-block-features-grid__icon" aria-hidden="true">🤝</span>
                                                                <h3 class="gas-block-features-grid__item-title" data-gas-field-key="sample.features_grid.pretty.items.1.title">Communauté bienveillante</h3>
                                                                <p class="gas-block-features-grid__item-text" data-gas-field-key="sample.features_grid.pretty.items.1.content">Un cadre sécurisant où chacun progresse à son rythme, accompagné.</p>
                                    </article>
                                            <article class="gas-block-features-grid__item">
                                            <span class="gas-block-features-grid__icon" aria-hidden="true">🎓</span>
                                                                <h3 class="gas-block-features-grid__item-title" data-gas-field-key="sample.features_grid.pretty.items.2.title">Animateurs certifiés</h3>
                                                                <p class="gas-block-features-grid__item-text" data-gas-field-key="sample.features_grid.pretty.items.2.content">Tous nos animateurs ont suivi un parcours rigoureux de 18 mois minimum.</p>
                                    </article>
                    </div>
    </div>
</section>
</div>

variante : numbered

Pourquoi nous rejoindre

Trois piliers qui guident notre pédagogie

Apprentissage par la pratique

Des ateliers concrets, pas de cours magistraux. On comprend en faisant.

Communauté bienveillante

Un cadre sécurisant où chacun progresse à son rythme, accompagné.

Animateurs certifiés

Tous nos animateurs ont suivi un parcours rigoureux de 18 mois minimum.

Voir le HTML rendu

<div id="pretty_features_grid_001" class="gas-block-anchor" data-gas-block-id="pretty_features_grid_001"><section class="gas-block-features-grid gas-block-features-grid--cols-3 gas-block-features-grid--style-numbered gas-block-features-grid--icon-medium" data-block-type="features_grid">
    <div class="gas-block-features-grid__inner">
                    <h2 class="gas-block-features-grid__title" data-gas-field-key="sample.features_grid.pretty.title">Pourquoi nous rejoindre</h2>
        
                    <p class="gas-block-features-grid__subtitle" data-gas-field-key="sample.features_grid.pretty.subtitle">Trois piliers qui guident notre pédagogie</p>
        
        <div class="gas-block-features-grid__grid">
                                            <article class="gas-block-features-grid__item">
                                            <span class="gas-block-features-grid__icon" aria-hidden="true">👐</span>
                                                                <h3 class="gas-block-features-grid__item-title" data-gas-field-key="sample.features_grid.pretty.items.0.title">Apprentissage par la pratique</h3>
                                                                <p class="gas-block-features-grid__item-text" data-gas-field-key="sample.features_grid.pretty.items.0.content">Des ateliers concrets, pas de cours magistraux. On comprend en faisant.</p>
                                    </article>
                                            <article class="gas-block-features-grid__item">
                                            <span class="gas-block-features-grid__icon" aria-hidden="true">🤝</span>
                                                                <h3 class="gas-block-features-grid__item-title" data-gas-field-key="sample.features_grid.pretty.items.1.title">Communauté bienveillante</h3>
                                                                <p class="gas-block-features-grid__item-text" data-gas-field-key="sample.features_grid.pretty.items.1.content">Un cadre sécurisant où chacun progresse à son rythme, accompagné.</p>
                                    </article>
                                            <article class="gas-block-features-grid__item">
                                            <span class="gas-block-features-grid__icon" aria-hidden="true">🎓</span>
                                                                <h3 class="gas-block-features-grid__item-title" data-gas-field-key="sample.features_grid.pretty.items.2.title">Animateurs certifiés</h3>
                                                                <p class="gas-block-features-grid__item-text" data-gas-field-key="sample.features_grid.pretty.items.2.content">Tous nos animateurs ont suivi un parcours rigoureux de 18 mois minimum.</p>
                                    </article>
                    </div>
    </div>
</section>
</div>

Image + texte `image_text_split`

Section en deux colonnes image et contenu

variante : default

RÉPONDRE À VOS QUESTIONS

NOTRE HISTOIRE

Né d'une intuition partagée

En 2015, après dix ans de pratique chacun dans nos domaines respectifs, nous avons fait le même constat : les adultes ont besoin d'espaces d'apprentissage qui les engagent vraiment.

Pas des conférences. Pas des coachings. Mais des cercles d'expérience où la sagesse émerge du groupe, accompagnée par des animateurs formés.

Lire notre manifeste

Voir le HTML rendu

<div id="pretty_image_text_split_001" class="gas-block-anchor" data-gas-block-id="pretty_image_text_split_001"><section class="gas-block-image-text-split gas-block-image-text-split--left gas-block-image-text-split--has-side-label gas-block-image-text-split--decor-panel gas-block-image-text-split--decor-accent" data-block-type="image_text_split">
    <div class="gas-block-image-text-split__inner">
        <div class="gas-block-image-text-split__media"><img class="gas-block-image-text-split__image" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=800&#038;auto=format&#038;fit=crop&#038;q=70" alt="Co-fondatrices en atelier" loading="lazy" decoding="async" /></div>
        <div class="gas-block-image-text-split__content">
            <p class="gas-block-image-text-split__side-label" data-gas-field-key="sample.image_text_split.pretty.side_label">RÉPONDRE À VOS QUESTIONS</p>            <div class="gas-block-image-text-split__content-body">
                <p class="gas-block-image-text-split__eyebrow" data-gas-field-key="sample.image_text_split.pretty.eyebrow">NOTRE HISTOIRE</p>                <h2 class="gas-block-image-text-split__title" data-gas-field-key="sample.image_text_split.pretty.title">Né d&#039;une intuition partagée</h2>                <div class="gas-block-image-text-split__text" data-gas-field-key="sample.image_text_split.pretty.content"><p>En 2015, après dix ans de pratique chacun dans nos domaines respectifs, nous avons fait le même constat : les adultes ont besoin d'espaces d'apprentissage qui les engagent vraiment.</p><p>Pas des conférences. Pas des coachings. Mais des <strong>cercles d'expérience</strong> où la sagesse émerge du groupe, accompagnée par des animateurs formés.</p></div>                                    <div class="gas-block-image-text-split__actions">
                                                                                <a class="gas-button gas-button--primary" href="/manifeste/">Lire notre manifeste</a>
                                            </div>
                            </div>
        </div>
    </div>
</section>
</div>

variante : fill

RÉPONDRE À VOS QUESTIONS

NOTRE HISTOIRE

Né d'une intuition partagée

En 2015, après dix ans de pratique chacun dans nos domaines respectifs, nous avons fait le même constat : les adultes ont besoin d'espaces d'apprentissage qui les engagent vraiment.

Pas des conférences. Pas des coachings. Mais des cercles d'expérience où la sagesse émerge du groupe, accompagnée par des animateurs formés.

Lire notre manifeste

Voir le HTML rendu

<div id="pretty_image_text_split_001" class="gas-block-anchor" data-gas-block-id="pretty_image_text_split_001"><section class="gas-block-image-text-split gas-block-image-text-split--left gas-block-image-text-split--media-fill gas-block-image-text-split--has-side-label gas-block-image-text-split--decor-panel gas-block-image-text-split--decor-accent" data-block-type="image_text_split">
    <div class="gas-block-image-text-split__inner">
        <div class="gas-block-image-text-split__media"><img class="gas-block-image-text-split__image" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=800&#038;auto=format&#038;fit=crop&#038;q=70" alt="Co-fondatrices en atelier" loading="lazy" decoding="async" /></div>
        <div class="gas-block-image-text-split__content">
            <p class="gas-block-image-text-split__side-label" data-gas-field-key="sample.image_text_split.pretty.side_label">RÉPONDRE À VOS QUESTIONS</p>            <div class="gas-block-image-text-split__content-body">
                <p class="gas-block-image-text-split__eyebrow" data-gas-field-key="sample.image_text_split.pretty.eyebrow">NOTRE HISTOIRE</p>                <h2 class="gas-block-image-text-split__title" data-gas-field-key="sample.image_text_split.pretty.title">Né d&#039;une intuition partagée</h2>                <div class="gas-block-image-text-split__text" data-gas-field-key="sample.image_text_split.pretty.content"><p>En 2015, après dix ans de pratique chacun dans nos domaines respectifs, nous avons fait le même constat : les adultes ont besoin d'espaces d'apprentissage qui les engagent vraiment.</p><p>Pas des conférences. Pas des coachings. Mais des <strong>cercles d'expérience</strong> où la sagesse émerge du groupe, accompagnée par des animateurs formés.</p></div>                                    <div class="gas-block-image-text-split__actions">
                                                                                <a class="gas-button gas-button--primary" href="/manifeste/">Lire notre manifeste</a>
                                            </div>
                            </div>
        </div>
    </div>
</section>
</div>

variante : panel

RÉPONDRE À VOS QUESTIONS

NOTRE HISTOIRE

Né d'une intuition partagée

En 2015, après dix ans de pratique chacun dans nos domaines respectifs, nous avons fait le même constat : les adultes ont besoin d'espaces d'apprentissage qui les engagent vraiment.

Pas des conférences. Pas des coachings. Mais des cercles d'expérience où la sagesse émerge du groupe, accompagnée par des animateurs formés.

Lire notre manifeste

Voir le HTML rendu

<div id="pretty_image_text_split_001" class="gas-block-anchor" data-gas-block-id="pretty_image_text_split_001"><section class="gas-block-image-text-split gas-block-image-text-split--left gas-block-image-text-split--has-side-label gas-block-image-text-split--decor-panel gas-block-image-text-split--decor-accent" data-block-type="image_text_split">
    <div class="gas-block-image-text-split__inner">
        <div class="gas-block-image-text-split__media"><img class="gas-block-image-text-split__image" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=800&#038;auto=format&#038;fit=crop&#038;q=70" alt="Co-fondatrices en atelier" loading="lazy" decoding="async" /></div>
        <div class="gas-block-image-text-split__content">
            <p class="gas-block-image-text-split__side-label" data-gas-field-key="sample.image_text_split.pretty.side_label">RÉPONDRE À VOS QUESTIONS</p>            <div class="gas-block-image-text-split__content-body">
                <p class="gas-block-image-text-split__eyebrow" data-gas-field-key="sample.image_text_split.pretty.eyebrow">NOTRE HISTOIRE</p>                <h2 class="gas-block-image-text-split__title" data-gas-field-key="sample.image_text_split.pretty.title">Né d&#039;une intuition partagée</h2>                <div class="gas-block-image-text-split__text" data-gas-field-key="sample.image_text_split.pretty.content"><p>En 2015, après dix ans de pratique chacun dans nos domaines respectifs, nous avons fait le même constat : les adultes ont besoin d'espaces d'apprentissage qui les engagent vraiment.</p><p>Pas des conférences. Pas des coachings. Mais des <strong>cercles d'expérience</strong> où la sagesse émerge du groupe, accompagnée par des animateurs formés.</p></div>                                    <div class="gas-block-image-text-split__actions">
                                                                                <a class="gas-button gas-button--primary" href="/manifeste/">Lire notre manifeste</a>
                                            </div>
                            </div>
        </div>
    </div>
</section>
</div>

variante : bordered

RÉPONDRE À VOS QUESTIONS

NOTRE HISTOIRE

Né d'une intuition partagée

En 2015, après dix ans de pratique chacun dans nos domaines respectifs, nous avons fait le même constat : les adultes ont besoin d'espaces d'apprentissage qui les engagent vraiment.

Pas des conférences. Pas des coachings. Mais des cercles d'expérience où la sagesse émerge du groupe, accompagnée par des animateurs formés.

Lire notre manifeste

Voir le HTML rendu

<div id="pretty_image_text_split_001" class="gas-block-anchor" data-gas-block-id="pretty_image_text_split_001"><section class="gas-block-image-text-split gas-block-image-text-split--left gas-block-image-text-split--has-side-label gas-block-image-text-split--decor-panel gas-block-image-text-split--decor-accent" data-block-type="image_text_split">
    <div class="gas-block-image-text-split__inner">
        <div class="gas-block-image-text-split__media"><img class="gas-block-image-text-split__image" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=800&#038;auto=format&#038;fit=crop&#038;q=70" alt="Co-fondatrices en atelier" loading="lazy" decoding="async" /></div>
        <div class="gas-block-image-text-split__content">
            <p class="gas-block-image-text-split__side-label" data-gas-field-key="sample.image_text_split.pretty.side_label">RÉPONDRE À VOS QUESTIONS</p>            <div class="gas-block-image-text-split__content-body">
                <p class="gas-block-image-text-split__eyebrow" data-gas-field-key="sample.image_text_split.pretty.eyebrow">NOTRE HISTOIRE</p>                <h2 class="gas-block-image-text-split__title" data-gas-field-key="sample.image_text_split.pretty.title">Né d&#039;une intuition partagée</h2>                <div class="gas-block-image-text-split__text" data-gas-field-key="sample.image_text_split.pretty.content"><p>En 2015, après dix ans de pratique chacun dans nos domaines respectifs, nous avons fait le même constat : les adultes ont besoin d'espaces d'apprentissage qui les engagent vraiment.</p><p>Pas des conférences. Pas des coachings. Mais des <strong>cercles d'expérience</strong> où la sagesse émerge du groupe, accompagnée par des animateurs formés.</p></div>                                    <div class="gas-block-image-text-split__actions">
                                                                                <a class="gas-button gas-button--primary" href="/manifeste/">Lire notre manifeste</a>
                                            </div>
                            </div>
        </div>
    </div>
</section>
</div>

Intro + cartes d'accès `intro_cards`

Colonne d'introduction (sur-titre, titre coloré, accroche) + grille de cartes configurables (icône, titre, description, lien). Couleur de fond des cartes et nombre de colonnes paramétrables. Idéal pour proposer plusieurs portes d'entrée vers un contenu.

BEGIN HERE

Trois portes calmes vers un projet

Si vous ne savez pas par où commencer, choisissez la phrase qui vous parle le plus aujourd'hui.

Voir le HTML rendu

<div id="sample_intro_cards_001" class="gas-block-anchor" data-gas-block-id="sample_intro_cards_001"><section class="gas-block-intro-cards gas-block-intro-cards--cols-3 gas-block-intro-cards--card-dark gas-block-intro-cards--style-flat" data-block-type="intro_cards">
    <div class="gas-block-intro-cards__inner">
                    <div class="gas-block-intro-cards__intro">
                                    <p class="gas-block-intro-cards__eyebrow">BEGIN HERE</p>
                                                    <h2 class="gas-block-intro-cards__title">Trois portes <span class="gas-rt-color--primary">calmes</span> vers <span class="gas-rt-color--accent">un projet</span></h2>
                                                    <div class="gas-block-intro-cards__lead"><p>Si vous ne savez pas par où commencer, choisissez la phrase qui vous parle le plus aujourd'hui.</p></div>
                            </div>
        
                    <ul class="gas-block-intro-cards__grid">
                                                        <li class="gas-block-intro-cards__item">
                        <a class="gas-block-intro-cards__card" href="#">
                                                            <span class="gas-block-intro-cards__icon" aria-hidden="true">🧘</span>
                                                                                        <h3 class="gas-block-intro-cards__card-title">J&#039;ai besoin d&#039;un moment de paix</h3>
                                                                                        <p class="gas-block-intro-cards__card-text">Commencez par une méditation visuelle ou une courte rencontre qui invite à respirer.</p>
                                                                                        <span class="gas-block-intro-cards__link">
                                    <span class="gas-block-intro-cards__link-label">Commencer en douceur</span>
                                    <span class="gas-block-intro-cards__link-arrow" aria-hidden="true">&rarr;</span>
                                </span>
                                                    </a>
                    </li>
                                                        <li class="gas-block-intro-cards__item">
                        <a class="gas-block-intro-cards__card" href="#">
                                                            <span class="gas-block-intro-cards__icon" aria-hidden="true">🌱</span>
                                                                                        <h3 class="gas-block-intro-cards__card-title">Je porte quelque chose de difficile</h3>
                                                                                        <p class="gas-block-intro-cards__card-text">Rencontrez des voix qui parlent de deuil, de conflit, de pardon et de transformation.</p>
                                                                                        <span class="gas-block-intro-cards__link">
                                    <span class="gas-block-intro-cards__link-label">Trouver une rencontre</span>
                                    <span class="gas-block-intro-cards__link-arrow" aria-hidden="true">&rarr;</span>
                                </span>
                                                    </a>
                    </li>
                                                        <li class="gas-block-intro-cards__item">
                        <a class="gas-block-intro-cards__card" href="#">
                                                            <span class="gas-block-intro-cards__icon" aria-hidden="true">🧠</span>
                                                                                        <h3 class="gas-block-intro-cards__card-title">Je veux comprendre le projet</h3>
                                                                                        <p class="gas-block-intro-cards__card-text">Lisez l&#039;histoire de Philippe et découvrez pourquoi ce projet a été créé.</p>
                                                                                        <span class="gas-block-intro-cards__link">
                                    <span class="gas-block-intro-cards__link-label">Lire l&#039;histoire</span>
                                    <span class="gas-block-intro-cards__link-arrow" aria-hidden="true">&rarr;</span>
                                </span>
                                                    </a>
                    </li>
                            </ul>
            </div>
</section>
</div>

Nuage de logos `logo_cloud`

Liste de logos partenaires

variante : plain

Voir le HTML rendu

<div id="pretty_logo_cloud_001" class="gas-block-anchor" data-gas-block-id="pretty_logo_cloud_001"><section class="gas-block-logo-cloud gas-block-logo-cloud--cols-5 gas-block-logo-cloud--style-plain gas-block-logo-cloud--align-center" data-block-type="logo_cloud">
    <div class="gas-block-logo-cloud__inner">
                    <div class="gas-block-logo-cloud__header">
                <h2 class="gas-block-logo-cloud__title">Ils nous soutiennent</h2>                            </div>
                <div class="gas-block-logo-cloud__grid">
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/333/fff&#038;text=ACME" alt="ACME" loading="lazy" />                    </a>                </div>
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/444/fff&#038;text=Globex" alt="Globex" loading="lazy" />                    </a>                </div>
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/555/fff&#038;text=Initech" alt="Initech" loading="lazy" />                    </a>                </div>
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/666/fff&#038;text=Umbrella" alt="Umbrella" loading="lazy" />                    </a>                </div>
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/777/fff&#038;text=Stark" alt="Stark Industries" loading="lazy" />                    </a>                </div>
                    </div>
            </div>
</section>
</div>

variante : grayscale

Voir le HTML rendu

<div id="pretty_logo_cloud_001" class="gas-block-anchor" data-gas-block-id="pretty_logo_cloud_001"><section class="gas-block-logo-cloud gas-block-logo-cloud--cols-5 gas-block-logo-cloud--style-grayscale gas-block-logo-cloud--align-center" data-block-type="logo_cloud">
    <div class="gas-block-logo-cloud__inner">
                    <div class="gas-block-logo-cloud__header">
                <h2 class="gas-block-logo-cloud__title">Ils nous soutiennent</h2>                            </div>
                <div class="gas-block-logo-cloud__grid">
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/333/fff&#038;text=ACME" alt="ACME" loading="lazy" />                    </a>                </div>
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/444/fff&#038;text=Globex" alt="Globex" loading="lazy" />                    </a>                </div>
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/555/fff&#038;text=Initech" alt="Initech" loading="lazy" />                    </a>                </div>
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/666/fff&#038;text=Umbrella" alt="Umbrella" loading="lazy" />                    </a>                </div>
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/777/fff&#038;text=Stark" alt="Stark Industries" loading="lazy" />                    </a>                </div>
                    </div>
            </div>
</section>
</div>

variante : bordered

Voir le HTML rendu

<div id="pretty_logo_cloud_001" class="gas-block-anchor" data-gas-block-id="pretty_logo_cloud_001"><section class="gas-block-logo-cloud gas-block-logo-cloud--cols-5 gas-block-logo-cloud--style-bordered gas-block-logo-cloud--align-center" data-block-type="logo_cloud">
    <div class="gas-block-logo-cloud__inner">
                    <div class="gas-block-logo-cloud__header">
                <h2 class="gas-block-logo-cloud__title">Ils nous soutiennent</h2>                            </div>
                <div class="gas-block-logo-cloud__grid">
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/333/fff&#038;text=ACME" alt="ACME" loading="lazy" />                    </a>                </div>
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/444/fff&#038;text=Globex" alt="Globex" loading="lazy" />                    </a>                </div>
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/555/fff&#038;text=Initech" alt="Initech" loading="lazy" />                    </a>                </div>
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/666/fff&#038;text=Umbrella" alt="Umbrella" loading="lazy" />                    </a>                </div>
                                            <div class="gas-block-logo-cloud__item">
                    <a href="#" class="gas-block-logo-cloud__link">                    <img src="https://dummyimage.com/200x80/777/fff&#038;text=Stark" alt="Stark Industries" loading="lazy" />                    </a>                </div>
                    </div>
            </div>
</section>
</div>

Bandeau de logos défilant `logo_marquee`

Logos partenaires défilant en continu (marquee CSS). Variante animée de logo_cloud.

Ils nous font confiance

Voir le HTML rendu

<div id="sample_logo_marquee_001" class="gas-block-anchor" data-gas-block-id="sample_logo_marquee_001"><section class="gas-block-logo-marquee gas-block-logo-marquee--speed-normal gas-block-logo-marquee--grayscale" data-block-type="logo_marquee">
            <p class="gas-block-logo-marquee__title">Ils nous font confiance</p>
        <div class="gas-block-logo-marquee__viewport">
        <div class="gas-block-logo-marquee__track">
            <a class="gas-block-logo-marquee__item" href="#"><img class="gas-block-logo-marquee__img" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Partenaire 1" loading="lazy" decoding="async" /></a><a class="gas-block-logo-marquee__item" href="#"><img class="gas-block-logo-marquee__img" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Partenaire 2" loading="lazy" decoding="async" /></a><a class="gas-block-logo-marquee__item" href="#"><img class="gas-block-logo-marquee__img" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="Partenaire 3" loading="lazy" decoding="async" /></a>            <a class="gas-block-logo-marquee__item" href="#" aria-hidden="true" tabindex="-1"><img class="gas-block-logo-marquee__img" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="" loading="lazy" decoding="async" /></a><a class="gas-block-logo-marquee__item" href="#" aria-hidden="true" tabindex="-1"><img class="gas-block-logo-marquee__img" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="" loading="lazy" decoding="async" /></a><a class="gas-block-logo-marquee__item" href="#" aria-hidden="true" tabindex="-1"><img class="gas-block-logo-marquee__img" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="" loading="lazy" decoding="async" /></a>        </div>
    </div>
</section>
</div>

Cartes parcours `pathway_cards`

En-tête centré (pré-titre, titre coloré, accroche, intro) suivi d'une grille de cartes image + catégorie + titre + description + lien. Idéal pour présenter plusieurs portes d'entrée vers des contenus.

variante : default

Voir le HTML rendu

<div id="sample_pathway_cards_001" class="gas-block-anchor" data-gas-block-id="sample_pathway_cards_001"><section class="gas-block-pathway-cards gas-block-pathway-cards--align-center gas-block-pathway-cards--cols-3 gas-block-pathway-cards--style-flat" data-block-type="pathway_cards">
            <header class="gas-block-pathway-cards__header">
                            <p class="gas-block-pathway-cards__eyebrow">CE QUE VOUS DÉCOUVRIREZ</p>
                                        <h2 class="gas-block-pathway-cards__title">Plusieurs <span class="gas-rt-color--primary">portes d'entrée</span></h2>
                                        <div class="gas-block-pathway-cards__lead"><p>Explorez nos contenus selon vos envies du moment.</p></div>
                                        <div class="gas-block-pathway-cards__intro"><p>Rencontres, méditations guidées, films et musique : chaque parcours ouvre sur une autre façon d'avancer.</p></div>
                    </header>
    
                    <ul class="gas-block-pathway-cards__grid">
                                            <li class="gas-block-pathway-cards__item">
                    <a class="gas-block-pathway-cards__card" href="#">
                                                    <figure class="gas-block-pathway-cards__media">
                                <img class="gas-block-pathway-cards__image" src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                            </figure>
                                                <div class="gas-block-pathway-cards__body">
                                                            <p class="gas-block-pathway-cards__category">Rencontres</p>
                                                                                        <h3 class="gas-block-pathway-cards__card-title">Cercles de parole</h3>
                                                                                        <p class="gas-block-pathway-cards__card-text">Des espaces d&#039;écoute pour partager son expérience en confiance.</p>
                                                                                        <span class="gas-block-pathway-cards__link">
                                    <span class="gas-block-pathway-cards__link-label">Découvrir</span>
                                    <span class="gas-block-pathway-cards__link-arrow" aria-hidden="true">&rarr;</span>
                                </span>
                                                    </div>
                    </a>
                </li>
                                            <li class="gas-block-pathway-cards__item">
                    <a class="gas-block-pathway-cards__card" href="#">
                                                    <figure class="gas-block-pathway-cards__media">
                                <img class="gas-block-pathway-cards__image" src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                            </figure>
                                                <div class="gas-block-pathway-cards__body">
                                                            <p class="gas-block-pathway-cards__category">Méditations</p>
                                                                                        <h3 class="gas-block-pathway-cards__card-title">Pratiques guidées</h3>
                                                                                        <p class="gas-block-pathway-cards__card-text">Quelques minutes par jour pour revenir à l&#039;essentiel.</p>
                                                                                        <span class="gas-block-pathway-cards__link">
                                    <span class="gas-block-pathway-cards__link-label">Écouter</span>
                                    <span class="gas-block-pathway-cards__link-arrow" aria-hidden="true">&rarr;</span>
                                </span>
                                                    </div>
                    </a>
                </li>
                                            <li class="gas-block-pathway-cards__item">
                    <a class="gas-block-pathway-cards__card" href="#">
                                                    <figure class="gas-block-pathway-cards__media">
                                <img class="gas-block-pathway-cards__image" src="https://images.unsplash.com/photo-1485846234645-a62644f84728?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                            </figure>
                                                <div class="gas-block-pathway-cards__body">
                                                            <p class="gas-block-pathway-cards__category">Films</p>
                                                                                        <h3 class="gas-block-pathway-cards__card-title">Regards documentaires</h3>
                                                                                        <p class="gas-block-pathway-cards__card-text">Des histoires qui inspirent et donnent de l&#039;élan.</p>
                                                                                        <span class="gas-block-pathway-cards__link">
                                    <span class="gas-block-pathway-cards__link-label">Regarder</span>
                                    <span class="gas-block-pathway-cards__link-arrow" aria-hidden="true">&rarr;</span>
                                </span>
                                                    </div>
                    </a>
                </li>
                    </ul>
        </section>
</div>

variante : tabs

Voir le HTML rendu

<div id="sample_pathway_cards_001" class="gas-block-anchor" data-gas-block-id="sample_pathway_cards_001"><section class="gas-block-pathway-cards gas-block-pathway-cards--align-center gas-block-pathway-cards--cols-3 gas-block-pathway-cards--style-flat" data-block-type="pathway_cards">
            <header class="gas-block-pathway-cards__header">
                            <p class="gas-block-pathway-cards__eyebrow">CE QUE VOUS DÉCOUVRIREZ</p>
                                        <h2 class="gas-block-pathway-cards__title">Plusieurs <span class="gas-rt-color--primary">portes d'entrée</span></h2>
                                        <div class="gas-block-pathway-cards__lead"><p>Explorez nos contenus selon vos envies du moment.</p></div>
                                        <div class="gas-block-pathway-cards__intro"><p>Rencontres, méditations guidées, films et musique : chaque parcours ouvre sur une autre façon d'avancer.</p></div>
                    </header>
    
                    <ul class="gas-block-pathway-cards__grid">
                                            <li class="gas-block-pathway-cards__item">
                    <a class="gas-block-pathway-cards__card" href="#">
                                                    <figure class="gas-block-pathway-cards__media">
                                <img class="gas-block-pathway-cards__image" src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                            </figure>
                                                <div class="gas-block-pathway-cards__body">
                                                            <p class="gas-block-pathway-cards__category">Rencontres</p>
                                                                                        <h3 class="gas-block-pathway-cards__card-title">Cercles de parole</h3>
                                                                                        <p class="gas-block-pathway-cards__card-text">Des espaces d&#039;écoute pour partager son expérience en confiance.</p>
                                                                                        <span class="gas-block-pathway-cards__link">
                                    <span class="gas-block-pathway-cards__link-label">Découvrir</span>
                                    <span class="gas-block-pathway-cards__link-arrow" aria-hidden="true">&rarr;</span>
                                </span>
                                                    </div>
                    </a>
                </li>
                                            <li class="gas-block-pathway-cards__item">
                    <a class="gas-block-pathway-cards__card" href="#">
                                                    <figure class="gas-block-pathway-cards__media">
                                <img class="gas-block-pathway-cards__image" src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                            </figure>
                                                <div class="gas-block-pathway-cards__body">
                                                            <p class="gas-block-pathway-cards__category">Méditations</p>
                                                                                        <h3 class="gas-block-pathway-cards__card-title">Pratiques guidées</h3>
                                                                                        <p class="gas-block-pathway-cards__card-text">Quelques minutes par jour pour revenir à l&#039;essentiel.</p>
                                                                                        <span class="gas-block-pathway-cards__link">
                                    <span class="gas-block-pathway-cards__link-label">Écouter</span>
                                    <span class="gas-block-pathway-cards__link-arrow" aria-hidden="true">&rarr;</span>
                                </span>
                                                    </div>
                    </a>
                </li>
                                            <li class="gas-block-pathway-cards__item">
                    <a class="gas-block-pathway-cards__card" href="#">
                                                    <figure class="gas-block-pathway-cards__media">
                                <img class="gas-block-pathway-cards__image" src="https://images.unsplash.com/photo-1485846234645-a62644f84728?w=600&#038;auto=format&#038;fit=crop&#038;q=70" alt="" loading="lazy" decoding="async" />                            </figure>
                                                <div class="gas-block-pathway-cards__body">
                                                            <p class="gas-block-pathway-cards__category">Films</p>
                                                                                        <h3 class="gas-block-pathway-cards__card-title">Regards documentaires</h3>
                                                                                        <p class="gas-block-pathway-cards__card-text">Des histoires qui inspirent et donnent de l&#039;élan.</p>
                                                                                        <span class="gas-block-pathway-cards__link">
                                    <span class="gas-block-pathway-cards__link-label">Regarder</span>
                                    <span class="gas-block-pathway-cards__link-arrow" aria-hidden="true">&rarr;</span>
                                </span>
                                                    </div>
                    </a>
                </li>
                    </ul>
        </section>
</div>

Grille de personnes `people_grid`

Panneau d'intro à gauche (sur-titre, titre coloré, accroche, bouton) + grille de portraits à droite (nom en surimpression). Source manuelle ou dynamique (catalogue des personnes publiées). Tuile « voir tout » optionnelle.

L'ÉQUIPE

Les personnes derrière le projet

Découvrez celles et ceux qui font vivre l'association.

Voir le HTML rendu

<div id="sample_people_grid_001" class="gas-block-anchor" data-gas-block-id="sample_people_grid_001"><section class="gas-block-people-grid gas-block-people-grid--cols-3 gas-block-people-grid--has-intro" data-block-type="people_grid">
            <div class="gas-block-people-grid__intro">
                            <p class="gas-block-people-grid__eyebrow">L&#039;ÉQUIPE</p>
                                        <h2 class="gas-block-people-grid__title">Les personnes derrière le projet</h2>
                                        <div class="gas-block-people-grid__lead"><p>Découvrez celles et ceux qui font vivre l'association.</p></div>
                                            </div>
    
    <ul class="gas-block-people-grid__grid">
                                <li class="gas-block-people-grid__item">
                <a class="gas-block-people-grid__tile" href="#">
                                            <figure class="gas-block-people-grid__media">
                            <img class="gas-block-people-grid__photo" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="" loading="lazy" decoding="async" />                        </figure>
                                        <span class="gas-block-people-grid__caption">
                        <span class="gas-block-people-grid__name">Personne 1</span>
                                                    <span class="gas-block-people-grid__role">Rôle</span>
                                            </span>
                </a>
            </li>
                                <li class="gas-block-people-grid__item">
                <a class="gas-block-people-grid__tile" href="#">
                                            <figure class="gas-block-people-grid__media">
                            <img class="gas-block-people-grid__photo" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="" loading="lazy" decoding="async" />                        </figure>
                                        <span class="gas-block-people-grid__caption">
                        <span class="gas-block-people-grid__name">Personne 2</span>
                                                    <span class="gas-block-people-grid__role">Rôle</span>
                                            </span>
                </a>
            </li>
                                <li class="gas-block-people-grid__item">
                <a class="gas-block-people-grid__tile" href="#">
                                            <figure class="gas-block-people-grid__media">
                            <img class="gas-block-people-grid__photo" src="https://media.kiener-burkina.monasso.cloud/2026/07/couture-v-684x1024.jpeg" alt="" loading="lazy" decoding="async" />                        </figure>
                                        <span class="gas-block-people-grid__caption">
                        <span class="gas-block-people-grid__name">Personne 3</span>
                                                    <span class="gas-block-people-grid__role">Rôle</span>
                                            </span>
                </a>
            </li>
        
            </ul>
</section>
</div>

Tarifs `pricing_table`

Grille de plans tarifaires avec features et CTA par plan

variante : cards

Nos formules d'adhésion

Choisissez la formule qui vous correspond. Sans engagement.

Découverte

0.- /mois

Pour découvrir l'association

Accès aux articles
Newsletter mensuelle

Commencer

Populaire

Membre

29.- /mois

La formule la plus choisie

Tout Découverte
Activités illimitées
Support prioritaire
Événements membres

Adhérer

Bienfaiteur

99.- /mois

Soutenez nos actions

Tout Membre
Mention sur le site
Invitation à l'AG

Nous soutenir

Voir le HTML rendu

<div id="sample_pricing_table_001" class="gas-block-anchor" data-gas-block-id="sample_pricing_table_001"><section class="gas-block-pricing-table gas-block-pricing-table--cols-3 gas-block-pricing-table--style-cards" data-block-type="pricing_table">
    <div class="gas-block-pricing-table__inner">
                    <h2 class="gas-block-pricing-table__title">Nos formules d&#039;adhésion</h2>
                            <p class="gas-block-pricing-table__subtitle">Choisissez la formule qui vous correspond. Sans engagement.</p>
        
        <div class="gas-block-pricing-table__grid">
                                            <article class="gas-block-pricing-table__plan">
                    
                                            <h3 class="gas-block-pricing-table__plan-name">Découverte</h3>
                    
                                            <p class="gas-block-pricing-table__price gas-block-pricing-table__price--monthly">
                            <span class="gas-block-pricing-table__price-amount">0.-</span>
                                                            <span class="gas-block-pricing-table__price-period">/mois</span>
                                                    </p>
                                        
                                            <p class="gas-block-pricing-table__plan-desc">Pour découvrir l&#039;association</p>
                    
                                            <ul class="gas-block-pricing-table__features">
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Accès aux articles</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Newsletter mensuelle</span>
                                </li>
                                                    </ul>
                    
                                            <a class="gas-button gas-button--outline gas-block-pricing-table__cta"
                           href="#">
                            Commencer                        </a>
                                    </article>
                                            <article class="gas-block-pricing-table__plan gas-block-pricing-table__plan--featured">
                                            <span class="gas-block-pricing-table__badge">Populaire</span>
                    
                                            <h3 class="gas-block-pricing-table__plan-name">Membre</h3>
                    
                                            <p class="gas-block-pricing-table__price gas-block-pricing-table__price--monthly">
                            <span class="gas-block-pricing-table__price-amount">29.-</span>
                                                            <span class="gas-block-pricing-table__price-period">/mois</span>
                                                    </p>
                                        
                                            <p class="gas-block-pricing-table__plan-desc">La formule la plus choisie</p>
                    
                                            <ul class="gas-block-pricing-table__features">
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Tout Découverte</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Activités illimitées</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Support prioritaire</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Événements membres</span>
                                </li>
                                                    </ul>
                    
                                            <a class="gas-button gas-button--primary gas-block-pricing-table__cta"
                           href="#">
                            Adhérer                        </a>
                                    </article>
                                            <article class="gas-block-pricing-table__plan">
                    
                                            <h3 class="gas-block-pricing-table__plan-name">Bienfaiteur</h3>
                    
                                            <p class="gas-block-pricing-table__price gas-block-pricing-table__price--monthly">
                            <span class="gas-block-pricing-table__price-amount">99.-</span>
                                                            <span class="gas-block-pricing-table__price-period">/mois</span>
                                                    </p>
                                        
                                            <p class="gas-block-pricing-table__plan-desc">Soutenez nos actions</p>
                    
                                            <ul class="gas-block-pricing-table__features">
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Tout Membre</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Mention sur le site</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Invitation à l&#039;AG</span>
                                </li>
                                                    </ul>
                    
                                            <a class="gas-button gas-button--outline gas-block-pricing-table__cta"
                           href="#">
                            Nous soutenir                        </a>
                                    </article>
                    </div>
            </div>
</section>
</div>

variante : compact

Nos formules d'adhésion

Choisissez la formule qui vous correspond. Sans engagement.

Découverte

0.- /mois

Pour découvrir l'association

Accès aux articles
Newsletter mensuelle

Commencer

Populaire

Membre

29.- /mois

La formule la plus choisie

Tout Découverte
Activités illimitées
Support prioritaire
Événements membres

Adhérer

Bienfaiteur

99.- /mois

Soutenez nos actions

Tout Membre
Mention sur le site
Invitation à l'AG

Nous soutenir

Voir le HTML rendu

<div id="sample_pricing_table_001" class="gas-block-anchor" data-gas-block-id="sample_pricing_table_001"><section class="gas-block-pricing-table gas-block-pricing-table--cols-3 gas-block-pricing-table--style-compact" data-block-type="pricing_table">
    <div class="gas-block-pricing-table__inner">
                    <h2 class="gas-block-pricing-table__title">Nos formules d&#039;adhésion</h2>
                            <p class="gas-block-pricing-table__subtitle">Choisissez la formule qui vous correspond. Sans engagement.</p>
        
        <div class="gas-block-pricing-table__grid">
                                            <article class="gas-block-pricing-table__plan">
                    
                                            <h3 class="gas-block-pricing-table__plan-name">Découverte</h3>
                    
                                            <p class="gas-block-pricing-table__price gas-block-pricing-table__price--monthly">
                            <span class="gas-block-pricing-table__price-amount">0.-</span>
                                                            <span class="gas-block-pricing-table__price-period">/mois</span>
                                                    </p>
                                        
                                            <p class="gas-block-pricing-table__plan-desc">Pour découvrir l&#039;association</p>
                    
                                            <ul class="gas-block-pricing-table__features">
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Accès aux articles</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Newsletter mensuelle</span>
                                </li>
                                                    </ul>
                    
                                            <a class="gas-button gas-button--outline gas-block-pricing-table__cta"
                           href="#">
                            Commencer                        </a>
                                    </article>
                                            <article class="gas-block-pricing-table__plan gas-block-pricing-table__plan--featured">
                                            <span class="gas-block-pricing-table__badge">Populaire</span>
                    
                                            <h3 class="gas-block-pricing-table__plan-name">Membre</h3>
                    
                                            <p class="gas-block-pricing-table__price gas-block-pricing-table__price--monthly">
                            <span class="gas-block-pricing-table__price-amount">29.-</span>
                                                            <span class="gas-block-pricing-table__price-period">/mois</span>
                                                    </p>
                                        
                                            <p class="gas-block-pricing-table__plan-desc">La formule la plus choisie</p>
                    
                                            <ul class="gas-block-pricing-table__features">
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Tout Découverte</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Activités illimitées</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Support prioritaire</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Événements membres</span>
                                </li>
                                                    </ul>
                    
                                            <a class="gas-button gas-button--primary gas-block-pricing-table__cta"
                           href="#">
                            Adhérer                        </a>
                                    </article>
                                            <article class="gas-block-pricing-table__plan">
                    
                                            <h3 class="gas-block-pricing-table__plan-name">Bienfaiteur</h3>
                    
                                            <p class="gas-block-pricing-table__price gas-block-pricing-table__price--monthly">
                            <span class="gas-block-pricing-table__price-amount">99.-</span>
                                                            <span class="gas-block-pricing-table__price-period">/mois</span>
                                                    </p>
                                        
                                            <p class="gas-block-pricing-table__plan-desc">Soutenez nos actions</p>
                    
                                            <ul class="gas-block-pricing-table__features">
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Tout Membre</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Mention sur le site</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Invitation à l&#039;AG</span>
                                </li>
                                                    </ul>
                    
                                            <a class="gas-button gas-button--outline gas-block-pricing-table__cta"
                           href="#">
                            Nous soutenir                        </a>
                                    </article>
                    </div>
            </div>
</section>
</div>

variante : bordered

Nos formules d'adhésion

Choisissez la formule qui vous correspond. Sans engagement.

Découverte

0.- /mois

Pour découvrir l'association

Accès aux articles
Newsletter mensuelle

Commencer

Populaire

Membre

29.- /mois

La formule la plus choisie

Tout Découverte
Activités illimitées
Support prioritaire
Événements membres

Adhérer

Bienfaiteur

99.- /mois

Soutenez nos actions

Tout Membre
Mention sur le site
Invitation à l'AG

Nous soutenir

Voir le HTML rendu

<div id="sample_pricing_table_001" class="gas-block-anchor" data-gas-block-id="sample_pricing_table_001"><section class="gas-block-pricing-table gas-block-pricing-table--cols-3 gas-block-pricing-table--style-bordered" data-block-type="pricing_table">
    <div class="gas-block-pricing-table__inner">
                    <h2 class="gas-block-pricing-table__title">Nos formules d&#039;adhésion</h2>
                            <p class="gas-block-pricing-table__subtitle">Choisissez la formule qui vous correspond. Sans engagement.</p>
        
        <div class="gas-block-pricing-table__grid">
                                            <article class="gas-block-pricing-table__plan">
                    
                                            <h3 class="gas-block-pricing-table__plan-name">Découverte</h3>
                    
                                            <p class="gas-block-pricing-table__price gas-block-pricing-table__price--monthly">
                            <span class="gas-block-pricing-table__price-amount">0.-</span>
                                                            <span class="gas-block-pricing-table__price-period">/mois</span>
                                                    </p>
                                        
                                            <p class="gas-block-pricing-table__plan-desc">Pour découvrir l&#039;association</p>
                    
                                            <ul class="gas-block-pricing-table__features">
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Accès aux articles</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Newsletter mensuelle</span>
                                </li>
                                                    </ul>
                    
                                            <a class="gas-button gas-button--outline gas-block-pricing-table__cta"
                           href="#">
                            Commencer                        </a>
                                    </article>
                                            <article class="gas-block-pricing-table__plan gas-block-pricing-table__plan--featured">
                                            <span class="gas-block-pricing-table__badge">Populaire</span>
                    
                                            <h3 class="gas-block-pricing-table__plan-name">Membre</h3>
                    
                                            <p class="gas-block-pricing-table__price gas-block-pricing-table__price--monthly">
                            <span class="gas-block-pricing-table__price-amount">29.-</span>
                                                            <span class="gas-block-pricing-table__price-period">/mois</span>
                                                    </p>
                                        
                                            <p class="gas-block-pricing-table__plan-desc">La formule la plus choisie</p>
                    
                                            <ul class="gas-block-pricing-table__features">
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Tout Découverte</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Activités illimitées</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Support prioritaire</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Événements membres</span>
                                </li>
                                                    </ul>
                    
                                            <a class="gas-button gas-button--primary gas-block-pricing-table__cta"
                           href="#">
                            Adhérer                        </a>
                                    </article>
                                            <article class="gas-block-pricing-table__plan">
                    
                                            <h3 class="gas-block-pricing-table__plan-name">Bienfaiteur</h3>
                    
                                            <p class="gas-block-pricing-table__price gas-block-pricing-table__price--monthly">
                            <span class="gas-block-pricing-table__price-amount">99.-</span>
                                                            <span class="gas-block-pricing-table__price-period">/mois</span>
                                                    </p>
                                        
                                            <p class="gas-block-pricing-table__plan-desc">Soutenez nos actions</p>
                    
                                            <ul class="gas-block-pricing-table__features">
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Tout Membre</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Mention sur le site</span>
                                </li>
                                                            <li class="gas-block-pricing-table__feature">
                                    <span class="gas-block-pricing-table__feature-check" aria-hidden="true">✓</span>
                                    <span class="gas-block-pricing-table__feature-text">Invitation à l&#039;AG</span>
                                </li>
                                                    </ul>
                    
                                            <a class="gas-button gas-button--outline gas-block-pricing-table__cta"
                           href="#">
                            Nous soutenir                        </a>
                                    </article>
                    </div>
            </div>
</section>
</div>

Bascule tarifaire `pricing_toggle`

Interrupteur Mensuel/Annuel qui pilote une grille de tarifs voisine

Économisez 2 mois

Voir le HTML rendu

<div id="sample_pricing_toggle_001" class="gas-block-anchor" data-gas-block-id="sample_pricing_toggle_001"><section class="gas-block-pricing-toggle" data-block-type="pricing_toggle"
         data-gas-block-enhancer="pricing_toggle"
         data-gas-block-config="{&quot;target&quot;:&quot;&quot;,&quot;defaultPeriod&quot;:&quot;monthly&quot;}">
    <div class="gas-block-pricing-toggle__inner">
        <div class="gas-block-pricing-toggle__control" role="tablist" aria-label="Mensuel / Annuel">
            <button type="button"
                    class="gas-block-pricing-toggle__option"
                    role="tab"
                    data-period="monthly"
                    aria-selected="true">
                Mensuel            </button>
            <button type="button"
                    class="gas-block-pricing-toggle__option"
                    role="tab"
                    data-period="annual"
                    aria-selected="false">
                Annuel            </button>
        </div>
                    <span class="gas-block-pricing-toggle__save">Économisez 2 mois</span>
            </div>
</section>
</div>

Requête (slice) `query`

Tranche déclarative d'une source (entité, activité, personne, comité, document, location) : filtres de champs + tri + limite, rendue en cartes, liste, liens ou logos. Slice figée (sans recherche/pagination front) → portable. Pour une archive filtrable/paginée, utiliser card_archive.

variante : cards

Dernières publications

Une sélection de nos contenus récents, mise à jour automatiquement.

Aucun résultat

Voir le HTML rendu

<div id="sample_query_001" class="gas-block-anchor" data-gas-block-id="sample_query_001"><section class="gas-block-query gas-block-query--layout-cards gas-block-query--cols-3 gas-block-query--source-document" data-block-type="query" data-source="document">
    <div class="gas-block-query__inner">
                    <header class="gas-block-query__head">
                <h2 class="gas-block-query__title">Dernières publications</h2>                <p class="gas-block-query__lead">Une sélection de nos contenus récents, mise à jour automatiquement.</p>            </header>
        
                    <div class="gas-block-query__empty">Aucun résultat</div>

            </div>
</section>
</div>

variante : list

Dernières publications

Une sélection de nos contenus récents, mise à jour automatiquement.

Aucun résultat

Voir le HTML rendu

<div id="sample_query_001" class="gas-block-anchor" data-gas-block-id="sample_query_001"><section class="gas-block-query gas-block-query--layout-list gas-block-query--cols-3 gas-block-query--source-document" data-block-type="query" data-source="document">
    <div class="gas-block-query__inner">
                    <header class="gas-block-query__head">
                <h2 class="gas-block-query__title">Dernières publications</h2>                <p class="gas-block-query__lead">Une sélection de nos contenus récents, mise à jour automatiquement.</p>            </header>
        
                    <div class="gas-block-query__empty">Aucun résultat</div>

            </div>
</section>
</div>

variante : links

Dernières publications

Une sélection de nos contenus récents, mise à jour automatiquement.

Aucun résultat

Voir le HTML rendu

<div id="sample_query_001" class="gas-block-anchor" data-gas-block-id="sample_query_001"><section class="gas-block-query gas-block-query--layout-links gas-block-query--cols-3 gas-block-query--source-document" data-block-type="query" data-source="document">
    <div class="gas-block-query__inner">
                    <header class="gas-block-query__head">
                <h2 class="gas-block-query__title">Dernières publications</h2>                <p class="gas-block-query__lead">Une sélection de nos contenus récents, mise à jour automatiquement.</p>            </header>
        
                    <div class="gas-block-query__empty">Aucun résultat</div>

            </div>
</section>
</div>

variante : logos

Dernières publications

Une sélection de nos contenus récents, mise à jour automatiquement.

Aucun résultat

Voir le HTML rendu

<div id="sample_query_001" class="gas-block-anchor" data-gas-block-id="sample_query_001"><section class="gas-block-query gas-block-query--layout-logos gas-block-query--cols-3 gas-block-query--source-document" data-block-type="query" data-source="document">
    <div class="gas-block-query__inner">
                    <header class="gas-block-query__head">
                <h2 class="gas-block-query__title">Dernières publications</h2>                <p class="gas-block-query__lead">Une sélection de nos contenus récents, mise à jour automatiquement.</p>            </header>
        
                    <div class="gas-block-query__empty">Aucun résultat</div>

            </div>
</section>
</div>

Ruban de spécialités `specialty_bar`

Ruban horizontal discret de termes séparés par « • » (spécialités, services, mots-clés). Trois fonds : transparent, surface, primary. Passe proprement à la ligne en mobile.

Voir le HTML rendu

<div id="sample_specialty_bar_001" class="gas-block-anchor" data-gas-block-id="sample_specialty_bar_001"><section class="gas-block-specialty-bar gas-block-specialty-bar--tone-surface gas-block-specialty-bar--align-center" data-block-type="specialty_bar">
    <ul class="gas-block-specialty-bar__list">
                    <li class="gas-block-specialty-bar__item">
                                    <a class="gas-block-specialty-bar__term" href="/soins/acupuncture/">Acupuncture</a>
                            </li>
                    <li class="gas-block-specialty-bar__item">
                                    <a class="gas-block-specialty-bar__term" href="/soins/massage-tui-na/">Massage Tui Na</a>
                            </li>
                    <li class="gas-block-specialty-bar__item">
                                    <span class="gas-block-specialty-bar__term">Moxibustion</span>
                            </li>
                    <li class="gas-block-specialty-bar__item">
                                    <a class="gas-block-specialty-bar__term" href="/soins/phytotherapie/">Phytothérapie</a>
                            </li>
            </ul>
</section>
</div>

Statistiques `stats`

KPI et chiffres cles

variante : cards

L'association en chiffres

10+

Animateurs certifiés

2500

Participants accueillis

97%

Recommandation par les anciens

150+

Sessions organisées par an

Voir le HTML rendu

<div id="pretty_stats_001" class="gas-block-anchor" data-gas-block-id="pretty_stats_001"><section class="gas-block-stats gas-block-stats--cards" data-block-type="stats">
        <div class="gas-block-stats__inner">
                <div class="gas-block-stats__body">
        <h2 class="gas-block-stats__title" data-gas-field-key="sample.stats.pretty.title">L&#039;association en chiffres</h2>                <div class="gas-block-stats__grid">
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.0.value">10+</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.0.label">Animateurs certifiés</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.1.value">2500</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.1.label">Participants accueillis</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.2.value">97%</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.2.label">Recommandation par les anciens</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.3.value">150+</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.3.label">Sessions organisées par an</p>                </article>
                    </div>
        </div>
    </div>
</section>
</div>

variante : inline

L'association en chiffres

10+

Animateurs certifiés

2500

Participants accueillis

97%

Recommandation par les anciens

150+

Sessions organisées par an

Voir le HTML rendu

<div id="pretty_stats_001" class="gas-block-anchor" data-gas-block-id="pretty_stats_001"><section class="gas-block-stats gas-block-stats--inline" data-block-type="stats">
        <div class="gas-block-stats__inner">
                <div class="gas-block-stats__body">
        <h2 class="gas-block-stats__title" data-gas-field-key="sample.stats.pretty.title">L&#039;association en chiffres</h2>                <div class="gas-block-stats__grid">
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.0.value">10+</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.0.label">Animateurs certifiés</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.1.value">2500</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.1.label">Participants accueillis</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.2.value">97%</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.2.label">Recommandation par les anciens</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.3.value">150+</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.3.label">Sessions organisées par an</p>                </article>
                    </div>
        </div>
    </div>
</section>
</div>

variante : band

L'association en chiffres

10+

Animateurs certifiés

2500

Participants accueillis

97%

Recommandation par les anciens

150+

Sessions organisées par an

Voir le HTML rendu

<div id="pretty_stats_001" class="gas-block-anchor" data-gas-block-id="pretty_stats_001"><section class="gas-block-stats gas-block-stats--band" data-block-type="stats">
        <div class="gas-block-stats__inner">
                <div class="gas-block-stats__body">
        <h2 class="gas-block-stats__title" data-gas-field-key="sample.stats.pretty.title">L&#039;association en chiffres</h2>                <div class="gas-block-stats__grid">
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.0.value">10+</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.0.label">Animateurs certifiés</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.1.value">2500</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.1.label">Participants accueillis</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.2.value">97%</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.2.label">Recommandation par les anciens</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.3.value">150+</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.3.label">Sessions organisées par an</p>                </article>
                    </div>
        </div>
    </div>
</section>
</div>

variante : split

L'association en chiffres

10+

Animateurs certifiés

2500

Participants accueillis

97%

Recommandation par les anciens

150+

Sessions organisées par an

Voir le HTML rendu

<div id="pretty_stats_001" class="gas-block-anchor" data-gas-block-id="pretty_stats_001"><section class="gas-block-stats gas-block-stats--split gas-block-stats--media-left" data-block-type="stats">
        <div class="gas-block-stats__inner">
                <div class="gas-block-stats__body">
        <h2 class="gas-block-stats__title" data-gas-field-key="sample.stats.pretty.title">L&#039;association en chiffres</h2>                <div class="gas-block-stats__grid">
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.0.value">10+</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.0.label">Animateurs certifiés</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.1.value">2500</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.1.label">Participants accueillis</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.2.value">97%</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.2.label">Recommandation par les anciens</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.3.value">150+</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.3.label">Sessions organisées par an</p>                </article>
                    </div>
        </div>
    </div>
</section>
</div>

variante : timeline

L'association en chiffres

10+

Animateurs certifiés

2500

Participants accueillis

97%

Recommandation par les anciens

150+

Sessions organisées par an

Voir le HTML rendu

<div id="pretty_stats_001" class="gas-block-anchor" data-gas-block-id="pretty_stats_001"><section class="gas-block-stats gas-block-stats--timeline" data-block-type="stats">
        <div class="gas-block-stats__inner">
                <div class="gas-block-stats__body">
        <h2 class="gas-block-stats__title" data-gas-field-key="sample.stats.pretty.title">L&#039;association en chiffres</h2>                <div class="gas-block-stats__grid">
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.0.value">10+</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.0.label">Animateurs certifiés</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.1.value">2500</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.1.label">Participants accueillis</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.2.value">97%</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.2.label">Recommandation par les anciens</p>                </article>
                                            <article class="gas-block-stats__item">
                    <p class="gas-block-stats__value" data-gas-field-key="sample.stats.pretty.items.3.value">150+</p>
                    <p class="gas-block-stats__label" data-gas-field-key="sample.stats.pretty.items.3.label">Sessions organisées par an</p>                </article>
                    </div>
        </div>
    </div>
</section>
</div>

Equipe `team_grid`

Cartes membres de l equipe

variante : plain

Notre équipe d'animation

Alice Martin

Co-fondatrice · Pratiques narratives

Bruno Schmid

Animateur · Communication consciente

Camille Dubois

Animatrice · Approche corporelle

David Wenger

Animateur · Écologie intérieure

Voir le HTML rendu

<div id="pretty_team_grid_001" class="gas-block-anchor" data-gas-block-id="pretty_team_grid_001"><section class="gas-block-team-grid gas-block-team-grid--cols-4 gas-block-team-grid--style-plain" data-block-type="team_grid">
    <div class="gas-block-team-grid__inner">
        <h2 class="gas-block-team-grid__title">Notre équipe d&#039;animation</h2>        <div class="gas-block-team-grid__grid">
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Alice" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Alice Martin</h3>                    <p class="gas-block-team-grid__role">Co-fondatrice · Pratiques narratives</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Bruno" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Bruno Schmid</h3>                    <p class="gas-block-team-grid__role">Animateur · Communication consciente</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Camille" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Camille Dubois</h3>                    <p class="gas-block-team-grid__role">Animatrice · Approche corporelle</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="David" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">David Wenger</h3>                    <p class="gas-block-team-grid__role">Animateur · Écologie intérieure</p>                                    </article>
                    </div>
    </div>
</section>
</div>

variante : card

Notre équipe d'animation

Alice Martin

Co-fondatrice · Pratiques narratives

Bruno Schmid

Animateur · Communication consciente

Camille Dubois

Animatrice · Approche corporelle

David Wenger

Animateur · Écologie intérieure

Voir le HTML rendu

<div id="pretty_team_grid_001" class="gas-block-anchor" data-gas-block-id="pretty_team_grid_001"><section class="gas-block-team-grid gas-block-team-grid--cols-4 gas-block-team-grid--style-card" data-block-type="team_grid">
    <div class="gas-block-team-grid__inner">
        <h2 class="gas-block-team-grid__title">Notre équipe d&#039;animation</h2>        <div class="gas-block-team-grid__grid">
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Alice" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Alice Martin</h3>                    <p class="gas-block-team-grid__role">Co-fondatrice · Pratiques narratives</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Bruno" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Bruno Schmid</h3>                    <p class="gas-block-team-grid__role">Animateur · Communication consciente</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Camille" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Camille Dubois</h3>                    <p class="gas-block-team-grid__role">Animatrice · Approche corporelle</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="David" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">David Wenger</h3>                    <p class="gas-block-team-grid__role">Animateur · Écologie intérieure</p>                                    </article>
                    </div>
    </div>
</section>
</div>

variante : circle

Notre équipe d'animation

Alice Martin

Co-fondatrice · Pratiques narratives

Bruno Schmid

Animateur · Communication consciente

Camille Dubois

Animatrice · Approche corporelle

David Wenger

Animateur · Écologie intérieure

Voir le HTML rendu

<div id="pretty_team_grid_001" class="gas-block-anchor" data-gas-block-id="pretty_team_grid_001"><section class="gas-block-team-grid gas-block-team-grid--cols-4 gas-block-team-grid--style-circle" data-block-type="team_grid">
    <div class="gas-block-team-grid__inner">
        <h2 class="gas-block-team-grid__title">Notre équipe d&#039;animation</h2>        <div class="gas-block-team-grid__grid">
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Alice" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Alice Martin</h3>                    <p class="gas-block-team-grid__role">Co-fondatrice · Pratiques narratives</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Bruno" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Bruno Schmid</h3>                    <p class="gas-block-team-grid__role">Animateur · Communication consciente</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Camille" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Camille Dubois</h3>                    <p class="gas-block-team-grid__role">Animatrice · Approche corporelle</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="David" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">David Wenger</h3>                    <p class="gas-block-team-grid__role">Animateur · Écologie intérieure</p>                                    </article>
                    </div>
    </div>
</section>
</div>

variante : minimal

Notre équipe d'animation

Alice Martin

Co-fondatrice · Pratiques narratives

Bruno Schmid

Animateur · Communication consciente

Camille Dubois

Animatrice · Approche corporelle

David Wenger

Animateur · Écologie intérieure

Voir le HTML rendu

<div id="pretty_team_grid_001" class="gas-block-anchor" data-gas-block-id="pretty_team_grid_001"><section class="gas-block-team-grid gas-block-team-grid--cols-4 gas-block-team-grid--style-minimal" data-block-type="team_grid">
    <div class="gas-block-team-grid__inner">
        <h2 class="gas-block-team-grid__title">Notre équipe d&#039;animation</h2>        <div class="gas-block-team-grid__grid">
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Alice" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Alice Martin</h3>                    <p class="gas-block-team-grid__role">Co-fondatrice · Pratiques narratives</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Bruno" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Bruno Schmid</h3>                    <p class="gas-block-team-grid__role">Animateur · Communication consciente</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Camille" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Camille Dubois</h3>                    <p class="gas-block-team-grid__role">Animatrice · Approche corporelle</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="David" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">David Wenger</h3>                    <p class="gas-block-team-grid__role">Animateur · Écologie intérieure</p>                                    </article>
                    </div>
    </div>
</section>
</div>

variante : vertical

Notre équipe d'animation

Alice Martin

Co-fondatrice · Pratiques narratives

Bruno Schmid

Animateur · Communication consciente

Camille Dubois

Animatrice · Approche corporelle

David Wenger

Animateur · Écologie intérieure

Voir le HTML rendu

<div id="pretty_team_grid_001" class="gas-block-anchor" data-gas-block-id="pretty_team_grid_001"><section class="gas-block-team-grid gas-block-team-grid--cols-4 gas-block-team-grid--style-vertical" data-block-type="team_grid">
    <div class="gas-block-team-grid__inner">
        <h2 class="gas-block-team-grid__title">Notre équipe d&#039;animation</h2>        <div class="gas-block-team-grid__grid">
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Alice" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Alice Martin</h3>                    <p class="gas-block-team-grid__role">Co-fondatrice · Pratiques narratives</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Bruno" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Bruno Schmid</h3>                    <p class="gas-block-team-grid__role">Animateur · Communication consciente</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="Camille" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">Camille Dubois</h3>                    <p class="gas-block-team-grid__role">Animatrice · Approche corporelle</p>                                    </article>
                                            <article class="gas-block-team-grid__item">
                                            <figure class="gas-block-team-grid__avatar"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&#038;auto=format&#038;fit=crop&#038;q=70" alt="David" loading="lazy" /></figure>
                                        <h3 class="gas-block-team-grid__name">David Wenger</h3>                    <p class="gas-block-team-grid__role">Animateur · Écologie intérieure</p>                                    </article>
                    </div>
    </div>
</section>
</div>

structure

Fil d'Ariane `breadcrumb`

Fil d'Ariane de navigation (accueil + niveaux), avec données structurées BreadcrumbList pour le SEO. Le dernier élément est la page courante.

Voir le HTML rendu

<div id="sample_breadcrumb_001" class="gas-block-anchor" data-gas-block-id="sample_breadcrumb_001"><nav class="gas-block-breadcrumb gas-block-breadcrumb--sep-chevron" data-block-type="breadcrumb" aria-label="Fil d&#039;Ariane">
    <ol class="gas-block-breadcrumb__list">
                                <li class="gas-block-breadcrumb__item">
                                    <a class="gas-block-breadcrumb__link" href="/">Accueil</a>
                            </li>
                                <li class="gas-block-breadcrumb__item">
                                    <a class="gas-block-breadcrumb__link" href="#">Activités</a>
                            </li>
                                <li class="gas-block-breadcrumb__item">
                                    <span class="gas-block-breadcrumb__current" aria-current="page">Atelier d&#039;écriture</span>
                            </li>
            </ol>
    <script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https://gas-kiener-burkina.ddev.site/"},{"@type":"ListItem","position":2,"name":"Activités","item":"https://gas-kiener-burkina.ddev.site/#"},{"@type":"ListItem","position":3,"name":"Atelier d'écriture"}]}</script></nav>
</div>

Bandeau CTA `cta_band`

Bandeau d'appel à l'action : un titre court + 1 ou 2 boutons. Idéal en bas de page pour inciter à une action (s'inscrire, contacter, acheter).

Reste informé

S'inscrire Voir un exemple

Voir le HTML rendu

<div id="pretty_cta_band_001" class="gas-block-anchor" data-gas-block-id="pretty_cta_band_001"><section class="gas-block-cta-band gas-block-cta-band--primary" data-block-type="cta_band">
    <div class="gas-block-cta-band__inner">
        <div class="gas-block-cta-band__content">
                            <h2 class="gas-block-cta-band__title" data-gas-field-key="sample.cta_band.pretty.title">Reste informé</h2>
            
                    </div>

                    <div class="gas-block-cta-band__actions">
                                                        <a class="gas-button gas-button--primary"                       href="/newsletter/">
                        S&#039;inscrire                    </a>
                                                        <a class="gas-button gas-button--outline"                       href="/newsletter/exemple/">
                        Voir un exemple                    </a>
                            </div>
            </div>
</section>
</div>

Corps du document `document_body`

Emplacement où s'injecte le corps du document (à utiliser dans un gabarit d'enveloppe). Un seul par gabarit.

Voir le HTML rendu

<div id="sample_document_body_001" class="gas-block-anchor" data-gas-block-id="sample_document_body_001"><div class="gas-block-document-body" data-block-type="document_body" data-document-body-slot="1">
    <!-- gas: corps du document (injecté ici par le gabarit) -->
</div>
</div>

Composant réutilisable `document_include`

Insère un composant réutilisable (une composition de blocs partagée). Éditer le composant met à jour toutes les pages qui l'incluent.

Voir le HTML rendu

<div id="sample_document_include_001" class="gas-block-anchor" data-gas-block-id="sample_document_include_001"><div class="gas-block-document-include" data-block-type="document_include" data-component-ref="sample-include">
    <!-- gas: composant « sample-include » introuvable ou non résolu -->
</div>
</div>

Hero `hero`

Bandeau principal en haut de page : grand titre, sous-titre, image et boutons d'action. Idéal pour la première impression d'une page.

variante : centered

Cultiver la curiosité

Une plateforme d'apprentissage par l'expérience pour les adultes qui veulent grandir, ensemble.

Découvrir les activités Notre approche

Voir le HTML rendu

<div id="pretty_hero_001" class="gas-block-anchor" data-gas-block-id="pretty_hero_001"><section data-block-type="hero" class="gas-hero gas-block-hero gas-block-hero--centered">
        <div class="gas-block-hero__inner">
        <div class="gas-block-hero__content">
            
                            <h1 class="gas-block-hero__title" data-gas-field-key="sample.hero.pretty.title">Cultiver la <span class="gas-rt-color--accent">curiosité</span></h1>
            
                            <p class="gas-block-hero__subtitle" data-gas-field-key="sample.hero.pretty.subtitle">Une plateforme d&#039;apprentissage par l&#039;expérience pour les adultes qui veulent grandir, ensemble.</p>
            
                            <div class="gas-block-hero__actions">
                                                                    <a class="gas-button gas-button--primary"
                                                      href="/activites/">
                            Découvrir les activités                        </a>
                                                                    <a class="gas-button gas-button--outline"
                                                      href="/approche/">
                            Notre approche                        </a>
                                    </div>
            
                    </div>

                    <figure class="gas-block-hero__media gas-frame gas-frame--none">
                                <img class="gas-block-hero__image" src="https://images.unsplash.com/photo-1517511620798-cec17d428bc0?w=1200&#038;auto=format&#038;fit=crop&#038;q=70" alt="Groupe en cercle lors d&#039;un atelier" loading="eager" fetchpriority="high" data-gas-field-key="blocks.pretty_hero_001.image.url" />            </figure>
            </div>
</section>
</div>

variante : split

Cultiver la curiosité

Une plateforme d'apprentissage par l'expérience pour les adultes qui veulent grandir, ensemble.

Découvrir les activités Notre approche

Voir le HTML rendu

<div id="pretty_hero_001" class="gas-block-anchor" data-gas-block-id="pretty_hero_001"><section data-block-type="hero" class="gas-hero gas-block-hero gas-block-hero--split gas-block-hero--media-right">
        <div class="gas-block-hero__inner">
        <div class="gas-block-hero__content">
            
                            <h1 class="gas-block-hero__title" data-gas-field-key="sample.hero.pretty.title">Cultiver la <span class="gas-rt-color--accent">curiosité</span></h1>
            
                            <p class="gas-block-hero__subtitle" data-gas-field-key="sample.hero.pretty.subtitle">Une plateforme d&#039;apprentissage par l&#039;expérience pour les adultes qui veulent grandir, ensemble.</p>
            
                            <div class="gas-block-hero__actions">
                                                                    <a class="gas-button gas-button--primary"
                                                      href="/activites/">
                            Découvrir les activités                        </a>
                                                                    <a class="gas-button gas-button--outline"
                                                      href="/approche/">
                            Notre approche                        </a>
                                    </div>
            
                    </div>

                    <figure class="gas-block-hero__media gas-frame gas-frame--none">
                                <img class="gas-block-hero__image" src="https://images.unsplash.com/photo-1517511620798-cec17d428bc0?w=1200&#038;auto=format&#038;fit=crop&#038;q=70" alt="Groupe en cercle lors d&#039;un atelier" loading="eager" fetchpriority="high" data-gas-field-key="blocks.pretty_hero_001.image.url" />            </figure>
            </div>
</section>
</div>

variante : media_grid

Cultiver la curiosité

Une plateforme d'apprentissage par l'expérience pour les adultes qui veulent grandir, ensemble.

Découvrir les activités Notre approche

Voir le HTML rendu

<div id="pretty_hero_001" class="gas-block-anchor" data-gas-block-id="pretty_hero_001"><section data-block-type="hero" class="gas-hero gas-block-hero gas-block-hero--split gas-block-hero--media-right">
        <div class="gas-block-hero__inner">
        <div class="gas-block-hero__content">
            
                            <h1 class="gas-block-hero__title" data-gas-field-key="sample.hero.pretty.title">Cultiver la <span class="gas-rt-color--accent">curiosité</span></h1>
            
                            <p class="gas-block-hero__subtitle" data-gas-field-key="sample.hero.pretty.subtitle">Une plateforme d&#039;apprentissage par l&#039;expérience pour les adultes qui veulent grandir, ensemble.</p>
            
                            <div class="gas-block-hero__actions">
                                                                    <a class="gas-button gas-button--primary"
                                                      href="/activites/">
                            Découvrir les activités                        </a>
                                                                    <a class="gas-button gas-button--outline"
                                                      href="/approche/">
                            Notre approche                        </a>
                                    </div>
            
                    </div>

                    <figure class="gas-block-hero__media gas-frame gas-frame--none">
                                <img class="gas-block-hero__image" src="https://images.unsplash.com/photo-1517511620798-cec17d428bc0?w=1200&#038;auto=format&#038;fit=crop&#038;q=70" alt="Groupe en cercle lors d&#039;un atelier" loading="eager" fetchpriority="high" data-gas-field-key="blocks.pretty_hero_001.image.url" />            </figure>
            </div>
</section>
</div>

variante : minimal

Cultiver la curiosité

Une plateforme d'apprentissage par l'expérience pour les adultes qui veulent grandir, ensemble.

Découvrir les activités Notre approche

Voir le HTML rendu

<div id="pretty_hero_001" class="gas-block-anchor" data-gas-block-id="pretty_hero_001"><section data-block-type="hero" class="gas-hero gas-block-hero gas-block-hero--minimal">
        <div class="gas-block-hero__inner">
        <div class="gas-block-hero__content">
            
                            <h1 class="gas-block-hero__title" data-gas-field-key="sample.hero.pretty.title">Cultiver la <span class="gas-rt-color--accent">curiosité</span></h1>
            
                            <p class="gas-block-hero__subtitle" data-gas-field-key="sample.hero.pretty.subtitle">Une plateforme d&#039;apprentissage par l&#039;expérience pour les adultes qui veulent grandir, ensemble.</p>
            
                            <div class="gas-block-hero__actions">
                                                                    <a class="gas-button gas-button--primary"
                                                      href="/activites/">
                            Découvrir les activités                        </a>
                                                                    <a class="gas-button gas-button--outline"
                                                      href="/approche/">
                            Notre approche                        </a>
                                    </div>
            
                    </div>

            </div>
</section>
</div>

variante : overlay

Cultiver la curiosité

Une plateforme d'apprentissage par l'expérience pour les adultes qui veulent grandir, ensemble.

Découvrir les activités Notre approche

Voir le HTML rendu

<div id="pretty_hero_001" class="gas-block-anchor" data-gas-block-id="pretty_hero_001"><section data-block-type="hero" class="gas-hero gas-block-hero gas-block-hero--overlay" style="--gas-hero-overlay: 0.5">
            <div class="gas-block-hero__bg" aria-hidden="true"><img class="gas-block-hero__image" src="https://images.unsplash.com/photo-1517511620798-cec17d428bc0?w=1200&#038;auto=format&#038;fit=crop&#038;q=70" alt="Groupe en cercle lors d&#039;un atelier" loading="eager" fetchpriority="high" data-gas-field-key="blocks.pretty_hero_001.image.url" /></div>
        <div class="gas-block-hero__inner">
        <div class="gas-block-hero__content">
            
                            <h1 class="gas-block-hero__title" data-gas-field-key="sample.hero.pretty.title">Cultiver la <span class="gas-rt-color--accent">curiosité</span></h1>
            
                            <p class="gas-block-hero__subtitle" data-gas-field-key="sample.hero.pretty.subtitle">Une plateforme d&#039;apprentissage par l&#039;expérience pour les adultes qui veulent grandir, ensemble.</p>
            
                            <div class="gas-block-hero__actions">
                                                                    <a class="gas-button gas-button--primary"
                                                      href="/activites/">
                            Découvrir les activités                        </a>
                                                                    <a class="gas-button gas-button--outline"
                                                      href="/approche/">
                            Notre approche                        </a>
                                    </div>
            
                    </div>

            </div>
</section>
</div>

Héro vidéo `hero_video`

Bandeau principal plein-écran avec une vidéo en fond (autoplay muet en boucle). Fallback image pour les appareils réduisant le mouvement.

En tournée

Vibrer au rythme de la scène

Une saison musicale immersive, portée par l'image.

Découvrir la saison

Sans engagement — découverte libre.

Voir le HTML rendu

<div id="sample_hero_video_001" class="gas-block-anchor" data-gas-block-id="sample_hero_video_001"><section class="gas-block-hero-video"
         data-block-type="hero_video"
         style="--_hero-min-h: 80vh; --_hero-overlay: 0.45">
    <div class="gas-block-hero-video__bg" aria-hidden="true">
                                <iframe class="gas-block-hero-video__video gas-block-hero-video__video--yt"
                    src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1&loop=1&playlist=dQw4w9WgXcQ&controls=0&showinfo=0&rel=0&disablekb=1&modestbranding=1"
                    frameborder="0"
                    allow="autoplay; encrypted-media"
                    loading="lazy"
                    title="Concert filmé en plan large"
            ></iframe>
                        <div class="gas-block-hero-video__overlay" aria-hidden="true"></div>
    </div>
    <div class="gas-block-hero-video__content">
                    <p class="gas-block-hero-video__eyebrow">En tournée</p>
                <h1 class="gas-block-hero-video__title">Vibrer au rythme de la <span class="gas-rt-color--accent">scène</span></h1>
                    <p class="gas-block-hero-video__subtitle">Une saison musicale immersive, portée par l&#039;image.</p>
                            <div class="gas-block-hero-video__actions">
                                                        <a href="#"
                       class="gas-button gas-button--primary">
                        Découvrir la saison                    </a>
                            </div>
                            <p class="gas-block-hero-video__note">Sans engagement — découverte libre.</p>
            </div>
</section>
</div>

Boucle (répéter un template) `loop`

Répète un template de blocs (ses enfants) sur une source : "count" (N fois), "inline" (items authorés {clé:valeur}), ou une source query ("entity:{type}", "activite"…). Les enfants portent des liaisons {item.clé}/{i}. Expansion au delivery → blocs concrets (portable PHP/Astro). Pour une slice en layout figé, voir "query" ; pour une archive interactive, voir "card_archive".

Ateliers découverte — rendez-vous n° 1

Concerts du trimestre — rendez-vous n° 2

Rencontres associatives — rendez-vous n° 3

Voir le HTML rendu

<div id="sample_loop_001-l1-1-1" class="gas-block-anchor" data-gas-block-id="sample_loop_001-l1-1-1"><section class="gas-block-text gas-block-text--default gas-block-text--plain gas-block-text--align-left gas-block-text--cols-1" data-block-type="text">
    <div class="gas-block-text__inner">
        
                    <div class="gas-block-text__content" data-gas-field-key="sample.loop.tpl.content">
                <p><a href="/activites/ateliers/">Ateliers découverte</a> — rendez-vous n° 1</p>            </div>
            </div>
</section>
</div><div id="sample_loop_001-l1-sep-2" class="gas-block-anchor" data-gas-block-id="sample_loop_001-l1-sep-2"><section class="gas-block-text gas-block-text--default gas-block-text--plain gas-block-text--align-left gas-block-text--cols-1" data-block-type="text">
    <div class="gas-block-text__inner">
        
                    <div class="gas-block-text__content">
                <hr class="gas-block-loop__sep gas-block-loop__sep--line" />            </div>
            </div>
</section>
</div><div id="sample_loop_001-l1-2-1" class="gas-block-anchor" data-gas-block-id="sample_loop_001-l1-2-1"><section class="gas-block-text gas-block-text--default gas-block-text--plain gas-block-text--align-left gas-block-text--cols-1" data-block-type="text">
    <div class="gas-block-text__inner">
        
                    <div class="gas-block-text__content" data-gas-field-key="sample.loop.tpl.content">
                <p><a href="/activites/concerts/">Concerts du trimestre</a> — rendez-vous n° 2</p>            </div>
            </div>
</section>
</div><div id="sample_loop_001-l1-sep-3" class="gas-block-anchor" data-gas-block-id="sample_loop_001-l1-sep-3"><section class="gas-block-text gas-block-text--default gas-block-text--plain gas-block-text--align-left gas-block-text--cols-1" data-block-type="text">
    <div class="gas-block-text__inner">
        
                    <div class="gas-block-text__content">
                <hr class="gas-block-loop__sep gas-block-loop__sep--line" />            </div>
            </div>
</section>
</div><div id="sample_loop_001-l1-3-1" class="gas-block-anchor" data-gas-block-id="sample_loop_001-l1-3-1"><section class="gas-block-text gas-block-text--default gas-block-text--plain gas-block-text--align-left gas-block-text--cols-1" data-block-type="text">
    <div class="gas-block-text__inner">
        
                    <div class="gas-block-text__content" data-gas-field-key="sample.loop.tpl.content">
                <p><a href="/activites/rencontres/">Rencontres associatives</a> — rendez-vous n° 3</p>            </div>
            </div>
</section>
</div>

Section `section`

Conteneur visuel pleine largeur ou pleine hauteur, avec fond couleur/image, overlay et blocs imbriqués. Utiliser la grille des colonnes (column_spans) pour répartir les blocs en colonnes.

Première colonne

Première colonne d'une section à 3 colonnes natives. Chaque colonne peut héberger n'importe quel block.

Deuxième colonne

Deuxième colonne, contenu différent. Ici on pourrait mettre une image, un CTA, ou tout autre block.

Troisième colonne

Troisième colonne. Modifie columns dans le JSON pour tester 2, 3 ou 4 colonnes.

Voir le HTML rendu

<div id="pretty_section_001" class="gas-block-anchor" data-gas-block-id="pretty_section_001"><section class="gas-block-section gas-block-section--width-wide gas-block-section--height-auto gas-block-section--content-default gas-block-section--padding-lg gas-block-section--valign-top gas-block-section--bg-color gas-block-section--text-auto gas-block-section--focal-center gas-block-section--cols-3 gas-block-section--gap-md" data-block-type="section" style="--gas-block-section-bg:#f8fafc;--gas-block-section-columns:1fr 1fr 1fr;">
                <div class="gas-block-section__inner">
                    <div class="gas-block-section__grid">
                                    <div class="gas-block-section__column" data-column-index="0">
                        <div id="pretty_section_col1" class="gas-block-anchor" data-gas-block-id="pretty_section_col1"><section class="gas-block-text gas-block-text--default gas-block-text--plain gas-block-text--align-left gas-block-text--cols-1" data-block-type="text">
    <div class="gas-block-text__inner">
                    <h2 class="gas-block-text__title" data-gas-field-key="sample.section.col1.title">Première colonne</h2>
        
                    <div class="gas-block-text__content" data-gas-field-key="sample.section.col1.content">
                <p>Première colonne d'une section à 3 colonnes natives. Chaque colonne peut héberger n'importe quel block.</p>            </div>
            </div>
</section>
</div>                    </div>
                                    <div class="gas-block-section__column" data-column-index="1">
                        <div id="pretty_section_col2" class="gas-block-anchor" data-gas-block-id="pretty_section_col2"><section class="gas-block-text gas-block-text--default gas-block-text--plain gas-block-text--align-left gas-block-text--cols-1" data-block-type="text">
    <div class="gas-block-text__inner">
                    <h2 class="gas-block-text__title" data-gas-field-key="sample.section.col2.title">Deuxième colonne</h2>
        
                    <div class="gas-block-text__content" data-gas-field-key="sample.section.col2.content">
                <p>Deuxième colonne, contenu différent. Ici on pourrait mettre une image, un CTA, ou tout autre block.</p>            </div>
            </div>
</section>
</div>                    </div>
                                    <div class="gas-block-section__column" data-column-index="2">
                        <div id="pretty_section_col3" class="gas-block-anchor" data-gas-block-id="pretty_section_col3"><section class="gas-block-text gas-block-text--default gas-block-text--plain gas-block-text--align-left gas-block-text--cols-1" data-block-type="text">
    <div class="gas-block-text__inner">
                    <h2 class="gas-block-text__title" data-gas-field-key="sample.section.col3.title">Troisième colonne</h2>
        
                    <div class="gas-block-text__content" data-gas-field-key="sample.section.col3.content">
                <p>Troisième colonne. Modifie <code>columns</code> dans le JSON pour tester 2, 3 ou 4 colonnes.</p>            </div>
            </div>
</section>
</div>                    </div>
                            </div>
            </div>
        </section>
</div>

Sous-navigation latérale `sidebar_subnav`

Sous-navigation verticale de section : liste de liens sobre avec item actif sur fond contrasté et filets fins. À utiliser dans une colonne d'une « section » en grille 12 (column_spans) à côté du contenu, ou en bloc autonome.

Voir le HTML rendu

<div id="sample_sidebar_subnav_001" class="gas-block-anchor" data-gas-block-id="sample_sidebar_subnav_001"><nav class="gas-block-sidebar-subnav" data-block-type="sidebar_subnav" aria-label="L&#039;entreprise">
            <p class="gas-block-sidebar-subnav__title" data-gas-field-key="sample.sidebar_subnav.title">L&#039;entreprise</p>
        <ul class="gas-block-sidebar-subnav__list">
                    <li class="gas-block-sidebar-subnav__item gas-block-sidebar-subnav__item--active">
                                    <a class="gas-block-sidebar-subnav__link" href="/entreprise/presentation/" aria-current="page">Présentation</a>
                            </li>
                    <li class="gas-block-sidebar-subnav__item">
                                    <a class="gas-block-sidebar-subnav__link" href="/entreprise/histoire/">Notre histoire</a>
                            </li>
                    <li class="gas-block-sidebar-subnav__item">
                                    <a class="gas-block-sidebar-subnav__link" href="/entreprise/equipe/">L&#039;équipe</a>
                            </li>
                    <li class="gas-block-sidebar-subnav__item">
                                    <a class="gas-block-sidebar-subnav__link" href="/entreprise/engagements/">Engagements</a>
                            </li>
                    <li class="gas-block-sidebar-subnav__item">
                                    <a class="gas-block-sidebar-subnav__link" href="/entreprise/apprentissage/">Apprentissage</a>
                            </li>
            </ul>
</nav>
</div>

Table des matières `toc`

Navigation automatique vers les titres de la page.

Voir le HTML rendu

<div id="sample_toc_001" class="gas-block-anchor" data-gas-block-id="sample_toc_001"><nav class="gas-block-toc gas-block-toc--h2 gas-block-toc--collapsed-on-mobile" data-block-type="toc" aria-label="Table des matières">
    <ul class="gas-block-toc__list">
                                <li class="gas-block-toc__item gas-block-toc__item--level-2">
                <a class="gas-block-toc__link" href="#presentation">Présentation</a>
            </li>
                                <li class="gas-block-toc__item gas-block-toc__item--level-2">
                <a class="gas-block-toc__link" href="#objectifs">Objectifs</a>
            </li>
                                <li class="gas-block-toc__item gas-block-toc__item--level-3">
                <a class="gas-block-toc__link" href="#methode">Notre méthode</a>
            </li>
                                <li class="gas-block-toc__item gas-block-toc__item--level-2">
                <a class="gas-block-toc__link" href="#resultats">Résultats attendus</a>
            </li>
            </ul>
</nav>
</div>

system

Placeholder bloc protégé `gated_placeholder`

Bloc affiché à la place d'un bloc dont l'utilisateur n'a pas l'accès. Généré dynamiquement.

Réservé aux membres

Devenir membre

Voir le HTML rendu

<div id="sample_gated_placeholder_001" class="gas-block-anchor" data-gas-block-id="sample_gated_placeholder_001"><div class="gas-gated-placeholder" data-block-type="gated_placeholder" data-original-type="text" data-access-required="member">
    <span class="gas-gated-placeholder__icon" aria-hidden="true">&#128274;</span>
    <p class="gas-gated-placeholder__message">Réservé aux membres</p>
            <a class="gas-button gas-button--primary gas-gated-placeholder__action" href="https://gas-kiener-burkina.ddev.site/inscription">
            Devenir membre        </a>
    </div>
</div>

Formulaire de connexion `login_form`

Formulaire de connexion du site (mot de passe, lien magique, Turnstile).

Vous voulez devenir membre de notre association ?

Faites une demande d'inscription en suivant ce lien.

Vous voulez participer à nos activités ouvertes sans devenir membre ?

Consultez notre agenda des activités — un compte sera créé automatiquement lors de votre première commande.

Voir le HTML rendu

<div id="sample_login_form_001" class="gas-block-anchor" data-gas-block-id="sample_login_form_001"><section class="gas-block-login-form is-container-narrow" data-block-type="login_form" style="--gas-container: var(--gas-container-narrow);">
    <div class="gas-login-form-area">
        
    
    <div class="gas-login-panel gas-password-section is-active"
         id="gas-login-panel-password"
         data-tab-panel="password"
         role="region"
                  >
        <form name="loginform"
              id="loginform"
              action="https://gas-kiener-burkina.ddev.site/wp-login.php"
              method="post"
              class="gas-login-form">

            <div class="gas-form-group">
                <label for="user_login">Nom d&#039;utilisateur ou email</label>
                <input type="text"
                       name="log"
                       id="user_login"
                       value=""
                       autocapitalize="off"
                       autocomplete="username"
                       required>
            </div>

            <div class="gas-form-group gas-password-field">
                <label for="user_pass">Mot de passe</label>
                <input type="password"
                       name="pwd"
                       id="user_pass"
                       autocomplete="current-password"
                       required>
                <button type="button"
                        class="gas-password-toggle"
                        id="password-toggle"
                        aria-label="Afficher/masquer le mot de passe">
                    👁️
                </button>
            </div>

            <div class="gas-remember-me">
                <input type="checkbox" name="rememberme" id="rememberme" value="forever">
                <label for="rememberme">Se souvenir de moi</label>
            </div>

            
            <button type="submit" name="wp-submit" id="wp-submit" class="gas-login-submit">
                Se connecter            </button>

            <input type="hidden" name="redirect_to" value="https://gas-kiener-burkina.ddev.site/user-home">
            <input type="hidden" name="testcookie" value="1">
        </form>
    </div>

    <div class="gas-login-links">
        <a href="https://gas-kiener-burkina.ddev.site/gas-lostpassword">Mot de passe oublié ?</a>
    </div>

        <div class="gas-login-info" id="gas-login-info">
        <h3 class="gas-login-info-title">Comment créer un compte</h3>
        <h4>Vous voulez devenir membre de notre association ?</h4>
        <p>
            <strong>
                <a href="https://gas-kiener-burkina.ddev.site/membres/inscrire/">
                    Faites une demande d&#039;inscription en suivant ce lien.                </a>
            </strong>
        </p>

        <h4>Vous voulez participer à nos activités ouvertes sans devenir membre ?</h4>
        <p>
            <strong>
                Consultez notre <a href="https://gas-kiener-burkina.ddev.site/agenda">agenda des activités</a> — un compte sera créé automatiquement lors de votre première commande.            </strong>
        </p>
    </div>
    </div>
</section>
</div>

Paywall `paywall_gate`

Conteneur qui masque ses enfants si l’utilisateur n’a pas l’accès requis.

Ce contenu est réservé aux membres.

Voir les adhésions

Voir le HTML rendu

<div id="sample_paywall_gate_001" class="gas-block-anchor" data-gas-block-id="sample_paywall_gate_001">    <section class="gas-block-paywall-gate gas-block-paywall-gate--locked gas-gated-placeholder" data-block-type="paywall_gate" data-required-access="member">
        <span class="gas-gated-placeholder__icon" aria-hidden="true">&#128274;</span>
        <p class="gas-gated-placeholder__message">Ce contenu est réservé aux membres.</p>
                    <a class="gas-button gas-button--primary gas-gated-placeholder__action" href="/abonnements/">Voir les adhésions</a>
            </section>
</div>

Identité du site `site_branding`

Affiche le logo, le nom du site et la phrase d’accroche. Conçu pour les composants globaux comme le footer.

variante : stacked

kiener-burkina

Voir le HTML rendu

<div id="sample_site_branding_001" class="gas-block-anchor" data-gas-block-id="sample_site_branding_001"><div class="gas-block-site-branding gas-block-site-branding--stacked is-align-left" data-block-type="site_branding">
            <a class="gas-block-site-branding__link" href="https://gas-kiener-burkina.ddev.site/">
            <span class="gas-block-site-branding__logo"><img src="/wp-content/uploads/gas_images/logo.png" alt="kiener-burkina" loading="eager" decoding="async"></span><strong class="gas-block-site-branding__name">kiener-burkina</strong>        </a>
    </div>
</div>

variante : inline

kiener-burkina

Voir le HTML rendu

<div id="sample_site_branding_001" class="gas-block-anchor" data-gas-block-id="sample_site_branding_001"><div class="gas-block-site-branding gas-block-site-branding--inline is-align-left" data-block-type="site_branding">
            <a class="gas-block-site-branding__link" href="https://gas-kiener-burkina.ddev.site/">
            <span class="gas-block-site-branding__logo"><img src="/wp-content/uploads/gas_images/logo.png" alt="kiener-burkina" loading="eager" decoding="async"></span><strong class="gas-block-site-branding__name">kiener-burkina</strong>        </a>
    </div>
</div>

Menu du site `site_menu`

Affiche un menu GAS canonique par emplacement ou identifiant, avec fallback WordPress.

variante : stacked

Voir le HTML rendu

<div id="sample_site_menu_001" class="gas-block-anchor" data-gas-block-id="sample_site_menu_001"><nav class="gas-block-site-menu gas-block-site-menu--stacked" data-block-type="site_menu" data-menu-location="footer" >
            <h2 class="gas-block-site-menu__title">Navigation</h2>
                <ul class="gas-block-site-menu__list">
            <li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Accueil</a></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Activités</a><ul class="gas-block-site-menu__sublist"><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Ateliers</a></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Spectacles</a></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Agenda</a></li></ul></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">L&#039;association</a><ul class="gas-block-site-menu__sublist"><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Notre histoire</a></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">L&#039;équipe</a></li></ul></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Contact</a></li>        </ul>
    </nav>
</div>

variante : inline

Voir le HTML rendu

<div id="sample_site_menu_001" class="gas-block-anchor" data-gas-block-id="sample_site_menu_001"><nav class="gas-block-site-menu gas-block-site-menu--inline" data-block-type="site_menu" data-menu-location="footer" >
            <h2 class="gas-block-site-menu__title">Navigation</h2>
                <ul class="gas-block-site-menu__list">
            <li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Accueil</a></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Activités</a><ul class="gas-block-site-menu__sublist"><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Ateliers</a></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Spectacles</a></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Agenda</a></li></ul></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">L&#039;association</a><ul class="gas-block-site-menu__sublist"><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Notre histoire</a></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">L&#039;équipe</a></li></ul></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Contact</a></li>        </ul>
    </nav>
</div>

variante : columns

Voir le HTML rendu

<div id="sample_site_menu_001" class="gas-block-anchor" data-gas-block-id="sample_site_menu_001"><nav class="gas-block-site-menu gas-block-site-menu--columns" data-block-type="site_menu" data-menu-location="footer" >
            <h2 class="gas-block-site-menu__title">Navigation</h2>
                <ul class="gas-block-site-menu__list">
            <li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Accueil</a></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Activités</a><ul class="gas-block-site-menu__sublist"><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Ateliers</a></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Spectacles</a></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Agenda</a></li></ul></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">L&#039;association</a><ul class="gas-block-site-menu__sublist"><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Notre histoire</a></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">L&#039;équipe</a></li></ul></li><li class="gas-block-site-menu__item"><a class="gas-block-site-menu__link" href="#">Contact</a></li>        </ul>
    </nav>
</div>

wrappers

Bandeau alerte `alert_banner`

Bandeau d'annonce ; payload structuré portable (text/url/style/new_tab). `rendered_html` reste émis en fallback transitoire pour les anciens builds Astro consommant encore le shortcode [gas_site_announcement].

variante : info

Voir le HTML rendu

<div id="pretty_alert_banner_001" class="gas-block-anchor" data-gas-block-id="pretty_alert_banner_001"><div class="gas-block-embed"><div class="gas-block-typed-shortcode gas-block-alert-banner gas-block-alert-banner--variant-info" data-block-type="alert_banner">            <div class="gas-site-header__announcement gas-site-header__announcement--info">
                <a class="gas-site-header__announcement-inner" href="/inscription/">
                    Nouveau ! Les inscriptions à la session d&#039;automne 2026 sont ouvertes — places limitées.                </a>
            </div>
            </div></div></div>

variante : warning

Voir le HTML rendu

<div id="pretty_alert_banner_001" class="gas-block-anchor" data-gas-block-id="pretty_alert_banner_001"><div class="gas-block-embed"><div class="gas-block-typed-shortcode gas-block-alert-banner gas-block-alert-banner--variant-warning" data-block-type="alert_banner">            <div class="gas-site-header__announcement gas-site-header__announcement--warning">
                <a class="gas-site-header__announcement-inner" href="/inscription/">
                    Nouveau ! Les inscriptions à la session d&#039;automne 2026 sont ouvertes — places limitées.                </a>
            </div>
            </div></div></div>

variante : success

Voir le HTML rendu

<div id="pretty_alert_banner_001" class="gas-block-anchor" data-gas-block-id="pretty_alert_banner_001"><div class="gas-block-embed"><div class="gas-block-typed-shortcode gas-block-alert-banner gas-block-alert-banner--variant-success" data-block-type="alert_banner">            <div class="gas-site-header__announcement gas-site-header__announcement--success">
                <a class="gas-site-header__announcement-inner" href="/inscription/">
                    Nouveau ! Les inscriptions à la session d&#039;automne 2026 sont ouvertes — places limitées.                </a>
            </div>
            </div></div></div>

variante : danger

Voir le HTML rendu

<div id="pretty_alert_banner_001" class="gas-block-anchor" data-gas-block-id="pretty_alert_banner_001"><div class="gas-block-embed"><div class="gas-block-typed-shortcode gas-block-alert-banner gas-block-alert-banner--variant-danger" data-block-type="alert_banner">            <div class="gas-site-header__announcement gas-site-header__announcement--danger">
                <a class="gas-site-header__announcement-inner" href="/inscription/">
                    Nouveau ! Les inscriptions à la session d&#039;automne 2026 sont ouvertes — places limitées.                </a>
            </div>
            </div></div></div>

Comite `committee_grid`

Grille native du comité ; payload structuré portable (membres/commissions résolus, image via resolveImage()). `groups[].description` livré en HTML filtré (converti markdown→HTML au resolve, wp_kses_post). `rendered_html` reste émis en fallback transitoire pour les anciens builds Astro consommant encore le shortcode [gas_comite_membres].

Présidente
Camille Rousseau
Coordination générale et représentation.
Trésorière
Nadia Belkacem
Gestion des comptes et du budget.
Secrétaire
Julien Faure
Comptes rendus et suivi administratif.

Voir le HTML rendu

<div id="sample_committee_grid_001" class="gas-block-anchor" data-gas-block-id="sample_committee_grid_001"><div class="gas-block-typed-shortcode gas-block-committee-grid" data-block-type="committee_grid"><div class="gas-comite-block"><ul class="gas-comite"><li class="gas-comite__card"><div class="gas-comite__photo"><a href="#" class="gas-comite__photo-link"><img src="https://picsum.photos/seed/gas-comite-1/400/500" alt="Camille Rousseau" loading="lazy"></a></div><div class="gas-comite__roles"><span class="gas-comite__role-label">Présidente</span></div><div class="gas-comite__content"><h4 class="gas-comite__name"><a href="#" class="gas-comite__name-link">Camille Rousseau</a></h4><p class="gas-comite__role-detail">Coordination générale et représentation.</p></div></li><li class="gas-comite__card"><div class="gas-comite__photo"><a href="#" class="gas-comite__photo-link"><img src="https://picsum.photos/seed/gas-comite-2/400/500" alt="Nadia Belkacem" loading="lazy"></a></div><div class="gas-comite__roles"><span class="gas-comite__role-label">Trésorière</span></div><div class="gas-comite__content"><h4 class="gas-comite__name"><a href="#" class="gas-comite__name-link">Nadia Belkacem</a></h4><p class="gas-comite__role-detail">Gestion des comptes et du budget.</p></div></li><li class="gas-comite__card"><div class="gas-comite__photo"><a href="#" class="gas-comite__photo-link"><img src="https://picsum.photos/seed/gas-comite-3/400/500" alt="Julien Faure" loading="lazy"></a></div><div class="gas-comite__roles"><span class="gas-comite__role-label">Secrétaire</span></div><div class="gas-comite__content"><h4 class="gas-comite__name"><a href="#" class="gas-comite__name-link">Julien Faure</a></h4><p class="gas-comite__role-detail">Comptes rendus et suivi administratif.</p></div></li></ul></div></div></div>

Historique du comité `committee_history`

Timeline chronologique des membres par période ; payload structuré portable (periods résolus, image via resolveImage()). `periods[].element_marquant` livré en HTML filtré (converti markdown→HTML au resolve, wp_kses_post). `rendered_html` reste émis en fallback transitoire pour les anciens builds Astro consommant encore le shortcode [gas_comite_historique].

Chronologie

Historique de l'association

Une lecture chronologique des grandes périodes de l'association, enrichie par les membres du comité présents à ces moments-là.

22 périodes

2024 — 2026

Refonte des statuts et ouverture de trois nouvelles sections.

Membres du comité présents

Camille Rousseau

Présidente

Nadia Belkacem

Trésorière

2021 — 2023

Lancement du programme de mentorat.

Membres du comité présents

ÉD

Élise Dumont

Présidente

Marc Lefèvre

Secrétaire

Voir le HTML rendu

<div id="sample_committee_history_001" class="gas-block-anchor" data-gas-block-id="sample_committee_history_001"><div class="gas-block-typed-shortcode gas-block-committee-history" data-block-type="committee_history"><section class="gas-comite-history__timeline"><div class="gas-comite-history__section-header"><span class="gas-comite-history__overline">Chronologie</span><h2 class="gas-comite-history__section-title">Historique de l&#039;association</h2><p class="gas-comite-history__section-desc">Une lecture chronologique des grandes périodes de l&#039;association, enrichie par les membres du comité présents à ces moments-là.</p></div><div class="gas-comite-history__hero-metrics gas-comite-history__hero-metrics--timeline"><div class="gas-comite-history__metric"><span class="gas-comite-history__metric-value">2</span><span class="gas-comite-history__metric-label">2 périodes</span></div></div><div class="gas-comite-history__timeline-track"><article class="gas-comite-history__era"><div class="gas-comite-history__era-marker"><span class="gas-comite-history__era-dot"></span><time class="gas-comite-history__era-date">2024 — 2026</time></div><div class="gas-comite-history__era-body"><div class="gas-comite-history__era-card"><div class="gas-comite-history__era-text">Refonte des statuts et ouverture de trois nouvelles sections.</div><div class="gas-comite-history__era-members"><h4 class="gas-comite-history__era-members-title">Membres du comité présents</h4><div class="gas-comite-history__era-members-grid"><article class="gas-comite-history__person gas-comite-history__person--compact"><div class="gas-comite-history__person-avatar gas-comite-history__person-avatar--sm"><span>CR</span></div><div class="gas-comite-history__person-info"><h4 class="gas-comite-history__person-name">Camille Rousseau</h4><span class="gas-comite-history__person-role">Présidente</span></div></article><article class="gas-comite-history__person gas-comite-history__person--compact"><div class="gas-comite-history__person-avatar gas-comite-history__person-avatar--sm"><span>NB</span></div><div class="gas-comite-history__person-info"><h4 class="gas-comite-history__person-name">Nadia Belkacem</h4><span class="gas-comite-history__person-role">Trésorière</span></div></article></div></div></div></div></article><article class="gas-comite-history__era"><div class="gas-comite-history__era-marker"><span class="gas-comite-history__era-dot"></span><time class="gas-comite-history__era-date">2021 — 2023</time></div><div class="gas-comite-history__era-body"><div class="gas-comite-history__era-card"><div class="gas-comite-history__era-text">Lancement du programme de mentorat.</div><div class="gas-comite-history__era-members"><h4 class="gas-comite-history__era-members-title">Membres du comité présents</h4><div class="gas-comite-history__era-members-grid"><article class="gas-comite-history__person gas-comite-history__person--compact"><div class="gas-comite-history__person-avatar gas-comite-history__person-avatar--sm"><span>ÉD</span></div><div class="gas-comite-history__person-info"><h4 class="gas-comite-history__person-name">Élise Dumont</h4><span class="gas-comite-history__person-role">Présidente</span></div></article><article class="gas-comite-history__person gas-comite-history__person--compact"><div class="gas-comite-history__person-avatar gas-comite-history__person-avatar--sm"><span>ML</span></div><div class="gas-comite-history__person-info"><h4 class="gas-comite-history__person-name">Marc Lefèvre</h4><span class="gas-comite-history__person-role">Secrétaire</span></div></article></div></div></div></div></article></div></section></div></div>

Article éditorial inline `editorial_single`

Affiche un article éditorial complet depuis les documents type=article directement dans la page. Résolu en blocs imbriqués (children) — accès refusé/introuvable exposent restricted/not_found sans fuite de contenu.

Ce bloc insère un article éditorial complet — titre, métadonnées, texte et médias — directement dans la page hôte, sans clic supplémentaire. Idéal pour mettre en avant une actualité ou un contenu de fond.

Dans une page réelle, on choisit l'article via son slug et le contenu publié s'affiche ici à l'identique du gabarit éditorial : intertitres, citations, images légendées et liens internes conservent leur mise en forme.

« La parole partagée crée du lien là où le silence isolait. »

L'aperçu ci-dessus est une démonstration : reliez ce bloc à un article publié pour afficher son contenu réel.

Voir le HTML rendu

<div id="sample_editorial_single_001" class="gas-block-anchor" data-gas-block-id="sample_editorial_single_001">    <article class="gas-block-editorial_single gas-block-editorial_single--sample" data-block-type="editorial_single">
        <header class="gas-block-editorial_single__header">
            <p class="gas-block-editorial_single__eyebrow">ARTICLE ÉDITORIAL</p>
            <h1 class="gas-block-editorial_single__title">Un article éditorial complet, intégré dans la page</h1>
            <p class="gas-block-editorial_single__meta">31 mai 2026 · Rédaction APH</p>
        </header>
        <div class="gas-block-editorial_single__body">
            <p>Ce bloc insère un article éditorial complet — titre, métadonnées, texte
            et médias — directement dans la page hôte, sans clic supplémentaire. Idéal
            pour mettre en avant une actualité ou un contenu de fond.</p>
            <p>Dans une page réelle, on choisit l'article via son <em>slug</em> et le
            contenu publié s'affiche ici à l'identique du gabarit éditorial : intertitres,
            citations, images légendées et liens internes conservent leur mise en forme.</p>
            <blockquote>« La parole partagée crée du lien là où le silence isolait. »</blockquote>
            <p>L'aperçu ci-dessus est une démonstration : reliez ce bloc à un article
            publié pour afficher son contenu réel.</p>
        </div>
    </article>
    </div>

Activite mise en avant `featured_activity`

Activité mise en avant depuis le slot placement homepage (variante vedette) ou mosaïque native des activités récentes (variante masonry). Payload structuré portable (config figée slot/layout/card_variant/max_items pour vedette, count/years pour masonry, items résolus avec image optimisée via resolveImage() pour les deux). `rendered_html` reste émis en fallback transitoire pour la variante masonry uniquement (anciens builds Astro consommant le shortcode [gas_activites_masonry]) — la variante vedette n'a jamais émis de rendu pré-rendu.

variante : vedette

Activité vedette

Atelier d'écriture créative

Une matinée pour explorer votre plume, accompagné par nos intervenants.

Découvrir

Voir le HTML rendu

<div id="sample_featured_activity_001" class="gas-block-anchor" data-gas-block-id="sample_featured_activity_001"><div class="gas-block-typed-shortcode gas-block-featured_activity gas-block-featured_activity--variant-vedette" data-block-type="featured_activity">
    <section class="gas-block-placement-slot gas-block-placement-slot--list gas-block-placement-slot--cards-media-left" data-block-type="placement_slot" data-slot="homepage_vedette"><div class="gas-block-placement-slot__inner"><script data-gas-placement-tracker>(function(){function c(n,v,d){var e=new Date(Date.now()+d*864e5).toUTCString();document.cookie=n+"="+encodeURIComponent(v)+"; path=/; expires="+e+"; SameSite=Lax"}if(!document.cookie.match(/(?:^|; )gas_placement_seed=/)){c("gas_placement_seed",Math.random().toString(36).slice(2),365)}function seen(el){if(!el||el.dataset.gasPlacementSeen)return;el.dataset.gasPlacementSeen="1";var id=el.dataset.gasPlacementId;if(!id)return;var name="gas_pl_v_"+id;var m=document.cookie.match(new RegExp("(?:^|; )"+name+"=([^;]*)"));var n=m?parseInt(decodeURIComponent(m[1]),10)||0:0;var days=parseInt(el.dataset.gasPlacementCapDays||"7",10)||7;c(name,String(n+1),days)}if("IntersectionObserver" in window){var io=new IntersectionObserver(function(entries){entries.forEach(function(e){if(e.isIntersecting){seen(e.target);io.unobserve(e.target)}})},{threshold:.5});document.querySelectorAll("[data-gas-placement-id]").forEach(function(el){io.observe(el)})}else{document.querySelectorAll("[data-gas-placement-id]").forEach(seen)}})();</script><article class="gas-placement-card gas-placement-card--media-left"><a class="gas-placement-card__link" href="#"><img class="gas-placement-card__image" src="https://picsum.photos/seed/gas-featured-activity-1/640/420" alt="" loading="lazy" decoding="async"><div class="gas-placement-card__body"><span class="gas-placement-card__eyebrow">Activité vedette</span><h3 class="gas-placement-card__title">Atelier d&#039;écriture créative</h3><p class="gas-placement-card__excerpt">Une matinée pour explorer votre plume, accompagné par nos intervenants.</p></div></a></article></div></section>            <div class="gas-block-featured_activity__actions">
            <a class="gas-button gas-button--outline" href="https://gas-kiener-burkina.ddev.site/agenda/">Découvrir</a>
        </div>
    </div>
</div>

variante : masonry

Voir le HTML rendu

<div id="sample_featured_activity_001" class="gas-block-anchor" data-gas-block-id="sample_featured_activity_001"><div class="gas-block-typed-shortcode gas-block-featured-activity gas-block-featured-activity--variant-masonry" data-block-type="featured_activity"><div class="gas-masonry"></div></div></div>

Actualité à la une `featured_news`

Affiche l'actualité mise en avant du slot placement homepage. Payload structuré portable (heading + config figée slot/layout/card_variant/max_items/show_excerpt/show_date + items résolus du placement).

À la une

Actualité

L'association fête ses dix ans

Voir le HTML rendu

<div id="sample_featured_news_001" class="gas-block-anchor" data-gas-block-id="sample_featured_news_001"><div class="gas-block-typed-shortcode gas-block-featured_news" data-block-type="featured_news">
            <h2 class="gas-block-featured_news__heading">À la une</h2>
        <section class="gas-block-placement-slot gas-block-placement-slot--list gas-block-placement-slot--cards-media-left" data-block-type="placement_slot" data-slot="homepage_actualite"><div class="gas-block-placement-slot__inner"><script data-gas-placement-tracker>(function(){function c(n,v,d){var e=new Date(Date.now()+d*864e5).toUTCString();document.cookie=n+"="+encodeURIComponent(v)+"; path=/; expires="+e+"; SameSite=Lax"}if(!document.cookie.match(/(?:^|; )gas_placement_seed=/)){c("gas_placement_seed",Math.random().toString(36).slice(2),365)}function seen(el){if(!el||el.dataset.gasPlacementSeen)return;el.dataset.gasPlacementSeen="1";var id=el.dataset.gasPlacementId;if(!id)return;var name="gas_pl_v_"+id;var m=document.cookie.match(new RegExp("(?:^|; )"+name+"=([^;]*)"));var n=m?parseInt(decodeURIComponent(m[1]),10)||0:0;var days=parseInt(el.dataset.gasPlacementCapDays||"7",10)||7;c(name,String(n+1),days)}if("IntersectionObserver" in window){var io=new IntersectionObserver(function(entries){entries.forEach(function(e){if(e.isIntersecting){seen(e.target);io.unobserve(e.target)}})},{threshold:.5});document.querySelectorAll("[data-gas-placement-id]").forEach(function(el){io.observe(el)})}else{document.querySelectorAll("[data-gas-placement-id]").forEach(seen)}})();</script><article class="gas-placement-card gas-placement-card--media-left"><a class="gas-placement-card__link" href="#"><img class="gas-placement-card__image" src="https://picsum.photos/seed/gas-featured-news-1/640/420" alt="" loading="lazy" decoding="async"><div class="gas-placement-card__body"><span class="gas-placement-card__eyebrow">Actualité</span><h3 class="gas-placement-card__title">L&#039;association fête ses dix ans</h3></div></a></article></div></section></div>
</div>

Articles recents `latest_articles`

Liste de blog / actualités : affiche en cartes les derniers articles éditoriaux publiés depuis les documents type=article (grille, masonry, magazine, liste…). Bloc de référence pour une page « blog » / « actualités » / « news ». Nécessite des articles créés au préalable via le module éditorial / les tools MCP content_create / editorial_create ; sans articles, la liste est vide. Payload structuré portable (heading/display/columns/category/show_more/show_filters/filters/items — items = cartes résolues avec image optimisée via resolveImage()). `rendered_html` reste émis en fallback transitoire pour les anciens builds Astro consommant encore le shortcode [gas_editorial].

Découvrir

Aucun article pour le moment.

Voir tous les articles

Voir le HTML rendu

<div id="sample_latest_articles_001" class="gas-block-anchor" data-gas-block-id="sample_latest_articles_001"><div class="gas-block-typed-shortcode gas-block-latest-articles" data-block-type="latest_articles"><div class="gas-editorial-shortcode"><h2 class="gas-editorial-shortcode__heading">Découvrir</h2><p class="gas-archive__empty">Aucun article pour le moment.</p><div class="gas-editorial-shortcode__more"><a href="#" class="gas-button gas-button--outline">Voir tous les articles</a></div></div></div></div>

CTA membre `member_cta`

CTA membre natif ; les shortcodes [gas_cta_membre] et [gas_cta_membre_showcase] restent des adaptateurs WP. Payload structuré DÉPENDANT DE L'UTILISATEUR COURANT du rendu (state 1-4) — un build statique/REST anonyme produit l'état visiteur (1), comme le rendered_html historique. `rendered_html` reste émis en fallback transitoire.

variante : default

1 Bannière dégradé [gas_cta_membre layout="1" type="login"]

Rejoignez notre communauté de praticiens

Partagez votre passion pour l'hypnose avec des professionnels engagés. Formations, ateliers, échanges : tout un réseau vous attend.

2 Carte inline [gas_cta_membre layout="2" type="login"]

L'hypnose se vit à plusieurs

Découvrez un espace d'apprentissage et de partage unique. Nos membres se retrouvent lors d'ateliers pratiques, de formations et de moments conviviaux.

3 Split colonnes [gas_cta_membre layout="3" type="login"]

Faites partie de l'aventure

Notre association rassemble des praticiens de tous horizons autour d'une passion commune. Rejoignez-nous et grandissez avec le groupe.

🌀

4 Carte centrée épurée [gas_cta_membre layout="4" type="login"]

Votre réseau de praticiens en hypnose

Un cadre bienveillant pour progresser, se former et partager. Des rencontres qui transforment la pratique.

5 Grille avantages [gas_cta_membre layout="5" type="login"]

Ensemble, allons plus loin

🚀

Progression

Développez vos compétences en continu

❤️

Humain

Des rencontres qui comptent

🎯

Excellence

Visez l'excellence dans votre pratique

Nous rejoindre

6 Ruban minimal [gas_cta_membre layout="6" type="login"]

Plus de 50 activités à redécouvrir

Devenir membre →

7 Carte bande latérale [gas_cta_membre layout="7" type="login"]

Rejoignez notre communauté de praticiens

Partagez votre passion pour l'hypnose avec des professionnels engagés. Formations, ateliers, échanges : tout un réseau vous attend.

Devenir membre

8 Pilule flottante [gas_cta_membre layout="8" type="login"]

L'hypnose se vit à plusieurs →

9 Suggestions activités [gas_cta_membre layout="9" type="login"]

Faites partie de l'aventure

10 Section sombre [gas_cta_membre layout="10" type="login"]

0+ Activités

1+ Membres

Votre réseau de praticiens en hypnose

Un cadre bienveillant pour progresser, se former et partager. Des rencontres qui transforment la pratique.

11 Bannière avatar [gas_cta_membre layout="11" type="login"]

Ensemble, allons plus loin

🧠

ASSP Association de praticiens

→ Nous rejoindre

12 Carte avatar contact [gas_cta_membre layout="12" type="login"]

Plus de 50 activités à redécouvrir

🌀

ASSP Inscriptions ouvertes

13 Split dark image [gas_cta_membre layout="13" type="login"]

Rejoignez notre communauté de praticiens

Partagez votre passion pour l'hypnose avec des professionnels engagés. Formations, ateliers, échanges : tout un réseau vous attend.

Devenir membre

🧠

14 Barre double CTA [gas_cta_membre layout="14" type="login"]

L'hypnose se vit à plusieurs

Découvrez un espace d'apprentissage et de partage unique. Nos membres se retrouvent lors d'ateliers pratiques, de formations et de moments conviviaux.

En savoir plus Voir l'agenda →

Voir le HTML rendu

<div id="pretty_member_cta_001" class="gas-block-anchor" data-gas-block-id="pretty_member_cta_001"><div class="gas-block-embed"><div class="gas-block-typed-shortcode gas-block-member-cta gas-block-member-cta--variant-showcase" data-block-type="member_cta"><div class="gas-cta-showcase">
    <div class="gas-cta-showcase__header">
        <h2 class="gas-cta-showcase__title">Showcase CTA Membre</h2>
        <p class="gas-cta-showcase__meta">
            Type : <strong></strong>
            &nbsp;&middot;&nbsp;
            État détecté : <strong>Visiteur</strong> (1)
        </p>
    </div>

    <div class="gas-cta-showcase__grid ">
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">1</span>
                    <span class="gas-cta-showcase__item-name">Bannière dégradé</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;1&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-1 gas-cta-membre--theme-default gas-cta-membre--type-">
    <h3 class="gas-cta-membre__heading">Rejoignez notre communauté de praticiens</h3>
    <p class="gas-cta-membre__body">Partagez votre passion pour l&#039;hypnose avec des professionnels engagés. Formations, ateliers, échanges : tout un réseau vous attend.</p>

    
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--accent gas-button--l">
            Devenir membre        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">2</span>
                    <span class="gas-cta-showcase__item-name">Carte inline</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;2&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-2 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__content">
        <h3 class="gas-cta-membre__heading">L&#039;hypnose se vit à plusieurs</h3>
        <p class="gas-cta-membre__body">Découvrez un espace d&#039;apprentissage et de partage unique. Nos membres se retrouvent lors d&#039;ateliers pratiques, de formations et de moments conviviaux.</p>

            </div>
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--primary">
            En savoir plus        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">3</span>
                    <span class="gas-cta-showcase__item-name">Split colonnes</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;3&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-3 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__content">
        <h3 class="gas-cta-membre__heading">Faites partie de l&#039;aventure</h3>
        <p class="gas-cta-membre__body">Notre association rassemble des praticiens de tous horizons autour d&#039;une passion commune. Rejoignez-nous et grandissez avec le groupe.</p>

        
                <div class="gas-cta-membre__cta">
            <a href="https://gas-kiener-burkina.ddev.site/"
               class="gas-button gas-button--primary">
                Découvrir l&#039;association            </a>
        </div>
            </div>
    <div class="gas-cta-membre__visual">
                    🌀            </div>
</div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">4</span>
                    <span class="gas-cta-showcase__item-name">Carte centrée épurée</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;4&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-4 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__accent-bar"></div>
    <h3 class="gas-cta-membre__heading">Votre réseau de praticiens en hypnose</h3>
    <p class="gas-cta-membre__body">Un cadre bienveillant pour progresser, se former et partager. Des rencontres qui transforment la pratique.</p>

    
    
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--primary">
            Rejoindre le réseau        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">5</span>
                    <span class="gas-cta-showcase__item-name">Grille avantages</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;5&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-5 gas-cta-membre--theme-default gas-cta-membre--type-">
    <h3 class="gas-cta-membre__heading">Ensemble, allons plus loin</h3>

            <div class="gas-cta-membre__benefits">
                            <div class="gas-cta-membre__benefit">
                    <span class="gas-cta-membre__benefit-icon">🚀</span>
                    <div class="gas-cta-membre__benefit-title">Progression</div>
                    <div class="gas-cta-membre__benefit-text">Développez vos compétences en continu</div>
                </div>
                            <div class="gas-cta-membre__benefit">
                    <span class="gas-cta-membre__benefit-icon">❤️</span>
                    <div class="gas-cta-membre__benefit-title">Humain</div>
                    <div class="gas-cta-membre__benefit-text">Des rencontres qui comptent</div>
                </div>
                            <div class="gas-cta-membre__benefit">
                    <span class="gas-cta-membre__benefit-icon">🎯</span>
                    <div class="gas-cta-membre__benefit-title">Excellence</div>
                    <div class="gas-cta-membre__benefit-text">Visez l&#039;excellence dans votre pratique</div>
                </div>
                    </div>
    
    
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--primary">
            Nous rejoindre        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">6</span>
                    <span class="gas-cta-showcase__item-name">Ruban minimal</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;6&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-6 gas-cta-membre--theme-default gas-cta-membre--type-">
    <h3 class="gas-cta-membre__heading">Plus de 50 activités à redécouvrir</h3>
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-cta-membre__cta-link">
            Devenir membre &rarr;
        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">7</span>
                    <span class="gas-cta-showcase__item-name">Carte bande latérale</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;7&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-7 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__sidebar"></div>
    <div class="gas-cta-membre__content">
        <h3 class="gas-cta-membre__heading">Rejoignez notre communauté de praticiens</h3>
        <p class="gas-cta-membre__body">Partagez votre passion pour l&#039;hypnose avec des professionnels engagés. Formations, ateliers, échanges : tout un réseau vous attend.</p>

        
                <div class="gas-cta-membre__cta">
            <a href="https://gas-kiener-burkina.ddev.site/"
               class="gas-button gas-button--secondary">
                Devenir membre            </a>
        </div>
            </div>
</div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">8</span>
                    <span class="gas-cta-showcase__item-name">Pilule flottante</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;8&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-8 gas-cta-membre--theme-default gas-cta-membre--type-">
        <a href="https://gas-kiener-burkina.ddev.site/" class="gas-cta-membre__pill">
        <span class="gas-cta-membre__pill-text">L&#039;hypnose se vit à plusieurs</span>
        <span class="gas-cta-membre__pill-arrow">&rarr;</span>
    </a>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">9</span>
                    <span class="gas-cta-showcase__item-name">Suggestions activités</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;9&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-9 gas-cta-membre--theme-default gas-cta-membre--type-">
    <h3 class="gas-cta-membre__heading">Faites partie de l&#039;aventure</h3>

                
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--primary gas-button--outline">
            Découvrir l&#039;association        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">10</span>
                    <span class="gas-cta-showcase__item-name">Section sombre</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;10&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-10 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__stats">
        <div class="gas-cta-membre__stat">
            <span class="gas-cta-membre__stat-number">0+</span>
            <span class="gas-cta-membre__stat-label">Activit&eacute;s</span>
        </div>
        <div class="gas-cta-membre__stat">
            <span class="gas-cta-membre__stat-number">1+</span>
            <span class="gas-cta-membre__stat-label">Membres</span>
        </div>
    </div>

    <h3 class="gas-cta-membre__heading">Votre réseau de praticiens en hypnose</h3>
    <p class="gas-cta-membre__body">Un cadre bienveillant pour progresser, se former et partager. Des rencontres qui transforment la pratique.</p>

    
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--accent gas-button--l">
            Rejoindre le réseau        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">11</span>
                    <span class="gas-cta-showcase__item-name">Bannière avatar</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;11&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-11 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__left">
        <h3 class="gas-cta-membre__heading gas-cta-membre__heading--xl">Ensemble, allons plus loin</h3>
    </div>
    <div class="gas-cta-membre__right">
        <div class="gas-cta-membre__avatar-block">
            <div class="gas-cta-membre__avatar-circle">
                                    <span class="gas-cta-membre__avatar-icon">🧠</span>
                            </div>
            <div class="gas-cta-membre__avatar-info">
                <strong>ASSP</strong>
                <span>Association de praticiens</span>
            </div>
        </div>

        
                <div class="gas-cta-membre__cta">
            <a href="https://gas-kiener-burkina.ddev.site/"
               class="gas-cta-membre__cta-link">
                &rarr; Nous rejoindre            </a>
        </div>
            </div>
</div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">12</span>
                    <span class="gas-cta-showcase__item-name">Carte avatar contact</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;12&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-12 gas-cta-membre--theme-default gas-cta-membre--type-">
    <h3 class="gas-cta-membre__heading gas-cta-membre__heading--xxl">Plus de 50 activités à redécouvrir</h3>

    <div class="gas-cta-membre__profile">
        <div class="gas-cta-membre__avatar-circle gas-cta-membre__avatar-circle--lg">
                            <span class="gas-cta-membre__avatar-icon">🌀</span>
                    </div>
        <div class="gas-cta-membre__profile-info">
            <strong>ASSP</strong>
            <span class="gas-cta-membre__badge-online">Inscriptions ouvertes</span>
        </div>
    </div>

    
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--primary gas-button--l">
            Devenir membre        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">13</span>
                    <span class="gas-cta-showcase__item-name">Split dark image</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;13&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-13 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__dark-panel">
        <h3 class="gas-cta-membre__heading">Rejoignez notre communauté de praticiens</h3>
        <p class="gas-cta-membre__body">Partagez votre passion pour l&#039;hypnose avec des professionnels engagés. Formations, ateliers, échanges : tout un réseau vous attend.</p>

        
                <div class="gas-cta-membre__cta">
            <a href="https://gas-kiener-burkina.ddev.site/"
               class="gas-button gas-button--accent">
                Devenir membre            </a>
        </div>
            </div>
    <div class="gas-cta-membre__image-panel">
                    <div class="gas-cta-membre__image-placeholder">
                <span>🧠</span>
            </div>
            </div>
</div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">14</span>
                    <span class="gas-cta-showcase__item-name">Barre double CTA</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;14&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-14 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__text">
        <h3 class="gas-cta-membre__heading">L&#039;hypnose se vit à plusieurs</h3>
        <p class="gas-cta-membre__body">Découvrez un espace d&#039;apprentissage et de partage unique. Nos membres se retrouvent lors d&#039;ateliers pratiques, de formations et de moments conviviaux.</p>
    </div>
        <div class="gas-cta-membre__actions">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--primary">
            En savoir plus        </a>
        <a href="https://gas-kiener-burkina.ddev.site/agenda/"
           class="gas-button gas-button--primary gas-button--outline">
            Voir l&#039;agenda &rarr;
        </a>
    </div>
    </div>
</div>                </div>
            </div>
            </div>
</div>
</div></div></div>

variante : showcase

1 Bannière dégradé [gas_cta_membre layout="1" type="login"]

Rejoignez notre communauté de praticiens

Partagez votre passion pour l'hypnose avec des professionnels engagés. Formations, ateliers, échanges : tout un réseau vous attend.

2 Carte inline [gas_cta_membre layout="2" type="login"]

L'hypnose se vit à plusieurs

Découvrez un espace d'apprentissage et de partage unique. Nos membres se retrouvent lors d'ateliers pratiques, de formations et de moments conviviaux.

3 Split colonnes [gas_cta_membre layout="3" type="login"]

Faites partie de l'aventure

Notre association rassemble des praticiens de tous horizons autour d'une passion commune. Rejoignez-nous et grandissez avec le groupe.

🌀

4 Carte centrée épurée [gas_cta_membre layout="4" type="login"]

Votre réseau de praticiens en hypnose

Un cadre bienveillant pour progresser, se former et partager. Des rencontres qui transforment la pratique.

5 Grille avantages [gas_cta_membre layout="5" type="login"]

Ensemble, allons plus loin

🚀

Progression

Développez vos compétences en continu

❤️

Humain

Des rencontres qui comptent

🎯

Excellence

Visez l'excellence dans votre pratique

Nous rejoindre

6 Ruban minimal [gas_cta_membre layout="6" type="login"]

Plus de 50 activités à redécouvrir

Devenir membre →

7 Carte bande latérale [gas_cta_membre layout="7" type="login"]

Rejoignez notre communauté de praticiens

Partagez votre passion pour l'hypnose avec des professionnels engagés. Formations, ateliers, échanges : tout un réseau vous attend.

Devenir membre

8 Pilule flottante [gas_cta_membre layout="8" type="login"]

L'hypnose se vit à plusieurs →

9 Suggestions activités [gas_cta_membre layout="9" type="login"]

Faites partie de l'aventure

10 Section sombre [gas_cta_membre layout="10" type="login"]

0+ Activités

1+ Membres

Votre réseau de praticiens en hypnose

Un cadre bienveillant pour progresser, se former et partager. Des rencontres qui transforment la pratique.

11 Bannière avatar [gas_cta_membre layout="11" type="login"]

Ensemble, allons plus loin

🧠

ASSP Association de praticiens

→ Nous rejoindre

12 Carte avatar contact [gas_cta_membre layout="12" type="login"]

Plus de 50 activités à redécouvrir

🌀

ASSP Inscriptions ouvertes

13 Split dark image [gas_cta_membre layout="13" type="login"]

Rejoignez notre communauté de praticiens

Partagez votre passion pour l'hypnose avec des professionnels engagés. Formations, ateliers, échanges : tout un réseau vous attend.

Devenir membre

🧠

14 Barre double CTA [gas_cta_membre layout="14" type="login"]

L'hypnose se vit à plusieurs

Découvrez un espace d'apprentissage et de partage unique. Nos membres se retrouvent lors d'ateliers pratiques, de formations et de moments conviviaux.

En savoir plus Voir l'agenda →

Voir le HTML rendu

<div id="pretty_member_cta_001" class="gas-block-anchor" data-gas-block-id="pretty_member_cta_001"><div class="gas-block-embed"><div class="gas-block-typed-shortcode gas-block-member-cta gas-block-member-cta--variant-showcase" data-block-type="member_cta"><div class="gas-cta-showcase">
    <div class="gas-cta-showcase__header">
        <h2 class="gas-cta-showcase__title">Showcase CTA Membre</h2>
        <p class="gas-cta-showcase__meta">
            Type : <strong></strong>
            &nbsp;&middot;&nbsp;
            État détecté : <strong>Visiteur</strong> (1)
        </p>
    </div>

    <div class="gas-cta-showcase__grid ">
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">1</span>
                    <span class="gas-cta-showcase__item-name">Bannière dégradé</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;1&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-1 gas-cta-membre--theme-default gas-cta-membre--type-">
    <h3 class="gas-cta-membre__heading">Rejoignez notre communauté de praticiens</h3>
    <p class="gas-cta-membre__body">Partagez votre passion pour l&#039;hypnose avec des professionnels engagés. Formations, ateliers, échanges : tout un réseau vous attend.</p>

    
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--accent gas-button--l">
            Devenir membre        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">2</span>
                    <span class="gas-cta-showcase__item-name">Carte inline</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;2&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-2 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__content">
        <h3 class="gas-cta-membre__heading">L&#039;hypnose se vit à plusieurs</h3>
        <p class="gas-cta-membre__body">Découvrez un espace d&#039;apprentissage et de partage unique. Nos membres se retrouvent lors d&#039;ateliers pratiques, de formations et de moments conviviaux.</p>

            </div>
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--primary">
            En savoir plus        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">3</span>
                    <span class="gas-cta-showcase__item-name">Split colonnes</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;3&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-3 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__content">
        <h3 class="gas-cta-membre__heading">Faites partie de l&#039;aventure</h3>
        <p class="gas-cta-membre__body">Notre association rassemble des praticiens de tous horizons autour d&#039;une passion commune. Rejoignez-nous et grandissez avec le groupe.</p>

        
                <div class="gas-cta-membre__cta">
            <a href="https://gas-kiener-burkina.ddev.site/"
               class="gas-button gas-button--primary">
                Découvrir l&#039;association            </a>
        </div>
            </div>
    <div class="gas-cta-membre__visual">
                    🌀            </div>
</div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">4</span>
                    <span class="gas-cta-showcase__item-name">Carte centrée épurée</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;4&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-4 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__accent-bar"></div>
    <h3 class="gas-cta-membre__heading">Votre réseau de praticiens en hypnose</h3>
    <p class="gas-cta-membre__body">Un cadre bienveillant pour progresser, se former et partager. Des rencontres qui transforment la pratique.</p>

    
    
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--primary">
            Rejoindre le réseau        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">5</span>
                    <span class="gas-cta-showcase__item-name">Grille avantages</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;5&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-5 gas-cta-membre--theme-default gas-cta-membre--type-">
    <h3 class="gas-cta-membre__heading">Ensemble, allons plus loin</h3>

            <div class="gas-cta-membre__benefits">
                            <div class="gas-cta-membre__benefit">
                    <span class="gas-cta-membre__benefit-icon">🚀</span>
                    <div class="gas-cta-membre__benefit-title">Progression</div>
                    <div class="gas-cta-membre__benefit-text">Développez vos compétences en continu</div>
                </div>
                            <div class="gas-cta-membre__benefit">
                    <span class="gas-cta-membre__benefit-icon">❤️</span>
                    <div class="gas-cta-membre__benefit-title">Humain</div>
                    <div class="gas-cta-membre__benefit-text">Des rencontres qui comptent</div>
                </div>
                            <div class="gas-cta-membre__benefit">
                    <span class="gas-cta-membre__benefit-icon">🎯</span>
                    <div class="gas-cta-membre__benefit-title">Excellence</div>
                    <div class="gas-cta-membre__benefit-text">Visez l&#039;excellence dans votre pratique</div>
                </div>
                    </div>
    
    
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--primary">
            Nous rejoindre        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">6</span>
                    <span class="gas-cta-showcase__item-name">Ruban minimal</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;6&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-6 gas-cta-membre--theme-default gas-cta-membre--type-">
    <h3 class="gas-cta-membre__heading">Plus de 50 activités à redécouvrir</h3>
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-cta-membre__cta-link">
            Devenir membre &rarr;
        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">7</span>
                    <span class="gas-cta-showcase__item-name">Carte bande latérale</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;7&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-7 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__sidebar"></div>
    <div class="gas-cta-membre__content">
        <h3 class="gas-cta-membre__heading">Rejoignez notre communauté de praticiens</h3>
        <p class="gas-cta-membre__body">Partagez votre passion pour l&#039;hypnose avec des professionnels engagés. Formations, ateliers, échanges : tout un réseau vous attend.</p>

        
                <div class="gas-cta-membre__cta">
            <a href="https://gas-kiener-burkina.ddev.site/"
               class="gas-button gas-button--secondary">
                Devenir membre            </a>
        </div>
            </div>
</div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">8</span>
                    <span class="gas-cta-showcase__item-name">Pilule flottante</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;8&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-8 gas-cta-membre--theme-default gas-cta-membre--type-">
        <a href="https://gas-kiener-burkina.ddev.site/" class="gas-cta-membre__pill">
        <span class="gas-cta-membre__pill-text">L&#039;hypnose se vit à plusieurs</span>
        <span class="gas-cta-membre__pill-arrow">&rarr;</span>
    </a>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">9</span>
                    <span class="gas-cta-showcase__item-name">Suggestions activités</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;9&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-9 gas-cta-membre--theme-default gas-cta-membre--type-">
    <h3 class="gas-cta-membre__heading">Faites partie de l&#039;aventure</h3>

                
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--primary gas-button--outline">
            Découvrir l&#039;association        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">10</span>
                    <span class="gas-cta-showcase__item-name">Section sombre</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;10&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-10 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__stats">
        <div class="gas-cta-membre__stat">
            <span class="gas-cta-membre__stat-number">0+</span>
            <span class="gas-cta-membre__stat-label">Activit&eacute;s</span>
        </div>
        <div class="gas-cta-membre__stat">
            <span class="gas-cta-membre__stat-number">1+</span>
            <span class="gas-cta-membre__stat-label">Membres</span>
        </div>
    </div>

    <h3 class="gas-cta-membre__heading">Votre réseau de praticiens en hypnose</h3>
    <p class="gas-cta-membre__body">Un cadre bienveillant pour progresser, se former et partager. Des rencontres qui transforment la pratique.</p>

    
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--accent gas-button--l">
            Rejoindre le réseau        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">11</span>
                    <span class="gas-cta-showcase__item-name">Bannière avatar</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;11&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-11 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__left">
        <h3 class="gas-cta-membre__heading gas-cta-membre__heading--xl">Ensemble, allons plus loin</h3>
    </div>
    <div class="gas-cta-membre__right">
        <div class="gas-cta-membre__avatar-block">
            <div class="gas-cta-membre__avatar-circle">
                                    <span class="gas-cta-membre__avatar-icon">🧠</span>
                            </div>
            <div class="gas-cta-membre__avatar-info">
                <strong>ASSP</strong>
                <span>Association de praticiens</span>
            </div>
        </div>

        
                <div class="gas-cta-membre__cta">
            <a href="https://gas-kiener-burkina.ddev.site/"
               class="gas-cta-membre__cta-link">
                &rarr; Nous rejoindre            </a>
        </div>
            </div>
</div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">12</span>
                    <span class="gas-cta-showcase__item-name">Carte avatar contact</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;12&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-12 gas-cta-membre--theme-default gas-cta-membre--type-">
    <h3 class="gas-cta-membre__heading gas-cta-membre__heading--xxl">Plus de 50 activités à redécouvrir</h3>

    <div class="gas-cta-membre__profile">
        <div class="gas-cta-membre__avatar-circle gas-cta-membre__avatar-circle--lg">
                            <span class="gas-cta-membre__avatar-icon">🌀</span>
                    </div>
        <div class="gas-cta-membre__profile-info">
            <strong>ASSP</strong>
            <span class="gas-cta-membre__badge-online">Inscriptions ouvertes</span>
        </div>
    </div>

    
        <div class="gas-cta-membre__cta">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--primary gas-button--l">
            Devenir membre        </a>
    </div>
    </div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">13</span>
                    <span class="gas-cta-showcase__item-name">Split dark image</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;13&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-13 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__dark-panel">
        <h3 class="gas-cta-membre__heading">Rejoignez notre communauté de praticiens</h3>
        <p class="gas-cta-membre__body">Partagez votre passion pour l&#039;hypnose avec des professionnels engagés. Formations, ateliers, échanges : tout un réseau vous attend.</p>

        
                <div class="gas-cta-membre__cta">
            <a href="https://gas-kiener-burkina.ddev.site/"
               class="gas-button gas-button--accent">
                Devenir membre            </a>
        </div>
            </div>
    <div class="gas-cta-membre__image-panel">
                    <div class="gas-cta-membre__image-placeholder">
                <span>🧠</span>
            </div>
            </div>
</div>
</div>                </div>
            </div>
                    <div class="gas-cta-showcase__item">
                <div class="gas-cta-showcase__item-header">
                    <span class="gas-cta-showcase__item-number">14</span>
                    <span class="gas-cta-showcase__item-name">Barre double CTA</span>
                    <code class="gas-cta-showcase__item-code">[gas_cta_membre layout=&quot;14&quot; type=&quot;login&quot;]</code>
                </div>
                <div class="gas-cta-showcase__item-preview">
                    <div class="gas-cta-membre-query"><div class="gas-cta-membre gas-cta-membre--layout-14 gas-cta-membre--theme-default gas-cta-membre--type-">
    <div class="gas-cta-membre__text">
        <h3 class="gas-cta-membre__heading">L&#039;hypnose se vit à plusieurs</h3>
        <p class="gas-cta-membre__body">Découvrez un espace d&#039;apprentissage et de partage unique. Nos membres se retrouvent lors d&#039;ateliers pratiques, de formations et de moments conviviaux.</p>
    </div>
        <div class="gas-cta-membre__actions">
        <a href="https://gas-kiener-burkina.ddev.site/"
           class="gas-button gas-button--primary">
            En savoir plus        </a>
        <a href="https://gas-kiener-burkina.ddev.site/agenda/"
           class="gas-button gas-button--primary gas-button--outline">
            Voir l&#039;agenda &rarr;
        </a>
    </div>
    </div>
</div>                </div>
            </div>
            </div>
</div>
</div></div></div>

Bandeau nouvelles `news_strip`

Affiche les nouvelles du slot placement homepage. Payload structuré portable (config figée slot/layout/card_variant/max_items/show_excerpt/show_date + items résolus du placement).

2 février 2026

Ouverture des inscriptions

Les inscriptions pour la nouvelle saison sont ouvertes.

18 février 2026

Rencontre avec les bénévoles

Une soirée conviviale pour remercier nos bénévoles.

25 février 2026

Nouveau partenariat culturel

Un accord signé avec le théâtre municipal.

Voir le HTML rendu

<div id="sample_news_strip_001" class="gas-block-anchor" data-gas-block-id="sample_news_strip_001"><div class="gas-block-typed-shortcode gas-block-news_strip" data-block-type="news_strip">
    <section class="gas-block-placement-slot gas-block-placement-slot--grid-3 gas-block-placement-slot--cards-vertical" data-block-type="placement_slot" data-slot="homepage_nouvelles"><div class="gas-block-placement-slot__inner"><script data-gas-placement-tracker>(function(){function c(n,v,d){var e=new Date(Date.now()+d*864e5).toUTCString();document.cookie=n+"="+encodeURIComponent(v)+"; path=/; expires="+e+"; SameSite=Lax"}if(!document.cookie.match(/(?:^|; )gas_placement_seed=/)){c("gas_placement_seed",Math.random().toString(36).slice(2),365)}function seen(el){if(!el||el.dataset.gasPlacementSeen)return;el.dataset.gasPlacementSeen="1";var id=el.dataset.gasPlacementId;if(!id)return;var name="gas_pl_v_"+id;var m=document.cookie.match(new RegExp("(?:^|; )"+name+"=([^;]*)"));var n=m?parseInt(decodeURIComponent(m[1]),10)||0:0;var days=parseInt(el.dataset.gasPlacementCapDays||"7",10)||7;c(name,String(n+1),days)}if("IntersectionObserver" in window){var io=new IntersectionObserver(function(entries){entries.forEach(function(e){if(e.isIntersecting){seen(e.target);io.unobserve(e.target)}})},{threshold:.5});document.querySelectorAll("[data-gas-placement-id]").forEach(function(el){io.observe(el)})}else{document.querySelectorAll("[data-gas-placement-id]").forEach(seen)}})();</script><article class="gas-placement-card gas-placement-card--vertical"><a class="gas-placement-card__link" href="#"><img class="gas-placement-card__image" src="https://picsum.photos/seed/gas-news-strip-1/480/320" alt="" loading="lazy" decoding="async"><div class="gas-placement-card__body"><span class="gas-placement-card__eyebrow">2 février 2026</span><h3 class="gas-placement-card__title">Ouverture des inscriptions</h3><p class="gas-placement-card__excerpt">Les inscriptions pour la nouvelle saison sont ouvertes.</p><span class="gas-placement-card__cta gas-button gas-button--outline">Lire la suite</span></div></a></article><article class="gas-placement-card gas-placement-card--vertical"><a class="gas-placement-card__link" href="#"><img class="gas-placement-card__image" src="https://picsum.photos/seed/gas-news-strip-2/480/320" alt="" loading="lazy" decoding="async"><div class="gas-placement-card__body"><span class="gas-placement-card__eyebrow">18 février 2026</span><h3 class="gas-placement-card__title">Rencontre avec les bénévoles</h3><p class="gas-placement-card__excerpt">Une soirée conviviale pour remercier nos bénévoles.</p><span class="gas-placement-card__cta gas-button gas-button--outline">Lire la suite</span></div></a></article><article class="gas-placement-card gas-placement-card--vertical"><a class="gas-placement-card__link" href="#"><img class="gas-placement-card__image" src="https://picsum.photos/seed/gas-news-strip-3/480/320" alt="" loading="lazy" decoding="async"><div class="gas-placement-card__body"><span class="gas-placement-card__eyebrow">25 février 2026</span><h3 class="gas-placement-card__title">Nouveau partenariat culturel</h3><p class="gas-placement-card__excerpt">Un accord signé avec le théâtre municipal.</p><span class="gas-placement-card__cta gas-button gas-button--outline">Lire la suite</span></div></a></article></div></section></div>
</div>

Bandeau partenaire `partner_banner`

Bandeau partenaire natif ; payload structuré portable (partenaire sélectionné au build via la rotation impressions/quota/priorité existante, logo via GasImageSizeResolver). `rendered_html` reste émis en fallback transitoire pour les anciens builds Astro consommant encore les shortcodes pub école.

variante : inline

Voir le HTML rendu

<div id="sample_partner_banner_001" class="gas-block-anchor" data-gas-block-id="sample_partner_banner_001"><div class="gas-block-typed-shortcode gas-block-partner-banner gas-block-partner-banner--variant-inline" data-block-type="partner_banner"><span class="gas-ecole-pub-inline" data-gas-ecole-pub="1" data-ecole-id="0" data-slot-key="homepage"><span class="gas-ecole-pub-inline__label">École partenaire - </span><a class="gas-ecole-pub-inline__link" data-gas-ecole-pub-link="1" href="#">École des Arts Vivants</a></span></div></div>

variante : full

Voir le HTML rendu

<div id="sample_partner_banner_001" class="gas-block-anchor" data-gas-block-id="sample_partner_banner_001"><div class="gas-block-typed-shortcode gas-block-partner-banner gas-block-partner-banner--variant-full" data-block-type="partner_banner"><article class="gas-ecole-pub-card gas-ecole-pub-card--full" data-gas-ecole-pub="1" data-ecole-id="0" data-slot-key="homepage"><div class="gas-ecole-pub-card__logo"><img src="https://picsum.photos/seed/gas-partner-1/480/320" alt="École des Arts Vivants" loading="lazy"></div><div class="gas-ecole-pub-card__content"><p class="gas-ecole-pub-card__eyebrow">École partenaire</p><h3 class="gas-ecole-pub-card__title"><a data-gas-ecole-pub-link="1" href="#">École des Arts Vivants</a></h3><p class="gas-ecole-pub-card__meta">Lausanne</p><p class="gas-ecole-pub-card__description">Un espace dédié à la pratique du théâtre, de la danse et de la musique pour tous les âges.</p></div><div class="gas-ecole-pub-card__actions"><a class="gas-ecole-pub-card__cta" data-gas-ecole-pub-link="1" href="#">Découvrir l&#039;école</a></div></article></div></div>

variante : square

Voir le HTML rendu

<div id="sample_partner_banner_001" class="gas-block-anchor" data-gas-block-id="sample_partner_banner_001"><div class="gas-block-typed-shortcode gas-block-partner-banner gas-block-partner-banner--variant-square" data-block-type="partner_banner"><article class="gas-ecole-pub-card gas-ecole-pub-card--square" data-gas-ecole-pub="1" data-ecole-id="0" data-slot-key="homepage"><p class="gas-ecole-pub-card__eyebrow">École partenaire</p><div class="gas-ecole-pub-card__logo gas-ecole-pub-card__logo--square"><img src="https://picsum.photos/seed/gas-partner-1/480/320" alt="École des Arts Vivants" loading="lazy"></div><h3 class="gas-ecole-pub-card__title"><a data-gas-ecole-pub-link="1" href="#">École des Arts Vivants</a></h3><p class="gas-ecole-pub-card__meta">Lausanne</p><p class="gas-ecole-pub-card__description gas-ecole-pub-card__description--square">Un espace dédié à la pratique du théâtre, de la danse et de la musique pour tous les âges.</p><a class="gas-ecole-pub-card__cta gas-ecole-pub-card__cta--block" data-gas-ecole-pub-link="1" href="#">Découvrir l&#039;école</a></article></div></div>

Slot placement `placement_slot`

Affiche un slot dynamique du module placements.

variante : grid-2

Aucun contenu disponible pour le moment.

Voir le HTML rendu

<div id="sample_placement_slot_001" class="gas-block-anchor" data-gas-block-id="sample_placement_slot_001"><section class="gas-block-placement-slot gas-block-placement-slot--grid-2 gas-block-placement-slot--cards-vertical" data-block-type="placement_slot" data-slot="homepage_nouvelles"><p class="gas-block-placement-slot__fallback">Aucun contenu disponible pour le moment.</p></section></div>

variante : grid-3

Aucun contenu disponible pour le moment.

Voir le HTML rendu

<div id="sample_placement_slot_001" class="gas-block-anchor" data-gas-block-id="sample_placement_slot_001"><section class="gas-block-placement-slot gas-block-placement-slot--grid-3 gas-block-placement-slot--cards-vertical" data-block-type="placement_slot" data-slot="homepage_nouvelles"><p class="gas-block-placement-slot__fallback">Aucun contenu disponible pour le moment.</p></section></div>

variante : grid-4

Aucun contenu disponible pour le moment.

Voir le HTML rendu

<div id="sample_placement_slot_001" class="gas-block-anchor" data-gas-block-id="sample_placement_slot_001"><section class="gas-block-placement-slot gas-block-placement-slot--grid-4 gas-block-placement-slot--cards-vertical" data-block-type="placement_slot" data-slot="homepage_nouvelles"><p class="gas-block-placement-slot__fallback">Aucun contenu disponible pour le moment.</p></section></div>

variante : list

Aucun contenu disponible pour le moment.

Voir le HTML rendu

<div id="sample_placement_slot_001" class="gas-block-anchor" data-gas-block-id="sample_placement_slot_001"><section class="gas-block-placement-slot gas-block-placement-slot--list gas-block-placement-slot--cards-vertical" data-block-type="placement_slot" data-slot="homepage_nouvelles"><p class="gas-block-placement-slot__fallback">Aucun contenu disponible pour le moment.</p></section></div>

variante : carousel

Aucun contenu disponible pour le moment.

Voir le HTML rendu

<div id="sample_placement_slot_001" class="gas-block-anchor" data-gas-block-id="sample_placement_slot_001"><section class="gas-block-placement-slot gas-block-placement-slot--carousel gas-block-placement-slot--cards-vertical" data-block-type="placement_slot" data-slot="homepage_nouvelles"><p class="gas-block-placement-slot__fallback">Aucun contenu disponible pour le moment.</p></section></div>

Articles liés `related_articles`

Liste d’articles liés par topic, auteur ou sélection manuelle ; payload structuré portable (items résolus, image via resolveImage()). Pas de `rendered_html` (le composant Astro consomme directement `items`).

variante : grid

Cultiver l'attention au quotidien

calendar 12 mars 2026

Quelques pistes simples pour revenir à l'instant présent.

Le rôle du souffle dans la voix

calendar 5 mars 2026

Comprendre la respiration pour mieux poser sa voix.

Trois exercices d'improvisation

calendar 26 février 2026

De courtes séquences pour libérer la créativité.

Voir le HTML rendu

<div id="sample_related_articles_001" class="gas-block-anchor" data-gas-block-id="sample_related_articles_001"><section class="gas-block-related-articles gas-block-related-articles--grid" data-block-type="related_articles">
    <div class="gas-grid gas-grid--3">
                    <div class="gas-card gas-card--default gas-card--default gas-card--equal-height"
     style="--card-image-height: 200px"     data-id="101"     id="gas-card-101"
     data-equal-height="true"
     data-theme="default">

        <div class="gas-card__image">
                
                                    <img src="https://picsum.photos/seed/gas-related-articles-1/480/320" alt="Cultiver l&#039;attention au quotidien" class="gas-card__image-img" loading="lazy" decoding="async" />                    
        
                    </div>
    
    <div class="gas-card__content">
        
                    <h3 class="gas-card__title">
                <a href="#"
                   target="_self"
                   class="gas-card__title-link">
                    Cultiver l&#039;attention au quotidien                </a>
            </h3>
        
                    <div class="gas-card__details">
                                            <div class="gas-card__detail">
                            <span class="gas-card__detail-icon">calendar</span>
                        <span class="gas-card__detail-text">
                12 mars 2026            </span>
        </div>
                                    </div>
        
                    <div class="gas-card__description-wrapper">
                <p class="gas-card__description" id="gas-card-101-desc">
                    Quelques pistes simples pour revenir à l&#039;instant présent.                </p>
                            </div>
        
                    <div class="gas-card__actions">
                        <div class="gas-card__action-row">
                            
                                    <button type="button"
                            class="gas-button gas-button--outline gas-button--sm"
                            >
                        Lire l&#039;article                    </button>
                                    </div>
                    </div>
            </div>
</div>                    <div class="gas-card gas-card--default gas-card--default gas-card--equal-height"
     style="--card-image-height: 200px"     data-id="102"     id="gas-card-102"
     data-equal-height="true"
     data-theme="default">

        <div class="gas-card__image">
                
                                    <img src="https://picsum.photos/seed/gas-related-articles-2/480/320" alt="Le rôle du souffle dans la voix" class="gas-card__image-img" loading="lazy" decoding="async" />                    
        
                    </div>
    
    <div class="gas-card__content">
        
                    <h3 class="gas-card__title">
                <a href="#"
                   target="_self"
                   class="gas-card__title-link">
                    Le rôle du souffle dans la voix                </a>
            </h3>
        
                    <div class="gas-card__details">
                                            <div class="gas-card__detail">
                            <span class="gas-card__detail-icon">calendar</span>
                        <span class="gas-card__detail-text">
                5 mars 2026            </span>
        </div>
                                    </div>
        
                    <div class="gas-card__description-wrapper">
                <p class="gas-card__description" id="gas-card-102-desc">
                    Comprendre la respiration pour mieux poser sa voix.                </p>
                            </div>
        
                    <div class="gas-card__actions">
                        <div class="gas-card__action-row">
                            
                                    <button type="button"
                            class="gas-button gas-button--outline gas-button--sm"
                            >
                        Lire l&#039;article                    </button>
                                    </div>
                    </div>
            </div>
</div>                    <div class="gas-card gas-card--default gas-card--default gas-card--equal-height"
     style="--card-image-height: 200px"     data-id="103"     id="gas-card-103"
     data-equal-height="true"
     data-theme="default">

        <div class="gas-card__image">
                
                                    <img src="https://picsum.photos/seed/gas-related-articles-3/480/320" alt="Trois exercices d&#039;improvisation" class="gas-card__image-img" loading="lazy" decoding="async" />                    
        
                    </div>
    
    <div class="gas-card__content">
        
                    <h3 class="gas-card__title">
                <a href="#"
                   target="_self"
                   class="gas-card__title-link">
                    Trois exercices d&#039;improvisation                </a>
            </h3>
        
                    <div class="gas-card__details">
                                            <div class="gas-card__detail">
                            <span class="gas-card__detail-icon">calendar</span>
                        <span class="gas-card__detail-text">
                26 février 2026            </span>
        </div>
                                    </div>
        
                    <div class="gas-card__description-wrapper">
                <p class="gas-card__description" id="gas-card-103-desc">
                    De courtes séquences pour libérer la créativité.                </p>
                            </div>
        
                    <div class="gas-card__actions">
                        <div class="gas-card__action-row">
                            
                                    <button type="button"
                            class="gas-button gas-button--outline gas-button--sm"
                            >
                        Lire l&#039;article                    </button>
                                    </div>
                    </div>
            </div>
</div>            </div>
</section>
</div>

variante : compact

Voir le HTML rendu

<div id="sample_related_articles_001" class="gas-block-anchor" data-gas-block-id="sample_related_articles_001"><section class="gas-block-related-articles gas-block-related-articles--compact" data-block-type="related_articles">
    <div class="gas-grid gas-grid--3">
                    <div class="gas-card gas-card--default gas-card--compact"
     style="--card-compact-image-width: 120px"     data-id="101"     id="gas-card-101"
     data-theme="default">

        <div class="gas-card__image">
        
                                    <img src="https://picsum.photos/seed/gas-related-articles-1/480/320" alt="Cultiver l&#039;attention au quotidien" class="gas-card__image-img" loading="lazy" decoding="async" />                    
            </div>
    
    <div class="gas-card__content">
        
                    <h4 class="gas-card__title">
                <a href="#"
                   target="_self"
                   class="gas-card__title-link">
                    Cultiver l&#039;attention au quotidien                </a>
            </h4>
        
                    <div class="gas-card__details">
                                            <div class="gas-card__detail">
                            <span class="gas-card__detail-icon">calendar</span>
                        <span class="gas-card__detail-text">
                12 mars 2026            </span>
        </div>
                                    </div>
        
        
        
            </div>
</div>                    <div class="gas-card gas-card--default gas-card--compact"
     style="--card-compact-image-width: 120px"     data-id="102"     id="gas-card-102"
     data-theme="default">

        <div class="gas-card__image">
        
                                    <img src="https://picsum.photos/seed/gas-related-articles-2/480/320" alt="Le rôle du souffle dans la voix" class="gas-card__image-img" loading="lazy" decoding="async" />                    
            </div>
    
    <div class="gas-card__content">
        
                    <h4 class="gas-card__title">
                <a href="#"
                   target="_self"
                   class="gas-card__title-link">
                    Le rôle du souffle dans la voix                </a>
            </h4>
        
                    <div class="gas-card__details">
                                            <div class="gas-card__detail">
                            <span class="gas-card__detail-icon">calendar</span>
                        <span class="gas-card__detail-text">
                5 mars 2026            </span>
        </div>
                                    </div>
        
        
        
            </div>
</div>                    <div class="gas-card gas-card--default gas-card--compact"
     style="--card-compact-image-width: 120px"     data-id="103"     id="gas-card-103"
     data-theme="default">

        <div class="gas-card__image">
        
                                    <img src="https://picsum.photos/seed/gas-related-articles-3/480/320" alt="Trois exercices d&#039;improvisation" class="gas-card__image-img" loading="lazy" decoding="async" />                    
            </div>
    
    <div class="gas-card__content">
        
                    <h4 class="gas-card__title">
                <a href="#"
                   target="_self"
                   class="gas-card__title-link">
                    Trois exercices d&#039;improvisation                </a>
            </h4>
        
                    <div class="gas-card__details">
                                            <div class="gas-card__detail">
                            <span class="gas-card__detail-icon">calendar</span>
                        <span class="gas-card__detail-text">
                26 février 2026            </span>
        </div>
                                    </div>
        
        
        
            </div>
</div>            </div>
</section>
</div>

variante : list

Voir le HTML rendu

<div id="sample_related_articles_001" class="gas-block-anchor" data-gas-block-id="sample_related_articles_001"><section class="gas-block-related-articles gas-block-related-articles--list" data-block-type="related_articles">
    <div class="gas-archive__list gas-grid gas-grid--minimal">
                    <div class="gas-card gas-card--default gas-card--minimal"
          data-id="101"     data-theme="default">

    <div class="gas-card__content">
        
                    <h5 class="gas-card__title">
                <a href="#"
                   target="_self"
                   class="gas-card__title-link">
                    Cultiver l&#039;attention au quotidien                </a>
            </h5>
        
                    <div class="gas-card__details">
                                            <div class="gas-card__detail">
                            <span class="gas-card__detail-icon">calendar</span>
                        <span class="gas-card__detail-text">
                12 mars 2026            </span>
        </div>
                                    </div>
        
            </div>
</div>                    <div class="gas-card gas-card--default gas-card--minimal"
          data-id="102"     data-theme="default">

    <div class="gas-card__content">
        
                    <h5 class="gas-card__title">
                <a href="#"
                   target="_self"
                   class="gas-card__title-link">
                    Le rôle du souffle dans la voix                </a>
            </h5>
        
                    <div class="gas-card__details">
                                            <div class="gas-card__detail">
                            <span class="gas-card__detail-icon">calendar</span>
                        <span class="gas-card__detail-text">
                5 mars 2026            </span>
        </div>
                                    </div>
        
            </div>
</div>                    <div class="gas-card gas-card--default gas-card--minimal"
          data-id="103"     data-theme="default">

    <div class="gas-card__content">
        
                    <h5 class="gas-card__title">
                <a href="#"
                   target="_self"
                   class="gas-card__title-link">
                    Trois exercices d&#039;improvisation                </a>
            </h5>
        
                    <div class="gas-card__details">
                                            <div class="gas-card__detail">
                            <span class="gas-card__detail-icon">calendar</span>
                        <span class="gas-card__detail-text">
                26 février 2026            </span>
        </div>
                                    </div>
        
            </div>
</div>            </div>
</section>
</div>

Catalogue location `rental_catalog`

Affiche le matériel disponible à la location. Payload structuré (snapshot d'items au resolve, comme shop_catalog) — jamais de rendered_html.

variante : grid-3

Sonorisation portable

Enceinte amplifiée sur batterie avec micro sans fil, idéale pour événements en extérieur.

45.00 par jour

Projecteur vidéo Full HD

Vidéoprojecteur 3500 lumens avec écran de projection et câbles fournis.

35.00 par jour

Kit d'éclairage scénique

Quatre projecteurs LED RGB avec pieds et jeu d'orgue pour animer vos spectacles.

60.00 par jour

Voir le HTML rendu

<div id="sample_rental_catalog_001" class="gas-block-anchor" data-gas-block-id="sample_rental_catalog_001">    <section class="gas-block-rental-catalog gas-block-rental-catalog--grid-3" data-block-type="rental_catalog">
        <div class="gas-block-rental-catalog__inner">
                                            <article class="gas-block-rental-catalog__card">
                                            <a href="#" class="gas-block-rental-catalog__media">
                            <img src="https://picsum.photos/seed/gas-rental-1/480/320" alt="Sonorisation portable" loading="lazy">
                        </a>
                                        <h3 class="gas-block-rental-catalog__title">
                        <a href="#">Sonorisation portable</a>
                    </h3>
                                            <p class="gas-block-rental-catalog__desc">Enceinte amplifiée sur batterie avec micro sans fil, idéale pour événements en extérieur.</p>
                                                                <p class="gas-block-rental-catalog__price">45.00 par jour</p>
                                    </article>
                                            <article class="gas-block-rental-catalog__card">
                                            <a href="#" class="gas-block-rental-catalog__media">
                            <img src="https://picsum.photos/seed/gas-rental-2/480/320" alt="Projecteur vidéo Full HD" loading="lazy">
                        </a>
                                        <h3 class="gas-block-rental-catalog__title">
                        <a href="#">Projecteur vidéo Full HD</a>
                    </h3>
                                            <p class="gas-block-rental-catalog__desc">Vidéoprojecteur 3500 lumens avec écran de projection et câbles fournis.</p>
                                                                <p class="gas-block-rental-catalog__price">35.00 par jour</p>
                                    </article>
                                            <article class="gas-block-rental-catalog__card">
                                            <a href="#" class="gas-block-rental-catalog__media">
                            <img src="https://picsum.photos/seed/gas-rental-3/480/320" alt="Kit d&#039;éclairage scénique" loading="lazy">
                        </a>
                                        <h3 class="gas-block-rental-catalog__title">
                        <a href="#">Kit d&#039;éclairage scénique</a>
                    </h3>
                                            <p class="gas-block-rental-catalog__desc">Quatre projecteurs LED RGB avec pieds et jeu d&#039;orgue pour animer vos spectacles.</p>
                                                                <p class="gas-block-rental-catalog__price">60.00 par jour</p>
                                    </article>
                    </div>
    </section>
    </div>

variante : grid-2

Sonorisation portable

Enceinte amplifiée sur batterie avec micro sans fil, idéale pour événements en extérieur.

45.00 par jour

Projecteur vidéo Full HD

Vidéoprojecteur 3500 lumens avec écran de projection et câbles fournis.

35.00 par jour

Kit d'éclairage scénique

Quatre projecteurs LED RGB avec pieds et jeu d'orgue pour animer vos spectacles.

60.00 par jour

Voir le HTML rendu

<div id="sample_rental_catalog_001" class="gas-block-anchor" data-gas-block-id="sample_rental_catalog_001">    <section class="gas-block-rental-catalog gas-block-rental-catalog--grid-2" data-block-type="rental_catalog">
        <div class="gas-block-rental-catalog__inner">
                                            <article class="gas-block-rental-catalog__card">
                                            <a href="#" class="gas-block-rental-catalog__media">
                            <img src="https://picsum.photos/seed/gas-rental-1/480/320" alt="Sonorisation portable" loading="lazy">
                        </a>
                                        <h3 class="gas-block-rental-catalog__title">
                        <a href="#">Sonorisation portable</a>
                    </h3>
                                            <p class="gas-block-rental-catalog__desc">Enceinte amplifiée sur batterie avec micro sans fil, idéale pour événements en extérieur.</p>
                                                                <p class="gas-block-rental-catalog__price">45.00 par jour</p>
                                    </article>
                                            <article class="gas-block-rental-catalog__card">
                                            <a href="#" class="gas-block-rental-catalog__media">
                            <img src="https://picsum.photos/seed/gas-rental-2/480/320" alt="Projecteur vidéo Full HD" loading="lazy">
                        </a>
                                        <h3 class="gas-block-rental-catalog__title">
                        <a href="#">Projecteur vidéo Full HD</a>
                    </h3>
                                            <p class="gas-block-rental-catalog__desc">Vidéoprojecteur 3500 lumens avec écran de projection et câbles fournis.</p>
                                                                <p class="gas-block-rental-catalog__price">35.00 par jour</p>
                                    </article>
                                            <article class="gas-block-rental-catalog__card">
                                            <a href="#" class="gas-block-rental-catalog__media">
                            <img src="https://picsum.photos/seed/gas-rental-3/480/320" alt="Kit d&#039;éclairage scénique" loading="lazy">
                        </a>
                                        <h3 class="gas-block-rental-catalog__title">
                        <a href="#">Kit d&#039;éclairage scénique</a>
                    </h3>
                                            <p class="gas-block-rental-catalog__desc">Quatre projecteurs LED RGB avec pieds et jeu d&#039;orgue pour animer vos spectacles.</p>
                                                                <p class="gas-block-rental-catalog__price">60.00 par jour</p>
                                    </article>
                    </div>
    </section>
    </div>

variante : grid-4

Sonorisation portable

Enceinte amplifiée sur batterie avec micro sans fil, idéale pour événements en extérieur.

45.00 par jour

Projecteur vidéo Full HD

Vidéoprojecteur 3500 lumens avec écran de projection et câbles fournis.

35.00 par jour

Kit d'éclairage scénique

Quatre projecteurs LED RGB avec pieds et jeu d'orgue pour animer vos spectacles.

60.00 par jour

Voir le HTML rendu

<div id="sample_rental_catalog_001" class="gas-block-anchor" data-gas-block-id="sample_rental_catalog_001">    <section class="gas-block-rental-catalog gas-block-rental-catalog--grid-4" data-block-type="rental_catalog">
        <div class="gas-block-rental-catalog__inner">
                                            <article class="gas-block-rental-catalog__card">
                                            <a href="#" class="gas-block-rental-catalog__media">
                            <img src="https://picsum.photos/seed/gas-rental-1/480/320" alt="Sonorisation portable" loading="lazy">
                        </a>
                                        <h3 class="gas-block-rental-catalog__title">
                        <a href="#">Sonorisation portable</a>
                    </h3>
                                            <p class="gas-block-rental-catalog__desc">Enceinte amplifiée sur batterie avec micro sans fil, idéale pour événements en extérieur.</p>
                                                                <p class="gas-block-rental-catalog__price">45.00 par jour</p>
                                    </article>
                                            <article class="gas-block-rental-catalog__card">
                                            <a href="#" class="gas-block-rental-catalog__media">
                            <img src="https://picsum.photos/seed/gas-rental-2/480/320" alt="Projecteur vidéo Full HD" loading="lazy">
                        </a>
                                        <h3 class="gas-block-rental-catalog__title">
                        <a href="#">Projecteur vidéo Full HD</a>
                    </h3>
                                            <p class="gas-block-rental-catalog__desc">Vidéoprojecteur 3500 lumens avec écran de projection et câbles fournis.</p>
                                                                <p class="gas-block-rental-catalog__price">35.00 par jour</p>
                                    </article>
                                            <article class="gas-block-rental-catalog__card">
                                            <a href="#" class="gas-block-rental-catalog__media">
                            <img src="https://picsum.photos/seed/gas-rental-3/480/320" alt="Kit d&#039;éclairage scénique" loading="lazy">
                        </a>
                                        <h3 class="gas-block-rental-catalog__title">
                        <a href="#">Kit d&#039;éclairage scénique</a>
                    </h3>
                                            <p class="gas-block-rental-catalog__desc">Quatre projecteurs LED RGB avec pieds et jeu d&#039;orgue pour animer vos spectacles.</p>
                                                                <p class="gas-block-rental-catalog__price">60.00 par jour</p>
                                    </article>
                    </div>
    </section>
    </div>

variante : list

Sonorisation portable

Enceinte amplifiée sur batterie avec micro sans fil, idéale pour événements en extérieur.

45.00 par jour

Projecteur vidéo Full HD

Vidéoprojecteur 3500 lumens avec écran de projection et câbles fournis.

35.00 par jour

Kit d'éclairage scénique

Quatre projecteurs LED RGB avec pieds et jeu d'orgue pour animer vos spectacles.

60.00 par jour

Voir le HTML rendu

<div id="sample_rental_catalog_001" class="gas-block-anchor" data-gas-block-id="sample_rental_catalog_001">    <section class="gas-block-rental-catalog gas-block-rental-catalog--list" data-block-type="rental_catalog">
        <div class="gas-block-rental-catalog__inner">
                                            <article class="gas-block-rental-catalog__card">
                                            <a href="#" class="gas-block-rental-catalog__media">
                            <img src="https://picsum.photos/seed/gas-rental-1/480/320" alt="Sonorisation portable" loading="lazy">
                        </a>
                                        <h3 class="gas-block-rental-catalog__title">
                        <a href="#">Sonorisation portable</a>
                    </h3>
                                            <p class="gas-block-rental-catalog__desc">Enceinte amplifiée sur batterie avec micro sans fil, idéale pour événements en extérieur.</p>
                                                                <p class="gas-block-rental-catalog__price">45.00 par jour</p>
                                    </article>
                                            <article class="gas-block-rental-catalog__card">
                                            <a href="#" class="gas-block-rental-catalog__media">
                            <img src="https://picsum.photos/seed/gas-rental-2/480/320" alt="Projecteur vidéo Full HD" loading="lazy">
                        </a>
                                        <h3 class="gas-block-rental-catalog__title">
                        <a href="#">Projecteur vidéo Full HD</a>
                    </h3>
                                            <p class="gas-block-rental-catalog__desc">Vidéoprojecteur 3500 lumens avec écran de projection et câbles fournis.</p>
                                                                <p class="gas-block-rental-catalog__price">35.00 par jour</p>
                                    </article>
                                            <article class="gas-block-rental-catalog__card">
                                            <a href="#" class="gas-block-rental-catalog__media">
                            <img src="https://picsum.photos/seed/gas-rental-3/480/320" alt="Kit d&#039;éclairage scénique" loading="lazy">
                        </a>
                                        <h3 class="gas-block-rental-catalog__title">
                        <a href="#">Kit d&#039;éclairage scénique</a>
                    </h3>
                                            <p class="gas-block-rental-catalog__desc">Quatre projecteurs LED RGB avec pieds et jeu d&#039;orgue pour animer vos spectacles.</p>
                                                                <p class="gas-block-rental-catalog__price">60.00 par jour</p>
                                    </article>
                    </div>
    </section>
    </div>

Annuaire ecoles `schools_directory`

Annuaire natif des écoles ; payload structuré portable (items résolus, logo via GasImageSizeResolver). `rendered_html` reste émis en fallback transitoire pour les anciens builds Astro consommant encore le shortcode [gas_ecoles].

Aucune école à afficher.

Voir le HTML rendu

<div id="sample_schools_directory_001" class="gas-block-anchor" data-gas-block-id="sample_schools_directory_001"><div class="gas-block-embed"><div class="gas-block-typed-shortcode gas-block-schools-directory" data-block-type="schools_directory"><p class="gas-ecoles-empty">Aucune école à afficher.</p></div></div></div>

Catalogue shop `shop_catalog`

Affiche une sélection de produits shop.

variante : grid-3

Abonnement annuel

45.00 CHF

Carnet de dix entrées

90.00 CHF

Bon cadeau découverte

30.00 CHF

Voir le HTML rendu

<div id="sample_shop_catalog_001" class="gas-block-anchor" data-gas-block-id="sample_shop_catalog_001"><section class="gas-block-shop-catalog gas-block-shop-catalog--grid-3" data-block-type="shop_catalog">
    <div class="gas-block-shop-catalog__inner">
                                <article class="gas-block-shop-catalog__item">
                <a class="gas-block-shop-catalog__link" href="#">
                                            <img class="gas-block-shop-catalog__image" src="https://picsum.photos/seed/gas-shop-1/480/320" alt="Abonnement annuel" loading="lazy" decoding="async">
                                        <h3 class="gas-block-shop-catalog__title">Abonnement annuel</h3>
                                            <p class="gas-block-shop-catalog__price">45.00 CHF</p>
                                                                <span class="gas-button gas-button--primary">Voir le produit</span>
                                    </a>
            </article>
                                <article class="gas-block-shop-catalog__item">
                <a class="gas-block-shop-catalog__link" href="#">
                                            <img class="gas-block-shop-catalog__image" src="https://picsum.photos/seed/gas-shop-2/480/320" alt="Carnet de dix entrées" loading="lazy" decoding="async">
                                        <h3 class="gas-block-shop-catalog__title">Carnet de dix entrées</h3>
                                            <p class="gas-block-shop-catalog__price">90.00 CHF</p>
                                                                <span class="gas-button gas-button--primary">Voir le produit</span>
                                    </a>
            </article>
                                <article class="gas-block-shop-catalog__item">
                <a class="gas-block-shop-catalog__link" href="#">
                                            <img class="gas-block-shop-catalog__image" src="https://picsum.photos/seed/gas-shop-3/480/320" alt="Bon cadeau découverte" loading="lazy" decoding="async">
                                        <h3 class="gas-block-shop-catalog__title">Bon cadeau découverte</h3>
                                            <p class="gas-block-shop-catalog__price">30.00 CHF</p>
                                                                <span class="gas-button gas-button--primary">Voir le produit</span>
                                    </a>
            </article>
            </div>
</section>
</div>

variante : grid-2

Abonnement annuel

45.00 CHF

Carnet de dix entrées

90.00 CHF

Bon cadeau découverte

30.00 CHF

Voir le HTML rendu

<div id="sample_shop_catalog_001" class="gas-block-anchor" data-gas-block-id="sample_shop_catalog_001"><section class="gas-block-shop-catalog gas-block-shop-catalog--grid-2" data-block-type="shop_catalog">
    <div class="gas-block-shop-catalog__inner">
                                <article class="gas-block-shop-catalog__item">
                <a class="gas-block-shop-catalog__link" href="#">
                                            <img class="gas-block-shop-catalog__image" src="https://picsum.photos/seed/gas-shop-1/480/320" alt="Abonnement annuel" loading="lazy" decoding="async">
                                        <h3 class="gas-block-shop-catalog__title">Abonnement annuel</h3>
                                            <p class="gas-block-shop-catalog__price">45.00 CHF</p>
                                                                <span class="gas-button gas-button--primary">Voir le produit</span>
                                    </a>
            </article>
                                <article class="gas-block-shop-catalog__item">
                <a class="gas-block-shop-catalog__link" href="#">
                                            <img class="gas-block-shop-catalog__image" src="https://picsum.photos/seed/gas-shop-2/480/320" alt="Carnet de dix entrées" loading="lazy" decoding="async">
                                        <h3 class="gas-block-shop-catalog__title">Carnet de dix entrées</h3>
                                            <p class="gas-block-shop-catalog__price">90.00 CHF</p>
                                                                <span class="gas-button gas-button--primary">Voir le produit</span>
                                    </a>
            </article>
                                <article class="gas-block-shop-catalog__item">
                <a class="gas-block-shop-catalog__link" href="#">
                                            <img class="gas-block-shop-catalog__image" src="https://picsum.photos/seed/gas-shop-3/480/320" alt="Bon cadeau découverte" loading="lazy" decoding="async">
                                        <h3 class="gas-block-shop-catalog__title">Bon cadeau découverte</h3>
                                            <p class="gas-block-shop-catalog__price">30.00 CHF</p>
                                                                <span class="gas-button gas-button--primary">Voir le produit</span>
                                    </a>
            </article>
            </div>
</section>
</div>

variante : grid-4

Abonnement annuel

45.00 CHF

Carnet de dix entrées

90.00 CHF

Bon cadeau découverte

30.00 CHF

Voir le HTML rendu

<div id="sample_shop_catalog_001" class="gas-block-anchor" data-gas-block-id="sample_shop_catalog_001"><section class="gas-block-shop-catalog gas-block-shop-catalog--grid-4" data-block-type="shop_catalog">
    <div class="gas-block-shop-catalog__inner">
                                <article class="gas-block-shop-catalog__item">
                <a class="gas-block-shop-catalog__link" href="#">
                                            <img class="gas-block-shop-catalog__image" src="https://picsum.photos/seed/gas-shop-1/480/320" alt="Abonnement annuel" loading="lazy" decoding="async">
                                        <h3 class="gas-block-shop-catalog__title">Abonnement annuel</h3>
                                            <p class="gas-block-shop-catalog__price">45.00 CHF</p>
                                                                <span class="gas-button gas-button--primary">Voir le produit</span>
                                    </a>
            </article>
                                <article class="gas-block-shop-catalog__item">
                <a class="gas-block-shop-catalog__link" href="#">
                                            <img class="gas-block-shop-catalog__image" src="https://picsum.photos/seed/gas-shop-2/480/320" alt="Carnet de dix entrées" loading="lazy" decoding="async">
                                        <h3 class="gas-block-shop-catalog__title">Carnet de dix entrées</h3>
                                            <p class="gas-block-shop-catalog__price">90.00 CHF</p>
                                                                <span class="gas-button gas-button--primary">Voir le produit</span>
                                    </a>
            </article>
                                <article class="gas-block-shop-catalog__item">
                <a class="gas-block-shop-catalog__link" href="#">
                                            <img class="gas-block-shop-catalog__image" src="https://picsum.photos/seed/gas-shop-3/480/320" alt="Bon cadeau découverte" loading="lazy" decoding="async">
                                        <h3 class="gas-block-shop-catalog__title">Bon cadeau découverte</h3>
                                            <p class="gas-block-shop-catalog__price">30.00 CHF</p>
                                                                <span class="gas-button gas-button--primary">Voir le produit</span>
                                    </a>
            </article>
            </div>
</section>
</div>

variante : list

Abonnement annuel

45.00 CHF

Carnet de dix entrées

90.00 CHF

Bon cadeau découverte

30.00 CHF