<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Archives des RGPD dans wordpress - st9ph.fr</title>
	<atom:link href="https://st9ph.fr/tag/rgpd-dans-wordpress/feed/" rel="self" type="application/rss+xml" />
	<link>https://st9ph.fr/tag/rgpd-dans-wordpress/</link>
	<description>la boite à outils numériques</description>
	<lastBuildDate>Tue, 31 Mar 2026 17:02:54 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://st9ph.fr/wp-content/uploads/2026/02/cropped-ico-fav-32x32.png</url>
	<title>Archives des RGPD dans wordpress - st9ph.fr</title>
	<link>https://st9ph.fr/tag/rgpd-dans-wordpress/</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">199087513</site>	<item>
		<title>WordPress &#124; Dépoussiérons la méthode d&#8217;abonnement</title>
		<link>https://st9ph.fr/wordpress-depoussierons-la-methode-dabonnement/</link>
					<comments>https://st9ph.fr/wordpress-depoussierons-la-methode-dabonnement/#respond</comments>
		
		<dc:creator><![CDATA[St9ph]]></dc:creator>
		<pubDate>Thu, 12 Feb 2026 16:06:03 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[🛠️ création de sites]]></category>
		<category><![CDATA[🌐 public]]></category>
		<category><![CDATA[Formulaire RGPD]]></category>
		<category><![CDATA[RGPD dans wordpress]]></category>
		<category><![CDATA[s'abonner dans wordpress]]></category>
		<category><![CDATA[ultimate member wordpress]]></category>
		<guid isPermaLink="false">https://st9ph.fr/?p=34446</guid>

					<description><![CDATA[<p>🚣🏻 C&#8217;est une telle galère de s&#8217;abonner simplement sur un site WordPress par défaut que la plupart de vos visiteurs qui aimeraient sauter le pas vont se décourager en constatant que c&#8217;est trop d&#8217;effort ! On fait d&#8217;abord un petit tour de galère et après, on installe un petit plug-in sympa qui va rendre le ... <a title="WordPress &#124; Dépoussiérons la méthode d&#8217;abonnement" class="read-more" href="https://st9ph.fr/wordpress-depoussierons-la-methode-dabonnement/" aria-label="En savoir plus sur WordPress &#124; Dépoussiérons la méthode d&#8217;abonnement">Lire la suite</a></p>
<p>L’article <a href="https://st9ph.fr/wordpress-depoussierons-la-methode-dabonnement/">WordPress | Dépoussiérons la méthode d&#8217;abonnement</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="has-large-font-size"><img decoding="async" width="30" height="28" class="wp-image-33540" style="width: 30px;" src="https://st9ph.fr/wp-content/uploads/2026/01/ico-Wordpress-wp.jpg" alt=""><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">WordPress</mark> | Dépoussiérons la méthode d&#8217;abonnement 🧹</p>



<p class="has-base-2-background-color has-background">🚣🏻 C&#8217;est une telle galère de <strong>s&#8217;abonner simplement</strong> sur un site WordPress par défaut que la plupart de vos visiteurs qui aimeraient sauter le pas <strong>vont se décourager en constatant que c&#8217;est trop d&#8217;effort </strong>!</p>



<p>On fait d&#8217;abord <strong>un petit tour de galère</strong> et après, on installe <strong>un petit plug-in sympa</strong> qui va rendre le processus beaucoup plus &#8220;normal&#8221;.</p>



<!-- =====================================================
     BADGE DE LECTURE + BADGE "DÉJÀ LU"
     - % de lecture en temps réel
     - Devient vert à 75 %
     - Mémorisé en session (déjà lu)
     ===================================================== -->

<!-- ✅ STRUCTURE HTML DU BADGE -->
<div id="readBadge">
  📖 Lecture : 0 %
</div>

<style>
/* ===============================
   STYLE DU BADGE
   =============================== */
#readBadge {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #111;
  color: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 9999;
}

/* Badge visible */
#readBadge.show {
  opacity: 1;
  transform: translateY(0);
}

/* Badge vert = article lu */
#readBadge.read {
  background: #188038;
}
</style>

<script>
/* ===============================
   LOGIQUE JAVASCRIPT
   =============================== */
(function () {

  const badge = document.getElementById("readBadge");

  // ✅ Clé unique par page (URL)
  const storageKey = "articleLu_" + window.location.pathname;

  // ✅ Si déjà lu dans la session
  if (sessionStorage.getItem(storageKey)) {
    badge.classList.add("show", "read");
    badge.innerText = "✅ Article déjà lu";
    return; // on ne recalcule plus le scroll
  }

  let badgeShown = false;
  let articleMarkedAsRead = false;

  window.addEventListener("scroll", function () {

    const scrollTop = window.scrollY;
    const docHeight = document.body.scrollHeight - window.innerHeight;
    const percent = Math.round((scrollTop / docHeight) * 100);

    // Mise à jour du texte
    badge.innerText = "📖 Lecture : " + percent + " %";

    // Affichage du badge dès 10 %
    if (percent >= 10 && !badgeShown) {
      badge.classList.add("show");
      badgeShown = true;
    }

    // ✅ Article considéré comme lu à 75 %
    if (percent >= 75 && !articleMarkedAsRead) {
      badge.classList.add("read");
      badge.innerText = "✅ Article lu à " + percent + " %";
      sessionStorage.setItem(storageKey, "true");
      articleMarkedAsRead = true;
    }

  });

})();
</script>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👇🏻 On va passer de ça &#8230;.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img fetchpriority="high" decoding="async" width="334" height="479" src="https://st9ph.fr/wp-content/uploads/2026/02/image-60.png" alt="" class="wp-image-34457" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-60.png 334w, https://st9ph.fr/wp-content/uploads/2026/02/image-60-209x300.png 209w" sizes="(max-width: 334px) 100vw, 334px" /></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>&#8230; à ça ! 👇🏻</p>



<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/image-61.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img decoding="async" width="233" height="211" src="https://st9ph.fr/wp-content/uploads/2025/12/IA.png" alt="" class="wp-image-31733" style="width:79px;height:auto"/></figure>
</div>


<p class="has-small-font-size">Part d&#8217;IA /5 dans cet article</p>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<div class="wp-block-columns has-base-2-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div style="gap: 20px; " class="ub-star-rating ub-star-rating-text-top ub-star-rating-align-left wp-block-ub-star-rating-block" id="ub-star-rating-e723c5cc-ad2c-4085-9f7c-95a89e44fcdb">
			<div class="ub-star-outer-container" style="justify-content: flex-start; ">
				<div class="ub-star-inner-container"><div class=""><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-e723c5cc-ad2c-4085-9f7c-95a89e44fcdb-0"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star0" mask="url(#ub_star_rating_filter-e723c5cc-ad2c-4085-9f7c-95a89e44fcdb-0)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-e723c5cc-ad2c-4085-9f7c-95a89e44fcdb-1"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star1" mask="url(#ub_star_rating_filter-e723c5cc-ad2c-4085-9f7c-95a89e44fcdb-1)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-e723c5cc-ad2c-4085-9f7c-95a89e44fcdb-2"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star2" mask="url(#ub_star_rating_filter-e723c5cc-ad2c-4085-9f7c-95a89e44fcdb-2)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-e723c5cc-ad2c-4085-9f7c-95a89e44fcdb-3"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star3" mask="url(#ub_star_rating_filter-e723c5cc-ad2c-4085-9f7c-95a89e44fcdb-3)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-e723c5cc-ad2c-4085-9f7c-95a89e44fcdb-4"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star4" mask="url(#ub_star_rating_filter-e723c5cc-ad2c-4085-9f7c-95a89e44fcdb-4)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg></div></div>
			</div><div class="ub-review-text" style="text-align: left; ">♨️ Sources</div>
		</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div style="gap: 20px; " class="ub-star-rating ub-star-rating-text-top ub-star-rating-align-left wp-block-ub-star-rating-block" id="ub-star-rating-5438db10-5cdc-4301-9363-d36325d61496">
			<div class="ub-star-outer-container" style="justify-content: flex-start; ">
				<div class="ub-star-inner-container"><div class=""><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-5438db10-5cdc-4301-9363-d36325d61496-0"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star0" mask="url(#ub_star_rating_filter-5438db10-5cdc-4301-9363-d36325d61496-0)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-5438db10-5cdc-4301-9363-d36325d61496-1"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star1" mask="url(#ub_star_rating_filter-5438db10-5cdc-4301-9363-d36325d61496-1)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-5438db10-5cdc-4301-9363-d36325d61496-2"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star2" mask="url(#ub_star_rating_filter-5438db10-5cdc-4301-9363-d36325d61496-2)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-5438db10-5cdc-4301-9363-d36325d61496-3"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star3" mask="url(#ub_star_rating_filter-5438db10-5cdc-4301-9363-d36325d61496-3)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-5438db10-5cdc-4301-9363-d36325d61496-4"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star4" mask="url(#ub_star_rating_filter-5438db10-5cdc-4301-9363-d36325d61496-4)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg></div></div>
			</div><div class="ub-review-text" style="text-align: left; ">🖼️ Images</div>
		</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div style="gap: 20px; " class="ub-star-rating ub-star-rating-text-top ub-star-rating-align-left wp-block-ub-star-rating-block" id="ub-star-rating-389c0038-cbd9-4906-abab-26fdec754ec7">
			<div class="ub-star-outer-container" style="justify-content: flex-start; ">
				<div class="ub-star-inner-container"><div class=""><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-389c0038-cbd9-4906-abab-26fdec754ec7-0"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star0" mask="url(#ub_star_rating_filter-389c0038-cbd9-4906-abab-26fdec754ec7-0)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-389c0038-cbd9-4906-abab-26fdec754ec7-1"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star1" mask="url(#ub_star_rating_filter-389c0038-cbd9-4906-abab-26fdec754ec7-1)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-389c0038-cbd9-4906-abab-26fdec754ec7-2"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star2" mask="url(#ub_star_rating_filter-389c0038-cbd9-4906-abab-26fdec754ec7-2)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-389c0038-cbd9-4906-abab-26fdec754ec7-3"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star3" mask="url(#ub_star_rating_filter-389c0038-cbd9-4906-abab-26fdec754ec7-3)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-389c0038-cbd9-4906-abab-26fdec754ec7-4"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star4" mask="url(#ub_star_rating_filter-389c0038-cbd9-4906-abab-26fdec754ec7-4)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg></div></div>
			</div><div class="ub-review-text" style="text-align: left; ">✒️Contenu</div>
		</div></div>
</div>
</div>
</div>



<div class="wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-94bc23d7 wp-block-group-is-layout-flex">
<p>⏱️Temps de lecture :</p>


<div class="wp-elements-2660b74cdd79da9184a09a62f3b8f226 wp-block-post-time-to-read has-text-color has-accent-color">22–33 minutes</div>


<p>|</p>


<div class="wp-block-post-time-to-read">5 151 mots</div>


<p>|</p>



<p class="has-accent-color has-text-color has-link-color wp-elements-f8515b49564e2f8ad2c183e4ed182d7c">🗓️ dernière modification le</p>


<div class="has-link-color wp-block-post-date__modified-date wp-elements-c7e6b51b55b0dff84108436fc6f3823e wp-block-post-date has-text-color has-accent-color"><time datetime="2026-03-31T19:02:54+02:00">31 mars  2026</time></div></div>


				<div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-6d59fd40      "
					data-scroll= "1"
					data-offset= "30"
					style=""
				>
				<div class="uagb-toc__wrap">
						<div class="uagb-toc__title">
							au menu :						</div>
																						<div class="uagb-toc__list-wrap ">
						<ol class="uagb-toc__list"><li class="uagb-toc__list"><a href="#la-procédure-normale" class="uagb-toc-link__trigger">La procédure &quot;normale&quot;</a><li class="uagb-toc__list"><a href="#utiliser-ultimate-member" class="uagb-toc-link__trigger">Utiliser ©Ultimate Member</a><ul class="uagb-toc__list"><li class="uagb-toc__list"><a href="#21-installation-et-présentation-des-4-pages-support" class="uagb-toc-link__trigger">🔹2.1 | Installation et présentation des 4 pages support</a><li class="uagb-toc__list"><li class="uagb-toc__list"><a href="#22-personnalisations-de-base" class="uagb-toc-link__trigger">🔹2.2 |Personnalisations de base</a></li></ul></li><li class="uagb-toc__list"><a href="#adaptation-rgpd-du-formulaire" class="uagb-toc-link__trigger">Adaptation RGPD du formulaire</a></ul></ol>					</div>
									</div>
				</div>
			


<style>
.chapter-title {
  display: flex;
  align-items: stretch;
  margin: 1.8rem 0;
}

/* Numéro */
.chapter-number {
  background: #1e73be;
  color: #fff;
  font-weight: 700;
  font-size: 3rem;
  padding: 0 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 0 0 10px;
}

/* Contenu */
.chapter-content {
  padding: 0.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 4px solid #1e73be;
}

/* H2 avec logo */
.chapter-content h2 {
  margin: 0;
  font-size: 2.05rem;
  font-weight: 700;
  color: #1e73be;
  display: flex;
  align-items: center;
  gap: 0.6rem; /* espace logo / texte */
}

/* Logo carré */
.chapter-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Sous-titre */
.chapter-subtitle {
  margin-top: 0.35rem;
  font-style: italic;
  color: #555;
  font-size: 0.95rem;
}
</style>

<div class="chapter-title">
  <div class="chapter-number">1</div>
  <div class="chapter-content">
    <h2>
      <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-ico-sansTxt.png"
           alt=""
           class="chapter-icon">
      La procédure &#8220;normale&#8221;
    </h2>
    <p class="chapter-subtitle">en 5 étapes un peu &#8220;galère&#8221;</p>
  </div>
</div>



<p>La procédure &#8220;par défaut&#8221; passe par 5 étapes dont la dernière est assez déconcertante :</p>



<p>➡️ En préalable, <strong>vérifiez</strong> dans <strong>Réglages &gt; Général</strong> que <strong>tout le monde peut s&#8217;inscrire</strong> (avec le statut d&#8217;abonné) :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="474" height="139" src="https://st9ph.fr/wp-content/uploads/2026/02/image-93.png" alt="" class="wp-image-34521" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-93.png 474w, https://st9ph.fr/wp-content/uploads/2026/02/image-93-300x88.png 300w" sizes="auto, (max-width: 474px) 100vw, 474px" /></figure>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">


<p class="has-medium-font-size"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"><strong>Prévoir un lien</strong></mark> pour permettre de s&#8217;abonner (mais jusque là, tout est normal)</p>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:15%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="121" height="125" src="https://st9ph.fr/wp-content/uploads/2026/02/image-62.png" alt="" class="wp-image-34459"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>C&#8217;est par un bloc Gutemberg que vous pourrez  procurer un lien, soit :</p>



<ul class="wp-block-list">
<li>dans le <strong>bandeau latéral</strong> ➡️  Apparence &gt; Widget &gt; Sidebar</li>



<li>Dans<strong> le footer</strong> ➡️Apparence &gt; Personnaliser &gt; 🖍️ Footer</li>
</ul>



<p>💡<em> Dans les deux, ça peut être pas mal aussi.</em></p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">


<p class="has-medium-font-size"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"><strong>Cliquer dessus</strong></mark> puis sur &#8220;Inscription&#8221;</p>
</div>



<p>👉🏻 Il faut déjà le voir en bas à gauche !</p>



<p class="has-base-2-background-color has-background">🙄 Il est probable que la plupart de <strong>vos visiteurs vont rebondir</strong>, ne pouvant pas donner <strong>d&#8217;identifiant et de mot de passe </strong>tout en pensant que le lien était mal intitulé et <strong>ne concernait que ceux ayant déjà un compte</strong>.</p>



<p class="has-contrast-color has-text-color has-link-color wp-elements-8e5f71a4f133c62e17b4bfb5f0578182">✅ Mais pour ceux qui ont le coup d&#8217;œil et de l&#8217;abnégation, ce n&#8217;est que le début de l&#8217;aventure !</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:270px">
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="334" height="479" src="https://st9ph.fr/wp-content/uploads/2026/02/image-60.png" alt="" class="wp-image-34457" style="width:243px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-60.png 334w, https://st9ph.fr/wp-content/uploads/2026/02/image-60-209x300.png 209w" sizes="auto, (max-width: 334px) 100vw, 334px" /></figure>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">


<p class="has-accent-color has-text-color has-link-color has-medium-font-size wp-elements-3fd8a871d167a75b7c4da3ae8ab97a5d">Choisir un identifiant et donner son adresse mail</p>
</div>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="334" height="546" src="https://st9ph.fr/wp-content/uploads/2026/02/image-63.png" alt="" class="wp-image-34461" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-63.png 334w, https://st9ph.fr/wp-content/uploads/2026/02/image-63-184x300.png 184w" sizes="auto, (max-width: 334px) 100vw, 334px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/image-65.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">


<p class="has-accent-color has-text-color has-link-color has-medium-font-size wp-elements-f47c6d65eaa67c659592018b726c031c">Se rendre sur sa boite mail et cliquer sur le lien d&#8217;activation</p>
</div>



<p>👉🏻 Mais, là, c&#8217;est plutôt normal <strong>pour sécuriser</strong>. Notre plug-in le fera aussi.</p>
</div>
</div>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="572" height="204" src="https://st9ph.fr/wp-content/uploads/2026/02/image-66.png" alt="" class="wp-image-34464" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-66.png 572w, https://st9ph.fr/wp-content/uploads/2026/02/image-66-300x107.png 300w" sizes="auto, (max-width: 572px) 100vw, 572px" /></figure>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">


<p class="has-accent-color has-text-color has-link-color has-medium-font-size wp-elements-60f6413073f2d23fab0aa371c7762a51">Choisir son mot de passe</p>
</div>



<p>👉🏻 Bon, là aussi, c&#8217;est normal.</p>


<div style="border: 3px solid var(--accent); border-radius: 0%; background-color: var(--contrast-3); " class="ub-styled-box ub-bordered-box wp-block-ub-styled-box" id="ub-styled-box-6cd1ac87-33be-49e9-a10b-572fc3e1fb09">
<p id="ub-styled-box-bordered-content-">🔒 Pour rappel, <strong>un bon mot de passe</strong>, c&#8217;est :</p>



<ul class="wp-block-list">
<li>minimum <strong>12 caractères</strong></li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">aA</mark></strong> Un mélange <strong>majuscules / minuscules</strong></li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">a1</mark></strong> Un <strong>mélange alphanumérique </strong>(lettres &amp; nombres)</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">#^</mark></strong> des <strong>caractères spéciaux</strong> </li>
</ul>


</div>


<ul class="wp-block-list">
<li>Vous pouvez <strong>générer un mot de passe </strong>(merci le gestionnaire de mot de passe qui va proposer de le mémoriser, même si c&#8217;est moyen point de vue sécurité).</li>



<li>Vous pouvez <strong>définir librement votre mot de passe</strong>, mais, là, évitez de reprendre toujours le même.</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/image-67.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/image-68.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>Le mot de passe &#8220;<em>123Soleil!</em>&#8221; est considéré par <img loading="lazy" decoding="async" width="19" height="18" class="wp-image-33542" style="width: 19px;" src="https://st9ph.fr/wp-content/uploads/2026/01/wp-ico.jpg" alt="">WordPress comme étant ❌&#8221;<strong>faible</strong>&#8221; </p>



<p>La plupart des <strong>scripts de craquage</strong> de mots de passe fonctionnent sur <strong>l&#8217;itération</strong> (ils testent tous les caractères les uns après les autres) Ca fait :</p>



<ul class="wp-block-list">
<li><strong>26 possibilités</strong> pour l&#8217;alpha </li>



<li><strong>26 x 26</strong> soit 676 si vous mélangez majuscules et minuscules</li>



<li><strong>dix fois</strong> plus si vous mixez avec des chiffres</li>



<li><strong>1,7 million </strong>si vous mixez avec un caractère spécial</li>
</ul>



<p></p>



<p>&#8230; et ce, pour chaque caractère !</p>



<p class="has-base-2-background-color has-background">👉🏻 Notons que c&#8217;est à peu près le nombre d&#8217;opérations qu&#8217;un 🖥️micro-processeur moyen peut<strong> traiter à la minute.</strong> <strong>Exponentiel 10</strong> (pour mon nombre de caractères), cela lui prendra déjà <strong>un bon mois</strong> pour le trouver.</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>⚠️ C&#8217;est à cette étape de connexion que rien ne va plus ! C&#8217;est incompréhensible mais <img loading="lazy" decoding="async" width="19" height="18" class="wp-image-33542" style="width: 19px;" src="https://st9ph.fr/wp-content/uploads/2026/01/wp-ico.jpg" alt="">WordPress va <strong>vous envoyer vers le backoffice</strong> !</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="417" height="194" src="https://st9ph.fr/wp-content/uploads/2026/02/image-70.png" alt="" class="wp-image-34473" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-70.png 417w, https://st9ph.fr/wp-content/uploads/2026/02/image-70-300x140.png 300w" sizes="auto, (max-width: 417px) 100vw, 417px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/image-69.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>
</div>



<p class="has-text-align-center has-medium-font-size">😗 C&#8217;est là que vous allez perdre les derniers de vos plus courageux visiteurs qui voulaient s&#8217;abonner !</p>



<style>
.chapter-title {
  display: flex;
  align-items: stretch;
  margin: 1.7rem 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.chapter-number {
  background: #1e73be;
  color: #fff;
  font-weight: 700;
  font-size: 2.8rem;
  padding: 0 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chapter-content {
  padding: 1.3rem 1.5rem;
  width: 100%;
}

/* Ligne titre + logo */
.chapter-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

/* Logo carré */
.chapter-logo {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.chapter-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* H2 */
.chapter-content h2 {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 700;
  color: #1e73be; /* personnalisable */
}

/* Puces */
.chapter-points {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.chapter-points li {
  margin-bottom: 0.35rem;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.45;
}

.chapter-points li::before {
  content: "🔹 ";
}
</style>

<div class="chapter-title">
  <div class="chapter-number">2</div>

  <div class="chapter-content">
    <div class="chapter-heading">
      <a class="chapter-logo" href="https://st9ph.fr" target="_blank" rel="noopener">
        <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/logo-ultimateMember.jpg">
      </a>

      <h2>Utiliser ©Ultimate Member</h2>
    </div>

    <ul class="chapter-points">
      <li>les 4 pages de formulaires (sans &#8220;members&#8221; que je n&#8217;ai pas retenue)</li>
      <li>modifications / personnalisations de base</li>
    </ul>
  </div>
</div>



<h3 class="wp-block-heading" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">2.1 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>&nbsp;Installation et présentation des 4 pages support</strong></h3>



<div class="bloc-attention">
  ❌ cette partie est <strong>hors programme épreuve E5 B</strong> &#8211; pour votre connaissance personnelle
</div>

<style>
.bloc-attention {
  border-left: 4px solid #dc2626;
  background: #fff1f1;
  padding: 12px 18px;
  margin: 20px 0;
  font-size: 15px;
  color: #0f172a;
  border-radius: 4px;
  font-family: Arial, sans-serif;
}
</style>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="549" height="165" src="https://st9ph.fr/wp-content/uploads/2026/02/image-71.png" alt="" class="wp-image-34476" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-71.png 549w, https://st9ph.fr/wp-content/uploads/2026/02/image-71-300x90.png 300w" sizes="auto, (max-width: 549px) 100vw, 549px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><ul style="padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; column-count: 1; --ub-list-mobile-column-count: 1; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-49073101-352f-475c-a3db-e9fdc070bb44">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-cc0a8783-8f34-480d-80e4-5417d3f9b201">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong><mark class="has-inline-color has-accent-color">Extensions </mark></strong>&gt; <strong>Ajouter</strong></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-3b581060-a0c1-48c9-bd22-eaea03d61ec3">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text">🔎 <strong>Rechercher </strong>&#8220;<em>Ultimate Members</em>&#8220;</span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-ffddc4dc-e285-4b77-8bcf-8ae786a4dab1">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text">⬛ <strong>Installer Maintenant</strong></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-37be904d-d320-4ee2-9f47-4eb09dd233d7">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text">⬛ <strong>Activer</strong></span>
			</div>
			
		</li>
</ul></div>
</div>



<p>➡️ Le plug-in <a href="https://ultimatemember.com/" target="_blank" rel="noreferrer noopener">Ultimate Member</a> vous demandera d&#8217;<strong>installer 4 pages</strong> &#8211; ✅ <strong>Accepter</strong>. Il s&#8217;agit de :</p>


<ul style="padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23ar(--accent)&quot; d=&quot;M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM294.6 135.1l99.9 107.1c3.5 3.8 5.5 8.7 5.5 13.8s-2 10.1-5.5 13.8L294.6 376.9c-4.2 4.5-10.1 7.1-16.3 7.1C266 384 256 374 256 361.7l0-57.7-96 0c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32l96 0 0-57.7c0-12.3 10-22.3 22.3-22.3c6.2 0 12.1 2.6 16.3 7.1z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; column-count: 1; --ub-list-mobile-column-count: 1; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-24ea2179-0351-4356-8c1c-12ec7b28cd4b">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23ar(--accent)&quot; d=&quot;M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM294.6 135.1l99.9 107.1c3.5 3.8 5.5 8.7 5.5 13.8s-2 10.1-5.5 13.8L294.6 376.9c-4.2 4.5-10.1 7.1-16.3 7.1C266 384 256 374 256 361.7l0-57.7-96 0c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32l96 0 0-57.7c0-12.3 10-22.3 22.3-22.3c6.2 0 12.1 2.6 16.3 7.1z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-6673fb6c-3b5a-400e-94ce-5ff84b4aceaf">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="var(--accent)" d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM294.6 135.1l99.9 107.1c3.5 3.8 5.5 8.7 5.5 13.8s-2 10.1-5.5 13.8L294.6 376.9c-4.2 4.5-10.1 7.1-16.3 7.1C266 384 256 374 256 361.7l0-57.7-96 0c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32l96 0 0-57.7c0-12.3 10-22.3 22.3-22.3c6.2 0 12.1 2.6 16.3 7.1z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong><mark class="has-inline-color has-accent-color">Compte </mark></strong>(🌐 <em><mark class="has-inline-color has-accent-color">slug :</mark></em>  /account/) pour la gestion des paramètres utilisateur.</span>
			</div>
			
		</li>
</ul>


<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>🆔 Gestion des <strong>données personnelles</strong> :</li>
</ul>



<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/image-72.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>🔐 modification du <strong>mot de passe</strong></li>
</ul>



<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/image-73.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>👀 Visibilité du profil et RGPD</li>
</ul>



<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/image-74.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>
</div>



<p>👉🏻 C&#8217;est un <strong>super outil de Selfcare</strong> qui permettra à votre nouvel abonné de <strong>gérer son compte en toute autonomie</strong>. Elle contient en plus un paramètre de <strong>téléchargement des données</strong> (droit d&#8217;accès RGPD)</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/image-75.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👈🏻 <strong>L&#8217;administrateur </strong>du site <strong>recevra une demande </strong>dans le backoffice et pourra <strong>générer le fichier</strong> à envoyer au demandeur.</p>



<p class="has-base-2-background-color has-background">ℹ️ C&#8217;est à la fois<strong> un gain de temps considérable</strong> et une <strong>conformité </strong>demandée par  <img loading="lazy" decoding="async" width="27" height="12" class="wp-image-33220" style="width: 27px;" src="https://st9ph.fr/wp-content/uploads/2025/01/marianne.jpg" alt=""> <a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2959/preview/pdf/2954" target="_blank" rel="noreferrer noopener">la réglementation sur la protection des données</a>.</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/image-76.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>Le fichier est d&#8217;une extrême précision :</p>



<ul class="wp-block-list">
<li>Les sessions et leur durée</li>
</ul>



<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/image-77.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->



<ul class="wp-block-list">
<li>les activités une par une</li>
</ul>



<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/image-78.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>
</div>



<ul class="wp-block-list">
<li>les pages visitées, la durée de visite, les rebonds &#8230;</li>
</ul>


<ul style="padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23ar(--accent)&quot; d=&quot;M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM294.6 135.1l99.9 107.1c3.5 3.8 5.5 8.7 5.5 13.8s-2 10.1-5.5 13.8L294.6 376.9c-4.2 4.5-10.1 7.1-16.3 7.1C266 384 256 374 256 361.7l0-57.7-96 0c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32l96 0 0-57.7c0-12.3 10-22.3 22.3-22.3c6.2 0 12.1 2.6 16.3 7.1z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; column-count: 1; --ub-list-mobile-column-count: 1; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-8bafa52e-9a60-443d-a362-597112890186">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23ar(--accent)&quot; d=&quot;M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM294.6 135.1l99.9 107.1c3.5 3.8 5.5 8.7 5.5 13.8s-2 10.1-5.5 13.8L294.6 376.9c-4.2 4.5-10.1 7.1-16.3 7.1C266 384 256 374 256 361.7l0-57.7-96 0c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32l96 0 0-57.7c0-12.3 10-22.3 22.3-22.3c6.2 0 12.1 2.6 16.3 7.1z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-a7d42874-cd64-489b-977f-a6666e06554d">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="var(--accent)" d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM294.6 135.1l99.9 107.1c3.5 3.8 5.5 8.7 5.5 13.8s-2 10.1-5.5 13.8L294.6 376.9c-4.2 4.5-10.1 7.1-16.3 7.1C266 384 256 374 256 361.7l0-57.7-96 0c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32l96 0 0-57.7c0-12.3 10-22.3 22.3-22.3c6.2 0 12.1 2.6 16.3 7.1z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong><mark class="has-inline-color has-accent-color">Connexion </mark></strong>(🌐 <em><mark class="has-inline-color has-accent-color">slug :</mark></em>  /login/) pour l&#8217;identification.</span>
			</div>
			
		</li>
</ul>


<p>Elle permet :</p>



<ul class="wp-block-list">
<li>De <strong>se connecter </strong>ou <strong>se déconnecter</strong></li>



<li>De <strong>maintenir </strong>l&#8217;état <strong>connecté </strong>(&#8220;se souvenir de moi&#8221;)</li>



<li>De <strong>réinitialiser le mot de passe </strong>en cas d&#8217;oubli</li>



<li>D&#8217;<strong>atteindre</strong> la page &#8220;<strong><em>mon compte</em></strong>&#8221; en état &#8220;déjà connecté&#8221;  </li>
</ul>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👇🏻 Affichage si pas encore connecté</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="721" height="562" src="https://st9ph.fr/wp-content/uploads/2026/02/image-79.png" alt="" class="wp-image-34488" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-79.png 721w, https://st9ph.fr/wp-content/uploads/2026/02/image-79-300x234.png 300w" sizes="auto, (max-width: 721px) 100vw, 721px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👇🏻 Affichage si déjà connecté</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="728" height="424" src="https://st9ph.fr/wp-content/uploads/2026/02/image-80.png" alt="" class="wp-image-34489" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-80.png 728w, https://st9ph.fr/wp-content/uploads/2026/02/image-80-300x175.png 300w" sizes="auto, (max-width: 728px) 100vw, 728px" /></figure>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23ar(--accent)&quot; d=&quot;M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM294.6 135.1l99.9 107.1c3.5 3.8 5.5 8.7 5.5 13.8s-2 10.1-5.5 13.8L294.6 376.9c-4.2 4.5-10.1 7.1-16.3 7.1C266 384 256 374 256 361.7l0-57.7-96 0c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32l96 0 0-57.7c0-12.3 10-22.3 22.3-22.3c6.2 0 12.1 2.6 16.3 7.1z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-af86c96a-0ea2-45a1-94cc-f716bd237f5e">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="var(--accent)" d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM294.6 135.1l99.9 107.1c3.5 3.8 5.5 8.7 5.5 13.8s-2 10.1-5.5 13.8L294.6 376.9c-4.2 4.5-10.1 7.1-16.3 7.1C266 384 256 374 256 361.7l0-57.7-96 0c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32l96 0 0-57.7c0-12.3 10-22.3 22.3-22.3c6.2 0 12.1 2.6 16.3 7.1z"></path></svg>
				</span>
				<span class="ub_list_item_text"> <strong><mark class="has-inline-color has-accent-color">Utilisateur</mark></strong>(🌐 <em><mark class="has-inline-color has-accent-color">slug :</mark></em>  /user/) pour <strong>personnaliser son compte</strong> : <strong>profil, photo, revoir ses commentaires </strong>ou la<strong> liste des ses publications</strong> (si on a un profil autre qu&#8217;abonné pour cette dernière possibilité).</span>
			</div>
			
		</li>


<p></p>



<p>🗨️ Certains aimeront <strong>revoir leurs commentaires</strong> ou <strong>retrouver les réactions </strong>à ceux-ci</p>



<p class="has-text-align-center has-base-2-background-color has-background">👉🏻 Pour ma part, j&#8217;ai <strong>désactivé l&#8217;image de fond </strong>qui était proposé par défaut (comme sur la plupart des réseaux sociaux) mais chacun fait comme il veut.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="788" height="737" src="https://st9ph.fr/wp-content/uploads/2026/02/image-81.png" alt="" class="wp-image-34490" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-81.png 788w, https://st9ph.fr/wp-content/uploads/2026/02/image-81-300x281.png 300w, https://st9ph.fr/wp-content/uploads/2026/02/image-81-768x718.png 768w" sizes="auto, (max-width: 788px) 100vw, 788px" /></figure>
</div>
</div>



<p><style>
.ux-h3-wrapper h3::before {<br />
  content: "🔹2.1";<br />
  position: absolute;<br />
  left: 0;<br />
  top: 0;<br />
  font-weight: 700;<br />
  color: #1e73be;<br />
 }</p>
<p>/* 👉 compteur local à la page */</p>
<p>.ux-h3-wrapper h3 {<br />
  counter-increment: h3section;<br />
  position: relative;<br />
  padding-left: 5.6rem; /* espace pour numéro + barre */<br />
  margin: 2.1rem 0 1.2rem;<br />
  font-size: 1.6rem;<br />
  font-weight: 500;<br />
  line-height: 1.3;<br />
}</p>
<p>/* 👉 Séparateur vertical */<br />
.ux-h3-wrapper h3::after {<br />
  content: "";<br />
  position: absolute;<br />
  left: 4.9rem;          /* juste après le numéro */<br />
  top: 0.15em;<br />
  height: 1.2em;<br />
  width: 4px;            /* épaisseur discrète */<br />
  background-color: #1e73be;<br />
  border-radius: 2px;    /* léger arrondi, élégant */<br />
}<br />
</style></p>



<p>ℹ️ La possibilité de <strong>choisir une photo ou un avatar de profil</strong> plait beaucoup,<strong>ne l&#8217;enlevez pas</strong>. Elle permet aussi de rendre plus vivante votre section commentaires.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="659" height="259" src="https://st9ph.fr/wp-content/uploads/2026/02/image-90.png" alt="" class="wp-image-34507" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-90.png 659w, https://st9ph.fr/wp-content/uploads/2026/02/image-90-300x118.png 300w" sizes="auto, (max-width: 659px) 100vw, 659px" /></figure>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/image-61.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%"><li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23ar(--accent)&quot; d=&quot;M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM294.6 135.1l99.9 107.1c3.5 3.8 5.5 8.7 5.5 13.8s-2 10.1-5.5 13.8L294.6 376.9c-4.2 4.5-10.1 7.1-16.3 7.1C266 384 256 374 256 361.7l0-57.7-96 0c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32l96 0 0-57.7c0-12.3 10-22.3 22.3-22.3c6.2 0 12.1 2.6 16.3 7.1z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-cc1b6c85-9dd9-42b5-a5b2-ff69f34cf41e">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="var(--accent)" d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM294.6 135.1l99.9 107.1c3.5 3.8 5.5 8.7 5.5 13.8s-2 10.1-5.5 13.8L294.6 376.9c-4.2 4.5-10.1 7.1-16.3 7.1C266 384 256 374 256 361.7l0-57.7-96 0c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32l96 0 0-57.7c0-12.3 10-22.3 22.3-22.3c6.2 0 12.1 2.6 16.3 7.1z"></path></svg>
				</span>
				<span class="ub_list_item_text"> <strong><mark class="has-inline-color has-accent-color">Inscription  </mark></strong>(🌐 <em><mark class="has-inline-color has-accent-color">slug :</mark></em>  /register/) pour <strong>S&#8217;abonner</strong></span>
			</div>
			
		</li>


<p>Et c&#8217;est là que nous voulions en venir!</p>



<p class="has-base-2-background-color has-background">🏴‍☠️ Il faudra d&#8217;urgence <strong>renommer le slug </strong> pour <strong>éviter les robots de hackers</strong> (un peu comme le wp-admin pour le répertoire du backoffice). Ne rendons pas la vie trop facile aux pirates.</p>



<p>👉🏻 Pour ma part, <strong>je n&#8217;ai pas activé la page des membres </strong>(une sorte de recueil de tous les abonnés) de peur que cela devienne un forum entre mes étudiants mais vous pouvez le faire pour<strong> créer du lien entre vos abonnés.</strong></p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-base-2-background-color has-background">Pour ce blog, j&#8217;ai choisi de positionner <strong>deux liens dans le sidebar</strong> : &#8220;<em>abonnez-vous</em>&#8221; et &#8220;<em>connexion</em>&#8221; qui conduisent vers les pages <em>Register </em>et <em>Login </em>à partir desquelles il est possible d<strong>&#8216;accéder à toutes les fonctionnalités.</strong> 👉🏻 </p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="358" height="154" src="https://st9ph.fr/wp-content/uploads/2026/02/image-82.png" alt="" class="wp-image-34493" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-82.png 358w, https://st9ph.fr/wp-content/uploads/2026/02/image-82-300x129.png 300w" sizes="auto, (max-width: 358px) 100vw, 358px" /></figure>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="403" height="159" src="https://st9ph.fr/wp-content/uploads/2026/02/image-83.png" alt="" class="wp-image-34494" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-83.png 403w, https://st9ph.fr/wp-content/uploads/2026/02/image-83-300x118.png 300w" sizes="auto, (max-width: 403px) 100vw, 403px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Je reproduis aussi ces deux liens dans le footer en redondance.</p>



<p class="has-base-2-background-color has-background">🛑 La zone du footer est votre dernier espoir de<strong> provoquer un rebond interne</strong>. Par définition, le visiteur qui arrive là <strong>butte sur la bas de page écran</strong>.</p>
</div>
</div>



<p>➡️ Bien sur, <strong>les pages sont personnalisables </strong>et vous aurez aussi à modifier <strong>les contenus des mails</strong> qui sont tous en anglais.</p>



<h3 class="wp-block-heading" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">2.2 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>Personnalisations de base</strong></h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👉🏻 c&#8217;est dans r<strong>églages &gt; Emails</strong> que cela se passe</p>


<ul style="padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; column-count: 1; --ub-list-mobile-column-count: 1; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-d04bc48f-dbba-4702-8f11-f5b7d3362eae">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-ed38d1eb-1cef-475b-9f7e-fa0a6555519a">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text">cliquez sur <img loading="lazy" decoding="async" width="58" height="33" class="wp-image-34497" style="width: 58px" src="https://st9ph.fr/wp-content/uploads/2026/02/UM-gererBouton.jpg" alt=""></span>
			</div>
			
		</li>
</ul>


<p>Le <strong>panneau de contenu du mail </strong>s&#8217;ouvre (ici, l&#8217;email de bienvenue) 👇🏻</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="520" height="233" src="https://st9ph.fr/wp-content/uploads/2026/02/image-84.png" alt="" class="wp-image-34496" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-84.png 520w, https://st9ph.fr/wp-content/uploads/2026/02/image-84-300x134.png 300w" sizes="auto, (max-width: 520px) 100vw, 520px" /></figure>
</div>
</div>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="795" height="508" src="https://st9ph.fr/wp-content/uploads/2026/02/image-85.png" alt="" class="wp-image-34498" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-85.png 795w, https://st9ph.fr/wp-content/uploads/2026/02/image-85-300x192.png 300w, https://st9ph.fr/wp-content/uploads/2026/02/image-85-768x491.png 768w" sizes="auto, (max-width: 795px) 100vw, 795px" /></figure>



<p>⚠️ Conservez les champs <strong>{intitulé} </strong>qui sont des champs personnalisés</p>



<p>➡️ Profitez en pour <strong>ajouter un footer RGPD</strong> :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="726" height="287" src="https://st9ph.fr/wp-content/uploads/2026/02/image-86.png" alt="" class="wp-image-34499" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-86.png 726w, https://st9ph.fr/wp-content/uploads/2026/02/image-86-300x119.png 300w" sizes="auto, (max-width: 726px) 100vw, 726px" /></figure>



<style>
.chapter-title {
  display: flex;
  align-items: stretch;
  margin: 1.7rem 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.chapter-number {
  background: #1e73be;
  color: #fff;
  font-weight: 700;
  font-size: 2.8rem;
  padding: 0 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chapter-content {
  padding: 1.3rem 1.5rem;
  width: 100%;
}

/* Ligne titre + logo */
.chapter-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

/* Logo carré */
.chapter-logo {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.chapter-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* H2 */
.chapter-content h2 {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 700;
  color: #1e73be; /* personnalisable */
}

/* Puces */
.chapter-points {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.chapter-points li {
  margin-bottom: 0.35rem;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.45;
}

.chapter-points li::before {
  content: "🔹 ";
}
</style>

<div class="chapter-title">
  <div class="chapter-number">3</div>

  <div class="chapter-content">
    <div class="chapter-heading">
      <a class="chapter-logo" href="https://st9ph.fr" target="_blank" rel="noopener">
        <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-ico-sansTxt.png" alt="Logo St9ph">
      </a>

      <h2>Adaptation RGPD du formulaire</h2>
    </div>

    <ul class="chapter-points">
      <li>ajout de l&#8217;opt-in (cas à cocher) au formulaire</li>
      <li>ajout d&#8217;un lien vers les CGU à la page</li>
    </ul>
  </div>
</div>



<p>👉🏻 Pour être <img loading="lazy" decoding="async" width="27" height="12" class="wp-image-33220" style="width: 27px;" src="https://st9ph.fr/wp-content/uploads/2025/01/marianne.jpg" alt=""> légal, il faudra ajouter <strong>l&#8217;opt-in des CGU</strong> sur le formulaire sous cette forme :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="294" height="48" src="https://st9ph.fr/wp-content/uploads/2026/02/image-87.png" alt="" class="wp-image-34500"/></figure>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="730" height="525" src="https://st9ph.fr/wp-content/uploads/2026/02/image-88.png" alt="" class="wp-image-34501" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-88.png 730w, https://st9ph.fr/wp-content/uploads/2026/02/image-88-300x216.png 300w" sizes="auto, (max-width: 730px) 100vw, 730px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><ul style="padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; column-count: 1; --ub-list-mobile-column-count: 1; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-a46156fe-9d9e-4230-935d-5fc95581910a">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-53c48d27-4002-4458-99d5-d201a38c179c">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text">Ultimate Member &gt; <strong>Formulaire</strong></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-73b2b88c-f567-4714-9f99-3ae6bd283b87">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Modifier </strong>&#8220;Default Registration&#8221;</span>
			</div>
			
		</li>
</ul>


<p class="has-base-2-background-color has-background">👉🏻 On va <strong>ajouter un champs </strong>sous le dernier (normalement, le mot de passe)</p>


<ul style="padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; column-count: 1; --ub-list-mobile-column-count: 1; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-0e1bdff2-8eb5-4e8a-bf54-ef87b7dbd7a5">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-c0c3e38f-e395-478d-b370-2de073b5fe7b">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Cliquer </strong>sur <strong>+</strong></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-870e3184-5318-4f18-94ec-8c07229883b7">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text">choisir <img loading="lazy" decoding="async" width="77" height="29" class="wp-image-34504" style="width: 77px" src="https://st9ph.fr/wp-content/uploads/2026/02/chekbox-buton.jpg" alt=""></span>
			</div>
			
		</li>
</ul></div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<ul class="wp-block-list">
<li><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Titre</mark> (celui de votre contrôle) ➡️ <strong>qu&#8217;il soit parlant</strong> pour que vous puissiez <strong>le réutiliser facilement</strong></li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Texte d&#8217;aide</mark></strong> (infobulle) apparaitra si l&#8217;utilisateur <strong>hésite à cliquer</strong>.</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Valeur par défaut</mark></strong> (si plusieurs choix et 1 précoché) ➡️ ne nous concerne pas.</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Modifier les choix </mark></strong>➡️ liste de vos choix (ici, un seul)</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Icone </mark></strong>(c&#8217;est juste décoratif)</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Champ obligatoire </mark></strong>➡️ cochez <strong>sans quoi le nouvel abonné</strong> <strong>pourra s&#8217;inscrire sans accepter les CGU</strong></li>



<li>Cliquer sur 🟦 &#8220;<strong>Mettre à jour</strong>&#8220;</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/image-89.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>
</div>



<p>➡️ Il faudra aussi <strong>ajouter un lien vers les cgu</strong> (pour pouvoir les lire avant de les accepter ou non)</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="518" height="643" src="https://st9ph.fr/wp-content/uploads/2026/02/image-91.png" alt="" class="wp-image-34510" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-91.png 518w, https://st9ph.fr/wp-content/uploads/2026/02/image-91-242x300.png 242w" sizes="auto, (max-width: 518px) 100vw, 518px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><ul style="padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; column-count: 1; --ub-list-mobile-column-count: 1; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-97c12216-d29b-4f76-8104-0cfa8bfa7e0c">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-38362872-66cb-4991-874b-838d6a720bdc">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text">Pages &gt; <em>Inscription</em> &gt; <strong>Modifier</strong></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-e319c0bc-3b07-4d2c-b2e3-2c0cec90e90c">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text">Insérer un bloc texte</span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 576 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm16 64h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM64 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm80-176c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V144zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zM160 336c0-8.8 7.2-16 16-16H400c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V336zM272 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM256 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V240zM368 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM352 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V240zM464 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM448 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-a56702be-9bd1-4892-a6da-009c6383bada">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 576 512"><path fill="#000000" d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm16 64h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM64 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm80-176c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V144zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zM160 336c0-8.8 7.2-16 16-16H400c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V336zM272 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM256 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V240zM368 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM352 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V240zM464 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM448 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Saisir </strong>&#8220;<em>Voir les CGU (conditions générales d&#8217;utilisation)</em>&#8220;</span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-dec17cfa-72e0-4e11-96fd-b2541a829e88">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Sélectionner </strong>&#8220;<em>Voir les CGU</em>&#8221; </span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 576 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm16 64h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM64 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm80-176c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V144zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zM160 336c0-8.8 7.2-16 16-16H400c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V336zM272 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM256 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V240zM368 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM352 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V240zM464 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM448 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-96a95a1c-89e3-45ab-b351-73218c4e8c46">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 576 512"><path fill="#000000" d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm16 64h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM64 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm80-176c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V144zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zM160 336c0-8.8 7.2-16 16-16H400c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V336zM272 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM256 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V240zM368 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM352 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V240zM464 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM448 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16z"></path></svg>
				</span>
				<span class="ub_list_item_text">Ctrl + K (ou cliquer sur le chainon)</span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 576 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm16 64h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM64 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm80-176c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V144zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zM160 336c0-8.8 7.2-16 16-16H400c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V336zM272 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM256 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V240zM368 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM352 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V240zM464 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM448 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-4f279946-c273-48ce-905f-8023ffbed549">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 576 512"><path fill="#000000" d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm16 64h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM64 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm80-176c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V144zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zM160 336c0-8.8 7.2-16 16-16H400c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V336zM272 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM256 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V240zM368 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM352 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16V240zM464 128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16zM448 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V240zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Saisir l&#8217;URL</strong> des CGU</span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-a7463db7-c48e-4511-a385-89ac7b11bb71">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text">Valider sur <strong>la flèche</strong> ↩</span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-6efe69ce-c2de-451c-8ea9-33d624d9a623">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Cliquer à nouveau </strong>sur le lien pour développer les options</span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-cc66ceae-6617-457e-9cfb-12a7d916fe30">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>cocher </strong>&#8220;ouvrir dans un nouvel onglet&#8221;</span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-f9e75ef5-c26b-424e-ae6b-4a03d87e0613">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#000000" d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Cliquer </strong>sur 🟦<strong><mark class="has-inline-color has-accent-color">Appliquer</mark></strong></span>
			</div>
			
		</li>
</ul>


<p class="has-base-2-background-color has-background">⚠️ C&#8217;est important qu&#8217;il puisse lire les CGU <strong>dans un nouvel onglet</strong> afin de <strong>ne pas perdre son formulaire </strong>d&#8217;inscription.</p>
</div>
</div>



<p>👇🏻 <strong>Le résultat</strong> :</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="737" height="799" src="https://st9ph.fr/wp-content/uploads/2026/02/image-92.png" alt="" class="wp-image-34513" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-92.png 737w, https://st9ph.fr/wp-content/uploads/2026/02/image-92-277x300.png 277w" sizes="auto, (max-width: 737px) 100vw, 737px" /></figure>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>👉🏻 Vous pouvez tester tout cela sur le site <strong>en vous abonnant </strong>car <strong>c&#8217;est ce plug-in qui gère les comptes</strong> sur st9ph.fr.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%"><div class="yoast-breadcrumbs"><span><span><a href="https://st9ph.fr/">Accueil</a></span> » <span class="breadcrumb_last" aria-current="page">RGPD dans wordpress</span></span></div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">

<div class="wp-block-ub-social-share" id="ub-social-share-34cb1b13-3295-452f-ad1e-918dc902bc11">
			<div class="social-share-icons align-icons-center orientation-icons-row"><a aria-label="linkedin-logo" target="_blank" rel="nofollow" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fst9ph.fr%2Fwordpress-depoussierons-la-methode-dabonnement%2F" class="ub-social-share-linkedin-container" style="border-color: #2867b2; ">
				<span class="social-share-icon ub-social-share-linkedin square" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#ffffff" fill="#ffffff" width="20" height="20" viewbox="0 0 448 512"><path d="M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z"></path></svg></span><span style="">partager</span>
			</a></div>
		</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center"><strong>donnez votre avis</strong> (star ranking) en bas de cette page</p>



<p class="has-text-align-center has-large-font-size">⬇️</p>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-jetpack-repeat-visitor"></div></div>
</div>



<p></p>



			<div class="wp-block-uagb-post-grid uagb-post-grid  uagb-post__image-position-top uagb-post__image-enabled uagb-block-a5f06a1b     uagb-post__items uagb-post__columns-3 is-grid uagb-post__columns-tablet-2 uagb-post__columns-mobile-1 uagb-post__equal-height" data-total="3" style="">

												<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="433" src="https://st9ph.fr/wp-content/uploads/2025/12/embelBlog-1024x493.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/12/embelBlog-1024x493.png 1024w, https://st9ph.fr/wp-content/uploads/2025/12/embelBlog-300x144.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/embelBlog-768x370.png 768w, https://st9ph.fr/wp-content/uploads/2025/12/embelBlog.png 1037w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/" target="_self" rel="bookmark noopener noreferrer">WordPress | trucs et astuces pour embellir vos articles</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-12-15T19:56:51+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					15 décembre 2025				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Aucun commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>WordPress | trucs et astuces pour embellir vos articles ✨ Un petit tour d&#8217;horizon 🌤️&#8230;				</div>
						<div class="uagb-post__text uagb-post__cta wp-block-button">
				<a class="wp-block-button__link uagb-text-link" style="" href="https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/" target="_self" rel="bookmark noopener noreferrer">Lire la suite</a>
			</div>
			
									</article>
																<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/wordpress-un-article-en-partant-de-zero/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="423" src="https://st9ph.fr/wp-content/uploads/2025/12/zero.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/12/zero.png 1004w, https://st9ph.fr/wp-content/uploads/2025/12/zero-300x141.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/zero-768x361.png 768w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/wordpress-un-article-en-partant-de-zero/" target="_self" rel="bookmark noopener noreferrer">WordPress | un article en partant de zéro ?</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-12-04T10:16:03+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					4 décembre 2025				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Aucun commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>WordPress | un article en partant de 0️⃣? 👉🏻 C&#8217;est le pire scénario qui puisse&#8230;				</div>
						<div class="uagb-post__text uagb-post__cta wp-block-button">
				<a class="wp-block-button__link uagb-text-link" style="" href="https://st9ph.fr/wordpress-un-article-en-partant-de-zero/" target="_self" rel="bookmark noopener noreferrer">Lire la suite</a>
			</div>
			
									</article>
																<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/wordpress-methode-habi-et-yoast-seo-synchronises/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="352" src="https://st9ph.fr/wp-content/uploads/2025/11/habi-yoast-EA-1024x400.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/11/habi-yoast-EA-1024x400.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/11/habi-yoast-EA-300x117.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/11/habi-yoast-EA-768x300.jpg 768w, https://st9ph.fr/wp-content/uploads/2025/11/habi-yoast-EA.jpg 1120w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/wordpress-methode-habi-et-yoast-seo-synchronises/" target="_self" rel="bookmark noopener noreferrer">WordPress | Méthode HABI et Yoast SEO synchronisés</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-11-20T20:10:40+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					20 novembre 2025				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Aucun commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>WordPress | Méthode HABI &amp; Yoast Durant l&#8217;épreuve E5B, vous serez amenez à concevoir ou&#8230;				</div>
						<div class="uagb-post__text uagb-post__cta wp-block-button">
				<a class="wp-block-button__link uagb-text-link" style="" href="https://st9ph.fr/wordpress-methode-habi-et-yoast-seo-synchronises/" target="_self" rel="bookmark noopener noreferrer">Lire la suite</a>
			</div>
			
									</article>
																<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/wordpress-blocs-spectra-remarquables/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="705" height="182" src="https://st9ph.fr/wp-content/uploads/2024/12/Capture-decran-2026-01-19-220034.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2024/12/Capture-decran-2026-01-19-220034.jpg 705w, https://st9ph.fr/wp-content/uploads/2024/12/Capture-decran-2026-01-19-220034-300x77.jpg 300w" sizes="auto, (max-width: 705px) 100vw, 705px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/wordpress-blocs-spectra-remarquables/" target="_self" rel="bookmark noopener noreferrer">WordPress | Blocs Spectra remarquables</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2024-12-30T14:17:59+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					30 décembre 2024				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Aucun commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>Spectra est un plug-in (extension) de type Builder (elle permet de concevoir globalement votre blog)&#8230;.				</div>
						<div class="uagb-post__text uagb-post__cta wp-block-button">
				<a class="wp-block-button__link uagb-text-link" style="" href="https://st9ph.fr/wordpress-blocs-spectra-remarquables/" target="_self" rel="bookmark noopener noreferrer">Lire la suite</a>
			</div>
			
									</article>
																<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/wordpress-dompter-astra/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="681" height="102" src="https://st9ph.fr/wp-content/uploads/2024/12/Capture-decran-2026-01-28-190533.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2024/12/Capture-decran-2026-01-28-190533.jpg 681w, https://st9ph.fr/wp-content/uploads/2024/12/Capture-decran-2026-01-28-190533-300x45.jpg 300w" sizes="auto, (max-width: 681px) 100vw, 681px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/wordpress-dompter-astra/" target="_self" rel="bookmark noopener noreferrer">WordPress | Dompter Astra</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2024-12-29T11:16:30+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					29 décembre 2024				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					2 commentaires				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>Astra est un Theme Builder et c&#8217;est le thème imposé pour l&#8217;examen 🖥️ E5B de&#8230;				</div>
						<div class="uagb-post__text uagb-post__cta wp-block-button">
				<a class="wp-block-button__link uagb-text-link" style="" href="https://st9ph.fr/wordpress-dompter-astra/" target="_self" rel="bookmark noopener noreferrer">Lire la suite</a>
			</div>
			
									</article>
																<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/wordpress-fenetres-surgissantes-de-spectra/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="459" src="https://st9ph.fr/wp-content/uploads/2024/12/image-113.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2024/12/image-113.png 923w, https://st9ph.fr/wp-content/uploads/2024/12/image-113-300x153.png 300w, https://st9ph.fr/wp-content/uploads/2024/12/image-113-768x392.png 768w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/wordpress-fenetres-surgissantes-de-spectra/" target="_self" rel="bookmark noopener noreferrer">WordPress | Fenêtres &#8220;surgissantes&#8221; de Spectra</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2024-12-26T14:32:29+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					26 décembre 2024				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Aucun commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>WordPress | Pop Up Spectra 👉🏻 Nouveauté du référenciel 2025, Spectra est un plug-in (extension)&#8230;				</div>
						<div class="uagb-post__text uagb-post__cta wp-block-button">
				<a class="wp-block-button__link uagb-text-link" style="" href="https://st9ph.fr/wordpress-fenetres-surgissantes-de-spectra/" target="_self" rel="bookmark noopener noreferrer">Lire la suite</a>
			</div>
			
									</article>
											</div>
			


<div class="wp-block-uagb-team uagb-team__image-position-left uagb-team__align-left uagb-team__stack-tablet uagb-block-5002ab42"><img decoding="async" class="uagb-team__image-crop-circle" src="https://st9ph.fr/wp-content/uploads/2022/01/steph-150x150.png" alt="" height="100" width="100" loading="lazy"/><div class="uagb-team__content"><h4 class="uagb-team__title">St9ph</h4><span class="uagb-team__prefix">Webmaster</span><p class="uagb-team__desc">Je suis Formateur depuis 1997 et j&#8217;ai commencé ma carrière comme technicien en réseaux informatiques.  J&#8217;ai travaillé pour de grands organismes de formation : Greta, AFPA, réseau des CCI, des écoles de commerces réputées : EM Normandie, E2SE, groupes FIM et ICEP, et collaboré en Centre d&#8217;Appels chez Webhelp pendant 12 ans avec des grands comptes FAI comme Orange, Bouygues Telecom et SFR, des assureurs et des fournisseurs d&#8217;Energie comme Direct Energie (devenu Total) et EDF (devenu Engie) !</p><ul class="uagb-team__social-list"><li class="uagb-team__social-icon"><a href="https://www.facebook.com/profile.php?id=100076192144163" aria-label="facebook" target="_blank" title="" rel="noopener noreferrer"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.8 90.69 226.4 209.3 245V327.7h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.3 482.4 504 379.8 504 256z"></path></svg></a></li><li class="uagb-team__social-icon"><a href="https://www.linkedin.com/company/st9ph/" aria-label="linkedin" target="_blank" title="" rel="noopener noreferrer"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg></a></li></ul></div></div>
<p>L’article <a href="https://st9ph.fr/wordpress-depoussierons-la-methode-dabonnement/">WordPress | Dépoussiérons la méthode d&#8217;abonnement</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://st9ph.fr/wordpress-depoussierons-la-methode-dabonnement/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">34446</post-id>	</item>
	</channel>
</rss>
