<?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 🛠️ création de sites - st9ph.fr</title>
	<atom:link href="https://st9ph.fr/category/creation-de-sites/feed/" rel="self" type="application/rss+xml" />
	<link>https://st9ph.fr/category/creation-de-sites/</link>
	<description>la boite à outils numériques</description>
	<lastBuildDate>Mon, 13 Apr 2026 07:29:08 +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 🛠️ création de sites - st9ph.fr</title>
	<link>https://st9ph.fr/category/creation-de-sites/</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">199087513</site>	<item>
		<title>Prestashop &#124; OP Com dans la Eshop</title>
		<link>https://st9ph.fr/prestashop-op-com-dans-la-eshop/</link>
					<comments>https://st9ph.fr/prestashop-op-com-dans-la-eshop/#respond</comments>
		
		<dc:creator><![CDATA[St9ph]]></dc:creator>
		<pubDate>Tue, 17 Feb 2026 17:27:24 +0000</pubDate>
				<category><![CDATA[PrestaShop]]></category>
		<category><![CDATA[🛠️ création de sites]]></category>
		<category><![CDATA[🌐 public]]></category>
		<category><![CDATA[opérations commerciales prestashop]]></category>
		<category><![CDATA[pack produit prestashop]]></category>
		<category><![CDATA[réduction déclinaison prestashop]]></category>
		<category><![CDATA[réduction marque prestashop]]></category>
		<category><![CDATA[réduction produit prestashop]]></category>
		<guid isPermaLink="false">https://st9ph.fr/?p=34861</guid>

					<description><![CDATA[<p>PrestaShop &#124; 💥OP Com dans la Eshop ➡️ Que ce soit pour &#8230; &#8230; il faudra créer des évènements dans votre boutique en ligne avec des Call To actions qui pousseront à la commande 🛒. En complément de cet article (plus global) : Part d&#8217;IA /5 dans cet article voyez le menu flottant (à droite) ... <a title="Prestashop &#124; OP Com dans la Eshop" class="read-more" href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/" aria-label="En savoir plus sur Prestashop &#124; OP Com dans la Eshop">Lire la suite</a></p>
<p>L’article <a href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/">Prestashop | OP Com dans la Eshop</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<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"><strong>PrestaShop</strong></p>



<p class="has-accent-color has-text-color has-link-color has-x-large-font-size wp-elements-9024c7da84bf9d975ea2c3f458c234da"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-contrast-color">|</mark> 💥OP Com dans la Eshop</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:33.33%">
<p class="has-text-align-right has-medium-font-size">➡️ Que ce soit pour &#8230;</p>



<ul class="wp-block-list has-medium-font-size">
<li>vider les stocks 📦,</li>



<li> mettre en avant certains produits 🎈,</li>



<li> attirer de nouveaux prospects🪝 </li>



<li>ou ramener vos clients dormants 😴, </li>
</ul>



<p class="has-text-align-right has-medium-font-size">&#8230; il faudra créer des évènements dans votre boutique en ligne avec des Call To actions qui pousseront à la commande 🛒.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p><strong>En complément de cet article</strong> (plus global) :</p>



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

												<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/%f0%9f%9b%92e-commerce-operations-commerciales-en-digital/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img fetchpriority="high" decoding="async" width="724" height="186" src="https://st9ph.fr/wp-content/uploads/2026/01/image-23.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-23.png 724w, https://st9ph.fr/wp-content/uploads/2026/01/image-23-300x77.png 300w" sizes="(max-width: 724px) 100vw, 724px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/%f0%9f%9b%92e-commerce-operations-commerciales-en-digital/" target="_self" rel="bookmark noopener noreferrer">🛒E-Commerce | Opérations commerciales en digital</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-04T18:45:48+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					4 janvier 2026				</time>
						</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/%f0%9f%9b%92e-commerce-operations-commerciales-en-digital/" target="_self" rel="bookmark noopener noreferrer">Voir</a>
			</div>
			
									</article>
											</div>
			</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-3f6c374a-959b-4682-93ac-9818c952cacc">
			<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-3f6c374a-959b-4682-93ac-9818c952cacc-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-3f6c374a-959b-4682-93ac-9818c952cacc-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-3f6c374a-959b-4682-93ac-9818c952cacc-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-3f6c374a-959b-4682-93ac-9818c952cacc-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-3f6c374a-959b-4682-93ac-9818c952cacc-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-3f6c374a-959b-4682-93ac-9818c952cacc-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-3f6c374a-959b-4682-93ac-9818c952cacc-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-3f6c374a-959b-4682-93ac-9818c952cacc-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-3f6c374a-959b-4682-93ac-9818c952cacc-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-3f6c374a-959b-4682-93ac-9818c952cacc-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-2244d65d-8865-47c6-bd28-4ed5ebba335e">
			<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-2244d65d-8865-47c6-bd28-4ed5ebba335e-0"><rect height="150" width="150" 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-2244d65d-8865-47c6-bd28-4ed5ebba335e-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-2244d65d-8865-47c6-bd28-4ed5ebba335e-1"><rect height="150" width="150" 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-2244d65d-8865-47c6-bd28-4ed5ebba335e-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-2244d65d-8865-47c6-bd28-4ed5ebba335e-2"><rect height="150" width="150" 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-2244d65d-8865-47c6-bd28-4ed5ebba335e-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-2244d65d-8865-47c6-bd28-4ed5ebba335e-3"><rect height="150" width="75" 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-2244d65d-8865-47c6-bd28-4ed5ebba335e-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-2244d65d-8865-47c6-bd28-4ed5ebba335e-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-2244d65d-8865-47c6-bd28-4ed5ebba335e-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-181718a6-76f5-46c5-b8e1-f1b33d7efc20">
			<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-181718a6-76f5-46c5-b8e1-f1b33d7efc20-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-181718a6-76f5-46c5-b8e1-f1b33d7efc20-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-181718a6-76f5-46c5-b8e1-f1b33d7efc20-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-181718a6-76f5-46c5-b8e1-f1b33d7efc20-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-181718a6-76f5-46c5-b8e1-f1b33d7efc20-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-181718a6-76f5-46c5-b8e1-f1b33d7efc20-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-181718a6-76f5-46c5-b8e1-f1b33d7efc20-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-181718a6-76f5-46c5-b8e1-f1b33d7efc20-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-181718a6-76f5-46c5-b8e1-f1b33d7efc20-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-181718a6-76f5-46c5-b8e1-f1b33d7efc20-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 class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<figure class="wp-block-image size-full is-resized"><img decoding="async" width="51" height="53" src="https://st9ph.fr/wp-content/uploads/2025/12/image-153.png" alt="" class="wp-image-33778" style="width:33px;height:auto"/></figure>



<p class="has-small-font-size">v<em>oyez le menu flottant (à droite) pour les sources, un glossaire et la méthodologie </em></p>
</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 162 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-30T17:44:47+02:00">30 mars  2026</time></div></div>


				<div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-6cd5ced2      uagb-toc__collapse--list"
					data-scroll= "1"
					data-offset= "30"
					style=""
				>
				<div class="uagb-toc__wrap">
						<div class="uagb-toc__title">
							au menu de cet article : 						</div>
												<div class="uagb-toc__loader"></div>										<div class="uagb-toc__list-wrap uagb-toc__list-hidden">
						<ol class="uagb-toc__list"><li class="uagb-toc__list "><a href="#11-la-ristourne-ou-la-baisse-de-prix" class="uagb-toc-link__trigger">🔹1.1 | la ristourne ou la baisse de prix ?</a><li class="uagb-toc__list "><a href="#12-mettre-en-lot" class="uagb-toc-link__trigger">🔹1.2 | Mettre en lot</a><li class="uagb-toc__list "><a href="#13-mettre-en-pack" class="uagb-toc-link__trigger">🔹1.3 | Mettre en Pack</a><li class="uagb-toc__list "><a href="#pack-mug-et-vase-panda" class="uagb-toc-link__trigger">pack Mug et Vase Panda</a><li class="uagb-toc__list "><a href="#21-promotion-sur-un-rayon-catégorie" class="uagb-toc-link__trigger">🔹2.1 | Promotion sur un rayon (catégorie)</a><li class="uagb-toc__list "><a href="#22-remises-sur-les-déclinaisons-ou-caractéristiques" class="uagb-toc-link__trigger">🔹2.2 | Remises sur les déclinaisons ou caractéristiques</a><li class="uagb-toc__list "><a href="#23-ristourne-sur-une-marque-ciblée" class="uagb-toc-link__trigger">🔹2.3 | Ristourne sur une marque ciblée</a></ol>					</div>
									</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">1.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> la ristourne ou la baisse de prix</strong> ?</h3>



<p>👉🏻 Il s&#8217;agit soit :</p>



<ul class="wp-block-list">
<li>Un produit dont <strong>les ventes s&#8217;essoufflent</strong> 🍂(un produit concurrent ou une 🆕 nouvelle version lui vole la vedette 😎)</li>



<li>Un produit récent dont <strong>les ventes ne décollent pas</strong> 🛩️ (&#8220;il n&#8217;a pas rencontre sa cible&#8221;, comme on dit poliment quand on a raté son business plan)</li>



<li>Un produit populaire 💥 mais <strong>qui vous encombre</strong> 📦 (vous avez été gourmand et ne l&#8217;écoulez pas aussi vite que prévu ou il <strong>vous empêche un réassort </strong>de produits qui margent plus, tellement <strong>il encombre vos stocks</strong>)</li>
</ul>



<p>➡️ En tout cas, il faut donner <strong>un petit coup de pouce</strong> à vos clients pour qu&#8217;ils l&#8217;ajoutent au panier 🛒 !</p>



<p class="has-text-align-center has-medium-font-size">🤔 Baisser ses prix ou mettre en promo ?</p>



<ul class="wp-block-list">
<li>Une <strong>promo</strong> est ✅ <strong>plus visible</strong> mais elle doit rester ❌<strong>ponctuelle</strong></li>



<li>Une <strong>baisse de prix</strong> passera ❌ <strong>inaperçue</strong> pour une partie de vos clients mais elle vous rendra ✅<strong>plus concurrentielle</strong> dans les comparateurs de prix en ligne</li>
</ul>



<figure class="wp-block-video"><video height="294" style="aspect-ratio: 700 / 294;" width="700" autoplay loop muted src="https://st9ph.fr/wp-content/uploads/2026/02/carrousel-produits-comparateur.mp4" playsinline></video></figure>



<!-- ===== BLOQ QCM COMPLET AVEC SCORE LOCAL ===== -->
<div class="bloc-qcm">
<p class="qcm-question">🤔 <strong>Question :</strong> J&#8217;ai le droit de baisser mes prix, comme ça, du jour au lendemain ?</p>
<ul class="qcm-options">
<li data-correct="false" data-feedback="❌ Heureusement que si ! Vous imaginez les pompistes, par exemple, avec les cours du pétrole qui varient sans arrêt ?">Ah non ! Une fois fixé, le prix ne bouge plus,, il faut passer par une promo.</li>
<li data-correct="true" data-feedback="✅ Oui, à condition de ne pas vendre à perte (et même là, il y'a des exceptions)">Ben oui ! Je fais ce que je veux !</li>
<li data-correct="false" data-feedback="❌ Ah ? C'est vraiment dommage si on ne peut pas baisser ses prix durant les soldes vu que c'est un peu fait pour cela à la base.">Oui, sauf pendant les soldes.</li>
</ul>
<p class="qcm-feedback"></p>
<p class="qcm-local-score"></p>
</div>
<style>
.bloc-qcm {
border-left: 4px solid #1e73be;
background: #f5f9ff;
padding: 16px 18px;
margin: 24px 0;
border-radius: 4px;
font-size: 15px;
}
.qcm-options {
list-style: none;
padding: 0;
margin: 12px 0;
}
.qcm-options li {
position: relative;
padding: 10px 12px 10px 42px;
margin-bottom: 8px;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.qcm-options li::before {
content: attr(data-letter);
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-weight: bold;
color: #1e73be;
}
.qcm-options li:hover {
background: #eef3ff;
}
.qcm-options li.correct {
background: #e6f4ea;
border-color: #188038;
}
.qcm-options li.wrong {
background: #fdecec;
border-color: #dc2626;
}
.qcm-feedback {
margin-top: 12px;
font-weight: bold;
}
.qcm-local-score {
margin-top: 6px;
font-weight: bold;
}
</style>
<script>
document.querySelectorAll('.bloc-qcm').forEach(qcm => {
const options = qcm.querySelectorAll('.qcm-options li');
const feedback = qcm.querySelector('.qcm-feedback');
const localScore = qcm.querySelector('.qcm-local-score');
let answered = false;
options.forEach((option, index) => {
option.dataset.letter = String.fromCharCode(65 + index);
});
options.forEach(option => {
option.addEventListener('click', () => {
if (answered) return;
answered = true;
options.forEach(o => o.classList.remove('correct', 'wrong'));
if (option.dataset.correct === "true") {
option.classList.add('correct');
} else {
option.classList.add('wrong');
}
feedback.textContent = option.dataset.feedback;
let point = option.dataset.correct === "true" ? 1 : 0;
localScore.textContent = "Tu marques " + point + " point";
});
});
});
</script>



<div class="bloc-rappel">
🖥️ A l&#8217;épreuve E5B, on vous demandera seulement <strong> une promo </strong>, si on vous demande une opération commerciale sur un produit (ça tombe souvent).</div>

<style>
.bloc-rappel {
  border-left: 4px solid #1e73be;
  background: #f5f9ff;
  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"><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-c4722e0f-4605-4962-8bd2-09f6c1d2513b">
<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-8f768acd-f9f3-4133-8e2f-80a6c70286e1">
			<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">Catalogue &gt; Produit &gt; votre produit &gt; <strong>onglet prix </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-37a4d208-9880-4ad6-b0fa-2fd89738ab24">
			<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>Ajouter un prix spécifique </strong>+</span>
			</div>
			
		</li>
</ul>


<p>👉🏻 Vous pouvez définir :</p>



<ul class="wp-block-list">
<li>un <strong>groupe précis</strong> (réserver à ceux qui ont un compte client ou au VIP si vous les avez créés)</li>



<li>Une ristourne <strong>en % ou en numéraire </strong>(l&#8217;effet sera plus fort en % pour un petit montant)</li>
</ul>



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



<div class="bloc-attention">
  ⚠️ N&#8217;oubliez pas d&#8217;indiquer <strong>une date de fin. </strong> C&#8217;est obligatoire.
</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>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:280px">
<!-- 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-96.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>Cette magnifique peluche Panda est <strong>marquée d&#8217;une étiquette</strong> -10%</li>



<li>Son <strong>prix remisé</strong> s&#8217;affiche à côté de son <strong>prix initial barré</strong> (mais c&#8217;est <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=""> la loi)</li>



<li>👇🏻 Vous pouvez aussi ajouter <strong>l&#8217;étiquette &#8220;Promo&#8221;</strong> en plus (dans le même onglet)</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">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="345" height="30" src="https://st9ph.fr/wp-content/uploads/2026/02/image-98.png" alt="" class="wp-image-34872" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-98.png 345w, https://st9ph.fr/wp-content/uploads/2026/02/image-98-300x26.png 300w" sizes="auto, (max-width: 345px) 100vw, 345px" /></figure>
</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="319" height="44" src="https://st9ph.fr/wp-content/uploads/2026/02/image-99.png" alt="" class="wp-image-34873" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-99.png 319w, https://st9ph.fr/wp-content/uploads/2026/02/image-99-300x41.png 300w" sizes="auto, (max-width: 319px) 100vw, 319px" /></figure>
</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">1.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=""> Mettre en lot</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" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="590" height="306" src="https://st9ph.fr/wp-content/uploads/2026/02/image-100.png" alt="" class="wp-image-34875" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-100.png 590w, https://st9ph.fr/wp-content/uploads/2026/02/image-100-300x156.png 300w" sizes="auto, (max-width: 590px) 100vw, 590px" /></figure>



<p>🌐 <a href="https://www.mydestockage.com/blog/boost/vente-en-gros-alimentaire-particulier-la-revolution-de-la-consommation-des-menages/" target="_blank" rel="noreferrer noopener">Un lien</a> pour vous faire votre propre opinion.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>👉🏻 C&#8217;est le principe de faire une bonne affaire <strong>au volume d&#8217;achat.</strong> L&#8217;opportunité plus que le coup de cœur.</p>



<p class="has-background" style="background-color:#dfe8f1">🤔 Il n&#8217;est pas certain que ©Cora soit <strong>le pionner de la vente &#8220;en gros&#8221; pour les particuliers </strong>comme il l&#8217;affirme sur l&#8217;affiche ci-contre (J&#8217;aurais dit Metro) mais ce qui est sur, c&#8217;est que <strong>c&#8217;est relativement récent.</strong> Quand on sait que les GSA n&#8217;ont que 60 ans, 1985, c&#8217;est crédible &#8230;</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>👉🏻 C&#8217;est <strong>au même endroit </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 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-7cbf8825-0d31-4073-af61-4f1335175674">
<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-5a6dc3b7-5801-4ef0-9e76-5a21fb771a33">
			<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">Catalogue &gt; Produit &gt; votre produit &gt; <strong>onglet prix </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-71684163-7a49-45f3-a847-af920c3b2855">
			<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">Nombre minimal d&#8217;unités achetées</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-4d0c1d9e-875c-441f-bb13-3aca7dff8e96">
			<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">Saisir la quantité du lot</span>
			</div>
			
		</li>
</ul>


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



<div class="bloc-a-retenir">
 ⚠️ Ca marche par <strong>palliers</strong> donc, si c&#8217;est graduel, penser à créer une règle par pallier de quantité.
</div>

<style>
.bloc-a-retenir {
  border-left: 4px solid #d97706;
  background: #fff8e1;
  padding: 12px 18px;
  margin: 20px 0;
  font-size: 15px;
  color: #0f172a;
  border-radius: 4px;
  font-family: Arial, sans-serif;
}
</style>
</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="448" height="387" src="https://st9ph.fr/wp-content/uploads/2026/02/image-102.png" alt="" class="wp-image-34878" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-102.png 448w, https://st9ph.fr/wp-content/uploads/2026/02/image-102-300x259.png 300w" sizes="auto, (max-width: 448px) 100vw, 448px" /></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%">
<!-- ===== BLOQ QCM COMPLET AVEC SCORE LOCAL ===== -->
<div class="bloc-qcm">
<p class="qcm-question">🤔 <strong>Question :</strong> &#8216;1 produit acheté, 1 produit offert&#8217;, c&#8217;est légal ?</p>
<ul class="qcm-options">
<li data-correct="false" data-feedback="❌ Non,  c'est possible sauf dans l'alimentaire (en GSA) où c'est  limité à 33 % (2 achetés, 1 offert, ça passe)">Oui, c&#8217;est une autre façon de faire un rabais de 50 %</li>
<li data-correct="true" data-feedback="✅ oui, 2 achetés, 1 offert, ça passe">Oui, sauf dans l&#8217;alimentaire où un rabais ne peut pas dépasser 33 %</li>
<li data-correct="false" data-feedback="❌ Non, c'est possible mais limité à 33 % dans l'alimentaire">C&#8217;est interdit : la notion de &#8220;cadeau&#8221; est incompatible avec un achat</li>
</ul>
<p class="qcm-feedback"></p>
<p class="qcm-local-score"></p>
</div>
<style>
.bloc-qcm {
border-left: 4px solid #1e73be;
background: #f5f9ff;
padding: 16px 18px;
margin: 24px 0;
border-radius: 4px;
font-size: 15px;
}
.qcm-options {
list-style: none;
padding: 0;
margin: 12px 0;
}
.qcm-options li {
position: relative;
padding: 10px 12px 10px 42px;
margin-bottom: 8px;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.qcm-options li::before {
content: attr(data-letter);
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-weight: bold;
color: #1e73be;
}
.qcm-options li:hover {
background: #eef3ff;
}
.qcm-options li.correct {
background: #e6f4ea;
border-color: #188038;
}
.qcm-options li.wrong {
background: #fdecec;
border-color: #dc2626;
}
.qcm-feedback {
margin-top: 12px;
font-weight: bold;
}
.qcm-local-score {
margin-top: 6px;
font-weight: bold;
}
</style>
<script>
document.querySelectorAll('.bloc-qcm').forEach(qcm => {
const options = qcm.querySelectorAll('.qcm-options li');
const feedback = qcm.querySelector('.qcm-feedback');
const localScore = qcm.querySelector('.qcm-local-score');
let answered = false;
options.forEach((option, index) => {
option.dataset.letter = String.fromCharCode(65 + index);
});
options.forEach(option => {
option.addEventListener('click', () => {
if (answered) return;
answered = true;
options.forEach(o => o.classList.remove('correct', 'wrong'));
if (option.dataset.correct === "true") {
option.classList.add('correct');
} else {
option.classList.add('wrong');
}
feedback.textContent = option.dataset.feedback;
let point = option.dataset.correct === "true" ? 1 : 0;
localScore.textContent = "Tu marques " + point + " point";
});
});
});
</script>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="457" height="396" src="https://st9ph.fr/wp-content/uploads/2026/02/image-108.png" alt="" class="wp-image-34887" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-108.png 457w, https://st9ph.fr/wp-content/uploads/2026/02/image-108-300x260.png 300w" sizes="auto, (max-width: 457px) 100vw, 457px" /></figure>
</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">1.3 |</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=""> Mettre en Pack</h3>



<p>➡️<strong> Associer un produit </strong>qui marche moyennement <strong>avec un qui marche bien</strong> peut être une très bonne idée. Le regard du consommateur changera s&#8217;il le voit <strong>comme un bonus </strong>et plus comme <strong>un produit à part entière</strong>.</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:66.66%">
<ul class="wp-block-list">
<li>Il faudra<strong> créer un nouveau produit</strong> et choisir &#8220;<strong><em>pack de produits</em></strong>&#8221; 👇🏻</li>
</ul>


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


<ul class="wp-block-list">
<li>Il faudra aussi prévoir<strong> au moins un visuel des </strong>deux (ou plus) <strong>produits ensemble </strong>et la mettre comme<strong> image de couverture</strong></li>



<li><strong>Décrivez</strong> votre pack <strong>comme un produit normal</strong></li>
</ul>



<div class="bloc-a-retenir">
 ⚠️ Faites attention dans le descriptif à bien reporter les informations techniques ou obligatoires <strong>de tous les produits</strong>
</div>

<style>
.bloc-a-retenir {
  border-left: 4px solid #d97706;
  background: #fff8e1;
  padding: 12px 18px;
  margin: 20px 0;
  font-size: 15px;
  color: #0f172a;
  border-radius: 4px;
  font-family: Arial, sans-serif;
}
</style>
</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-103.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">
<!-- 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-105.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 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-2abef99f-3fa8-428a-9dd9-4e671d67ae5d">
<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-90104938-e955-4359-975f-2849cd7ed770">
			<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">Onglet Pack</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-fed2010b-079a-420c-855f-3dc354eb278d">
			<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">tapez <strong>les 1eres lettres du produit</strong> à mettre dans le pack pour qu&#8217;il apparaisse dans la liste</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-bd924afa-5207-485a-a5f9-99510a867535">
			<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">Cliquer dessus <strong>pour l&#8217;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-42fe8688-2053-42bc-b943-f34305d5b938">
			<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>Répéter l&#8217;opération </strong>avec les autres produits</span>
			</div>
			
		</li>
</ul>


<div class="bloc-a-retenir">
 ⚠️ Attention si le produit <strong>comporte plusieurs déclinaisons </strong> à choisir la bonne.
</div>

<style>
.bloc-a-retenir {
  border-left: 4px solid #d97706;
  background: #fff8e1;
  padding: 12px 18px;
  margin: 20px 0;
  font-size: 15px;
  color: #0f172a;
  border-radius: 4px;
  font-family: Arial, sans-serif;
}
</style>
</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">
<!-- 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-106.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">
<!-- 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-107.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">
<p>➡️ Pensez à définir <strong>un prix plus avantageux</strong> que pour l&#8217;achat des produits achetés indépendamment sinon, ça ne sert à rien, d&#8217;autant que <strong>le récap en détail produit </strong>montre au client<strong>les prix initiaux et l&#8217;économie générée</strong>.</p>



<!-- ===== BLOQ QCM COMPLET AVEC SCORE LOCAL ===== -->
<div class="bloc-qcm">
<p class="qcm-question">🤔 <strong>Question :</strong> Si je mélange deux produits avec une TVA différente dans un pack, quelle TVA appliquer ?</p>
<ul class="qcm-options">
<li data-correct="false" data-feedback="Ce n'est pas totalement faux dans le cas où le produit dont la TVA est la plus forte est considéré comme étant central dans le pack (les autres n'étant que des accessoires) mais ce n'est vraiment pas la règle générale.">La TVA la plus forte l&#8217;emporte et tous les produits du pack l&#8217;adoptent.</li>
<li data-correct="true" data-feedback="Oui, sauf rares exceptions">Il faut &#8220;ventiler&#8221;, c&#8217;est à dire que chaque produit garde sa TVA originelle.</li>
<li data-correct="false" data-feedback="Non, sauf de très rares exceptions comme des chocolats qui contiennent de la liqueur ou les babas au rhum en boulangerie qui restent à 5,5 % contrairement aux autres produits alcoolisés.">La TVA la plus faible l&#8217;emporte.</li>
</ul>
<p class="qcm-feedback"></p>
<p class="qcm-local-score"></p>
</div>
<style>
.bloc-qcm {
border-left: 4px solid #1e73be;
background: #f5f9ff;
padding: 16px 18px;
margin: 24px 0;
border-radius: 4px;
font-size: 15px;
}
.qcm-options {
list-style: none;
padding: 0;
margin: 12px 0;
}
.qcm-options li {
position: relative;
padding: 10px 12px 10px 42px;
margin-bottom: 8px;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.qcm-options li::before {
content: attr(data-letter);
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-weight: bold;
color: #1e73be;
}
.qcm-options li:hover {
background: #eef3ff;
}
.qcm-options li.correct {
background: #e6f4ea;
border-color: #188038;
}
.qcm-options li.wrong {
background: #fdecec;
border-color: #dc2626;
}
.qcm-feedback {
margin-top: 12px;
font-weight: bold;
}
.qcm-local-score {
margin-top: 6px;
font-weight: bold;
}
</style>
<script>
document.querySelectorAll('.bloc-qcm').forEach(qcm => {
const options = qcm.querySelectorAll('.qcm-options li');
const feedback = qcm.querySelector('.qcm-feedback');
const localScore = qcm.querySelector('.qcm-local-score');
let answered = false;
options.forEach((option, index) => {
option.dataset.letter = String.fromCharCode(65 + index);
});
options.forEach(option => {
option.addEventListener('click', () => {
if (answered) return;
answered = true;
options.forEach(o => o.classList.remove('correct', 'wrong'));
if (option.dataset.correct === "true") {
option.classList.add('correct');
} else {
option.classList.add('wrong');
}
feedback.textContent = option.dataset.feedback;
let point = option.dataset.correct === "true" ? 1 : 0;
localScore.textContent = "Tu marques " + point + " point";
});
});
});
</script>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<style>
.ps-product-card { background: #fff; border: 1px solid #e7e7e7; border-radius: 4px; width: 100%; max-width: 300px; margin: 20px auto; font-family: 'Segoe UI', sans-serif; transition: box-shadow 0.3s ease; position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.ps-product-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.ps-product-image-wrapper { position: relative; width: 100%; padding-top: 100%; overflow: hidden; background: #f5f5f5; }
.ps-product-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.ps-product-card:hover .ps-product-image { transform: scale(1.05); }
.ps-wishlist-icon { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.8); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.ps-wishlist-icon svg { width: 20px; height: 20px; fill: #7a7a7a; transition: fill 0.2s; }
.ps-wishlist-icon:hover { background: #fff; transform: scale(1.1); }
.ps-wishlist-icon:hover svg { fill: #ff4848; }
.ps-product-rating { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; z-index: 2; background: rgba(0,0,0,0.4); padding: 4px 8px; border-radius: 20px; }
.ps-star { color: #ffd700; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ps-product-content { padding: 15px; text-align: center; background: #fff; }
.ps-product-name { font-size: 15px; color: #333; margin: 0 0 10px 0; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 42px; }
.ps-product-price { font-size: 18px; font-weight: 700; color: #25B9D7; margin: 0 0 15px 0; }
.ps-product-btn { background-color: #25B9D7; color: #fff; border: none; padding: 10px 15px; border-radius: 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; text-decoration: none; box-sizing: border-box; }
.ps-product-btn:hover { background-color: #1fa3c0; color: #fff; }
.ps-product-btn svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 768px) { .ps-product-card { max-width: 100%; } }
</style>
<!-- DÉBUT VIGNETTE PRODUIT -->
<a href="https://boutiq.st9ph.fr/25-pack-mug-et-vase-panda.html" target="_blank" class="ps-product-card">
<div class="ps-product-image-wrapper">
<img decoding="async" src="https://boutiq.st9ph.fr/46-product_main/pack-mug-et-vase-panda.jpg" alt="pack Mug et Vase Panda" class="ps-product-image">
<div class="ps-wishlist-icon" title="Ajouter aux favoris" onclick="event.preventDefault(); event.stopPropagation(); alert('Fonctionnalité liste d\'envie à connecter.');">
<svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
</div>
<div class="ps-product-rating">
<span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span>
</div>
</div>
<div class="ps-product-content">
<h3 class="ps-product-name">pack Mug et Vase Panda</h3>
<div class="ps-product-price">24,95 €</div>
<div class="ps-product-btn">
Voir dans la boutique
<svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
</div>
</div>
</a>
<!-- FIN VIGNETTE PRODUIT -->
</div>
</div>



<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/st9ph-ico-sansTxt.png" alt="Logo St9ph">
      </a>

      <h2>opérations sur un ensemble de produits</h2>
    </div>

    <ul class="chapter-points">
      <li>Promo sur un rayon</li>
      <li>Remise sur tous les produits d&#8217;une couleur, d&#8217;une taille ou autre</li>
      <li>Ristourne sur une marque de produits</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=""> Promotion sur un rayon (catégorie)</h3>



<p>👉🏻 On fait souvent cela dans <strong>le prêt-à-porter</strong> quand une <strong>nouvelle collection </strong>est attendue et qu&#8217;il faut faire de la place ou <strong>chez les déstockeurs </strong>qui viennent d&#8217;emporter <strong>un lot inattendu</strong> chez leur fournisseur alors que leur arrière-boutique est déjà pleine à craquer :<strong> la promo sur tout un rayon !</strong></p>


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


<p class="has-text-align-center has-medium-font-size">Alors ? <mark style="background-color:rgba(0, 0, 0, 0);color:#875023" class="has-inline-color">Dans Presta&#8217;, on ne sait jamais</mark> : une règle de panier ou de catalogue ?</p>


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


<p>La différence réside dans la manière d&#8217;obtenir l&#8217;avantage :</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:66.66%">
<ul class="wp-block-list">
<li>🧺 Une règle de panier <strong>génère un coupon de réduction </strong>qu&#8217;il faut donner<strong> dans le tunnel d&#8217;achat</strong> pour l&#8217;obtenir 👉🏻</li>
</ul>



<div class="bloc-astuce">
 ✅ Idéal pour susciter la sensation d&#8217;un <strong> avantage exclusif </strong> qui récompense la fidélité. C&#8217;est également  un outil idéal pour <strong>les gestes co, les récompenses, les CTA de mails de relance &#8230; </strong>
</div>

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



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="393" height="192" src="https://st9ph.fr/wp-content/uploads/2026/02/image-111.png" alt="" class="wp-image-34891" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-111.png 393w, https://st9ph.fr/wp-content/uploads/2026/02/image-111-300x147.png 300w" sizes="auto, (max-width: 393px) 100vw, 393px" /></figure>
</div>
</div>



<ul class="wp-block-list">
<li>Une règle de catalogue est <strong>transparente,</strong> idéale <strong>pour les avantages permanents</strong> ou pour les groupes spéciaux (VIP)</li>
</ul>



<!-- ===== BLOQ QCM COMPLET AVEC SCORE LOCAL ===== -->
<div class="bloc-qcm">
<p class="qcm-question">🤔 <strong>Question :</strong> La livraison gratuite à partir de 50 € d&#8217;achats, c&#8217;est &#8230;.</p>
<ul class="qcm-options">
<li data-correct="false" data-feedback="❌ Il faudra saisir le coupon à chaque fois, alors ? Cela fera des litiges, certains oubliant de le saisir (même si vous le mettez en avant) diront que vous le faites exprès pour qu'on passe à côté.">Un règle de panier</li>
<li data-correct="true" data-feedback="✅ Oui, sinon vous obligez à saisir un coupon chaque fois et cela fera des litiges, certains oubliant de le saisir (même si vous le mettez en avant) diront que vous le faites exprès pour qu'on passe à côté.">une règle de prix catalogue</li>
<li data-correct="false" data-feedback="❌ Pas faux, mais, il faut bien le définir tout de même en règle de prix">ni l&#8217;un ni l&#8217;autre comme c&#8217;est un avantage permanent (réassurance)</li>
</ul>
<p class="qcm-feedback"></p>
<p class="qcm-local-score"></p>
</div>
<style>
.bloc-qcm {
border-left: 4px solid #1e73be;
background: #f5f9ff;
padding: 16px 18px;
margin: 24px 0;
border-radius: 4px;
font-size: 15px;
}
.qcm-options {
list-style: none;
padding: 0;
margin: 12px 0;
}
.qcm-options li {
position: relative;
padding: 10px 12px 10px 42px;
margin-bottom: 8px;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.qcm-options li::before {
content: attr(data-letter);
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-weight: bold;
color: #1e73be;
}
.qcm-options li:hover {
background: #eef3ff;
}
.qcm-options li.correct {
background: #e6f4ea;
border-color: #188038;
}
.qcm-options li.wrong {
background: #fdecec;
border-color: #dc2626;
}
.qcm-feedback {
margin-top: 12px;
font-weight: bold;
}
.qcm-local-score {
margin-top: 6px;
font-weight: bold;
}
</style>
<script>
document.querySelectorAll('.bloc-qcm').forEach(qcm => {
const options = qcm.querySelectorAll('.qcm-options li');
const feedback = qcm.querySelector('.qcm-feedback');
const localScore = qcm.querySelector('.qcm-local-score');
let answered = false;
options.forEach((option, index) => {
option.dataset.letter = String.fromCharCode(65 + index);
});
options.forEach(option => {
option.addEventListener('click', () => {
if (answered) return;
answered = true;
options.forEach(o => o.classList.remove('correct', 'wrong'));
if (option.dataset.correct === "true") {
option.classList.add('correct');
} else {
option.classList.add('wrong');
}
feedback.textContent = option.dataset.feedback;
let point = option.dataset.correct === "true" ? 1 : 0;
localScore.textContent = "Tu marques " + point + " point";
});
});
});
</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" style="flex-basis:33.33%"><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-38a43bf1-181e-41b9-bf84-d9bb938fcd4d">
<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-0b791107-1827-428b-ada0-73381a8b35b5">
			<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">(onglet) <strong>conditions</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-3115e972-a6ef-4360-a4c3-23b219ef028d">
			<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élection de produit</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-657140ae-1eae-4825-8106-4ed199550f81">
			<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 &#8220;<strong>Catégories</strong>&#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-1e67324f-7d94-47a9-8868-38d7dcc67b11">
			<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>+ 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-95fe987d-5a26-4fe1-a152-6048adf5abc3">
			<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>Choisir</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-6465c79b-da41-4ec1-b6c6-17be6c5faed9">
			<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">Cliquer sur la / les <strong>catégorie(s) à promouvoir </strong>pour qu&#8217;elle(s) passe(nt) dans<strong> la liste &#8220;sélectionnés&#8221;</strong> puis</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-3d9d2215-0424-4f30-be3e-ac1f46e8d9e1">
			<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>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-44cada6c-b5bd-470f-9717-f86eb990e08b">
			<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">cliquer sur<strong> la croix </strong>X</span>
			</div>
			
		</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-112.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>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="779" height="155" src="https://st9ph.fr/wp-content/uploads/2026/02/image-113.png" alt="" class="wp-image-34893" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-113.png 779w, https://st9ph.fr/wp-content/uploads/2026/02/image-113-300x60.png 300w, https://st9ph.fr/wp-content/uploads/2026/02/image-113-768x153.png 768w" sizes="auto, (max-width: 779px) 100vw, 779px" /><figcaption class="wp-element-caption"><em>Ici, une promo dans tout le rayon femmes</em></figcaption></figure>


<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 640 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M320 96V416C341.011 416 361.818 411.861 381.23 403.821C400.641 395.78 418.28 383.995 433.138 369.138C447.995 354.28 459.78 336.641 467.821 317.23C475.861 297.818 480 277.011 480 256C480 234.989 475.861 214.182 467.821 194.771C459.78 175.359 447.995 157.72 433.138 142.863C418.28 128.005 400.641 116.22 381.23 108.179C361.818 100.139 341.011 96 320 96ZM0 256L160.002 416L320.003 256L160.002 96L0 256ZM480 256C480 277.011 484.138 297.818 492.179 317.23C500.219 336.643 512.005 354.28 526.862 369.138C541.72 383.995 559.357 395.781 578.77 403.821C598.182 411.862 618.989 416 640 416V96C597.565 96 556.869 112.858 526.862 142.863C496.857 172.869 480 213.565 480 256Z&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-dccf51e5-bff5-40cd-8d59-bf9a138e9447">
<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 640 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M320 96V416C341.011 416 361.818 411.861 381.23 403.821C400.641 395.78 418.28 383.995 433.138 369.138C447.995 354.28 459.78 336.641 467.821 317.23C475.861 297.818 480 277.011 480 256C480 234.989 475.861 214.182 467.821 194.771C459.78 175.359 447.995 157.72 433.138 142.863C418.28 128.005 400.641 116.22 381.23 108.179C361.818 100.139 341.011 96 320 96ZM0 256L160.002 416L320.003 256L160.002 96L0 256ZM480 256C480 277.011 484.138 297.818 492.179 317.23C500.219 336.643 512.005 354.28 526.862 369.138C541.72 383.995 559.357 395.781 578.77 403.821C598.182 411.862 618.989 416 640 416V96C597.565 96 556.869 112.858 526.862 142.863C496.857 172.869 480 213.565 480 256Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-d041cc9b-5be0-44fa-b959-73568e6a5b39">
			<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 640 512"><path fill="#000000" d="M320 96V416C341.011 416 361.818 411.861 381.23 403.821C400.641 395.78 418.28 383.995 433.138 369.138C447.995 354.28 459.78 336.641 467.821 317.23C475.861 297.818 480 277.011 480 256C480 234.989 475.861 214.182 467.821 194.771C459.78 175.359 447.995 157.72 433.138 142.863C418.28 128.005 400.641 116.22 381.23 108.179C361.818 100.139 341.011 96 320 96ZM0 256L160.002 416L320.003 256L160.002 96L0 256ZM480 256C480 277.011 484.138 297.818 492.179 317.23C500.219 336.643 512.005 354.28 526.862 369.138C541.72 383.995 559.357 395.781 578.77 403.821C598.182 411.862 618.989 416 640 416V96C597.565 96 556.869 112.858 526.862 142.863C496.857 172.869 480 213.565 480 256Z"></path></svg>
				</span>
				<span class="ub_list_item_text">N&#8217;oubliez pas de définir votre promotion dans action</span>
			</div>
			
		</li>
</ul>


<div class="bloc-a-retenir">
  🧮 Il faut bien étudier <strong> votre ROI</strong> en suivant l&#8217;évolution des ventes par rapport à ce que vous avez sacrifié de votre marge pour voir si l&#8217;opération est rentable.
</div>

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



<p>➡️ N&#8217;oubliez pas non plus de la mettre en avant dans le carrousel ou la bannière 👇🏻 :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="816" height="305" src="https://st9ph.fr/wp-content/uploads/2026/02/image-116.png" alt="" class="wp-image-34898" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-116.png 816w, https://st9ph.fr/wp-content/uploads/2026/02/image-116-300x112.png 300w, https://st9ph.fr/wp-content/uploads/2026/02/image-116-768x287.png 768w" sizes="auto, (max-width: 816px) 100vw, 816px" /></figure>



<div class="bloc-qcm">
  <p class="qcm-question">
    💥 <strong>Alors ?</strong> Le mieux pour cette OP Com de promo sur tout le rayon femme ?
  </p>

  <ul class="qcm-options">
    <li data-correct="true">un coupon réduction en règle de panier ?</li>
    <li data-correct="false">une promo catalogue ?</li>
    <li data-correct="false">Ca n&#8217;a pas d&#8217;importance ?</li>
  </ul>

  <p class="qcm-feedback"></p>
</div>

<style>
.bloc-qcm {
  border-left: 4px solid #1e73be;
  background: #f5f9ff;
  padding: 16px 18px;
  margin: 24px 0;
  border-radius: 4px;
  font-size: 15px;
}

.qcm-options {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}

.qcm-options li {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.qcm-options li:hover {
  background: #eef3ff;
}

.qcm-options li.correct {
  background: #e6f4ea;
  border-color: #188038;
}

.qcm-options li.wrong {
  background: #fdecec;
  border-color: #dc2626;
}

.qcm-feedback {
  margin-top: 12px;
  font-weight: bold;
}
</style>

<script>
document.querySelectorAll('.bloc-qcm').forEach(qcm => {
  const options = qcm.querySelectorAll('.qcm-options li');
  const feedback = qcm.querySelector('.qcm-feedback');

  options.forEach(option => {
    option.addEventListener('click', () => {
      options.forEach(o => o.classList.remove('correct', 'wrong'));

      if (option.dataset.correct === "true") {
        option.classList.add('correct');
        feedback.textContent = "✅ Oui, le coupon va renforcer le sentiment de privilège";
        feedback.style.color = "#188038";
      } else {
        option.classList.add('wrong');
        feedback.textContent = "❌ Ca se discute mais, franchement, le coupon va renforcer l'effet bon plan";
        feedback.style.color = "#dc2626";
      }
    });
  });
});
</script>



<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=""> Remises sur les déclinaisons ou caractéristiques</h3>



<p>👉🏻 C&#8217;est souvent à l&#8217;occasion d&#8217;un évènement du 📆 c<strong>alendrier marketing</strong> que vous aurez l&#8217;occasion de <strong>mettre en valeur</strong> votre boutique <strong>sur des critères de déclinaisons.</strong> <mark style="background-color:rgba(0, 0, 0, 0);color:#20771e" class="has-inline-color">Ici, les produits de couleur verte pour la Saint patrice</mark>, <strong>ou de caractéristique</strong> &#8220;made in France&#8221;, &#8220;Artisanat responsable&#8221; &#8230;</p>



<p class="has-background" style="background-color:#dbedd3">🍀 C&#8217;est aussi un formidable vecteur pour obliger vos visiteurs <strong>à &#8220;fouiller&#8221; dans vos rayons</strong> pour dénicher la perle rare (et ainsi, <strong>doper vos temps de sessions</strong>) 📈 et créer de<strong> l&#8217;opportunité</strong>.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="646" src="https://st9ph.fr/wp-content/uploads/2026/02/saint-patrice-1024x646.png" alt="" class="wp-image-34903" srcset="https://st9ph.fr/wp-content/uploads/2026/02/saint-patrice-1024x646.png 1024w, https://st9ph.fr/wp-content/uploads/2026/02/saint-patrice-300x189.png 300w, https://st9ph.fr/wp-content/uploads/2026/02/saint-patrice-768x485.png 768w, https://st9ph.fr/wp-content/uploads/2026/02/saint-patrice-1536x970.png 1536w, https://st9ph.fr/wp-content/uploads/2026/02/saint-patrice-2048x1293.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></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%"><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-da13b055-e06a-4afb-81f7-f967348b14c9">
<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-456f1aea-0d97-4640-8428-7a2f75eac904">
			<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">(onglet) <strong>conditions</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-e34b95e2-c1b9-4db3-b64f-694127db74fb">
			<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élection de produit</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-7dc576dd-64d0-4e12-9fd9-bd4b6350bdee">
			<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 &#8220;<strong>attributs</strong>&#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-29de8260-3999-4465-8953-7408ee942b7c">
			<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>+ 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-d15f6411-05c1-432c-99cc-af3908f09865">
			<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>Choisir</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-e0f7a0ec-fa0a-4d5c-bf38-34043cf00471">
			<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">Cliquer sur la / les <strong>déclinaisons </strong>pour qu&#8217;elle(s) passe(nt) dans<strong> la liste &#8220;sélectionnés&#8221;</strong> puis</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-a7b94c45-2628-4f07-b89f-4b03adca5c5b">
			<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>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-570ce755-d4a6-4249-b93a-591d664c364b">
			<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">cliquer sur<strong> la croix </strong>X</span>
			</div>
			
		</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-118.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 class="bloc-astuce">
  👉🏻 C&#8217;est la même manipulation que pour <strong> les catégories </strong> que nous avons vus dans le sous-chapitre précédent
</div>

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



<p>💡 Vous pouvez aussi faire  :</p>



<ul class="wp-block-list">
<li>une semaine 👗&#8221;<em>grandes tailles</em>&#8221; (XL, XXL &#8230;), 👠&#8221;<em>grands pieds</em>&#8221; pointures &gt; 44 &#8230;</li>



<li>un week-end 🚚 &#8220;<em>livraison offerte</em>&#8221; sur vos 🗄️ meubles de gros gabarit (dimensions : hauteurs ou longueurs importantes)</li>



<li>une quinzaine ♻️ &#8220;écolo&#8221; sur les produits ayant la caractéristique &#8220;recyclé&#8221; &#8230;</li>
</ul>



<p class="has-medium-font-size">💥 Soyez imaginatifs !</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.3 |</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=""> Ristourne sur une marque ciblée</h3>



<p>👉🏻 Mettre en valeur une de vos marques ou l&#8217;un de vos fournisseurs, c&#8217;est aussi un moyen de viser une hausse des ventes suffisamment substantielle pour <strong>renégocier votre contrat</strong> avec lui ! Vous vendez plus ses produits =&gt; il vous les procure moins cher.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="826" height="418" src="https://st9ph.fr/wp-content/uploads/2026/02/image-119.png" alt="" class="wp-image-34909" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-119.png 826w, https://st9ph.fr/wp-content/uploads/2026/02/image-119-300x152.png 300w, https://st9ph.fr/wp-content/uploads/2026/02/image-119-768x389.png 768w" sizes="auto, (max-width: 826px) 100vw, 826px" /></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%"><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-09a78981-3e44-4e0d-84bf-bf97d714609f">
<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-27251c0e-81d3-4d6a-9138-d0e7f631b156">
			<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">(onglet) <strong>conditions</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-e1aaee44-7191-4020-a142-65d271fe941a">
			<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élection de produit</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-14f909c4-ab8b-4da8-86a1-653b36d8cdec">
			<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 &#8220;<strong>Marques</strong>&#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-2831ddc7-8221-47a3-b071-a897c66d8dd8">
			<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>+ 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-3428e6db-d5c2-414d-a277-6a0b634adaf7">
			<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>Choisir</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-b3bd30a6-db54-4b45-b741-f1638918eeb9">
			<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">Cliquer sur la / les <strong>marque(s) </strong>pour qu&#8217;elle(s) passe(nt) dans<strong> la liste &#8220;sélectionnés&#8221;</strong> puis</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-7a6a8c31-7b7e-4ad2-ac6e-ca4f280c1027">
			<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>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-a1678151-6249-4c4a-9bc7-676b6f660d7d">
			<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">cliquer sur<strong> la croix </strong>X</span>
			</div>
			
		</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-120.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 class="bloc-astuce">
  👉🏻 C&#8217;est toujours la même manipulation que pour <strong> les catégories ou les déclinaisons</strong> que nous avons vus dans les deux sous-chapitres précédents
</div>

<style>
.bloc-astuce {
  border-left: 4px solid #188038;
  background: #eefaf1;
  padding: 12px 18px;
  margin: 20px 0;
  font-size: 15px;
  color: #0f172a;
  border-radius: 4px;
  font-family: Arial, sans-serif;
}
</style>
</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 is-resized"><img loading="lazy" decoding="async" width="316" height="524" src="https://st9ph.fr/wp-content/uploads/2026/02/image-121.png" alt="" class="wp-image-34912" style="width:375px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/02/image-121.png 316w, https://st9ph.fr/wp-content/uploads/2026/02/image-121-181x300.png 181w" sizes="auto, (max-width: 316px) 100vw, 316px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>N&#8217;oubliez pas de <strong>notifier les clients</strong> que vous ciblez pour cette OP :</p>



<ul class="wp-block-list">
<li>Ceux qui ont<strong> déjà consulté </strong>👀 ces produits,</li>



<li>ceux qui les ont <strong>ajouté au panier </strong>🛒 <strong>puis abandonnés </strong>(si le frein était le cout ou le moment, il va peut-être tomber)</li>



<li>Ceux qui ont <strong>des produits similaires</strong> dans leur 🖤 <strong>liste d&#8217;envies</strong></li>



<li>Ceux <strong>dormants </strong>😴 qui ne réagissent pas à vos <strong>newsletters sur les nouveautés</strong>, l&#8217;appat du gain est un levier à tenter.</li>



<li>Ceux qui ont déjà <strong>ce type de produit </strong>mais <strong>depuis longtemps</strong> 🕸️</li>
</ul>



<p></p>



<p class="has-base-2-background-color has-background">🪙 Votre <strong>base de données client </strong>est une mine d&#8217;or et vos OP COM <strong>un outil de fidélisation </strong>sans égal.</p>
</div>
</div>



<!-- ===== BLOQ QCM COMPLET AVEC SCORE LOCAL ===== -->
<div class="bloc-qcm">
<p class="qcm-question">🤔 <strong>Question :</strong> 2 achetés, 1 offert, je fais comment dans 🐧 Prestashop ?</p>
<ul class="qcm-options">
<li data-correct="false" data-feedback="❌ Possible mais une règle de panier à chaque fois, il y'a plus simple et cela oblige aussi le client à saisir un code réduction">Un coupon sur le produit de 33,33 %</li>
<li data-correct="false" data-feedback="❌ Ca ne marcherait pas, il faut que les produits soient différents pour faire partie d'un pack">Un pack de trois produits identiques et le 3ème dont on ramène le prix à zéro</li>
<li data-correct="true" data-feedback="✅ Oui, c'est le plus simple">un prix spécifique : qté 3 => 33,33 % sur l&#8217;ensemble</li>
</ul>
<p class="qcm-feedback"></p>
<p class="qcm-local-score"></p>
</div>
<style>
.bloc-qcm {
border-left: 4px solid #1e73be;
background: #f5f9ff;
padding: 16px 18px;
margin: 24px 0;
border-radius: 4px;
font-size: 15px;
}
.qcm-options {
list-style: none;
padding: 0;
margin: 12px 0;
}
.qcm-options li {
position: relative;
padding: 10px 12px 10px 42px;
margin-bottom: 8px;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.qcm-options li::before {
content: attr(data-letter);
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-weight: bold;
color: #1e73be;
}
.qcm-options li:hover {
background: #eef3ff;
}
.qcm-options li.correct {
background: #e6f4ea;
border-color: #188038;
}
.qcm-options li.wrong {
background: #fdecec;
border-color: #dc2626;
}
.qcm-feedback {
margin-top: 12px;
font-weight: bold;
}
.qcm-local-score {
margin-top: 6px;
font-weight: bold;
}
</style>
<script>
document.querySelectorAll('.bloc-qcm').forEach(qcm => {
const options = qcm.querySelectorAll('.qcm-options li');
const feedback = qcm.querySelector('.qcm-feedback');
const localScore = qcm.querySelector('.qcm-local-score');
let answered = false;
options.forEach((option, index) => {
option.dataset.letter = String.fromCharCode(65 + index);
});
options.forEach(option => {
option.addEventListener('click', () => {
if (answered) return;
answered = true;
options.forEach(o => o.classList.remove('correct', 'wrong'));
if (option.dataset.correct === "true") {
option.classList.add('correct');
} else {
option.classList.add('wrong');
}
feedback.textContent = option.dataset.feedback;
let point = option.dataset.correct === "true" ? 1 : 0;
localScore.textContent = "Tu marques " + point + " point";
});
});
});
</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" style="flex-basis:66.66%">
<p class="has-text-align-right has-medium-font-size">Un petit 🎓TP pour finir ?</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<style>
.alert-jf5cyz-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(3px); z-index: 9999; justify-content: center; align-items: center; }
.alert-jf5cyz-dialog { background: #fff; width: 90%; max-width: 400px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow: hidden; animation: popInalert-jf5cyz 0.2s ease-out; border: 1px solid #ddd; }
@keyframes popInalert-jf5cyz { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.alert-jf5cyz-header { padding: 20px 20px 10px 20px; display: flex; align-items: flex-start; }
.alert-jf5cyz-icon { font-size: 28px; margin-right: 15px; flex-shrink: 0; line-height: 1; }
.alert-jf5cyz-title { font-weight: 600; font-size: 16px; color: #333; margin: 0; line-height: 1.3; }
.alert-jf5cyz-body { padding: 0 20px 20px 55px; font-size: 14px; color: #333; line-height: 1.5; }
.alert-jf5cyz-footer { border-top: 1px solid #eee; padding: 10px 20px; display: flex; justify-content: flex-end; gap: 10px; background: #f9f9f9; }
.alert-jf5cyz-btn { padding: 8px 16px; border-radius: 4px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: background 0.2s; }
.alert-jf5cyz-btn-cancel { background: #e0e0e0; color: #333; } .alert-jf5cyz-btn-cancel:hover { background: #d0d0d0; }
.alert-jf5cyz-btn-confirm { background: #0066cc; color: white; } .alert-jf5cyz-btn-confirm:hover { background: #0052a3; }
.alert-jf5cyz-btn-close { background: #2196f3; color: white; width: 100%; } .alert-jf5cyz-btn-close:hover { background: #1976d2; }
.alert-jf5cyz-trigger { background: #ff9800; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 4px; cursor: pointer; font-family: sans-serif; display: inline-block; margin: 10px 0; } .alert-jf5cyz-trigger:hover { background: #e68900; }
</style><!-- DÉBUT ALERTE MODALE (Généré) -->
<div id="alert-jf5cyz-overlay" class="alert-jf5cyz-overlay">
<div class="alert-jf5cyz-dialog">
<div class="alert-jf5cyz-header">
<div class="alert-jf5cyz-icon" style="color: #ff9800">⚠️</div>
<div><div class="alert-jf5cyz-title">st9ph.fr indique</div></div>
</div>
<div class="alert-jf5cyz-body">Les travaux pratiques sont réservés à 🧑🏻‍🎓 mes étudiants. Il vous faudra un 🔑 mot de passe pour progresser dans le contenu. Merci de votre compréhension.</div>
<div class="alert-jf5cyz-footer">
<button class="alert-jf5cyz-btn alert-jf5cyz-btn-cancel" onclick="document.getElementById('alert-jf5cyz-overlay').style.display='none'">Rester sur la page</button>
<button class="alert-jf5cyz-btn alert-jf5cyz-btn-confirm" onclick="if('https://st9ph.fr/%f0%9f%8e%93tp-op-com/') window.location.href='https://st9ph.fr/%f0%9f%8e%93tp-op-com/'; else document.getElementById('alert-jf5cyz-overlay').style.display='none';">continuer vers le 🎓TP</button>
</div>
</div>
</div>
<button onclick="document.getElementById('alert-jf5cyz-overlay').style.display='flex'" class="alert-jf5cyz-trigger">Même pas peur !</button>
<!-- FIN ALERTE MODALE -->
</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>



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



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



<!-- Bouton principal -->
<button id="uxMenuBtn" style="
  position: fixed;
  right: 14px;
  bottom: 40%;
  padding: 12px 14px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  font-size: 18px;
">
  ☰
</button>

<!-- Menu -->
<div id="uxMenu" style="
  display:none;
  position: fixed;
  right: 14px;
  bottom: 48%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 10000;
  font-family: Arial, sans-serif;
">
  <button class="uxItem" data-popup="sources">📚 Sources</button>
  <button class="uxItem" data-popup="methodo">🧑‍🎓NDRC</button>
  <button class="uxItem" data-popup="glossary">📘 Glossaire</button>
</div>

<!-- Overlay -->
<div id="uxOverlay" style="
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.55);
  z-index:10001;
"></div>

<!-- POPUPS -->

<div class="uxPopup" id="sources" data-title="📚 Sources UX mobile">
 

  <img decoding="async" 
    src="https://st9ph.fr/wp-content/uploads/2026/02/logo-blogst9ph-small.jpg"
    alt="blog st9ph"
    style="
      width:100%;
      max-width:120px;
      display:block;
      margin:12px auto 20px;
      border-radius:8px;
    "
  >
<h4>📚 Sources</h4>
<ul>
 <!--  ✅ contenus 📚 Sources -->
<li><strong>mydestockage.com</strong> – article sur la vente en volume</li>
<li><strong>🔊 Voicertool</strong> &#8211; introduction parlée </li>
<li><strong>Nano Banana Pro de Google Gemini</strong> – personnage d&#8217;illustration et image en avant</li>
</ul>
</div>

<div class="uxPopup" id="methodo" data-title="🧑‍🎓 NDRC">


  <img decoding="async" 
    src="https://st9ph.fr/wp-content/uploads/2026/02/logo-blogst9ph-small.jpg"
    alt="blog st9ph"
    style="
      width:100%;
      max-width:120px;
      display:block;
      margin:12px auto 20px;
      border-radius:8px;
    "
  >
<h4>🧑‍🎓 NDRC</h4>
<!--  ✅ contenus 🧑‍🎓 NDRC -->
<p> 🟦 Cet article est à visée de l&#8217;épreuve technique E5B.</p>
<ul>
<li>savoir effectuer tout type de réduction sur un produit</li>
<li>savoir effectuer tout type de réduction sur une déclinaison, une caractéristique ou une marque de produits</li>
<li>savoir créer un pack de produits</li>
</ul>
<p>👉 voir aussi les autres articles de la section Prestashop </p>
</div>

<div class="uxPopup" id="glossary" data-title="📘 Glossaire UX mobile">


  <img decoding="async" 
    src="https://st9ph.fr/wp-content/uploads/2026/02/logo-blogst9ph-small.jpg"
    alt="blog st9ph"
    style="
      width:100%;
      max-width:120px;
      display:block;
      margin:12px auto 20px;
      border-radius:8px;
    "
  >
<h4>📘 Glossaire</h4>
<!-- ✅ contenus 📘 Glossaire -->
<ul>
<li><strong>Réassortir</strong> regarnir les rayons avec les produits qui manquaient </li>
<li><strong>Numéraire</strong> quand la réduction est en euros (-10€) plutôt qu&#8217;en % </li>
<li><strong>Régle de panier</strong> Réduction sous forme de coupon et individualisable (geste Co par exemple) </li>
<li><strong>Régle de catalogue</strong> Réduction automatique et collective (pas d&#8217;action spécifique à effectuer si on remplit les conditions) </li>
</ul>
</div>

<!-- Style popup -->
<style>
.uxItem {
  display: block;
  padding: 10px 16px;
  background: #fff;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: #111;        /* ✅ TEXTE VISIBLE */
  font-size: 14px;
}

.uxItem:hover {
  background: #f0f0f0;
}
.uxItem:hover { background:#f0f0f0; }

.uxPopup {
  display:none;
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  width:90%;
  max-width:560px;
  max-height:80%;
  padding:24px;
  border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  z-index:10002;
  overflow-y:auto;
}
</style>
<style>
@media (max-width: 768px) {
  #uxMenuBtn,
  #uxMenu {
    display: none !important;
  }
}
</style>
<style>
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}
</style>
<style>
@media (max-width: 768px) {
  #uxMenuBtn,
  #uxMenu,
  #uxOverlay,
  .uxPopup {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    display: none !important;
  }
}
</style>

<script>
(function () {

  // === DÉSACTIVATION MOBILE ===
  if (window.innerWidth <= 768) {
    return; // on ne fait RIEN sur mobile
  }

  // === RÉFÉRENCES ===
  const menuBtn = document.getElementById("uxMenuBtn");
  const menu = document.getElementById("uxMenu");
  const overlay = document.getElementById("uxOverlay");
  const popups = document.querySelectorAll(".uxPopup");

  if (!menuBtn || !menu || !overlay) return;

  // === OUVERTURE / FERMETURE MENU ===
  menuBtn.addEventListener("click", () => {
    menu.style.display = menu.style.display === "block" ? "none" : "block";
  });

  // === OUVERTURE POPUPS ===
  document.querySelectorAll(".uxItem").forEach(btn => {
    btn.addEventListener("click", () => {
      popups.forEach(p => p.style.display = "none");
      const target = document.getElementById(btn.dataset.popup);
      if (target) target.style.display = "block";
      overlay.style.display = "block";
      menu.style.display = "none";
    });
  });

  // === FERMETURE OVERLAY ===
  overlay.addEventListener("click", () => {
    popups.forEach(p => p.style.display = "none");
    overlay.style.display = "none";
  });

})();
</script>



</script>
<script>
(function () {
  if (window.innerWidth <= 768) {
    const uxPanel = document.querySelector('.ux-panel');
    if (uxPanel) {
      uxPanel.remove();
    }
  }
})();
</script>



<!-- =====================================================
     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>



<script>
document.addEventListener("DOMContentLoaded", function () {

  let scoreTotal = 0;
  let questionsRepondues = 0;

  const blocs = document.querySelectorAll(".bloc-qcm");

  blocs.forEach(qcm => {

    const options = qcm.querySelectorAll(".qcm-options li");
    const feedback = qcm.querySelector(".qcm-feedback");
    let answered = false;

    options.forEach(option => {
      option.addEventListener("click", function () {

        if (answered) return;
        answered = true;

        questionsRepondues++;

        const isCorrect = option.dataset.correct === "true";

        if (isCorrect) {
          scoreTotal++;
          this.classList.add("correct");
        } else {
          this.classList.add("wrong");
        }

        feedback.textContent = option.dataset.feedback +" | Ton score : " + scoreTotal + " / " + questionsRepondues;

        const global = document.getElementById("score-global");
        if (global) {
          global.textContent =
            "Score total : " + scoreTotal + " / " + questionsRepondues;
        }

      });
    });

  });

});
</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" 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">🛠️ création de sites</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%2Fprestashop-op-com-dans-la-eshop%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>L’article <a href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/">Prestashop | OP Com dans la Eshop</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://st9ph.fr/prestashop-op-com-dans-la-eshop/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://st9ph.fr/wp-content/uploads/2026/02/carrousel-produits-comparateur.mp4" length="707952" type="video/mp4" />

		<post-id xmlns="com-wordpress:feed-additions:1">34861</post-id>	</item>
		<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 loading="lazy" 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 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" 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-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 loading="lazy" 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">🛠️ création de sites</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>
		<item>
		<title>Prestashop &#124; Le Service Après Vente</title>
		<link>https://st9ph.fr/prestashop-le-service-apres-vente/</link>
					<comments>https://st9ph.fr/prestashop-le-service-apres-vente/#respond</comments>
		
		<dc:creator><![CDATA[St9ph]]></dc:creator>
		<pubDate>Sat, 24 Jan 2026 15:55:00 +0000</pubDate>
				<category><![CDATA[PrestaShop]]></category>
		<category><![CDATA[🛠️ création de sites]]></category>
		<category><![CDATA[🌐 public]]></category>
		<guid isPermaLink="false">https://st9ph.fr/?p=33379</guid>

					<description><![CDATA[<p>SAV prestashop,, commande prestashop en backoffice, messages prédéfinis prestashop</p>
<p>L’article <a href="https://st9ph.fr/prestashop-le-service-apres-vente/">Prestashop | Le Service Après Vente</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-80041ad0 wp-block-group-is-layout-flex">


<p class="has-medium-font-size"><strong>PrestaShop</strong></p>



<p class="has-accent-color has-text-color has-link-color has-x-large-font-size wp-elements-41a1768ce98e0c2fe985e76fbbec4046"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-contrast-color">|</mark> Service Après Vente</p>


</div>



<p class="has-medium-font-size">👉🏻 3ème bloc d&#8217;évaluation de l&#8217;épreuve technique, le SAV est lui aussi un <strong>incontournable de l&#8217;examen </strong>E5B du BTS NDRC.</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">
<h2 class="wp-block-heading has-base-2-background-color has-background has-medium-font-size" id="0-%E2%AC%85%EF%B8%8F-revenir-%C3%A0-la-1ere-partie-la-fiche-produit-">⬅️ Revenir à la 1ere partie | <a href="https://st9ph.fr/prestashop-la-fiche-produit/" target="_blank" rel="noreferrer noopener">La Fiche Produit</a> </h2>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h2 class="wp-block-heading has-base-2-background-color has-background has-medium-font-size" id="1-%E2%AC%85%EF%B8%8F-revenir-%C3%A0-la-2nde-partie-manipuler-la-boutique-">⬅️ Revenir à la 2nde partie | <a href="https://st9ph.fr/prestashop-manipuler-la-boutique/">manipuler la boutique</a> </h2>
</div>
</div>



<!-- =====================================================
     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>



<figure class="wp-block-audio"><audio controls src="https://st9ph.fr/wp-content/uploads/2026/01/voicertool_audio_Eloise_24-01-2026_at_23_13_14_on_January_24th_2026.mp3" autoplay></audio></figure>



<p>ℹ️ On va aller <strong>au delà de l&#8217;épreuve</strong> en évoquant aussi les enjeux et d&#8217;autres outils que le CMS Prestashop aussi.</p>



<p>🤔 On pense souvent à tord que le SAV est uniquement <strong>une charge, un cout impondérable</strong> pour son commerce à englober entre le loyer et les salaires. C&#8217;est surtout <strong>un investissement qui rapporte </strong>car l&#8217;impact sur la fidélisation se mesure à coup sûr :</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">
<div class="wp-block-uagb-counter uagb-block-f13acb8d wp-block-uagb-counter--circle"><div class="wp-block-uagb-counter-circle-container"><div class="wp-block-uagb-counter-circle-container__content"><span class="wp-block-uagb-counter__icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M480 128v208c0 97.05-78.95 176-176 176h-37.72c-53.42 0-103.7-20.8-141.4-58.58l-113.1-113.1C3.906 332.5 0 322.2 0 312C0 290.7 17.15 272 40 272c10.23 0 20.47 3.906 28.28 11.72L128 343.4V64c0-17.67 14.33-32 32-32s32 14.33 32 32l.0729 176C192.1 248.8 199.2 256 208 256s16.07-7.164 16.07-16L224 32c0-17.67 14.33-32 32-32s32 14.33 32 32l.0484 208c0 8.836 7.111 16 15.95 16S320 248.8 320 240L320 64c0-17.67 14.33-32 32-32s32 14.33 32 32l.0729 176c0 8.836 7.091 16 15.93 16S416 248.8 416 240V128c0-17.67 14.33-32 32-32S480 110.3 480 128z"></path></svg></span><div class="wp-block-uagb-counter__number"><span class="uagb-counter-block-number" data-duration="1.5" data-to-value="70" data-from-value="0" data-delimiter=","></span><span class="uagb-counter-block-suffix">%</span></div><div class="wp-block-uagb-counter__title"><strong>restent fidèles </strong>si leurs<br>problèmes sont<br><strong><mark style="background-color:rgba(0, 0, 0, 0);color:#33b758" class="has-inline-color">résolus</mark></strong></div></div><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 230 230" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="uagb-counter-circle__background"></circle><circle class="uagb-counter-circle__progress"></circle></svg></div></div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-uagb-counter uagb-block-5d5edfbd wp-block-uagb-counter--circle"><div class="wp-block-uagb-counter-circle-container"><div class="wp-block-uagb-counter-circle-container__content"><span class="wp-block-uagb-counter__icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M272 0C289.7 0 304 14.33 304 32C304 49.67 289.7 64 272 64H256V98.45C293.5 104.2 327.7 120 355.7 143L377.4 121.4C389.9 108.9 410.1 108.9 422.6 121.4C435.1 133.9 435.1 154.1 422.6 166.6L398.5 190.8C419.7 223.3 432 262.2 432 304C432 418.9 338.9 512 224 512C109.1 512 16 418.9 16 304C16 200 92.32 113.8 192 98.45V64H176C158.3 64 144 49.67 144 32C144 14.33 158.3 0 176 0L272 0zM248 192C248 178.7 237.3 168 224 168C210.7 168 200 178.7 200 192V320C200 333.3 210.7 344 224 344C237.3 344 248 333.3 248 320V192z"></path></svg></span><div class="wp-block-uagb-counter__number"><span class="uagb-counter-block-number" data-duration="1.5" data-to-value="90" data-from-value="0" data-delimiter=","></span><span class="uagb-counter-block-suffix">%</span></div><div class="wp-block-uagb-counter__title">si la solution intervient<br><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">dans les 24 heures</mark></strong></div></div><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 230 230" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="uagb-counter-circle__background"></circle><circle class="uagb-counter-circle__progress"></circle></svg></div></div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-uagb-counter uagb-block-c5578d01 wp-block-uagb-counter--circle"><div class="wp-block-uagb-counter-circle-container"><div class="wp-block-uagb-counter-circle-container__content"><span class="wp-block-uagb-counter__icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M256 448c0 17.67-14.33 32-32 32H32c-17.67 0-32-14.33-32-32s14.33-32 32-32h64V123.8L49.75 154.6C35.02 164.5 15.19 160.4 5.375 145.8C-4.422 131.1-.4531 111.2 14.25 101.4l96-64c9.828-6.547 22.45-7.187 32.84-1.594C153.5 41.37 160 52.22 160 64.01v352h64C241.7 416 256 430.3 256 448z"></path></svg></span><div class="wp-block-uagb-counter__number"><span class="uagb-counter-block-number" data-duration="1.5" data-to-value="99" data-from-value="0" data-delimiter=","></span><span class="uagb-counter-block-suffix">%</span></div><div class="wp-block-uagb-counter__title">en<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"><strong> FCR</strong> </mark>(résolution au<br>1er contact)</div></div><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 230 230" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="uagb-counter-circle__background"></circle><circle class="uagb-counter-circle__progress"></circle></svg></div></div>
</div>
</div>



<p class="has-small-font-size">Source : <a href="https://www.revers.io/fr/blog/que-veut-dire-sav-definition-role-impact-pour-les-entreprises" target="_blank" rel="noreferrer noopener">Revers.io</a></p>



<ul class="wp-block-list">
<li>Dans certaines industries, les services après-vente représentent <strong>jusqu’à 25 % du chiffre d’affaires total</strong>.</li>



<li>Les marges sur services après-vente (réparations, maintenance, abonnements, garanties étendues) peuvent être <strong>bien supérieures à celles de la vente de produits neufs</strong> (parfois jusqu’à <strong>2× plus</strong>)</li>



<li>Un SAV performant peut <strong>réduire le churn (départ des clients) de 36 %</strong> et augmenter<strong> la satisfaction de +33 %</strong> grâce à des approches proactives et personnalisées.</li>
</ul>



<p class="has-small-font-size">Source : <a href="https://agentiveaiq.com/blog/the-strategic-power-of-after-sales-support-in-2025" target="_blank" rel="noreferrer noopener">agentive aiq</a> <img loading="lazy" decoding="async" width="22" height="19" class="wp-image-33384" style="width: 22px;" src="https://st9ph.fr/wp-content/uploads/2026/01/GB.jpg" alt=""></p>



<p class="has-base-2-background-color has-background">🤫 Pour l&#8217;avoir expérimenté dans ma substantielle carrière en maintenance informatique puis chez les FAI, je dirais même que le premier conseil serait d<strong>&#8216;éviter de commercialiser des produits et des services qui vont aimanter l&#8217;insatisfaction client</strong> ; bref, de commencer la relation client en ne vendant que des produits qu&#8217;on aurait soi-même envie d&#8217;acheter (mais ce n&#8217;est pas toujours possible).</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:33.33%"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" 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>
</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-f79a6c07-3ae1-41d9-9c76-b1763126d540">
			<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-f79a6c07-3ae1-41d9-9c76-b1763126d540-0"><rect height="150" width="75" 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-f79a6c07-3ae1-41d9-9c76-b1763126d540-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-f79a6c07-3ae1-41d9-9c76-b1763126d540-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-f79a6c07-3ae1-41d9-9c76-b1763126d540-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-f79a6c07-3ae1-41d9-9c76-b1763126d540-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-f79a6c07-3ae1-41d9-9c76-b1763126d540-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-f79a6c07-3ae1-41d9-9c76-b1763126d540-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-f79a6c07-3ae1-41d9-9c76-b1763126d540-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-f79a6c07-3ae1-41d9-9c76-b1763126d540-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-f79a6c07-3ae1-41d9-9c76-b1763126d540-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-276560c8-f0ca-42e8-89ab-d323ad7d8f63">
			<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-276560c8-f0ca-42e8-89ab-d323ad7d8f63-0"><rect height="150" width="150" 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-276560c8-f0ca-42e8-89ab-d323ad7d8f63-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-276560c8-f0ca-42e8-89ab-d323ad7d8f63-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-276560c8-f0ca-42e8-89ab-d323ad7d8f63-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-276560c8-f0ca-42e8-89ab-d323ad7d8f63-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-276560c8-f0ca-42e8-89ab-d323ad7d8f63-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-276560c8-f0ca-42e8-89ab-d323ad7d8f63-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-276560c8-f0ca-42e8-89ab-d323ad7d8f63-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-276560c8-f0ca-42e8-89ab-d323ad7d8f63-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-276560c8-f0ca-42e8-89ab-d323ad7d8f63-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-5dd76cbf-e081-4eb9-b219-5466db409319">
			<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-5dd76cbf-e081-4eb9-b219-5466db409319-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-5dd76cbf-e081-4eb9-b219-5466db409319-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-5dd76cbf-e081-4eb9-b219-5466db409319-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-5dd76cbf-e081-4eb9-b219-5466db409319-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-5dd76cbf-e081-4eb9-b219-5466db409319-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-5dd76cbf-e081-4eb9-b219-5466db409319-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-5dd76cbf-e081-4eb9-b219-5466db409319-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-5dd76cbf-e081-4eb9-b219-5466db409319-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-5dd76cbf-e081-4eb9-b219-5466db409319-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-5dd76cbf-e081-4eb9-b219-5466db409319-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">44–66 minutes</div>


<p>|</p>


<div class="wp-block-post-time-to-read">10 322 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-30T22:32:00+02:00">30 mars  2026</time></div></div>


				<div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-6a463aed      uagb-toc__collapse--list"
					data-scroll= "1"
					data-offset= "30"
					style=""
				>
				<div class="uagb-toc__wrap">
						<div class="uagb-toc__title">
							au menu de cette 3ème partie						</div>
												<div class="uagb-toc__loader"></div>										<div class="uagb-toc__list-wrap uagb-toc__list-hidden">
						<ol class="uagb-toc__list"><li class="uagb-toc__list "><a href="#revenir-à-la-1ere-partie-la-fiche-produit" class="uagb-toc-link__trigger">⬅️ Revenir à la 1ere partie | La Fiche Produit</a><li class="uagb-toc__list "><a href="#revenir-à-la-2nde-partie-manipuler-la-boutique" class="uagb-toc-link__trigger">⬅️ Revenir à la 2nde partie | manipuler la boutique</a><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#0-lorganisation-du-service-client" class="uagb-toc-link__trigger">0️⃣ | l&#039;organisation du service client</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#0-1-le-ticketing" class="uagb-toc-link__trigger">0-1 | Le ticketing 🎫</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#0-2-les-différentes-missions-du-sav" class="uagb-toc-link__trigger">0-2 | Les différentes missions du SAV</a></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#organisation-du-service-client" class="uagb-toc-link__trigger">Organisation du service client</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#11-les-communications-automatiques-de-la-boutique-information" class="uagb-toc-link__trigger">🔹1.1 |les communications automatiques de la boutique (information)</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#12-les-messages-prédéfinis-pour-simplifier-les-réponses" class="uagb-toc-link__trigger">🔹1.2 |les messages prédéfinis pour simplifier les réponses</a></li></ul></li></ul></li><li class="uagb-toc__list "><a href="#2-informer-servir" class="uagb-toc-link__trigger">2️⃣| Informer &amp; Servir</a><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#informer-et-servir" class="uagb-toc-link__trigger">Informer et servir</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#21-typologies-front-et-back-du-compte-client" class="uagb-toc-link__trigger">🔹2.1 |typologies Front et Back du compte client</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#22-sujets-fréquents" class="uagb-toc-link__trigger">🔹2.2 |sujets fréquents</a></li></ul></li></ul></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#conseiller-et-vendre" class="uagb-toc-link__trigger">conseiller et vendre</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#31-push-suite-à-une-commande-impossible-à-finaliser" class="uagb-toc-link__trigger">🔹3.1 |Push suite à une commande impossible à finaliser</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#t-shirt-petit-dauphin" class="uagb-toc-link__trigger">T-Shirt Petit Dauphin</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#3-2-prise-de-commande" class="uagb-toc-link__trigger">3-2 | Prise de commande</a></li></ul></li></ul></li></ul></li></ul></li><li class="uagb-toc__list "><a href="#4-historiser-sans-contact" class="uagb-toc-link__trigger">4️⃣| Historiser sans &quot;contact&quot;</a></ul></ul></ul></ul></ol>					</div>
									</div>
				</div>
			


<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-3329421f8be055958a2d740e4d836073" id="2-0%EF%B8%8F%E2%83%A3-lorganisation-du-service-client">0️⃣ | l&#8217;organisation du service client</h2>


<div class="wp-block-ub-table-of-contents-block ub_table-of-contents" id="ub_table-of-contents-d81d7290-510e-4a1a-90e6-2524de52d8a3" data-linktodivider="false" data-showtext="show" data-hidetext="hide" data-scrolltype="auto" data-enablesmoothscroll="false" data-initiallyhideonmobile="false" data-initiallyshow="true"><div class="ub_table-of-contents-header-container" style="">
			<div class="ub_table-of-contents-header" style="text-align: left; ">
				<div class="ub_table-of-contents-title" style=""></div>
				
			</div>
		</div><div class="ub_table-of-contents-extra-container" style="">
			<div class="ub_table-of-contents-container ub_table-of-contents-1-column ">
				<ul style=""><li style=""><a href="https://st9ph.fr/prestashop-le-service-apres-vente/#3-0-1-le-ticketing-" style="">0-1 | Le ticketing 🎫</a></li><li style=""><a href="https://st9ph.fr/prestashop-le-service-apres-vente/#4-0-2-les-diff%C3%A9rentes-missions-du-sav-" style="">0-2 | Les différentes missions du SAV</a></li><li style=""><a href="https://st9ph.fr/prestashop-le-service-apres-vente/#5-11-l-es-communications-automatiques-de-la-boutique-information-" style="">🔹1.1 |les communications automatiques de la boutique (information)</a></li><li style=""><a href="https://st9ph.fr/prestashop-le-service-apres-vente/#6-12-les-messages-pr%C3%A9d%C3%A9finis-pour-simplifier-les-r%C3%A9ponses-" style="">🔹1.2 |les messages prédéfinis pour simplifier les réponses</a></li><li style=""><a href="https://st9ph.fr/prestashop-le-service-apres-vente/#8-21-typologies-front-et-back-du-compte-client-" style="">🔹2.1 |typologies Front et Back du compte client</a></li><li style=""><a href="https://st9ph.fr/prestashop-le-service-apres-vente/#9-22-sujets-fr%C3%A9quents-" style="">🔹2.2 |sujets fréquents</a></li><li style=""><a href="https://st9ph.fr/prestashop-le-service-apres-vente/#10-31-push-suite-%C3%A0-une-commande-impossible-%C3%A0-finaliser-" style="">🔹3.1 |Push suite à une commande impossible à finaliser</a></li></ul>
			</div>
		</div></div>


<h3 class="wp-block-heading" id="3-0-1-le-ticketing-">0-1 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Le ticketing</mark> 🎫</h3>



<p>👉 <strong>Le ticketing</strong>, c&#8217;est le fait de <strong>centraliser </strong>sur le CRM<strong> une demande de SAV</strong> afin que<strong> tous les opérateurs y aient accès </strong>et puissent<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"> suivre les différentes étapes de la résolution</mark></strong> (sans les répéter ou les contredire).</p>



<p>Chaque <strong>ticket </strong>comporte jusqu&#8217;à sa résolution <strong>trois statuts </strong>:</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:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="600" height="600" src="https://st9ph.fr/wp-content/uploads/2026/01/image-298.png" alt="" class="wp-image-33388" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-298.png 600w, https://st9ph.fr/wp-content/uploads/2026/01/image-298-300x300.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-298-150x150.png 150w" sizes="auto, (max-width: 600px) 100vw, 600px" /><figcaption class="wp-element-caption">source de l&#8217;image <a href="https://www.redbubble.com/i/sticker/No-Ticket-No-Support-IT-Specialist-IT-Admin-Administrator-by-Tig3rE/160761915.EJUG5" target="_blank" rel="noreferrer noopener">Redbubble</a></figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%"><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;%23cf2e2e&quot; d=&quot;M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z&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-7ad649a9-aaad-4889-8240-5286eebffcde">
<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;%23cf2e2e&quot; d=&quot;M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-85227bdc-d55e-43bc-ad7a-336c741eb14e">
			<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="#cf2e2e" d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>En attente </strong>de prise en charge (on mesurera le temps de prise en charge pour définir notre performance)</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 512 512&quot;&gt;&lt;path fill=&quot;%23ff6900&quot; d=&quot;M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-a689c736-aeb1-4d12-90d9-486712a901e2">
			<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="#ff6900" d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>En cours </strong>de résolution (on comptera le temps de résolution et le nombre d&#8217;étapes qui ont été nécessaires)</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-378baed7-1a90-4bda-b2cd-929eed33b5c6">
			<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="#00d084" d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Résolu</strong> quand la demande est traitée (et là, c&#8217;est le taux FCR qui sera mis en avant) </span>
			</div>
			
		</li>
</ul>


<p class="has-base-2-background-color has-background">Ainsi, chaque opérateur de SAV peut <strong>facilement gérer les files de ticket</strong> et n&#8217;ouvrir que les 🟠🔴</p>
</div>
</div>



<p>⬆️  Bon nombre de services informatiques apposent (en clin d&#8217;œil à la chanson de Bob Marley,  probablement) <strong>ce genre de stickers</strong> sur leur porte car leur première mission est d&#8217;<strong>éduquer les collaborateurs à utiliser l&#8217;outil</strong> : &#8220;<em>Tu nous as fait un ticket </em>?&#8221;</p>



<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary>🤔 Le FCR</summary>
<p><strong>First Contact Résolution</strong> (<a href="https://st9ph.fr/%f0%9f%8f%b7%ef%b8%8fanimation-rc-la-satisfaction-client/" target="_blank" rel="noreferrer noopener">voir l&#8217;article sur la satisfaction clien</a>t partie 2 dans CES) pour<strong> résolution au 1er contact</strong></p>
</details>



<p class="has-base-2-background-color has-background">Au début de ma carrière où je devais gérer un parc informatique sur plusieurs sites (sans grande expérience) j&#8217;ai <strong>tardé à mettre en place cette démarche</strong> et je peux témoigner de <strong>l&#8217;insatisfaction client </strong>que cela a généré😡. Les collègues du site où j&#8217;étais le plus souvent étaient <strong>privilégiés </strong>parce qu&#8217;il leur suffisait de me coincer dans un couloir avec leur ordinateur en panne et de me le coller dans les bras pour être dépannés, tandis que les autres devaient <strong>multiplier les appels téléphoniques </strong>pour me joindre ou pour que je me déplace enfin. <strong>L&#8217;opportunité n&#8217;est pas une priorité en la matière.</strong></p>



<p>Ci dessous, <strong>une ligne de ticket dans le SAV Prestashop</strong></p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="80" src="https://st9ph.fr/wp-content/uploads/2026/01/image-299-1024x80.png" alt="" class="wp-image-33389" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-299-1024x80.png 1024w, https://st9ph.fr/wp-content/uploads/2026/01/image-299-300x24.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-299-768x60.png 768w, https://st9ph.fr/wp-content/uploads/2026/01/image-299.png 1121w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>On dispose d&#8217;une &#8220;<strong>timeline</strong>&#8221; où <strong>visualiser</strong> la chronologie de la résolution :</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="832" src="https://st9ph.fr/wp-content/uploads/2026/01/image-301-1024x832.png" alt="" class="wp-image-33391" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-301-1024x832.png 1024w, https://st9ph.fr/wp-content/uploads/2026/01/image-301-300x244.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-301-768x624.png 768w, https://st9ph.fr/wp-content/uploads/2026/01/image-301.png 1048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>👉 Tous les éléments sont <strong>réactifs </strong>et permettent d<strong>&#8216;accéder aux informations et outils</strong> en lien avec le ticket afin de le gérer le plus efficacement possible.</p>



<p>ℹ️ Dans Prestashop, un ticket prend <strong>automatiquement le statut &#8220;résolu&#8221; dès que vous avez répondu</strong> à un client (FCR) mais <strong>vous pouvez manuellement </strong>garder le statut &#8220;en cours&#8221; s&#8217;il y&#8217;a une Next Step.</p>



<div class="bloc-attention">
  🖥️ A l&#8217;examen, <strong>ne répondez pas n&#8217;importe quoi à votre client ! </strong> Etudiez la timeline, faites les opérations de SAV qu&#8217;exigent la situation, puis, seulement, répondez lui que son cas est traité.
</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>



<h3 class="wp-block-heading" id="4-0-2-les-diff%C3%A9rentes-missions-du-sav-">0-2 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Les différentes missions du SAV</mark></h3>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="874" height="500" src="https://st9ph.fr/wp-content/uploads/2026/01/image-296.png" alt="" class="wp-image-33385" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-296.png 874w, https://st9ph.fr/wp-content/uploads/2026/01/image-296-300x172.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-296-768x439.png 768w" sizes="auto, (max-width: 874px) 100vw, 874px" /></figure>



<ul class="wp-block-list">
<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Anticiper et prévenir</mark></strong> (pour éviter les tickets !)
<ul class="wp-block-list">
<li>surveiller les <strong>ruptures de stock</strong> 📦, alerter les clients en cas de 🚚 <mark style="background-color:rgba(0, 0, 0, 0);color:#d62d2d" class="has-inline-color">r<strong>etard de livraison</strong></mark>&#8230;</li>



<li>alerter sur <strong>les </strong><mark style="background-color:rgba(0, 0, 0, 0);color:#d62e2e" class="has-inline-color"><strong>erreurs smtp</strong> </mark>📩 (livraison de mails) car <strong>c&#8217;est gravissime si l&#8217;adresse du client est fausse</strong>.</li>



<li>indiquer clairement 📆 <strong>les dates de fins de vos promotions</strong>, les ⚠️<strong><mark style="background-color:rgba(0, 0, 0, 0);color:#cd2a2a" class="has-inline-color">quantités limitées</mark>, </strong>les ❌<strong><mark style="background-color:rgba(0, 0, 0, 0);color:#c23131" class="has-inline-color">tailles manquantes</mark> </strong>&#8230; pour <strong>réduire les protestations</strong></li>



<li>Soyez <strong>en veille de vos fournisseurs </strong>(<mark style="background-color:rgba(0, 0, 0, 0);color:#cb2d2d" class="has-inline-color">ruptures de pièces</mark>, 🥵 <strong>périodes de montée en charge</strong> &#8230;), <strong>de l&#8217;actualité</strong> 🌨️ (comme <mark style="background-color:rgba(0, 0, 0, 0);color:#c83636" class="has-inline-color">les grèves ou la météo</mark> qui peuvent impacter vos délais)</li>



<li>Surveillez <strong>les retours produits</strong> 🔄️ (<mark style="background-color:rgba(0, 0, 0, 0);color:#dd3636" class="has-inline-color">mauvaises séries, client déçus en réel, colis refusés</mark> &#8230;) quand ils sont r<strong>écurrents pour une référence, une marque, un fournisseur</strong>. Il y&#8217;a 👎🏻<strong>un défaut </strong>dans <strong>sa nature</strong>, dans l<strong>&#8216;image que vous en donnez </strong>dans votre fiche produit <strong>ou dans le processus </strong>de livraison.</li>



<li>Surveillez ⭐<strong>les avis clients </strong>sur vos produits. <mark style="background-color:rgba(0, 0, 0, 0);color:#cc2828" class="has-inline-color">La récurrence de points négatifs sur un produit doit vous alerter</mark>.</li>
</ul>
</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" style="flex-basis:66.66%">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (VERSION URL UNIQUE) -->
<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); }
    .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; }
    .zoom-modal-content { max-width: 90%; max-height: 90%; 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; }
    .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/01/image-349.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>
</div>

<!-- LE POPUP -->
<div id="myZoomModal" class="zoom-modal" onclick="closeZoomModal()">
    <span class="zoom-close">&times;</span>
    <img class="zoom-modal-content" id="img01">
</div>

<script>
    function openZoomModal(element) {
        // L'astuce : On récupère l'URL directement depuis l'image cliquée !
        const clickedImg = element.querySelector('img');
        const fullSizeUrl = clickedImg.src;
        
        const modal = document.getElementById("myZoomModal");
        const modalImg = document.getElementById("img01");
        
        modalImg.src = fullSizeUrl;
        modal.classList.add("show");
    }

    function closeZoomModal() {
        const modal = document.getElementById("myZoomModal");
        modal.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            closeZoomModal();
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</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/2025/12/mauvaiseTaille2.jpg" 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><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Informer et Servir</mark></strong>
<ul class="wp-block-list">
<li>Donnez des 🪛 <strong>outils de selfcare </strong>et rendez vos clients <strong>autonomes🤩 </strong>pour gérer leur <strong>compte client </strong>(télécharger leurs factures, suivre l&#8217;état d&#8217;expédition de leurs colis &#8230; )</li>



<li>Certains <strong>produits techniques </strong>🖨️sont <strong>difficiles à prendre en main</strong>. Joignez <strong>un mode d&#8217;emploi</strong> <img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""> à votre fiche produit peut vous éviter <mark style="background-color:rgba(0, 0, 0, 0);color:#c33838" class="has-inline-color">de longues conversations téléphoniques et des tickets en pagaille.</mark></li>



<li>☝🏻<strong>Faire pour eux </strong>(commander, agir sur leur compte &#8230;), <strong>c&#8217;est votre mission aussi</strong>, mais en leur expliquant également qu&#8217;ils ont <strong>le &#8220;pouvoir&#8221; de le faire par eux-mêmes </strong>afin de les rendre le plus autonome possible.</li>
</ul>
</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Améliorer et remplacer</mark></strong>
<ul class="wp-block-list">
<li>Soyez <strong>proactifs </strong>pour <strong>la relance mail </strong>📨(obsolescence, fin de CLV &#8230;)</li>



<li><strong>Informez </strong>les logisticiens 👩🏻‍💻 des <strong>problématiques récurrentes </strong>pour qu&#8217;ils améliorent les process (<mark style="background-color:rgba(0, 0, 0, 0);color:#e13f3f" class="has-inline-color">menu compliqué, fiche produit trompeuse</mark>) et vos transporteurs des <strong>insatisfactions</strong> les concernant dans les tickets🎫 (<mark style="background-color:rgba(0, 0, 0, 0);color:#d52a2a" class="has-inline-color">état des colis, temps de livraison</mark> &#8230;)</li>
</ul>
</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Réparer</mark></strong>
<ul class="wp-block-list">
<li>soyez <strong>efficaces dans votre prise en charge</strong> ⏱️. Votre capacité à dépanner sera prépondérante pour votre réputation et pour la fidélisation</li>
</ul>
</li>
</ul>



<!-- DÉBUT TITRE CHAPITRE -->
<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%; }
.chapter-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.chapter-logo { width: 42px; height: 42px; flex-shrink: 0; display:block; }
.chapter-logo img { width: 100%; height: 100%; object-fit: contain; }
.chapter-content h2 { margin: 0; font-size: 2.1rem; font-weight: 700; color: #1e73be; }
.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">1</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">
      </a>
      <h2>Organisation du service client</h2>
    </div>
    <ul class="chapter-points"><li>le ticketing</li><li>les différentes missions</li></ul>
  </div>
</div>
<!-- FIN TITRE CHAPITRE -->



<h3 class="wp-block-heading" id="5-11-l-es-communications-automatiques-de-la-boutique-information-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.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="">l<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">es communications automatiques de la boutique </mark>(information)</strong></h3>



<p>👉 Le maître mot étant <strong>la Proactivité </strong>pour <strong>anticiper les problèmes</strong>, Prestashop va nous aider en amont en <strong>informant les client</strong>s <strong>automatiquement à toutes les étapes de sa relation client</strong> (inscriptions et commandes).</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:33.33%"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="128" height="125" src="https://st9ph.fr/wp-content/uploads/2026/01/image-305.png" alt="" class="wp-image-33398"/></figure>
</div>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="425" height="138" src="https://st9ph.fr/wp-content/uploads/2026/01/image-304.png" alt="" class="wp-image-33397" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-304.png 425w, https://st9ph.fr/wp-content/uploads/2026/01/image-304-300x97.png 300w" sizes="auto, (max-width: 425px) 100vw, 425px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<ul class="wp-block-list has-medium-font-size">
<li>Panier abandonné</li>
</ul>



<p class="has-background" style="background-color:#9decf533">Des modules optionnels tel que «&nbsp;<em><strong>Relancez vos clients&nbsp;</strong></em>» permettent de générer un mail de relance accompagné d’un coupon réduction pour les clients qui renoncent à commander (<a href="https://st9ph.fr/outils-gratuits-de-fidelisation-clients-dans-prestashop/" target="_blank" rel="noreferrer noopener">voir ici</a>)</p>



<p>✅ Les tickets pour retrouver ceux qui ont été <strong>abandonnés accidentellement </strong>(rares) seront évités.</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%"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="128" height="125" src="https://st9ph.fr/wp-content/uploads/2026/01/image-308.png" alt="" class="wp-image-33401"/></figure>
</div>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="456" height="138" src="https://st9ph.fr/wp-content/uploads/2026/01/image-307.png" alt="" class="wp-image-33400" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-307.png 456w, https://st9ph.fr/wp-content/uploads/2026/01/image-307-300x91.png 300w" sizes="auto, (max-width: 456px) 100vw, 456px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<ul class="wp-block-list has-medium-font-size">
<li>Commande validée</li>
</ul>



<p class="has-background" style="background-color:#9decf533">Elle génère un mail récapitulatif avec un <strong>numéro de commande</strong> que le client pourra suivre grâce au lien de notre prestataire de livraison.</p>



<p>✅ Les tickets pour <strong>se rassurer que c&#8217;est le cas</strong>, et la plupart de ceux de <strong>nos clients impatients de recevoir leur produit </strong>seront évités.</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%"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="130" height="137" src="https://st9ph.fr/wp-content/uploads/2026/01/image-306.png" alt="" class="wp-image-33399"/></figure>
</div>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="418" height="112" src="https://st9ph.fr/wp-content/uploads/2026/01/image-309.png" alt="" class="wp-image-33402" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-309.png 418w, https://st9ph.fr/wp-content/uploads/2026/01/image-309-300x80.png 300w" sizes="auto, (max-width: 418px) 100vw, 418px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<ul class="wp-block-list has-medium-font-size">
<li>Paiement accepté</li>
</ul>



<p class="has-background" style="background-color:#9decf533">Il génère un mail de confirmation et la <strong>facture</strong> qui est jointe au courrier (c&#8217;est aussi une <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=""> <strong>obligation légale</strong>)</p>



<p>✅ Les tickets de ceux de <strong>nos clients </strong>qui ont besoin d&#8217;une facture pour leur comptabilité (B2B) seront évités.</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%"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="128" height="124" src="https://st9ph.fr/wp-content/uploads/2026/01/image-310.png" alt="" class="wp-image-33404"/></figure>
</div>


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



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<ul class="wp-block-list has-medium-font-size">
<li>Préparation de la commande</li>
</ul>



<p class="has-background" style="background-color:#9decf533">Il génère <strong>un mail d&#8217;avertissement </strong>dès qu&#8217;un opérateur de la plateforme logistique ouvre <strong>le ticket de traitement</strong>. Eux aussi fonctionnent en ticketing.</p>



<p>✅ Là encore, c&#8217;est <strong>un effet rassurant</strong>, permettant au client de constater que <strong>le processus suit son cours </strong>et de ne pas s&#8217;impatienter.</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%"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="128" height="124" src="https://st9ph.fr/wp-content/uploads/2026/01/image-312.png" alt="" class="wp-image-33406"/></figure>
</div>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="421" height="118" src="https://st9ph.fr/wp-content/uploads/2026/01/image-313.png" alt="" class="wp-image-33407" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-313.png 421w, https://st9ph.fr/wp-content/uploads/2026/01/image-313-300x84.png 300w" sizes="auto, (max-width: 421px) 100vw, 421px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<ul class="wp-block-list has-medium-font-size">
<li>Expédition</li>
</ul>



<p class="has-background" style="background-color:#9decf533">La prise en charge par le transporteur génère elle aussi un mail pour prévenir le destinataire avec un lien de suivi et (souvent) la possibilité de redéfinir un RDV de passage du livreur si celui initialement prévu ne convient pas</p>



<p>✅ <strong>la charge des plateformes téléphoniques</strong> et <strong>le nombre de tickets </strong>ouvert pour du suivi de livraison <strong>ont fondu</strong> dans la dernière décennie depuis que ces outils ont été mis en place.</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%"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="128" height="138" src="https://st9ph.fr/wp-content/uploads/2026/01/image-314.png" alt="" class="wp-image-33408"/></figure>
</div>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="421" height="163" src="https://st9ph.fr/wp-content/uploads/2026/01/image-319.png" alt="" class="wp-image-33418" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-319.png 421w, https://st9ph.fr/wp-content/uploads/2026/01/image-319-300x116.png 300w" sizes="auto, (max-width: 421px) 100vw, 421px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<ul class="wp-block-list has-medium-font-size">
<li>Livraison</li>
</ul>



<p class="has-background" style="background-color:#9decf533">La livraison <strong>&#8220;en mains propres</strong>&#8221; ou <strong>au mandataire</strong> du client à domicile ou sur le point relais génère<strong>un bon de livraison</strong> et il est fort conseillé d&#8217;inviter le client à <strong>vérifier le colis devant le livreur </strong>si celui-ci semble abimé ou suspect (bruit inquiétant de casse, dimensions vraiment peu adéquates de l&#8217;emballage &#8230;)</p>



<p>✅ <strong>l</strong>e <strong>retour immédiat d&#8217;un produit défectueux</strong> évitera une série d&#8217;échanges dans un ticket et sera un gain de temps pour tous.</p>
</div>
</div>



<p>➡️ Nous n&#8217;avons abordé que <strong>le tunnel d&#8217;achat</strong> mais la liste des mails automatiques ne s&#8217;arrête pas là :</p>



<ul class="wp-block-list">
<li>L&#8217;abonnement à <strong>la newsletter </strong>génère un mail (si vous n&#8217;abusez pas dans votre communication, vous éviterez pas mal de tickets d&#8217;opt-out)</li>



<li>La <strong>création d&#8217;un compte client</strong> ou le<strong>s modifications importantes </strong>comme le changement d&#8217;adresses (postale ou mail) qui sont <strong>une sorte de reformulation de la demande client </strong>lui permettra de lui-même de contrôler qu&#8217;il a bien saisi les bonnes)</li>
</ul>



<p class="has-base-2-background-color has-background">👉 Il est conseillé d&#8217;<strong>accuser réception </strong>de tout ce qui va<strong> impacter la relation client</strong>. Un mail ou un adresse postale erronés seront le début d&#8217;un ticket interminable et délicat.</p>



<p>➡️ <strong>L&#8217;intelligence artificielle</strong> peut vous aider à identifier les problématiques et y répondre. Il existe <a href="https://addons.prestashop.com/fr/442-service-client" target="_blank" rel="noreferrer noopener">des modules pour cela</a> (un peu chers) :</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="355" height="168" src="https://st9ph.fr/wp-content/uploads/2026/01/image-315.png" alt="" class="wp-image-33409" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-315.png 355w, https://st9ph.fr/wp-content/uploads/2026/01/image-315-300x142.png 300w" sizes="auto, (max-width: 355px) 100vw, 355px" /></figure>
</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="357" height="167" src="https://st9ph.fr/wp-content/uploads/2026/01/image-316.png" alt="" class="wp-image-33410" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-316.png 357w, https://st9ph.fr/wp-content/uploads/2026/01/image-316-300x140.png 300w" sizes="auto, (max-width: 357px) 100vw, 357px" /></figure>
</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="355" height="166" src="https://st9ph.fr/wp-content/uploads/2026/01/image-317.png" alt="" class="wp-image-33411" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-317.png 355w, https://st9ph.fr/wp-content/uploads/2026/01/image-317-300x140.png 300w" sizes="auto, (max-width: 355px) 100vw, 355px" /></figure>
</div>
</div>



<p>ℹ️ Je n&#8217;en ai testé aucun (c&#8217;est un investissement et ma boutique, rappelons-le, ne me rapporte rien) mais voyez déjà avec les outils que j&#8217;évoque <a href="https://st9ph.fr/outils-gratuits-de-fidelisation-clients-dans-prestashop/" target="_blank" rel="noreferrer noopener">dans cet article</a> qui, eux, sont tous gratuits.</p>



<p class="has-base-2-background-color has-background">👉 Ce qui est certain, c&#8217;est que <strong>l&#8217;IA ne prendra aucune décision sans avoir appris vos règles</strong> et que malgré sa capacité à<strong> générer des mails irréprochables</strong>, il faudra <strong>contrôler son action</strong>.</p>



<p>➡️La boutique pédagogique utilise 2 outils avec 0% d&#8217;IA qui permettent eux aussi d&#8217;informer d&#8217;informer et de répondre aux questions courantes : un <strong>ChatBot </strong>et une <strong>FAQ </strong>:</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="910" height="432" src="https://st9ph.fr/wp-content/uploads/2026/01/image-297.png" alt="" class="wp-image-33387" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-297.png 910w, https://st9ph.fr/wp-content/uploads/2026/01/image-297-300x142.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-297-768x365.png 768w" sizes="auto, (max-width: 910px) 100vw, 910px" /></figure>



<p>👉 Ces deux outils visent à réduire le nombre de tickets qui vont nous parvenir en BackOffice en expliquant <strong>comment résoudre par soi-même les difficultés les plus récurrentes</strong> qu&#8217;on peut rencontrer dans la boutique comme retrouver le mail de téléchargement de produits commandés arrivé en spam ou une facture dans le compte client.</p>



<ul class="wp-block-list">
<li>Suivez <strong>les statistiques de vos tickets</strong> pour tenter d&#8217;améliorer encore cet <strong>entonnoir de la résolution</strong>.</li>



<li>Il est intéressant aussi de <strong>réunir les téléopérateurs </strong>pour les sonder sur <strong>les problématiques récurrentes </strong>qu&#8217;ils ont rencontré (Chat et Phoning) afin d&#8217;<strong>enrichir ces outils qui sont en fait des filtre</strong>s.</li>
</ul>



<p class="has-base-2-background-color has-background">💡 Proposez toujours <strong>la mise en relation avec un humain</strong> en bout sur vos ChatBot et VoiceBot pour <strong>une entière satisfaction client</strong>. Ils comprendront que vous ayez <strong>besoin de filtrer les demandes basiques</strong> mais attendront de vous <strong>une expertise humaine pour leurs demandes plus complexes</strong>.</p>



<h3 class="wp-block-heading" id="6-12-les-messages-pr%C3%A9d%C3%A9finis-pour-simplifier-les-r%C3%A9ponses-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.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>les messages prédéfinis pour simplifier les réponses</strong></h3>



<p>👉 Prestashop nous donne la possibilité d&#8217;enregistrer des messages prédéfinis qu&#8217;il suffira de <strong>personnaliser avant l&#8217;envoi</strong>. C&#8217;est un grain de temps énorme pour <strong>les demandes bien identifiées</strong> qui ne demandent pas d<strong>&#8216;investigation particulière</strong>.</p>



<p class="callout bleu">ℹ️ En rappel cette <img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""><a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2959/preview/pdf/5595" target="_blank" rel="noreferrer noopener">fiche ressource</a> (page 3) pour <strong>les étapes du mail </strong>commercial. Pour nous, la phase <strong>Introduction / Reformulation</strong> sera <strong>une reformulation du contexte du ticket</strong></p>



<p class="has-base-2-background-color has-background">Il arrivera d&#8217;ailleurs que vos clients auront <strong>plusieurs demandes en cours </strong>ou qu&#8217;ils <strong>ne se rappelleront même plus pourquoi </strong>&#8216;ils nous avaient écrit. Un petit &#8220;<em>refresh</em>&#8221; sera le bienvenu.</p>



<p>👉 N&#8217;oubliez pas de :</p>



<ol class="wp-block-list">
<li>Rappeler la <strong>référence de la commande</strong></li>



<li><strong>Remercier le client de nous avoir contactés</strong> (même s&#8217;il n&#8217;est pas content).</li>
</ol>



<ul class="wp-block-list">
<li>SAV &gt; SAV &gt;<strong> messages prédéfinis</strong></li>



<li>Cliquer sur le bouton &#8220;<strong>+ Ajouter un nouveau message de commande</strong>&#8220;</li>
</ul>



<p class="has-base-2-background-color has-background">On va prendre <strong>un exemple pas très facile</strong> : Annoncer aux clients qui veulent renvoyer un produit défectueux passé le délai de garantie que<strong> ce n&#8217;est pas possible </strong>! <a href="https://st9ph.fr/prestashop-cas-de-retours-produits/" target="_blank" rel="noreferrer noopener">Voir cet article</a> pour les cas et la procédure de retours produits.</p>



<ul class="wp-block-list">
<li>Donner un titre à votre message prédéfini (pour nous : &#8220;<em>refus retour produit hors délai garantie</em>&#8220;)</li>



<li>Ecrivez votre message. Pour nous, ça donnera cela :</li>
</ul>



<!-- DÉBUT MAIL HTML (V3.3) -->
<style>
    .preview-header-bar { background: #f8f9fa; border-bottom: 1px solid #ddd; padding: 15px; display: flex; justify-content: space-between; font-size: 13px; color: #555; flex-wrap: wrap; gap: 10px; font-family: sans-serif; }
    .preview-header-bar strong { color: #333; }
    .email-body-wrapper { max-width: 600px; margin: 0 auto; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; line-height: 1.6; background: #fff; }
    .email-logo { text-align: center; margin-bottom: 25px; }
    .email-logo img { max-width: 180px !important; height: auto !important; display: inline-block !important; margin: 0 auto !important; }
    
    .phase-row { display: flex; align-items: flex-start; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #eeeeee; }
    .phase-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .phase-label { width: 18%; font-size: 11px; font-weight: 700; color: #555555; text-transform: uppercase; line-height: 1.3; padding-top: 2px; flex-shrink: 0; }
    .phase-content { width: 82%; font-size: 14px; color: #333; padding-left: 20px; border-left: 2px solid #f0f0f0; }
    
    .phase-cta .phase-content { border-left: none; text-align: center; padding-left: 0; }
    .cta-button { display: inline-block; background: #25B9D7; color: #fff !important; text-decoration: none; padding: 12px 25px; border-radius: 5px; font-weight: bold; }
    
    .phase-signature .phase-content { font-weight: bold; border-left: none; padding-left: 0; white-space: normal; }
    
    .email-footer { background: #f4f4f4; padding: 20px; font-size: 11px; color: #777; text-align: center; margin-top: 20px; border-top: 1px solid #e0e0e0; }
    .footer-section { margin-bottom: 8px; }
    .footer-links a { color: #555; text-decoration: underline; }
    .social-icons { margin-top: 15px; }
    .social-icons img { width: 24px !important; height: 24px !important; margin: 0 5px !important; vertical-align: middle !important; display: inline-block !important; border: none !important; box-shadow: none !important; }
    
    @media (max-width: 768px) {
        .phase-row { flex-direction: column; }
        .phase-label { width: 100%; margin-bottom: 5px; color: #888; }
        .phase-content { width: 100%; padding-left: 0; border-left: none; }
    }
</style>

<div class="preview-header-bar">
    <span><strong>De :</strong> boutique st9ph</span>
    <span><strong>À :</strong> mail client</span>
    <span><strong>Objet :</strong> Votre demande de retour produit</span>
</div>

<div class="email-body-wrapper">
    <div class="email-logo"><img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/shop-st9ph-paysage.jpg" alt="Logo"></div>
    
    <div class="phase-row">
        <div class="phase-label">Salutations</div>
        <div class="phase-content">Bonjour[ Rayer l&#8217;inutile] Madame / Monsieur [écrire ici le nom]</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Intro ou reformulation</div>
        <div class="phase-content">Vous souhaitez nous renvoyer un ou plusieurs articles de votre commande [N°] et nous vous remercions de nous avoir contactés</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Proposition</div>
        <div class="phase-content">Le(s) produit(s) concerné(s) n&#8217;étant plus couvert(s) par la garantie (délai dépassé). Nous ne pouvons hélas pas répondre favorablement à votre demande.</div>
    </div>
    
    <div class="phase-row phase-cta">
        <div class="phase-label">Action</div>
        <div class="phase-content">
            <a href="https://shop.st9ph.fr/presta/fr/content/15-conditions-generales-de-vente" class="cta-button" target="_blank">voir les conditions générales de vente</a>
        </div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Next Step</div>
        <div class="phase-content">Nous ne manquerons pas de relayer votre mécontentement auprès de notre fournisseur et sommes navrés de votre déception.</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Congés</div>
        <div class="phase-content">Toute l&#8217;équipe st9ph Market vous remercie de votre compréhension et vous dit à bientôt sur notre boutique en ligne.</div>
    </div>
    
    <div class="phase-row phase-signature">
        <div class="phase-label">Signature</div>
        <div class="phase-content">[Prénom]<br>Votre conseiller commercial.</div>
    </div>
    
    <div class="email-footer">
        <div class="footer-section">vous recevez ce mail en tant que client de la boutique st9ph</div>
        <div class="footer-section footer-links"><a href="#">Se désinscrire</a></div>
        <div class="footer-section">Conformément à la loi informatique et libertés du 6 janvier 1978 complété par le règlement européen dit RGPD en vigueur depuis le 25 mai 2018, vous disposez d’un droit d’accès et de rectification sur les données vous concernant. Pour exercer ce droit : rubrique &#8220;mon compte&#8221; (accès &#038; modification) ou contactez-nous > sujet &#8220;mon compte&#8221; pour supprimer votre compte</div>
        <div class="footer-section">Utilisez le lien &#8220;contactez nous&#8221; pour toutes vos demandes au service client ou appelez le 📞3568</div>
        <div class="footer-section">shop.st9ph.fr &#8211; [mois -année]</div>
        <div class="social-icons"></div>
    </div>
</div>
<!-- FIN MAIL HTML -->



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="688" height="217" src="https://st9ph.fr/wp-content/uploads/2026/01/image-320.png" alt="" class="wp-image-33423" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-320.png 688w, https://st9ph.fr/wp-content/uploads/2026/01/image-320-300x95.png 300w" sizes="auto, (max-width: 688px) 100vw, 688px" /></figure>



<ul class="wp-block-list">
<li>Cliquer <strong>sur Enregistrer</strong></li>
</ul>



<p>➡️ Pour utiliser le message prédéfini</p>



<ul class="wp-block-list">
<li>Commandes &gt; <strong>Commandes</strong>, <strong>cliquez sur la commande ciblée</strong></li>



<li>(dans le bandeau de gauche en bas) <strong>Choisir le message prédéfini</strong> à utiliser</li>



<li>🖍️ <strong>Personnaliser</strong> le message (le modèle ne sera pas affecté)</li>



<li><mark style="background-color:rgba(0, 0, 0, 0);color:#9f3636" class="has-inline-color">N&#8217;oubliez surtout pas</mark> de <strong>cocher </strong>✅<strong><em> Montrer au client</em></strong></li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="532" height="251" src="https://st9ph.fr/wp-content/uploads/2026/01/image-321.png" alt="" class="wp-image-33424" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-321.png 532w, https://st9ph.fr/wp-content/uploads/2026/01/image-321-300x142.png 300w" sizes="auto, (max-width: 532px) 100vw, 532px" /></figure>



<ul class="wp-block-list">
<li>Cliquer sur <strong>envoyer</strong></li>
</ul>



<p><strong>Dans le SAV</strong>, on voit <strong>une nouvelle étape dans le ticket</strong> de ce suivi :</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/01/image-322.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 -->



<p class="callout bleu">🖥️ Cette série de manipulations est <strong>un grand classique à l&#8217;examen</strong> E5B</p>



<p>👉 <strong>Pour rappel</strong> :</p>



<ul class="wp-block-list">
<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">On reste factuel</mark></strong>. On ne rebondit pas sur <strong>les ressentis et les opinions</strong>.</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">On ne juge pas le client </mark></strong>(en essayant de lui démontrer qu&#8217;il a tord ou qu&#8217;il pourrait être plus poli)</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">On ne s&#8217;excuse que si on a fait une faute </mark></strong>(mais cela n&#8217;empêche pas de faire de l&#8217;empathie)</li>



<li><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"><strong>On ne fait pas dans la provocation</strong> </mark>(ici, j&#8217;ai remercié le client pour sa compréhension et non pas pour sa fidélité, comme on fait d&#8217;habitude, il pourrait mal le prendre alors que je lui dis non)</li>
</ul>



<div class="bloc-attention">
  🖥️ A l&#8217;examen,<strong>ne faites pas de propositions fantaisistes comme des gestes commerciaux.</strong> Ca plairait moyennement au jury ! 😡 Je rappelle qu&#8217;un geste commercial est fait pour rattraper une faute et que, là, nous n&#8217;en avons pas commise !
</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>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-6c18789acd40ace14ab92ecca958dd7c" id="7-2%EF%B8%8F%E2%83%A3-informer-amp-servir">2️⃣| Informer &amp; Servir</h2>



<!-- DÉBUT TITRE CHAPITRE -->
<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%; }
.chapter-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.chapter-logo { width: 42px; height: 42px; flex-shrink: 0; display:block; }
.chapter-logo img { width: 100%; height: 100%; object-fit: contain; }
.chapter-content h2 { margin: 0; font-size: 2.1rem; font-weight: 700; color: #1e73be; }
.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/st9ph-ico-sansTxt.png" alt="Logo">
      </a>
      <h2>Informer et servir</h2>
    </div>
    <ul class="chapter-points"><li>typologies front &#038; back du compte client</li><li>sujets fréquents</li></ul>
  </div>
</div>
<!-- FIN TITRE CHAPITRE -->



<p>➡️ Le compte client et l&#8217;interface dans laquelle chacun peut <strong>retrouver les interactions entre le client et la boutique</strong>.</p>



<p class="has-text-align-center has-medium-font-size" id="9-2-1-piloter-le-client-sur-son-compte-ou-agir-pour-lui-"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Piloter le client sur son compte ou agir pour lui</mark> ?</p>



<p>Vous devez <strong>maitriser la manière dont vos clients peuvent agir</strong> dans leur compte client <strong>afin de les guider </strong>dans les manipulations internes. Le panneau donne ça quand <strong>on clique sur son nom </strong><img loading="lazy" decoding="async" width="150" height="12" class="wp-image-33434" style="width: 150px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cpt-johnDoe.jpg" alt=""> dans le haut à droite du footer, juste à côté du panier :</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="361" src="https://st9ph.fr/wp-content/uploads/2026/01/image-323-1024x361.png" alt="" class="wp-image-33433" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-323-1024x361.png 1024w, https://st9ph.fr/wp-content/uploads/2026/01/image-323-300x106.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-323-768x271.png 768w, https://st9ph.fr/wp-content/uploads/2026/01/image-323.png 1193w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading" id="8-21-typologies-front-et-back-du-compte-client-" 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>typologies Front et Back du compte client</strong></h3>



<p>Voici la liste des actions possibles et leur équivalent en BackOffice :</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">
<p class="has-text-align-center has-medium-font-size">FrontOffice :</p>



<ul class="wp-block-list">
<li><img loading="lazy" decoding="async" width="19" height="19" class="wp-image-33435" style="width: 19px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cpte-info.jpg" alt=""> <strong>Informations</strong>
<ul class="wp-block-list">
<li>🆔 Modifier ses informations d<strong>&#8216;identité</strong></li>



<li>🔑 Changer son <strong>mot de passe</strong></li>



<li>📧 S&#8217;inscrire / se désinscrire de nos <strong>communications commerciales</strong></li>
</ul>
</li>



<li><img loading="lazy" decoding="async" width="21" height="20" class="wp-image-33436" style="width: 21px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cptAdress.jpg" alt=""><strong>Adresses</strong>
<ul class="wp-block-list">
<li>🏠 <strong>Modifier </strong>son adresse</li>



<li>🏠🏠 <strong>Créer </strong>un <strong>second </strong>alias d&#8217;adresse (alternative)</li>
</ul>
</li>



<li><img loading="lazy" decoding="async" width="24" height="22" class="wp-image-33437" style="width: 24px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cptadress2.jpg" alt=""> <strong>Historique et détails des commandes</strong>
<ul class="wp-block-list">
<li>🧾Voir la <strong>référence</strong>, la <strong>date</strong>, le <strong>statut</strong> et l&#8217;<strong>Etat</strong></li>



<li>🧺 <strong>voir les détails</strong> (panier complet)</li>



<li><img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""> voir et télécharger<strong> la facture</strong></li>
</ul>
</li>



<li><img loading="lazy" decoding="async" width="23" height="21" class="wp-image-33439" style="width: 23px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cptAvoir.jpg" alt=""> <strong>Avoir</strong>s
<ul class="wp-block-list">
<li><strong>Consulter</strong></li>
</ul>
</li>



<li><img loading="lazy" decoding="async" width="24" height="22" class="wp-image-33440" style="width: 24px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cptRetour.jpg" alt=""> <strong>Retours produits</strong>
<ul class="wp-block-list">
<li>☝️ <strong>Faire une demande</strong></li>



<li>👀<strong> Consulter l&#8217;état</strong> de la demande</li>
</ul>
</li>



<li><img loading="lazy" decoding="async" width="23" height="21" class="wp-image-33441" style="width: 23px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cptwishlist.jpg" alt=""> <strong>Liste d&#8217;envies</strong>
<ul class="wp-block-list">
<li>👀 <strong>Consulter</strong></li>



<li>👈 <strong>Retirer</strong> des envies</li>



<li>🛒 <strong>Commander </strong>des produits en envie</li>
</ul>
</li>



<li><img loading="lazy" decoding="async" width="19" height="19" class="wp-image-33442" style="width: 19px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cptrgpd.jpg" alt=""> <strong>Données personnelles</strong>
<ul class="wp-block-list">
<li>📁 <strong>télécharger </strong>les données</li>



<li><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=""> Faire une demande au <strong>DPO</strong></li>
</ul>
</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center has-medium-font-size">BackOffice :</p>



<ul class="wp-block-list">
<li><img loading="lazy" decoding="async" width="19" height="19" class="wp-image-33435" style="width: 19px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cpte-info.jpg" alt=""> <strong>Informations</strong>
<ul class="wp-block-list">
<li>🆔 Clients &gt; Clients &gt; 🖍️</li>



<li>🔑 <mark style="background-color:rgba(0, 0, 0, 0);color:#d24747" class="has-inline-color">Interdit</mark></li>



<li>📧 Clients &gt; Clients &gt; 🖍️</li>
</ul>
</li>



<li><img loading="lazy" decoding="async" width="21" height="20" class="wp-image-33436" style="width: 21px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cptAdress.jpg" alt=""><strong>Adresses</strong>
<ul class="wp-block-list">
<li>🏠 Clients &gt; Adresses &gt; 🖍️</li>



<li>🏠🏠 Clients &gt; Adresses &gt; 🖍️</li>
</ul>
</li>



<li><img loading="lazy" decoding="async" width="24" height="22" class="wp-image-33437" style="width: 24px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cptadress2.jpg" alt=""> <strong>Historique et détails des commandes</strong>
<ul class="wp-block-list">
<li>🧾🧺<img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""> Commandes &gt; commandes</li>
</ul>
</li>



<li><img loading="lazy" decoding="async" width="23" height="21" class="wp-image-33439" style="width: 23px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cptAvoir.jpg" alt=""> <strong>Avoir</strong>s
<ul class="wp-block-list">
<li>Catalogues &gt; réductions</li>
</ul>
</li>



<li><img loading="lazy" decoding="async" width="24" height="22" class="wp-image-33440" style="width: 24px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cptRetour.jpg" alt=""> <strong>Retours produits</strong>
<ul class="wp-block-list">
<li>SAV &gt; Retours Produits</li>
</ul>
</li>



<li><img loading="lazy" decoding="async" width="23" height="21" class="wp-image-33441" style="width: 23px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cptwishlist.jpg" alt=""> <strong>Liste d&#8217;envies</strong>
<ul class="wp-block-list">
<li><mark style="background-color:rgba(0, 0, 0, 0);color:#d33939" class="has-inline-color">que en front</mark></li>
</ul>
</li>



<li><img loading="lazy" decoding="async" width="19" height="19" class="wp-image-33442" style="width: 19px;" src="https://st9ph.fr/wp-content/uploads/2026/01/cptrgpd.jpg" alt=""> <strong>Données personnelles</strong>
<ul class="wp-block-list">
<li>Modules &gt; gestionnaire &gt; RGPD officiel &gt; configurer &gt; Suivi activité clients</li>
</ul>
</li>
</ul>



<p></p>



<p class="has-base-2-background-color has-background">😁 Et figurez-vous que tout cela, <strong>vous devez le maitriser</strong> !</p>
</div>
</div>



<div class="bloc-rappel">
👉🏻 L&#8217;idéal sera de définir un message prédéfini <strong> pour chacune des typologies </strong> (16, tout de même), ce qui demandera <strong> un certain travail au départ </strong> mais qui permettra de gérer toutes les mails &#8220;demandes de modifications&#8221; très rapidement.
</div>
<style>
.bloc-rappel {
  border-left: 4px solid #1e73be;
  background: #f5f9ff;
  padding: 12px 18px;
  margin: 20px 0;
  font-size: 15px;
  color: #0f172a;
  border-radius: 4px;
  font-family: Arial, sans-serif;
}
</style>



<p>➡️ Exemple d&#8217;une <strong>demande de suivi de commande</strong> :</p>



<!-- DÉBUT MAIL HTML (V3.3) -->
<style>
    .preview-header-bar { background: #f8f9fa; border-bottom: 1px solid #ddd; padding: 15px; display: flex; justify-content: space-between; font-size: 13px; color: #555; flex-wrap: wrap; gap: 10px; font-family: sans-serif; }
    .preview-header-bar strong { color: #333; }
    .email-body-wrapper { max-width: 600px; margin: 0 auto; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; line-height: 1.6; background: #fff; }
    .email-logo { text-align: center; margin-bottom: 25px; }
    .email-logo img { max-width: 180px !important; height: auto !important; display: inline-block !important; margin: 0 auto !important; }
    
    .phase-row { display: flex; align-items: flex-start; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #eeeeee; }
    .phase-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .phase-label { width: 18%; font-size: 11px; font-weight: 700; color: #555555; text-transform: uppercase; line-height: 1.3; padding-top: 2px; flex-shrink: 0; }
    .phase-content { width: 82%; font-size: 14px; color: #333; padding-left: 20px; border-left: 2px solid #f0f0f0; }
    
    .phase-cta .phase-content { border-left: none; text-align: center; padding-left: 0; }
    .cta-button { display: inline-block; background: #25B9D7; color: #fff !important; text-decoration: none; padding: 12px 25px; border-radius: 5px; font-weight: bold; }
    
    .phase-signature .phase-content { font-weight: bold; border-left: none; padding-left: 0; white-space: normal; }
    
    .email-footer { background: #f4f4f4; padding: 20px; font-size: 11px; color: #777; text-align: center; margin-top: 20px; border-top: 1px solid #e0e0e0; }
    .footer-section { margin-bottom: 8px; }
    .footer-links a { color: #555; text-decoration: underline; }
    .social-icons { margin-top: 15px; }
    .social-icons img { width: 24px !important; height: 24px !important; margin: 0 5px !important; vertical-align: middle !important; display: inline-block !important; border: none !important; box-shadow: none !important; }
    
    @media (max-width: 768px) {
        .phase-row { flex-direction: column; }
        .phase-label { width: 100%; margin-bottom: 5px; color: #888; }
        .phase-content { width: 100%; padding-left: 0; border-left: none; }
    }
</style>

<div class="preview-header-bar">
    <span><strong>De :</strong> boutique st9ph</span>
    <span><strong>À :</strong> mail client</span>
    <span><strong>Objet :</strong> suivi de votre commande [N°]</span>
</div>

<div class="email-body-wrapper">
    <div class="email-logo"><img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/shop-st9ph-paysage.jpg" alt="Logo"></div>
    
    <div class="phase-row">
        <div class="phase-label">Salutations</div>
        <div class="phase-content">Bonjour[ Rayer l&#8217;inutile] Madame / Monsieur [écrire ici le nom]</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Intro ou reformulation</div>
        <div class="phase-content">Vous souhaitez connaitre l&#8217;état de votre commande [N°] et nous vous remercions de nous avoir contactés.</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Proposition</div>
        <div class="phase-content">Votre commande [N°] est [statut] au [date]. Vous serez informé(e) par mail à l&#8217;adresse [mail_client] des prochaines étapes</div>
    </div>
    
    <div class="phase-row phase-cta">
        <div class="phase-label">Action</div>
        <div class="phase-content">
            <a href="https://shop.st9ph.fr/presta/fr/historique-commandes" class="cta-button" target="_blank">suivre le statut de mes commandes dans mon espace client</a>
        </div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Next Step</div>
        <div class="phase-content">😏 Le saviez-vous ? <br>Vous pouvez par vous même suivre l&#8217;état de votre commande dans la rubrique &#8220;Mon Compte&#8221; (cliquer sur votre nom à côté du panier ou sur &#8220;mon compte dans le pied de page de la boutique). C&#8217;est dans la rubrique &#8220;Historique et détails des commandes&#8221; (ou cliquez sur le bouton ci-dessus)</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Congés</div>
        <div class="phase-content">Toute l&#8217;équipe st9ph Market reste à votre disposition, vous remercie de votre fidélité et vous dit à bientôt sur notre boutique en ligne.</div>
    </div>
    
    <div class="phase-row phase-signature">
        <div class="phase-label">Signature</div>
        <div class="phase-content">[Prénom]<br>Votre conseiller commercial.</div>
    </div>
    
    <div class="email-footer">
        <div class="footer-section">vous recevez ce mail en tant que client de la boutique st9ph</div>
        <div class="footer-section footer-links"><a href="#">Se désinscrire</a></div>
        <div class="footer-section">Conformément à la loi informatique et libertés du 6 janvier 1978 complété par le règlement européen dit RGPD en vigueur depuis le 25 mai 2018, vous disposez d’un droit d’accès et de rectification sur les données vous concernant. Pour exercer ce droit : rubrique &#8220;mon compte&#8221; (accès &#038; modification) ou contactez-nous > sujet &#8220;mon compte&#8221; pour supprimer votre compte</div>
        <div class="footer-section">Utilisez le lien &#8220;contactez nous&#8221; pour toutes vos demandes au service client ou appelez le 📞3568</div>
        <div class="footer-section">shop.st9ph.fr &#8211; [mois -année]</div>
        <div class="social-icons"></div>
    </div>
</div>
<!-- FIN MAIL HTML -->



<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%">
<p class="has-text-align-center has-base-2-background-color has-background">Il suffira de choisir le message personnalisé dans la liste et de <strong>renseigner les champs variables </strong>(après avoir vérifié les informations).</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="270" height="280" src="https://st9ph.fr/wp-content/uploads/2026/01/image-326.png" alt="" class="wp-image-33457"/></figure>



<p>ℹ️ Certains modules vus plus haut peuvent même <strong>gérer cela automatiquement</strong>.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="531" height="613" src="https://st9ph.fr/wp-content/uploads/2026/01/image-324.png" alt="" class="wp-image-33455" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-324.png 531w, https://st9ph.fr/wp-content/uploads/2026/01/image-324-260x300.png 260w" sizes="auto, (max-width: 531px) 100vw, 531px" /></figure>
</div>
</div>



<h3 class="wp-block-heading" id="9-22-sujets-fr%C3%A9quents-" 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>sujets fréquents</strong></h3>



<p>➡️ Exemple d&#8217;une <strong>demande de duplicata </strong>:</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">
<p>Là, il faudra <strong>lui renvoyer</strong> en <img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""><strong> pièce joint</strong>e ou lui donner un  <strong>lien de téléchargement </strong> :</p>



<ul class="wp-block-list">
<li> commandes &gt; cliquer sur la commande &gt; <strong>Voir la facture</strong></li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="554" height="159" src="https://st9ph.fr/wp-content/uploads/2026/01/image-327.png" alt="" class="wp-image-33459" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-327.png 554w, https://st9ph.fr/wp-content/uploads/2026/01/image-327-300x86.png 300w" sizes="auto, (max-width: 554px) 100vw, 554px" /></figure>



<p>⚠️ Ca va la <strong>télécharger directement</strong>, en fait, et vous ouvrir en plus un onglet pour la consulter</p>
</div>



<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/01/image-328.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>



<!-- DÉBUT MAIL HTML (V3.3) -->
<style>
    .preview-header-bar { background: #f8f9fa; border-bottom: 1px solid #ddd; padding: 15px; display: flex; justify-content: space-between; font-size: 13px; color: #555; flex-wrap: wrap; gap: 10px; font-family: sans-serif; }
    .preview-header-bar strong { color: #333; }
    .email-body-wrapper { max-width: 600px; margin: 0 auto; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; line-height: 1.6; background: #fff; }
    .email-logo { text-align: center; margin-bottom: 25px; }
    .email-logo img { max-width: 180px !important; height: auto !important; display: inline-block !important; margin: 0 auto !important; }
    
    .phase-row { display: flex; align-items: flex-start; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #eeeeee; }
    .phase-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .phase-label { width: 18%; font-size: 11px; font-weight: 700; color: #555555; text-transform: uppercase; line-height: 1.3; padding-top: 2px; flex-shrink: 0; }
    .phase-content { width: 82%; font-size: 14px; color: #333; padding-left: 20px; border-left: 2px solid #f0f0f0; }
    
    .phase-cta .phase-content { border-left: none; text-align: center; padding-left: 0; }
    .cta-button { display: inline-block; background: #25B9D7; color: #fff !important; text-decoration: none; padding: 12px 25px; border-radius: 5px; font-weight: bold; }
    
    .phase-signature .phase-content { font-weight: bold; border-left: none; padding-left: 0; white-space: normal; }
    
    .email-footer { background: #f4f4f4; padding: 20px; font-size: 11px; color: #777; text-align: center; margin-top: 20px; border-top: 1px solid #e0e0e0; }
    .footer-section { margin-bottom: 8px; }
    .footer-links a { color: #555; text-decoration: underline; }
    .social-icons { margin-top: 15px; }
    .social-icons img { width: 24px !important; height: 24px !important; margin: 0 5px !important; vertical-align: middle !important; display: inline-block !important; border: none !important; box-shadow: none !important; }
    
    @media (max-width: 768px) {
        .phase-row { flex-direction: column; }
        .phase-label { width: 100%; margin-bottom: 5px; color: #888; }
        .phase-content { width: 100%; padding-left: 0; border-left: none; }
    }
</style>

<div class="preview-header-bar">
    <span><strong>De :</strong> boutique st9ph</span>
    <span><strong>À :</strong> mail client</span>
    <span><strong>Objet :</strong> votre facture REF [REF]</span>
</div>

<div class="email-body-wrapper">
    <div class="email-logo"><img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/shop-st9ph-paysage.jpg" alt="Logo"></div>
    
    <div class="phase-row">
        <div class="phase-label">Salutations</div>
        <div class="phase-content">Bonjour[ Rayer l&#8217;inutile] Madame / Monsieur [écrire ici le nom]</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Intro ou reformulation</div>
        <div class="phase-content">Vous souhaitez un duplicata de votre facture [N°] et nous vous remercions de nous avoir contactés.</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Proposition</div>
        <div class="phase-content">Cliquez sur le lien ci-dessous pour la télécharger.</div>
    </div>
    
    <div class="phase-row phase-cta">
        <div class="phase-label">Action</div>
        <div class="phase-content">
            <a href="https://st9ph.fr/wp-content/uploads/2026/03/FA2025-000010.pdf" class="cta-button" target="_blank">télécharger cette facture</a>
        </div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Next Step</div>
        <div class="phase-content">😏 Le saviez-vous ? <br>Vous pouvez par vous même retrouver et télécharger vos factures dans la rubrique &#8220;Mon Compte&#8221; (cliquer sur votre nom à côté du panier ou sur &#8220;mon compte&#8221; dans le pied de page de la boutique). C&#8217;est dans la rubrique &#8220;Historique et détails des commandes&#8221; puis sur l&#8217;icone ￼pdf.</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Congés</div>
        <div class="phase-content">Toute l&#8217;équipe st9ph Market reste à votre disposition, vous remercie de votre fidélité et vous dit à bientôt sur notre boutique en ligne.</div>
    </div>
    
    <div class="phase-row phase-signature">
        <div class="phase-label">Signature</div>
        <div class="phase-content">[Prénom]<br>Votre conseiller commercial.</div>
    </div>
    
    <div class="email-footer">
        <div class="footer-section">vous recevez ce mail en tant que client de la boutique st9ph</div>
        <div class="footer-section footer-links"><a href="#">Se désinscrire</a></div>
        <div class="footer-section">Conformément à la loi informatique et libertés du 6 janvier 1978 complété par le règlement européen dit RGPD en vigueur depuis le 25 mai 2018, vous disposez d’un droit d’accès et de rectification sur les données vous concernant. Pour exercer ce droit : rubrique &#8220;mon compte&#8221; (accès &#038; modification) ou contactez-nous > sujet &#8220;mon compte&#8221; pour supprimer votre compte</div>
        <div class="footer-section">Utilisez le lien &#8220;contactez nous&#8221; pour toutes vos demandes au service client ou appelez le 📞3568</div>
        <div class="footer-section">shop.st9ph.fr &#8211; [mois -année]</div>
        <div class="social-icons"></div>
    </div>
</div>
<!-- FIN MAIL HTML -->



<p>🖥️ Il faut savoir que <strong>l&#8217;envoi de pièces jointes est désactivée du bloc SAV</strong> sur Prestashop v9 et que <strong><mark style="background-color:rgba(0, 0, 0, 0);color:#b83030" class="has-inline-color">ce n&#8217;est modifiable qu&#8217;en code</mark></strong> (<a href="https://www.prestashop.com/forums/topic/348406-sav-et-discussion-client-ajouter-une-pi%C3%A8ce-jointe-%C3%A0-une-r%C3%A9ponse/">voir ce forum</a>) ou <strong>en achetant un add-on</strong> (d&#8217;où <strong>le lien de téléchargement</strong> dans mon exemple plutôt que la pièce jointe) -&gt; <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">donc, vous ne l&#8217;aurez pas à l&#8217;examen</mark></strong> !</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">
<ul class="wp-block-list">
<li><strong>En clic droit </strong>sur le bouton &#8220;<strong>Voir la facture</strong>&#8221; dans le détail de la commande du BackOffice, choisissez &#8220;<strong>copiez l&#8217;adresse du lien&#8221;</strong></li>
</ul>



<p class="has-text-color has-link-color wp-elements-f4f191ab82c968ec67e5aa6022b85f58" style="color:#da4343">👀 L&#8217;adresse est &#8220;imbuvable&#8221;<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-contrast-color"> mais on a pas le choix</mark> :</p>



<p class="has-text-align-center has-background has-small-font-size" style="background-color:#f7e5e5">&#8216;https://boutiq.st9ph.fr/da89ms8eewdah1nn/sell/orders/6/generate-invoice-pdf?_token=ef2317145cc2.S0wEX0vpT_f8vzRIVhzGDyKlg4ZAl9TpBYYVpcwMpl4.HARjch2fHNqZ-lw4IkiiWGHu1vcwpqPecORjlftrx29yBncaP5AWz6XnBA</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="465" height="308" src="https://st9ph.fr/wp-content/uploads/2026/01/image-329.png" alt="" class="wp-image-33463" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-329.png 465w, https://st9ph.fr/wp-content/uploads/2026/01/image-329-300x199.png 300w" sizes="auto, (max-width: 465px) 100vw, 465px" /></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="499" height="171" src="https://st9ph.fr/wp-content/uploads/2026/01/image-331.png" alt="" class="wp-image-33465" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-331.png 499w, https://st9ph.fr/wp-content/uploads/2026/01/image-331-300x103.png 300w" sizes="auto, (max-width: 499px) 100vw, 499px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center has-base-2-background-color has-background">Le message personnalisé <strong>ne tolère que le texte générique </strong>UTF8 et mon essai de  l&#8217;encapsuler dans <strong>un gentil lien hypertexte </strong>html l&#8217;envoie tel quel. Ca ne marche pas !</p>
</div>
</div>



<p class="callout bleu">ℹ️ Sur <strong>l&#8217;aperçu du mail final</strong> plus haut (celui que reçoit le client dans sa boite mail), le beau bouton &#8220;<strong>télécharger cette facture</strong>&#8221; est donc un add-on (non générique dans le modèle) qu&#8217;il faudra implanter dans votre boutique<strong> pour un résultat pro</strong>. Il en existe des &#8220;clés en main&#8221;  (assez chers) mais c&#8217;est jouable aussi<strong> en modifiant le thème de mail </strong>en code (ce que j&#8217;ai fait avec l&#8217;aide de l&#8217;IA parce que je ne suis pas un as du php) &#8230; mais tout cela est hors programme.</p>



<p>👉 On est d&#8217;accord, c&#8217;est plus <strong>du service commercial </strong>que du SAV. Quoique, ça peut être dans le cas d&#8217;un <strong>rappel suite à une rupture de stock </strong>d&#8217;un produit désiré, et, là, ça redevient du SAV, même si c<strong>&#8216;est aussi de la télévente</strong>.</p>



<p>😏 En plus, le <strong>lien est temporaire</strong> (jeton) et <strong>il va se périmer</strong> dans le temps !</p>



<p class="has-base-2-background-color has-background">🖥️ En tout cas, c&#8217;est classé là pour l&#8217;épreuve et on vous demandera parfois de <strong>finaliser une commande</strong> pour un client (panne d&#8217;ordi ou de connexion &#8230;). Mais <strong>en VPC</strong>, c&#8217;est parfois le cas pour des <strong>catalogues papie</strong>r (oui, ça existe encore) ou pour prendre la commande suite à <strong>un devis retourné signé </strong>(souvent en B2B).</p>



<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary>🙄 VPC ?</summary>
<p> Vente par correspondance, une partie très petite de la Vente à Distance (VAD), mais qui demeure même si sa part est faible. Elle représentait 50 % de la VAD en 2003 selon la FEVAD mais tellement faible aujourd&#8217;hui qu&#8217;elle ne se risque plus à la chiffrer( moins de 0,1 %) selon les estimations.</p>



<p></p>
</details>



<!-- DÉBUT TITRE CHAPITRE -->
<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%; }
.chapter-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.chapter-logo { width: 42px; height: 42px; flex-shrink: 0; display:block; }
.chapter-logo img { width: 100%; height: 100%; object-fit: contain; }
.chapter-content h2 { margin: 0; font-size: 2.1rem; font-weight: 700; color: #1e73be; }
.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">
      </a>
      <h2>conseiller et vendre</h2>
    </div>
    <ul class="chapter-points"><li>Push suite à une commande impossible à finaliser</li><li>Prise de commande</li></ul>
  </div>
</div>
<!-- FIN TITRE CHAPITRE -->



<h3 class="wp-block-heading" id="10-31-push-suite-%C3%A0-une-commande-impossible-%C3%A0-finaliser-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">3.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>Push suite à une commande impossible à finaliser</strong></h3>



<p>👉 Qu&#8217;il s&#8217;agisse d&#8217;<strong>une déclinaison souhaitée manquante</strong> (taille, couleur &#8230;), d&#8217;<strong>un doute sur le choix</strong>,  où d&#8217;<strong>un stock insuffisant</strong>, un client va parfois<strong> générer un ticket</strong> pour savoir<strong> lequel choisir </strong>ou quand le produit sera <strong>disponible à nouveau</strong> dans la variante qu&#8217;il souhaite. <strong>Plusieurs cas de figures </strong>sont envisageables.</p>



<p>🔹 Le produit est en rupture de stock momentané</p>



<p class="has-base-2-background-color has-background">ℹ️ Il faudra alors regarder <strong>du côté de votre fournisseur </strong>pour savoir <strong>quand vous serez réapprovisionné </strong>mais rien dans le backoffice (catalogue &gt; marques &amp; fournisseurs &gt; (onglet) fournisseurs) n&#8217;est prévu pour <strong>indiquer le roulement</strong> (la périodicité de réapprovisionnement).</p>



<p>🖥️ C&#8217;est souvent au téléphone que cela se passe, il est vrai, et à l&#8217;examen, on vous indiquera ce délai si vous tombez sur ce type de demandes.</p>



<p>Nous prendrons en compte <strong>les deux cas de figure</strong> possibles dans un couleur différente  :</p>



<ul class="wp-block-list">
<li>🟧 Les commandes n&#8217;étaient pas acceptés si le stock était vide</li>



<li>🟩 Les commandes étaient acceptées</li>
</ul>



<!-- DÉBUT MAIL HTML (V3.3) -->
<style>
    .preview-header-bar { background: #f8f9fa; border-bottom: 1px solid #ddd; padding: 15px; display: flex; justify-content: space-between; font-size: 13px; color: #555; flex-wrap: wrap; gap: 10px; font-family: sans-serif; }
    .preview-header-bar strong { color: #333; }
    .email-body-wrapper { max-width: 600px; margin: 0 auto; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; line-height: 1.6; background: #fff; }
    .email-logo { text-align: center; margin-bottom: 25px; }
    .email-logo img { max-width: 180px !important; height: auto !important; display: inline-block !important; margin: 0 auto !important; }
    
    .phase-row { display: flex; align-items: flex-start; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #eeeeee; }
    .phase-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .phase-label { width: 18%; font-size: 11px; font-weight: 700; color: #555555; text-transform: uppercase; line-height: 1.3; padding-top: 2px; flex-shrink: 0; }
    .phase-content { width: 82%; font-size: 14px; color: #333; padding-left: 20px; border-left: 2px solid #f0f0f0; }
    
    .phase-cta .phase-content { border-left: none; text-align: center; padding-left: 0; }
    .cta-button { display: inline-block; background: #25B9D7; color: #fff !important; text-decoration: none; padding: 12px 25px; border-radius: 5px; font-weight: bold; }
    
    .phase-signature .phase-content { font-weight: bold; border-left: none; padding-left: 0; white-space: normal; }
    
    .email-footer { background: #f4f4f4; padding: 20px; font-size: 11px; color: #777; text-align: center; margin-top: 20px; border-top: 1px solid #e0e0e0; }
    .footer-section { margin-bottom: 8px; }
    .footer-links a { color: #555; text-decoration: underline; }
    .social-icons { margin-top: 15px; }
    .social-icons img { width: 24px !important; height: 24px !important; margin: 0 5px !important; vertical-align: middle !important; display: inline-block !important; border: none !important; box-shadow: none !important; }
    
    @media (max-width: 768px) {
        .phase-row { flex-direction: column; }
        .phase-label { width: 100%; margin-bottom: 5px; color: #888; }
        .phase-content { width: 100%; padding-left: 0; border-left: none; }
    }
</style>

<div class="preview-header-bar">
    <span><strong>De :</strong> boutique st9ph</span>
    <span><strong>À :</strong> mail client</span>
    <span><strong>Objet :</strong> notre [nom du produit]</span>
</div>

<div class="email-body-wrapper">
    <div class="email-logo"><img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/shop-st9ph-paysage.jpg" alt="Logo"></div>
    
    <div class="phase-row">
        <div class="phase-label">Salutations</div>
        <div class="phase-content">Bonjour[ Rayer l&#8217;inutile] Madame / Monsieur [écrire ici le nom]</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Intro ou reformulation</div>
        <div class="phase-content">Vous avez rencontré une difficulté pour commander notre [nom du produit] (référence : [ref] et vous nous contactez pour nous le signaler. Nous vous remercions de votre démarche.</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Proposition</div>
        <div class="phase-content">Ce produit est effectivement victime de son succès et n&#8217;est plus en stock pour le moment. Nous sommes navrés pour le désagrément que cela a engendré pour vous.</div>
    </div>
    
    <div class="phase-row phase-cta">
        <div class="phase-label">Action</div>
        <div class="phase-content">
            <a href="https://shop.st9ph.fr/presta/fr/historique-commandes" class="cta-button" target="_blank">🟩 suivre l&#8217;état de ma commande</a>
        </div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Next Step</div>
        <div class="phase-content">Cependant, notre fournisseur garantit de nous réapprovisionner pour le [Date de réapprovisionnement] [&#8230;]<br>🟩 [&#8230;] et votre commande reste toujours active. <br>Vous serez averti dès qu&#8217;elle sera prête pour l&#8217;expédition  ! 👍 <br>[&#8230;]🟧 et je vous invite à renouveler votre commande passée cette date.<br>🥇 Nous pouvons aussi passer cette commande pour vous dès aujourd&#8217;hui pour que vous soyez dans les premiers servis lors du réassort.<br>Dans ce cas, merci de nous l&#8217;indiquer en réponse à ce mail. <br>[ Rayer l&#8217;inutile] [ ❌ pas de lien &#8220;suivre l&#8217;état de ma commande&#8221;]</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Congés</div>
        <div class="phase-content">Toute l&#8217;équipe st9ph Market reste à votre disposition, vous remercie de votre fidélité et vous dit à bientôt sur notre boutique en ligne.</div>
    </div>
    
    <div class="phase-row phase-signature">
        <div class="phase-label">Signature</div>
        <div class="phase-content">[Prénom]<br>Votre conseiller commercial.</div>
    </div>
    
    <div class="email-footer">
        <div class="footer-section">vous recevez ce mail en tant que client de la boutique st9ph</div>
        <div class="footer-section footer-links"><a href="#">Se désinscrire</a></div>
        <div class="footer-section">Conformément à la loi informatique et libertés du 6 janvier 1978 complété par le règlement européen dit RGPD en vigueur depuis le 25 mai 2018, vous disposez d’un droit d’accès et de rectification sur les données vous concernant. Pour exercer ce droit : rubrique &#8220;mon compte&#8221; (accès &#038; modification) ou contactez-nous > sujet &#8220;mon compte&#8221; pour supprimer votre compte</div>
        <div class="footer-section">Utilisez le lien &#8220;contactez nous&#8221; pour toutes vos demandes au service client ou appelez le 📞3568</div>
        <div class="footer-section">shop.st9ph.fr &#8211; [mois -année]</div>
        <div class="social-icons"></div>
    </div>
</div>
<!-- FIN MAIL HTML -->



<p>🔹 Le produit est en rupture de stock définitive</p>



<!-- DÉBUT MAIL HTML (V3.3) -->
<style>
    .preview-header-bar { background: #f8f9fa; border-bottom: 1px solid #ddd; padding: 15px; display: flex; justify-content: space-between; font-size: 13px; color: #555; flex-wrap: wrap; gap: 10px; font-family: sans-serif; }
    .preview-header-bar strong { color: #333; }
    .email-body-wrapper { max-width: 600px; margin: 0 auto; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; line-height: 1.6; background: #fff; }
    .email-logo { text-align: center; margin-bottom: 25px; }
    .email-logo img { max-width: 180px !important; height: auto !important; display: inline-block !important; margin: 0 auto !important; }
    
    .phase-row { display: flex; align-items: flex-start; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #eeeeee; }
    .phase-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .phase-label { width: 18%; font-size: 11px; font-weight: 700; color: #555555; text-transform: uppercase; line-height: 1.3; padding-top: 2px; flex-shrink: 0; }
    .phase-content { width: 82%; font-size: 14px; color: #333; padding-left: 20px; border-left: 2px solid #f0f0f0; }
    
    .phase-cta .phase-content { border-left: none; text-align: center; padding-left: 0; }
    .cta-button { display: inline-block; background: #25B9D7; color: #fff !important; text-decoration: none; padding: 12px 25px; border-radius: 5px; font-weight: bold; }
    
    .phase-signature .phase-content { font-weight: bold; border-left: none; padding-left: 0; white-space: normal; }
    
    .email-footer { background: #f4f4f4; padding: 20px; font-size: 11px; color: #777; text-align: center; margin-top: 20px; border-top: 1px solid #e0e0e0; }
    .footer-section { margin-bottom: 8px; }
    .footer-links a { color: #555; text-decoration: underline; }
    .social-icons { margin-top: 15px; }
    .social-icons img { width: 24px !important; height: 24px !important; margin: 0 5px !important; vertical-align: middle !important; display: inline-block !important; border: none !important; box-shadow: none !important; }
    
    @media (max-width: 768px) {
        .phase-row { flex-direction: column; }
        .phase-label { width: 100%; margin-bottom: 5px; color: #888; }
        .phase-content { width: 100%; padding-left: 0; border-left: none; }
    }
</style>

<div class="preview-header-bar">
    <span><strong>De :</strong> boutique st9ph</span>
    <span><strong>À :</strong> mail client</span>
    <span><strong>Objet :</strong> disponibilité  [nom du produit]</span>
</div>

<div class="email-body-wrapper">
    <div class="email-logo"><img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/shop-st9ph-paysage.jpg" alt="Logo"></div>
    
    <div class="phase-row">
        <div class="phase-label">Salutations</div>
        <div class="phase-content">Bonjour[ Rayer l&#8217;inutile] Madame / Monsieur [écrire ici le nom]</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Intro ou reformulation</div>
        <div class="phase-content">Vous avez rencontré une difficulté pour commander notre [nom du produit] (référence : [ref]) et vous nous contactez pour nous le signaler. Nous vous remercions de votre démarche.</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Proposition</div>
        <div class="phase-content">Ce produit a été effectivement victime de son succès et n&#8217;est plus en stock. Nous sommes navrés pour le désagrément que cela a engendré pour vous.</div>
    </div>
    
    <div class="phase-row phase-cta">
        <div class="phase-label">Action</div>
        <div class="phase-content">
            <a href="https://shop.st9ph.fr/presta/fr/13-arts-culinaires" class="cta-button" target="_blank">Voir d&#8217;autres produits similaires dans la boutique</a>
        </div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Next Step</div>
        <div class="phase-content">Nous ne serons pas réapprovisionnés pour ce produit [ Rayer l&#8217;inutile] qui est une fin de série / qui n&#8217;est plus disponible chez notre fournisseur et nous en sommes navrés.</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Congés</div>
        <div class="phase-content">Toute l&#8217;équipe st9ph Market reste à votre disposition, vous remercie de votre fidélité et vous dit à bientôt sur notre boutique en ligne.</div>
    </div>
    
    <div class="phase-row phase-signature">
        <div class="phase-label">Signature</div>
        <div class="phase-content">[Prénom]<br>Votre conseiller commercial.</div>
    </div>
    
    <div class="email-footer">
        <div class="footer-section">vous recevez ce mail en tant que client de la boutique st9ph</div>
        <div class="footer-section footer-links"><a href="#">Se désinscrire</a></div>
        <div class="footer-section">Conformément à la loi informatique et libertés du 6 janvier 1978 complété par le règlement européen dit RGPD en vigueur depuis le 25 mai 2018, vous disposez d’un droit d’accès et de rectification sur les données vous concernant. Pour exercer ce droit : rubrique &#8220;mon compte&#8221; (accès &#038; modification) ou contactez-nous > sujet &#8220;mon compte&#8221; pour supprimer votre compte</div>
        <div class="footer-section">Utilisez le lien &#8220;contactez nous&#8221; pour toutes vos demandes au service client ou appelez le 📞3568</div>
        <div class="footer-section">shop.st9ph.fr &#8211; [mois -année]</div>
        <div class="social-icons"></div>
    </div>
</div>
<!-- FIN MAIL HTML -->



<p>🔹Le client demande des informations complémentaires sur le produit</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:33.33%"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" decoding="async" width="450" height="450" src="https://st9ph.fr/wp-content/uploads/2026/01/qrcode_boutiq.st9ph.fr-16.png" alt="" class="wp-image-33472" style="width:203px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/01/qrcode_boutiq.st9ph.fr-16.png 450w, https://st9ph.fr/wp-content/uploads/2026/01/qrcode_boutiq.st9ph.fr-16-300x300.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/qrcode_boutiq.st9ph.fr-16-150x150.png 150w" sizes="auto, (max-width: 450px) 100vw, 450px" /></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>🖥️ Un grand classique de l&#8217;examen, la &#8220;<strong>levée de doute</strong>&#8220;. Prenons l&#8217;exemple de <a href="https://boutiq.st9ph.fr/23-58-t-shirt-petit-dauphin.html#/14-couleur-bleu/33-age-3_4" target="_blank" rel="noreferrer noopener">ce produit</a> et d&#8217;un parent qui ne sait pas bien quelle taille choisir pour son fils :</p>


<div style="border: 3px solid #000000; border-radius: 0%; background-color: inherit; " class="ub-styled-box ub-bordered-box wp-block-ub-styled-box" id="ub-styled-box-06b6c533-2b42-49d6-8111-29675c89e975">
<p id="ub-styled-box-bordered-content-">&#8220;<em>Mon fils n&#8217;a que 6 ans mais il mesure déjà 1 m 20 et j&#8217;ai peur que du 5-6 ans soit trop petit. Et il le voudrait en rose mais j&#8217;ai l&#8217;impression que ce n&#8217;est que pour les filles</em>. Si j&#8217;en achète un trop petit, je pourrais vous le renvoyer pour l&#8217;échanger ?&#8221;</p>


</div></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>Il y&#8217;a trois problématiques distinctes :</p>



<ul class="wp-block-list">
<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">La taille</mark></strong> : On dispose d&#8217;un guide des tailles dans la description et c&#8217;est vrai que du 7 &#8211; 8 ans serait mieux pour lui.</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Le coloris</mark></strong> : Bien sûr qu&#8217;il peut porter du rose en étant un garçon, même si le modèle photographié est une fille. S&#8217;il a envie qu&#8217;on lui jette des cailloux à la récré, c&#8217;est son problème ! (Je blague, bien sur).</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Le retour</mark></strong> : c&#8217;est un piège car la réponse sera non (sauf politique de réassurance l&#8217;autorisant à voir dans la boutique ou sur les annexes du sujet)
<ul class="wp-block-list">
<li>Ce n&#8217;est pas <strong>un renoncement à l&#8217;achat dans les 14 jours </strong>dans la mesure où le <strong>produit </strong>aura été <strong>porté </strong>et que, de toute manière, le t-shirt est classé comme<strong> un sous-vêtement </strong>(à même la peau) donc, parmi <strong>les exceptions à la rétractation</strong></li>



<li>Ce n&#8217;est pas <strong>une non conformité</strong> non plus, même s&#8217;il la plupart des boutiques <strong>autorisent l&#8217;échange</strong> dans ce cas, <strong>par soucis de fidélisatio</strong>n (mais nous partirons du principe que ce n&#8217;est pas le cas)</li>
</ul>
</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">

<style>
.ps-product-card { background: #fff; border: 1px solid #e7e7e7; border-radius: 4px; width: 100%; max-width: 300px; margin: 20px auto; font-family: 'Segoe UI', sans-serif; transition: box-shadow 0.3s ease; position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.ps-product-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.ps-product-image-wrapper { position: relative; width: 100%; padding-top: 100%; overflow: hidden; background: #f5f5f5; }
.ps-product-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.ps-product-card:hover .ps-product-image { transform: scale(1.05); }
.ps-wishlist-icon { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.8); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.ps-wishlist-icon svg { width: 20px; height: 20px; fill: #7a7a7a; transition: fill 0.2s; }
.ps-wishlist-icon:hover { background: #fff; transform: scale(1.1); }
.ps-wishlist-icon:hover svg { fill: #ff4848; }
.ps-product-rating { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; z-index: 2; background: rgba(0,0,0,0.4); padding: 4px 8px; border-radius: 20px; }
.ps-star { color: #ffd700; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ps-product-content { padding: 15px; text-align: center; background: #fff; }
.ps-product-name { font-size: 15px; color: #333; margin: 0 0 10px 0; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 42px; }
.ps-product-price { font-size: 18px; font-weight: 700; color: #25B9D7; margin: 0 0 15px 0; }
.ps-product-btn { background-color: #25B9D7; color: #fff; border: none; padding: 10px 15px; border-radius: 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; text-decoration: none; box-sizing: border-box; }
.ps-product-btn:hover { background-color: #1fa3c0; color: #fff; }
.ps-product-btn svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 768px) { .ps-product-card { max-width: 100%; } }
</style>
<!-- DÉBUT VIGNETTE PRODUIT -->
<a href="https://boutiq.st9ph.fr/23-66-t-shirt-petit-dauphin.html#/18-couleur-rose/35-age-7_8" target="_blank" class="ps-product-card">
    <div class="ps-product-image-wrapper">
        <img decoding="async" src="https://boutiq.st9ph.fr/40-product_main/t-shirt-petit-dauphin.jpg" alt="T-Shirt Petit Dauphin" class="ps-product-image">
        <div class="ps-wishlist-icon" title="Ajouter aux favoris" onclick="event.preventDefault(); event.stopPropagation(); alert('Fonctionnalité liste d\'envie à connecter.');">
            <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
        </div>
        <div class="ps-product-rating">
            <span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span>
        </div>
    </div>
    <div class="ps-product-content">
        <h3 class="ps-product-name">T-Shirt Petit Dauphin</h3>
        <div class="ps-product-price">12,50 €</div>
        <div class="ps-product-btn">
            Voir dans la boutique
            <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
        </div>
    </div>
</a>
<!-- FIN VIGNETTE PRODUIT -->



<p>➡️ Voir l&#8217;article sur <a href="https://st9ph.fr/prestashop-cas-de-retours-produits/">les cas de retours produits</a>.</p>
</div>
</div>



<p>La réponse sera donc ultra personnalisée :</p>





<!-- DÉBUT MAIL HTML (V3.3) -->
<style>
    .preview-header-bar { background: #f8f9fa; border-bottom: 1px solid #ddd; padding: 15px; display: flex; justify-content: space-between; font-size: 13px; color: #555; flex-wrap: wrap; gap: 10px; font-family: sans-serif; }
    .preview-header-bar strong { color: #333; }
    .email-body-wrapper { max-width: 600px; margin: 0 auto; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; line-height: 1.6; background: #fff; }
    .email-logo { text-align: center; margin-bottom: 25px; }
    .email-logo img { max-width: 180px !important; height: auto !important; display: inline-block !important; margin: 0 auto !important; }
    
    .phase-row { display: flex; align-items: flex-start; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #eeeeee; }
    .phase-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .phase-label { width: 18%; font-size: 11px; font-weight: 700; color: #555555; text-transform: uppercase; line-height: 1.3; padding-top: 2px; flex-shrink: 0; }
    .phase-content { width: 82%; font-size: 14px; color: #333; padding-left: 20px; border-left: 2px solid #f0f0f0; }
    
    .phase-cta .phase-content { border-left: none; text-align: center; padding-left: 0; }
    .cta-button { display: inline-block; background: #25B9D7; color: #fff !important; text-decoration: none; padding: 12px 25px; border-radius: 5px; font-weight: bold; }
    
    .phase-signature .phase-content { font-weight: bold; border-left: none; padding-left: 0; white-space: normal; }
    
    .email-footer { background: #f4f4f4; padding: 20px; font-size: 11px; color: #777; text-align: center; margin-top: 20px; border-top: 1px solid #e0e0e0; }
    .footer-section { margin-bottom: 8px; }
    .footer-links a { color: #555; text-decoration: underline; }
    .social-icons { margin-top: 15px; }
    .social-icons img { width: 24px !important; height: 24px !important; margin: 0 5px !important; vertical-align: middle !important; display: inline-block !important; border: none !important; box-shadow: none !important; }
    
    @media (max-width: 768px) {
        .phase-row { flex-direction: column; }
        .phase-label { width: 100%; margin-bottom: 5px; color: #888; }
        .phase-content { width: 100%; padding-left: 0; border-left: none; }
    }
</style>

<div class="preview-header-bar">
    <span><strong>De :</strong> boutique st9ph</span>
    <span><strong>À :</strong> mail client</span>
    <span><strong>Objet :</strong> notre T-Shirt Petit Dauphin</span>
</div>

<div class="email-body-wrapper">
    <div class="email-logo"><img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/shop-st9ph-paysage.jpg" alt="Logo"></div>
    
    <div class="phase-row">
        <div class="phase-label">Salutations</div>
        <div class="phase-content">Bonjour Sarah VIGOTE,</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Intro ou reformulation</div>
        <div class="phase-content">Vous souhaitez commander notre T-Shirt Petit Dauphin (référence : TSPD78r) et vous nous contactez pour nous demander conseil. Nous sommes toujours ravis de pouvoir vous renseigner.</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Proposition</div>
        <div class="phase-content">Selon le gabarit donné en description, ce produit en âge &#8220;7-8 ans&#8221; pour des enfants de taille entre 1 m 16 et 1 m 28 devrait parfaitement convenir à votre fils. 👍<br>Quant à la couleur, je vous confirme que le rose et le bleu sont proposés indifféremment pour les garçons ou pour les filles. Il peut choisir le rose s&#8217;il le préfère au bleu. Nous avons les deux en stock en 7-8 ans.</div>
    </div>
    
    <div class="phase-row phase-cta">
        <div class="phase-label">Action</div>
        <div class="phase-content">
            <a href="https://boutiq.st9ph.fr/23-66-t-shirt-petit-dauphin.html#/18-couleur-rose/35-age-7_8" class="cta-button" target="_blank">Voir le T-Shirt Petit Dauphin dans la boutique</a>
        </div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Next Step</div>
        <div class="phase-content">C&#8217;était important de vous renseigner, en effet, car nous ne sommes pas en mesure de reprendre ni d&#8217;échanger des produits qui se portent à même la peau par mesure d&#8217;hygiène.</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Congés</div>
        <div class="phase-content">Toute l&#8217;équipe st9ph Market reste à votre disposition, vous remercie de votre intérêt pour nos produits et vous dit à bientôt sur notre boutique en ligne.</div>
    </div>
    
    <div class="phase-row phase-signature">
        <div class="phase-label">Signature</div>
        <div class="phase-content">Stéphane,<br>Votre conseiller commercial.</div>
    </div>
    
    <div class="email-footer">
        <div class="footer-section">vous recevez ce mail en tant que client de la boutique st9ph</div>
        <div class="footer-section footer-links"><a href="#">Se désinscrire</a></div>
        <div class="footer-section">Conformément à la loi informatique et libertés du 6 janvier 1978 complété par le règlement européen dit RGPD en vigueur depuis le 25 mai 2018, vous disposez d’un droit d’accès et de rectification sur les données vous concernant. Pour exercer ce droit : rubrique &#8220;mon compte&#8221; (accès &#038; modification) ou contactez-nous > sujet &#8220;mon compte&#8221; pour supprimer votre compte</div>
        <div class="footer-section">Utilisez le lien &#8220;contactez nous&#8221; pour toutes vos demandes au service client ou appelez le 📞3568</div>
        <div class="footer-section">shop.st9ph.fr &#8211; [mois -année]</div>
        <div class="social-icons"></div>
    </div>
</div>
<!-- FIN MAIL HTML -->



<h3 class="wp-block-heading" id="11-3-2-prise-de-commande-">3-2 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Prise de commande</mark></h3>



<div class="bloc-attention">
 ⛔  <strong> N&#8217;allez surtout pas en Front après avoir piraté le mot de passe de votre client </strong>(😶 ça s&#8217;est vu !) pour commander comme si vous étiez lui !
</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>



<p>✅ Non, vous disposez de la possibilité de <strong>commander pour un client en BackOffice</strong> :</p>



<ul class="wp-block-list">
<li>Commandes &gt; Commandes &gt; <strong>+ Ajouter une nouvelle commande</strong></li>



<li>Tapez <strong>les premières lettres du nom ou du prénom </strong>du client dans la zone 🔎 <strong>Rechercher</strong> un client</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="714" height="89" src="https://st9ph.fr/wp-content/uploads/2026/01/image-332.png" alt="" class="wp-image-33481" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-332.png 714w, https://st9ph.fr/wp-content/uploads/2026/01/image-332-300x37.png 300w" sizes="auto, (max-width: 714px) 100vw, 714px" /></figure>



<p>👉 Un bloc avec les noms des clients existants apparait</p>



<ul class="wp-block-list">
<li>Cliquer sur <strong>Choisir </strong>du client adéquat ou <strong>+ ajouter un client</strong> (là, il faudra faire toute sa fiche)</li>



<li>Tapez <strong>les premières lettres du </strong>produit dans la zone 🔎 <strong>Rechercher</strong> un produit</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="758" height="364" src="https://st9ph.fr/wp-content/uploads/2026/01/image-333.png" alt="" class="wp-image-33482" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-333.png 758w, https://st9ph.fr/wp-content/uploads/2026/01/image-333-300x144.png 300w" sizes="auto, (max-width: 758px) 100vw, 758px" /></figure>



<ul class="wp-block-list">
<li><strong>Choisissez</strong> le produit que vous souhaitez lui commander <strong>dans la liste</strong></li>



<li>Cliquez sur<strong> ajouter au panier</strong></li>



<li>➰ <strong>Répétez l&#8217;opération </strong>pour les autres produits (le cas échéant)</li>
</ul>



<p>➡️Vous pouvez ajouter un code réduction. Si une offre est ouverte à tous les clients en ce moment, faites lui en profiter à lui aussi.</p>



<p>➡️Vous pouvez aussi en créer un &#8220;a la volée&#8221; en cliquant sur  &#8220;<strong>Ajouter un bon d&#8217;achat</strong>&#8220;</p>



<p>⚠️ Attention à certains cas de figure si vous commandez un produit en renvoi suite à un produit retourné :</p>



<ul class="wp-block-list">
<li>Le retour produit <strong>a généré un avoir</strong> : retrouvez le dans Catalogue &gt; réduction et<strong> utilisez le</strong></li>



<li>Le retour produi<strong>t n&#8217;a pas généré d&#8217;avoir,</strong> vous devez<strong> en créer un du montant total de la facture</strong> pour la ramener à zéro (vous le voyez tout en bas de la page mais <strong>attendez d&#8217;avoir choisi le mode de livraison</strong>)
<ul class="wp-block-list">
<li>Eventuellement, consultez l<strong>a politique des retours</strong> (souvent dans les CGV) pour savoir <strong>si les frais d&#8217;expédition restent à sa charge</strong>-&gt; notez le montant de l&#8217;avoir avant si c&#8217;est le cas.</li>
</ul>
</li>
</ul>



<ul class="wp-block-list">
<li>Choisissez l<strong>&#8216;adresse de livraison</strong> (si aucune consigne, celle par défaut en alias #1)</li>



<li>Choisissez le mode de livraison</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="916" height="158" src="https://st9ph.fr/wp-content/uploads/2026/01/image-334.png" alt="" class="wp-image-33483" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-334.png 916w, https://st9ph.fr/wp-content/uploads/2026/01/image-334-300x52.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-334-768x132.png 768w" sizes="auto, (max-width: 916px) 100vw, 916px" /></figure>



<p class="has-base-2-background-color has-background">👉 Vous pouvez éventuellement <strong>définir livraison gratuite</strong> dans le cas d&#8217;un retour s&#8217;il est à notre charge (obligatoirement dans le cas d&#8217;une non conformité et selon que vous avez pensé à le préciser dans vos CGV dans le cas d&#8217;un rétractation, sinon, si vous l&#8217;avez omis, <strong>c&#8217;est obligatoirement à votre charge</strong>).</p>



<ul class="wp-block-list">
<li>Précisez éventuellement <strong>un message</strong> : &#8220;<em>Produit renvoyé suite à un défaut&#8221;</em> (pour un renvoi suite à un retour)</li>



<li>Choisissez le <strong>mode de paiement </strong>et positionnez sur &#8220;<strong>en attente de paiement</strong>&#8220;</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="815" height="169" src="https://st9ph.fr/wp-content/uploads/2026/01/image-335.png" alt="" class="wp-image-33484" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-335.png 815w, https://st9ph.fr/wp-content/uploads/2026/01/image-335-300x62.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-335-768x159.png 768w" sizes="auto, (max-width: 815px) 100vw, 815px" /></figure>



<ul class="wp-block-list">
<li>Cliquer sur &#8220;<strong>Créer une commande&#8221;</strong></li>
</ul>



<p>On remarque un bouton &#8220;<strong>plus d&#8217;actions</strong>&#8221; qui permet soit :</p>



<ul class="wp-block-list">
<li>d&#8217;<strong>envoyer la commande au client par mail</strong> (comme un devis)</li>



<li>d&#8217;envoyer<strong> le panier au FrontOffice </strong>pour que le client la finalise</li>
</ul>



<!-- Bouton principal -->
<button id="uxMenuBtn" style="
  position: fixed;
  right: 14px;
  bottom: 40%;
  padding: 12px 14px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  font-size: 18px;
">
  ☰
</button>

<!-- Menu -->
<div id="uxMenu" style="
  display:none;
  position: fixed;
  right: 14px;
  bottom: 48%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 10000;
  font-family: Arial, sans-serif;
">
  <button class="uxItem" data-popup="sources">📚 Sources</button>
  <button class="uxItem" data-popup="methodo">🧑‍🎓NDRC</button>
  <button class="uxItem" data-popup="glossary">📘 Glossaire</button>
</div>

<!-- Overlay -->
<div id="uxOverlay" style="
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.55);
  z-index:10001;
"></div>

<!-- POPUPS -->

<div class="uxPopup" id="sources" data-title="📚 Sources UX mobile">
<ul>
<li><strong>Google Gemini</strong> – Images d&#8217;illustration hors aperçus d&#8217;écrans Prestashop</li>
<li><strong>Red Bubble</strong> – illustration &#8220;No Ticket&#8221;</li>
<li><strong>Reverse IO</strong> – chiffres sur l&#8217;impact SAV sur la fidélité</li>
</ul>
</div>

<div class="uxPopup" id="methodo" data-title="🧑‍🎓 NDRC">
<p>Cet article est à visée essentiellement de l&#8217;épreuve technique E5B.</p>
<ul>
<li>Ticketing et onglet SAV de Prestashop </li>
<li>Les différents rôles du SAV </li>
<li>Les communications automatisées de la boutique en ligne </li>
<li>Messages prédéfinis de Prestashop (création et utilisation)</li>
<li>Guider le client en FrontOffice </li>
<li>Agir pour le client en BackOffice (compte et commande) </li>
<li>Conseiller le client sur un produit </li>
</ul>
<p>A retenir aussi le discours et la charte mail pour l&#8217;E5A</p>
</div>

<div class="uxPopup" id="glossary" data-title="📘 Glossaire UX mobile">
<ul>
<li><strong>🎫 Ticket</strong> : file de résolution d&#8217;une demande client</li>
<li><strong>🥇 FCR</strong> : Résolution au 1er contact</li>
<li><strong>🏪 FrontOffice</strong> : Boutique côté client</li>
<li><strong>🔧 BackOffice</strong> : (Arrière) boutique côté opérateur</li>
<li><strong>📨 VPC</strong> : Vente Par Correspondance</li>
<li><strong> 🖐️ Touch point</strong> : point de rencontre entre le client et le produit</li>
</ul>
</div>

<!-- Style popup -->
<style>
.uxItem {
  display: block;
  padding: 10px 16px;
  background: #fff;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: #111;        /* ✅ TEXTE VISIBLE */
  font-size: 14px;
}

.uxItem:hover {
  background: #f0f0f0;
}
.uxItem:hover { background:#f0f0f0; }

.uxPopup {
  display:none;
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  width:90%;
  max-width:560px;
  max-height:80%;
  padding:24px;
  border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  z-index:10002;
  overflow-y:auto;
}
</style>

<!-- Script -->
<script>
const menuBtn = document.getElementById("uxMenuBtn");
const menu = document.getElementById("uxMenu");
const overlay = document.getElementById("uxOverlay");
const popups = document.querySelectorAll(".uxPopup");

menuBtn.onclick = () => {
  menu.style.display = menu.style.display === "block" ? "none" : "block";
};

document.querySelectorAll(".uxItem").forEach(btn => {
  btn.onclick = () => {
    popups.forEach(p => p.style.display = "none");
    document.getElementById(btn.dataset.popup).style.display = "block";
    overlay.style.display = "block";
    menu.style.display = "none";
  };
});

overlay.onclick = () => {
  popups.forEach(p => p.style.display = "none");
  overlay.style.display = "none";
};
</script>



<div class="bloc-astuce">
  📨 l&#8217;envoi du <strong> mail de confirmation</strong> est automatique.
</div>

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



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-ea23b66e04ac872108dbec1a4fcede2f" id="12-4%EF%B8%8F%E2%83%A3-historiser-sans-contact">4️⃣| Historiser sans &#8220;contact&#8221;</h2>



<p>👉 Cela peut se produire que <strong>le touch poin</strong>t (le contact avec le client) n&#8217;ait <strong>pas généré de ticket </strong>automatiquement (<strong>appel téléphonique, courrier classique, client devant vous</strong> à un guichet de SAV) et <strong>que ce soit à vous de le créer.</strong></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 is-resized"><img loading="lazy" decoding="async" width="175" height="269" src="https://st9ph.fr/wp-content/uploads/2026/03/image-35.png" alt="" class="wp-image-36007" style="width:207px;height:auto"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center has-base-2-background-color has-background">Prenons <strong>l&#8217;exemple d&#8217;un appel téléphonique</strong>, même si, à l&#8217;examen, il y&#8217;a peu de chance qu&#8217;on vous mette un casque sur les oreilles pour en faire entendre un 🎧 mais ce sera peut-être <strong>un courrier en annexe,</strong> c&#8217;est possible.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="157" height="281" src="https://st9ph.fr/wp-content/uploads/2026/02/image-138.png" alt="" class="wp-image-36179" style="width:184px;height:auto"/></figure>
</div>
</div>



<figure class="wp-block-audio"><audio controls src="https://st9ph.fr/wp-content/uploads/2026/02/dialogueSt9ph2.mp3"></audio></figure>


<div class="wp-block-ub-content-toggle wp-block-ub-content-toggle-block" id="ub-content-toggle-block-a7ae8a9e-51a3-49f3-a040-3035b8143dc3" data-mobilecollapse="false" data-desktopcollapse="true" data-preventcollapse="false" data-showonlyone="false">
<div class="wp-block-ub-content-toggle-accordion" style="border-color: #f1f1f1; " id="ub-content-toggle-panel-block-">
			<div class="wp-block-ub-content-toggle-accordion-title-wrap" style="background-color: #f1f1f1;" aria-controls="ub-content-toggle-panel-0-a7ae8a9e-51a3-49f3-a040-3035b8143dc3" tabindex="0">
			<p class="wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-a7ae8a9e-51a3-49f3-a040-3035b8143dc3" style="color: #000000; ">🔇 Pour ceux qui n&#8217;ont <strong>pas le son</strong>, <strong>cliquez pour développer</strong> -&gt;</p>
			<div class="wp-block-ub-content-toggle-accordion-toggle-wrap right" style="color: #000000;"><span class="wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down"></span></div>
		</div>
			<div role="region" aria-expanded="false" class="wp-block-ub-content-toggle-accordion-content-wrap ub-hide" id="ub-content-toggle-panel-0-a7ae8a9e-51a3-49f3-a040-3035b8143dc3">

<p><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Chargée de clientèle (CC): Boutique st9ph, bonjour ! bienvenue au service client !</mark><br>Client: Bonjour, je vous appelle parce que je n&#8217;ai pas reçu la facture d&#8217;un produit que j&#8217;ai acheté chez vous !<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Ce n&#8217;est pas normal, en effet ! nous allons regarder cela ensemble : pouvez vous m&#8217;indiquer l&#8217;adresse mail que vous utilisez dans la boutique ?</mark><br>Client: oui, bien sur ! gnelvet@gmail.com<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: très bien ! J&#8217;accède à votre dossier … vous êtes bien monsieur Gabin Nelvet ?</mark><br>Client: oui !<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Enchanté monsieur Nelvet, je suis Célia et c&#8217;est moi qui vais traiter votre demande. Pouvez vous me confirmer votre code postal s&#8217;il vous plait ?</mark><br>Client: Heu … oui ? 14000<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC : Merci ! Avez-vous bien reçu le lien de téléchargement de votre produit ?</mark><br>Client: oui !<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Mais pas le mail qui vous indiquait que votre paiement été accepté ?</mark><br>Client: Si ! Mais justement, il n&#8217;y avait pas de pièce jointe comme les autres fois.<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: En résumé, vous avez eu le lien de téléchargement, le mail de confirmation du paiement mais pas de facture attaché à ce mail. C&#8217;est bien cela ?</mark><br>Client: Hé oui ! Et j&#8217;en ai besoin !<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Je comprends ! Tout d&#8217;abord, excusez-vous pour le désagrément ! Cela arrive parfois que le mail automatique oublie de joindre la facture.</mark><br>Client: Pas de soucis !<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Je comprends ! Savez-vous que vous pouvez la retrouver dans votre compte client sans que j&#8217;ai même besoin de vous la renvoyer ?</mark><br>CC: Ah non ? Comment je fais ?<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Vous êtes connecté à la boutique st9ph ?</mark><br>Client: Oui !<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Je vous explique ?</mark><br>Client: Oui ! Volontiers !<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Vous voyez l&#8217;icone du panier, en haut à droite ?</mark><br>Client: Oui !<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Et à côté votre nom ?</mark><br>Client: Oui.<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Cliquez dessus !</mark><br>Client: c&#8217;est fait.<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Vous devez voir une rubrique &#8220;historique et détails des commandes&#8221;, c&#8217;est le cas ?</mark><br>Client: Oui ! Ah oui ! C&#8217;est l&#8217;icone pdf, c&#8217;est ça ?<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Oui, c&#8217;est cela.</mark><br>Client: Parfait ! Je l&#8217;ai maintenant !<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Et à l&#8217;avenir, vous pourrez retrouvez toutes vos factures ici, si pour vos prochains achats notre robot d&#8217;envoi de mail oublie encore sa pièce jointe !</mark><br>Client: c&#8217;est sur !<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Ai-je bien répondu à vos attentes ?</mark><br>Client: Oui, c&#8217;est parfait.<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: avez-vous d&#8217;autres questions ?</mark><br>Client: non, non, tout va bien !<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Vous m&#8217;en voyez ravie ! Je vous souhaite une agréable journée de la part de la boutique st9ph</mark><br>Client: Merci ! Au revoir Célia !<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">CC: Au revoir monsieur Nelvet.</mark></p>



<p></p>

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


<div class="bloc-qcm">
  <p class="qcm-question">
    🎧 <strong>A votre avis:</strong> Faut-il garder une trace de ce touch point ?
  </p>

  <ul class="qcm-options">
    <li data-correct="false">Non, le client est satisfait, son problème est résolu, ça ne sert à rien</li>
    <li data-correct="false">Non, faire un ticket pour le fermer aussitôt, ça va charger la base de SAV pour rien</li>
    <li data-correct="true">Oui, on garde une trace de tous les touch points, même en FCR</li>
  </ul>

  <p class="qcm-feedback"></p>
</div>

<style>
.bloc-qcm {
  border-left: 4px solid #1e73be;
  background: #f5f9ff;
  padding: 16px 18px;
  margin: 24px 0;
  border-radius: 4px;
  font-size: 15px;
}

.qcm-options {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}

.qcm-options li {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.qcm-options li:hover {
  background: #eef3ff;
}

.qcm-options li.correct {
  background: #e6f4ea;
  border-color: #188038;
}

.qcm-options li.wrong {
  background: #fdecec;
  border-color: #dc2626;
}

.qcm-feedback {
  margin-top: 12px;
  font-weight: bold;
}
</style>

<script>
document.querySelectorAll('.bloc-qcm').forEach(qcm => {
  const options = qcm.querySelectorAll('.qcm-options li');
  const feedback = qcm.querySelector('.qcm-feedback');

  options.forEach(option => {
    option.addEventListener('click', () => {
      options.forEach(o => o.classList.remove('correct', 'wrong'));

      if (option.dataset.correct === "true") {
        option.classList.add('correct');
        feedback.textContent = "✅ Bonne réponse ! On historise quelle que soit l'issue.";
        feedback.style.color = "#188038";
      } else {
        option.classList.add('wrong');
        feedback.textContent = "❌ Hé si ! Il faut garder une trace, même des appels résolus.";
        feedback.style.color = "#dc2626";
      }
    });
  });
});
</script>



<p>Dans ce cas de figure, il faudra que <strong>l&#8217;opératrice historise </strong>:</p>



<ul class="wp-block-list">
<li>Commandes &gt; (retrouver la commande) &gt; Messages (<mark style="background-color:rgba(0, 0, 0, 0);color:#d33636" class="has-inline-color">ne cochez pas &#8220;montrer au client&#8221;, c&#8217;est interne</mark>)</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">
<!-- 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/01/image-345.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 -->



<p>👉 Pourquoi pas aussi <strong>lui envoyer un mail avec la procédure pour rappel.</strong> Ce geste supplémentaire est propice à la satisfaction client renforcée.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Un <strong>nouveau ticket est généré</strong> dans le SAV :</p>



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



<p class="has-base-2-background-color has-background">Il permettra <strong>à tous les opérateurs </strong>de <strong>prendre connaissance de ce touch point </strong>et d&#8217;<strong>en tenir compte</strong>. Cela peut même <strong>mettre le client en confiance </strong>quand vous lui dites : &#8220;Je vois que vous nous avez appelé la semaine dernière à ce sujet &#8230;&#8221;</p>
</div>
</div>



<p>➡️ Dans l&#8217;exemple audio, Célia, la téléopératrice a été <strong>proactive </strong>en expliquant à son client comment s<strong>&#8216;auto-dépanner </strong>(selfcare). </p>



<p>Elle a surement, en plus de <strong>renforcer sa satisfaction</strong>, <strong>évité </strong>qu&#8217;<strong>un nouvel appel </strong>pour cette même problématique intervienne de sa part. L&#8217;e<strong>mail récapitulatif</strong> sera un très bon moyen de <strong>finaliser le ticket</strong> en Next Step.</p>



<!-- DÉBUT MAIL HTML (V3.3) -->
<style>
    .preview-header-bar { background: #f8f9fa; border-bottom: 1px solid #ddd; padding: 15px; display: flex; justify-content: space-between; font-size: 13px; color: #555; flex-wrap: wrap; gap: 10px; font-family: sans-serif; }
    .preview-header-bar strong { color: #333; }
    .email-body-wrapper { max-width: 600px; margin: 0 auto; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; line-height: 1.6; background: #fff; }
    .email-logo { text-align: center; margin-bottom: 25px; }
    .email-logo img { max-width: 180px !important; height: auto !important; display: inline-block !important; margin: 0 auto !important; }
    
    .phase-row { display: flex; align-items: flex-start; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #eeeeee; }
    .phase-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .phase-label { width: 18%; font-size: 11px; font-weight: 700; color: #555555; text-transform: uppercase; line-height: 1.3; padding-top: 2px; flex-shrink: 0; }
    .phase-content { width: 82%; font-size: 14px; color: #333; padding-left: 20px; border-left: 2px solid #f0f0f0; }
    
    .phase-cta .phase-content { border-left: none; text-align: center; padding-left: 0; }
    .cta-button { display: inline-block; background: #25B9D7; color: #fff !important; text-decoration: none; padding: 12px 25px; border-radius: 5px; font-weight: bold; }
    
    .phase-signature .phase-content { font-weight: bold; border-left: none; padding-left: 0; white-space: normal; }
    
    .email-footer { background: #f4f4f4; padding: 20px; font-size: 11px; color: #777; text-align: center; margin-top: 20px; border-top: 1px solid #e0e0e0; }
    .footer-section { margin-bottom: 8px; }
    .footer-links a { color: #555; text-decoration: underline; }
    .social-icons { margin-top: 15px; }
    .social-icons img { width: 24px !important; height: 24px !important; margin: 0 5px !important; vertical-align: middle !important; display: inline-block !important; border: none !important; box-shadow: none !important; }
    
    @media (max-width: 768px) {
        .phase-row { flex-direction: column; }
        .phase-label { width: 100%; margin-bottom: 5px; color: #888; }
        .phase-content { width: 100%; padding-left: 0; border-left: none; }
    }
</style>

<div class="preview-header-bar">
    <span><strong>De :</strong> boutique st9ph</span>
    <span><strong>À :</strong> gnelvet@gmail.com</span>
    <span><strong>Objet :</strong>  suite à votre appel au service client de [date &#8211; heure]</span>
</div>

<div class="email-body-wrapper">
    <div class="email-logo"><img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/shop-st9ph-paysage.jpg" alt="Logo"></div>
    
    <div class="phase-row">
        <div class="phase-label">Salutations</div>
        <div class="phase-content">Bonjour Gabin Nelvet,</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Intro ou reformulation</div>
        <div class="phase-content">Le mail de téléchargement de votre dernière commande à omis de joindre la facture et nous nous excusons pour ce désagrément.<br>Vous nous avez contactés au 📞 3568 pour la retrouver et nous vous en remercions.</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Proposition</div>
        <div class="phase-content">Nous avons vu ensemble comment retrouver cette facture dans votre espace client et nous considérons votre demande comme résolue. </div>
    </div>
    
    <div class="phase-row phase-cta">
        <div class="phase-label">Action</div>
        <div class="phase-content">
            <a href="https://boutiq.st9ph.fr/historique-commandes" class="cta-button" target="_blank">voir toutes vos factures dans la boutique</a>
        </div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Next Step</div>
        <div class="phase-content">Le bouton ci-dessus ne fonctionne que si vous êtes connecté au préalable à la boutique (restez connecté en cochant la case &#8220;se souvenir de moi&#8221;).<br>L&#8217;incident porte le numéro de ticket TK#801F si vous aviez toutefois encore des questions à ce sujet. Merci de mentionner cette référence le cas échéant afin de faciliter nos échanges.<br>Pour rappel, c&#8217;est dans votre espace client, dans &#8220;historique et détails de vos commandes&#8221; que vous pouvez retrouver toutes vos factures (dans un délai maximum de 10 ans).</div>
    </div>
    
    <div class="phase-row">
        <div class="phase-label">Congés</div>
        <div class="phase-content">Toute l&#8217;équipe st9ph Market reste à votre disposition, vous remercie pour votre fidélité et vous dit à bientôt sur notre boutique en ligne.</div>
    </div>
    
    <div class="phase-row phase-signature">
        <div class="phase-label">Signature</div>
        <div class="phase-content">Stéphane,<br>Votre conseiller commercial.</div>
    </div>
    
    <div class="email-footer">
        <div class="footer-section">vous recevez ce mail en tant que client de la boutique st9ph</div>
        <div class="footer-section footer-links"><a href="#">Se désinscrire</a></div>
        <div class="footer-section">Conformément à la loi informatique et libertés du 6 janvier 1978 complété par le règlement européen dit RGPD en vigueur depuis le 25 mai 2018, vous disposez d’un droit d’accès et de rectification sur les données vous concernant. Pour exercer ce droit : rubrique &#8220;mon compte&#8221; (accès &#038; modification) ou contactez-nous > sujet &#8220;mon compte&#8221; pour supprimer votre compte</div>
        <div class="footer-section">Utilisez le lien &#8220;contactez nous&#8221; pour toutes vos demandes au service client ou appelez le 📞3568</div>
        <div class="footer-section">shop.st9ph.fr &#8211; [mois -année]</div>
        <div class="social-icons"></div>
    </div>
</div>
<!-- FIN MAIL HTML -->



<p>➡️ Remarquez le remerciement en <strong>prise de congés</strong> :</p>



<ul class="wp-block-list">
<li>&#8220;<em>Toute l&#8217;équipe st9ph Market [&#8230;] vous remercie de <strong>votre intérêt pour nos produits </strong>&#8230;</em>&#8221; pour <strong>les prospects</strong> (Sarah ViGOTE)</li>



<li>&#8220;T<em>oute l&#8217;équipe st9ph Market [&#8230;] vous remercie de <strong>votre fidélité</strong></em>&#8221; pour <strong>les clients</strong> (Gabin NELVET)</li>
</ul>



<div class="bloc-rappel">
 🆗 <strong> N&#8217;oubliez pas qu&#8217;un client qui réclame est un client qui a confiance !</strong> </div>

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



<p class="has-text-align-center has-small-font-size">Sinon, il ne vous contacte même pas s&#8217;il n&#8217;a aucun espoir.</p>



<p>Voilà, n&#8217;oubliez pas à l&#8217;examen E5B :</p>



<ul class="wp-block-list">
<li>Menez l&#8217;enquête pour savoir <strong>ce qui est factuel</strong> ✅, de l&#8217;ordre d&#8217;un <strong>manque de notre part</strong> <strong>ou de celui du client</strong>.</li>



<li>Menez les opérations <strong>proactives</strong> 🚓 ou / et <strong>réactives</strong> 🚑qui s&#8217;imposent</li>



<li>✍️Répondez <strong>ensuite</strong> au client pour lui dire exactement :
<ul class="wp-block-list">
<li>🆗 <strong>ce que vous avez fait</strong> pour lui,</li>



<li>🔴 <strong>ce que vous n&#8217;avez pas pu faire</strong> (et pourquoi),</li>



<li>🔜 <strong>ce qu&#8217;il reste à faire</strong> de la part du SAV ou de la sienne et comment cela va se passer (<strong>Next Step</strong>)</li>
</ul>
</li>
</ul>



<p>✅ Et tout cela en respectant <a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2959/preview/pdf/5595" target="_blank" rel="noreferrer noopener">la charte de mail</a> (voir page 3 du lien) et <strong>les consignes du sujet</strong>.</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:66.66%">
<p class="has-text-align-right has-medium-font-size">Vous êtes mûr(e) pour un petit 🎓 TP ?</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<style>
.alert-av6hqn-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(3px); z-index: 9999; justify-content: center; align-items: center; }
.alert-av6hqn-dialog { background: #fff; width: 90%; max-width: 400px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow: hidden; animation: popInalert-av6hqn 0.2s ease-out; border: 1px solid #ddd; }
@keyframes popInalert-av6hqn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.alert-av6hqn-header { padding: 20px 20px 10px 20px; display: flex; align-items: flex-start; }
.alert-av6hqn-icon { font-size: 28px; margin-right: 15px; flex-shrink: 0; line-height: 1; }
.alert-av6hqn-title { font-weight: 600; font-size: 16px; color: #333; margin: 0; line-height: 1.3; }
.alert-av6hqn-body { padding: 0 20px 20px 55px; font-size: 14px; color: #333; line-height: 1.5; }
.alert-av6hqn-footer { border-top: 1px solid #eee; padding: 10px 20px; display: flex; justify-content: flex-end; gap: 10px; background: #f9f9f9; }
.alert-av6hqn-btn { padding: 8px 16px; border-radius: 4px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: background 0.2s; }
.alert-av6hqn-btn-cancel { background: #e0e0e0; color: #333; } .alert-av6hqn-btn-cancel:hover { background: #d0d0d0; }
.alert-av6hqn-btn-confirm { background: #0066cc; color: white; } .alert-av6hqn-btn-confirm:hover { background: #0052a3; }
.alert-av6hqn-btn-close { background: #2196f3; color: white; width: 100%; } .alert-av6hqn-btn-close:hover { background: #1976d2; }
.alert-av6hqn-trigger { background: #ff9800; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 4px; cursor: pointer; font-family: sans-serif; display: inline-block; margin: 10px 0; } .alert-av6hqn-trigger:hover { background: #e68900; }
</style><!-- DÉBUT ALERTE MODALE (Généré) -->
<div id="alert-av6hqn-overlay" class="alert-av6hqn-overlay">
    <div class="alert-av6hqn-dialog">
        <div class="alert-av6hqn-header">
            <div class="alert-av6hqn-icon" style="color: #ff9800">⚠️</div>
            <div><div class="alert-av6hqn-title">st9ph.fr indique</div></div>
        </div>
        <div class="alert-av6hqn-body">🔒Cet article est réservé à mes étudiants. Il vous faudra un code pour accéder au contenu. Merci de votre compréhension.</div>
        <div class="alert-av6hqn-footer">
                <button class="alert-av6hqn-btn alert-av6hqn-btn-cancel" onclick="document.getElementById('alert-av6hqn-overlay').style.display='none'">Rester sur la page</button>
                <button class="alert-av6hqn-btn alert-av6hqn-btn-confirm" onclick="if('https://st9ph.fr/%f0%9f%8e%93tp-service-client/') window.location.href='https://st9ph.fr/%f0%9f%8e%93tp-service-client/'; else document.getElementById('alert-av6hqn-overlay').style.display='none';">continuer ver le 🎓TP</button>
            </div>
    </div>
</div>
<button onclick="document.getElementById('alert-av6hqn-overlay').style.display='flex'" class="alert-av6hqn-trigger">😁 Même pas peur !</button>
<!-- FIN ALERTE MODALE -->
</div>
</div>



<p>🔻La version <img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""><mark style="background-color:rgba(0, 0, 0, 0);color:#eb1e1e" class="has-inline-color">pdf</mark>, à venir. ♻️<mark style="background-color:rgba(0, 0, 0, 0);color:#3eb674" class="has-inline-color"><strong>A imprimer avec modération.</strong></mark></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">🛠️ création de sites</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%2Fprestashop-le-service-apres-vente%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-03f25ead     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/prestashop-op-com-dans-la-eshop/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="732" height="259" src="https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop.jpg 732w, https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop-300x106.jpg 300w" sizes="auto, (max-width: 732px) 100vw, 732px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/" target="_self" rel="bookmark noopener noreferrer">Prestashop | OP Com dans la Eshop</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-02-17T18:27:24+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					17 février 2026				</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>PrestaShop | 💥OP Com dans la Eshop ➡️ Que ce soit pour &#8230; vider les&#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/prestashop-op-com-dans-la-eshop/" 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/prestashop-manipuler-la-boutique/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="736" height="226" src="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958.jpg 736w, https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958-300x92.jpg 300w" sizes="auto, (max-width: 736px) 100vw, 736px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-manipuler-la-boutique/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Manipuler la boutique</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-22T14:40:35+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					22 janvier 2026				</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>PrestaShop | Manipuler la boutique 🏪 👉🏻 2nd bloc d&#8217;évaluation de l&#8217;épreuve technique, les manipulations&#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/prestashop-manipuler-la-boutique/" 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/prestashop-la-fiche-produit/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="769" height="245" src="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-144419.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-144419.jpg 769w, https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-144419-300x96.jpg 300w" sizes="auto, (max-width: 769px) 100vw, 769px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-la-fiche-produit/" target="_self" rel="bookmark noopener noreferrer">Prestashop | La Fiche Produit par l&#8217;exemple</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-16T22:44:19+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					16 janvier 2026				</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>PrestaShop | La Fiche Produit 🎧 Ecouter l&#8217;introduction audio 👉🏻 1er bloc d&#8217;évaluation de l&#8217;épreuve&#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/prestashop-la-fiche-produit/" 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/prestashop-cas-de-retours-produits/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="723" height="199" src="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925.jpg 723w, https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925-300x83.jpg 300w" sizes="auto, (max-width: 723px) 100vw, 723px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-cas-de-retours-produits/" target="_self" rel="bookmark noopener noreferrer">Prestashop | les retours produits</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-12-18T19:06:17+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					18 décembre 2025				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Un commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>restaShop | Les retours produits 🔙 ➡️ Il faut savoir que les différents scénarios devront&#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/prestashop-cas-de-retours-produits/" 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/prestashop-nouveautes-de-la-version-9/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="307" src="https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-1024x349.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-1024x349.png 1024w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-300x102.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-768x262.png 768w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9.png 1059w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-nouveautes-de-la-version-9/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Nouveautés de la version 9</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-11-19T10:45:25+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					19 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>Une nouvelle version du CMS pose quelques améliorations au Backoffice et un nouveau thème en&#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/prestashop-nouveautes-de-la-version-9/" 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/prestashop-referencement-seo-de-vos-produits/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="425" src="https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-1024x484.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-1024x484.png 1024w, https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-300x142.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-768x363.png 768w, https://st9ph.fr/wp-content/uploads/2025/11/refeProduit.png 1062w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-referencement-seo-de-vos-produits/" target="_self" rel="bookmark noopener noreferrer">Prestashop | référencement SEO de vos produits</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-11-14T10:10:32+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					14 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>PrestaShop | le SEO de vos produits 👉🏻 Essentiel pour assurer votre visibilité sur les&#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/prestashop-referencement-seo-de-vos-produits/" 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/prestashop-le-service-apres-vente/">Prestashop | Le Service Après Vente</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://st9ph.fr/prestashop-le-service-apres-vente/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/voicertool_audio_Eloise_24-01-2026_at_23_13_14_on_January_24th_2026.mp3" length="268704" type="audio/mpeg" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/02/dialogueSt9ph2.mp3" length="1290672" type="audio/mpeg" />

		<post-id xmlns="com-wordpress:feed-additions:1">33379</post-id>	</item>
		<item>
		<title>Prestashop &#124; Manipuler la boutique</title>
		<link>https://st9ph.fr/prestashop-manipuler-la-boutique/</link>
					<comments>https://st9ph.fr/prestashop-manipuler-la-boutique/#comments</comments>
		
		<dc:creator><![CDATA[St9ph]]></dc:creator>
		<pubDate>Thu, 22 Jan 2026 13:40:35 +0000</pubDate>
				<category><![CDATA[PrestaShop]]></category>
		<category><![CDATA[🛠️ création de sites]]></category>
		<category><![CDATA[🌐 public]]></category>
		<guid isPermaLink="false">https://st9ph.fr/?p=33149</guid>

					<description><![CDATA[<p>PrestaShop &#124; Manipuler la boutique 🏪 👉🏻 2nd bloc d&#8217;évaluation de l&#8217;épreuve technique, les manipulations à l&#8217;intérieur de la boutique qu&#8217;on peut vous demander durant l&#8217;examen E5B du BTS NDRC sont nombreuses et variées. 📖 Lecture : 0 % Les deux autres blocs de questions étant : ⏱️ Vous devrez répartir votre temps (et donc ... <a title="Prestashop &#124; Manipuler la boutique" class="read-more" href="https://st9ph.fr/prestashop-manipuler-la-boutique/" aria-label="En savoir plus sur Prestashop &#124; Manipuler la boutique">Lire la suite</a></p>
<p>L’article <a href="https://st9ph.fr/prestashop-manipuler-la-boutique/">Prestashop | Manipuler la boutique</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-80041ad0 wp-block-group-is-layout-flex">


<p class="has-medium-font-size"><strong>PrestaShop</strong></p>



<p class="has-accent-color has-text-color has-link-color has-x-large-font-size wp-elements-323854018c51f2c2f72d855c72eecd25"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-contrast-color">|</mark> Manipuler la boutique 🏪</p>
</div>



<p class="has-medium-font-size">👉🏻 2nd bloc d&#8217;évaluation de l&#8217;épreuve technique,<strong> les manipulations à l&#8217;intérieur de la boutique</strong> qu&#8217;on peut vous demander durant <strong>l&#8217;examen </strong>E5B du BTS NDRC <strong>sont nombreuses et variées</strong>.</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>



<figure class="wp-block-audio"><audio controls src="https://st9ph.fr/wp-content/uploads/2026/01/voicertool_audio_Eloise_22-01-2026_at_18_37_09_on_January_22nd_2026.mp3"></audio><figcaption class="wp-element-caption">🎧 Ecouter l&#8217;introduction audio</figcaption></figure>



<p><strong>Les deux autres blocs</strong> de questions étant : </p>



<ul class="wp-block-list">
<li>2️⃣ la <strong>création ou la modification d&#8217;une fiche produit </strong>(<strong><a href="https://st9ph.fr/prestashop-la-fiche-produit/" target="_blank" rel="noreferrer noopener">dans cet article</a></strong>)</li>



<li>3️⃣ <strong>le SAV</strong> cad traiter une demande client- <a href="https://st9ph.fr/prestashop-le-service-apres-vente/" target="_blank" rel="noreferrer noopener">voir l&#8217;article</a>
<ul class="wp-block-list">
<li>voir aussi <img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""> <strong><strong><a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2963/preview/pdf/295" target="_blank" rel="noreferrer noopener">book Prestashop</a></strong></strong></li>
</ul>
</li>
</ul>



<p class="has-base-2-background-color has-background">⏱️ Vous devrez <strong>répartir votre temps </strong>(et donc vos points) <strong>entre ces trois blocs.</strong> Sur une épreuve de <strong>40 minutes</strong>, <strong>vous en aurez donc 13 pour réaliser toutes les manipulations de cet article </strong>et aller chercher <strong>les 6 à 7 points sur 20 </strong>de ce bloc.</p>



<p class="has-text-align-center has-medium-font-size">On fait le tour de ce qu&#8217;il faut apprendre dans cet article.:</p>



<p>ℹ️ Cet article englobe aussi des aspects de ☝️concepts (<strong>légalité de la EShop</strong>) en complément de cette magnifique <img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""><a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2961/preview/pdf/5747" target="_blank" rel="noreferrer noopener">fiche ressource</a> pour la préparation de l&#8217;épreuve écrite E5A (compétence 3).</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">
<h2 class="wp-block-heading has-base-2-background-color has-background has-medium-font-size" id="0-%E2%AC%85%EF%B8%8F-retour-%C3%A0-la-fiche-produit-">⬅️ <a href="https://st9ph.fr/prestashop-la-fiche-produit/">retour à la Fiche Produit</a></h2>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-base-2-background-color has-background has-medium-font-size"><a href="https://st9ph.fr/prestashop-le-service-apres-vente/" target="_blank" rel="noreferrer noopener">Aller directement au SAV</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%"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" 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>
</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-42ddb4f8-8303-43dc-b377-dda5ac0ef141">
			<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-42ddb4f8-8303-43dc-b377-dda5ac0ef141-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-42ddb4f8-8303-43dc-b377-dda5ac0ef141-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-42ddb4f8-8303-43dc-b377-dda5ac0ef141-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-42ddb4f8-8303-43dc-b377-dda5ac0ef141-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-42ddb4f8-8303-43dc-b377-dda5ac0ef141-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-42ddb4f8-8303-43dc-b377-dda5ac0ef141-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-42ddb4f8-8303-43dc-b377-dda5ac0ef141-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-42ddb4f8-8303-43dc-b377-dda5ac0ef141-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-42ddb4f8-8303-43dc-b377-dda5ac0ef141-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-42ddb4f8-8303-43dc-b377-dda5ac0ef141-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-ab82e9bf-2c26-4f86-8b11-6a32cd645c8a">
			<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-ab82e9bf-2c26-4f86-8b11-6a32cd645c8a-0"><rect height="150" width="150" 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-ab82e9bf-2c26-4f86-8b11-6a32cd645c8a-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-ab82e9bf-2c26-4f86-8b11-6a32cd645c8a-1"><rect height="150" width="75" 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-ab82e9bf-2c26-4f86-8b11-6a32cd645c8a-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-ab82e9bf-2c26-4f86-8b11-6a32cd645c8a-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-ab82e9bf-2c26-4f86-8b11-6a32cd645c8a-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-ab82e9bf-2c26-4f86-8b11-6a32cd645c8a-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-ab82e9bf-2c26-4f86-8b11-6a32cd645c8a-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-ab82e9bf-2c26-4f86-8b11-6a32cd645c8a-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-ab82e9bf-2c26-4f86-8b11-6a32cd645c8a-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-fda696be-7e1c-451f-8c23-5940618cac73">
			<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-fda696be-7e1c-451f-8c23-5940618cac73-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-fda696be-7e1c-451f-8c23-5940618cac73-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-fda696be-7e1c-451f-8c23-5940618cac73-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-fda696be-7e1c-451f-8c23-5940618cac73-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-fda696be-7e1c-451f-8c23-5940618cac73-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-fda696be-7e1c-451f-8c23-5940618cac73-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-fda696be-7e1c-451f-8c23-5940618cac73-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-fda696be-7e1c-451f-8c23-5940618cac73-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-fda696be-7e1c-451f-8c23-5940618cac73-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-fda696be-7e1c-451f-8c23-5940618cac73-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>



<p class="has-text-align-center has-small-font-size">Il est possible que les termes ou les aperçus d&#8217;écran diffèrent entre votre BO et le mien notamment au niveau des noms de labels car j&#8217;utilise une version multilingue du CMS et <strong>les noms restent parfois en anglais</strong>.</p>



<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">42–63 minutes</div>


<p>|</p>


<div class="wp-block-post-time-to-read">9 884 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-04-02T12:59:50+02:00">2 avril  2026</time></div></div>


				<div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-b4ee5d2e      uagb-toc__collapse--list"
					data-scroll= "1"
					data-offset= "30"
					style=""
				>
				<div class="uagb-toc__wrap">
						<div class="uagb-toc__title">
							plan du tuto :						</div>
												<div class="uagb-toc__loader"></div>										<div class="uagb-toc__list-wrap uagb-toc__list-hidden">
						<ol class="uagb-toc__list"><li class="uagb-toc__list "><a href="#retour-à-la-fiche-produit" class="uagb-toc-link__trigger">⬅️ retour à la Fiche Produit</a><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#tour-dhorizon-des-contenus-dévaluation" class="uagb-toc-link__trigger">tour d&#039;horizon des contenus d&#039;évaluation</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#0-1-apparence" class="uagb-toc-link__trigger">0-1 | Apparence</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#0-2-contenu" class="uagb-toc-link__trigger">0-2 | contenu</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#0-3-commandes-et-promotions" class="uagb-toc-link__trigger">0-3 | Commandes et promotions</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#0-4-images" class="uagb-toc-link__trigger">0-4 | Images</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#0-5-modules" class="uagb-toc-link__trigger">0-5 | Modules</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#0-6-navigation" class="uagb-toc-link__trigger">0-6 | Navigation</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#0-7-seo" class="uagb-toc-link__trigger">0-7 | SEO</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#0-8-utilisateurs" class="uagb-toc-link__trigger">0-8 | Utilisateurs</a></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#navigation-dans-la-boutique" class="uagb-toc-link__trigger">Navigation dans la boutique</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#11-présentation-des-2-thèmes-préinstallés-sur-la-v9" class="uagb-toc-link__trigger">🔹1.1 |présentation des 2 thèmes préinstallés sur la v9</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#12-repositionner-les-blocs-entre-eux" class="uagb-toc-link__trigger">🔹1.2 |Repositionner les blocs entre eux</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#13-paramétrer-les-blocs-de-navigation" class="uagb-toc-link__trigger">🔹1.3 |Paramétrer les blocs de navigation</a></li></ul></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#affichage-dans-la-boutique" class="uagb-toc-link__trigger">Affichage dans la boutique</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#21-afficher-les-produits" class="uagb-toc-link__trigger">🔹2.1 | 🔖Afficher les produits</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#22-affiches-les-offres" class="uagb-toc-link__trigger">🔹2.2 | 💥Affiches les offres</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#2-3-afficher-nos-informations" class="uagb-toc-link__trigger">2-3 | Afficher nos informations</a></li></ul></li></ul></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#ressources-de-la-boutique" class="uagb-toc-link__trigger">Ressources de la boutique</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#31-clients" class="uagb-toc-link__trigger">🔹3.1 |Clients</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#32-livraison" class="uagb-toc-link__trigger">🔹3.2 |Livraison</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#33-marques-et-fournisseurs" class="uagb-toc-link__trigger">🔹3.3 |Marques et fournisseurs</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#34-rôles-internes" class="uagb-toc-link__trigger">🔹3.4 |Rôles internes</a></li></ul></li></ul></li></ul></li></ul></li><li class="uagb-toc__list "><a href="#aller-au-sav" class="uagb-toc-link__trigger">Aller au SAV ➡️</a></ul></ul></ul></ul></ol>					</div>
									</div>
				</div>
			


<!-- Bouton principal -->
<button id="uxMenuBtn" style="
  position: fixed;
  right: 14px;
  bottom: 40%;
  padding: 12px 14px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  font-size: 18px;
">
  ☰
</button>

<!-- Menu -->
<div id="uxMenu" style="
  display:none;
  position: fixed;
  right: 14px;
  bottom: 48%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 10000;
  font-family: Arial, sans-serif;
">
  <button class="uxItem" data-popup="sources">📚 Sources</button>
  <button class="uxItem" data-popup="methodo">🧑‍🎓NDRC</button>
  <button class="uxItem" data-popup="glossary">📘 Glossaire</button>
</div>

<!-- Overlay -->
<div id="uxOverlay" style="
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.55);
  z-index:10001;
"></div>

<!-- POPUPS -->

<div class="uxPopup" id="sources" data-title="📚 Sources UX mobile">
<ul>
<li><strong>Nano Banana de Google Gemini</strong> – personnages d&#8217;illustration, des fiches produits et image en avant</li>
<li><strong>Prestashop</strong> – Saas dans sa version V9 pour les manipulations</li>
<li><strong>Ministère de l&#8217;Education Nationale</strong> – référenciel de l&#8217;épreuve technique</li>
</ul>
</div>

<div class="uxPopup" id="methodo" data-title="🧑‍🎓 NDRC">
<p>Cet article est à visée de 🖥️ l&#8217;épreuve technique E5B.</p>
<ul>
<li>connaitre l&#8217;ensemble des points d&#8217;évaluation de l&#8217;épreuve technique E5B sur Prestashop</li>
<li>savoir manipuler l&#8217;ensemble des modules du Front Office de la boutique</li>
<li>savoir manipuler l&#8217;ensemble des fonctionnalités liées à la navigation</li>
<li>Savoir mettre en valeur et faire la publicité des offres</li>
<li>Savoir modifier et afficher les informations légales de la boutique</li>
<li>Savoir modifier et ajouter des clients, des collaborateurs et des prestataires</li>
</ul>
<p>Certains contenus sont ciblés vers d&#8217;autres articles du blog</p>
</div>

<div class="uxPopup" id="glossary" data-title="📘 Glossaire UX mobile">
<ul>
<li><strong>produits phares</strong> : ceux qui sont les plus populaires (le plus vus)</li>
<li><strong>Best sellers</strong> : meilleurs ventes</li>
<li><strong>Publicité des opérations commerciales</strong> : c&#8217;est interne, il s&#8217;agit de mettre à disposition de clients les conditions des opérations</li>
<li><strong>meta description</strong> : courte introduction qui apparaitra sous le Titre dans une SERP</li>
</ul>
</div>

<!-- Style popup -->
<style>
.uxItem {
  display: block;
  padding: 10px 16px;
  background: #fff;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: #111;        /* ✅ TEXTE VISIBLE */
  font-size: 14px;
}

.uxItem:hover {
  background: #f0f0f0;
}
.uxItem:hover { background:#f0f0f0; }

.uxPopup {
  display:none;
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  width:90%;
  max-width:560px;
  max-height:80%;
  padding:24px;
  border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  z-index:10002;
  overflow-y:auto;
}
</style>
<style>
@media (max-width: 768px) {
  #uxMenuBtn,
  #uxMenu {
    display: none !important;
  }
}
</style>
<style>
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}
</style>
<style>
@media (max-width: 768px) {
  #uxMenuBtn,
  #uxMenu,
  #uxOverlay,
  .uxPopup {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    display: none !important;
  }
}
</style>

<script>
(function () {

  // === DÉSACTIVATION MOBILE ===
  if (window.innerWidth <= 768) {
    return; // on ne fait RIEN sur mobile
  }

  // === RÉFÉRENCES ===
  const menuBtn = document.getElementById("uxMenuBtn");
  const menu = document.getElementById("uxMenu");
  const overlay = document.getElementById("uxOverlay");
  const popups = document.querySelectorAll(".uxPopup");

  if (!menuBtn || !menu || !overlay) return;

  // === OUVERTURE / FERMETURE MENU ===
  menuBtn.addEventListener("click", () => {
    menu.style.display = menu.style.display === "block" ? "none" : "block";
  });

  // === OUVERTURE POPUPS ===
  document.querySelectorAll(".uxItem").forEach(btn => {
    btn.addEventListener("click", () => {
      popups.forEach(p => p.style.display = "none");
      const target = document.getElementById(btn.dataset.popup);
      if (target) target.style.display = "block";
      overlay.style.display = "block";
      menu.style.display = "none";
    });
  });

  // === FERMETURE OVERLAY ===
  overlay.addEventListener("click", () => {
    popups.forEach(p => p.style.display = "none");
    overlay.style.display = "none";
  });

})();
</script>



</script>
<script>
(function () {
  if (window.innerWidth <= 768) {
    const uxPanel = document.querySelector('.ux-panel');
    if (uxPanel) {
      uxPanel.remove();
    }
  }
})();
</script>



<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">0</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">
      tour d'horizon des contenus d'évaluation
    </h2>
    <p class="chapter-subtitle">Nomenclature de l'annexe VI-I du référenciel EN</p>
  </div>
</div>


<div class="wp-block-ub-table-of-contents-block ub_table-of-contents" id="ub_table-of-contents-1c200479-113a-4b21-9ce4-f3eac4f010ed" data-linktodivider="false" data-showtext="show" data-hidetext="hide" data-scrolltype="auto" data-enablesmoothscroll="false" data-initiallyhideonmobile="false" data-initiallyshow="true"><div class="ub_table-of-contents-header-container" style="">
			<div class="ub_table-of-contents-header" style="text-align: left; ">
				<div class="ub_table-of-contents-title" style=""></div>
				
			</div>
		</div><div class="ub_table-of-contents-extra-container" style="">
			<div class="ub_table-of-contents-container ub_table-of-contents-1-column ">
				<ul style=""><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#1-0-1-apparence-" style="">0-1 | Apparence</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#2-0-2-contenu-" style="">0-2 | contenu</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#3-0-3-commandes-et-promotions-" style="">0-3 | Commandes et promotions</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#4-0-4-images-" style="">0-4 | Images</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#5-0-5-modules-" style="">0-5 | Modules</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#6-0-6-navigation-" style="">0-6 | Navigation</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#7-0-7-seo-" style="">0-7 | SEO</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#8-0-8-utilisateurs-" style="">0-8 | Utilisateurs</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#9-11-pr%C3%A9sentation-des-2-th%C3%A8mes-pr%C3%A9install%C3%A9s-sur-la-v9-" style="">🔹1.1 |présentation des 2 thèmes préinstallés sur la v9</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#10-12-repositionner-les-blocs-entre-eux-" style="">🔹1.2 |Repositionner les blocs entre eux</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#11-13-param%C3%A9trer-les-blocs-de-navigation-" style="">🔹1.3 |Paramétrer les blocs de navigation</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#12-21-afficher-les-produits-" style="">🔹2.1 | 🔖Afficher les produits</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#13-22-affiches-les-offres-" style="">🔹2.2 | 💥Affiches les offres</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#15-31-clients-" style="">🔹3.1 |Clients</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#16-32-livraison-" style="">🔹3.2 |Livraison</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#17-33-marques-et-fournisseurs-" style="">🔹3.3 |Marques et fournisseurs</a></li><li style=""><a href="https://st9ph.fr/prestashop-manipuler-la-boutique/#18-34-r%C3%B4les-internes-" style="">🔹3.4 |Rôles internes</a></li></ul>
			</div>
		</div></div>


<p>🔹Ils sont définis par<strong> une circulaire académique </strong>(※<em>annexe VII-I</em>) mise à jour tous les ans. Voici la dernière (2025)  :</p>



<div data-wp-interactive="core/file" class="wp-block-file"><object data-wp-bind--hidden="!state.hasPdfPreview" hidden class="wp-block-file__embed" data="https://st9ph.fr/wp-content/uploads/2026/01/Annexe7-1-presta.pdf" type="application/pdf" style="width:100%;height:200px" aria-label="Contenu embarqué Annexe7-1-presta."></object><a id="wp-block-file--media-c3750fd9-4e98-4c7a-9c4d-ee5a94a310c9" href="https://st9ph.fr/wp-content/uploads/2026/01/Annexe7-1-presta.pdf">Annexe7-1-presta</a><a href="https://st9ph.fr/wp-content/uploads/2026/01/Annexe7-1-presta.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-c3750fd9-4e98-4c7a-9c4d-ee5a94a310c9">Télécharger</a></div>



<p></p>



<p>🔹Voyons tous d'abord ceux <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"><strong>qui seront vus ici</strong> </mark>ou qu'on peut déjà <strong>retrouver ailleurs sur le blog</strong> :</p>



<h3 class="wp-block-heading" id="1-0-1-apparence-">0-1 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Apparence</mark></h3>



<figure class="wp-block-table"><table><thead><tr><th>Fonctionnalité</th><th>Traitement sur le blog st9ph</th></tr></thead><tbody><tr><td>Affichage des blocs de la page d'accueil</td><td>✅ Ici | 1️⃣Navigation (bouger) 2️⃣Affichage (présence)</td></tr><tr><td> Produits Populaires (phares) </td><td>✅ Ici | 1️⃣Navigation (bouger) 2️⃣Affichage (présence)</td></tr><tr><td>Nouveaux produits</td><td>✅ Ici | 1️⃣Navigation (bouger) 2️⃣Affichage (présence)</td></tr><tr><td>listes de liens &amp; Link widgets</td><td><a href="https://st9ph.fr/configurer-la-liste-de-liens-du-footer-prestashop/" target="_blank" rel="noreferrer noopener">cet article</a></td></tr></tbody></table></figure>



<h3 class="wp-block-heading" id="2-0-2-contenu-">0-2 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">contenu</mark></h3>



<p>ℹ️ <strong>Toutes les manipulations présentes dans cette rubrique</strong>, <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">sauf celles indiquées dans le tableau ci-dessous</mark> <strong>sont traitées <a href="https://st9ph.fr/prestashop-la-fiche-produit/" target="_blank" rel="noreferrer noopener">dans cet article</a></strong>.</p>



<ul class="wp-block-list">
<li><strong>Réclamations, messages prédéfinis et SAV</strong> dans <mark style="background-color:rgba(0, 0, 0, 0);color:#df3636" class="has-inline-color"><a href="https://st9ph.fr/prestashop-le-service-apres-vente/" target="_blank" rel="noreferrer noopener">Cet article</a> </mark>sur <strong>le 3ème bloc</strong></li>



<li>Presque tous les points manquants sont <strong>tout de même disponibles dans le </strong><img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""><strong><strong><a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2963/preview/pdf/295" target="_blank" rel="noreferrer noopener">book Prestashop</a></strong></strong> que cette série d'articles vise à remplacer.</li>
</ul>



<figure class="wp-block-table"><table><thead><tr><th>Fonctionnalité</th><th>Traitement sur le blog st9ph</th></tr></thead><tbody><tr><td>Créer un catégorie et une sous-catégorie</td><td>✅ Ici | 1️⃣Navigation</td></tr><tr><td>Créer un pack de produit</td><td><a href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/" target="_blank" rel="noreferrer noopener">dans cet article</a> - <img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""><strong><strong><a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2963/preview/pdf/295" target="_blank" rel="noreferrer noopener">book Prestashop</a></strong></strong></td></tr><tr><td>Créer une Marque</td><td>✅ Ici | 3️⃣Ressources</td></tr><tr><td>Créer et gérer un groupe de clients</td><td>✅ Ici | 3️⃣Ressources</td></tr><tr><td>Gérer les stocks</td><td>✅ Ici | 3️⃣Ressources</td></tr><tr><td>Gérer les transporteurs</td><td>✅ Ici | 3️⃣Ressources</td></tr><tr><td>Traiter les commandes</td><td><a href="https://st9ph.fr/prestashop-le-service-apres-vente/" target="_blank" rel="noreferrer noopener">Article sur le SAV</a> (chapitre 3-2) - <img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""><strong><strong><a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2963/preview/pdf/295" target="_blank" rel="noreferrer noopener">book Prestashop</a></strong></strong></td></tr></tbody></table></figure>



<h3 class="wp-block-heading" id="3-0-3-commandes-et-promotions-">0-3 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Commandes et promotions</mark></h3>



<figure class="wp-block-table"><table><thead><tr><th>Fonctionnalité</th><th>Traitement sur le blog st9ph</th></tr></thead><tbody><tr><td>Créer et gérer une commande</td><td><mark style="background-color:rgba(0, 0, 0, 0);color:#df3636" class="has-inline-color"><a href="https://st9ph.fr/prestashop-le-service-apres-vente/" target="_blank" rel="noreferrer noopener">Cet article</a> </mark>sur <strong>le 3ème bloc</strong> (SAV) - <img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""><strong><strong><a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2963/preview/pdf/295" target="_blank" rel="noreferrer noopener">book Prestashop</a></strong></strong></td></tr><tr><td>Gérer les retours et les avoirs</td><td>retours : <a href="https://st9ph.fr/prestashop-cas-de-retours-produits/" target="_blank" rel="noreferrer noopener">cet article</a> | avoirs : <mark style="background-color:rgba(0, 0, 0, 0);color:#df3636" class="has-inline-color"><mark style="background-color:rgba(0, 0, 0, 0);color:#df3636" class="has-inline-color"><a href="https://st9ph.fr/prestashop-le-service-apres-vente/" target="_blank" rel="noreferrer noopener">Cet article</a></mark> </mark>sur <strong>le 3ème bloc</strong> (SAV)</td></tr><tr><td>conditions de retours produits</td><td><a href="https://st9ph.fr/prestashop-cas-de-retours-produits/" target="_blank" rel="noreferrer noopener">cet article</a> </td></tr><tr><td>promotions catalogue, panier et prix spécifiques</td><td>prix spécifique <strong><a href="https://st9ph.fr/prestashop-la-fiche-produit/" target="_blank" rel="noreferrer noopener">dans cet article</a></strong> | autres contenus : <a href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/" target="_blank" rel="noreferrer noopener">dans cet article </a>- <img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""><strong><strong><a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2963/preview/pdf/295" target="_blank" rel="noreferrer noopener">book Prestashop</a></strong></strong></td></tr></tbody></table></figure>



<h3 class="wp-block-heading" id="4-0-4-images-">0-4 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Images</mark></h3>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Fonctionnalité</th><th>Traitement sur le blog st9ph</th></tr></thead><tbody><tr><td>Modifier la légende et la description</td><td> <strong><a href="https://st9ph.fr/prestashop-la-fiche-produit/" target="_blank" rel="noreferrer noopener">dans cet article</a></strong></td></tr><tr><td>Image mises en avant</td><td> <strong><a href="https://st9ph.fr/prestashop-la-fiche-produit/" target="_blank" rel="noreferrer noopener">dans cet article</a></strong></td></tr></tbody></table></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="173" src="https://st9ph.fr/wp-content/uploads/2026/01/image-122-1024x173.png" alt="" class="wp-image-32622" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-122-1024x173.png 1024w, https://st9ph.fr/wp-content/uploads/2026/01/image-122-300x51.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-122-768x130.png 768w, https://st9ph.fr/wp-content/uploads/2026/01/image-122.png 1144w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading" id="5-0-5-modules-">0-5 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Modules</mark></h3>



<figure class="wp-block-table"><table><thead><tr><th>Fonctionnalité</th><th>Traitement sur le blog st9ph</th></tr></thead><tbody><tr><td>Produits phares</td><td>✅ Ici | 2️⃣Affichage</td></tr><tr><td>Carrousel</td><td><mark style="background-color:rgba(0, 0, 0, 0);color:#e53737" class="has-inline-color">2️⃣</mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-contrast-color">Affichage</mark> - <img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""><strong><strong><a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2963/preview/pdf/295" target="_blank" rel="noreferrer noopener">book Prestashop</a></strong></strong></td></tr><tr><td>Menu principal</td><td>✅ Ici | 1️⃣Navigation</td></tr><tr><td>Bloc texte</td><td>✅ Ici | 2️⃣Affichage</td></tr><tr><td>Réassurance</td><td><a href="https://st9ph.fr/la-reassurance-dans-prestashop/">cet article</a></td></tr><tr><td>Réseaux sociaux</td><td>✅ Ici | 2️⃣Affichage</td></tr><tr><td>Commentaires produits</td><td><a href="https://st9ph.fr/avis-clients-dans-votre-eshop-prestashop/" target="_blank" rel="noreferrer noopener">cet article</a></td></tr><tr><td>module chèque</td><td><strong>✅ Ici | 3️⃣Ressources</strong></td></tr></tbody></table></figure>



<h3 class="wp-block-heading" id="6-0-6-navigation-">0-6 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Navigation</mark></h3>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Fonctionnalité</th><th>Traitement sur le blog st9ph</th></tr></thead><tbody><tr><td>onglets backoffice / frontoffice</td><td> <strong>✅ Ici | 1️⃣Navigation</strong></td></tr><tr><td>Alias de recherche</td><td> <strong><a href="https://st9ph.fr/prestashop-mots-cles-et-alias-de-recherche/" target="_blank" rel="noreferrer noopener">dans cet article</a></strong></td></tr></tbody></table></figure>



<h3 class="wp-block-heading" id="7-0-7-seo-">0-7 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">SEO</mark></h3>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Fonctionnalité</th><th>Traitement sur le blog st9ph</th></tr></thead><tbody><tr><td>mots clés, meta, header</td><td> <strong><a href="https://st9ph.fr/prestashop-referencement-seo-de-vos-produits/" target="_blank" rel="noreferrer noopener">dans cet article</a></strong></td></tr></tbody></table></figure>



<h3 class="wp-block-heading" id="8-0-8-utilisateurs-">0-8 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Utilisateurs</mark></h3>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Fonctionnalité</th><th>Traitement sur le blog st9ph</th></tr></thead><tbody><tr><td>Créer un nouveau collaborateur</td><td><strong>✅ Ici | 3️⃣Ressources</strong></td></tr><tr><td>Attribuer les permissions</td><td>✅ Ici | <strong>3️⃣Ressources </strong></td></tr><tr><td>Affecter et modifier un profil</td><td>✅ Ici | <strong>3️⃣Ressources </strong></td></tr></tbody></table></figure>



<p class="has-medium-font-size">➡️ On se lance ?</p>



<!-- DÉBUT TITRE CHAPITRE -->
<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%; }
.chapter-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.chapter-logo { width: 42px; height: 42px; flex-shrink: 0; display:block; }
.chapter-logo img { width: 100%; height: 100%; object-fit: contain; }
.chapter-content h2 { margin: 0; font-size: 2.1rem; font-weight: 700; color: #1e73be; }
.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">1</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">
</a>
<h2> Navigation dans la boutique</h2>
</div>
<ul class="chapter-points"><li>présentation des 2 thèmes préinstallés sur la v9</li><li>Repositionner les blocs entre eux</li><li>Paramétrer les blocs de navigation</li></ul>
</div>
</div>
<!-- FIN TITRE CHAPITRE -->



<p>👉 Il faut savoir que <strong>toutes les modifications</strong> passeront par <strong>la manipulation de modules </strong>que vous retrouverez toujours dans <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Modules &gt; Gestionnaire de module</mark></strong>, même s'il se trouve d'autres manières d'y accéder pour certains d'entre eux.</p>



<h3 class="wp-block-heading" id="9-11-pr%C3%A9sentation-des-2-th%C3%A8mes-pr%C3%A9install%C3%A9s-sur-la-v9-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.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>présentation des 2 thèmes préinstallés sur la v9</strong></h3>



<p>🔹 La <strong>prédisposition du modèle</strong> Prestashop (Classic)<strong> tel qu'il s'installe au départ</strong>, mais cela ne veut pas dire que c'est ainsi que vous le rencontrerez sur la boutique d'examen :</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/01/image-236.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 -->



<p>En thème <strong>Hummingbird</strong> c'est <strong>pratiquement la même chose,</strong> <strong>les modules sont les mêmes</strong> et fonctionnement de la même manière. Notons juste que :</p>



<ul class="wp-block-list">
<li>le <strong>Bloc Texte Personnalisé</strong> est remonté sous le Carrousel </li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="826" height="354" src="https://st9ph.fr/wp-content/uploads/2026/01/image-237.png" alt="" class="wp-image-33170" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-237.png 826w, https://st9ph.fr/wp-content/uploads/2026/01/image-237-300x129.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-237-768x329.png 768w" sizes="auto, (max-width: 826px) 100vw, 826px" /></figure>



<ul class="wp-block-list">
<li><strong>La bannière</strong> est callée <strong>au milieu</strong> entre les <strong>produits phares</strong> et les <strong>nouveaux produits</strong></li>



<li>le <strong>Bloc Newsletter</strong> et le <strong>Footer </strong>sont relookés</li>
</ul>



<p class="has-text-align-center has-small-font-size"><em>Glisser vers la droite pour Classic et vers la gauche pour Hummingbird</em></p>



<figure class="wp-block-jetpack-image-compare"><div class="juxtapose" data-mode="horizontal"><img loading="lazy" decoding="async" id="33172" src="https://i0.wp.com/st9ph.fr/wp-content/uploads/2026/01/image-239.png?ssl=1" alt="" width="767" height="319" class="image-compare__image-before"/><img loading="lazy" decoding="async" id="33171" src="https://i0.wp.com/st9ph.fr/wp-content/uploads/2026/01/image-238.png?ssl=1" alt="" width="711" height="261" class="image-compare__image-after"/></div></figure>



<p>Mais tout cela se change facilement :</p>



<h3 class="wp-block-heading" id="10-12-repositionner-les-blocs-entre-eux-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.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><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Repositionner les blocs entre eux</mark></strong></h3>



<p class="has-medium-font-size">🔹 Sur la page d'accueil (<strong>Body</strong>)</p>



<ul class="wp-block-list">
<li><strong>Apparence </strong>&gt; <strong>Positions</strong></li>



<li>Descendez jusqu'à "<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Display Home</mark></strong>" (c'est dans l'ordre alphabétique)</li>



<li>Glissez<strong> la poignée crantée </strong>comme sur l'animation ci-dessous pour remonter ou redescendre les blocs sur la page d'accueil</li>
</ul>



<figure class="wp-block-video"><video height="452" style="aspect-ratio: 912 / 452;" width="912" autoplay muted src="https://st9ph.fr/wp-content/uploads/2026/01/Enregistrement-2026-01-19-160918.mp4" playsinline></video></figure>



<p class="has-medium-font-size">🔹Pour le <strong>Footer</strong></p>



<p>C'est <strong>le même principe</strong> depuis la section "<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Display Footer</mark></strong>".</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/01/image-240.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 -->



<p class="has-base-2-background-color has-background">ℹ️ Il y'a aussi <strong>deux zones avant et après Footer</strong> qui permettent de mettre <strong>des contenus optionnels</strong> mais on ne peut pas <strong>les glisser d'un display à un autre</strong>. Il faut <strong>les dégreffer et regreffer</strong> ! C'est hors programme, quoi qu'il en soit.</p>



<p>Dans la vidéo si dessous, je transfère <strong>la newsletter</strong> du <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">display Footer</mark></strong> au <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"><strong>display </strong></mark><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Footer_After</mark></strong> :</p>



<figure class="wp-block-video"><video height="678" style="aspect-ratio: 1032 / 678;" width="1032" controls src="https://st9ph.fr/wp-content/uploads/2026/01/greffon.mp4"></video></figure>



<p>👉 Dans <strong>un schéma classique</strong>, les blocs sont <strong>idéalement placés</strong> :</p>



<ul class="wp-block-list">
<li>Le <strong>menu</strong>, le <strong>compte client</strong>, le <strong>panier </strong>dans le <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Display_Header</mark></li>



<li>Le <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Display-Home</mark> joue tous les éléments de<strong> publicité interne</strong> (Carrousel, bannière et bloc texte) ainsi que les blocs de<strong> mise en avant des produits du catalogue</strong> (produits phares, nouveautés et promos)</li>



<li>le <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Display_Foote</mark>r (+ avant et après) propose la <strong>newsletter</strong>, la<strong> liste de liens</strong> (vers les pages de légalité, de FAQ), les liens de nos<strong> réseaux sociaux</strong> et <strong>les coordonnées </strong>de la eshop</li>
</ul>



<p>🖥️ Mais on vous demandera peut-être de <strong>modifier leur ordre</strong> !</p>



<h3 class="wp-block-heading" id="11-13-param%C3%A9trer-les-blocs-de-navigation-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.3 |</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>Paramétrer les blocs de navigation</strong></h3>


<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;%2300d084&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-332335d3-7c42-408a-808f-561f67b5b43f">
<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;%2300d084&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;'); " id="ub-styled-list-item-c6e9577c-e0ae-40aa-bdb5-716c2735d3e5">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">Vous pouvez rester sur<strong> Positions </strong>et cliquer sur<strong> le petit crayon </strong>🖍️ pour <strong>modifier un module </strong>mais il faut savoir <strong>dans quel Display il se cache</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&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;'); " id="ub-styled-list-item-feead69c-0eea-4f0c-bc74-179e26e8d6e8">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">Vous pouvez aussi aller dans <strong>Apparences </strong>&gt; <strong>Thèmes et logo</strong> &gt; <img loading="lazy" decoding="async" width="148" height="24" class="wp-image-33181" style="width: 148px" src="https://st9ph.fr/wp-content/uploads/2026/01/bouton-cohoisirMiseEnPage-PS.jpg" alt=""> &gt; (onglet) Page de configuration.</span>
			</div>
			
		</li>
</ul>


<p class="has-text-align-center">👇🏻 Comme le montre la vidéo ci-dessous, <strong>c'est très visuel</strong> pour <strong>atteindre les blocs de manière intuitive</strong> :</p>



<figure class="wp-block-video"><video height="552" style="aspect-ratio: 990 / 552;" width="990" controls src="https://st9ph.fr/wp-content/uploads/2026/01/Enregistrement-2026-01-19-172128.mp4"></video></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">
<ul class="wp-block-list">
<li><strong>Cliquez </strong>sur la zone "<mark style="background-color:rgba(0, 0, 0, 0);color:#1dc8dc" class="has-inline-color">MY SHOP</mark>" (à gauche)</li>



<li>Cliquez sur <strong><mark style="background-color:rgba(0, 0, 0, 0);color:#32b5c4" class="has-inline-color">Configurer<sub>⋁</sub> </mark></strong>de <strong>Menu Principal</strong></li>
</ul>
</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="503" height="93" src="https://st9ph.fr/wp-content/uploads/2026/01/image-241.png" alt="" class="wp-image-33183" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-241.png 503w, https://st9ph.fr/wp-content/uploads/2026/01/image-241-300x55.png 300w" sizes="auto, (max-width: 503px) 100vw, 503px" /></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%">
<!-- 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/01/image-242.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:33.33%">
<p>ℹ️ Par défaut, <strong>le modèle affiche les 3 catégories principales </strong>de vos produits</p>



<p class="has-text-align-center has-base-2-background-color has-background">👉 <strong>Inutile d'insérer les sous-catégories</strong> comme dans WordPress. <strong>Elles suivent automatiquement</strong> !</p>
</div>
</div>



<p>On peut insérer aussi :</p>



<ul class="wp-block-list">
<li>des <strong>pages </strong>dites <strong>CMS </strong>(si vous voulez mettre vos CGU au menu par exemple)</li>



<li>Vos <strong>fournisseurs </strong>(si vous êtes fier(e) d'être revendeur(se) d'untel)</li>



<li>Des <strong>Marques </strong>(pour que vos clients accèdent directement à la page qui regroupe tous leurs produits)</li>



<li>Vous pouvez aussi créer <strong>des liens extérieurs </strong>(vers votre blog par exemple) :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="781" height="246" src="https://st9ph.fr/wp-content/uploads/2026/01/image-243.png" alt="" class="wp-image-33185" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-243.png 781w, https://st9ph.fr/wp-content/uploads/2026/01/image-243-300x94.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-243-768x242.png 768w" sizes="auto, (max-width: 781px) 100vw, 781px" /></figure>



<ul class="wp-block-list">
<li>⚠️ N'oubliez pas de <strong>cliquer sur <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">&lt;- Ajouter</mark></strong> (sinon, vous aurez travaillé pour rien)</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="799" height="116" src="https://st9ph.fr/wp-content/uploads/2026/01/image-244.png" alt="" class="wp-image-33191" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-244.png 799w, https://st9ph.fr/wp-content/uploads/2026/01/image-244-300x44.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-244-768x111.png 768w" sizes="auto, (max-width: 799px) 100vw, 799px" /></figure>



<p class="has-base-2-background-color has-background">➡️ Il faudra avoir <strong>ajouté vos catégories auparavant</strong> si on vous demande d'insérer, par exemple, un <strong>rayon enfant</strong> au menu (si la catégorie Enfants dans Vêtements n'existe pas encore).</p>



<p>Les <strong>combinaisons de navigation</strong> sont nombreuses dans la boutique, en dehors du menu principal. Ce peut être (liste non exhaustive) :</p>



<ul class="wp-block-list">
<li>la <strong>consultation de vos pages </strong>(qui sommes-nous, FAQ, bons plans, CGV ...) <strong>du Footer</strong> (<a href="https://st9ph.fr/configurer-la-liste-de-liens-du-footer-prestashop/" target="_blank" rel="noreferrer noopener">voir cet article</a>) en respectant <strong>les obligations légales </strong>(voir cette<img loading="lazy" decoding="async" width="31" height="28" class="wp-image-33155" style="width: 31px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdfIcon2.jpg" alt=""><a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2961/preview/pdf/5747" target="_blank" rel="noreferrer noopener"> fiche ressource</a>)</li>



<li>Pouvoir <strong>rebondir sur des produits associés </strong>sur une fiche produit (<a href="https://st9ph.fr/prestashop-la-fiche-produit/" target="_blank" rel="noreferrer noopener">voir cet article</a><em> section 1-5</em>)</li>



<li>Afficher <strong>un rayon ou un produit en promo</strong> depuis le Carrousel, la bannière ou le bloc texte (voir 2️⃣)</li>



<li>Atteindre <strong>une page CMS</strong> (comme "nos bons plans") depuis le panneau de <strong>Réassurance </strong>(<a href="https://st9ph.fr/la-reassurance-dans-prestashop/" target="_blank" rel="noreferrer noopener">voir cet article</a>)</li>
</ul>



<!-- DÉBUT TITRE CHAPITRE -->
<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%; }
.chapter-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.chapter-logo { width: 42px; height: 42px; flex-shrink: 0; display:block; }
.chapter-logo img { width: 100%; height: 100%; object-fit: contain; }
.chapter-content h2 { margin: 0; font-size: 2.1rem; font-weight: 700; color: #1e73be; }
.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/st9ph-ico-sansTxt.png" alt="Logo">
</a>
<h2> Affichage dans la boutique</h2>
</div>
<ul class="chapter-points"><li>Afficher les produits</li><li>Afficher les offres</li><li>Afficher les informations</li></ul>
</div>
</div>
<!-- FIN TITRE CHAPITRE -->



<p>Qu'il s'agisse de 👖<strong>notre catalogue de produits</strong>, de 💥<strong>nos offres promotionnelles </strong>ou des ℹ️ <strong>informations de la boutique,</strong> Prestashop offre <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">de nombreuses options</mark></strong> pour les présenter à vos visiteurs.</p>



<p class="has-base-2-background-color has-background">👉 Il s'agira souvent d'ailleurs de <strong>choix stratégiques</strong> de <strong>mettre en avant </strong>tel ou tel attrait de votre enseigne pour faire la différence et <strong>fidéliser l'audience</strong>.</p>



<p></p>



<h3 class="wp-block-heading" id="12-21-afficher-les-produits-" 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>Afficher les produits</strong></h3>



<p>Cela commence par votre page d'accueil et la visibilité de votre catalogue. Vous pouvez en effet afficher en panneaux d'aperçus  :</p>



<ul class="wp-block-list">
<li>vo s<strong>produits phares</strong> (best sellers) ⭐</li>



<li>vos <strong>nouveautés </strong>🆕</li>



<li>vos <strong>produits en promotion</strong> (avec prix spécifique) 🆒</li>



<li>Vos <strong>meilleures ventes </strong>(hors éval) 🆙</li>



<li>Le rappel des<strong> produits déjà vus </strong>(hors éval) 👀</li>
</ul>



<p>➡️ <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"><em>A voir aussi</em> </mark>cet <a href="https://st9ph.fr/prestashop-cest-parti-pour-les-soldes/" target="_blank" rel="noreferrer noopener">article sur les soldes </a>(hors programme, mais dont l<strong>e fonctionnement est le même que pour le module Promo</strong>, même si les règles <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=""> sont différentes)</p>



<p>🔹Le blocs <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">produits Phares</mark></strong> <img loading="lazy" decoding="async" width="25" height="26" class="wp-image-33239" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/01/produits-phares-low.png" alt=""></p>



<p>👉 Celui <strong>le plus haut par défaut</strong> (sous le carrousel pour Classic et sous le bloc texte pour hummingbird), le bloc<strong> Produits phares</strong> affiche <strong>vos articles vedettes </strong>selon l'observation du comportement de vos visiteurs.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="848" height="437" src="https://st9ph.fr/wp-content/uploads/2026/01/image-245.png" alt="" class="wp-image-33240" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-245.png 848w, https://st9ph.fr/wp-content/uploads/2026/01/image-245-300x155.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-245-768x396.png 768w" sizes="auto, (max-width: 848px) 100vw, 848px" /></figure>



<ul class="wp-block-list">
<li>modules &gt;<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"> gestionnaires de modules</mark> &gt; rechercher "<strong><em>phares</em></strong>" &gt;<strong> configurer</strong></li>
</ul>



<p>Vous pouvez définir :</p>



<ul class="wp-block-list">
<li>Le <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">nombre de produits à afficher </mark></strong>(4 par lignes, donc, <strong>plus vous en mettez</strong>, plus vous aurez de lignes et <strong>moins on verra les autres éléments </strong>de la page d'accueil sans scroller)</li>



<li><strong>Quel "rayon"</strong> (catégorie) vous voulez mettre en vedette (<strong>par défaut, c'est tous</strong>) en cliquant sur "<strong>Afficher tout</strong>"</li>



<li>Si vous souhaitez que ce soit <strong>aléatoire </strong>(sans critère précis) car, par défaut, le module priorise <strong>ceux les plus cliqués</strong> depuis la homePage.</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" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="260" height="59" src="https://st9ph.fr/wp-content/uploads/2026/01/image-246.png" alt="" class="wp-image-33241"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p class="has-base-2-background-color has-background">⚠️ <strong>Ne pas confondre</strong> avec le module <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">meilleures ventes</mark></strong>, préinstallé lui aussi, qui permet d'afficher <strong>ceux les plus vendus</strong>. C'est différent.</p>
</div>
</div>



<p class="has-medium-font-size">🔹 Le bloc <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Nouveaux Produits</mark></strong> <img loading="lazy" decoding="async" width="20" height="18" class="wp-image-33242" style="width: 20px;" src="https://st9ph.fr/wp-content/uploads/2026/01/nouveaux-produits.png" alt=""></p>



<p>Il permet :</p>



<ul class="wp-block-list">
<li>comme le bloc Produits Phares, d'afficher<strong> le nombre de produits (</strong>toujours 4 par lignes)</li>



<li>De définir le<strong> nombre de jours </strong>où le produit reste nouveau.</li>
</ul>



<p class="has-base-2-background-color has-background">👉 Ca<strong> revient souvent à l'examen</strong> et <strong>c'est stratégique</strong>.<strong> C'est un CTA,</strong> certes, mais si le visiteur voit qu'un produit<strong> reste nouveau trop longtemps</strong> après plusieurs visites, vous allez <strong>perdre sa confiance</strong>. Calculez au mieux selon <strong>vos roulements de stocks</strong>.</p>



<p class="has-medium-font-size">🔹Le bloc <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Produits déjà vus</mark></strong> <img loading="lazy" decoding="async" width="21" height="19" class="wp-image-33244" style="width: 21px;" src="https://st9ph.fr/wp-content/uploads/2026/01/deja-vus.png" alt=""></p>



<p>Une seule option pour ce module :</p>



<ul class="wp-block-list">
<li>Le <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">nombre de produits à afficher </mark></strong></li>
</ul>



<p class="has-base-2-background-color has-background">⚠️ Il faut que le client soit <strong>connecté </strong>et qu'il ait <strong>accepté les cookies</strong>, sans quoi vous serez "aveugle" sur ses<strong> précédentes visites</strong>.</p>



<p class="has-medium-font-size">🔹Le bloc <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Promotions</mark></strong> <img loading="lazy" decoding="async" width="20" height="19" class="wp-image-33245" style="width: 20px;" src="https://st9ph.fr/wp-content/uploads/2026/01/bloc-promo.png" alt=""></p>



<p>Une seule option pour ce module également :</p>



<ul class="wp-block-list">
<li>Le <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">nombre de produits à afficher </mark></strong></li>
</ul>



<p>👉 A vous de choisir comment les organiser <strong>sur la HomePage</strong> (voir 1-2)</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="591" height="297" src="https://st9ph.fr/wp-content/uploads/2026/01/image-247.png" alt="" class="wp-image-33246" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-247.png 591w, https://st9ph.fr/wp-content/uploads/2026/01/image-247-300x151.png 300w" sizes="auto, (max-width: 591px) 100vw, 591px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👈 Sur deux des  possibilités exposées ci-contre, on favorise <strong>les promos et les produits populaires</strong> pour cibler l<strong>'<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">acquisition</mark> </strong>de nouveaux clients qui, par définition, trouveront <strong>tous nos produits nouveaux</strong>.</p>



<p>A l'inverse, en <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"><strong>fidélisation</strong></mark>, c'est <strong>le 1er bloc à montrer</strong>, <strong>avec les promotions</strong>, avant de leurs rappeler les produits qu'ils ont <strong>déjà consultés </strong>puis ceux qui sont les plus populaires.</p>
</div>
</div>



<p>Ci dessous, les choix de positions de la<a href="https://shop.st9ph.fr/presta/fr/" target="_blank" rel="noreferrer noopener"> boutique pédagogique</a> montrent une verticale de body : <strong>Soldes - Bloc Text - Phares - Carrousel - Bannière </strong>afin de laisser l<strong>a part belle à l'information</strong> et ressemble plus à un <strong>show room</strong> qu'à <strong>une page du Push</strong> pour vendre.</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/01/image-279.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 -->



<p>ℹ️ Le module "<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">special products</mark></strong>" pour <strong>les soldes</strong> <a href="https://st9ph.fr/prestashop-cest-parti-pour-les-soldes/" target="_blank" rel="noreferrer noopener">(voir cet article</a>) ne sera d'ailleurs <strong>peut-être pas visible</strong> selon le moment où vous vous rendez sur la boutique car <strong>les périodes sont réglementées</strong>.</p>



<h3 class="wp-block-heading" id="13-22-affiches-les-offres-" 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>Affiches les offres</strong></h3>



<p>👉 C'est même une <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=""> <strong>obligation légale</strong> de faire la <strong>"publicité" interne</strong> de vos <strong>promotions, conditions et offres spéciales.</strong></p>



<p class="callout bleu">Si en <strong>Surface de Vente Physique</strong>, vous pouvez afficher cela <strong>sur un panneau à l'entrée</strong>, en eshop, il faudra trouver d'autres moyens. L'idéal est de <strong>créer une page "<em><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">nos offres et nos conditions</mark></em>" </strong>(enfin, appelez la comme vous voulez) qui apparaitra dans le footer non loin de vos <strong>CGV et mentions légales</strong>.</p>



<p>➡️ Voyez aussi <a href="https://st9ph.fr/la-reassurance-dans-prestashop/" target="_blank" rel="noreferrer noopener">l'article sur la réassurance</a> où un lien pointe aussi vers les conditions de l'offre.</p>



<p>👉 Pour la suite de ce chapitre 2-2, nous nous concentrons plutôt vers<strong> l'affichage des produits concernés</strong> par une offre que <strong>des conditions détaillées </strong>de nos offres. Nous avons <strong>trois outils nativement</strong> (mais on peut en ajouter d'autres) pour avertir de nos promos et conduire les visiteurs vers produits concernés :<strong> Le carrousel, la bannière et le bloc texte.</strong></p>



<p class="has-medium-font-size">🔹Le carrousel</p>



<p>C'est <strong>une bannière tournante </strong>en fait, positionnée par défaut tout en haut du body, et qui vous permet de faire tourner vos différents<strong> panneaux d'annonce </strong>à l'accueil</p>



<p>📏 Je me suis "amusé" à <strong>mesurer la taille d'un panneau</strong> afin de faire un gabarit (si on importe des images de n'importe quelle taille, ça va être très moche) :</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="376" src="https://st9ph.fr/wp-content/uploads/2026/01/gabCarrousel-1024x376.png" alt="" class="wp-image-33201" srcset="https://st9ph.fr/wp-content/uploads/2026/01/gabCarrousel-1024x376.png 1024w, https://st9ph.fr/wp-content/uploads/2026/01/gabCarrousel-300x110.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/gabCarrousel-768x282.png 768w, https://st9ph.fr/wp-content/uploads/2026/01/gabCarrousel-1536x565.png 1536w, https://st9ph.fr/wp-content/uploads/2026/01/gabCarrousel-2048x753.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>🤨 A la louche, <strong>un presque 12 quarts</strong>, même pas un <strong>8 pouces et demi par 2 et demi</strong> ! Rien ne va dans ces proportions ! Mais on va faire avec.</p>



<p class="has-base-2-background-color has-background">➡️ On remarque aussi qu'<strong>une partie gauche</strong> est <strong>pleine </strong>et c'est normal, <strong>c'est là que s'affichera le texte</strong>, il faut qu'on puisse le distinguer.</p>



<p>Voilà <strong>un panneau</strong> que j'ai préparé (vite fait, il faut le voir sur soi), pour exemple, afin d<strong>'emmener le visiteur</strong> vers le pull marin de <a href="https://boutiq.st9ph.fr/" target="_blank" rel="noreferrer noopener">st9ph Market</a> (🖥️ à l'examen, rassurez-vous, i<strong>l vous sera fourni</strong>) :</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="757" height="228" src="https://st9ph.fr/wp-content/uploads/2026/01/marine2-1.jpg" alt="" class="wp-image-33254" srcset="https://st9ph.fr/wp-content/uploads/2026/01/marine2-1.jpg 757w, https://st9ph.fr/wp-content/uploads/2026/01/marine2-1-300x90.jpg 300w" sizes="auto, (max-width: 757px) 100vw, 757px" /></figure>
</div>


<p>👀 Et j'aimerai <strong>obtenir cela</strong> :</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="494" src="https://st9ph.fr/wp-content/uploads/2026/01/image-249-1024x494.png" alt="" class="wp-image-33256" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-249-1024x494.png 1024w, https://st9ph.fr/wp-content/uploads/2026/01/image-249-300x145.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-249-768x370.png 768w, https://st9ph.fr/wp-content/uploads/2026/01/image-249.png 1429w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<ul class="wp-block-list">
<li>Modules &gt; <strong>gestionnaire </strong>de modules &gt; (rechercher) "<em><strong>slider</strong></em>" (ou "<em>carrousel</em>")</li>



<li><strong>Configurer</strong></li>
</ul>



<p>👉 Pendant qu'on est là, <strong>le panneau du haut</strong> qui permet de <strong>paramétrer l'ensemble</strong> du carrousel :</p>



<ol class="wp-block-list">
<li>⏱️ <strong>modifier le temps de passage</strong> des panneaux en millisecondes (5 s par défaut)</li>



<li> ⏸️ "<strong>pause au survol"</strong> définit si oui ou non<strong> le mouvement se fige au passage du pointeur</strong> (c'est mieux pour le visiteur s'il ne veut pas rater son clic mais vous avez le droit de lui faire des blagues aussi)</li>



<li>➰ <strong>Répéter ou non les passages</strong>(si "non", c'est le dernier panneau qui aura la part belle une fois que les autres seront passés)</li>
</ol>



<p>Voyons maintenant <strong>comment agir sur les panneaux</strong> :</p>



<ul class="wp-block-list">
<li>Commencez par <strong>vérifier l'état </strong><img loading="lazy" decoding="async" width="150" height="30" class="wp-image-33257" style="width: 150px;" src="https://st9ph.fr/wp-content/uploads/2026/01/enabled-disabled.jpg" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/enabled-disabled.jpg 154w, https://st9ph.fr/wp-content/uploads/2026/01/enabled-disabled-150x31.jpg 150w" sizes="auto, (max-width: 150px) 100vw, 150px" /> du panneau sur lequel vous allez agir</li>



<li>Cliquez sur<strong> Modifier</strong></li>
</ul>



<p class="has-text-align-center has-medium-font-size"><strong>Ou</strong></p>



<ul class="wp-block-list">
<li>Cliquez sur le <strong>⊕</strong> pour <strong>créer un nouveau panneau</strong></li>
</ul>



<p class="callout bleu">🖥️ tout dépendra de ce qu'on vous demandera dans le sujet <em>"remplacer</em>" ou "<em>Ajouter</em>"</p>



<ul class="wp-block-list">
<li>Donnez <strong>un titre </strong>à votre panneau : <em>court parce qu'il sera en gros </em>!</li>



<li>Définissez l'<strong>URL Cible</strong> (celle de l'atterrissage quand on va cliquer sur la panneau)</li>
</ul>



<p>⚠️ Attention, par défaut, <strong>celle-ci renvoie sur le site Prestashop.com </strong>et 🖥️ c'est le premier truc qu'on va vérifier en vous corrigeant après l'épreuve.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="388" height="60" src="https://st9ph.fr/wp-content/uploads/2026/01/image-248.png" alt="" class="wp-image-33253" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-248.png 388w, https://st9ph.fr/wp-content/uploads/2026/01/image-248-300x46.png 300w" sizes="auto, (max-width: 388px) 100vw, 388px" /></figure>



<p>👉 Le mieux est d<strong>'afficher en FrontOffice</strong> le produit, le rayon ou la page vers laquelle le panneau doit emmener et de <strong>copier-coller ici son url</strong></p>



<ul class="wp-block-list">
<li>Définissez <strong>une légende</strong> (pour le référencement donc : <em>description + nom de la boutique</em>)</li>



<li>Rentrez votre <strong>description </strong>:
<ul class="wp-block-list">
<li><strong>la 1ere ligne est un sous-titre en header 3 </strong>(H3) - <mark style="background-color:rgba(0, 0, 0, 0);color:#b03838" class="has-inline-color">ne changez surtout pas le niveau</mark></li>



<li>En dessous, c'est du <strong>paragraphe </strong>et vous pouvez être un peu plus bavard(e), mais pas trop.</li>
</ul>
</li>



<li><strong>Vérifiez </strong>une dernière fois l'Etat <strong><mark style="background-color:rgba(0, 0, 0, 0);color:#51902d" class="has-inline-color">Enabled</mark></strong> (ou "<em>actif</em>" si vous le voyez en français)</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/01/image-250.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><strong>Enregistrer</strong></li>
</ul>



<p class="has-medium-font-size">🔹 La Bannière</p>



<p class="callout bleu">🖥️ C'est le "<strong>parent pauvre</strong>" de l'évaluation parce qu<strong>'il n'y a pas grand chose à faire</strong> : <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">insérer l'image</mark></strong> et <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">renseigner l'URL</mark></strong>. Mais c'est au programme, alors, allons-y !</p>



<p>📏 Cette fois, on est sur du<strong> 21 x 4 cm</strong>, c'est guère mieux</p>



<p>👉 Imaginons que nous voulions faire une pub pour un de nos financeurs :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="979" height="192" src="https://st9ph.fr/wp-content/uploads/2026/01/image-251.png" alt="" class="wp-image-33259" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-251.png 979w, https://st9ph.fr/wp-content/uploads/2026/01/image-251-300x59.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-251-768x151.png 768w" sizes="auto, (max-width: 979px) 100vw, 979px" /></figure>



<p class="has-text-align-center has-small-font-size"><em>Toute ressemblance avec un organisme financier existant ou ayant existé serait une (presque) pure coïncidence.</em></p>



<ul class="wp-block-list">
<li>Modules &gt; <strong>gestionnaire </strong>de modules &gt; (rechercher) "<em><strong>bannière</strong></em>" </li>



<li><strong>Configurer</strong></li>



<li>Cliquez sur "<strong>choisissez un fichier</strong>" et<strong> uploadez-le</strong></li>



<li>renseignez l'<strong>url d'atterrissage</strong></li>



<li>Renseignez <strong>la description</strong></li>



<li><strong>Enregistrez</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/01/image-253-1024x466.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 -->



<p class="has-medium-font-size">🔹 Le bloc Texte Personnalisé</p>



<p>👉 Prépositionné <strong>sous le carrousel </strong>dans le modèle de départ, le bloc texte fonctionne plus comme <strong>un encadré texte d'accueil </strong>que comme un réel panneau de publicité.</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/01/image-254.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 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/01/image-256.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 class="has-base-2-background-color has-background">➡️ A noter que <strong>le niveau de Header </strong>est <strong>H2</strong>, ce qui avalise ma remarque précédente.</p>



<p>👈 Ci contre la boite de dialogue d'insertion d'un lien hypertexte. Pour ce faire :</p>



<ul class="wp-block-list">
<li> <strong>Sélectionner le texte </strong>à rendre réactif</li>



<li><strong>Cliquer </strong>sur <img loading="lazy" decoding="async" width="22" height="13" class="wp-image-33272" style="width: 22px;" src="https://st9ph.fr/wp-content/uploads/2026/01/lien-hyper.jpg" alt=""></li>
</ul>
</div>
</div>



<h3 class="wp-block-heading" id="14-2-3-afficher-nos-informations-">2-3 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Afficher nos informations</mark></h3>



<p>🖥️ Récurrentes à l'examen,  vous pouvez être confronté(e) à des questions sur <strong>les informations concernant la boutique en ligne.</strong></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">
<p class="has-text-align-center"> Elles se trouvent <strong>aux extrêmes de la fenêtre </strong>(en <strong>haut à gauche du header </strong>et en <strong>bas à droite du footer</strong>). C'est plus <strong>une coutume</strong> qu'une règle d'ailleurs mais on s'est tous <strong>habitué à cette configuration </strong>.👉</p>



<p class="has-base-2-background-color has-background">C'est depuis <strong>la page de configuration du thème </strong>que nous atteindrons le plus facilement ces deux zones.</p>



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



<ul class="wp-block-list">
<li>Cliquer sur <strong>Footer </strong>dans <strong>Homepage</strong></li>
</ul>
</div>



<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/01/image-268.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">
<!-- 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/01/image-257.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>Cliquer sur <strong><mark style="background-color:rgba(0, 0, 0, 0);color:#32b5c4" class="has-inline-color">Configurer<sub>⋁</sub> </mark></strong>du module "<strong>Shop Details</strong>" (ou détails de la boutique)</li>



<li>Cliquez sur <img loading="lazy" decoding="async" width="150" height="23" class="wp-image-33278" style="width: 150px;" src="https://st9ph.fr/wp-content/uploads/2026/01/ajout-boutique.jpg" alt=""></li>
</ul>



<p></p>



<p>👉 Nous allons<strong> ajouter une SVP </strong>à la liste de nos magasins physiques</p>



<p></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%">
<ul class="wp-block-list">
<li>Renseignez les informations de votre boutique</li>
</ul>



<p></p>



<p>➡️ Pour les <strong>coordonnés GPS</strong>, aidez vous de Google Maps</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="398" height="276" src="https://st9ph.fr/wp-content/uploads/2026/01/image-261.png" alt="" class="wp-image-33280" style="width:504px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-261.png 398w, https://st9ph.fr/wp-content/uploads/2026/01/image-261-300x208.png 300w" sizes="auto, (max-width: 398px) 100vw, 398px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="352" height="417" src="https://st9ph.fr/wp-content/uploads/2026/01/image-260.png" alt="" class="wp-image-33279" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-260.png 352w, https://st9ph.fr/wp-content/uploads/2026/01/image-260-253x300.png 253w" sizes="auto, (max-width: 352px) 100vw, 352px" /></figure>
</div>
</div>



<ul class="wp-block-list">
<li>Prenez une belle photo de votre magasin et uploadez la <strong>dans la zone "Photo"</strong></li>



<li>Notez <strong>vos horaires d'ouverture</strong></li>



<li>Cliquez sur <img loading="lazy" decoding="async" width="88" height="30" class="wp-image-32859" style="width: 88px;" src="https://st9ph.fr/wp-content/uploads/2026/01/image-168.png" alt=""></li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="947" height="161" src="https://st9ph.fr/wp-content/uploads/2026/01/image-263.png" alt="" class="wp-image-33282" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-263.png 947w, https://st9ph.fr/wp-content/uploads/2026/01/image-263-300x51.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-263-768x131.png 768w" sizes="auto, (max-width: 947px) 100vw, 947px" /></figure>



<p>👍 <strong>Un nouveau magasin</strong> est maintenant présent<strong> dans la liste</strong> de vos SVP.</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:33.33%"><div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="224" height="297" src="https://st9ph.fr/wp-content/uploads/2026/01/image-264.png" alt="" class="wp-image-33283"/></figure>
</div>


<p>Le résultat en FrontOffice 👉</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>👈 On retrouvera ses informations dans le lien "<strong>Magasins</strong>" du footer.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="659" height="572" src="https://st9ph.fr/wp-content/uploads/2026/01/image-265.png" alt="" class="wp-image-33284" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-265.png 659w, https://st9ph.fr/wp-content/uploads/2026/01/image-265-300x260.png 300w" sizes="auto, (max-width: 659px) 100vw, 659px" /></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">
<p>➡️ Vous pouvez aussi définir<strong> l'affichage ou non de votre mail </strong>dans le module <strong>Coordonnées </strong>(depuis le gestionnaires de module"</p>



<ul class="wp-block-list">
<li><strong>changer </strong>l'état <strong>oui / non</strong> du bouton radio</li>
</ul>
</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="532" height="166" src="https://st9ph.fr/wp-content/uploads/2026/01/image-266.png" alt="" class="wp-image-33285" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-266.png 532w, https://st9ph.fr/wp-content/uploads/2026/01/image-266-300x94.png 300w" sizes="auto, (max-width: 532px) 100vw, 532px" /></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-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="218" height="149" src="https://st9ph.fr/wp-content/uploads/2026/01/image-267.png" alt="" class="wp-image-33287"/></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p class="has-base-2-background-color has-background">ℹ️ C'est assez <strong>déconseillé de l'afficher</strong>, en fait. Encouragez plutôt vos clients à <strong>utiliser le lien</strong> "<strong>Contactez-nous</strong>" pour être certain(e) de <strong>centraliser les demandes </strong>dans le CRM</p>
</div>
</div>



<p>➡️ Pour être complet, complétons aussi aussi<strong> le module chèque</strong> qui est lui aussi au programme.</p>



<p class="has-base-2-background-color has-background">Cela représente <strong>2,4 % des transactions bancaires</strong> l'année dernière (source : Banque De <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=""> France) et <strong>personne ne paie jamais comme cela en ligne</strong>. Mais voilà, ce n'est pas évident d'installer un module bancaire pour l'examen et  🖥️ c'est au programme de savoir le renseigner.</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">
<p>ℹ️ Sur <a href="https://shop.st9ph.fr/presta/fr/" target="_blank" rel="noreferrer noopener">la boutique pédagogique</a>, j'utilise un module qui s'appelle <strong>HH Paiement</strong> d'Hervé Hennes (<a href="https://shop.h-hennes.fr/fr/5-modules-prestashop" target="_blank" rel="noreferrer noopener">voir son site</a>) qui simule un paiement en ligne.</p>



<p>Mais revenons à ce fameux module chèque :</p>



<ul class="wp-block-list">
<li>Modules &gt; gestionnaire de modules</li>
</ul>
</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="395" height="143" src="https://st9ph.fr/wp-content/uploads/2026/01/image-294.png" alt="" class="wp-image-33372" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-294.png 395w, https://st9ph.fr/wp-content/uploads/2026/01/image-294-300x109.png 300w" sizes="auto, (max-width: 395px) 100vw, 395px" /></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">
<ul class="wp-block-list">
<li>(rechercher) "Chèque" &gt;<strong> Modifier</strong></li>



<li>Remplissez la<strong> zone bénéficiaire</strong> et <strong>Adresse</strong></li>



<li><strong>Enregistrer</strong></li>
</ul>



<p>🤫 No comment !</p>
</div>



<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/01/image-295.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>



<!-- DÉBUT TITRE CHAPITRE -->
<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%; }
.chapter-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.chapter-logo { width: 42px; height: 42px; flex-shrink: 0; display:block; }
.chapter-logo img { width: 100%; height: 100%; object-fit: contain; }
.chapter-content h2 { margin: 0; font-size: 2.1rem; font-weight: 700; color: #1e73be; }
.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">
</a>
<h2> Ressources de la boutique</h2>
</div>
<ul class="chapter-points"><li>Clients</li><li>Livraison</li><li>Marques & Fournisseurs</li><li>Rôles internes</li></ul>
</div>
</div>
<!-- FIN TITRE CHAPITRE -->



<p>👉🏻 On pourrait définir toutes <strong>les ressources à paramétrer dans la boutique </strong>selon un schéma simplifié :</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/01/image-275.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 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%">
<h3 class="wp-block-heading" id="15-31-clients-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">3.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>Clients</strong></h3>



<p class="has-text-align-center has-base-2-background-color has-background">Il faudra gérer ses <strong>coordonnées <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">B2B</mark> ou <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">B2C</mark> </strong>(ce ne sont pas les mêmes) dans <strong>deux tables de données</strong> différentes : <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">informations </mark>et <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">adresses</mark></strong>.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="605" height="364" src="https://st9ph.fr/wp-content/uploads/2026/01/image-270.png" alt="" class="wp-image-33292" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-270.png 605w, https://st9ph.fr/wp-content/uploads/2026/01/image-270-300x180.png 300w" sizes="auto, (max-width: 605px) 100vw, 605px" /></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">
<!-- 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/01/image-271.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>Activer la <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">gestion B2B</mark> </strong>(désactivée par défaut)</p>



<ul class="wp-block-list">
<li><img loading="lazy" decoding="async" width="24" height="23" class="wp-image-33295" style="width: 24px;" src="https://st9ph.fr/wp-content/uploads/2026/01/roue-crant.jpg" alt=""> <strong>Paramètres de la boutique &gt; Clients</strong></li>



<li><strong>changer </strong>l'état <strong>oui / non</strong> du bouton radio "<em><strong>Activer le mode B2B</strong></em>"</li>
</ul>
</div>
</div>



<ul class="wp-block-list">
<li><strong>Clients &gt; Clients</strong> pour consulter ou ajouter un nouveau client</li>
</ul>



<p>Vous disposez d'un <strong>panneau de statistiques</strong> et de <strong>la liste de vos clients</strong> :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="943" height="121" src="https://st9ph.fr/wp-content/uploads/2026/01/image-272.png" alt="" class="wp-image-33303" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-272.png 943w, https://st9ph.fr/wp-content/uploads/2026/01/image-272-300x38.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-272-768x99.png 768w" sizes="auto, (max-width: 943px) 100vw, 943px" /></figure>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li><strong>Cliquer </strong>sur ⬛<strong>+ Ajouter un nouveau client</strong></li>
</ul>
</div>



<p>OU</p>



<ul class="wp-block-list">
<li><em>Cliquer </em>sur 🖍️pour <strong>modifier une fiche client</strong></li>
</ul>



<ul class="wp-block-list">
<li>Renseigner les <strong>champs d'informations </strong>:</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 class="has-text-align-center has-medium-font-size">🙍‍♂️🧑‍💼<strong>Profil B2C</strong> (&amp; Interlocuteur B2B)</p>



<ul class="wp-block-list">
<li><strong>Civilité</strong></li>



<li><strong>Nom</strong></li>



<li><strong>Prénom</strong></li>



<li><strong>Email</strong></li>



<li><strong>Mot de passe</strong> (👉 <em>Ne sert que pour vos comptes test</em>)</li>
</ul>



<p class="has-text-align-center has-text-color has-link-color wp-elements-b6c6e410843be9f934cb6d0bfc185360" style="color:#a42b2b">⛔ Vous n'avez pas le droit de modifier le mot de passe d'un client, même si c'est lui qui vous le demande. Il faut le <strong>réinitialiser</strong>.</p>



<ul class="wp-block-list">
<li><strong>Date de naissance </strong>(👉 <em>sympa de la connaitre pour une relance anniversaire)</em></li>



<li><strong>Actif / Enabled </strong>(👉 permet de désactiver temporairement un mauvais payeur, par exemple - B2B)</li>



<li><strong>Offres partenaires</strong> (👉<em> vous pouvez pré cocher uniquement en B2B</em>)</li>



<li><strong>Groupes &amp; groupes par défaut </strong>(👉 <em>voir plus bas</em>)</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center has-medium-font-size">🏭 Infos<strong> spécifiques B2B</strong></p>



<ul class="wp-block-list">
<li>Nom de l'entreprise</li>



<li>SIRET</li>



<li>APE</li>



<li>Site web</li>



<li>En cours autorisé</li>
</ul>



<p>👉 <em>Certaines entreprises vous paieront à <strong>provisions / échéances</strong> (comme un crédit permanent), en particulier les administrations</em></p>



<ul class="wp-block-list">
<li>Délai de paiement (👉 <em>pour la gestion des rappels automatiques si elles trainent à échéance</em>)</li>



<li><strong>Niveau de risque </strong>(bas, moyen, haut)</li>
</ul>



<p>👉 <em>Permet de cibler les bons clients (bas), qui paient souvent en retard (moyen) ou qui oublient souvent de payer (haut)</em></p>
</div>
</div>



<p class="has-base-2-background-color has-background">➡️ Souvent, ce sera <strong>le client lui-même</strong> (<a href="https://st9ph.fr/%f0%9f%8f%b7%ef%b8%8f-animation-rc-le-selfcare/" target="_blank" rel="noreferrer noopener">selfcare</a>) qui fera son <strong>inscription en ligne,</strong> surtout en B2C. Mais il peut arriver qu'<strong>un téléopérateur soit amené à le faire</strong> (nouveau client au téléphone ou VPC) et <strong>fréquemment en B2B </strong>où l'inscription se fait généralement <strong>en rendez-vous</strong>.</p>



<p>👉🏻 En ligne, l<strong>e client dispose d'une interface "mon compte" </strong>où il peut gérer pratiquement tout gérer depuis ses <strong>informations</strong>, en passant par <strong>le suivi de ses commandes</strong>, jusqu'au <strong>téléchargement de ses factures</strong>.</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/01/image-273-1024x368.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 -->



<p class="callout rouge">.⚠️ Attention, c'est dans "<strong>informations</strong>" qu'il gère <strong>sa fiche client</strong>. "Mes données personnelles" (<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=""> RGPD)</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="977" height="347" src="https://st9ph.fr/wp-content/uploads/2026/01/image-274.png" alt="" class="wp-image-33305" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-274.png 977w, https://st9ph.fr/wp-content/uploads/2026/01/image-274-300x107.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-274-768x273.png 768w" sizes="auto, (max-width: 977px) 100vw, 977px" /></figure>



<p class="callout bleu">🖥️ On appréciera à l'examen que vous sachiez <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">expliquer à votre client comment gérer lui-même ses informations</mark></strong>. cela fait partie de la phase <strong>Next Step </strong>de lui indiquer comment u<strong>tiliser le Selfcare</strong>.</p>



<p>👉🏻 Même si vous venez de faire l'opération pour lui. <strong>Le rendre autonome</strong> allégera <strong>la charge du service client</strong> et <strong>augmentera sa satisfaction</strong> (il sera plus agile dans se relation client). On verra cela en détail dans le SAV.</p>



<p>ℹ️ Vous pouvez également créer <strong>des groupes de clients</strong> (VIP, Comités d'entreprises ...) et leurs réserver des promotions ou des avantages.</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="340" height="293" src="https://st9ph.fr/wp-content/uploads/2026/01/image-278.png" alt="" class="wp-image-33313" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-278.png 340w, https://st9ph.fr/wp-content/uploads/2026/01/image-278-300x259.png 300w" sizes="auto, (max-width: 340px) 100vw, 340px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h3 class="wp-block-heading" id="16-32-livraison-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">3.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>Livraison</strong></h3>



<p>👉 Ce sera forcément <strong>un prestataire </strong>et, ce qui est curieux, c'est que <strong>le seul interlocuteur physique que verra votre client</strong> ne sera même pas quelqu'un qui travaille chez vous.</p>



<p class="has-text-align-center has-base-2-background-color has-background">Il faudra définir avec chacun de ceux que vous choisirez (<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">mettez-les en concurrence</mark>) <strong>les conditions de la prestation</strong> et <strong>les pénalités</strong> de <strong>retard et de casse</strong> (notamment en les graduant selon leur importance).<strong>Il y va de la satisfaction de vos clients </strong>!</p>
</div>
</div>



<p class="has-medium-font-size">➡️ Par défaut, sur le modèle de base, vous disposez de trois modes dont 1 transporteur décliné en 3 :</p>



<ul class="wp-block-list">
<li>le <strong>click-And-Collect</strong></li>



<li>Le transporteur "<strong>My Carier</strong>" décliné en <strong>standard</strong>, "<strong>Cheap</strong>" (montant dégressif) et "<strong>light</strong>" (Volume)</li>



<li>Le <strong>point relais</strong></li>
</ul>



<p class="has-medium-font-size">➡️ Ajoutons un transporteur en prenant un exemple :</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:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="584" height="324" src="https://st9ph.fr/wp-content/uploads/2026/01/upst9ph.png" alt="" class="wp-image-33318" srcset="https://st9ph.fr/wp-content/uploads/2026/01/upst9ph.png 584w, https://st9ph.fr/wp-content/uploads/2026/01/upst9ph-300x166.png 300w" sizes="auto, (max-width: 584px) 100vw, 584px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p><strong>UPSt9ph </strong>est un transporteur qui <strong>devient notre partenaire</strong>, mais <strong>il ne livre qu'en Union européenne</strong>. Il nous propose <strong>un cout de 3€ </strong>quelle que soit la distance et le poids (bon, ce sont des fringues, il ne prend pas trop de risques) mais <strong>n'accepte pas le paiement à la livraison</strong>. Il faudra l'exclure du panier des clients qui veulent ce mode.</p>



<p class="has-text-align-center has-small-font-size">Toute ressemblance avec une marque existante serait loin d'être une coïncidence.</p>
</div>
</div>



<ul class="wp-block-list">
<li>🚛 <strong>Livraisons </strong>&gt; <strong>transporteur</strong></li>
</ul>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li><strong>Cliquer </strong>sur ⬛<strong>+ Créer un transporteur</strong></li>
</ul>
</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-medium-font-size">🔹paramètres généraux  :</p>



<ul class="wp-block-list">
<li>Le <strong>nom</strong></li>



<li>le <strong>délai de livraison</strong> (annoncé au client)</li>



<li>la<strong> vitesse</strong> (0 pour "<em>au plus court</em>" et 9 "<em>pour au plus long</em>" quand il y'a des variables secteurs, poids ou encombrement)</li>



<li><strong>Uploadez le logo</strong> (<mark style="background-color:rgba(0, 0, 0, 0);color:#ac2727" class="has-inline-color">il faut obligatoirement un jpg</mark>)</li>



<li>l<strong>'URL de suivi </strong>qui permettra au client de<strong> suivre son colis</strong> sur le site du transporteur.</li>
</ul>



<p class="has-base-2-background-color has-background">👉 <strong>C'est lui qui vous la fournit </strong>et c'est bien utile pour éviter au SAV <strong>des tickets de clients qui s'impatientent </strong>!</p>



<ul class="wp-block-list">
<li><strong>Réservez éventuellement ce transporteur à certains groupes </strong>(mais je ne vois pas bien pourquoi)</li>
</ul>
</div>



<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/01/image-280.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">
<!-- 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/01/image-281.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 class="has-medium-font-size">🔹destinations et couts :</p>



<ul class="wp-block-list">
<li>Définissez les <strong>zones de livraison couvertes </strong>(le transporteur n'apparaitra pas dans le panier des <strong>clients hors zones</strong></li>



<li>Basculez éventuellement en<strong> livraison gratuite </strong>si vous êtes généreux (ou si c'est du <strong>click-and-collect</strong>)</li>



<li>Réglez éventuellement<strong> les couts de manutention</strong> selon le type de contrat que vous avez souscrit</li>



<li>en corolaire, définissez <strong>le tarif si on est hors tranche</strong> prévue (poids, encombrement ...)</li>



<li>Il vous faudra une f<strong>ourchette de prix</strong> (à indiquer lors de la commande)</li>
</ul>



<p></p>



<p class="has-base-2-background-color has-background">ℹ️ Même s'ils sont invariables, comme dans notre exemple !</p>
</div>
</div>



<ul class="wp-block-list">
<li>Vous pouvez également définir des limites (poids et encombrement) dans le 3ème onglet</li>



<li><strong>Enregistrer</strong></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>C'est dans la sections des paiements qu'on pourra indiquer les restrictions de notre nouveau transporteur en termes de solutions de paiements :</p>



<ul class="wp-block-list">
<li>🚛 <strong>Paiement </strong>&gt; <strong>préférences</strong></li>



<li><strong>décocher </strong>"<em>paiement à la livraison</em>" pour UPst9ph.</li>



<li><strong>Enregistrer</strong></li>
</ul>
</div>



<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/01/image-282.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>Notre transporteur est désormais disponible dans le tunnel d'achat :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="829" height="376" src="https://st9ph.fr/wp-content/uploads/2026/01/image-283.png" alt="" class="wp-image-33325" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-283.png 829w, https://st9ph.fr/wp-content/uploads/2026/01/image-283-300x136.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-283-768x348.png 768w" sizes="auto, (max-width: 829px) 100vw, 829px" /></figure>



<h3 class="wp-block-heading" id="17-33-marques-et-fournisseurs-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">3.3 |</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>Marques et fournisseurs</strong></h3>



<p> C'est toujours un avantage de <strong>mettre à l'honneur les marques</strong> de vos fournisseurs car Prestashop crée une page regroupant tous les produits <strong>dès qu'on clique sur le logo </strong>dans une fiche. 👇🏻</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="687" height="713" src="https://st9ph.fr/wp-content/uploads/2025/12/image-27.png" alt="" class="wp-image-31144" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-27.png 687w, https://st9ph.fr/wp-content/uploads/2025/12/image-27-289x300.png 289w" sizes="auto, (max-width: 687px) 100vw, 687px" /></figure>



<p class="callout jaune">💡 Cela peut <strong>doper vos ventes sur cette marque</strong> et vous permettre, à terme, de <strong>négocier mieux vos prix d'achat</strong> vu que votre volume de ventes augmente.</p>



<p class="has-medium-font-size">➡️ Il faut distinguer :</p>



<ul class="wp-block-list">
<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Les marques</mark></strong> qui fabriquent les produits (et qui<strong> peuvent venir de plusieurs fournisseurs</strong>)</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Les fournisseurs</mark></strong> qui alimentent vos stocks (et qui peuvent <strong>vous approvisionner de plusieurs marques</strong>)</li>
</ul>



<p>👉 C'est dans <strong>Catalogue &gt; Marques et Fournisseurs </strong>que vous retrouverez ceux existant et que vous pourrez en créer d'autres.</p>



<ul class="wp-block-list">
<li>En c<strong>liquant sur une marque ou un fournisseur,</strong> vous verrez<strong> l'état de vos stocks</strong> sur leurs produits.</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="842" height="476" src="https://st9ph.fr/wp-content/uploads/2026/01/image-284.png" alt="" class="wp-image-33327" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-284.png 842w, https://st9ph.fr/wp-content/uploads/2026/01/image-284-300x170.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-284-768x434.png 768w" sizes="auto, (max-width: 842px) 100vw, 842px" /></figure>



<p class="has-text-align-center has-medium-font-size">👀 Ca peut être très pratique pour <strong>anticiper une commande </strong>!</p>



<p class="callout bleu">ℹ️ Vous disposez de <strong>plusieurs outils en BackOffice</strong> pour suivre vos stocks et pouvez même ajouter des modules pour être prévenu par mail de stocks bas (mais je n'en ai pas trouvé de gratuit) :</p>



<ul class="wp-block-list">
<li>Catalogue &gt; <strong>stocks </strong>&gt; (onglet) <strong>Mouvements</strong></li>



<li>Tableau de bord &gt;(panneau) <strong>Activité </strong>&gt; <strong>Produits en rupture de stock</strong></li>



<li>Statistiques &gt; <strong>Détails Produits</strong> &gt; (colonne) "<strong>quantité disponible</strong>"</li>
</ul>



<p>➡️ Pour ajouter une marque :</p>



<ul class="wp-block-list">
<li><strong>Catalogue &gt; Marques et Fournisseurs </strong>&gt; (onglet) <strong>Marque</strong></li>
</ul>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li><strong>Cliquer </strong>sur ⬛<strong>+ Ajouter une marque</strong></li>
</ul>
</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">
<ul class="wp-block-list">
<li>Inscrivez son <strong>Nom<sub>Tm</sub></strong></li>



<li>Faites en <strong>un résumé et / ou une description</strong>.</li>
</ul>



<p>😳 C'est la même chose, je ne sais pas pourquoi ils ont fait deux zones.</p>



<ul class="wp-block-list">
<li>Changer <strong>la balise titre </strong>(SEO) pour ajouter le nom de votre boutique. Pour nous :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="361" height="39" src="https://st9ph.fr/wp-content/uploads/2026/01/image-286.png" alt="" class="wp-image-33330" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-286.png 361w, https://st9ph.fr/wp-content/uploads/2026/01/image-286-300x32.png 300w" sizes="auto, (max-width: 361px) 100vw, 361px" /></figure>



<ul class="wp-block-list">
<li>Donnez <strong>une meta description</strong> (toujours pour le SEO)</li>
</ul>



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



<p class="has-text-align-center has-base-2-background-color has-background">🔑 Vous ne disposez <strong>pas d'une zone Keyword</strong>, donc, c<strong>hargez tous vos mots clés </strong>dans le<strong> titre SEO</strong> et la <strong>méta description</strong></p>



<ul class="wp-block-list">
<li><strong>Enregistrez</strong></li>
</ul>
</div>



<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/01/image-285.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="callout jaune">⚠️ N'oubliez pas d<strong>'affecter la marque aux produits</strong> concernés dans les fiches produits</p>



<h3 class="wp-block-heading" id="18-34-r%C3%B4les-internes-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">3.4 |</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>Rôles internes</strong></h3>



<p class="has-medium-font-size">👉🏻 On va parler "d'équipiers" et il y'en aura de 4 types :</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 is-resized"><img loading="lazy" decoding="async" width="391" height="392" src="https://st9ph.fr/wp-content/uploads/2026/01/image-288.png" alt="" class="wp-image-33334" style="width:379px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-288.png 391w, https://st9ph.fr/wp-content/uploads/2026/01/image-288-300x300.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-288-150x150.png 150w" sizes="auto, (max-width: 391px) 100vw, 391px" /></figure>



<p class="has-text-align-center has-medium-font-size">Le "Super Admin"</p>



<p>Grand "manie-tout" du BackOffice, il peut tout faire.</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="431" height="413" src="https://st9ph.fr/wp-content/uploads/2026/01/image-289.png" alt="" class="wp-image-33335" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-289.png 431w, https://st9ph.fr/wp-content/uploads/2026/01/image-289-300x287.png 300w" sizes="auto, (max-width: 431px) 100vw, 431px" /></figure>



<p class="has-text-align-center has-medium-font-size">Le Commercial</p>



<p>Il accède (et c'est logique) à la partie "Vendre" de la boutique.</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">
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="433" height="450" src="https://st9ph.fr/wp-content/uploads/2026/01/image-290.png" alt="" class="wp-image-33336" style="aspect-ratio:0.9622403305405716;width:367px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-290.png 433w, https://st9ph.fr/wp-content/uploads/2026/01/image-290-289x300.png 289w" sizes="auto, (max-width: 433px) 100vw, 433px" /></figure>



<p class="has-text-align-center has-medium-font-size">Le Traducteur</p>



<p>Moi, je l'aurais appelé "le concepteur" puisque son rôle est surtout d'alimenter les fiches produits, de gérer les alias, mais c'est vrai aussi que c'est lui qui traduit les boutiques multilingues. </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="484" height="467" src="https://st9ph.fr/wp-content/uploads/2026/01/image-291.png" alt="" class="wp-image-33337" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-291.png 484w, https://st9ph.fr/wp-content/uploads/2026/01/image-291-300x289.png 300w" sizes="auto, (max-width: 484px) 100vw, 484px" /></figure>



<p class="has-text-align-center has-medium-font-size">Le Logisticien</p>



<p>S'occupe du suivi de commande, des stocks et du SAV</p>
</div>
</div>



<p>👉 Ces <strong>rôles prédéfinis </strong>sont ajoutables, heureusement :</p>



<ul class="wp-block-list">
<li><img loading="lazy" decoding="async" width="24" height="23" class="wp-image-33295" style="width: 24px;" src="https://st9ph.fr/wp-content/uploads/2026/01/roue-crant.jpg" alt=""> <strong>Paramètres Avancés </strong>&gt; <strong>Equipes </strong>&gt; (onglet) <strong>Permissions</strong></li>



<li>Cliquer sur le<strong> rôle à modifier</strong></li>



<li><strong>cocher / décocher</strong> les permissions du groupe d'équipiers</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/01/image-292.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 -->



<p>Elles reprennent la norme informatique des <strong>rôles et permissions</strong> : </p>



<ul class="wp-block-list">
<li><strong>Afficher </strong>: l'équipier pour voir la rubrique mais pas agir à l'intérieur</li>



<li><strong>Ajouter </strong>: l'équipier pourra ajouter des information, un nouveau client par exemple,  mais pas agir sur des informations déjà existantes (comme changer une adresse)</li>



<li><strong>Modifier </strong>: l'équipier pourra transformer les informations de la base et les fonctionnalités</li>



<li><strong>Supprimer </strong>: Il pourra enlever des informations et restreindre des fonctionnalités</li>



<li><strong>Toutes / All</strong> : l'équipier aura toutes les permissions sur la rubrique</li>
</ul>



<p>👉 On peut aussi <strong>ajouter un rôle</strong> :</p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li><strong>Cliquer </strong>sur ⬛<strong>+ Ajouter un nouveau rôle</strong></li>
</ul>
</div>



<ul class="wp-block-list">
<li>Donner lui <strong>un nom</strong> (dans mon exemple "<em>stagiaire</em>") et éventuellement affublez le d'un avatar</li>



<li><strong>Enregistrer</strong></li>
</ul>



<p>Je voudrais que mes stagiaires puissent <strong>voir tout le catalogue mais sans rien modifier</strong> :</p>



<ul class="wp-block-list">
<li><img loading="lazy" decoding="async" width="24" height="23" class="wp-image-33295" style="width: 24px;" src="https://st9ph.fr/wp-content/uploads/2026/01/roue-crant.jpg" alt=""> <strong>Paramètres Avancés </strong>&gt; <strong>Equipes </strong>&gt; (onglet) <strong>Permissions</strong></li>



<li>Cliquer sur le <strong>rôle </strong>"<strong>à modifier</strong>"stagiaire"</li>



<li><strong>cocher </strong> "Afficher" sur la ligne "<strong>Vendre</strong>"</li>
</ul>



<p>👀 Ne cherchez pas le bouton enregistrer,<strong> la mise à jour est automatique</strong></p>



<p>👉 Affectons maintenant ce rôle à un nouvel employé.</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="302" height="202" src="https://st9ph.fr/wp-content/uploads/2026/01/image-293.png" alt="" class="wp-image-33340" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-293.png 302w, https://st9ph.fr/wp-content/uploads/2026/01/image-293-300x201.png 300w" sizes="auto, (max-width: 302px) 100vw, 302px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>(Onglet) <strong>Employé</strong> ⬛<strong>+Ajouter un employé</strong></li>
</ul>



<ul class="wp-block-list">
<li>Entrer son <strong>Prénom et son nom</strong></li>



<li>Entrer <strong>son adresse mail et donnez lui un mot de passe</strong> (provisoire)</li>



<li>Choisissez le rôle "<strong>stagiaire</strong>"</li>



<li><strong>Enregistrer</strong></li>
</ul>



<p></p>
</div>
</div>



<p>🖥️ Voilà, il ne reste plus qu'à voir le 3ème bloc de questionnement de l'épreuve E5 !</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"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h2 class="wp-block-heading has-text-align-center has-base-2-background-color has-background has-medium-font-size" id="19-aller-au-sav-%E2%9E%A1%EF%B8%8F"><a href="https://st9ph.fr/prestashop-le-service-apres-vente/">Aller au SAV</a> ➡️</h2>
</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%2Fprestashop-manipuler-la-boutique%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>



<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">🛠️ création de sites</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-uagb-post-grid uagb-post-grid  uagb-post__image-position-top uagb-post__image-enabled uagb-block-45fc796a     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/prestashop-op-com-dans-la-eshop/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="732" height="259" src="https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop.jpg 732w, https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop-300x106.jpg 300w" sizes="auto, (max-width: 732px) 100vw, 732px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/" target="_self" rel="bookmark noopener noreferrer">Prestashop | OP Com dans la Eshop</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-02-17T18:27:24+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					17 février 2026				</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>PrestaShop | 💥OP Com dans la Eshop ➡️ Que ce soit pour &#8230; vider les...				</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/prestashop-op-com-dans-la-eshop/" 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/prestashop-le-service-apres-vente/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="840" height="248" src="https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech.jpg 840w, https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech-300x89.jpg 300w, https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech-768x227.jpg 768w" sizes="auto, (max-width: 840px) 100vw, 840px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-le-service-apres-vente/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Le Service Après Vente</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-24T16:55:00+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					24 janvier 2026				</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'>
					SAV prestashop,, commande prestashop en backoffice, messages prédéfinis prestashop

				</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/prestashop-le-service-apres-vente/" 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/prestashop-la-fiche-produit/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="769" height="245" src="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-144419.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-144419.jpg 769w, https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-144419-300x96.jpg 300w" sizes="auto, (max-width: 769px) 100vw, 769px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-la-fiche-produit/" target="_self" rel="bookmark noopener noreferrer">Prestashop | La Fiche Produit par l&#8217;exemple</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-16T22:44:19+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					16 janvier 2026				</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>PrestaShop | La Fiche Produit 🎧 Ecouter l&#8217;introduction audio 👉🏻 1er bloc d&#8217;évaluation de l&#8217;épreuve...				</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/prestashop-la-fiche-produit/" 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/prestashop-cas-de-retours-produits/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="723" height="199" src="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925.jpg 723w, https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925-300x83.jpg 300w" sizes="auto, (max-width: 723px) 100vw, 723px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-cas-de-retours-produits/" target="_self" rel="bookmark noopener noreferrer">Prestashop | les retours produits</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-12-18T19:06:17+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					18 décembre 2025				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Un commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>restaShop | Les retours produits 🔙 ➡️ Il faut savoir que les différents scénarios devront...				</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/prestashop-cas-de-retours-produits/" 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/prestashop-nouveautes-de-la-version-9/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="307" src="https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-1024x349.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-1024x349.png 1024w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-300x102.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-768x262.png 768w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9.png 1059w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-nouveautes-de-la-version-9/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Nouveautés de la version 9</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-11-19T10:45:25+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					19 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>Une nouvelle version du CMS pose quelques améliorations au Backoffice et un nouveau thème en...				</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/prestashop-nouveautes-de-la-version-9/" 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/prestashop-referencement-seo-de-vos-produits/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="425" src="https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-1024x484.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-1024x484.png 1024w, https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-300x142.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-768x363.png 768w, https://st9ph.fr/wp-content/uploads/2025/11/refeProduit.png 1062w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-referencement-seo-de-vos-produits/" target="_self" rel="bookmark noopener noreferrer">Prestashop | référencement SEO de vos produits</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-11-14T10:10:32+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					14 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>PrestaShop | le SEO de vos produits 👉🏻 Essentiel pour assurer votre visibilité sur les...				</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/prestashop-referencement-seo-de-vos-produits/" 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'ai commencé ma carrière comme technicien en réseaux informatiques.  J'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'Appels chez Webhelp pendant 12 ans avec des grands comptes FAI comme Orange, Bouygues Telecom et SFR, des assureurs et des fournisseurs d'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/prestashop-manipuler-la-boutique/">Prestashop | Manipuler la boutique</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://st9ph.fr/prestashop-manipuler-la-boutique/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/Enregistrement-2026-01-19-160918.mp4" length="2450073" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/greffon.mp4" length="12632073" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/Enregistrement-2026-01-19-172128.mp4" length="2536587" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/voicertool_audio_Eloise_22-01-2026_at_18_37_09_on_January_22nd_2026.mp3" length="179424" type="audio/mpeg" />

		<post-id xmlns="com-wordpress:feed-additions:1">33149</post-id>	</item>
		<item>
		<title>Prestashop &#124; La Fiche Produit par l&#8217;exemple</title>
		<link>https://st9ph.fr/prestashop-la-fiche-produit/</link>
					<comments>https://st9ph.fr/prestashop-la-fiche-produit/#respond</comments>
		
		<dc:creator><![CDATA[St9ph]]></dc:creator>
		<pubDate>Fri, 16 Jan 2026 21:44:19 +0000</pubDate>
				<category><![CDATA[PrestaShop]]></category>
		<category><![CDATA[🛠️ création de sites]]></category>
		<category><![CDATA[🌐 public]]></category>
		<category><![CDATA[déclinaisons prestashop]]></category>
		<category><![CDATA[prix specifiques prestashop]]></category>
		<category><![CDATA[tuto fiche produit prestashop]]></category>
		<category><![CDATA[tva prix prestashop]]></category>
		<guid isPermaLink="false">https://st9ph.fr/?p=32746</guid>

					<description><![CDATA[<p>PrestaShop &#124; La Fiche Produit 👉🏻 1er bloc d&#8217;évaluation de l&#8217;épreuve technique, la création ou modification d&#8217;une fiche produit est un incontournable de l&#8217;examen E5B du BTS NDRC. Les deux autres blocs de questions étant : ⏱️ Vous devrez répartir votre temps (et donc vos points) entre ces trois blocs. Sur une épreuve de 40 ... <a title="Prestashop &#124; La Fiche Produit par l&#8217;exemple" class="read-more" href="https://st9ph.fr/prestashop-la-fiche-produit/" aria-label="En savoir plus sur Prestashop &#124; La Fiche Produit par l&#8217;exemple">Lire la suite</a></p>
<p>L’article <a href="https://st9ph.fr/prestashop-la-fiche-produit/">Prestashop | La Fiche Produit par l&#8217;exemple</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-80041ad0 wp-block-group-is-layout-flex">


<p class="has-medium-font-size"><strong>PrestaShop</strong></p>



<p class="has-accent-color has-text-color has-link-color has-x-large-font-size wp-elements-755afc86b2978d41e5b3abc95c613507"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-contrast-color">|</mark> La Fiche Produit</p>


</div>



<figure class="wp-block-audio"><audio controls src="https://st9ph.fr/wp-content/uploads/2026/01/voicertool_audio_Eloise_17-01-2026_at_10_28_33_on_January_17th_2026.mp3"></audio><figcaption class="wp-element-caption">🎧 Ecouter l&#8217;introduction audio</figcaption></figure>



<p class="has-medium-font-size">👉🏻 1er bloc d&#8217;évaluation de l&#8217;épreuve technique, la <strong>création ou modification d&#8217;une fiche produit</strong> est un <strong>incontournable de l&#8217;examen </strong>E5B du BTS NDRC.</p>



<p><strong>Les deux autres blocs</strong> de questions étant : </p>



<ul class="wp-block-list">
<li>2️⃣ <strong>Manipulations à l&#8217;intérieur de la boutique</strong> (paramétrer le carrousel, l&#8217;apparence du site, une promotion sur un rayon, une réassurance &#8230;) </li>



<li>3️⃣ <strong>le SAV</strong> (traiter une demande client) </li>
</ul>



<p class="has-base-2-background-color has-background">⏱️ Vous devrez <strong>répartir votre temps </strong>(et donc vos points) <strong>entre ces trois blocs.</strong> Sur une épreuve de <strong>40 minutes</strong>, <strong>vous en aurez donc 13 pour réaliser toutes les manipulations de cet article </strong>et aller chercher <strong>les 6 à 7 points sur 20 </strong>de ce bloc.</p>



<p class="has-text-align-center has-medium-font-size">C&#8217;est chaud !🔥 Et il faut donc s&#8217;entrainer au maximum :</p>



<ul class="wp-block-list">
<li>Vous trouverez <a href="https://st9ph.fr/exos-prestashop/" target="_blank" rel="noreferrer noopener">sur cette page</a> une <strong>série d&#8217;exercices d&#8217;application</strong> classés par difficulté</li>



<li>Vous pouvez voir sur <a href="https://boutiq.st9ph.fr/" target="_blank" rel="noreferrer noopener">cette boutique démo</a><strong> <a href="https://boutiq.st9ph.fr/" target="_blank" rel="noreferrer noopener"></a>le résultat escompté</strong> de ces exercices</li>
</ul>



<p>ℹ️ Cet article englobe aussi des aspects de ☝️concepts (<strong>légalité de la EShop</strong>) en remplacement de cette <a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2961/preview/pdf/5747" target="_blank" rel="noreferrer noopener">fiche ressource</a> pour la préparation de l&#8217;épreuve écrite E5A (compétence 3).</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" style="flex-basis:33.33%"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" 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>
</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-6bffa562-bd8f-476f-8885-ffba543304c2">
			<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-6bffa562-bd8f-476f-8885-ffba543304c2-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-6bffa562-bd8f-476f-8885-ffba543304c2-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-6bffa562-bd8f-476f-8885-ffba543304c2-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-6bffa562-bd8f-476f-8885-ffba543304c2-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-6bffa562-bd8f-476f-8885-ffba543304c2-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-6bffa562-bd8f-476f-8885-ffba543304c2-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-6bffa562-bd8f-476f-8885-ffba543304c2-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-6bffa562-bd8f-476f-8885-ffba543304c2-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-6bffa562-bd8f-476f-8885-ffba543304c2-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-6bffa562-bd8f-476f-8885-ffba543304c2-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-953cec45-3e6f-422b-8592-e666a7cfbdb7">
			<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-953cec45-3e6f-422b-8592-e666a7cfbdb7-0"><rect height="150" width="150" 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-953cec45-3e6f-422b-8592-e666a7cfbdb7-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-953cec45-3e6f-422b-8592-e666a7cfbdb7-1"><rect height="150" width="75" 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-953cec45-3e6f-422b-8592-e666a7cfbdb7-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-953cec45-3e6f-422b-8592-e666a7cfbdb7-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-953cec45-3e6f-422b-8592-e666a7cfbdb7-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-953cec45-3e6f-422b-8592-e666a7cfbdb7-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-953cec45-3e6f-422b-8592-e666a7cfbdb7-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-953cec45-3e6f-422b-8592-e666a7cfbdb7-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-953cec45-3e6f-422b-8592-e666a7cfbdb7-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-84f3a636-c4a8-421c-9d7c-e8630dad43c9">
			<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-84f3a636-c4a8-421c-9d7c-e8630dad43c9-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-84f3a636-c4a8-421c-9d7c-e8630dad43c9-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-84f3a636-c4a8-421c-9d7c-e8630dad43c9-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-84f3a636-c4a8-421c-9d7c-e8630dad43c9-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-84f3a636-c4a8-421c-9d7c-e8630dad43c9-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-84f3a636-c4a8-421c-9d7c-e8630dad43c9-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-84f3a636-c4a8-421c-9d7c-e8630dad43c9-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-84f3a636-c4a8-421c-9d7c-e8630dad43c9-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-84f3a636-c4a8-421c-9d7c-e8630dad43c9-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-84f3a636-c4a8-421c-9d7c-e8630dad43c9-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>



<p class="has-text-align-center has-small-font-size">Il est possible que les termes ou les aperçus d&#8217;écran diffèrent entre votre BO et le mien notamment au niveau des noms de labels car j&#8217;utilise une version multilingue du CMS et les noms restent parfois en anglais.</p>



<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">53–80 minutes</div>


<p>|</p>


<div class="wp-block-post-time-to-read">12 526 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-04-13T09:29:08+02:00">13 avril  2026</time></div></div>


				<div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-b4ee5d2e      uagb-toc__collapse--list"
					data-scroll= "1"
					data-offset= "30"
					style=""
				>
				<div class="uagb-toc__wrap">
						<div class="uagb-toc__title">
							plan du tuto :						</div>
												<div class="uagb-toc__loader"></div>										<div class="uagb-toc__list-wrap uagb-toc__list-hidden">
						<ol class="uagb-toc__list"><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#lexemple-fil-rouge" class="uagb-toc-link__trigger">L&#039;Exemple &quot;fil rouge&quot;</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#magnifique-sweat-panda" class="uagb-toc-link__trigger">Magnifique Sweat Panda</a></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#onglet-description" class="uagb-toc-link__trigger">Onglet Description</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#11-les-visuels-du-produit" class="uagb-toc-link__trigger">🔹1.1 |les visuels du produit</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#12-récapitulatif-description" class="uagb-toc-link__trigger">🔹1.2 |Récapitulatif &amp; Description</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#13-catégories" class="uagb-toc-link__trigger">🔹1.3 |Catégories</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#14-marque" class="uagb-toc-link__trigger">🔹1.4 |Marque</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#15-produits-associés" class="uagb-toc-link__trigger">🔹1.5 |Produits associés</a></li></ul></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#longlet-détails" class="uagb-toc-link__trigger">l&#039;Onglet Détails</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#21-références" class="uagb-toc-link__trigger">🔹2.1 |Références</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#22-caractéristiques" class="uagb-toc-link__trigger">🔹2.2 |Caractéristiques</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#23-fichiers-joints" class="uagb-toc-link__trigger">🔹2.3 |Fichiers joints</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#24-etat-du-produit" class="uagb-toc-link__trigger">🔹2.4 |Etat du produit</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#25-personnalisation" class="uagb-toc-link__trigger">🔹2.5 |Personnalisation</a></li></ul></li></ul></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#3-déclinaisons" class="uagb-toc-link__trigger">3️⃣| Déclinaisons</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#3-1-créer-une-valeur-ou-tout-un-attribut-de-déclinaison" class="uagb-toc-link__trigger">3-1 | créer une valeur ou tout un attribut de déclinaison</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#pull-marin-homme" class="uagb-toc-link__trigger">Pull marin homme</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#cadre-panda" class="uagb-toc-link__trigger">Cadre Panda</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#3-2-générer-et-paramétrer-les-déclinaisons" class="uagb-toc-link__trigger">3-2 | Générer et paramétrer les déclinaisons</a></li></ul></li></ul></li></ul></li></ul></li><li class="uagb-toc__list "><a href="#4-livraison" class="uagb-toc-link__trigger">4️⃣| Livraison</a><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#5-prix" class="uagb-toc-link__trigger">5️⃣| Prix</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#5-1-les-taux-de-tva-que-vous-devez-connaitre" class="uagb-toc-link__trigger">5-1 | Les taux de TVA que vous devez connaitre</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#5-2-etablissement-du-prix-normal" class="uagb-toc-link__trigger">5-2 | Etablissement du prix normal</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#5-3-etablissement-dun-prix-spécifique-promo" class="uagb-toc-link__trigger">5-3 | Etablissement d&#039;un prix spécifique (promo)</a></li></ul></li></ul></li></ul></li></ul></li></ul></li><li class="uagb-toc__list "><a href="#6-référencement-seo" class="uagb-toc-link__trigger">6️⃣| Référencement &#8211; SEO</a><li class="uagb-toc__list "><a href="#7-options" class="uagb-toc-link__trigger">7️⃣| Options</a><li class="uagb-toc__list "><a href="#aller-à-la-seconde-partie-manipuler-la-boutique" class="uagb-toc-link__trigger">Aller à la seconde partie | manipuler la boutique ➡️</a></ul></ul></ul></ul></ul></ol>					</div>
									</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>
.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">0</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">
      L&#8217;Exemple &#8220;fil rouge&#8221;
    </h2>
    <p class="chapter-subtitle">le magnifique sweat panda femme</p>
  </div>
</div>



<p class="callout vert">👕 Durant tout le déroulé de cet article, je prendrais <strong>l&#8217;exemple d&#8217;un produit que nous allons construire pendant mon exposé</strong>. Un magnifique Sweat-Shirt de la marque Panda de notre collection de vêtements Femme.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-video"><video autoplay loop muted src="https://boutiq.st9ph.fr/img/cms/sweat2w-final.mp4" playsinline></video></figure>
</div>
</div>


<div style="min-height: 285px;; " class="ub_image_slider swiper-container wp-block-ub-image-slider" id="ub_image_slider_d393e517-f601-4177-8f05-1775e885f960" data-swiper-data='{"speed":300,"spaceBetween":20,"slidesPerView":3,"loop":true,"pagination":{"el": ".swiper-pagination" , "type": "bullets", "clickable":true},"navigation": {"nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev"}, "keyboard": { "enabled": true }, "effect": "slide","simulateTouch":false}'>
            <div class="swiper-wrapper"><figure class="swiper-slide">
                <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/2situ.jpg" alt="" style="height: 250px;; ">
                <figcaption class="ub_image_slider_image_caption"></figcaption>
            </figure><figure class="swiper-slide">
                <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/camel.jpg" alt="" style="height: 250px;; ">
                <figcaption class="ub_image_slider_image_caption"></figcaption>
            </figure><figure class="swiper-slide">
                <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/camel-situ.jpg" alt="" style="height: 250px;; ">
                <figcaption class="ub_image_slider_image_caption"></figcaption>
            </figure><figure class="swiper-slide">
                <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/noir.jpg" alt="" style="height: 250px;; ">
                <figcaption class="ub_image_slider_image_caption"></figcaption>
            </figure><figure class="swiper-slide">
                <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/noir-situ.jpg" alt="" style="height: 250px;; ">
                <figcaption class="ub_image_slider_image_caption"></figcaption>
            </figure></div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div>
        </div>


<!-- Bouton principal -->
<button id="uxMenuBtn" style="
  position: fixed;
  right: 14px;
  bottom: 40%;
  padding: 12px 14px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  font-size: 18px;
">
  ☰
</button>

<!-- Menu -->
<div id="uxMenu" style="
  display:none;
  position: fixed;
  right: 14px;
  bottom: 48%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 10000;
  font-family: Arial, sans-serif;
">
  <button class="uxItem" data-popup="sources">📚 Sources</button>
  <button class="uxItem" data-popup="methodo">🧑‍🎓NDRC</button>
  <button class="uxItem" data-popup="glossary">📘 Glossaire</button>
</div>

<!-- Overlay -->
<div id="uxOverlay" style="
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.55);
  z-index:10001;
"></div>

<!-- POPUPS -->

<div class="uxPopup" id="sources" data-title="📚 Sources UX mobile">
<ul>
<li><strong>Nano Banana de Google Gemini</strong> – personnages d&#8217;illustration, des fiches produits et image en avant</li>
<li><strong>Prestashop</strong> – Saas dans sa version V9 pour les manipulations</li>
<li><strong>Ministère de l&#8217;économie et des finances publiques</strong> – règles de TVA</li>
</ul>
</div>

<div class="uxPopup" id="methodo" data-title="🧑‍🎓 NDRC">
<p>Cet article est à visée de 🖥️ l&#8217;épreuve technique E5B.</p>
<ul>
<li>Savoir concevoir un produit simple ou avec déclinaisons</li>
<li>savoir ajouter des caractéristiques, des attributs et ajouter des valeurs ad hoc</li>
<li>Savoir faire la promotion d&#8217;un produit</li>
<li>Savoir référencer un produit</li>
</ul>
<p>Quelques apports compétence 🛒 E-Commerce : Taux de TVA, marge commerciale</p>
</div>

<div class="uxPopup" id="glossary" data-title="📘 Glossaire UX mobile">
<ul>
<li><strong>caractéristique</strong> : spécificité d&#8217;un produit quelles que soient ses variantes</li>
<li><strong>attribut ou déclinaison</strong> : spécificité variable d&#8217;un produit (pointure, couleur &#8230;)</li>
<li><strong>prix d&#8217;achat</strong> : pour le marchand cad le prix fournisseur en HT</li>
<li><strong>Image de couverture</strong> : celle que le visiteur verra en 1er en arrivant sur la fiche produit</li>
</ul>
</div>

<!-- Style popup -->
<style>
.uxItem {
  display: block;
  padding: 10px 16px;
  background: #fff;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: #111;        /* ✅ TEXTE VISIBLE */
  font-size: 14px;
}

.uxItem:hover {
  background: #f0f0f0;
}
.uxItem:hover { background:#f0f0f0; }

.uxPopup {
  display:none;
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  width:90%;
  max-width:560px;
  max-height:80%;
  padding:24px;
  border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  z-index:10002;
  overflow-y:auto;
}
</style>
<style>
@media (max-width: 768px) {
  #uxMenuBtn,
  #uxMenu {
    display: none !important;
  }
}
</style>
<style>
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}
</style>
<style>
@media (max-width: 768px) {
  #uxMenuBtn,
  #uxMenu,
  #uxOverlay,
  .uxPopup {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    display: none !important;
  }
}
</style>

<script>
(function () {

  // === DÉSACTIVATION MOBILE ===
  if (window.innerWidth <= 768) {
    return; // on ne fait RIEN sur mobile
  }

  // === RÉFÉRENCES ===
  const menuBtn = document.getElementById("uxMenuBtn");
  const menu = document.getElementById("uxMenu");
  const overlay = document.getElementById("uxOverlay");
  const popups = document.querySelectorAll(".uxPopup");

  if (!menuBtn || !menu || !overlay) return;

  // === OUVERTURE / FERMETURE MENU ===
  menuBtn.addEventListener("click", () => {
    menu.style.display = menu.style.display === "block" ? "none" : "block";
  });

  // === OUVERTURE POPUPS ===
  document.querySelectorAll(".uxItem").forEach(btn => {
    btn.addEventListener("click", () => {
      popups.forEach(p => p.style.display = "none");
      const target = document.getElementById(btn.dataset.popup);
      if (target) target.style.display = "block";
      overlay.style.display = "block";
      menu.style.display = "none";
    });
  });

  // === FERMETURE OVERLAY ===
  overlay.addEventListener("click", () => {
    popups.forEach(p => p.style.display = "none");
    overlay.style.display = "none";
  });

})();
</script>



</script>
<script>
(function () {
  if (window.innerWidth <= 768) {
    const uxPanel = document.querySelector('.ux-panel');
    if (uxPanel) {
      uxPanel.remove();
    }
  }
})();
</script>



<p class="has-medium-font-size"> 👍 Il est chouette, nan ?</p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Commencez par <strong>télécharger ces visuels </strong>:</li>
</ul>



<div class="wp-block-file"><a id="wp-block-file--media-2b49b188-aaee-4b80-9039-7cc14515aa80" href="https://st9ph.fr/wp-content/uploads/2026/01/sweatPanda.zip">sweatPanda</a><a href="https://st9ph.fr/wp-content/uploads/2026/01/sweatPanda.zip" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-2b49b188-aaee-4b80-9039-7cc14515aa80">Télécharger</a></div>
</div>



<p>On voit que c'est un produit avec <strong>déclinaisons de couleurs.</strong> Mais on l'a aussi <strong>en plusieurs tailles</strong>. Nos consignes sont dans le tableau ci-dessous :</p>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Item</th><th>Spécificité</th><th>Item</th><th>Spécificité</th></tr></thead><tbody><tr><td>Rayon(s)</td><td>vêtements - Femme</td><td>repassage</td><td>Non</td></tr><tr><td>Marque</td><td>Panda Store</td><td>Lavage</td><td>30° (délicat)</td></tr><tr><td>Tailles</td><td>S, L, M, XL</td><td>Séchage machine</td><td>Non</td></tr><tr><td>Couleur(s)</td><td>Noir - Camel (à créer)</td><td>Origine</td><td>Chine</td></tr><tr><td>Stocks</td><td>10 pc de chaque taille dans les deux couleurs</td><td>Norme CE</td><td>Oui</td></tr><tr><td>Composition</td><td>100% coton</td><td>Prix d'achat <br>Marge Com mini</td><td>6,00 €HT<br>8,00 €HT</td></tr></tbody></table></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">
<p class="has-medium-font-size">👀 Voir <strong>le produit fini</strong>  :</p>



<ul class="wp-block-list">
<li>En cliquant sur la fiche 👉🏻</li>



<li>Ou en <strong>flashant le QR Code</strong> 👇🏻</li>
</ul>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="490" height="490" src="https://st9ph.fr/wp-content/uploads/2026/01/qrcode_boutiq.st9ph.fr-14.png" alt="" class="wp-image-33077" style="width:183px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/01/qrcode_boutiq.st9ph.fr-14.png 490w, https://st9ph.fr/wp-content/uploads/2026/01/qrcode_boutiq.st9ph.fr-14-300x300.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/qrcode_boutiq.st9ph.fr-14-150x150.png 150w" sizes="auto, (max-width: 490px) 100vw, 490px" /></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<style>
.ps-product-card { background: #fff; border: 1px solid #e7e7e7; border-radius: 4px; width: 100%; max-width: 300px; margin: 20px auto; font-family: 'Segoe UI', sans-serif; transition: box-shadow 0.3s ease; position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.ps-product-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.ps-product-image-wrapper { position: relative; width: 100%; padding-top: 100%; overflow: hidden; background: #f5f5f5; }
.ps-product-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.ps-product-card:hover .ps-product-image { transform: scale(1.05); }
.ps-wishlist-icon { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.8); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.ps-wishlist-icon svg { width: 20px; height: 20px; fill: #7a7a7a; transition: fill 0.2s; }
.ps-wishlist-icon:hover { background: #fff; transform: scale(1.1); }
.ps-wishlist-icon:hover svg { fill: #ff4848; }
.ps-product-rating { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; z-index: 2; background: rgba(0,0,0,0.4); padding: 4px 8px; border-radius: 20px; }
.ps-star { color: #ffd700; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ps-product-content { padding: 15px; text-align: center; background: #fff; }
.ps-product-name { font-size: 15px; color: #333; margin: 0 0 10px 0; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 42px; }
.ps-product-price { font-size: 18px; font-weight: 700; color: #25B9D7; margin: 0 0 15px 0; }
.ps-product-btn { background-color: #25B9D7; color: #fff; border: none; padding: 10px 15px; border-radius: 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; text-decoration: none; box-sizing: border-box; }
.ps-product-btn:hover { background-color: #1fa3c0; color: #fff; }
.ps-product-btn svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 768px) { .ps-product-card { max-width: 100%; } }
</style>
<!-- DÉBUT VIGNETTE PRODUIT -->
<a href="https://boutiq.st9ph.fr/32-90-magnifique-sweat-panda.html#/1-taille-s/12-couleur-camel" target="_blank" class="ps-product-card">
    <div class="ps-product-image-wrapper">
        <img decoding="async" src="https://boutiq.st9ph.fr/72-product_main/magnifique-sweat-panda.jpg" alt="Magnifique Sweat Panda" class="ps-product-image">
        <div class="ps-wishlist-icon" title="Ajouter aux favoris" onclick="event.preventDefault(); event.stopPropagation(); alert('Fonctionnalité liste d\'envie à connecter.');">
            <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
        </div>
        <div class="ps-product-rating">
            <span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span>
        </div>
    </div>
    <div class="ps-product-content">
        <h3 class="ps-product-name">Magnifique Sweat Panda</h3>
        <div class="ps-product-price">17,95 €</div>
        <div class="ps-product-btn">
            Voir dans la boutique
            <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
        </div>
    </div>
</a>
<!-- FIN VIGNETTE PRODUIT -->
</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%">
<p class="has-text-align-right"></p>
</div>



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



<p class="has-medium-font-size">🖥️ On y va ?</p>



<ul class="wp-block-list">
<li>Depuis le BO de votre CMS Prestashop,<strong> Catalogue &gt; produits</strong></li>
</ul>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Ajouter un nouveau produit</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="213" height="27" src="https://st9ph.fr/wp-content/uploads/2026/01/image-126.png" alt="" class="wp-image-32760"/></figure>
</div>



<p></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"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="363" height="191" src="https://st9ph.fr/wp-content/uploads/2026/01/image-127.png" alt="" class="wp-image-32763" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-127.png 363w, https://st9ph.fr/wp-content/uploads/2026/01/image-127-300x158.png 300w" sizes="auto, (max-width: 363px) 100vw, 363px" /></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Le CMS vous donne le choix entre :</p>



<ul class="wp-block-list">
<li>un <strong>produit simple</strong> (basique) sans variantes</li>



<li>un p<strong>roduit déclinable</strong> (en taille, en couleurs ...)</li>



<li>un <strong>pack de</strong> plusieurs <strong>produits</strong> (lot)</li>



<li>Un<strong> produit dématérialisé</strong> (livre électronique, logiciel, billet de spectacle ...)</li>
</ul>
</div>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur : </li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="281" height="27" src="https://st9ph.fr/wp-content/uploads/2026/01/image-128.png" alt="" class="wp-image-32764"/></figure>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="213" height="27" src="https://st9ph.fr/wp-content/uploads/2026/01/image-126.png" alt="" class="wp-image-32760"/></figure>
</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">
<ul class="wp-block-list">
<li>Inscrivez le nom de votre produit <strong>dans la zone "article"</strong></li>
</ul>



<p class="has-background" style="background-color:#f2cece">⚠️ On va faire à présent <strong>quelque chose qui ne se fait jamais </strong>mais qu'il vaut mieux faire dès maintenant pour ne pas l'oublier quand vous aurez fini votre fiche : <strong>le publier directement !</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="480" height="132" src="https://st9ph.fr/wp-content/uploads/2026/01/image-129.png" alt="" class="wp-image-32769" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-129.png 480w, https://st9ph.fr/wp-content/uploads/2026/01/image-129-300x83.png 300w" sizes="auto, (max-width: 480px) 100vw, 480px" /></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="125" height="37" src="https://st9ph.fr/wp-content/uploads/2026/01/image-130.png" alt="" class="wp-image-32770"/></figure>
</div>
</div>



<ul class="wp-block-list">
<li>Cliquer sur le bouton radio <strong>Offline &gt; Online</strong></li>
</ul>



<p class="has-base-2-background-color has-background"><strong>On ne fait jamais cela en vérité </strong>car <strong>votre produit, qui n'est encore qu'un brouillon, va se retrouver visible dans votre boutique en ligne</strong> ! Seulement, <strong>si vous oubliez à la fin, c'est - 4 pts</strong> (sur un total de 6 ou 7 à prendre). C'est pourquoi<strong> je vous invite à prendre cette petite liberté</strong>.</p>



<p></p>



<!-- DÉBUT TITRE CHAPITRE -->
<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%; }
.chapter-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.chapter-logo { width: 42px; height: 42px; flex-shrink: 0; display:block; }
.chapter-logo img { width: 100%; height: 100%; object-fit: contain; }
.chapter-content h2 { margin: 0; font-size: 2.1rem; font-weight: 700; color: #1e73be; }
.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">1</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">
      </a>
      <h2>Onglet Description</h2>
    </div>
    <ul class="chapter-points"><li>Visuels du produit</li><li>Récapitulatif & description</li><li>Catégories</li><li>Marques</li><li>Produits associés</li></ul>
  </div>
</div>
<!-- FIN TITRE CHAPITRE -->



<p class="callout bleu">ℹ️ Il s'appelle peut-être encore "<strong>Essentiel</strong>" si vous n'êtes pas passé(e) à la version 9.</p>



<p class="has-small-font-size">⚠️ Attention, la V9 est est la version installée pour l'examen</p>



<p class="has-text-align-center has-base-2-background-color has-background">C'est ici qu'on va pouvoir faire <strong>les réglages "de base"</strong>.</p>



<h3 class="wp-block-heading" id="0-11-l-es-visuels-du-produit-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.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="">l<strong>es visuels du produit</strong></h3>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur la zone image (centrale) :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="56" height="47" src="https://st9ph.fr/wp-content/uploads/2026/01/image-131.png" alt="" class="wp-image-32772"/></figure>
</div>



<p>📂 Une <strong>boite de dialogue </strong>s'ouvre pour vous demander où sont <strong>les images à uploader</strong></p>



<ul class="wp-block-list">
<li><strong>Recherchez les fichiers dézippés</strong></li>



<li><strong>Cliquez sur chacun</strong> en maintenant la touche <strong>CTRL</strong></li>



<li>cliquez sur <strong>ouvrir</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/01/image-132.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 -->



<p>Par défaut, il y'a <strong>deux restrictions</strong> :</p>



<ul class="wp-block-list">
<li>vos visuels doivent être <strong>au format .jpg ou .png</strong></li>



<li>l<strong>e poids</strong> de chaque visuel doit être<strong> &lt;= 2 Mo</strong></li>
</ul>



<p class="callout jaune">🖥️ Ce sera le cas <strong>le jour de l'épreuve</strong> mais on ne vous fera pas la blague de <strong>vous donner des fichiers au mauvais format ou trop lourds </strong>(enfin, j'espère, ce ne serait pas très drôle).</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/01/image-133.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>Commençons par légender nos images pour le référencement Google Images :</p>



<ul class="wp-block-list">
<li>cliquer sur un visuel</li>



<li>tapez <strong>l'information clé</strong></li>



<li><strong>Enregistrer</strong></li>
</ul>



<p class="callout vert">🔑 L'information clé, c'est : <strong>le nom du produit </strong>+ <strong>son rayon </strong>+ <strong>le nom de votre boutique</strong></p>



<p></p>
</div>
</div>



<p class="has-text-align-center has-accent-color has-text-color has-link-color wp-elements-353e68d30a04d2127649e5fa7f07a1ad">Il faut savoir que vous n'aurez <strong>pas de balise Alt</strong> (comme dans WordPress) et que <strong>le seul moyen</strong> que vous avez <strong>de référencer votre produit</strong> en recherche d'images <strong>sera la légende</strong>.</p>



<p class="has-base-2-background-color has-background">Ainsi : "<em>Sweat femme", "Boutique St9ph", "marque Panda</em>" tapés <strong>en mots clé</strong> pourront <strong>renvoyer vers ce produit</strong>.</p>



<ul class="wp-block-list">
<li><strong>copier-coller</strong> cette légende <strong>sur toutes les images</strong></li>
</ul>



<p class="callout bleu">👉 Vous avez remarqué aussi la case à cocher "<strong>utiliser comme image de couverture</strong>". Elle sert à <strong>définir quel est le premier visuel </strong>que le visiteur verra quand il arrivera <strong>sur la fiche produit</strong>.</p>



<p class="callout bleu">ℹ️ Il n'est <strong>pas obligatoire de faire figurer des visuels</strong> sur une fiche produit mais cela paraitrait vraiment bizarre qu'il n'y en ait pas, vu que c'est un élément indispensable. </p>



<p class="callout bleu has-medium-font-size">Sachez aussi que :</p>



<ul class="wp-block-list">
<li>si <strong>des éléments photographiés <mark style="background-color:rgba(0, 0, 0, 0);color:#bd2b2b" class="has-inline-color">ne font pas partie du produit</mark>,</strong> vous devez l'indiquer "<em>tel élément vendu séparément</em>"</li>



<li>si <mark style="background-color:rgba(0, 0, 0, 0);color:#dd2e2e" class="has-inline-color">l<strong>'aspect du produit peut changer</strong></mark> (selon les arrivages), vous devez indiquer "<em>images non contractuelles</em>", "<em>couleurs selon arrivages</em>" ...</li>



<li>les <mark style="background-color:rgba(0, 0, 0, 0);color:#d63d3d" class="has-inline-color">photos <strong>ne représentant qu'une partie </strong></mark><strong>des déclinaisons</strong>, vous devez préciser "<em>tel élément en option</em>" ou "<em>modèle photographié : telle option</em>"</li>
</ul>



<p class="has-small-font-size">Si je n'avais pas de visuels pour le pull Camel, par exemple, j'indiquerai "disponible aussi en couleur Camel" sur le visuel noir. Ca peut arriver, parfois, que les fournisseurs n'aient pas eu le temps de faire un shooting pour une nouvelle couleur de leur produit.</p>



<h3 class="wp-block-heading" id="1-12-r%C3%A9capitulatif-amp-description-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.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>Récapitulatif &amp; Description</strong></h3>



<p>⚠️ Attention, <strong>on confond souvent les deux</strong> :</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 256 512&quot;&gt;&lt;path fill=&quot;%23ar(--accent)&quot; d=&quot;M160 64c0-11.8-6.5-22.6-16.9-28.2s-23-5-32.9 1.6l-96 64C-.5 111.2-4.4 131 5.4 145.8s29.7 18.7 44.4 8.9L96 123.8V416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32H160V64z&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-f2834054-048c-45d0-9fc1-8a38417f5447">
<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 256 512&quot;&gt;&lt;path fill=&quot;%23ar(--accent)&quot; d=&quot;M160 64c0-11.8-6.5-22.6-16.9-28.2s-23-5-32.9 1.6l-96 64C-.5 111.2-4.4 131 5.4 145.8s29.7 18.7 44.4 8.9L96 123.8V416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32H160V64z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-8ac5068e-6b28-41ad-9f00-b3bd5c39fb24">
			<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 256 512"><path fill="var(--accent)" d="M160 64c0-11.8-6.5-22.6-16.9-28.2s-23-5-32.9 1.6l-96 64C-.5 111.2-4.4 131 5.4 145.8s29.7 18.7 44.4 8.9L96 123.8V416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32H160V64z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Le récapitulatif</strong> (ou "Summary"), c'est<strong> l'argumentaire de vente </strong>de votre, produit, votre call to action, la zone<strong> juste au dessus du bouton "ajouter au panier"</strong>.</span>
			</div>
			
		</li>
</ul>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="894" height="258" src="https://st9ph.fr/wp-content/uploads/2026/01/image-134.png" alt="" class="wp-image-32782" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-134.png 894w, https://st9ph.fr/wp-content/uploads/2026/01/image-134-300x87.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-134-768x222.png 768w" sizes="auto, (max-width: 894px) 100vw, 894px" /></figure>



<p class="has-base-2-background-color has-background">Ici, j'ai volontairement forcé vers le "too much" mais l'objectif et de fa<strong>ire comprendre à votre correcteur que vous avez compris à quoi sert cette zone</strong>. Si vous êtes maladroit(e) ou si vous exagérez, ça ne vous enlèvera pas de points et cela nous fera juste sourire !</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/01/image-135.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>⚠️ Attention aussi <strong>à ne pas raconter votre vie non plus </strong>(800 caractères max) et il y'a une règle en or<strong> : le bouton "ajouter au panier" doit rester visible sans scroller</strong>. Donc, plus vous serez long, plus vous risquez de la faire descendre dans la page.</p>



<p>👉 <strong>Emoji bienvenus</strong> (Touches <strong>Windows </strong>+ <strong>POINT</strong>) - Vous serez sur un PC 🖥️ Windows</p>



<p class="has-base-background-color has-background">Bon, pour l'instant, il est gratuit et en rupture de stock mais c'est parce qu'on a pas encore renseigné tout cela !</p>
</div>
</div>


<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;%23ar(--accent)&quot; d=&quot;M142.9 96c-21.5 0-42.2 8.5-57.4 23.8L54.6 150.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L40.2 74.5C67.5 47.3 104.4 32 142.9 32C223 32 288 97 288 177.1c0 38.5-15.3 75.4-42.5 102.6L109.3 416H288c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9L200.2 234.5c15.2-15.2 23.8-35.9 23.8-57.4c0-44.8-36.3-81.1-81.1-81.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-7c4d63b3-9bdf-4c1f-a5c7-9403232d51d2">
<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;%23ar(--accent)&quot; d=&quot;M142.9 96c-21.5 0-42.2 8.5-57.4 23.8L54.6 150.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L40.2 74.5C67.5 47.3 104.4 32 142.9 32C223 32 288 97 288 177.1c0 38.5-15.3 75.4-42.5 102.6L109.3 416H288c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9L200.2 234.5c15.2-15.2 23.8-35.9 23.8-57.4c0-44.8-36.3-81.1-81.1-81.1z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-078d7f23-716b-41ea-893e-4a628f03b3a7">
			<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="var(--accent)" d="M142.9 96c-21.5 0-42.2 8.5-57.4 23.8L54.6 150.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L40.2 74.5C67.5 47.3 104.4 32 142.9 32C223 32 288 97 288 177.1c0 38.5-15.3 75.4-42.5 102.6L109.3 416H288c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9L200.2 234.5c15.2-15.2 23.8-35.9 23.8-57.4c0-44.8-36.3-81.1-81.1-81.1z"></path></svg>
				</span>
				<span class="ub_list_item_text">La <strong>description</strong> ce sont les <strong>informations de levée de doute</strong> : la taille, le poids, les dimensions ... tout ce qui peut faire que<strong> le client prêt à ajouter au panier </strong>ne se demande plus s'il ne sera pas trop juste, trop lourd, trop grand ...</span>
			</div>
			
		</li>
</ul>


<p class="has-base-2-background-color has-background">⚠️ Attention encore, certaines informations seront <strong>mieux mises en valeur en caractéristiques </strong>(ce sera même parfois explicitement demandé) mais nous verrons cela plus tard parce que <strong>c'est dans l'onglet suivant</strong></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">
<p>On vous donnera parfois <strong>des pictogrammes </strong>pour certaines informations :</p>



<ul class="wp-block-list">
<li>Ici, <strong>concernant les vêtements</strong> : les conditions de repassage, de lavage, de séchage (comme sur le panneau ci-contre) </li>



<li>pour les <strong>produits électroniques</strong> : des pictogrammes sur la tension, les ondes, la résistance ...</li>



<li>Pour <strong>les plats préparés </strong>: les temps, modes et températures de réchauffage ....</li>
</ul>



<p></p>



<p>Si ces pictogrammes sont fournis, vous pouvez<strong> les inclure par le pictogramme image </strong>de la barre d'outils :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="290" height="84" src="https://st9ph.fr/wp-content/uploads/2026/01/image-137.png" alt="" class="wp-image-32787"/></figure>
</div>



<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/01/image-136.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">
<!-- 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/01/image-138.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>Sur <a href="https://boutiq.st9ph.fr/20-40-pull-panda.html#/1-taille-s/7-couleur-beige" target="_blank" rel="noreferrer noopener">ce produit</a>, par exemple, les pictogrammes permettent <strong>mieux que des mots </strong>d'indiquer les précautions d'emploi.</p>



<p class="has-base-2-background-color has-background">On est jamais trop prudent avec les clients tatillons (il y'en a) et j'ai préfère quand même <strong>l'écrire en toutes lettres </strong>en dessous !</p>



<p>👉 Pour notre Sweat, pas de questions à se poser, <strong>nous n'avons pas de picto</strong>, donc : o<strong>n écrit tout à la main</strong> ... enfin, au clavier !</p>



<p class="has-medium-font-size"><em>Reprenons le tableau :</em></p>
</div>
</div>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Item</th><th>Spécificité</th><th>Item</th><th>Spécificité</th></tr></thead><tbody><tr><td>Rayon(s) <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">catégorie</mark></td><td><s>vêtements - Femme</s></td><td>repassage <mark style="background-color:rgba(0, 0, 0, 0);color:#468049" class="has-inline-color"><strong>oui</strong></mark></td><td>Non</td></tr><tr><td>Marque <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Marque</mark></td><td><s>Panda Store</s></td><td>Lavage <mark style="background-color:rgba(0, 0, 0, 0);color:#468049" class="has-inline-color"><strong>oui</strong></mark></td><td>30° (délicat)</td></tr><tr><td>Tailles <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">déclinaisons</mark></td><td><s>S, L, M, XL</s></td><td>Séchage machine <mark style="background-color:rgba(0, 0, 0, 0);color:#468049" class="has-inline-color"><strong>oui</strong></mark></td><td>Non</td></tr><tr><td>Couleur(s) <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">déclinaisons</mark></td><td><s>Noir - Camel (à créer)</s></td><td>Origine <mark style="background-color:rgba(0, 0, 0, 0);color:#468049" class="has-inline-color"><strong>oui</strong></mark></td><td>Chine</td></tr><tr><td>Stocks <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">déclinaisons</mark></td><td><s>10 pc de chaque taille dans les deux couleurs</s></td><td>Norme CE <mark style="background-color:rgba(0, 0, 0, 0);color:#468049" class="has-inline-color"><strong>oui</strong></mark></td><td>Oui</td></tr><tr><td>Composition <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">caractéristique</mark></td><td><s>100% coton</s></td><td>Prix d'achat <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Prix</mark><br>Marge Com mini</td><td><s>6,00 €HT<br>8,00 €HT</s></td></tr></tbody></table></figure>



<p class="callout bleu">J'ai barré les infos qui concernent les autres sections (on aurait pu garder la composition si on voulait) et indiqué <strong>à laquelle on allait les affecter <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">en bleu</mark>.</strong> Il nous reste donc 5 infos à noter :</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/01/image-140.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">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="606" height="282" src="https://st9ph.fr/wp-content/uploads/2026/01/image-139.png" alt="" class="wp-image-32790" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-139.png 606w, https://st9ph.fr/wp-content/uploads/2026/01/image-139-300x140.png 300w" sizes="auto, (max-width: 606px) 100vw, 606px" /></figure>



<p>ℹ️ Pour "norme CE", j'ai joué avec le nuancier qu'on obtient en cliquant sur le <span style="text-decoration: underline;"><strong>A</strong></span> souligné</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>Pour l'instant, ça donne cela 👉</p>



<p class="has-base-2-background-color has-background">Vous pouvez <strong>jouer avec les outils de la barre,</strong> faire un tableau (mais c'est un peu galère) et tout ce que vous jugez utile <strong>mais ne perdez pas de temps</strong>.</p>



<p>Par contre : <strong>interdiction de mettre des headers</strong> (vous détruiriez la structure de la boutique)</p>



<p></p>
</div>



<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/01/image-141.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>🎬 L'ajout de vidéos peut aussi éviter de longues explications et doper l'envie d'ajout au panier :</p>



<figure class="wp-block-video"><video height="602" style="aspect-ratio: 1018 / 602;" width="1018" autoplay loop muted src="https://st9ph.fr/wp-content/uploads/2026/01/boucle-bambou.mp4" playsinline></video><figcaption class="wp-element-caption">🌐 url de la vidéo : https://st9ph.fr/wp-content/uploads/2026/01/boucle-bambou.mp4</figcaption></figure>



<p>👉🏻 un icone dans la barre d'outils vous permet de rechercher une vidéo <strong>dans votre médiathèque</strong> ou de faire un lien vers <strong>une vidéo extérieure</strong>.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="643" height="168" src="https://st9ph.fr/wp-content/uploads/2026/01/image-391.png" alt="" class="wp-image-36792" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-391.png 643w, https://st9ph.fr/wp-content/uploads/2026/01/image-391-300x78.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-391-640x168.png 640w" sizes="auto, (max-width: 643px) 100vw, 643px" /></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%">
<p>Ici, il suffit de coller l'url que vous trouverez en légende de la vidéo ci-dessus dans la zone source 👉🏻</p>



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



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="454" height="296" src="https://st9ph.fr/wp-content/uploads/2026/01/image-392.png" alt="" class="wp-image-36793" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-392.png 454w, https://st9ph.fr/wp-content/uploads/2026/01/image-392-300x196.png 300w" sizes="auto, (max-width: 454px) 100vw, 454px" /></figure>
</div>
</div>



<h3 class="wp-block-heading" id="2-13-cat%C3%A9gories-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.3 |</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>Catégories</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" style="flex-basis:66.66%">
<p>Ce sont en fait<strong> les rayons virtuels </strong>de votre Eshop et c'est à vous de dire dans lesquels vous voulez suspendre ce magnifique Sweat.</p>



<p class="has-base-2-background-color has-background">Par défaut, <strong>le nouveau produit se classe dans "Accueil"</strong>, cad qu'on le verra dans <strong>le bloc nouveautés </strong>le temps qu'il sera nouveau (et s'il est toujours activé) puis qu'il risque de disparaitre dans la masse.</p>



<ul class="wp-block-list">
<li><strong>Cocher</strong> (en plus) ☑️ <strong>Vêtements </strong>et  ☑️ <strong>Femmes</strong></li>



<li><strong>Enregistrer</strong></li>
</ul>



<p>J'ai gardé, pour ma part, dans <a href="https://boutiq.st9ph.fr/" target="_blank" rel="noreferrer noopener">la boutique d'entrainement</a>, <strong>la même architecture que sur le modèle par défaut</strong> (quand vous installez Prestashop avec les exemples de produits).</p>



<p></p>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="328" height="436" src="https://st9ph.fr/wp-content/uploads/2026/01/image-142.png" alt="" class="wp-image-32794" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-142.png 328w, https://st9ph.fr/wp-content/uploads/2026/01/image-142-226x300.png 226w" sizes="auto, (max-width: 328px) 100vw, 328px" /></figure>
</div>
</div>



<h3 class="wp-block-heading" id="3-14-marque-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.4 |</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>Marque</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" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="248" height="237" src="https://st9ph.fr/wp-content/uploads/2026/01/image-143.png" alt="" class="wp-image-32795"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>On peut vous demander <strong>d'inscrire la marque ce produit</strong>.</p>



<ul class="wp-block-list">
<li><strong>Si elle existe déjà,</strong> il suffit de la choisir dans la liste</li>



<li><strong>Si elle n'existe pas,</strong> il faudra la créer (mais ce sera dans un autre tuto) ➡️<a href="https://st9ph.fr/prestashop-manipuler-la-boutique/" target="_blank" rel="noreferrer noopener"> ici pour les pressés</a> (section 3-3)</li>
</ul>



<p class="has-base-2-background-color has-background">ℹ️ Vous trouverez aussi sur la page d'exemples de <a href="https://st9ph.fr/exos-prestashop/" target="_blank" rel="noreferrer noopener">produits à créer</a> <strong>tout le matériel pour créer la marque Panda Store</strong></p>



<p>👉 Prestashop génère automatiquement une page regroupant <strong>tous les produits d'une marque </strong>quand on clique sur le logo de celle-ci.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="771" height="189" src="https://st9ph.fr/wp-content/uploads/2026/01/image-144.png" alt="" class="wp-image-32796" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-144.png 771w, https://st9ph.fr/wp-content/uploads/2026/01/image-144-300x74.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-144-768x188.png 768w" sizes="auto, (max-width: 771px) 100vw, 771px" /><figcaption class="wp-element-caption">Résultat en front office</figcaption></figure>
</div>
</div>



<p class="has-base-2-background-color has-background">C'est <strong>un plus pour votre boutique </strong>et cela peut<strong> doper vos ventes sur cette marque</strong>. A terme, cela peut permettre de <strong>négocier plus fermement avec votre fournisseur</strong> si votre volume augmente.</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/01/image-145.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 -->



<h3 class="wp-block-heading" id="4-15-produits-associ%C3%A9s-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.5 |</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>Produits associés</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 class="has-base-background-color has-background">Il s'agit de <strong>proposer un rebond de bas de page </strong>"<em>vous aimerez aussi</em>" permettant au visiteur de se "rabattre" sur <strong>des produits équivalents </strong>ci celui-là ne lui plait finalement pas tant que cela.</p>



<p>👉Etant sur le Maket st9ph, j'ai l'embarras du choix pour les produits Panda Store mais si vous êtes <strong>sur le modèle de base</strong> dans votre boutique, vous devez au moins avoir <strong>le "Pull imprimé colibri"</strong> dans le rayon femme.</p>
</div>



<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/01/image-146.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%">
<figure class="wp-block-video"><video height="444" style="aspect-ratio: 404 / 444;" width="404" autoplay loop muted src="https://st9ph.fr/wp-content/uploads/2026/01/Enregistrement-2026-01-15-000253.mp4" playsinline></video></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<ul class="wp-block-list">
<li>🔎 <strong>Taper les 1ères lettres</strong> du produit à associer</li>



<li><strong>Sélectionner </strong>le produit <strong>dans la liste </strong>(cliquer)</li>
</ul>



<p>☑️ Le produit est associé !</p>



<ul class="wp-block-list">
<li>répéter l'opération avec les autres (éventuellement)</li>
</ul>



<p class="has-base-2-background-color has-background"><strong>Deux à quatre,</strong> c'est bien, et seulement si ils ont <strong>une vraie similitude avec le produit</strong>. Là, je tente ma chance avec les produits qui ont<strong> le même motif</strong> (sans être forcément tous des vêtements).</p>
</div>
</div>



<p>⬇️ Ca donne ça :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1007" height="584" src="https://st9ph.fr/wp-content/uploads/2026/01/image-147.png" alt="" class="wp-image-32820" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-147.png 1007w, https://st9ph.fr/wp-content/uploads/2026/01/image-147-300x174.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-147-768x445.png 768w" sizes="auto, (max-width: 1007px) 100vw, 1007px" /></figure>



<p class="has-base-2-background-color has-background">👉 Faites le syst<strong>ématiquement, même si ce n'est pas demandé</strong> dans le sujet. C'est comme l'impasse évitée en fin d'article WordPress, <strong>ça va de soi</strong>.</p>



<!-- DÉBUT TITRE CHAPITRE -->
<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%; }
.chapter-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.chapter-logo { width: 42px; height: 42px; flex-shrink: 0; display:block; }
.chapter-logo img { width: 100%; height: 100%; object-fit: contain; }
.chapter-content h2 { margin: 0; font-size: 2.1rem; font-weight: 700; color: #1e73be; }
.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/st9ph-ico-sansTxt.png" alt="Logo">
      </a>
      <h2>l'Onglet Détails</h2>
    </div>
    <ul class="chapter-points"><li>Références</li><li>Caractéristiques</li><li>Fichiers joints</li><li>Etat du produit</li><li>Personnalisation</li></ul>
  </div>
</div>
<!-- FIN TITRE CHAPITRE -->



<p>On retrouve ici un certains nombre d'<strong>attributs du produit</strong> qui étaient dans la <strong>section option</strong> dans les versions précédentes. du CMS</p>



<h3 class="wp-block-heading" id="5-21-r%C3%A9f%C3%A9rences-" 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>Références</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" style="flex-basis:33.33%">
<p>Indispensable à votre <strong>gestion de stock,</strong> la référence vous est <strong>donnée par votre fournisseur</strong> et figure <strong>sur l'étiquette de chaque produit</strong>.</p>



<p class="has-text-align-center callout bleu">ℹ️ Sur un produit déclinable, rien ne sert de l'inscrire dans la section détail puisqu'<strong>elle dépendra des déclinaisons </strong>(légèrement différente pour chacune)</p>



<p></p>
</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/01/image-148.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 class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<p>Sinon, on l'aurait saisie ici  👉</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="203" height="79" src="https://st9ph.fr/wp-content/uploads/2026/01/image-149.png" alt="" class="wp-image-32826"/></figure>
</div>
</div>
</div>



<p class="callout rouge">⚠️ Attention, dans cette même zone, aux <strong>codes ISBN, GTIN et MPN</strong> qui sont normés. Vos produits ne passeront pas <strong>les douanes</strong> ou seront <strong>invendables dans certains pays </strong>s'ils ne sont pas renseignés correctement.</p>



<p>🖥️ On ne vous embêtera pas avec cela <strong>à l'épreuve technique</strong> mais pour votre véritable commerce, ce sera important. Pour ceux qui en ont besoin le site <a href="https://www.activebarcode.com/fr/codes/" target="_blank" rel="noreferrer noopener">Active Barecode </a>est très complet à ce sujet.</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">
<p class="has-base-2-background-color has-background">Idem pour <strong>les codes barres</strong> qui sont indispensables à votre CRM de <strong>gestion de stock</strong> et à <strong>l'encaissement </strong>en SVP.</p>



<p>ℹ️ Juste pour info, les <strong>zones de code EAN ou JAN</strong>, c'est aussi ici qu'on les renseigne. 👉</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="415" height="160" src="https://st9ph.fr/wp-content/uploads/2026/01/image-150.png" alt="" class="wp-image-32828" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-150.png 415w, https://st9ph.fr/wp-content/uploads/2026/01/image-150-300x116.png 300w" sizes="auto, (max-width: 415px) 100vw, 415px" /></figure>
</div>
</div>



<h3 class="wp-block-heading" id="6-22-caract%C3%A9ristiques-" 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>Caractéristiques</strong></h3>



<p>C'est ici qu'on peut mettre en valeur certaines spécificités de notre produit. Ca donnera cela dans la section "fiche technique". 👇</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="771" height="127" src="https://st9ph.fr/wp-content/uploads/2026/01/image-152.png" alt="" class="wp-image-32832" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-152.png 771w, https://st9ph.fr/wp-content/uploads/2026/01/image-152-300x49.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-152-768x127.png 768w" sizes="auto, (max-width: 771px) 100vw, 771px" /></figure>



<ul class="wp-block-list">
<li>Cliquez sur <strong>la liste déroulante</strong> des <strong>caractéristiques</strong></li>



<li>Recherchez la valeur "<strong>composition</strong>" et "<strong>cliquez</strong>" dessus</li>



<li>Cliquez sur <strong>la liste déroulante</strong> des <strong>valeurs</strong> de caractéristiques (juste à côté)</li>



<li>Recherchez la valeur "<strong>coton</strong>" et <strong>cliquez </strong>dessus</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" 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/01/image-151.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:33.33%">
<ul class="wp-block-list">
<li>cilquez sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="239" height="53" src="https://st9ph.fr/wp-content/uploads/2026/01/image-153.png" alt="" class="wp-image-32833"/></figure>



<p class="has-text-align-center has-base-2-background-color has-background">⚠️ <strong>On oublie souvent cette dernière étape </strong> et on se retrouve à avoir fait la manipulation pour rien !</p>
</div>
</div>



<p>👀 <strong>Vérifiez</strong> juste en dessous que la caractéristique a bien été<strong> prise en compte</strong> :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="873" height="103" src="https://st9ph.fr/wp-content/uploads/2026/01/image-154.png" alt="" class="wp-image-32834" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-154.png 873w, https://st9ph.fr/wp-content/uploads/2026/01/image-154-300x35.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-154-768x91.png 768w" sizes="auto, (max-width: 873px) 100vw, 873px" /></figure>



<p>C'était<strong> le cas le plus simple </strong>mais il peut arriver que vous ayez besoin  :</p>



<ul class="wp-block-list">
<li>d'une <strong>valeur </strong>qui n'existe pas (dans le sujet, par exemple,  on demande "100 % coton")</li>



<li>d'une <strong>caractéristique </strong>qui n'existe pas</li>
</ul>



<p class="has-medium-font-size">🔵 Saisir une valeur personnalisée</p>



<p>Cest un choix dans la zone valeur comme sur la démo animée ci-dessous :</p>



<figure class="wp-block-video"><video height="284" style="aspect-ratio: 1128 / 284;" width="1128" controls src="https://st9ph.fr/wp-content/uploads/2026/01/Enregistrement-2026-01-15-104641.mp4"></video></figure>



<p></p>



<p class="has-medium-font-size">🔵 Saisir une nouvelle caractéristique</p>



<p><strong>On les confond souvent avec des attributs </strong>(de déclinaisons). <strong>Petit rappel</strong> :</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">
<p class="has-contrast-2-color has-text-color has-link-color wp-elements-b7a415e3122db67a9f821d2bfb6add7b">➡️ Une <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">caractéristique</mark></strong> définit <strong>l'ensemble du produit,</strong> quelles que soient les variantes qu'il comporte.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="446" height="296" src="https://st9ph.fr/wp-content/uploads/2026/01/image-155.png" alt="" class="wp-image-32836" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-155.png 446w, https://st9ph.fr/wp-content/uploads/2026/01/image-155-300x199.png 300w" sizes="auto, (max-width: 446px) 100vw, 446px" /></figure>



<p class="has-text-align-center has-base-2-background-color has-background">Cette chaussure est en cuir, <strong>quelle que soit la pointure choisie</strong>.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>➡️ Un <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">attribut </mark></strong>est <strong>une variante, une déclinaison</strong> d'un même produit (taille, couleur ...)</p>



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



<p class="has-text-align-center has-base-2-background-color has-background"><strong>La couleur </strong>de cette même chaussure <strong>est variable</strong>, c'est donc <strong>un attribut de déclinaison</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>👉 C'est dans <strong>Catalogue </strong>&gt; <strong>Attributs et caractéristiques</strong> &gt; onglet <strong>Caractéristiques </strong>que cela ce passe.</p>



<p></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="556" height="149" src="https://st9ph.fr/wp-content/uploads/2026/01/image-157.png" alt="" class="wp-image-32844" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-157.png 556w, https://st9ph.fr/wp-content/uploads/2026/01/image-157-300x80.png 300w" sizes="auto, (max-width: 556px) 100vw, 556px" /></figure>
</div>
</div>



<p>Imaginons que nous voulions créer une caractéristique "<strong>forme</strong>" pour informer du type de Sweat que nous vendons.</p>



<p class="has-base-2-background-color has-background">😒 Bon, c'est vrai que <strong>ça se voit sur les photos </strong>mais je manque d'inspiration ! A part la compo, je ne vois pas trop ce qu'un vêtement de ce genre peut avoir comme spécificité remarquable. Ca m'apprendra à mieux choisir mes exemples !</p>



<p>🕸️ J'ai <strong>fouillé un peu sur la toile </strong>pour voir, et si on rentre dans cette considération, on voit qu<strong>'il y'a le choix</strong> (et je ne les ai pas toutes mises en illustration) !</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/01/image-159.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 -->



<p>👉 On ne va  pas les faire toutes, gardons juste "Mock" (celle qui nous intéresse), "Square" et "Crowl"</p>



<p class="has-base-2-background-color has-background">🖇️On mettra tout à l'heure <strong>toutes les autres </strong>dans un "<strong>guide des formes</strong>" qu'on <strong>joindra en pdf</strong> au produit.</p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="278" height="33" src="https://st9ph.fr/wp-content/uploads/2026/01/image-158.png" alt="" class="wp-image-32845"/></figure>
</div>



<ul class="wp-block-list">
<li>Indiquer "<strong>Forme</strong>" dans les zones<strong> Nom et Titre</strong></li>



<li>Cliquer sur <strong>Enregistrer</strong></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"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="277" height="63" src="https://st9ph.fr/wp-content/uploads/2026/01/image-160.png" alt="" class="wp-image-32848"/></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>ℹ️ La Zone <strong>URL </strong>et le<strong> bouton radio d'indexation</strong> est spécifique au filtre du <strong>module navigation à facettes </strong>(pas au programme).</p>
</div>
</div>



<p class="has-base-2-background-color has-background">Juste pour les curieux, c'est un moyen d<strong>'améliorer l'url en la rendant différente selon les options </strong>choisies pour le produit. C'est <strong>utile pour les déclinaisons </strong>(meilleur suivi en stats) mais <strong>je ne vois pas l'intérêt pour les caractéristiques</strong>, vu que l<strong>e produit a toujours les mêmes</strong>. Mais il y'en a surement un puisque l'option existe.</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">
<p><strong>Ajoutons </strong>maintenant<strong> des valeurs</strong> :</p>



<ul class="wp-block-list">
<li>Cliquez sur "<strong>Formes</strong>"</li>
</ul>



<p class="has-base-2-background-color has-background">Vous devriez voir <strong>une nouvelle caractéristique</strong> "forme" dans la liste. <em>Elles sont par ordre alphabétique</em>. 👉</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="474" height="275" src="https://st9ph.fr/wp-content/uploads/2026/01/image-161.png" alt="" class="wp-image-32849" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-161.png 474w, https://st9ph.fr/wp-content/uploads/2026/01/image-161-300x174.png 300w" sizes="auto, (max-width: 474px) 100vw, 474px" /></figure>
</div>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="217" height="31" src="https://st9ph.fr/wp-content/uploads/2026/01/image-162.png" alt="" class="wp-image-32850"/></figure>
</div>



<p></p>



<ul class="wp-block-list">
<li>Dans la zone <strong>Valeur</strong>, tapez "<strong>Mock</strong>"</li>
</ul>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="298" height="29" src="https://st9ph.fr/wp-content/uploads/2026/01/image-163.png" alt="" class="wp-image-32852"/></figure>
</div>



<p>➰ <strong>répéter l'opératio</strong>n pour ""<strong>Square</strong>" et "<strong>Crowl</strong>" (sauf que pour le dernier, ce sera seulement "<strong>Enregistrer</strong>")</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="378" height="196" src="https://st9ph.fr/wp-content/uploads/2026/01/image-164.png" alt="" class="wp-image-32853" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-164.png 378w, https://st9ph.fr/wp-content/uploads/2026/01/image-164-300x156.png 300w" sizes="auto, (max-width: 378px) 100vw, 378px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p> 👈 Le résultat si tout c'est bien passé</p>



<p><strong>Retournons </strong>maintenant <strong>à notre fiche produit</strong> pour l'appliquer :</p>



<ul class="wp-block-list">
<li>Catalogue &gt; produit &gt; Magnifique Sweat Panda &gt; <strong>onglet Détails</strong></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%">
<p class="has-text-align-right has-base-2-background-color has-background">Notre caractéristique est présente et <strong>en déroulant la liste des valeurs,</strong> on peut choisir la forme souhaitée.👉</p>



<ul class="wp-block-list">
<li>Cliquez sur "<strong>Mock</strong>"</li>



<li>Cliquez sur "<strong>Ajouter la caractéristique</strong>"</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/01/image-165.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>



<h3 class="wp-block-heading" id="7-23-fichiers-joints-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">2.3 |</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>Fichiers joints</strong></h3>



<p>🖇️ Très utile pour<strong> les notices de montage</strong> ou de prise en main, <strong>les catalogues "hors ligne" </strong>et <strong>les certificats</strong>, la pièce jointe, <strong>téléchargeable sans avoir besoin de commander le produit</strong> peut constituer aussi un élément de <strong>levée de doute,</strong> une <strong>valeur ajoutée</strong> à votre produit.</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:33.33%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p class="has-base-2-background-color has-background">il sera <strong>obligatoirement au format "PDF" </strong>(Portable Document Format") car celui lui assurera<strong> la garantie de pouvoir être ouvert par n'importe quel OS</strong> (Windows, OS X, IOS, Androïd, Linux ...) puis qu'<strong>il est universel</strong>.</p>
</div>
</div>



<p>👉 Nous allons, pour notre part, joindre un PDF du "guide des formes" pour aider nos clients à comprendre ce que le terme "Mock" présent sur notre fiche produit signifie.</p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li><strong>Téléchargez </strong>le guide</li>
</ul>



<div data-wp-interactive="core/file" class="wp-block-file"><object data-wp-bind--hidden="!state.hasPdfPreview" hidden class="wp-block-file__embed" data="https://st9ph.fr/wp-content/uploads/2026/01/guide-des-formes2.pdf" type="application/pdf" style="width:100%;height:200px" aria-label="Contenu embarqué guide-des-formes2."></object><a id="wp-block-file--media-c1c33b4c-2a7c-499a-8a97-b6950361e580" href="https://st9ph.fr/wp-content/uploads/2026/01/guide-des-formes2.pdf">guide-des-formes2</a><a href="https://st9ph.fr/wp-content/uploads/2026/01/guide-des-formes2.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-c1c33b4c-2a7c-499a-8a97-b6950361e580">Télécharger</a></div>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="182" height="44" src="https://st9ph.fr/wp-content/uploads/2026/01/image-166.png" alt="" class="wp-image-32857"/></figure>
</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>renseignez <strong>un nom de fichier</strong> (c'est ce que lira le client)</li>



<li>Entrez éventuellement<strong> une description</strong></li>



<li>Cliquez sur <strong>Parcourir</strong> pour <strong>rechercher le PDF</strong> (que vous aurez préalablement pris le soin de dézipper)</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="590" height="319" src="https://st9ph.fr/wp-content/uploads/2026/01/image-167.png" alt="" class="wp-image-32858" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-167.png 590w, https://st9ph.fr/wp-content/uploads/2026/01/image-167-300x162.png 300w" sizes="auto, (max-width: 590px) 100vw, 590px" /></figure>
</div>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="88" height="30" src="https://st9ph.fr/wp-content/uploads/2026/01/image-168.png" alt="" class="wp-image-32859"/></figure>
</div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="866" height="83" src="https://st9ph.fr/wp-content/uploads/2026/01/image-169.png" alt="" class="wp-image-32860" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-169.png 866w, https://st9ph.fr/wp-content/uploads/2026/01/image-169-300x29.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-169-768x74.png 768w" sizes="auto, (max-width: 866px) 100vw, 866px" /></figure>
</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><strong>En front Office</strong> : vous verrez apparaitre <strong>une section "téléchargement"</strong> sous la fiche technique.</p>



<p class="has-base-2-background-color has-background">Vous pouvez également <strong>fournir un lien dans le descriptif</strong> si vous le souhaitez, ou <strong>indiquer qu'il figure dans la zone "téléchargement"</strong>.</p>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="282" height="203" src="https://st9ph.fr/wp-content/uploads/2026/01/image-170.png" alt="" class="wp-image-32861"/></figure>
</div>
</div>



<h3 class="wp-block-heading" id="8-24-etat-du-produit-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">2.4 |</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>Etat du produit</strong></h3>



<p>Vous pouvez choisir entre trois états : Neuf (par défaut) - Reconditionné et Utilisé.</p>



<p>C'est <strong>assez décevant</strong>, en fait, pour deux raisons :</p>



<ol class="wp-block-list">
<li>cela <strong>n'apparait que dans la zone "détail du produit" </strong>et cela n'empêche pas <strong>le sticker "neuf</strong>" de s'afficher sur la vignette du produit ! Prestashop confond "nouveauté" (de la boutique" et "Neuf").<a href="https://st9ph.fr/prestashop-cas-de-retours-produits/" target="_blank" rel="noreferrer noopener"> Cet article traite de ce sujet </a>(chapitre 3).</li>



<li>"<strong>Utilisé</strong>" sonne bizarre (on devrait dire "<strong>occasion</strong>"). Voyez aussi le lien précédent pour voir <strong>comment modifier les intitulés du modèle</strong>.</li>
</ol>



<p>Bon, tout cela <strong>n'est pas au programme de l'examen</strong> mais sachez que :</p>



<ul class="wp-block-list">
<li>Un <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">produit reconditionné</mark></strong> a été <strong>vérifié par le vendeur</strong>. Il est généralement <strong>accompagné d'une garantie</strong>. </li>



<li>Le<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"> <strong>produit d'occasion</strong></mark><strong>,</strong> lui, est <strong>vendu "dans l'état"</strong>, même si l<strong>e commerçant engage sa responsabilité</strong> s'il n'est pas sincère sur l'état réel du produit.</li>
</ul>



<div>
<h3 class="wp-block-heading" id="9-25-personnalisation-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">2.5 |</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>Personnalisation</strong></h3>
</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="384" height="401" src="https://st9ph.fr/wp-content/uploads/2026/01/image-171.png" alt="" class="wp-image-32862" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-171.png 384w, https://st9ph.fr/wp-content/uploads/2026/01/image-171-287x300.png 287w" sizes="auto, (max-width: 384px) 100vw, 384px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center">Imaginons que nous vendons <strong>un produit personnalisable </strong>comme le T-Shirt de la photo. </p>



<p class="has-text-align-center has-base-2-background-color has-background">C'est ici que cela se passe pour que le client <strong>nous indique quel prénom il veut dessus</strong> (ou autre chose: "Papa", "Papy Louis" ..., ce qu'on veut.</p>



<ul class="wp-block-list">
<li>Cliquer sur "<strong>ajouter un champ de personnalisation</strong>"</li>



<li>Choisissez entre "<strong>Texte</strong>" et "<strong>Fichier</strong>" (si vous voulez leur donner la possibilité d'insérer une image à la place d'un texte.)</li>
</ul>
</div>
</div>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="766" height="131" src="https://st9ph.fr/wp-content/uploads/2026/01/image-172.png" alt="" class="wp-image-32863" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-172.png 766w, https://st9ph.fr/wp-content/uploads/2026/01/image-172-300x51.png 300w" sizes="auto, (max-width: 766px) 100vw, 766px" /></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">
<ul class="wp-block-list">
<li>Renseignez <strong>l'étiquette</strong> que vous souhaitez , ici "<strong><em>Votre prénom :</em></strong>"</li>
</ul>



<p></p>



<p class="has-base-2-background-color has-background">Elle permet de faire comprendre au client qui commande que c'est là qu'il doit l'écrire) comme sur cet aperçu  en front office : 👉</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="523" height="314" src="https://st9ph.fr/wp-content/uploads/2026/01/image-173.png" alt="" class="wp-image-32864" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-173.png 523w, https://st9ph.fr/wp-content/uploads/2026/01/image-173-300x180.png 300w" sizes="auto, (max-width: 523px) 100vw, 523px" /></figure>
</div>
</div>



<p>La personnalisation aura <strong>une incidence sur les délais de livraison habituelle</strong> de nos transporteurs. <strong>Pensez à le préciser</strong>.</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="544" height="266" src="https://st9ph.fr/wp-content/uploads/2026/01/image-174.png" alt="" class="wp-image-32866" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-174.png 544w, https://st9ph.fr/wp-content/uploads/2026/01/image-174-300x147.png 300w" sizes="auto, (max-width: 544px) 100vw, 544px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>rendez vous dans <strong>l'onglet "livraison"</strong></li>



<li>Cliquez sur "<strong>délai spécifique pour ce produit</strong>"</li>



<li><strong>renseignez le délai </strong>que vous garantissez.</li>
</ul>



<p></p>



<p class="has-text-align-center has-base-2-background-color has-background">😒 Vous allez <strong>engendrer du mécontentement</strong> si vous omettez cette précision !</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">
<ul class="wp-block-list">
<li>Pensez bien aussi à choisir au moins "<strong>My Career</strong>" (pour l'examen) mais<strong> le mieux et de les cochez tous </strong>(ou d'utliser le bouton "tous les transporteurs"</li>
</ul>



<p></p>



<p>On obtiendra <strong>ce résultat dans le tunnel d'achat </strong>(mais précisez le quand même dans le Summary /  Récapitulatif pour éviter les déceptions (et, donc, les abandons de panier). 👇</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="583" height="243" src="https://st9ph.fr/wp-content/uploads/2026/01/image-175.png" alt="" class="wp-image-32868" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-175.png 583w, https://st9ph.fr/wp-content/uploads/2026/01/image-175-300x125.png 300w" sizes="auto, (max-width: 583px) 100vw, 583px" /></figure>
</div>
</div>



<p>Dès <strong>le bouton ajout au panier</strong> :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="573" height="116" src="https://st9ph.fr/wp-content/uploads/2026/01/image-177.png" alt="" class="wp-image-32870" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-177.png 573w, https://st9ph.fr/wp-content/uploads/2026/01/image-177-300x61.png 300w" sizes="auto, (max-width: 573px) 100vw, 573px" /></figure>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-3282d99eaaa85ef2eb18c9b0ff69fd77" id="10-3%EF%B8%8F%E2%83%A3-d%C3%A9clinaisons">3️⃣| Déclinaisons</h2>


<div class="wp-block-ub-table-of-contents-block ub_table-of-contents" id="ub_table-of-contents-d0bed57b-3d6d-4b01-8ade-df47b08d04d8" data-linktodivider="false" data-showtext="show" data-hidetext="hide" data-scrolltype="auto" data-enablesmoothscroll="false" data-initiallyhideonmobile="false" data-initiallyshow="true"><div class="ub_table-of-contents-header-container" style="">
			<div class="ub_table-of-contents-header" style="text-align: left; ">
				<div class="ub_table-of-contents-title" style=""></div>
				
			</div>
		</div><div class="ub_table-of-contents-extra-container" style="">
			<div class="ub_table-of-contents-container ub_table-of-contents-1-column ">
				<ul style=""><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#0-11-l-es-visuels-du-produit-" style="">🔹1.1 |les visuels du produit</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#1-12-r%C3%A9capitulatif-amp-description-" style="">🔹1.2 |Récapitulatif &amp; Description</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#2-13-cat%C3%A9gories-" style="">🔹1.3 |Catégories</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#3-14-marque-" style="">🔹1.4 |Marque</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#4-15-produits-associ%C3%A9s-" style="">🔹1.5 |Produits associés</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#5-21-r%C3%A9f%C3%A9rences-" style="">🔹2.1 |Références</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#6-22-caract%C3%A9ristiques-" style="">🔹2.2 |Caractéristiques</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#7-23-fichiers-joints-" style="">🔹2.3 |Fichiers joints</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#8-24-etat-du-produit-" style="">🔹2.4 |Etat du produit</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#9-25-personnalisation-" style="">🔹2.5 |Personnalisation</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#11-3-1-cr%C3%A9er-une-valeur-ou-tout-un-attribut-de-d%C3%A9clinaison-" style="">3-1 | créer une valeur ou tout un attribut de déclinaison</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#12-3-2-g%C3%A9n%C3%A9rer-et-param%C3%A9trer-les-d%C3%A9clinaison-s" style="">3-2 | Générer et paramétrer les déclinaisons</a></li></ul>
			</div>
		</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%">
<p>Un produit déclinable, c'est :</p>



<ul class="wp-block-list">
<li><strong>des visuels à répartir</strong> selon les déclinaisons</li>



<li>des<strong> références spécifiques pour chaque</strong> déclinaison</li>



<li>Des<strong> stocks à définir </strong>pour chaque déclinaison</li>



<li>parfois <strong>des attributs</strong> de valeurs et / ou des déclinaisons <strong>à créer</strong></li>



<li>Parfois <strong>des impacts sur le prix</strong> (ceux à options ou de plus grand gabarit étant forcément<strong> plus onéreux</strong>)</li>
</ul>



<p></p>



<p class="has-base-2-background-color has-background">On a de la chance pour ce produit, on a juste les <strong>visuels</strong> à répartir, les <strong>stocks</strong>, les <strong>références </strong>et la <strong>couleur </strong>Camel<strong> à créer </strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="512" height="527" src="https://st9ph.fr/wp-content/uploads/2026/01/image-178.png" alt="" class="wp-image-32872" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-178.png 512w, https://st9ph.fr/wp-content/uploads/2026/01/image-178-291x300.png 291w" sizes="auto, (max-width: 512px) 100vw, 512px" /></figure>



<p>👉 On a même <strong>une image </strong>qui sera <strong>dans les deux couleurs</strong>, celles avec les deux jeunes femmes.</p>
</div>
</div>



<p>➡️ Commençons par <strong>créer la valeur de couleur </strong>qui nous manque</p>



<h3 class="wp-block-heading" id="11-3-1-cr%C3%A9er-une-valeur-ou-tout-un-attribut-de-d%C3%A9clinaison-">3-1 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">créer une valeur ou tout un attribut de déclinaison</mark></h3>



<p class="has-medium-font-size">🔵 Une valeur dans un attribut déjà existant</p>



<ul class="wp-block-list">
<li>Catalogue &gt;<strong> Attributs et caractéristiques </strong></li>
</ul>



<p>👉 (restez sur l'onglet "<strong>Attributs</strong>") </p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li> cliquez sur <strong>Couleurs </strong>&gt;</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="157" height="29" src="https://st9ph.fr/wp-content/uploads/2026/01/image-180.png" alt="" class="wp-image-32876" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-180.png 157w, https://st9ph.fr/wp-content/uploads/2026/01/image-180-150x29.png 150w" sizes="auto, (max-width: 157px) 100vw, 157px" /></figure>
</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">
<!-- 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/01/image-181.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>Donnez un nom à votre nouvelle couleur (pour nous "Camel")</li>



<li>Cliquez sur le symbole couleur pour obtenir le nuancier</li>



<li>définissez votre couleur</li>
</ul>



<p></p>



<p class="has-base-2-background-color has-background">Pour nous, c'est une sorte de marron. Mais "Camel", ça fait mieux. Si vous n'êtes pas inspiré(e), vous pouvez<strong> jouer sur la gamme chromatique RGB</strong> (Red, Green, Blue) et faire comme moi<strong> (193, 154, 107)</strong> <strong>en tapant</strong> directement <strong>les valeurs dans les cases</strong>.</p>



<p></p>
</div>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="88" height="30" src="https://st9ph.fr/wp-content/uploads/2026/01/image-168.png" alt="" class="wp-image-32859"/></figure>
</div>



<p class="has-medium-font-size">🔵 un attribut de déclinaison</p>



<p>On peut aussi être amené à <strong>créer un nouvel attribut</strong></p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Attributs et Caractéristiques &gt; (onglet)<strong> attributs</strong></li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="202" height="26" src="https://st9ph.fr/wp-content/uploads/2026/01/image-182.png" alt="" class="wp-image-32880"/></figure>
</div>



<p>Il y'a t<strong>rois types d'attributs</strong> :</p>



<ul class="wp-block-list">
<li>les<strong> listes déroulantes</strong> (pour des valeurs nombreuses comme nos tailles)</li>



<li>les<strong> images ou textures </strong>(pour les couleurs ou les valeurs qu'il est plus facile de visualiser que de décrire)</li>



<li>Le<strong> bouton radio </strong>(dit aussi bouléen : oui / non, avec / sans, portrait / paysage ...)</li>
</ul>


<div class="ub-styled-box ub-number-box wp-block-ub-styled-box" id="ub-styled-box-1e086111-43da-445d-9278-99e504a23ce8">
<div class="ub-number-panel" style="border-color: #000000; " id="ub-styled-box-numbered-box-column-5b330180-fdbd-4fb9-b092-db932bd31e99">
			<div class="ub-number-container" style="background-color: #adcbe6; ">
				<p class="ub-number-display" style="color: #000000; ">1</p>
			</div>
			<p class="ub-number-box-title" style="text-align: center; ">listes déroulantes</p>
			<div class="ub-number-box-body" style="text-align: left; ">

<p class="has-text-align-center">pour des <strong>valeurs nombreuses </strong>(comme nos tailles ou des pointures)</p>



<figure class="wp-block-video"><video height="278" style="aspect-ratio: 474 / 278" width="474" autoplay loop muted src="https://st9ph.fr/wp-content/uploads/2026/01/liste.mp4" playsinline></video></figure>

</div>
		</div>

<div class="ub-number-panel" style="border-color: #000000; " id="ub-styled-box-numbered-box-column-37e55bba-c7c4-44ee-86b4-14227aaf24ff">
			<div class="ub-number-container" style="background-color: #adcbe6; ">
				<p class="ub-number-display" style="color: #000000; ">2</p>
			</div>
			<p class="ub-number-box-title" style="text-align: center; ">Couleurs ou textures</p>
			<div class="ub-number-box-body" style="text-align: left; ">

<p class="has-text-align-center">pour <strong>les couleurs </strong>ou les valeurs <strong>qu'il est plus facile de visualiser</strong> que de décrire</p>



<figure class="wp-block-video"><video height="90" style="aspect-ratio: 182 / 90" width="182" autoplay loop muted src="https://st9ph.fr/wp-content/uploads/2026/01/couleurs.mp4" playsinline></video></figure>

</div>
		</div>

<div class="ub-number-panel" style="border-color: #000000; " id="ub-styled-box-numbered-box-column-20e5a8d8-3154-4de4-8a5a-66fa4bf991ed">
			<div class="ub-number-container" style="background-color: #adcbe6; ">
				<p class="ub-number-display" style="color: #000000; ">3</p>
			</div>
			<p class="ub-number-box-title" style="text-align: center; ">Bouton radio</p>
			<div class="ub-number-box-body" style="text-align: left; ">

<p class="has-text-align-center">dit aussi bouléen quand c'est <strong>l'un ou l'autre </strong> : oui / non, avec / sans, portrait / paysage ...</p>



<figure class="wp-block-video"><video height="76" style="aspect-ratio: 262 / 76" width="262" autoplay loop muted src="https://st9ph.fr/wp-content/uploads/2026/01/radioBouton.mp4" playsinline></video></figure>

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


<p>🔵 Cas des textures dans une déclinaison "Couleurs et textures"</p>



<p>Il faudra prévoir des <strong>images petites</strong>, telles des icones (<strong>idéalement, 150 x 150 pixels</strong>)</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/01/image-186-1024x250.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 -->



<p>🖥️ Vous avez <strong>2 exemples</strong><a href="https://st9ph.fr/exos-prestashop/" target="_blank" rel="noreferrer noopener"> sur la page des exercices</a> : le <strong>pull marin homme</strong> et le <strong>cadre Panda</strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="567" height="116" src="https://st9ph.fr/wp-content/uploads/2026/01/image-187.png" alt="" class="wp-image-32888" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-187.png 567w, https://st9ph.fr/wp-content/uploads/2026/01/image-187-300x61.png 300w" sizes="auto, (max-width: 567px) 100vw, 567px" /></figure>



<p class="has-medium-font-size">👇🏻 Voir ces produits finis dans la boutique pédagogique :</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>
.ps-product-card { background: #fff; border: 1px solid #e7e7e7; border-radius: 4px; width: 100%; max-width: 300px; margin: 20px auto; font-family: 'Segoe UI', sans-serif; transition: box-shadow 0.3s ease; position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.ps-product-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.ps-product-image-wrapper { position: relative; width: 100%; padding-top: 100%; overflow: hidden; background: #f5f5f5; }
.ps-product-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.ps-product-card:hover .ps-product-image { transform: scale(1.05); }
.ps-wishlist-icon { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.8); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.ps-wishlist-icon svg { width: 20px; height: 20px; fill: #7a7a7a; transition: fill 0.2s; }
.ps-wishlist-icon:hover { background: #fff; transform: scale(1.1); }
.ps-wishlist-icon:hover svg { fill: #ff4848; }
.ps-product-rating { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; z-index: 2; background: rgba(0,0,0,0.4); padding: 4px 8px; border-radius: 20px; }
.ps-star { color: #ffd700; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ps-product-content { padding: 15px; text-align: center; background: #fff; }
.ps-product-name { font-size: 15px; color: #333; margin: 0 0 10px 0; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 42px; }
.ps-product-price { font-size: 18px; font-weight: 700; color: #25B9D7; margin: 0 0 15px 0; }
.ps-product-btn { background-color: #25B9D7; color: #fff; border: none; padding: 10px 15px; border-radius: 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; text-decoration: none; box-sizing: border-box; }
.ps-product-btn:hover { background-color: #1fa3c0; color: #fff; }
.ps-product-btn svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 768px) { .ps-product-card { max-width: 100%; } }
</style>
<!-- DÉBUT VIGNETTE PRODUIT -->
<a href="https://boutiq.st9ph.fr/30-82-pull-marin-homme.html#/1-taille-s/44-rayures-banc_bleu" target="_blank" class="ps-product-card">
    <div class="ps-product-image-wrapper">
        <img decoding="async" src="https://boutiq.st9ph.fr/60-product_main/pull-marin-homme.jpg" alt="Pull marin homme" class="ps-product-image">
        <div class="ps-wishlist-icon" title="Ajouter aux favoris" onclick="event.preventDefault(); event.stopPropagation(); alert('Fonctionnalité liste d\'envie à connecter.');">
            <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
        </div>
        <div class="ps-product-rating">
            <span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span>
        </div>
    </div>
    <div class="ps-product-content">
        <h3 class="ps-product-name">Pull marin homme</h3>
        <div class="ps-product-price">24,50 €</div>
        <div class="ps-product-btn">
            Voir dans la boutique
            <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
        </div>
    </div>
</a>
<!-- FIN VIGNETTE PRODUIT -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<style>
.ps-product-card { background: #fff; border: 1px solid #e7e7e7; border-radius: 4px; width: 100%; max-width: 300px; margin: 20px auto; font-family: 'Segoe UI', sans-serif; transition: box-shadow 0.3s ease; position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.ps-product-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.ps-product-image-wrapper { position: relative; width: 100%; padding-top: 100%; overflow: hidden; background: #f5f5f5; }
.ps-product-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.ps-product-card:hover .ps-product-image { transform: scale(1.05); }
.ps-wishlist-icon { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.8); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.ps-wishlist-icon svg { width: 20px; height: 20px; fill: #7a7a7a; transition: fill 0.2s; }
.ps-wishlist-icon:hover { background: #fff; transform: scale(1.1); }
.ps-wishlist-icon:hover svg { fill: #ff4848; }
.ps-product-rating { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; z-index: 2; background: rgba(0,0,0,0.4); padding: 4px 8px; border-radius: 20px; }
.ps-star { color: #ffd700; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ps-product-content { padding: 15px; text-align: center; background: #fff; }
.ps-product-name { font-size: 15px; color: #333; margin: 0 0 10px 0; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 42px; }
.ps-product-price { font-size: 18px; font-weight: 700; color: #25B9D7; margin: 0 0 15px 0; }
.ps-product-btn { background-color: #25B9D7; color: #fff; border: none; padding: 10px 15px; border-radius: 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; text-decoration: none; box-sizing: border-box; }
.ps-product-btn:hover { background-color: #1fa3c0; color: #fff; }
.ps-product-btn svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 768px) { .ps-product-card { max-width: 100%; } }
</style>
<!-- DÉBUT VIGNETTE PRODUIT -->
<a href="https://boutiq.st9ph.fr/29-74-cadre-panda.html#/42-cadre-bois" target="_blank" class="ps-product-card">
    <div class="ps-product-image-wrapper">
        <img decoding="async" src="https://boutiq.st9ph.fr/59-product_main/cadre-panda.jpg" alt="Cadre Panda" class="ps-product-image">
        <div class="ps-wishlist-icon" title="Ajouter aux favoris" onclick="event.preventDefault(); event.stopPropagation(); alert('Fonctionnalité liste d\'envie à connecter.');">
            <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
        </div>
        <div class="ps-product-rating">
            <span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span>
        </div>
    </div>
    <div class="ps-product-content">
        <h3 class="ps-product-name">Cadre Panda</h3>
        <div class="ps-product-price">9,50 €</div>
        <div class="ps-product-btn">
            Voir dans la boutique
            <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
        </div>
    </div>
</a>
<!-- FIN VIGNETTE PRODUIT -->
</div>
</div>



<p>➡️ Nous allons pouvoir maintenant <strong>générer nos déclinaisons</strong></p>



<h3 class="wp-block-heading" id="12-3-2-g%C3%A9n%C3%A9rer-et-param%C3%A9trer-les-d%C3%A9clinaison-s">3-2 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Générer et paramétrer les déclinaison</mark>s</h3>



<p><strong>Il nous en faut 8</strong> en fait (2 couleurs x 4 tailles)</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/01/image-179.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 -->



<p>Sur le schéma ci-dessus, j'ai défini <strong>une référence qui varie d'une lettre</strong> à chaque déclinaison <strong>(la taille + l'initiale de la couleur</strong>) et j'ai relié les images à chaque déclinaison pour ne pas en oublier. C'est mon pense-bête !</p>



<p class="has-base-2-background-color has-background">ℹ️ Dans la réalité, on recopiera juste <strong>celles données par le fournisseur</strong> mais lors de l'épreuve, ce sera <strong>à vous d'en inventer</strong>.</p>



<p class="has-medium-font-size">🔵Générer les déclinaisons</p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="158" height="35" src="https://st9ph.fr/wp-content/uploads/2026/01/image-188.png" alt="" class="wp-image-32891"/></figure>
</div>



<ul class="wp-block-list">
<li>Générer les déclinaisons en choisissant à la fois<strong> les attributs de couleurs </strong>et <strong>de taille</strong> comme dans la vidéo ci-dessous :</li>
</ul>



<figure class="wp-block-video"><video height="622" style="aspect-ratio: 918 / 622;" width="918" controls src="https://st9ph.fr/wp-content/uploads/2026/01/decli.mp4"></video></figure>



<p>Pour l'instant, <strong>toutes s'affichent avec la même vignette Camel</strong> mais, pas de panique, on va arranger cela :</p>



<p class="has-medium-font-size">🔵Paramétrer les déclinaisons</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">
<ul class="wp-block-list">
<li>Cliquez sur <strong>la case à cocher </strong>à côté de (8/8) pour <strong>sélectionner toutes les déclinaisons</strong></li>



<li>Cliquez sur "<strong>actions groupées</strong>" ("bulk actions" sur mon aperçu, mon CMS est en anglais)</li>



<li>Choisissez "<strong>modifier 8 déclinaisons"</strong></li>
</ul>



<p></p>
</div>



<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/01/image-189.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>Vous arrivez sur un panneau où vous allez pouvoir faire des réglages directement sur les 8 :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="831" height="460" src="https://st9ph.fr/wp-content/uploads/2026/01/image-190.png" alt="" class="wp-image-32893" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-190.png 831w, https://st9ph.fr/wp-content/uploads/2026/01/image-190-300x166.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-190-768x425.png 768w" sizes="auto, (max-width: 831px) 100vw, 831px" /></figure>



<ul class="wp-block-list">
<li>Cliquez sur <strong>Stocks</strong></li>



<li>Activez le bouton radio des "<strong>Modifier la quantité</strong>"</li>



<li>Saisir "<strong>10</strong>" (ou utiliser le sélecteur mais c'est plus long)</li>



<li>👀 Contrôlez l'affichage  0 -&gt; <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">10</mark></li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="829" height="149" src="https://st9ph.fr/wp-content/uploads/2026/01/image-191.png" alt="" class="wp-image-32894" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-191.png 829w, https://st9ph.fr/wp-content/uploads/2026/01/image-191-300x54.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-191-768x138.png 768w" sizes="auto, (max-width: 829px) 100vw, 829px" /></figure>



<ul class="wp-block-list">
<li>Cliquer sur <strong>"Appliquer à 8 déclinaisons</strong>"</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="801" height="228" src="https://st9ph.fr/wp-content/uploads/2026/01/image-192.png" alt="" class="wp-image-32895" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-192.png 801w, https://st9ph.fr/wp-content/uploads/2026/01/image-192-300x85.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-192-768x219.png 768w" sizes="auto, (max-width: 801px) 100vw, 801px" /></figure>



<ul class="wp-block-list">
<li>Cliquer sur <strong>"Fermer</strong>"</li>
</ul>



<p>Pour les images, on va faire pareil mais en deux temps :</p>



<ul class="wp-block-list">
<li>Cliquez sur la<strong> case à cocher </strong>à côté des<strong> 4 déclinaisons Camel</strong> (une sur deux)</li>



<li>Cliquez sur "<strong>actions groupées</strong>" </li>



<li>Choisissez "<strong>modifier 4 déclinaisons</strong>"</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="822" height="296" src="https://st9ph.fr/wp-content/uploads/2026/01/image-193.png" alt="" class="wp-image-32896" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-193.png 822w, https://st9ph.fr/wp-content/uploads/2026/01/image-193-300x108.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-193-768x277.png 768w" sizes="auto, (max-width: 822px) 100vw, 822px" /></figure>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="213" height="30" src="https://st9ph.fr/wp-content/uploads/2026/01/image-194.png" alt="" class="wp-image-32897"/></figure>
</div>



<ul class="wp-block-list">
<li><strong>Renouveler l'opération avec les 4 noires</strong></li>
</ul>



<p>👉 Le résultat est maintenant <strong>plus visuel</strong></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/01/image-196.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><strong>Modifiez les références</strong> selon votre souhait (pour moi SWPANDA + Taille + initiale couleur)</li>
</ul>



<p class="has-base-2-background-color has-background">👀 Vous avez du remarquer la zone <strong>"impact sur le prix</strong>". C'est là que vous allez<strong> entrer la différence</strong> de prix  (<mark style="background-color:rgba(0, 0, 0, 0);color:#b52828" class="has-inline-color">et non pas le nouveau prix</mark>) <strong>en Hors Taxes</strong>, de <strong>certaines déclinaisons</strong> (avec ou sons tiroir, plaqué or ou or massif ...) <strong>par rapport aux autres</strong>.</p>



<p><strong>Notre produit actuel n'en a pas besoin</strong>, toutes les déclinaisons seront au même prix, quelles que soient la taille et la couleur du Sweat</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">
<p class="has-text-align-center"><strong>Notre fiche produit</strong> commence à prendre forme !</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="490" height="490" src="https://st9ph.fr/wp-content/uploads/2026/01/image-200.png" alt="" class="wp-image-32903" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-200.png 490w, https://st9ph.fr/wp-content/uploads/2026/01/image-200-300x300.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-200-150x150.png 150w" sizes="auto, (max-width: 490px) 100vw, 490px" /></figure>



<p class="has-text-align-center">La voir sur votre mobile en <strong>flashant le QR </strong>code ou <a href="https://boutiq.st9ph.fr/32-90-magnifique-sweat-panda.html#/1-taille-s/12-couleur-camel" target="_blank" rel="noreferrer noopener">dans un nouvel onglet</a></p>
</div>



<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/01/image-197.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>On voit <strong>le sélecteur de tailles </strong>dans la fiche produit (et pas sur la vignette d'aperçu)</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="479" height="167" src="https://st9ph.fr/wp-content/uploads/2026/01/image-198.png" alt="" class="wp-image-32901" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-198.png 479w, https://st9ph.fr/wp-content/uploads/2026/01/image-198-300x105.png 300w" sizes="auto, (max-width: 479px) 100vw, 479px" /></figure>



<p>On voit aussi les que <strong>les images</strong> ont bien été filtrées :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="409" height="155" src="https://st9ph.fr/wp-content/uploads/2026/01/image-199.png" alt="" class="wp-image-32902" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-199.png 409w, https://st9ph.fr/wp-content/uploads/2026/01/image-199-300x114.png 300w" sizes="auto, (max-width: 409px) 100vw, 409px" /></figure>
</div>
</div>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-f4678328e511a1a50ed46db4b2c5f28e" id="13-4%EF%B8%8F%E2%83%A3-livraison">4️⃣| Livraison</h2>



<p>C'est ici qu'on peut paramétrer les <strong>conditions d'expédition</strong>, les <strong>délais </strong>ou <strong>surcouts </strong>éventuels, le <strong>choix des transporteurs </strong>...</p>



<p class="has-base-2-background-color has-background">🤨<strong> Pourquoi choisir un transporteur plus qu'un autre </strong>? Déjà, parce que certains d'entre eux ne livreront pas dans <strong>certains périmètres</strong> (DOM, international hors UE ...), <strong>certaines marchandises </strong>(comme celles qui sont encombrantes ou qui nécessitent un camion frigorifiques) ou parce que <strong>leurs tarifs sont moins avantageux</strong> pour certaine gammes de produits (c'est souvent une question logistique de proximité des dépôts).</p>



<p>Ci-dessous, les dimensions et poids d'un produit serviront à ceux de vos transporteurs qui vous <strong>facturent au volume ou au poids</strong> :</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="153" src="https://st9ph.fr/wp-content/uploads/2026/01/image-201-1024x153.png" alt="" class="wp-image-32916" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-201-1024x153.png 1024w, https://st9ph.fr/wp-content/uploads/2026/01/image-201-300x45.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-201-768x115.png 768w, https://st9ph.fr/wp-content/uploads/2026/01/image-201.png 1099w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>On a vu aussi plus haut que <strong>des délais spécifiques</strong> pouvaient s'appliquer dans certains cas (personnalisation, encombrement ...)</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="544" height="266" src="https://st9ph.fr/wp-content/uploads/2026/01/image-174.png" alt="" class="wp-image-32866" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-174.png 544w, https://st9ph.fr/wp-content/uploads/2026/01/image-174-300x147.png 300w" sizes="auto, (max-width: 544px) 100vw, 544px" /></figure>



<p class="has-base-2-background-color has-background">👉 Pensez aussi à <strong>définir le délai quand le produit est épuisé</strong> (si vous autorisez la commande avec un stock à zéro). Cela dépendra de <strong>votre roulement</strong> pour les produits qui sont <strong>réapprovisionnés avec une régularité fiable</strong>.</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="372" height="266" src="https://st9ph.fr/wp-content/uploads/2026/01/image-202.png" alt="" class="wp-image-32919" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-202.png 372w, https://st9ph.fr/wp-content/uploads/2026/01/image-202-300x215.png 300w" sizes="auto, (max-width: 372px) 100vw, 372px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Certains transporteurs appliqueront <strong>des frais supplémentaires </strong>pour certains produits (par rapport à leurs tarifs habituels)</p>



<p class="has-base-2-background-color has-background">📦 Hors encombrement et poids définis plus hauts et calculés en fonction de leur importance, il peut s'agir de produits dont le <strong>conditionnement </strong>est <strong>plus délicat </strong>(fragile) ou qui sollicitent <strong>un circuit de réapprovisionnement plus ardu</strong> (sur commande, dépôts plus lointains ...).</p>



<p></p>
</div>
</div>



<p>On verra comment <strong>paramétrer les transporteurs </strong>dans l'article qui traite de la 2nd partie de l'évaluation.</p>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-11de8b76a412644aba43c7a5dde993e1" id="14-5%EF%B8%8F%E2%83%A3-prix">5️⃣| Prix</h2>


<div class="wp-block-ub-table-of-contents-block ub_table-of-contents" id="ub_table-of-contents-c3b43b4c-f98d-4571-9d75-b3c849ca9641" data-linktodivider="false" data-showtext="show" data-hidetext="hide" data-scrolltype="auto" data-enablesmoothscroll="false" data-initiallyhideonmobile="false" data-initiallyshow="true"><div class="ub_table-of-contents-header-container" style="">
			<div class="ub_table-of-contents-header" style="text-align: left; ">
				<div class="ub_table-of-contents-title" style=""></div>
				
			</div>
		</div><div class="ub_table-of-contents-extra-container" style="">
			<div class="ub_table-of-contents-container ub_table-of-contents-1-column ">
				<ul style=""><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#0-11-l-es-visuels-du-produit-" style="">🔹1.1 |les visuels du produit</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#1-12-r%C3%A9capitulatif-amp-description-" style="">🔹1.2 |Récapitulatif &amp; Description</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#2-13-cat%C3%A9gories-" style="">🔹1.3 |Catégories</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#3-14-marque-" style="">🔹1.4 |Marque</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#4-15-produits-associ%C3%A9s-" style="">🔹1.5 |Produits associés</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#5-21-r%C3%A9f%C3%A9rences-" style="">🔹2.1 |Références</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#6-22-caract%C3%A9ristiques-" style="">🔹2.2 |Caractéristiques</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#7-23-fichiers-joints-" style="">🔹2.3 |Fichiers joints</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#8-24-etat-du-produit-" style="">🔹2.4 |Etat du produit</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#9-25-personnalisation-" style="">🔹2.5 |Personnalisation</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#15-5-1-les-taux-de-tva-que-vous-devez-connaitre-" style="">5-1 | Les taux de TVA que vous devez connaitre</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#16-5-2-etablissement-du-prix-normal-" style="">5-2 | Etablissement du prix normal</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#17-5-3-etablissement-dun-prix-sp%C3%A9cifique-promo-" style="">5-3 | Etablissement d'un prix spécifique (promo)</a></li></ul>
			</div>
		</div></div>


<h3 class="wp-block-heading" id="15-5-1-les-taux-de-tva-que-vous-devez-connaitre-">5-1 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"><strong>Les taux de TVA </strong>que vous devez connaitre</mark></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"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" decoding="async" width="289" height="411" src="https://st9ph.fr/wp-content/uploads/2026/01/tva20.png" alt="" class="wp-image-32920" style="aspect-ratio:0.7031777339469647;width:136px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/01/tva20.png 289w, https://st9ph.fr/wp-content/uploads/2026/01/tva20-211x300.png 211w" sizes="auto, (max-width: 289px) 100vw, 289px" /></figure>
</div>


<p class="has-small-font-size"><a href="http://www.legifrance.gouv.fr/affichCode.do?idSectionTA=LEGISCTA000006191854&amp;cidTexte=LEGITEXT000006069577" target="_blank" rel="noreferrer noopener">art. 278 du code général des impôts</a></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center"> la <strong>majorité des ventes de biens et des prestations de services</strong> : il s'applique à <strong>tous les produits</strong> ou services <strong>pour lesquels</strong> aucun <strong>autre taux n'est expressément prévu.</strong></p>



<p class="has-text-align-center has-text-color has-link-color wp-elements-cecc40fcda85dfe679047d6528f4ae65" style="color:#b72c2c">C'est <strong>le taux par défaut </strong>de vos produits si vous ne changez pas.</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="1024" height="1024" src="https://st9ph.fr/wp-content/uploads/2026/01/boutiq2.jpg" alt="" class="wp-image-32365" srcset="https://st9ph.fr/wp-content/uploads/2026/01/boutiq2.jpg 1024w, https://st9ph.fr/wp-content/uploads/2026/01/boutiq2-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2026/01/boutiq2-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2026/01/boutiq2-768x768.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></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"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" decoding="async" width="289" height="411" src="https://st9ph.fr/wp-content/uploads/2026/01/tva10.png" alt="" class="wp-image-32921" style="aspect-ratio:0.7031777339469647;width:133px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/01/tva10.png 289w, https://st9ph.fr/wp-content/uploads/2026/01/tva10-211x300.png 211w" sizes="auto, (max-width: 289px) 100vw, 289px" /></figure>
</div>


<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-small-font-size"><a href="http://www.legifrance.gouv.fr/affichCodeArticle.do;jsessionid=233F38C0A735CAA6C8313B23DDDADCF6.tpdjo14v_1?idArticle=LEGIARTI000026295994&amp;cidTexte=LEGITEXT000006069577">art. 278 bis</a>,&nbsp;<a href="https://www.legifrance.gouv.fr/affichCodeArticle.do;jsessionid=1992169D74B4352D3290592B22D76AB1.tpdila12v_3?idArticle=LEGIARTI000026950047&amp;cidTexte=LEGITEXT000006069577">278 quater</a>,&nbsp;<a href="https://www.legifrance.gouv.fr/affichCodeArticle.do;jsessionid=1992169D74B4352D3290592B22D76AB1.tpdila12v_3?idArticle=LEGIARTI000030021766&amp;cidTexte=LEGITEXT000006069577">278 sexies A</a>,&nbsp;<a href="https://www.legifrance.gouv.fr/affichCodeArticle.do;jsessionid=1992169D74B4352D3290592B22D76AB1.tpdila12v_3?idArticle=LEGIARTI000030022042&amp;cidTexte=LEGITEXT000006069577">278 septies</a>&nbsp;et&nbsp;<a href="https://www.legifrance.gouv.fr/affichCodeArticle.do;jsessionid=1992169D74B4352D3290592B22D76AB1.tpdila12v_3?idArticle=LEGIARTI000030061519&amp;cidTexte=LEGITEXT000006069577">art. 279</a>&nbsp;du CGI</p>
</div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center"><strong> produits agricoles</strong> non transformés,  <strong>bois de chauffage</strong>, <strong>travaux d'amélioration du logement </strong>qui ne bénéficient pas du taux de 5,5%, certaines <strong>prestations de logement </strong>et de <strong>camping</strong>,  <strong>foires et salons</strong>,<strong> jeux et manèges forains,</strong> droits d'entrée des <strong>musées</strong>, <strong>zoo</strong>, <strong>monuments</strong>, <strong> transports de voyageurs</strong>, traitement des <strong>déchets</strong>, à la <strong>restauration</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="605" height="643" src="https://st9ph.fr/wp-content/uploads/2025/12/image-88.png" alt="" class="wp-image-31705" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-88.png 605w, https://st9ph.fr/wp-content/uploads/2025/12/image-88-282x300.png 282w" sizes="auto, (max-width: 605px) 100vw, 605px" /></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"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" decoding="async" width="289" height="411" src="https://st9ph.fr/wp-content/uploads/2026/01/tva55.png" alt="" class="wp-image-32922" style="aspect-ratio:0.7031777339469647;width:133px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/01/tva55.png 289w, https://st9ph.fr/wp-content/uploads/2026/01/tva55-211x300.png 211w" sizes="auto, (max-width: 289px) 100vw, 289px" /></figure>
</div>


<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-small-font-size"><a href="https://www.legifrance.gouv.fr/affichCode.do;jsessionid=F1C0E67036CEC46A7C83A57171EECC55.tpdila19v_1?idSectionTA=LEGISCTA000006191654&amp;cidTexte=LEGITEXT000006069577">art. 278-0 bis et 278-0 bis A</a>,&nbsp;<a href="https://www.legifrance.gouv.fr/affichCodeArticle.do;jsessionid=05D76B03D109DDE0203827B845EEB959.tpdila19v_1?idArticle=LEGIARTI000033810507&amp;cidTexte=LEGITEXT000006069577">art. 278 sexies</a>&nbsp;du CGI</p>
</div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center"><strong> produits alimentaires </strong>(sans alcool)<strong>,</strong>  produits de <strong>protection hygiénique</strong>, <strong>équipements et services pour handicapés, livres</strong> sur tout support, abonnements <strong>gaz et électricité</strong>, fourniture de chaleur issue d’<strong>énergies renouvelables</strong>, fourniture de <strong>repas dans les cantines </strong>scolaires, billetterie de <strong>spectacle </strong>vivant et de <strong>cinéma</strong>, certains <strong>travaux </strong>d’amélioration de la qualité <strong>énergétique</strong>,<strong> logements sociaux</strong>, <strong>accession à la propriété.</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="1024" height="1024" src="https://st9ph.fr/wp-content/uploads/2026/01/pack6.jpg" alt="" class="wp-image-32924" srcset="https://st9ph.fr/wp-content/uploads/2026/01/pack6.jpg 1024w, https://st9ph.fr/wp-content/uploads/2026/01/pack6-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2026/01/pack6-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2026/01/pack6-768x768.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</div>
</div>



<p>Pour être complet, il existe aussi un&nbsp;<strong>taux particulier</strong>&nbsp;de&nbsp;<strong>2,1 %</strong>&nbsp;(<a href="http://www.legifrance.gouv.fr/affichCode.do?idSectionTA=LEGISCTA000006191656&amp;cidTexte=LEGITEXT000006069577">art. 281 quater et suivants du CGI</a>) UI est réservé aux <strong>médicaments remboursables par la sécurité sociale</strong>, aux <strong>ventes d’animaux vivants</strong> de boucherie et de charcuterie, à <strong>certains spectacles</strong> et <strong>aux publications de presse</strong> inscrites à la Commission paritaire des publications et agences de presse. 🖥️ Mais cette dernière, <strong>vous ne la verrez pas à l'épreuv</strong>e.</p>



<p class="has-small-font-size">Source : <a href="https://www.economie.gouv.fr/cedef/taux-tva-france-et-union-europeenne">https://www.economie.gouv.fr/cedef/taux-tva-france-et-union-europeenne</a></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"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="255" height="279" src="https://st9ph.fr/wp-content/uploads/2026/01/image-204.png" alt="" class="wp-image-32926"/></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👈 C'est dans la zone <strong>Règle de taxes </strong>que vous pourrez changer le taux de TVA</p>



<p>A noter aussi :</p>



<ul class="wp-block-list">
<li>"<strong>Aucune taxe</strong>" - cela concerne <strong>de rares services</strong> intracommunautaires (UE), certaines <strong>activités médicales, services bancaires ou d'assurance.</strong></li>



<li>"<strong>EU VAT</strong>" pour certains <strong>produits dématérialisés</strong> dont <strong>la TVA est différente dans chaque pays de l'UE </strong>et qui sont payées<strong> en fonction du taux du pays de téléchargement</strong>.</li>
</ul>



<p>ℹ️ Ca non plus, <strong>ce n'est pas au programme.</strong></p>
</div>
</div>



<p class="has-base-2-background-color has-background">💶 Juste pour vous dire que l'Etat se fiche un peu de nous quand il nous dit qu'il n'a pas "de sous", il a touché <strong>106,2 milliards d'euros de recettes de TVA </strong>nette <strong>en 2025</strong>. Je dis "nette" parce qu'il en reverse une partie aux collectivités territoriales. (<em>source : ministère des finances publiques</em>)</p>



<h3 class="wp-block-heading" id="16-5-2-etablissement-du-prix-normal-">5-2 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Etablissement du prix normal</mark></h3>



<ul class="wp-block-list">
<li>Suivez les consignes  : v<strong>ous devez marger</strong>,  y compris si une promo est prévue</li>



<li> Aboutissez à <strong>un prix psychologique</strong> (ex : 9,95 € plutôt que 10 €)</li>



<li>N'oubliez pas de <strong>vérifier le taux de TVA</strong></li>
</ul>



<p>👉 Si je reprends le sujet "fil rouge", nous obtenons notre Sweat à<strong> 6 euros HT</strong> auprès de notre fournisseur et nous devons réaliser <strong>une marge commerciale de 8 euros HT</strong>. Imaginons aussi qu'on nous demande de faire <strong>un rabais de 10% </strong>sur notre produit en promo de lancement.</p>



<ul class="wp-block-list">
<li>Renseignez le prix fournisseur de <strong>6 €</strong> dans "<strong>prix d'achat</strong>" (PA)</li>



<li>Renseignez<strong> 14,8</strong> dans "<strong>prix de vente HT</strong>" : PA de 6€ + Marge mini 8€ X 1,1 (pour les 10% de promo)</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="793" height="107" src="https://st9ph.fr/wp-content/uploads/2026/01/image-207.png" alt="" class="wp-image-32935" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-207.png 793w, https://st9ph.fr/wp-content/uploads/2026/01/image-207-300x40.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-207-768x104.png 768w" sizes="auto, (max-width: 793px) 100vw, 793px" /></figure>



<p>👉 On obtient un <strong>TTC </strong>de <strong>17,76 €</strong>. C'est<strong> notre base</strong> pour atteindre un <strong>prix psychologique</strong> et nous avons trois possibilités dans <strong>notre politique de prix</strong>  :</p>



<ul class="wp-block-list">
<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">l'alignement</mark> </strong>: pour<strong> être certain d'être concurrentiel</strong>, rester sur<strong> la marge minimale.</strong> <strong>17,95 € TTC</strong> nous donne un HT de 14,95 € soit <strong>15 cts au dessus du seuil minimal</strong>- 🖥️ <strong><mark style="background-color:rgba(0, 0, 0, 0);color:#cf2929" class="has-inline-color">Ce sera celui là à l'examen</mark></strong></li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">La pénétration</mark></strong> : quitte à <strong>rogner sur sa marge pour être moins cher que les concurrents</strong>, voire ne pas marger du tout pendant la promo ! On peut descendre ainsi jusqu'à<strong> 7,95 € en prix de vente TTC</strong></li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">L'écrémage</mark></strong> : en<strong> dopant le prix pour donner le sentiment de luxe</strong> et, là, il n'y a de limite que l'effondrement de vos ventes.</li>
</ul>



<p>🔵 <strong>Nous choisissons l'alignement </strong>(pour l'examen) :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="804" height="141" src="https://st9ph.fr/wp-content/uploads/2026/01/image-208.png" alt="" class="wp-image-32937" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-208.png 804w, https://st9ph.fr/wp-content/uploads/2026/01/image-208-300x53.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-208-768x135.png 768w" sizes="auto, (max-width: 804px) 100vw, 804px" /></figure>



<h3 class="wp-block-heading" id="17-5-3-etablissement-dun-prix-sp%C3%A9cifique-promo-">5-3 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Etablissement d'un prix spécifique (promo)</mark></h3>



<p>➡️ Je vous renvoie à <a href="https://st9ph.fr/%f0%9f%9b%92e-commerce-operations-commerciales-en-digital/" target="_blank" rel="noreferrer noopener">cet article</a> section 1-1 (<strong>soldes</strong>) et 1-2 (<strong>promos</strong>) pour <strong>les règles à respecter</strong> pour ce type d'opération commerciale.</p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="213" height="34" src="https://st9ph.fr/wp-content/uploads/2026/01/image-209.png" alt="" class="wp-image-32940"/></figure>
</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-accent-color has-text-color has-link-color has-medium-font-size wp-elements-8c3297de76c3536ed42e915694cff293">🔵 Pour qui ?</p>



<p>👉 Vous pouvez <strong>réserver cette promotion à</strong> <strong>un client spécifique</strong> (que vous avez au téléphone par exemple et auquel vous voulez faire un geste commercial) <strong>ou à un groupe.</strong></p>
</div>



<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/01/image-210.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><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Les visiteurs</mark></strong> sont les<strong> personnes présentes</strong> sur votre boutique <strong>sans être identifiées</strong></li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Les invités</mark></strong> sont <strong>des visiteurs en train de commander</strong> <strong>sans être</strong> (déjà) <strong>clients </strong>(ou sans s'être connectés à leur compte client)</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">les clients</mark></strong> sont des<strong> visiteurs identifiés</strong> car connectés<strong> à leur compte client</strong></li>
</ul>



<p class="callout rouge">🤨 <strong>C'est idiot de choisir "visiteurs"</strong> : ils verront vos promos <strong>sans pouvoir les commander</strong> (car ils deviendront invités et alors, ils ne pourront plus en bénéficier ! De plus, vos fidèles clients, eux, ne les verront pas (mais certains commerçants le font). <strong>S'ils ne se connectent pas automatiquement,</strong> en plus, <strong>ils verront la promo disparaitre</strong> en le faisant !</p>



<p class="callout jaune">🤨 Ce n'est <strong>pas plus malin de choisir "invités"</strong> car alors, ils ne pourraient <strong>se rendre compte de la promo </strong>en cours <strong>qu'au moment de la commande </strong>(alors que la promo est votre principal CTA).</p>



<p class="callout vert">👍 Non, <strong>c'est au groupe "clients" que vous devez réserver vos promotions </strong>pour inciter les prospects à créer un compte.</p>



<p class="callout rouge">⚠️ <strong>Attention toutefois</strong>, si vous vous allez en front office pour <strong>voir le résultat côté client</strong>, il faudra <strong>vous connecter à un compte test.</strong> </p>



<p class="has-contrast-3-background-color has-background">⏱️ Bon nombre de candidats perdent un temps fou à ce corriger en back office, <strong>ne voyant pas de résultat probant en front</strong>, alors qu'ils ont réussi leur promo depuis le début mais qu'<strong>ils ont juste oublié de se connecter</strong> pour la voir.</p>



<p></p>



<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary>😟 un compte test ? Kézako ?</summary>
<p>C'est <strong>un faux compte client </strong>qui vous sert à<strong> faire des tests</strong>. Vous savez que <strong>vous n'avez pas le droit de vous connecter à un vrai compte client</strong>, j'espère ? Certains à l'examen changent carrément les mots de passe pour pouvoir le faire ! <mark style="background-color:rgba(0, 0, 0, 0);color:#c83535" class="has-inline-color">C'est juste<strong> interdit par la loi</strong></mark> ! Vous disposez d'un compte <strong>John DOE</strong> lors de l'installation de Prestashop (si vous ne l'avez pas supprimé) : login : <strong>pub@prestashop.com</strong> | mdp : <strong>123456789</strong> (sinon, recréez en un, ça ne vous prendra que 30 secondes)</p>
</details>



<p class="has-accent-color has-text-color has-link-color has-medium-font-size wp-elements-49e6ca543d5b7480f0d106a6257593db">🔵 Pour quelle déclinaison ?</p>



<p class="has-base-2-background-color has-background">👉 Vous avez le droit de <strong>faire une promo sur l'ensemble des déclinaison</strong>s et, dans ce cas, laisser "toutes" comme c'est par défaut. C'est notre cas d'ailleurs pour notre promo de lancement.</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">
<p>Mais souvent<strong>, ce seront certaines tailles, pointures ou couleurs</strong> d'un produit <strong>qui se vendront moins bien </strong>et que vous voudrez promouvoir. Dans ce cas :</p>



<ul class="wp-block-list">
<li>cliquez sur "<strong>déclinaison</strong>" pour dérouler la liste</li>



<li>Choisir l<strong>a déclinaison que vous souhaitez promouvoir</strong></li>
</ul>



<p></p>



<p class="has-text-align-center has-base-2-background-color has-background">C'est possible aussi de <strong>le faire sur plusieurs</strong> en créant <strong>d'autres prix spécifiques</strong> pour eux, en plus de celui-ci</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="267" height="251" src="https://st9ph.fr/wp-content/uploads/2026/01/image-211.png" alt="" class="wp-image-32942"/></figure>
</div>
</div>



<p class="has-accent-color has-text-color has-link-color has-medium-font-size wp-elements-ca757dcba86d682b7fb47a8c6dd5f387">🔵 Pour combien de temps ?</p>



<p class="has-base-2-background-color has-background">Un promotion<strong> est bornée dans le temps</strong> (sinon ça devient un prix normal).</p>



<p>👉 Vous remarquerez que "<strong>illimitée</strong>" est <strong>cochée par défaut</strong>, <mark style="background-color:rgba(0, 0, 0, 0);color:#cc4343" class="has-inline-color">ce qui est interdit</mark> en<a href="https://www.economie.gouv.fr/dgccrf/les-fiches-pratiques/lignes-directrices-relatives-lencadrement-des-promotions" target="_blank" rel="noreferrer noopener"> droit français</a> ! "<em>Elle doit rester ponctuelle et claire"</em></p>



<ul class="wp-block-list">
<li><strong>Commencez par la décocher</strong> !</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 class="has-base-2-background-color has-background">On remarque qu'une date de<strong> fin à + 1 mois </strong>est inscrite <strong>automatiquement</strong></p>



<ul class="wp-block-list">
<li><strong>Indiquez la date de fin </strong>souhaitée</li>
</ul>
</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="501" height="131" src="https://st9ph.fr/wp-content/uploads/2026/01/image-212.png" alt="" class="wp-image-32943" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-212.png 501w, https://st9ph.fr/wp-content/uploads/2026/01/image-212-300x78.png 300w" sizes="auto, (max-width: 501px) 100vw, 501px" /></figure>
</div>
</div>



<p class="has-accent-color has-text-color has-link-color has-medium-font-size wp-elements-3a0b6e8874757409bb3e23ed1f3f03f4">🔵 De quel montant ?</p>



<p>Vous pourrez au choix :</p>



<ul class="wp-block-list">
<li>Définir un rabais <strong>en pourcentage</strong> (mieux pour les petits montants)</li>



<li>Définir un rabais<strong> en numéraire</strong> (mieux pour les prix élevés</li>



<li><strong>Indiquer </strong>directement<strong> le prix remisé</strong> (ce qui revient à l'option précédente)</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">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="382" height="95" src="https://st9ph.fr/wp-content/uploads/2026/01/image-213.png" alt="" class="wp-image-32945" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-213.png 382w, https://st9ph.fr/wp-content/uploads/2026/01/image-213-300x75.png 300w" sizes="auto, (max-width: 382px) 100vw, 382px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>saisir <strong>10 </strong>dans la zone de gauche</li>



<li><strong>dérouler la liste</strong> que affiche "€" <strong>et changer pour "%"</strong></li>
</ul>



<p></p>
</div>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="170" height="34" src="https://st9ph.fr/wp-content/uploads/2026/01/image-214.png" alt="" class="wp-image-32946"/></figure>
</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="320" height="165" src="https://st9ph.fr/wp-content/uploads/2026/01/image-215.png" alt="" class="wp-image-32947" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-215.png 320w, https://st9ph.fr/wp-content/uploads/2026/01/image-215-300x155.png 300w" sizes="auto, (max-width: 320px) 100vw, 320px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👈 Le produit se présente maintenant avec <strong>un prix initial barré,</strong> le<strong> taux de remise</strong> et <strong>le nouveau prix.</strong></p>



<p class="has-text-align-center has-base-2-background-color has-background">Ca tombe bien parce que c'est comme cela que la loi veut qu'on fasse.</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%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="296" height="490" src="https://st9ph.fr/wp-content/uploads/2026/01/image-217.png" alt="" class="wp-image-32950" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-217.png 296w, https://st9ph.fr/wp-content/uploads/2026/01/image-217-181x300.png 181w" sizes="auto, (max-width: 296px) 100vw, 296px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>👇 L'information de remise est aussi présente<strong> dans le tunnel d'achat</strong>, ce qui renforce le sentiment de bonne affaire (et réduit le taux d'<strong>abandon de panier</strong>).</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="540" height="296" src="https://st9ph.fr/wp-content/uploads/2026/01/image-218.png" alt="" class="wp-image-32951" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-218.png 540w, https://st9ph.fr/wp-content/uploads/2026/01/image-218-300x164.png 300w" sizes="auto, (max-width: 540px) 100vw, 540px" /></figure>
</div>
</div>



<p>Vous pouvez encore <strong>augmenter sa visibilité </strong>en cochant la case du bandeau "<strong>promo</strong>".</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="531" height="40" src="https://st9ph.fr/wp-content/uploads/2026/01/image-216.png" alt="" class="wp-image-32948" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-216.png 531w, https://st9ph.fr/wp-content/uploads/2026/01/image-216-300x23.png 300w" sizes="auto, (max-width: 531px) 100vw, 531px" /></figure>



<p class="has-base-2-background-color has-background">ℹ️ Si vous avez<strong> activé le bandeau promos </strong>sur votre page d'accueil, <strong>le produit y figura aussi</strong>.</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"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="230" height="76" src="https://st9ph.fr/wp-content/uploads/2026/01/image-219.png" alt="" class="wp-image-32952"/></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Sur <a href="https://boutiq.st9ph.fr/21-mug-panda.html" target="_blank" rel="noreferrer noopener">cet autre produit,</a> on pratique<strong> une remise à la quantité</strong> (pour encourager l'achat de plusieurs mugs en même temps)</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-text-align-center has-base-2-background-color has-background">Le client <strong>est encouragé à cliquer</strong> sur les quantités par la présence d'<strong>un récapitulatif de la promotion</strong> juste au dessus !</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="549" height="146" src="https://st9ph.fr/wp-content/uploads/2026/01/image-220.png" alt="" class="wp-image-32953" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-220.png 549w, https://st9ph.fr/wp-content/uploads/2026/01/image-220-300x80.png 300w" sizes="auto, (max-width: 549px) 100vw, 549px" /></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">
<!-- 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/01/image-221.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>La <strong>notion de pack</strong> peut être aussi décisif si vous associez un produit qui marche bien à un de vos "mal vendus"</p>



<p class="has-base-2-background-color has-background">👈 Sur <a href="https://boutiq.st9ph.fr/25-pack-mug-et-vase-panda.html" target="_blank" rel="noreferrer noopener">ce produit</a>, le client peut <strong>mesurer le gain </strong>qu'il a <strong>à commander ces deux produits ensemble</strong> plutôt que séparément.</p>
</div>
</div>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-d7aa790ad23e9069fb5d034d06829f55" id="18-6%EF%B8%8F%E2%83%A3-r%C3%A9f%C3%A9rencement-seo">6️⃣| Référencement - SEO</h2>



<p>Je vous renvoie à <a href="https://st9ph.fr/%e2%8f%ba%ef%b8%8fomnicanal-search-engine-marketing/" target="_blank" rel="noreferrer noopener">cet article </a>pour tous<strong> les concepts et le vocabulaire</strong>.</p>



<p>Voilà quelle sera notre sortie sur une SERP :</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="720" height="151" src="https://st9ph.fr/wp-content/uploads/2026/01/image-222.png" alt="" class="wp-image-32957" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-222.png 720w, https://st9ph.fr/wp-content/uploads/2026/01/image-222-300x63.png 300w" sizes="auto, (max-width: 720px) 100vw, 720px" /></figure>
</div>


<p>On constate <strong>plusieurs choses</strong> :</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-f6dff6a8-20f1-4a2b-a235-12fb7104244b">
<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;%2300d084&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;'); " id="ub-styled-list-item-11a1d348-6508-4e3b-ab0d-63bb7bb935e8">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">l<strong>'url est lisible</strong> (slug pas trop long et parlant)</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 512 512&quot;&gt;&lt;path fill=&quot;%23fcb900&quot; d=&quot;M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM164.7 328.7c22-22 53.9-40.7 91.3-40.7s69.3 18.7 91.3 40.7c11.1 11.1 20.1 23.4 26.4 35.4c6.2 11.7 10.3 24.4 10.3 35.9c0 5.2-2.6 10.2-6.9 13.2s-9.8 3.7-14.7 1.8l-20.5-7.7c-26.9-10.1-55.5-15.3-84.3-15.3h-3.2c-28.8 0-57.3 5.2-84.3 15.3L149.6 415c-4.9 1.8-10.4 1.2-14.7-1.8s-6.9-7.9-6.9-13.2c0-11.6 4.2-24.2 10.3-35.9c6.3-12 15.3-24.3 26.4-35.4zm-31.2-182l89.9 47.9c10.7 5.7 10.7 21.1 0 26.8l-89.9 47.9c-7.9 4.2-17.5-1.5-17.5-10.5c0-2.8 1-5.5 2.8-7.6l36-43.2-36-43.2c-1.8-2.1-2.8-4.8-2.8-7.6c0-9 9.6-14.7 17.5-10.5zM396 157.1c0 2.8-1 5.5-2.8 7.6l-36 43.2 36 43.2c1.8 2.1 2.8 4.8 2.8 7.6c0 9-9.6 14.7-17.5 10.5l-89.9-47.9c-10.7-5.7-10.7-21.1 0-26.8l89.9-47.9c7.9-4.2 17.5 1.5 17.5 10.5z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-b87332c9-f117-430d-b0f8-44fb01501e39">
			<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="#fcb900" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM164.7 328.7c22-22 53.9-40.7 91.3-40.7s69.3 18.7 91.3 40.7c11.1 11.1 20.1 23.4 26.4 35.4c6.2 11.7 10.3 24.4 10.3 35.9c0 5.2-2.6 10.2-6.9 13.2s-9.8 3.7-14.7 1.8l-20.5-7.7c-26.9-10.1-55.5-15.3-84.3-15.3h-3.2c-28.8 0-57.3 5.2-84.3 15.3L149.6 415c-4.9 1.8-10.4 1.2-14.7-1.8s-6.9-7.9-6.9-13.2c0-11.6 4.2-24.2 10.3-35.9c6.3-12 15.3-24.3 26.4-35.4zm-31.2-182l89.9 47.9c10.7 5.7 10.7 21.1 0 26.8l-89.9 47.9c-7.9 4.2-17.5-1.5-17.5-10.5c0-2.8 1-5.5 2.8-7.6l36-43.2-36-43.2c-1.8-2.1-2.8-4.8-2.8-7.6c0-9 9.6-14.7 17.5-10.5zM396 157.1c0 2.8-1 5.5-2.8 7.6l-36 43.2 36 43.2c1.8 2.1 2.8 4.8 2.8 7.6c0 9-9.6 14.7-17.5 10.5l-89.9-47.9c-10.7-5.7-10.7-21.1 0-26.8l89.9-47.9c7.9-4.2 17.5 1.5 17.5 10.5z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Le titre est valorisé</strong> mais ne mentionne pas st9ph Market</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 512 512&quot;&gt;&lt;path fill=&quot;%23fcb900&quot; d=&quot;M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM164.7 328.7c22-22 53.9-40.7 91.3-40.7s69.3 18.7 91.3 40.7c11.1 11.1 20.1 23.4 26.4 35.4c6.2 11.7 10.3 24.4 10.3 35.9c0 5.2-2.6 10.2-6.9 13.2s-9.8 3.7-14.7 1.8l-20.5-7.7c-26.9-10.1-55.5-15.3-84.3-15.3h-3.2c-28.8 0-57.3 5.2-84.3 15.3L149.6 415c-4.9 1.8-10.4 1.2-14.7-1.8s-6.9-7.9-6.9-13.2c0-11.6 4.2-24.2 10.3-35.9c6.3-12 15.3-24.3 26.4-35.4zm-31.2-182l89.9 47.9c10.7 5.7 10.7 21.1 0 26.8l-89.9 47.9c-7.9 4.2-17.5-1.5-17.5-10.5c0-2.8 1-5.5 2.8-7.6l36-43.2-36-43.2c-1.8-2.1-2.8-4.8-2.8-7.6c0-9 9.6-14.7 17.5-10.5zM396 157.1c0 2.8-1 5.5-2.8 7.6l-36 43.2 36 43.2c1.8 2.1 2.8 4.8 2.8 7.6c0 9-9.6 14.7-17.5 10.5l-89.9-47.9c-10.7-5.7-10.7-21.1 0-26.8l89.9-47.9c7.9-4.2 17.5 1.5 17.5 10.5z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-40b2dd83-d289-4f0e-bbd7-c2095b88835c">
			<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="#fcb900" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM164.7 328.7c22-22 53.9-40.7 91.3-40.7s69.3 18.7 91.3 40.7c11.1 11.1 20.1 23.4 26.4 35.4c6.2 11.7 10.3 24.4 10.3 35.9c0 5.2-2.6 10.2-6.9 13.2s-9.8 3.7-14.7 1.8l-20.5-7.7c-26.9-10.1-55.5-15.3-84.3-15.3h-3.2c-28.8 0-57.3 5.2-84.3 15.3L149.6 415c-4.9 1.8-10.4 1.2-14.7-1.8s-6.9-7.9-6.9-13.2c0-11.6 4.2-24.2 10.3-35.9c6.3-12 15.3-24.3 26.4-35.4zm-31.2-182l89.9 47.9c10.7 5.7 10.7 21.1 0 26.8l-89.9 47.9c-7.9 4.2-17.5-1.5-17.5-10.5c0-2.8 1-5.5 2.8-7.6l36-43.2-36-43.2c-1.8-2.1-2.8-4.8-2.8-7.6c0-9 9.6-14.7 17.5-10.5zM396 157.1c0 2.8-1 5.5-2.8 7.6l-36 43.2 36 43.2c1.8 2.1 2.8 4.8 2.8 7.6c0 9-9.6 14.7-17.5 10.5l-89.9-47.9c-10.7-5.7-10.7-21.1 0-26.8l89.9-47.9c7.9-4.2 17.5 1.5 17.5 10.5z"></path></svg>
				</span>
				<span class="ub_list_item_text">la <strong>méta </strong>(description) est <strong>sympa</strong>, valorisée, attrayante <strong>mais tronquée</strong> (...)</span>
			</div>
			
		</li>
</ul>


<ul class="wp-block-list">
<li>un <strong>bon titre SEO</strong> doit donner de manière simple<strong> l'information clé</strong> : <strong>c'est quoi comme produit </strong>et <strong>où vais-je atterrir</strong> si je clique ? Toutes les <strong>url </strong>ne seront pas aussi <strong>parlantes </strong>que la mienne : <em>boutiq.st9ph</em> </li>



<li>une <strong>bonne méta</strong> sera <strong>votre CTA</strong> : en peu de mots, donnez envie de cliquer sans dépasser les 160 caractères. (ici, je recopie le Récapitulatif et je le simplifie</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="944" height="274" src="https://st9ph.fr/wp-content/uploads/2026/01/image-223.png" alt="" class="wp-image-32958" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-223.png 944w, https://st9ph.fr/wp-content/uploads/2026/01/image-223-300x87.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-223-768x223.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<p>👉 on aurait pu aussi au besoin  modifier l'url simplifiée (slug)</p>



<p>Ca donne ça 👇 :</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="710" height="148" src="https://st9ph.fr/wp-content/uploads/2026/01/image-224.png" alt="" class="wp-image-32959" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-224.png 710w, https://st9ph.fr/wp-content/uploads/2026/01/image-224-300x63.png 300w" sizes="auto, (max-width: 710px) 100vw, 710px" /></figure>
</div>


<p>Pour <strong>les mots clés</strong>, vous n'aurez ni <strong>Trends</strong>, ni <strong>Semrush </strong>pour vous aider, alors posez vous une seule question : <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">qu'est ce que je taperais comme recherche si je voulais acheter <strong>un produit comme celui là</strong> ?</mark></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="656" height="150" src="https://st9ph.fr/wp-content/uploads/2026/01/image-225.png" alt="" class="wp-image-32960" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-225.png 656w, https://st9ph.fr/wp-content/uploads/2026/01/image-225-300x69.png 300w" sizes="auto, (max-width: 656px) 100vw, 656px" /></figure>



<p class="has-base-2-background-color has-background">N'oubliez pas de faire <strong>des longues traines</strong> et pas la peine de remettre "st9ph market" ou "Panda" qui sont <strong>déjà dans le titre SEO</strong>.</p>



<p>👉Si vous n'avez pas <strong>légendé vos images</strong> (voir section 1-1), c'est le moment de la faire !</p>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-8bd84877bfc464316b13abdcee00f9c6" id="19-7%EF%B8%8F%E2%83%A3-options">7️⃣| Options</h2>



<p>Vous allez pouvoir définir des <strong>paramètres de visibilité</strong> et des<strong> modes d'affichage</strong> :</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:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="216" height="241" src="https://st9ph.fr/wp-content/uploads/2026/01/image-227.png" alt="" class="wp-image-32964"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="593" height="263" src="https://st9ph.fr/wp-content/uploads/2026/01/image-226.png" alt="" class="wp-image-32963" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-226.png 593w, https://st9ph.fr/wp-content/uploads/2026/01/image-226-300x133.png 300w" sizes="auto, (max-width: 593px) 100vw, 593px" /></figure>
</div>
</div>



<ul class="wp-block-list">
<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Partout</mark></strong> : C'est <strong>le mode par défaut.</strong> Le produit sera <strong>visible à la fois sur le "catalogue"</strong>, c'est à dire, partout sur le site quand on parcourra les rubriques et <strong>dans le moteur de recherche</strong> . Mais aussi dans le <strong>bloc nouveautés</strong> et <strong>promos</strong> si vous les affichez et qu'il rentre dans les critères.</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Catalogue seul </mark></strong>: si vous ne voulez pas qu'on puisse le trouver dans le moteur. Je ne vois pas bien pourquoi on ferait cela, à part pour<strong> forcer le visiteur à parcourir les rayons </strong>(et voir les autres produits <strong>dans l'espoir qu'il ait un coup de cœur</strong>) un peu comme le modèle Ikéa où l'on oblige à un parcours imposé.</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Recherche uniquement</mark></strong> : Je ne vois pas bien non plus pourquoi on ne pourrait le trouver <strong>qu'en le recherchant par mots clé.</strong>  Peut-être pour certains produits techniques en B2B, <strong>pour éviter les retours trop fréquents </strong>de clients qui se trompent ?<strong> On leur donne la Ref </strong>par téléphone ou mail ?</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Nulle part</mark></strong> : là, je comprends mieux, ça peut-être <strong>un moyen préparer en avance une fiche produit </strong>(promo ou solde alors que ce n'est pas encore la date de début) mais, là encore, il suffit de<strong> la garder en mode brouillon.</strong></li>
</ul>



<p class="has-medium-font-size">Vous pouvez aussi :</p>



<ul class="wp-block-list">
<li>indiquer si <strong>le produit est disponible à la vente </strong>(ça peut-être par exemple un <strong>produit cadeau</strong> ou <strong>à gagner </strong>qu'on veut tout-de-même inscrire au catalogue)</li>



<li><strong>Afficher le prix</strong> : valable pour les <strong>boutiques spécialisées</strong> (<strong>catalogues salariés </strong>de comités d'entreprises) ou pour certains produits ou <strong>prestation sur mesure</strong> et qu'on ne peut pas estimer d'avance.</li>



<li>Indiquer si ce <strong>produit n'est disponible qu'en ligne </strong>(exclu web) si tant est que vous disposez aussi d'une SVP avec un catalogue commun.</li>
</ul>



<p class="has-base-2-background-color has-background">Voilà, ce long tour d'horizon est terminé. <strong>L'entrainement sera la clé</strong> pour <strong>réussir votre fiche produit en 13 minutes.</strong> Plus vous allez manipuler l'outil, plus vous allez acquérir les automatismes et l'aisance.</p>



<p>🔻La version <img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""><mark style="background-color:rgba(0, 0, 0, 0);color:#eb1e1e" class="has-inline-color">pdf</mark>, <a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2963/preview/pdf/6555" target="_blank" rel="noreferrer noopener">c'est ici</a>. ♻️<mark style="background-color:rgba(0, 0, 0, 0);color:#3eb674" class="has-inline-color"><strong>A imprimer avec modération.</strong></mark></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">

<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%2Fprestashop-la-fiche-produit%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>



<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>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h2 class="wp-block-heading has-base-2-background-color has-background has-medium-font-size" id="20-aller-%C3%A0-la-seconde-partie-manipuler-la-boutique-%E2%9E%A1%EF%B8%8F">Aller à la seconde partie | <a href="https://st9ph.fr/prestashop-manipuler-la-boutique/">manipuler la boutique</a> ➡️</h2>
</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: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">🛠️ création de sites</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-uagb-post-grid uagb-post-grid  uagb-post__image-position-top uagb-post__image-enabled uagb-block-6ab5fb4a     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/prestashop-op-com-dans-la-eshop/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="732" height="259" src="https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop.jpg 732w, https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop-300x106.jpg 300w" sizes="auto, (max-width: 732px) 100vw, 732px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/" target="_self" rel="bookmark noopener noreferrer">Prestashop | OP Com dans la Eshop</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-02-17T18:27:24+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					17 février 2026				</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>PrestaShop | 💥OP Com dans la Eshop ➡️ Que ce soit pour &#8230; vider les...				</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/prestashop-op-com-dans-la-eshop/" 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/prestashop-le-service-apres-vente/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="840" height="248" src="https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech.jpg 840w, https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech-300x89.jpg 300w, https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech-768x227.jpg 768w" sizes="auto, (max-width: 840px) 100vw, 840px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-le-service-apres-vente/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Le Service Après Vente</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-24T16:55:00+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					24 janvier 2026				</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'>
					SAV prestashop,, commande prestashop en backoffice, messages prédéfinis prestashop

				</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/prestashop-le-service-apres-vente/" 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/prestashop-manipuler-la-boutique/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="736" height="226" src="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958.jpg 736w, https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958-300x92.jpg 300w" sizes="auto, (max-width: 736px) 100vw, 736px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-manipuler-la-boutique/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Manipuler la boutique</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-22T14:40:35+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					22 janvier 2026				</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>PrestaShop | Manipuler la boutique 🏪 👉🏻 2nd bloc d&#8217;évaluation de l&#8217;épreuve technique, les manipulations...				</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/prestashop-manipuler-la-boutique/" 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/prestashop-cas-de-retours-produits/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="723" height="199" src="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925.jpg 723w, https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925-300x83.jpg 300w" sizes="auto, (max-width: 723px) 100vw, 723px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-cas-de-retours-produits/" target="_self" rel="bookmark noopener noreferrer">Prestashop | les retours produits</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-12-18T19:06:17+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					18 décembre 2025				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Un commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>restaShop | Les retours produits 🔙 ➡️ Il faut savoir que les différents scénarios devront...				</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/prestashop-cas-de-retours-produits/" 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/prestashop-nouveautes-de-la-version-9/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="307" src="https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-1024x349.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-1024x349.png 1024w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-300x102.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-768x262.png 768w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9.png 1059w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-nouveautes-de-la-version-9/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Nouveautés de la version 9</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-11-19T10:45:25+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					19 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>Une nouvelle version du CMS pose quelques améliorations au Backoffice et un nouveau thème en...				</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/prestashop-nouveautes-de-la-version-9/" 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/prestashop-referencement-seo-de-vos-produits/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="425" src="https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-1024x484.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-1024x484.png 1024w, https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-300x142.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-768x363.png 768w, https://st9ph.fr/wp-content/uploads/2025/11/refeProduit.png 1062w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-referencement-seo-de-vos-produits/" target="_self" rel="bookmark noopener noreferrer">Prestashop | référencement SEO de vos produits</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-11-14T10:10:32+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					14 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>PrestaShop | le SEO de vos produits 👉🏻 Essentiel pour assurer votre visibilité sur les...				</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/prestashop-referencement-seo-de-vos-produits/" 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'ai commencé ma carrière comme technicien en réseaux informatiques.  J'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'Appels chez Webhelp pendant 12 ans avec des grands comptes FAI comme Orange, Bouygues Telecom et SFR, des assureurs et des fournisseurs d'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/prestashop-la-fiche-produit/">Prestashop | La Fiche Produit par l&#8217;exemple</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://st9ph.fr/prestashop-la-fiche-produit/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/Enregistrement-2026-01-15-000253.mp4" length="763898" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/Enregistrement-2026-01-15-104641.mp4" length="1115239" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/liste.mp4" length="302646" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/couleurs.mp4" length="241702" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/radioBouton.mp4" length="242926" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/decli.mp4" length="3371226" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/voicertool_audio_Eloise_17-01-2026_at_10_28_33_on_January_17th_2026.mp3" length="227232" type="audio/mpeg" />
<enclosure url="https://boutiq.st9ph.fr/img/cms/sweat2w-final.mp4" length="914764" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/boucle-bambou.mp4" length="1931284" type="video/mp4" />

		<post-id xmlns="com-wordpress:feed-additions:1">32746</post-id>	</item>
		<item>
		<title>Prestashop &#124; les retours produits</title>
		<link>https://st9ph.fr/prestashop-cas-de-retours-produits/</link>
					<comments>https://st9ph.fr/prestashop-cas-de-retours-produits/#comments</comments>
		
		<dc:creator><![CDATA[St9ph]]></dc:creator>
		<pubDate>Thu, 18 Dec 2025 18:06:17 +0000</pubDate>
				<category><![CDATA[PrestaShop]]></category>
		<category><![CDATA[🛠️ création de sites]]></category>
		<category><![CDATA[🌐 public]]></category>
		<category><![CDATA[gérer les retours produits dans prestashop]]></category>
		<category><![CDATA[tuto prestashop retours produits]]></category>
		<guid isPermaLink="false">https://st9ph.fr/?p=31333</guid>

					<description><![CDATA[<p>restaShop &#124; Les retours produits 🔙 ➡️ Il faut savoir que les différents scénarios devront être définis dans vos CGV, accessibles aux clients, et respecter quelques règles : 👉🏻 La réassurance (voir aussi cet article) est une opération commerciale à échéance. Prévoyez une page &#8220;Avantages clients&#8221; pour en définir les limites (conditions, produits concernés &#8230; ... <a title="Prestashop &#124; les retours produits" class="read-more" href="https://st9ph.fr/prestashop-cas-de-retours-produits/" aria-label="En savoir plus sur Prestashop &#124; les retours produits">Lire la suite</a></p>
<p>L’article <a href="https://st9ph.fr/prestashop-cas-de-retours-produits/">Prestashop | les retours produits</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<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"><img loading="lazy" decoding="async" width="16" height="17" class="wp-image-33544" style="width: 16px;" src="https://st9ph.fr/wp-content/uploads/2026/01/ps-icone-prestashop.jpg" alt=""><strong>restaShop</strong></p>



<p class="has-accent-color has-text-color has-link-color has-x-large-font-size wp-elements-8b694cbaa3deee8049794bd55541bfb2"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-contrast-color">|</mark> Les retours produits 🔙</p>
</div>



<p>➡️ Il faut savoir que les différents scénarios devront être <strong>définis dans vos CGV,</strong> accessibles aux clients, et r<strong>especter quelques règles</strong> :</p>



<ul class="wp-block-list">
<li>vous ne pouvez pas refuser à <strong>un client de renoncer à son achat </strong>(VAD) dans les 📆 <strong>14 jours</strong> qui suivent la <strong>réception de sa commande</strong> :
<ul class="wp-block-list">
<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Pour un produit</mark></strong> (palpable, matériel) :
<ul class="wp-block-list">
<li> C&#8217;est la date du<strong> bon de livraison </strong>qui fait foi 🚚</li>



<li>il y&#8217;a des exceptions pour <strong>certains produits d&#8217;hygiène 🪥 ou périssables </strong>🍕 qui ne sont pas &#8220;retournables&#8221;</li>



<li> <strong>le produit doit être restitué dans son état d&#8217;origine</strong> 🧃</li>
</ul>
</li>



<li> <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Pour un service </mark></strong>(abonnement, ticket dématérialisé,  logiciel &#8230;)
<ul class="wp-block-list">
<li>le délai court à partir de <strong>la ✅ validation de la commande </strong></li>



<li> le service <strong>ne doit pas avoir été ni activé 🧑🏻‍💻, ni aucune fonctionnalité utilisée </strong>🔔</li>
</ul>
</li>
</ul>
</li>



<li>Vous êtes tenus également à vos <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=""> <strong>obligations légales</strong> de <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">conformité </mark></strong>et de <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">garantie </mark></strong>dans un délai de 1 à 10 ans selon les types de produits (neufs)</li>



<li>Si vous avez prévu des <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">c<strong>onditions de réassurance</strong></mark> ❇️ plus avantageuses que vos obligations minimales, vous devez également vous y tenir car <strong>elles vous engagent </strong>(ex : &#8220;satisfait ou remboursé dans un délai d&#8217;1 mois&#8221;).</li>
</ul>



<p class="has-base-2-background-color has-background">👉🏻 <strong>La réassurance</strong> (voir aussi <a href="https://st9ph.fr/la-reassurance-dans-prestashop/" target="_blank" rel="noreferrer noopener">cet article</a>) est <strong>une opération commerciale </strong>à échéance. Prévoyez une page &#8220;<strong>Avantages clients&#8221;</strong> pour en <strong>définir les limites (</strong>conditions, produits concernés &#8230; ) et <strong>ajoutez les aussi à vos CGV,</strong> seul <strong>élément contractuel </strong>au moment <strong>de la vente.</strong></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:33.33%"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" 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>
</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-0fe1fd9c-d15c-45ab-be15-2582818ea5a7">
			<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-0fe1fd9c-d15c-45ab-be15-2582818ea5a7-0"><rect height="150" width="75" 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-0fe1fd9c-d15c-45ab-be15-2582818ea5a7-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-0fe1fd9c-d15c-45ab-be15-2582818ea5a7-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-0fe1fd9c-d15c-45ab-be15-2582818ea5a7-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-0fe1fd9c-d15c-45ab-be15-2582818ea5a7-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-0fe1fd9c-d15c-45ab-be15-2582818ea5a7-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-0fe1fd9c-d15c-45ab-be15-2582818ea5a7-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-0fe1fd9c-d15c-45ab-be15-2582818ea5a7-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-0fe1fd9c-d15c-45ab-be15-2582818ea5a7-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-0fe1fd9c-d15c-45ab-be15-2582818ea5a7-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-31d71c62-a3da-4303-b559-224e7a47551c">
			<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-31d71c62-a3da-4303-b559-224e7a47551c-0"><rect height="150" width="150" 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-31d71c62-a3da-4303-b559-224e7a47551c-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-31d71c62-a3da-4303-b559-224e7a47551c-1"><rect height="150" width="150" 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-31d71c62-a3da-4303-b559-224e7a47551c-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-31d71c62-a3da-4303-b559-224e7a47551c-2"><rect height="150" width="150" 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-31d71c62-a3da-4303-b559-224e7a47551c-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-31d71c62-a3da-4303-b559-224e7a47551c-3"><rect height="150" width="150" 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-31d71c62-a3da-4303-b559-224e7a47551c-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-31d71c62-a3da-4303-b559-224e7a47551c-4"><rect height="150" width="75" 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-31d71c62-a3da-4303-b559-224e7a47551c-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-132d1885-d860-4ca8-be85-4bda36e3e4b5">
			<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-132d1885-d860-4ca8-be85-4bda36e3e4b5-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-132d1885-d860-4ca8-be85-4bda36e3e4b5-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-132d1885-d860-4ca8-be85-4bda36e3e4b5-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-132d1885-d860-4ca8-be85-4bda36e3e4b5-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-132d1885-d860-4ca8-be85-4bda36e3e4b5-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-132d1885-d860-4ca8-be85-4bda36e3e4b5-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-132d1885-d860-4ca8-be85-4bda36e3e4b5-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-132d1885-d860-4ca8-be85-4bda36e3e4b5-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-132d1885-d860-4ca8-be85-4bda36e3e4b5-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-132d1885-d860-4ca8-be85-4bda36e3e4b5-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">11–17 minutes</div>


<p>|</p>


<div class="wp-block-post-time-to-read">2 683 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-04-09T09:04:09+02:00">9 avril  2026</time></div></div>


				<div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-5fa7d028      "
					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="#les-2-cas-de-retours-produits" class="uagb-toc-link__trigger">les 2 cas de retours produits</a><ul class="uagb-toc__list"><li class="uagb-toc__list"><a href="#11-la-rétractation" class="uagb-toc-link__trigger">🔹1.1 | la rétractation</a><li class="uagb-toc__list"><li class="uagb-toc__list"><a href="#12-la-non-conformité" class="uagb-toc-link__trigger">🔹1.2 | la non-conformité</a></li></ul></li><li class="uagb-toc__list"><a href="#procédure-des-retours-produits" class="uagb-toc-link__trigger">Procédure des retours produits</a><ul class="uagb-toc__list"><li class="uagb-toc__list"><a href="#21-activer-loption-dans-le-backoffice" class="uagb-toc-link__trigger">🔹2.1 | Activer l&#039;option dans le backoffice</a><li class="uagb-toc__list"><li class="uagb-toc__list"><a href="#22-retours-produits-côté-client" class="uagb-toc-link__trigger">🔹2.2 | Retours produits côté client</a><li class="uagb-toc__list"><li class="uagb-toc__list"><a href="#23-traitement-du-retour-produit-initiée-par-le-client" class="uagb-toc-link__trigger">🔹2.3 | Traitement du retour produit initiée par le client</a><li class="uagb-toc__list"><li class="uagb-toc__list"><a href="#24-retour-produit-initié-et-traité-à-100-côté-boutique" class="uagb-toc-link__trigger">🔹2.4 | Retour produit initié et traité à 100% côté boutique</a></li></ul></li></ul></li><li class="uagb-toc__list"><a href="#reconditionnement-de-produits-retournés" class="uagb-toc-link__trigger">Reconditionnement de produits retournés</a><ul class="uagb-toc__list"><li class="uagb-toc__list"><a href="#31-remettre-le-produit-en-vente" class="uagb-toc-link__trigger">🔹3.1 | Remettre le produit en vente</a><li class="uagb-toc__list"><li class="uagb-toc__list"><a href="#32-pensez-aussi-à-votre-e-réputation" class="uagb-toc-link__trigger">🔹3.2 | Pensez aussi à votre ⭐ e-réputation !</a></li></ul></li></ul></li></ul></li><li class="uagb-toc__list"><a href="#vers-lépreuve-e5" class="uagb-toc-link__trigger">🧑🏻‍🎓| Vers l&#039;épreuve E5</a></ul></ul></ul></ol>					</div>
									</div>
				</div>
			


<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">1</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>les 2 cas de retours produits</h2>
    </div>

    <ul class="chapter-points">
      <li>la rétractation</li>
      <li>la non-conformité</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">1.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>la rétractation</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">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="1024" src="https://st9ph.fr/wp-content/uploads/2025/12/produit-bleaster.jpg" alt="" class="wp-image-31336" srcset="https://st9ph.fr/wp-content/uploads/2025/12/produit-bleaster.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/produit-bleaster-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/produit-bleaster-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/produit-bleaster-768x768.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p data-wp-context---core-fit-text="core/fit-text::{&quot;fontSize&quot;:&quot;&quot;}" data-wp-init---core-fit-text="core/fit-text::callbacks.init" data-wp-interactive data-wp-style--font-size="core/fit-text::context.fontSize" class="has-fit-text">Renoncer à son achat, c&#8217;est :</p>



<ol class="wp-block-list">
<li><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"><strong>n&#8217;avoir fait aucun usage de son produit</strong> </mark>ou n&#8217;avoir <strong>utilisé aucune fonctionnalité d&#8217;un service </strong>souscris.</li>



<li><strong>Manifester son intention <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">14 jours maximum après la date de livraison</mark></strong> de la commande (ou fonctionnement du service)</li>
</ol>



<div class="bloc-astuce">
  ✅ Ici, un pull revient <strong>dans son blister d&#8217;origine</strong> et pourra même <strong> être restocké </strong> C&#8217;est le cas le plus simple.
</div>

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



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="256" height="41" src="https://st9ph.fr/wp-content/uploads/2025/12/image-40.png" alt="" class="wp-image-31337"/></figure>
</div>
</div>



<div class="bloc-attention">
  ⚠️Vous devez indiquer au client dans vos CGV si <strong>le retour s&#8217;effectue à sa charge,</strong> sinon, il sera à vos frais automatiquement !
</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>



<p class="has-medium-font-size">➡️ <strong>Exemple de paragraphe</strong> à indiquer <strong>dans vos CGV </strong>pour les retours produits :</p>



<div class="wp-block-uagb-separator uagb-block-afd4f547"><div class="wp-block-uagb-separator__inner" style="--my-background-image:"></div></div>



<p class="has-small-font-size">Conformément au code de la consommation en son article <a href="https://www.legifrance.gouv.fr/codes/id/LEGISCTA000032226844/">L121-18</a> et suivants, vous disposez d&#8217;<strong>un délai de 14 jours francs à partir de la réception de votre commande </strong>(le bon de livraison faisant foi) pour nous retourner le produit <strong>dans son état et son emballage d&#8217;origines </strong>à vos frais, sans avoir à nous indiquer de motifs.</p>



<ul class="wp-block-list has-small-font-size">
<li>Rendez-vous dans la <strong>rubrique mon compte</strong></li>



<li>Cliquer sur &#8220;<strong>historique et détail de mes commandes</strong>&#8220;</li>



<li>Cliquer sur &#8220;<strong>détail</strong>&#8221; de la commande à retourner</li>



<li>Cliquer sur <strong>la case à cocher</strong> à gauche du produit à retourner</li>



<li>Indiquer la <strong>quantité de produit </strong>à retourner. <strong>La quantité doit correspondre à 100 %</strong> du produit. Vous ne pouvez pas renvoyer <strong>une partie incomplète d&#8217;un lot</strong> dans le cas d&#8217;un renoncement.</li>



<li>Cliquez sur <strong>envoyer</strong></li>



<li>Dans la Zone &#8220;<strong>messages</strong>&#8220;, indiquez &#8220;<strong>Je renonce à mon achat</strong>&#8220;</li>



<li>Renvoyez le produit commandé <strong>correctement emballé, protégé et suffisamment affranchi à</strong> l&#8217;adresse &#8220;SAV ST9PH MARKET, ZAC des mouettes, 14014 Caen Cedex&#8221;, <strong>dans son emballage d&#8217;origine</strong>.</li>
</ul>



<p class="has-small-font-size">A r<strong>éception conforme du produit, </strong>vous serez remboursé(e) dans un délai de 2 mois <strong>sous forme d&#8217;un avoir </strong>à utiliser dans notre boutique en ligne ou en magasin.<strong> Un code réduction valable 1 an </strong>vous parviendra par mail, utilisable en 1 ou plusieurs fois, jusqu&#8217;à épuisement du solde. Si vous souhaitez un autre mode de remboursement, contactez notre plateforme téléphonique au 0800 &#8230;</p>



<div class="wp-block-uagb-separator uagb-block-db59a736"><div class="wp-block-uagb-separator__inner" style="--my-background-image:"></div></div>



<p>Pour un <strong>service </strong>ou un <strong>produit dématérialisé </strong>:</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;%2300d084&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-074faa6b-0fd8-4e00-a661-21309c0da05b">
<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;%2300d084&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;'); " id="ub-styled-list-item-770dcc54-d0c2-4e2d-bacf-bf37ea912214">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">Ne pas avoir <strong>activé le service </strong>(connexion logicielle, création de compte même sans avoir été plus loin)</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&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;'); " id="ub-styled-list-item-10aacd81-8e71-418c-baa1-88dd3730083a">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">Ne pas avoir <strong>téléchargé le produit dématérialisé</strong> (dans le cas de l&#8217;achat d&#8217;un livre numérique ou autre)</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&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;'); " id="ub-styled-list-item-763eaa56-8e13-478d-a9d2-48daf2ad689f">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">Ne pas avoir <strong>consommé un élément du service </strong>(comme l&#8217;usage d&#8217;un streaming lié au service, par exemple</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 512 512&quot;&gt;&lt;path fill=&quot;%23cf2e2e&quot; d=&quot;M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-897de9e9-1557-4dc3-b9e6-2880984d781f">
			<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="#cf2e2e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"></path></svg>
				</span>
				<span class="ub_list_item_text">Si le produit est sur <strong>une market place </strong>et que vous n&#8217;êtes pas <strong>le vendeur direct</strong>, vous êtes tout de même <strong>solidaire </strong>et devrez <strong>vous substituer à lui </strong>s&#8217;il ne respecte pas cet engagement de dédit (même s&#8217;il réside hors UE).</span>
			</div>
			
		</li>
</ul>


<p class="has-base-2-background-color has-background">➡️ Aucun <strong>frais de dédit</strong> lié à un engagement (abonnement) ne s&#8217;applique même s&#8217;il y en a de prévus dans les CGV. Dans le cadre d&#8217;une <strong>montée en gamme </strong>(Up Selling), le client doit pouvoir retrouver son service précédent <strong>à son tarif initial,</strong> même si celui-ci n&#8217;est plus commercialisé.</p>



<p>👉🏻 C&#8217;est la date du <strong>mail de confirmation </strong>de l&#8217;activation du service ou qui contient <strong>le lien de téléchargement </strong>qu&#8217;il faut prendre pour les 14 jours francs.</p>


<div class="wp-block-uagb-faq uagb-faq__outer-wrap uagb-block-88bd3b40 uagb-faq-icon-row uagb-faq-layout-accordion uagb-faq-expand-first-false uagb-faq-inactive-other-true uagb-faq__wrap uagb-buttons-layout-wrap uagb-faq-equal-height     " data-faqtoggle="true" role="tablist"><div class="wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-faq-item uagb-block-66b48e03 " role="tab" tabindex="0"><div class="uagb-faq-questions-button uagb-faq-questions">			<span class="uagb-icon uagb-faq-icon-wrap">
								<svg xmlns="https://www.w3.org/2000/svg" viewBox= "0 0 448 512"><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"></path></svg>
							</span>
						<span class="uagb-icon-active uagb-faq-icon-wrap">
								<svg xmlns="https://www.w3.org/2000/svg" viewBox= "0 0 448 512"><path d="M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z"></path></svg>
							</span>
			<span class="uagb-question">C&#8217;est quoi un jour franc ?</span></div><div class="uagb-faq-content"><p>Un jour franc, <strong>c&#8217;est 24 heures</strong>. C&#8217;est à dire qu&#8217;il faut compter <strong>en réalité le 15ème jour calendaire </strong>à partir du bon de livraison pour être en droit de refuser un retour produit dans le cadre du renoncement.<br>Ex : Bon de livraison daté du 19 décembre, c&#8217;est le 3 janvier que vous pouvez refuser le retour d&#8217;un produit conforme.</p></div></div><div class="wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-faq-item uagb-block-78711327 " role="tab" tabindex="0"><div class="uagb-faq-questions-button uagb-faq-questions">			<span class="uagb-icon uagb-faq-icon-wrap">
								<svg xmlns="https://www.w3.org/2000/svg" viewBox= "0 0 448 512"><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"></path></svg>
							</span>
						<span class="uagb-icon-active uagb-faq-icon-wrap">
								<svg xmlns="https://www.w3.org/2000/svg" viewBox= "0 0 448 512"><path d="M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z"></path></svg>
							</span>
			<span class="uagb-question">Quelle est la différence avec un jour &#8220;ouvré&#8221; ?</span></div><div class="uagb-faq-content"><p>Un jour ouvré <strong>ne compte pas les jours chômés</strong> (Dimanches et jours fériés + <strong>jours de fermeture</strong> clairement annoncés pour le magasin &#8211; souvent c&#8217;est le lundi dans le commerce).<br>Pour rappel, on est <strong>en VAD</strong>, donc, <strong>ça n&#8217;existe pas</strong> pour nous. Une EShop est ouverte H24 et 7j/7</p></div></div><div class="wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-faq-item uagb-block-b6aebc3b " role="tab" tabindex="0"><div class="uagb-faq-questions-button uagb-faq-questions">			<span class="uagb-icon uagb-faq-icon-wrap">
								<svg xmlns="https://www.w3.org/2000/svg" viewBox= "0 0 448 512"><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"></path></svg>
							</span>
						<span class="uagb-icon-active uagb-faq-icon-wrap">
								<svg xmlns="https://www.w3.org/2000/svg" viewBox= "0 0 448 512"><path d="M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z"></path></svg>
							</span>
			<span class="uagb-question">Euh &#8230; juste pour être sûr(e), c&#8217;est quoi déjà, la &#8220;VAD&#8221; ?</span></div><div class="uagb-faq-content"><p>Vente A Distance : toutes les ventes sauf celles en SVP (surface de vente physique &#8211; votre magasin). Ca inclut les EShop, la vente par téléphone, la vente sur les places de marché ou salons et même la vente à domicile.</p></div></div><div class="wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-faq-item uagb-block-b29a4ba3 " role="tab" tabindex="0"><div class="uagb-faq-questions-button uagb-faq-questions">			<span class="uagb-icon uagb-faq-icon-wrap">
								<svg xmlns="https://www.w3.org/2000/svg" viewBox= "0 0 448 512"><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"></path></svg>
							</span>
						<span class="uagb-icon-active uagb-faq-icon-wrap">
								<svg xmlns="https://www.w3.org/2000/svg" viewBox= "0 0 448 512"><path d="M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z"></path></svg>
							</span>
			<span class="uagb-question">Up Selling, Cross Selling, je ne sais plus vraiment la différence, un p&#8217;tit rappel ?</span></div><div class="uagb-faq-content"><p>👉 L&#8217;<strong>Up Selling </strong>(montée en gamme) est le fait de <strong>partir d&#8217;un produit initial pour l&#8217;améliorer.</strong> Cela peut-être une option supplémentaire ou une modification de composant (ajouter de la mémoire RAM à un ordinateur, changer le potence d&#8217;un vélo pour en mettre une réhaussable &#8230;)<br>👉 Le <strong>Cross Selling</strong>, (vente croisée) est le fait d&#8217;<strong>ajouter un second produit en rapport avec le premier </strong>mais qui <strong>ne modifie pas son fonctionnement</strong> (un verre de protection sur un smartphone, une garantie &#8230;)</p></div></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">1.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> la non-conformité</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">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="1024" src="https://st9ph.fr/wp-content/uploads/2025/12/mauvaiseTaille.jpg" alt="" class="wp-image-31340" srcset="https://st9ph.fr/wp-content/uploads/2025/12/mauvaiseTaille.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/mauvaiseTaille-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/mauvaiseTaille-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/mauvaiseTaille-768x768.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>La non-conformité, c&#8217;est quand :</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;%23cf2e2e&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&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-25e7f15c-9cdb-418f-9d5d-d6f64556e130">
<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;%23cf2e2e&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-a36a8659-b934-4169-bc10-0643a89aefc3">
			<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="#cf2e2e" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Les spécificités </strong>du <strong>produit livré </strong>différent de celles du<strong> produit commandé</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 512 512&quot;&gt;&lt;path fill=&quot;%23cf2e2e&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-cd939e29-652a-40dd-a57d-a7476b153827">
			<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="#cf2e2e" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>
				</span>
				<span class="ub_list_item_text">le <strong>produit</strong> arrivé <strong>endommagé </strong>ou <strong>ne fonctionne pas</strong> correctement</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 512 512&quot;&gt;&lt;path fill=&quot;%23cf2e2e&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-0b304b25-e8f0-4bc2-81d8-dc35ab6f7d9b">
			<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="#cf2e2e" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>
				</span>
				<span class="ub_list_item_text">le produit ne dispose pas des <strong>propriétés annoncées</strong> ou <strong>attendues </strong>pour l&#8217;usage destiné (fiche produit trompeuse)</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 512 512&quot;&gt;&lt;path fill=&quot;%23cf2e2e&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-1949c8db-9803-4721-95db-ab92128ece64">
			<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="#cf2e2e" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>
				</span>
				<span class="ub_list_item_text">Le produit est <strong>incomplet</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 512 512&quot;&gt;&lt;path fill=&quot;%23cf2e2e&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-2e0852dd-b427-4d4b-bfc2-65a25dd185b1">
			<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="#cf2e2e" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>
				</span>
				<span class="ub_list_item_text">Le produit est livré avec un <strong>retard conséquent</strong></span>
			</div>
			
		</li>
</ul>


<div class="bloc-attention">
 ❌ Sur l&#8217;illustration, un produit <strong> livré en taille XL </strong>alors que le produit commandé était demandé <strong> en taille M.</strong> 
</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>
</div>



<p>➡️ Il s&#8217;agit clairement d&#8217;<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">une faute du commerçant</mark></strong> qui doit <strong>prendre à sa charge les frais de retours</strong> et <strong>le renvoi d&#8217;un produit conforme </strong>(ou son remboursement si le stock est épuisé). </p>



<p>❌ Dans le cas d&#8217;<strong>un mauvais fonctionnement</strong>, il y&#8217;a de fortes chances que le client <strong><mark style="background-color:rgba(0, 0, 0, 0);color:#dd2c2c" class="has-inline-color">préfère être remboursé</mark></strong>.</p>



<p class="has-base-2-background-color has-background">ℹ️ <strong>Vous êtes responsable </strong>même si la faute vient de <strong>vos fournisseurs </strong>(produits défectueux ou différents de ceux annoncés) ou de v<strong>os prestataires de livraison</strong> (produits endommagés pendant le transport) car <mark style="background-color:rgba(0, 0, 0, 0);color:#c93333" class="has-inline-color"><strong>c&#8217;est vous le vendeur</strong> et <strong>le seul interlocuteur du client </strong></mark>dans le contrat de vente. </p>



<p>👉🏻 Charge à vous de <strong>prévoir des pénalités</strong> avec vos prestataires pour vous dédommager.</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">
<p data-wp-context---core-fit-text="core/fit-text::{&quot;fontSize&quot;:&quot;&quot;}" data-wp-init---core-fit-text="core/fit-text::callbacks.init" data-wp-interactive data-wp-style--font-size="core/fit-text::context.fontSize" class="has-fit-text has-medium-font-size">Difficile parfois de trancher ! </p>



<div class="bloc-a-retenir">
🤔  Sur cette image envoyée par le client pour justifier un retour, on peut difficilement savoir si le produit est arrivé comme cela ou <strong>si c&#8217;est le client qui l&#8217;a accroché par manque de soin.</strong> 👉🏻
</div>

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



<p>💡 Pensez à définir u<strong>ne politique des gestes commerciaux q</strong>ui englobe :</p>



<ul class="wp-block-list">
<li>Quelles <strong>limites de tolérance</strong> accepter</li>



<li>Quelles <strong>règles de fidélité </strong>retenir : à quel niveau de panier moyen placer la possibilité d&#8217;un geste</li>
</ul>
</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="1024" height="1024" src="https://st9ph.fr/wp-content/uploads/2025/12/effiloch2.jpg" alt="" class="wp-image-31342" srcset="https://st9ph.fr/wp-content/uploads/2025/12/effiloch2.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/effiloch2-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/effiloch2-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/effiloch2-768x768.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</div>
</div>



<div class="resources-box">
<ul>
  <li>
    🌐
    <span class="resource-text">tout savoir sur la garantie légale de conformité sur le site de Bercy</span>
    <a class="resource-link" href="https://www.economie.gouv.fr/particuliers/mes-droits-conso/bien-consommer/tout-savoir-sur-la-garantie-legale-de-conformite#" target="_blank" rel="noopener">voir</a>
  </li>
</ul>
</div>



<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/st9ph-ico-sansTxt.png" alt="Logo St9ph">
      </a>

      <h2>Procédure des retours produits</h2>
    </div>

    <ul class="chapter-points">
      <li>Activer l&#8217;option dans le backoffice.</li>
      <li>Retours produits côté client</li>
      <li>Traitement du retour produit initié par le client</li>
      <li>Retour produit initiée et traitée à 100% côté boutique</li>
    </ul>
  </div>
</div>



<p class="has-text-align-center">✅ Le produit à retourner doit avoir un statut de <strong>paiement accepté</strong> et doit avoir été <strong>expédié</strong>.</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.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> Activer l&#8217;option dans le backoffice</strong></h3>



<div class="bloc-rappel">
🖥️ Lors de l&#8217;épreuve E5B, on se sera fait un malin plaisir de ❌<span style="color:red;">la désactiver</span> avant votre arrivée <strong>  mais c&#8217;est aussi son statut par défaut.</strong> </div>

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


<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-5dd6192f-5ddd-4fa0-80fd-5082e9c947b0">
<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-72e05e8f-882a-477a-8a69-c7ee92c5892e">
			<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">Vendre &gt; SAV &gt; <strong>retours produits </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-be507737-99c7-4375-b7b9-bf3af94dfc8f">
			<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">Activer les retours &gt; <strong><mark class="has-inline-color has-accent-color">OUI</mark></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-921d1a36-8792-4e7a-8a91-293bb56235dc">
			<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">Enregistrer</mark></strong></span>
			</div>
			
		</li>
</ul>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="784" height="400" src="https://st9ph.fr/wp-content/uploads/2024/12/image.png" alt="" class="wp-image-30373" srcset="https://st9ph.fr/wp-content/uploads/2024/12/image.png 784w, https://st9ph.fr/wp-content/uploads/2024/12/image-300x153.png 300w, https://st9ph.fr/wp-content/uploads/2024/12/image-768x392.png 768w" sizes="auto, (max-width: 784px) 100vw, 784px" /></figure>



<p>👉🏻 C&#8217;est pourquoi le nombre de jours après la livraison est <strong>défini par défaut à 14 </strong>mais vous pouvez l&#8217;augmenter.</p>



<p>Votre politique devra être <strong>précisée dans vos CGV</strong>, notamment si vous ne prenez pas en charge <strong>les frais de retour</strong> en cas de rétractation (sans quoi ils sont pour vous).</p>



<div class="bloc-a-retenir">
  ⚠️ Votre politique devra être <strong> précisée dans vos CGV,</strong> notamment si vous ne prenez pas en charge les frais de retour 🚚 en cas de rétractation (sans quoi ils sont pour vous).
</div>

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



<p class="has-base-2-background-color has-background">🔔 Tout dépendra de vos conditions de <a href="https://st9ph.fr/la-reassurance-dans-prestashop/" target="_blank" rel="noreferrer noopener">réassurance </a>mais, en tout cas, vous devez au minimum <strong>respecter vos obligations légales de garanties</strong> (vices cachés, produit non conforme …) conformément au <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://www.service-public.fr/particuliers/vosdroits/N10515" target="_blank" rel="noreferrer noopener">code de la consommation</a>.</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> Retours produits côté client</strong></h3>


<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-248cad8e-8dcf-4584-823f-1ab347335ec9">
<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-c48c6561-69c5-412c-a35f-1598a5eabdc9">
			<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">Depuis le <strong>front office</strong>, ouvrir un <strong><mark class="has-inline-color has-accent-color">compte client test</mark></strong>*</span>
			</div>
			
		</li>
</ul>


<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary>C&#8217;est quoi un compte test ?</summary>
<p>C&#8217;est un compte que vous avez crée pour un client imaginaire afin de tester certaines de vos améliorations depuis le front office (comme un client). Pour rappel, il est interdit de modifier le mot de passe d&#8217;un véritable client pour s&#8217;introduire sur son compte à sa place, même à sa demande.</p>
</details>



<div class="bloc-rappel">
ℹ️ Pour information, dans tous les modèles de boutique par défaut (My Store) vous disposez d&#8217;un compte client pour  <strong> John DOE (login : pub@prestashop.com / mdp : 123456789)</strong> </div>

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



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="611" height="67" src="https://st9ph.fr/wp-content/uploads/2024/12/image-1.png" alt="" class="wp-image-30375" srcset="https://st9ph.fr/wp-content/uploads/2024/12/image-1.png 611w, https://st9ph.fr/wp-content/uploads/2024/12/image-1-300x33.png 300w" sizes="auto, (max-width: 611px) 100vw, 611px" /></figure>


<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-cb3e8253-e3aa-4ee4-a29c-125029706764">
<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-2522586c-626a-43d6-9812-ab2c3ac4fe48">
			<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">Cliquer <strong>sur le nom</strong> (ou depuis le footer sur le lien &#8220;<mark class="has-inline-color has-accent-color">mon compte</mark>&#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-67d90161-9c85-409f-b8db-d5fb9dbda6d9">
			<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">Cliquer sur &#8220;<strong>historique et détail de mes commandes</strong>&#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-6c01d00f-f323-454f-9dd5-e37902b12cce">
			<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">Cliquer sur &#8220;<strong>détail</strong>&#8221; de la commande à retourner</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-80e81fcd-28d5-4bff-9d60-d399228032cb">
			<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">Cliquer sur ✅ <strong>la case à cocher</strong> à gauche du produit à retourner</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-c9132cb7-7322-4538-bc74-d472127c0c6d">
			<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">Indiquer la <strong>quantité de produit </strong>à retourner</span>
			</div>
			
		</li>
</ul>


<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="118" src="https://st9ph.fr/wp-content/uploads/2024/12/image-2-1024x118.png" alt="" class="wp-image-30376" srcset="https://st9ph.fr/wp-content/uploads/2024/12/image-2-1024x118.png 1024w, https://st9ph.fr/wp-content/uploads/2024/12/image-2-300x35.png 300w, https://st9ph.fr/wp-content/uploads/2024/12/image-2-768x88.png 768w, https://st9ph.fr/wp-content/uploads/2024/12/image-2.png 1095w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-base-2-background-color has-background">👆🏻 Sur l&#8217;exemple ci-dessus, le client demande à renvoyer <strong>1 des deux coussins</strong> 🐻 &#8220;ours brun&#8221; qu&#8217;il à reçus.</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 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;'); --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-c33af723-ae60-4c2a-9c38-2abb0579deff">
<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-4ec6b48a-2ebe-400f-aa6c-101080125f0e">
			<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 un message</strong> afin d&#8217;expliquer la raison du retour</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-5b84c779-e1a9-459d-85d3-9845bfb7e006">
			<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">cliquer sur 🟦&#8221;<strong><mark class="has-inline-color has-accent-color">RENVOYER UN PRODUIT</mark></strong>&#8220;</span>
			</div>
			
		</li>
</ul>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="669" height="231" src="https://st9ph.fr/wp-content/uploads/2024/12/image-3.png" alt="" class="wp-image-30377" srcset="https://st9ph.fr/wp-content/uploads/2024/12/image-3.png 669w, https://st9ph.fr/wp-content/uploads/2024/12/image-3-300x104.png 300w" sizes="auto, (max-width: 669px) 100vw, 669px" /></figure>



<p>➡️ Dans <em><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">&#8220;mon compte&#8221; &gt; &#8220;Retours produits&#8217;</mark></strong></em>, le client pourra voir<strong> l&#8217;état du traitement de son retour produit.</strong> Au départ, il est 🟡 &#8220;<strong><em>en attente de confirmation</em></strong>&#8220;</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="241" src="https://st9ph.fr/wp-content/uploads/2024/12/image-4-1024x241.png" alt="" class="wp-image-30378" srcset="https://st9ph.fr/wp-content/uploads/2024/12/image-4-1024x241.png 1024w, https://st9ph.fr/wp-content/uploads/2024/12/image-4-300x71.png 300w, https://st9ph.fr/wp-content/uploads/2024/12/image-4-768x181.png 768w, https://st9ph.fr/wp-content/uploads/2024/12/image-4.png 1048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<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.3 |</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> Traitement du retour produit initiée par le client</strong></h3>


<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-1ffd7974-4d87-4311-83e0-abd6c3b12102">
<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-bedddef5-552c-478d-8cda-5caf69fb9e2b">
			<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"><em><strong><mark class="has-inline-color has-accent-color">Vendre &gt; SAV &gt; Retours produits</mark></strong></em></span>
			</div>
			
		</li>
</ul>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="710" height="253" src="https://st9ph.fr/wp-content/uploads/2024/12/image-5.png" alt="" class="wp-image-30380" srcset="https://st9ph.fr/wp-content/uploads/2024/12/image-5.png 710w, https://st9ph.fr/wp-content/uploads/2024/12/image-5-300x107.png 300w" sizes="auto, (max-width: 710px) 100vw, 710px" /></figure>


<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-150cd6fa-288b-431f-9e35-4b241ce4d07f">
<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-ccaebbd3-34ee-48d1-9599-7d41bc309ecd">
			<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">Cliquer sur <strong>la ligne du retour à traiter</strong> pour obtenir les détails</span>
			</div>
			
		</li>
</ul>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="764" height="368" src="https://st9ph.fr/wp-content/uploads/2024/12/image-6.png" alt="" class="wp-image-30381" srcset="https://st9ph.fr/wp-content/uploads/2024/12/image-6.png 764w, https://st9ph.fr/wp-content/uploads/2024/12/image-6-300x145.png 300w" sizes="auto, (max-width: 764px) 100vw, 764px" /></figure>


<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-34fe8aef-de73-419a-99fd-f13dfa20e2d2">
<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-2080ba7b-9d01-4a19-b416-e8da5d95012b">
			<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">Indiquer <strong>la nouvelle étape</strong> au client</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-5cd9e448-15f0-44f6-aa11-116ff8039bae">
			<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">Enregistrer</mark></strong></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">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="378" height="373" src="https://st9ph.fr/wp-content/uploads/2024/12/image-9.png" alt="" class="wp-image-30385" srcset="https://st9ph.fr/wp-content/uploads/2024/12/image-9.png 378w, https://st9ph.fr/wp-content/uploads/2024/12/image-9-300x296.png 300w" sizes="auto, (max-width: 378px) 100vw, 378px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>En attente de confirmation</td><td>la demande est parvenue au BO</td></tr><tr><td>En attente du colis</td><td>le transporteur à pris en charge le produit à retourner</td></tr><tr><td>Colis reçu</td><td>notre dépôt a reçu la marchandise et attend un contrôle pour décider</td></tr><tr><td>Retour terminé ou refusé</td><td>le contrôle valide ou non la conformité du produit retourné</td></tr></tbody></table></figure>
</div>
</div>



<p>👉🏻 Vous pouvez notamment refuser le retour si </p>



<ul class="wp-block-list">
<li>📦 le produit <strong>à été déballé et utilisé </strong>(dans le cadre d&#8217;une rétractation), </li>



<li>📆 s&#8217;il arrive<strong> hors délais </strong>de retours ou  ❌ <strong>endommagé </strong>(précisez bien toutes les règles dans vos CGV) </li>



<li>si le produit <strong>est incomplet </strong>⁉️ ou <strong>différent de celui attendu</strong>.</li>
</ul>



<p>➡️ <strong>Le remboursement ou le bon d&#8217;achat</strong> compensatoire <strong><mark style="background-color:rgba(0, 0, 0, 0);color:#c34a4a" class="has-inline-color">n&#8217;est pas généré automatiquement</mark></strong>. Il faudra le demander :</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-3c3db0cf-0847-4a09-a404-1e35852a5004">
<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-0693d752-ad33-42a4-8d11-5b5db6dcc657">
			<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>Commandes </strong>&gt; <strong>cliquer sur la commande</strong> qui contient le produit à traiter &gt;<strong> remboursement partiel</strong></span>
			</div>
			
		</li>
</ul>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="682" height="128" src="https://st9ph.fr/wp-content/uploads/2024/12/image-12.png" alt="" class="wp-image-30390" srcset="https://st9ph.fr/wp-content/uploads/2024/12/image-12.png 682w, https://st9ph.fr/wp-content/uploads/2024/12/image-12-300x56.png 300w" sizes="auto, (max-width: 682px) 100vw, 682px" /></figure>


<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 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;'); --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-64b8c60a-2573-403f-81e3-20caa5649bad">
<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-cedd002a-5989-4765-9f83-b8ff94b2af2f">
			<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">Renseigner <strong>le nombre d&#8217;articles </strong>à rembourser (✅ le<strong> montant à rembourser </strong>s&#8217;affichera automatiquement)</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">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="293" height="194" src="https://st9ph.fr/wp-content/uploads/2024/12/image-11.png" alt="" class="wp-image-30388"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Vous disposez de trois options :</p>



<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>Remettre le produit en stock</td><td>dans le cas d&#8217;une rétractation si le produit revient dans son état d&#8217;origine</td></tr><tr><td>générer un avoir</td><td>que le client pourra utiliser à sa guise</td></tr><tr><td>générer un bon de réduction</td><td>très pratique car utilisable immédiatement sous la forme d&#8217;un coupon</td></tr></tbody></table></figure>
</div>
</div>


<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-0ddfb27b-2385-4889-a3dd-ee8b52ee62c7">
<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-189288ee-0d1e-466f-bdf2-d751709bc8ca">
			<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">Cliquer sur &#8220;<strong>remboursement partiel</strong>&#8220;</span>
			</div>
			
		</li>
</ul>


<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.4 |</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>Retour produit initié et traité à 100% côté boutique</strong></h3>


<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-e316507b-09d1-4fae-96c6-866fdb92d95e">
<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-3c37ac4f-5a6c-4733-a766-e40975e1da49">
			<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>Commandes </strong>&gt; <strong>cliquer sur la commande</strong> qui contient le produit à retourner &gt; <strong>retourner un produit</strong></span>
			</div>
			
		</li>
</ul>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="722" height="110" src="https://st9ph.fr/wp-content/uploads/2024/12/image-10.png" alt="" class="wp-image-30387" srcset="https://st9ph.fr/wp-content/uploads/2024/12/image-10.png 722w, https://st9ph.fr/wp-content/uploads/2024/12/image-10-300x46.png 300w" sizes="auto, (max-width: 722px) 100vw, 722px" /></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="293" height="194" src="https://st9ph.fr/wp-content/uploads/2024/12/image-11.png" alt="" class="wp-image-30388"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Vous disposez là encore de trois mêmes options :</p>



<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>Remettre le produit en stock</td><td>dans le cas d&#8217;une rétractation si le produit revient dans son état d&#8217;origine</td></tr><tr><td>générer un avoir</td><td>que le client pourra utiliser à sa guise</td></tr><tr><td>générer un bon de réduction</td><td>très pratique car utilisable immédiatement sous la forme d&#8217;un coupon</td></tr></tbody></table></figure>
</div>
</div>


<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-5a506a80-c973-4934-a33f-d835f9a13323">
<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-2f9ac9a3-efaa-42f9-b61f-46c689fb9ba7">
			<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">Cliquer sur &#8220;<strong>retourner les produits</strong>&#8220;</span>
			</div>
			
		</li>
</ul>


<p class="has-base-2-background-color has-background">ℹ️ Remarquez que dans le cas d&#8217;un retour géré entièrement en back office, <strong>vous gagnez une étape</strong> : retour et remboursement se font en une fois.</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">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>Reconditionnement de produits retournés</h2>
    </div>

    <ul class="chapter-points">
      <li>Remettre en vente le produit</li>
      <li>Gérer sa e-réputation</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">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="734" height="472" src="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2025-12-18-184341.jpg" alt="" class="wp-image-31357" srcset="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2025-12-18-184341.jpg 734w, https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2025-12-18-184341-300x193.jpg 300w" sizes="auto, (max-width: 734px) 100vw, 734px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👉🏻 Les <strong>produits défectueux ou non conformes</strong> qu&#8217;on va vous retourner vont bien souvent vous rester sur les bras.😐 Vous aurez <strong>dépensé de l&#8217;argent pour rien</strong> en les faisant revenir. </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;M352 96l64 0c17.7 0 32 14.3 32 32l0 256c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0c53 0 96-43 96-96l0-256c0-53-43-96-96-96l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-9.4 182.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L242.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z&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-bb3191f7-3d85-4300-9df6-848e41a03e8c">
<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;%23cf2e2e&quot; d=&quot;M352 96l64 0c17.7 0 32 14.3 32 32l0 256c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0c53 0 96-43 96-96l0-256c0-53-43-96-96-96l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-9.4 182.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L242.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-81f9bd2c-d016-457e-abb0-af21a7292965">
			<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="#cf2e2e" d="M352 96l64 0c17.7 0 32 14.3 32 32l0 256c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0c53 0 96-43 96-96l0-256c0-53-43-96-96-96l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-9.4 182.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L242.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong><mark style="color:#dd3939" class="has-inline-color">Dispensez les clients de les retourner</mark> </strong>sauf s&#8217;ils y tiennent absolument (produits encombrants par exemple). </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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M352 96l64 0c17.7 0 32 14.3 32 32l0 256c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0c53 0 96-43 96-96l0-256c0-53-43-96-96-96l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-9.4 182.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L242.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-150a948c-fb7c-4558-8dec-00c64ee05bc5">
			<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="#00d084" d="M352 96l64 0c17.7 0 32 14.3 32 32l0 256c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0c53 0 96-43 96-96l0-256c0-53-43-96-96-96l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-9.4 182.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L242.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>N&#8217;imposez le retour</strong> que si le produit est <mark style="color:#34a658" class="has-inline-color"><strong>réparable ou reconditionnable</strong>.</mark></span>
			</div>
			
		</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">3.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> Remettre le produit en vente</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">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="379" height="322" src="https://st9ph.fr/wp-content/uploads/2025/12/image-41.png" alt="" class="wp-image-31344" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-41.png 379w, https://st9ph.fr/wp-content/uploads/2025/12/image-41-300x255.png 300w" sizes="auto, (max-width: 379px) 100vw, 379px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>➡️ Une fois le produit retourné, <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">dupliquez votre produit de base</mark> </strong>pour en faire un produit reconditionné !</p>



<ul class="wp-block-list">
<li>pensez à n&#8217;inscrire qu&#8217;<strong>1 seul produit en stock </strong>(et à le défalquer du produit source si vous l&#8217;avez restocké pendant le retour).</li>



<li><strong>Baissez clairement votre prix e</strong>n l&#8217;indiquant <strong>en promo</strong> par rapport au produit neuf</li>
</ul>



<p class="has-base-2-background-color has-background">ℹ️ C&#8217;est dans <strong>la section &#8220;détails&#8221;</strong> de la fiche produit que <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">vous trouverez cette option.</mark></p>
</div>
</div>



<div class="bloc-astuce">
 💡Pourquoi ne pas faire <strong> un rayon &#8220;seconde vie&#8221; ? </strong> ♻️C&#8217;est dans l&#8217;air du temps de proposer du reconditionné.
</div>

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



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="515" src="https://st9ph.fr/wp-content/uploads/2025/12/image-43-1024x515.png" alt="" class="wp-image-31371" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-43-1024x515.png 1024w, https://st9ph.fr/wp-content/uploads/2025/12/image-43-300x151.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-43-768x386.png 768w, https://st9ph.fr/wp-content/uploads/2025/12/image-43.png 1164w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></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%">
<p class="has-base-2-background-color has-background">⚠️Attention aussi à<strong> un petit bug de conception </strong>du CMS. <strong>Prestashop confond &#8220;Nouveau&#8221; </strong>(ajouté récemment au catalogue) <strong>avec &#8220;Neuf&#8221;</strong>, ce qui peut être trompeur.</p>



<p class="has-text-align-right"> Ci-contre, <strong>le produit reconditionné </strong>à Gauche et le produit réellement neuf (jamais sorti des stocks) <strong>portent la même mention </strong>sur leur vignette : &#8220;Neuf&#8221;</p>



<p class="has-text-align-center"><a href="https://boutiq.st9ph.fr/recherche?controller=search&amp;s=pull+marin" target="_blank" rel="noreferrer noopener">Voir dans la boutique démo</a></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="645" height="520" src="https://st9ph.fr/wp-content/uploads/2025/12/image-49.png" alt="" class="wp-image-31400" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-49.png 645w, https://st9ph.fr/wp-content/uploads/2025/12/image-49-300x242.png 300w" sizes="auto, (max-width: 645px) 100vw, 645px" /></figure>
</div>
</div>



<p>👉🏻 C&#8217;est dans <strong>International- traductions &#8211; langage &#8211; Front Office &#8211; Français</strong> qu&#8217;on peut modifier l&#8217;étiquette pour qu&#8217;elle soit moins trompeuse</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-8e3f60a1-5084-4b3a-96a2-30074a414eb4">
<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-03c94537-5838-4877-b5d8-39ac8addfa7e">
			<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">tapez &#8220;<strong>neuf</strong>&#8221; dans le <strong>moteur de recherche</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-3597f1fc-266c-48af-a82f-0b9a0c2570c4">
			<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">dans <strong>ShopThemeCatalogue-1Channel,</strong> transformez &#8220;<strong>neuf</strong>&#8221; par &#8220;<strong>Ajout récent</strong>&#8221; (par exemple)</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-ac381308-917a-4d78-bedf-62e56cdf920d">
			<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">cliquer sur ⬛&#8221;<strong>Save</strong>&#8220;</span>
			</div>
			
		</li>
</ul>


<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="461" src="https://st9ph.fr/wp-content/uploads/2025/12/image-45-1024x461.png" alt="" class="wp-image-31374" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-45-1024x461.png 1024w, https://st9ph.fr/wp-content/uploads/2025/12/image-45-300x135.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-45-768x346.png 768w, https://st9ph.fr/wp-content/uploads/2025/12/image-45.png 1134w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>👉🏻 L&#8217;affichage sera<strong> moins trompeur</strong>.</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:33.33%">
<p>ℹ️ Le client n&#8217;a sinon, en effet, qu&#8217;<strong>un seul moyen de vérifier l&#8217;état</strong> neuf ou reconditionné de son produit, c&#8217;est en développant <strong>la section &#8220;détail du produit&#8221; </strong>de la fiche</p>



<p class="has-base-2-background-color has-background">👉C&#8217;est pourquoi je conseille d&#8217;<strong>ajouter la mention &#8220;seconde main&#8221; </strong>directement dans le titre du produit</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="780" height="556" src="https://st9ph.fr/wp-content/uploads/2025/12/image-46.png" alt="" class="wp-image-31376" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-46.png 780w, https://st9ph.fr/wp-content/uploads/2025/12/image-46-300x214.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-46-768x547.png 768w" sizes="auto, (max-width: 780px) 100vw, 780px" /></figure>
</div>
</div>



<p class="has-base-2-background-color has-background">ℹ️ Pour info, la maitrise de la section &#8220;international&#8221; <strong>n&#8217;est pas au référenciel </strong>de l&#8217;épreuve E5B, c&#8217;est pour votre connaissance personnelle. </p>



<p class="has-base-2-background-color has-background">✅ En revanche, <strong>les retours produits et la réaffectation d&#8217;un produit retourné en le dupliquant </strong>avec <strong>la mention reconditionnée</strong> et <strong>un prix spécifique</strong> est une suite de manipulations à maitriser</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">
<p data-wp-context---core-fit-text="core/fit-text::{&quot;fontSize&quot;:&quot;&quot;}" data-wp-init---core-fit-text="core/fit-text::callbacks.init" data-wp-interactive data-wp-style--font-size="core/fit-text::context.fontSize" class="has-fit-text">Pensez aussi à votre e-réputation !</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">3.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>Pensez aussi à votre ⭐ e-réputation !</strong></h3>



<div class="bloc-attention">
  ⚠️ <strong>Un client mécontent</strong> qui va partager son expérience malheureuse avec votre produit va plomber <span style="color:red;">  votre taux d&#8217;ajout au panier. </span>
</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>



<figure class="wp-block-image size-full is-style-zoooom"><img loading="lazy" decoding="async" width="541" height="270" src="https://st9ph.fr/wp-content/uploads/2025/12/image-47.png" alt="" class="wp-image-31392" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-47.png 541w, https://st9ph.fr/wp-content/uploads/2025/12/image-47-300x150.png 300w" sizes="auto, (max-width: 541px) 100vw, 541px" /></figure>
</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="1024" height="1024" src="https://st9ph.fr/wp-content/uploads/2025/12/mauvaiseTaille2.jpg" alt="" class="wp-image-31348" srcset="https://st9ph.fr/wp-content/uploads/2025/12/mauvaiseTaille2.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/mauvaiseTaille2-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/mauvaiseTaille2-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/mauvaiseTaille2-768x768.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</div>
</div>



<p>❌ Ne laissez pas un avis négatif <strong>sans réponse</strong> :</p>



<div class="wp-block-uagb-blockquote uagb-block-ab20fb47 uagb-blockquote__skin-border uagb-blockquote__stack-img-none"><blockquote class="uagb-blockquote"><div class="uagb-blockquote__content">Bonjour John, nous sommes vraiment navrés pour cette erreur de taille dans le produit que nous vous avons livré. Bien entendu, nous allons vous l&#8217;échanger gratuitement. Nous vous avons envoyé un mail avec l<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">a<span style="text-decoration: underline;"> procédure de retour </span></mark>et une 🎁 <strong>petite surprise </strong>pour nous excuser.</div><footer><div class="uagb-blockquote__author-wrap uagb-blockquote__author-at-left"><img decoding="async" class="" src="https://st9ph.fr/wp-content/uploads/2025/12/logo-1765013233-150x150.jpg" alt="" width="40" height="40" loading="lazy"/><cite class="uagb-blockquote__author">Service Clients | 19 dec 2025</cite></div></footer></blockquote></div>



<p>👉🏻 Chacun lisant cette réponse pourra :</p>



<ul class="wp-block-list">
<li>Constater que nous sommes <strong>réactifs </strong>: réponse le jour même.</li>



<li>que nous savons <strong>accepter nos tords</strong> et a<strong>ccorder des compensations (</strong>l&#8217;énigmatique surprise est surement un coupon réduction)</li>



<li>cliquer sur le lien pour <strong>voir la procédure </strong>car elle figure <strong>dans la FAQ </strong>(moyen élégant de monter au client que s&#8217;il avait cherché un peu, il aurait sur comment faire pour le retourner)</li>
</ul>



<div class="bloc-rappel">
 🖥️ A noter que <strong> le module d&#8217;avis de la boutique d&#8217;examen n&#8217;admet pas les réponses aux clients. </strong> vous ne serez donc pas amené(e) à gérer ce cas de figure. En revanche, <strong>cette question revient souvent à l&#8217;écrit.</strong> </div>

<style>
.bloc-rappel {
  border-left: 4px solid #1e73be;
  background: #f5f9ff;
  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" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="297" height="493" src="https://st9ph.fr/wp-content/uploads/2025/12/image-48.png" alt="" class="wp-image-31393" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-48.png 297w, https://st9ph.fr/wp-content/uploads/2025/12/image-48-181x300.png 181w" sizes="auto, (max-width: 297px) 100vw, 297px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p class="has-base-2-background-color has-background">👉🏻 N&#8217;oubliez pas que <strong>ce sont les extrêmes qui vont s&#8217;exprimer </strong>le plus : <strong>vos plus grands détracteurs </strong>😡 et <strong>vos plus grands promoteurs</strong> 🤩.</p>



<p>👈🏻 Ici, la fiche produit qui <strong>ne comporte qu&#8217;un seul avis négatif </strong>à 1 étoile <strong>risque d&#8217;être boudée </strong>par les visiteurs du rayon de votre EShop</p>



<p>Si la question se pose<strong> à l&#8217;épreuve écrite,</strong> n&#8217;oubliez pas :</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-6dbcc78d-f918-4ed5-8123-cc9cfff30edb">
<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;%2300d084&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;'); " id="ub-styled-list-item-0ca3008f-7931-4bdd-b174-116b8f0e4edf">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">d&#8217;<strong>être empathique</strong> (se mettre à la place du client pour lui montrer qu&#8217;<strong>on comprend son mécontentement</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&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;'); " id="ub-styled-list-item-7c56f721-b289-4892-93b6-869e8250c152">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>s&#8217;excuser pour la gêne occasionnée</strong> (si et seulement si on a commis une faute)</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&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;'); " id="ub-styled-list-item-37477398-ed3f-47c2-8b7c-13c6f94f625e">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Proposer une solution</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 512 512&quot;&gt;&lt;path fill=&quot;%23cf2e2e&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;'); " id="ub-styled-list-item-875c178d-92d0-4052-b720-93b52bb716b0">
			<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="#cf2e2e" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">Ne pas rebondir sur <strong>les éléments non factuels </strong>(ressenti en cherchant à <strong>se justifier absolument</strong> ou sous-entendre que <strong>le client est de mauvaise foi</strong>)</span>
			</div>
			
		</li>
</ul></div>
</div>



<p>👇🏻 Ce logigramme vise à montrer qu&#8217;hormis les cas incontournables <strong>de rétractation et de non conformité de la vente,</strong> les <strong>dédommagements</strong> liés aux retours / remboursements (non obligatoires) dépendront surtout de la <strong>politique des gestes commerciaux</strong> définie par le commerçant.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="866" height="813" src="https://st9ph.fr/wp-content/uploads/2025/12/image-42.png" alt="" class="wp-image-31354" style="aspect-ratio:1.0651944466996834;width:602px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-42.png 866w, https://st9ph.fr/wp-content/uploads/2025/12/image-42-300x282.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-42-768x721.png 768w" sizes="auto, (max-width: 866px) 100vw, 866px" /></figure>
</div>


<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-f0d51926243f90c9225e4963c4fb7b91" id="9-vers-l%C3%A9preuve-e5">🧑🏻‍🎓| Vers l&#8217;épreuve E5</h2>



<p>➡️ Vous serez amenés durant l&#8217;épreuve technique à <strong>évaluer si un produit peut être retourné ou pas. </strong>Vous devrez aussi <strong>motiver votre décision</strong> dans la réponse que vous lui ferez. Vérifiez :</p>



<ul class="wp-block-list">
<li>la <strong>date du bon de livraison</strong> pour savoir si le client est dans ses 14 jours (rétractation)</li>



<li>l<strong>a réalité de la situation</strong> (pas seulement ce qu&#8217;avance le client) <strong>en détaillant la commande passée</strong>. Parfois, c&#8217;est tout simplement le client qui s&#8217;est trompé de couleur ou de taille en constituant son panier.</li>
</ul>



<p class="has-base-2-background-color has-background">⚠️<strong>En aucun cas</strong> vous ne devrez prendre l&#8217;initiative d&#8217;<strong>un geste commercial</strong> durant l&#8217;épreuve <strong>sauf si c&#8217;est demandé clairement </strong>ou si <strong>les annexes de sujet </strong>vous indiquent que la politique en vigueur dans la EShop y est <strong>favorable</strong>. Jetez aussi un œil à la <strong>réassurance </strong>et aux <strong>CGV</strong>, il y&#8217;a peut-être des infos à prendre.</p>



<p>👉🏻 A l&#8217;écrit, la problématique de la <strong>E-Réputation</strong>, <strong>le discours à adopter en service client</strong> et, donc, la <strong>connaissance légale</strong> de cette problématique est très souvent au menu !</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">

<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%2Fprestashop-cas-de-retours-produits%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>



<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">🛠️ création de sites</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-uagb-post-grid uagb-post-grid  uagb-post__image-position-top uagb-post__image-enabled uagb-block-3f89f48f     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="4" style="">

												<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="732" height="259" src="https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop.jpg 732w, https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop-300x106.jpg 300w" sizes="auto, (max-width: 732px) 100vw, 732px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/" target="_self" rel="bookmark noopener noreferrer">Prestashop | OP Com dans la Eshop</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-02-17T18:27:24+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					17 février 2026				</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>PrestaShop | 💥OP Com dans la Eshop ➡️ Que ce soit pour &#8230; vider les&#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/prestashop-op-com-dans-la-eshop/" 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/prestashop-le-service-apres-vente/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="840" height="248" src="https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech.jpg 840w, https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech-300x89.jpg 300w, https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech-768x227.jpg 768w" sizes="auto, (max-width: 840px) 100vw, 840px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-le-service-apres-vente/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Le Service Après Vente</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-24T16:55:00+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					24 janvier 2026				</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'>
					SAV prestashop,, commande prestashop en backoffice, messages prédéfinis prestashop

				</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/prestashop-le-service-apres-vente/" 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/prestashop-manipuler-la-boutique/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="736" height="226" src="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958.jpg 736w, https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958-300x92.jpg 300w" sizes="auto, (max-width: 736px) 100vw, 736px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-manipuler-la-boutique/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Manipuler la boutique</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-22T14:40:35+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					22 janvier 2026				</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>PrestaShop | Manipuler la boutique 🏪 👉🏻 2nd bloc d&#8217;évaluation de l&#8217;épreuve technique, les manipulations&#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/prestashop-manipuler-la-boutique/" 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/prestashop-la-fiche-produit/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="769" height="245" src="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-144419.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-144419.jpg 769w, https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-144419-300x96.jpg 300w" sizes="auto, (max-width: 769px) 100vw, 769px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-la-fiche-produit/" target="_self" rel="bookmark noopener noreferrer">Prestashop | La Fiche Produit par l&#8217;exemple</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-16T22:44:19+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					16 janvier 2026				</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>PrestaShop | La Fiche Produit 🎧 Ecouter l&#8217;introduction audio 👉🏻 1er bloc d&#8217;évaluation de l&#8217;épreuve&#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/prestashop-la-fiche-produit/" 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/prestashop-cas-de-retours-produits/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="723" height="199" src="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925.jpg 723w, https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925-300x83.jpg 300w" sizes="auto, (max-width: 723px) 100vw, 723px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-cas-de-retours-produits/" target="_self" rel="bookmark noopener noreferrer">Prestashop | les retours produits</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-12-18T19:06:17+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					18 décembre 2025				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Un commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>restaShop | Les retours produits 🔙 ➡️ Il faut savoir que les différents scénarios devront&#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/prestashop-cas-de-retours-produits/" 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/prestashop-nouveautes-de-la-version-9/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="307" src="https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-1024x349.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-1024x349.png 1024w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-300x102.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-768x262.png 768w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9.png 1059w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-nouveautes-de-la-version-9/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Nouveautés de la version 9</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-11-19T10:45:25+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					19 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>Une nouvelle version du CMS pose quelques améliorations au Backoffice et un nouveau thème en&#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/prestashop-nouveautes-de-la-version-9/" 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/prestashop-cas-de-retours-produits/">Prestashop | les retours produits</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://st9ph.fr/prestashop-cas-de-retours-produits/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">31333</post-id>	</item>
		<item>
		<title>WordPress &#124; trucs et astuces pour embellir vos articles</title>
		<link>https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/</link>
					<comments>https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/#respond</comments>
		
		<dc:creator><![CDATA[St9ph]]></dc:creator>
		<pubDate>Mon, 15 Dec 2025 18:56:51 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[🛠️ création de sites]]></category>
		<category><![CDATA[🌐 public]]></category>
		<category><![CDATA[bloc html personnalisé]]></category>
		<category><![CDATA[créer des compositions]]></category>
		<category><![CDATA[emoji dans wordpress]]></category>
		<category><![CDATA[infographie dans wordpress]]></category>
		<category><![CDATA[instant image dans wordpress]]></category>
		<category><![CDATA[spectra counter]]></category>
		<guid isPermaLink="false">https://st9ph.fr/?p=31267</guid>

					<description><![CDATA[<p>WordPress &#124; trucs et astuces pour embellir vos articles ✨ Un petit tour d&#8217;horizon 🌤️ de petits tips, méthodes et outils que, je l&#8217;espère, vous trouverez utiles pour rendre vos articles plus esthétiques que le traditionnel enchainement paragraphes &#8211; images.. ➡️ Cet article va évoluer avec le temps, au fur-et-à-mesure que je penserai à d&#8217;autres ... <a title="WordPress &#124; trucs et astuces pour embellir vos articles" class="read-more" href="https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/" aria-label="En savoir plus sur WordPress &#124; trucs et astuces pour embellir vos articles">Lire la suite</a></p>
<p>L’article <a href="https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/">WordPress | trucs et astuces pour embellir vos articles</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 loading="lazy" 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> | trucs et astuces pour embellir vos articles ✨</p>



<p>Un petit tour d&#8217;horizon 🌤️ de petits <strong>tips</strong>, <strong>méthodes </strong>et <strong>outils </strong>que, je l&#8217;espère, vous trouverez utiles pour rendre vos articles plus esthétiques que le traditionnel enchainement paragraphes &#8211; images.. </p>



<div class="bloc-rappel">
 ➡️ Cet article va <strong>évoluer avec le temps</strong>, au fur-et-à-mesure que je penserai à d&#8217;autres trucs. 👀 <strong>Revenez de temps en temps par ici au cas où &#8230;</strong> </div>

<style>
.bloc-rappel {
  border-left: 4px solid #1e73be;
  background: #f5f9ff;
  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" style="flex-basis:33.33%"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" 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-28f55322-6883-42b1-8fa3-67ce54e7cd76">
			<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-28f55322-6883-42b1-8fa3-67ce54e7cd76-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-28f55322-6883-42b1-8fa3-67ce54e7cd76-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-28f55322-6883-42b1-8fa3-67ce54e7cd76-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-28f55322-6883-42b1-8fa3-67ce54e7cd76-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-28f55322-6883-42b1-8fa3-67ce54e7cd76-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-28f55322-6883-42b1-8fa3-67ce54e7cd76-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-28f55322-6883-42b1-8fa3-67ce54e7cd76-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-28f55322-6883-42b1-8fa3-67ce54e7cd76-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-28f55322-6883-42b1-8fa3-67ce54e7cd76-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-28f55322-6883-42b1-8fa3-67ce54e7cd76-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-332e815c-4761-4810-8fe0-13fd6e5c95fe">
			<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-332e815c-4761-4810-8fe0-13fd6e5c95fe-0"><rect height="150" width="150" 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-332e815c-4761-4810-8fe0-13fd6e5c95fe-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-332e815c-4761-4810-8fe0-13fd6e5c95fe-1"><rect height="150" width="150" 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-332e815c-4761-4810-8fe0-13fd6e5c95fe-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-332e815c-4761-4810-8fe0-13fd6e5c95fe-2"><rect height="150" width="150" 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-332e815c-4761-4810-8fe0-13fd6e5c95fe-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-332e815c-4761-4810-8fe0-13fd6e5c95fe-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-332e815c-4761-4810-8fe0-13fd6e5c95fe-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-332e815c-4761-4810-8fe0-13fd6e5c95fe-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-332e815c-4761-4810-8fe0-13fd6e5c95fe-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-6e392d21-2752-4e75-b4f8-a244ac824685">
			<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-6e392d21-2752-4e75-b4f8-a244ac824685-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-6e392d21-2752-4e75-b4f8-a244ac824685-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-6e392d21-2752-4e75-b4f8-a244ac824685-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-6e392d21-2752-4e75-b4f8-a244ac824685-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-6e392d21-2752-4e75-b4f8-a244ac824685-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-6e392d21-2752-4e75-b4f8-a244ac824685-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-6e392d21-2752-4e75-b4f8-a244ac824685-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-6e392d21-2752-4e75-b4f8-a244ac824685-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-6e392d21-2752-4e75-b4f8-a244ac824685-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-6e392d21-2752-4e75-b4f8-a244ac824685-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">10–15 minutes</div>


<p>|</p>


<div class="wp-block-post-time-to-read">2 427 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-02-23T17:21:09+01:00">23 février  2026</time></div></div>


				<div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-bf6347d1      uagb-toc__collapse--list"
					data-scroll= "1"
					data-offset= "30"
					style=""
				>
				<div class="uagb-toc__wrap">
						<div class="uagb-toc__title">
							Au menu :						</div>
												<div class="uagb-toc__loader"></div>										<div class="uagb-toc__list-wrap uagb-toc__list-hidden">
						<ol class="uagb-toc__list"><li class="uagb-toc__list "><a href="#1-les-emoji-pour-renforcer-votre-texte" class="uagb-toc-link__trigger">1️⃣| les emoji pour renforcer votre texte</a><li class="uagb-toc__list "><a href="#2-utilisez-toutes-les-possibilités-de-vos-blocs" class="uagb-toc-link__trigger">2️⃣| utilisez toutes les possibilités de vos blocs</a><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#3-illustrez-facilement-vos-contenus" class="uagb-toc-link__trigger">3️⃣| Illustrez facilement vos contenus</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#3-1-instant-images-une-bibliothèque-libre-de-droits" class="uagb-toc-link__trigger">3-1 | Instant Images, une bibliothèque libre de droits</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#3-2-utilisez-lia-pour-générer-des-images" class="uagb-toc-link__trigger">3-2 | Utilisez l&#039;IA pour générer des images</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#3-3-utilisez-des-contrôles-dynamiques-pour-vos-media" class="uagb-toc-link__trigger">3-3 | Utilisez des contrôles dynamiques pour vos media</a></li></ul></li><li class="uagb-toc__list "><a href="#4-linfographie-plutôt-que-des-mots" class="uagb-toc-link__trigger">4️⃣| L&#039;infographie plutôt que des mots</a><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#4-un-soupçon-de-html" class="uagb-toc-link__trigger">4️⃣| Un soupçon de HTML</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#4-1-utiliser-des-blocs-html-personnalisés" class="uagb-toc-link__trigger">4-1 | Utiliser des blocs HTML personnalisés</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#4-2-les-enregistrer-sous-forme-de-compositions" class="uagb-toc-link__trigger">4-2 | Les enregistrer sous forme de compositions</a></ul></ul></ol>					</div>
									</div>
				</div>
			


<!-- =====================================================
     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>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-e9724785736f3d193dc1146d0eea03b9" id="0-1%EF%B8%8F%E2%83%A3-les-emoji-pour-renforcer-votre-texte">1️⃣| les emoji pour renforcer votre texte</h2>



<div class="bloc-attention">
  ⚠️ <span style="color:red;">A utiliser avec modération</span>, <strong>les emoji </strong>vont traduire <strong>vos humeurs et votre ton</strong>. 👍Cela ajoute de la convivialité.
</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>



<p>🖥️ La manipulation est simplissime <strong>sous Windows</strong>. Durant votre saisie dans une bloc paragraphe ou autre, à l&#8217;endroit ou vous voulez voir apparaitre le smiley :</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 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;'); --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-8eac6e08-61d1-4666-a39a-1d85f03188de">
<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-f59931a4-2f39-4724-b6dc-052e5e590ff0">
			<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>combinez </strong>les touches <strong>Windows </strong>et <strong>Point</strong></span>
			</div>
			
		</li>
</ul>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="672" height="403" src="https://st9ph.fr/wp-content/uploads/2025/12/image-32.png" alt="" class="wp-image-31269" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-32.png 672w, https://st9ph.fr/wp-content/uploads/2025/12/image-32-300x180.png 300w" sizes="auto, (max-width: 672px) 100vw, 672px" /></figure>


<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-7f4c2573-bda6-40ec-848d-faa9b7b53056">
<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-57b5fce0-9493-49e5-a5fb-d3c6ea4cfc52">
			<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électionnez l&#8217;emoji</strong> souhaité (ou recherchez le dans la barre)</span>
			</div>
			
		</li>
</ul>


<p>Le tour est joué ! 👌</p>



<p class="has-base-2-background-color has-background"><strong>Avec un Mac</strong>, je ne sais pas <strong>et je ne veux pas savoir.</strong> 😉</p>



<p>A l&#8217;examen, <strong>vous aurez un PC sous Windows</strong>, de toute manière. 😛</p>



<div class="bloc-astuce">
  ⌨️ <strong>Allez ! Parce que c&#8217;est vous </strong>:  🍏 <span style="color:green;">Pour la pomme croquée</span>, c&#8217;est <strong>Command + Ctrl + espace</strong>.
</div>

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



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-b4de4b42214a77762f9400a9b67c9851" id="1-2%EF%B8%8F%E2%83%A3-utilisez-toutes-les-possibilit%C3%A9s-de-vos-blocs">2️⃣| utilisez toutes les possibilités de vos blocs</h2>



<p>👉 Les blocs n&#8217;exposent pas <strong>tous leurs atouts</strong> sur la barre d&#8217;outils, <strong>cliquez sur la Flèche ▽ </strong>pour les découvrir tous.</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:33.33%"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="193" height="421" src="https://st9ph.fr/wp-content/uploads/2025/12/image-151.png" alt="" class="wp-image-33104" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-151.png 193w, https://st9ph.fr/wp-content/uploads/2025/12/image-151-138x300.png 138w" sizes="auto, (max-width: 193px) 100vw, 193px" /></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>👈 ici, celle <strong>des paragraphes </strong>(mais tous ceux qui proposent de la saisie on la même)<strong>.</strong> </p>



<p>Vous n&#8217;êtes pas obligé(e), par exemple, d&#8217;<strong>appliquer la couleur du paragraphe à tout le texte</strong>.</p>



<p class="has-text-align-center has-large-font-size"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">G</mark><mark style="background-color:rgba(0, 0, 0, 0);color:#f79834" class="has-inline-color">o</mark><mark style="background-color:rgba(0, 0, 0, 0);color:#69cb46" class="has-inline-color">o</mark><mark style="background-color:rgba(0, 0, 0, 0);color:#c434bd" class="has-inline-color">g</mark>l<mark style="background-color:rgba(0, 0, 0, 0);color:#3ca0bf" class="has-inline-color">e</mark><img loading="lazy" decoding="async" width="150" height="32" class="wp-image-33105" style="width: 150px;" src="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-18-210403.jpg" alt=""></p>



<p class="has-base-2-background-color has-background">Pour la construction ci-dessus, <strong>j&#8217;ai juste utilisé un bloc paragraphe</strong> que j&#8217;ai <strong>centré </strong>et demandé <strong>en taille L</strong>. J&#8217;ai ensuite <strong>changé la couleur de chaque lettre </strong>avec l&#8217;outil &#8220;<strong>mettre en évidence</strong>&#8220;, puis j&#8217;ai <strong>ajouté un screenshot </strong>directement dans le bloc avec l&#8217;outil &#8220;<strong>image en ligne</strong>&#8220;.</p>
</div>
</div>



<p>On verra plus loin comment <strong>faire une infographie avec le contrôle Numbers </strong>de Spectra mais il y&#8217;en a plein d&#8217;autres qui sont sous-utilisés.</p>



<p>👉 Vous pouvez aussi installer <strong>d&#8217;autres blocs par le biais d&#8217;extensions</strong>. Ici, le contrôle 🖼️ Image <strong>d&#8217;Ultimate Blocks</strong> qui permet <strong>d&#8217;encadrer, de rogner, de recolorier </strong>&#8230;</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-ub-image size-large is-style-framed wp-duotone-unset-1" id="ub-image-"><img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-229.png" alt="" class="wp-image-1" style="border-top: 0px none; border-right: 0px none; border-bottom: 0px none; border-left: 0px none; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; "></figure></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><figure class="wp-block-ub-image size-large wp-duotone-grayscale" id="ub-image-"><img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-229.png" alt="" class="wp-image-1" style=""></figure></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><figure class="wp-block-ub-image size-large is-style-circle wp-duotone-rgb1175555-rgba25145209026-2" id="ub-image-"><img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-229-edited-1.png" alt="" class="wp-image-1" style="border-top:  #52a2d3; border-right:  #52a2d3; border-bottom:  #52a2d3; border-left:  #52a2d3; "></figure></div>
</div>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-8d9b27b73151d5a4080de2616557aacf" id="2-3%EF%B8%8F%E2%83%A3-illustrez-facilement-vos-contenus">3️⃣| Illustrez facilement vos contenus</h2>



<div class="bloc-attention">
  ⚠️ <strong>Attention :</strong>  à l&#8217;examen NDRC E5B, vous devrez vous contenter de ce qu&#8217;il y&#8217;a déjà dans la médiathèque et, éventuellement, des media contenus dans le dossier du bureau en rapport avec votre sujet.
</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>



<p class="has-text-color has-link-color wp-elements-df0b86825db5a4c5f1d03ca7167f1e01" style="color:#d13636">❌ L&#8217;usage des outils vu dans <strong>les deux premières sections</strong> de cette partie est <strong>proscrite</strong> (sauf consignes contraires dans le sujet).</p>



<h3 class="wp-block-heading" id="3-3-1-instant-images-une-biblioth%C3%A8que-libre-de-droits-">3-1 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Instant Images, une bibliothèque libre de droits</mark></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">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="567" height="265" src="https://st9ph.fr/wp-content/uploads/2025/12/image-33.png" alt="" class="wp-image-31273" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-33.png 567w, https://st9ph.fr/wp-content/uploads/2025/12/image-33-300x140.png 300w" sizes="auto, (max-width: 567px) 100vw, 567px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-base-2-background-color has-background">Instant Images est <strong>une extension gratuite </strong>qui permet de <strong>téléverser directement des images </strong>des <strong>bibliothèques en ligne</strong> gratuites (libres de droit). <a href="https://unsplash.com/fr" target="_blank" rel="noreferrer noopener">Unsplash</a>, <a href="https://openverse.org/fr" target="_blank" rel="noreferrer noopener">Openverse</a>, <a href="https://pixabay.com/fr/" target="_blank" rel="noreferrer noopener">Pixabay</a>, <a href="https://www.pexels.com/fr-fr/" target="_blank" rel="noreferrer noopener">Pexels</a> et <a href="https://giphy.com/" target="_blank" rel="noreferrer noopener">Giphy</a>.</p>



<p></p>



<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary>C&#8217;est quoi une image libre de droits ❓</summary>
<p>C&#8217;est une image dont l&#8217;auteur (photographe, designer, dessinateur &#8230; ) a <strong>abandonné les droits de propriétés</strong>, ce qui vous évite de demander une autorisation est <strong>de légender un © </strong>copyright (alt+ 0169)</p>
</details>
</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>Cette extension vous donnera <strong>un choix supplémentaire </strong>du <strong>menu Médias</strong> dans <strong>le tableau de Bord </strong>de votre Back Office.</p>



<ul class="wp-block-list">
<li><strong>Cliquer</strong> dessus</li>
</ul>
</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="368" height="201" src="https://st9ph.fr/wp-content/uploads/2025/12/image-34.png" alt="" class="wp-image-31276" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-34.png 368w, https://st9ph.fr/wp-content/uploads/2025/12/image-34-300x164.png 300w" sizes="auto, (max-width: 368px) 100vw, 368px" /></figure>
</div>
</div>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="944" height="731" src="https://st9ph.fr/wp-content/uploads/2025/12/image-35.png" alt="" class="wp-image-31278" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-35.png 944w, https://st9ph.fr/wp-content/uploads/2025/12/image-35-300x232.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-35-768x595.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<ul class="wp-block-list">
<li>tapez <strong>un mot clé</strong> dans le moteur de recherche</li>



<li><strong>Choisissez votre source</strong> parmi  <a href="https://unsplash.com/fr" target="_blank" rel="noreferrer noopener">Unsplash</a>, <a href="https://openverse.org/fr" target="_blank" rel="noreferrer noopener">Openverse</a>, <a href="https://pixabay.com/fr/" target="_blank" rel="noreferrer noopener">Pixabay</a>, <a href="https://www.pexels.com/fr-fr/" target="_blank" rel="noreferrer noopener">Pexels</a> et <a href="https://giphy.com/" target="_blank" rel="noreferrer noopener">Giphy</a>.</li>



<li><strong>Cliquez sur l&#8217;image</strong> que vous préférez, elle sera directement téléversée dans la médiathèque</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="692" height="256" src="https://st9ph.fr/wp-content/uploads/2025/12/image-36.png" alt="" class="wp-image-31281" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-36.png 692w, https://st9ph.fr/wp-content/uploads/2025/12/image-36-300x111.png 300w" sizes="auto, (max-width: 692px) 100vw, 692px" /></figure>



<p class="has-base-2-background-color has-background">ℹ️ A noter que <a href="https://giphy.com/" target="_blank" rel="noreferrer noopener">Giphy</a> est plus une banque  <strong>animées</strong> mais pourquoi pas ! </p>



<h3 class="wp-block-heading" id="4-3-2-utilisez-lia-pour-g%C3%A9n%C3%A9rer-des-images-">3-2 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Utilisez l&#8217;IA pour générer des images</mark></h3>



<p><a href="https://gemini.google.com/app?hl=fr" target="_blank" rel="noreferrer noopener"><strong>Google Gemini</strong> </a> (par exemple) donne la possibilité de <strong>créer gratuitement  des images </strong>pour illustrer vos articles. le nombre d&#8217;essais par jour est  toutefois limité.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="784" height="313" src="https://st9ph.fr/wp-content/uploads/2025/12/image-37.png" alt="" class="wp-image-31284" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-37.png 784w, https://st9ph.fr/wp-content/uploads/2025/12/image-37-300x120.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-37-768x307.png 768w" sizes="auto, (max-width: 784px) 100vw, 784px" /></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:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="467" height="253" src="https://st9ph.fr/wp-content/uploads/2025/12/image-38.png" alt="" class="wp-image-31285" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-38.png 467w, https://st9ph.fr/wp-content/uploads/2025/12/image-38-300x163.png 300w" sizes="auto, (max-width: 467px) 100vw, 467px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<div class="bloc-a-retenir">
  👉🏻 <strong>Le premier essai </strong>sera parfois différent de ce que vous imaginiez mais <strong>vous pouvez lui demander de corriger !</strong>
</div>

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



<p>👈🏻 Ici, je trouve que la façon dont sont habillées <strong>les trois jeunes femmes </strong>sont trop semblables et que <strong>le fond </strong>fait trop &#8220;English College&#8221;.</p>
</div>
</div>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="784" height="638" src="https://st9ph.fr/wp-content/uploads/2025/12/image-39.png" alt="" class="wp-image-31286" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-39.png 784w, https://st9ph.fr/wp-content/uploads/2025/12/image-39-300x244.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-39-768x625.png 768w" sizes="auto, (max-width: 784px) 100vw, 784px" /></figure>



<div class="bloc-rappel">
 💡 <strong>Petit tips, Dites lui &#8220;merci&#8221; </strong> quand vous obtenez un résultat qui lui convient, <span style="color:blue;">même si je suis d&#8217;accord avec vous, c&#8217;est débile de dire merci à une machine.</span> Notez aussi que <span style="
    background:#fff3cd;
    padding:2px 6px;
    border-radius:4px;
  ">
 j&#8217;ai fait une faute de frappe dans ma requête </span>mais qu&#8217;il a compris quand-même !😁</div>

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



<p><strong> Deux utilités</strong> si vous le faites :</p>



<ul class="wp-block-list">
<li><strong> Gemini apprend vos gouts</strong> et oriente son travail sur ce qui vous satisfait (machine learning)</li>



<li>Ca vous donne <strong>des tentatives </strong>journalières <strong>supplémentaires</strong> si vous êtes poli(e).</li>
</ul>



<h3 class="wp-block-heading" id="5-3-3-utilisez-des-contr%C3%B4les-dynamiques-pour-vos-media-">3-3 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Utilisez des contrôles dynamiques pour vos media</mark></h3>



<p>Voici un aperçu de <strong>trois contrôles</strong> qui permettent d&#8217;<strong>aménager un contenu riche en illustrations</strong> afin de <strong>ne pas saturer l&#8217;espace</strong> de votre article (et créer un déséquilibre)</p>



<p>J&#8217;ai utilisé les illustrations de <a href="https://digi.st9ph.fr/vendeur-chez-decathlon-plus-qu-un-metier/" target="_blank" rel="noreferrer noopener">cet article du blog d&#8217;entrainement </a>en exemple.</p>



<!-- 👆 ASTUCE ÉTUDIANTS : penser à cliquer sur tous les onglets -->
<div class="tabs-hint">
  <span class="tabs-hint-icon">👇</span>
  <span class="tabs-hint-text">
    <strong>cliquer sur les onglets</strong> pour voir les différentes compositions.
  </span>
</div>

<style>
.tabs-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-left: 4px solid #1e73be; /* bleu sobre */
  background: #f8fafc;
  color: #0f172a;
  font-size: 14px;
  border-radius: 6px;
  animation: hintFadeIn 0.6s ease-out;
}

.tabs-hint-icon {
  font-size: 18px;
  animation: hintBounce 1.6s ease-in-out infinite;
}

@keyframes hintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes hintFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>



<div class="wp-block-uagb-tabs uagb-block-b64e8e48 uagb-tabs__wrap uagb-tabs__hstyle1-desktop uagb-tabs__vstyle6-tablet uagb-tabs__stack1-mobile" data-tab-active="0"><ul class="uagb-tabs__panel uagb-tabs__align-left" role="tablist"><li class="uagb-tab uagb-tabs__active" role="none"><a href="#uagb-tabs__tab0" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="0" role="tab"><div>La Story</div></a></li><li class="uagb-tab " role="none"><a href="#uagb-tabs__tab1" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="1" role="tab"><div>Le Diaporama</div></a></li><li class="uagb-tab " role="none"><a href="#uagb-tabs__tab2" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="2" role="tab"><div>La Galerie</div></a></li></ul><div class="uagb-tabs__body-wrap">
<div class="wp-block-uagb-tabs-child uagb-tabs__body-container uagb-inner-tab-0" aria-labelledby="uagb-tabs__tab0">
<p>Dans la <strong>section Medi</strong>a, vous trouverez le bloc story, qui permet d&#8217;<strong>ouvrir automatiquement un onglet Story</strong> pour jouer une histoire à partir d&#8217;images et de vidéos (que vous pouvez mixer) depuis votre médiathèque. <strong>cliquez sur la Story ci-dessous</strong> pour la jouer.</p>


<div class="wp-block-jetpack-story wp-story aligncenter" data-id="wp-story-31267-1" data-settings="{&#34;slides&#34;:[{&#34;id&#34;:31302,&#34;type&#34;:&#34;image&#34;,&#34;link&#34;:&#34;https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/anim-sport/#main&#34;,&#34;title&#34;:&#34;anim-sport&#34;,&#34;caption&#34;:&#34;les animations sont l&#39;occasion de partager autrement avec notre client\u00e8le.&#34;,&#34;alt&#34;:&#34;&#34;,&#34;url&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/anim-sport.jpg&#34;,&#34;mime&#34;:&#34;image/jpeg&#34;,&#34;width&#34;:1024,&#34;height&#34;:1024,&#34;srcset&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/anim-sport.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/anim-sport-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/anim-sport-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/anim-sport-768x768.jpg 768w&#34;,&#34;sizes&#34;:&#34;(max-width: 460px) 576w, (max-width: 614px) 768w, 120vw&#34;},{&#34;id&#34;:31301,&#34;type&#34;:&#34;image&#34;,&#34;link&#34;:&#34;https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/depan/#main&#34;,&#34;title&#34;:&#34;depan&#34;,&#34;caption&#34;:&#34;On doit aussi prendre soin de notre surface de vente, sa propret\u00e9, son rangement et ... son \u00e9clairage !&#34;,&#34;alt&#34;:&#34;&#34;,&#34;url&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/depan.jpg&#34;,&#34;mime&#34;:&#34;image/jpeg&#34;,&#34;width&#34;:1024,&#34;height&#34;:1024,&#34;srcset&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/depan.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/depan-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/depan-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/depan-768x768.jpg 768w&#34;,&#34;sizes&#34;:&#34;(max-width: 460px) 576w, (max-width: 614px) 768w, 120vw&#34;},{&#34;id&#34;:31308,&#34;type&#34;:&#34;image&#34;,&#34;link&#34;:&#34;https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/groupe/#main&#34;,&#34;title&#34;:&#34;groupe&#34;,&#34;caption&#34;:&#34;La coh\u00e9sion d&#39;\u00e9quipe est un crit\u00e8re d\u00e9terminant de r\u00e9ussite.&#34;,&#34;alt&#34;:&#34;&#34;,&#34;url&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/groupe.jpg&#34;,&#34;mime&#34;:&#34;image/jpeg&#34;,&#34;width&#34;:1024,&#34;height&#34;:1024,&#34;srcset&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/groupe.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/groupe-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/groupe-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/groupe-768x768.jpg 768w&#34;,&#34;sizes&#34;:&#34;(max-width: 460px) 576w, (max-width: 614px) 768w, 120vw&#34;},{&#34;id&#34;:31305,&#34;type&#34;:&#34;image&#34;,&#34;link&#34;:&#34;https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/info-cli/#main&#34;,&#34;title&#34;:&#34;info-cli&#34;,&#34;caption&#34;:&#34;Maya dispose d&#39;une base d&#39;information pour l&#39;aider \u00e0 conseiller ses clients&#34;,&#34;alt&#34;:&#34;&#34;,&#34;url&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/info-cli.jpg&#34;,&#34;mime&#34;:&#34;image/jpeg&#34;,&#34;width&#34;:1024,&#34;height&#34;:1024,&#34;srcset&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/info-cli.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/info-cli-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/info-cli-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/info-cli-768x768.jpg 768w&#34;,&#34;sizes&#34;:&#34;(max-width: 460px) 576w, (max-width: 614px) 768w, 120vw&#34;},{&#34;id&#34;:31304,&#34;type&#34;:&#34;image&#34;,&#34;link&#34;:&#34;https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/info-cli2/#main&#34;,&#34;title&#34;:&#34;info-cli2&#34;,&#34;caption&#34;:&#34;Il faut \u00eatre polyvalent et pratiquement expert dans tous les sports&#34;,&#34;alt&#34;:&#34;&#34;,&#34;url&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/info-cli2.jpg&#34;,&#34;mime&#34;:&#34;image/jpeg&#34;,&#34;width&#34;:1024,&#34;height&#34;:1024,&#34;srcset&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/info-cli2.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/info-cli2-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/info-cli2-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/info-cli2-768x768.jpg 768w&#34;,&#34;sizes&#34;:&#34;(max-width: 460px) 576w, (max-width: 614px) 768w, 120vw&#34;},{&#34;id&#34;:31303,&#34;type&#34;:&#34;image&#34;,&#34;link&#34;:&#34;https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/liveshop/#main&#34;,&#34;title&#34;:&#34;liveshop&#34;,&#34;caption&#34;:&#34;Le live Shopping est l&#39;occasion de rencontres avec ses sportifs professionnels&#34;,&#34;alt&#34;:&#34;&#34;,&#34;url&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/liveshop.jpg&#34;,&#34;mime&#34;:&#34;image/jpeg&#34;,&#34;width&#34;:1024,&#34;height&#34;:1024,&#34;srcset&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/liveshop.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/liveshop-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/liveshop-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/liveshop-768x768.jpg 768w&#34;,&#34;sizes&#34;:&#34;(max-width: 460px) 576w, (max-width: 614px) 768w, 120vw&#34;},{&#34;id&#34;:31306,&#34;type&#34;:&#34;image&#34;,&#34;link&#34;:&#34;https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/liveshop2/#main&#34;,&#34;title&#34;:&#34;liveshop2&#34;,&#34;caption&#34;:&#34;&#34;,&#34;alt&#34;:&#34;&#34;,&#34;url&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/liveshop2.jpg&#34;,&#34;mime&#34;:&#34;image/jpeg&#34;,&#34;width&#34;:1024,&#34;height&#34;:1024,&#34;srcset&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/liveshop2.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/liveshop2-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/liveshop2-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/liveshop2-768x768.jpg 768w&#34;,&#34;sizes&#34;:&#34;(max-width: 460px) 576w, (max-width: 614px) 768w, 120vw&#34;},{&#34;id&#34;:31307,&#34;type&#34;:&#34;image&#34;,&#34;link&#34;:&#34;https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/reserve/#main&#34;,&#34;title&#34;:&#34;r\u00e9serve&#34;,&#34;caption&#34;:&#34;L&#39;inventaire est toujours l&#39;occasion de retrouver des produits dormants \u00e0 mettre en valeur&#34;,&#34;alt&#34;:&#34;&#34;,&#34;url&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/reserve.jpg&#34;,&#34;mime&#34;:&#34;image/jpeg&#34;,&#34;width&#34;:1024,&#34;height&#34;:1024,&#34;srcset&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/reserve.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/reserve-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/reserve-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/reserve-768x768.jpg 768w&#34;,&#34;sizes&#34;:&#34;(max-width: 460px) 576w, (max-width: 614px) 768w, 120vw&#34;},{&#34;id&#34;:31300,&#34;type&#34;:&#34;image&#34;,&#34;link&#34;:&#34;https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/sponsor/#main&#34;,&#34;title&#34;:&#34;sponsor&#34;,&#34;caption&#34;:&#34;notre sponsoring de proximit\u00e9 est l&#39;une de nos grandes fiert\u00e9s.&#34;,&#34;alt&#34;:&#34;&#34;,&#34;url&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/sponsor.jpg&#34;,&#34;mime&#34;:&#34;image/jpeg&#34;,&#34;width&#34;:1024,&#34;height&#34;:1024,&#34;srcset&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/sponsor.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/sponsor-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/sponsor-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/sponsor-768x768.jpg 768w&#34;,&#34;sizes&#34;:&#34;(max-width: 460px) 576w, (max-width: 614px) 768w, 120vw&#34;},{&#34;id&#34;:31299,&#34;type&#34;:&#34;image&#34;,&#34;link&#34;:&#34;https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/vendeuse/#main&#34;,&#34;title&#34;:&#34;vendeuse&#34;,&#34;caption&#34;:&#34;Je suis Maya,  et je suis vendeuse chez Decathlon&#34;,&#34;alt&#34;:&#34;&#34;,&#34;url&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/vendeuse.jpg&#34;,&#34;mime&#34;:&#34;image/jpeg&#34;,&#34;width&#34;:1024,&#34;height&#34;:1024,&#34;srcset&#34;:&#34;https://st9ph.fr/wp-content/uploads/2025/12/vendeuse.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/vendeuse-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/vendeuse-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/vendeuse-768x768.jpg 768w&#34;,&#34;sizes&#34;:&#34;(max-width: 460px) 576w, (max-width: 614px) 768w, 120vw&#34;}]}">
			<div class="wp-story-app">
				<div class="wp-story-display-contents" style="display: contents;">
					<a class="wp-story-container" href="https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/?wp-story-load-in-fullscreen=true&amp;wp-story-play-on-load=true" title="Lire l’histoire dans un nouvel onglet">
						<div class="wp-story-meta">
							<div class="wp-story-icon">
								<img loading="lazy" decoding="async" alt="Icône de site" src="https://st9ph.fr/wp-content/uploads/2026/02/cropped-ico-fav-150x150.png" width="40" height="40">
							</div>
							<div>
								<div class="wp-story-title">
									WordPress | trucs et astuces pour embellir vos articles
								</div>
							</div>
						</div>
						<div class="wp-story-wrapper">
							<div class="wp-story-slide" style="display: block;">
			<figure><img loading="lazy" decoding="async" width="360" height="360" src="https://st9ph.fr/wp-content/uploads/2025/12/anim-sport.jpg" class="wp-story-image wp-image-31302 " alt="" sizes="auto, (max-width: 460px) 576w, (max-width: 614px) 768w, 120vw" title="anim-sport" srcset="https://st9ph.fr/wp-content/uploads/2025/12/anim-sport.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/anim-sport-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/anim-sport-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/anim-sport-768x768.jpg 768w" /></figure>
		</div>
						</div>
						<div class="wp-story-overlay">
							<div class="wp-story-embed-icon-expand">
				<svg class="gridicon gridicons-fullscreen" role="img" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
					<g>
						<path d="M21 3v6h-2V6.41l-3.29 3.3-1.42-1.42L17.59 5H15V3zM3 3v6h2V6.41l3.29 3.3 1.42-1.42L6.41 5H9V3zm18 18v-6h-2v2.59l-3.29-3.29-1.41 1.41L17.59 19H15v2zM9 21v-2H6.41l3.29-3.29-1.41-1.42L5 17.59V15H3v6z"></path>
					</g>
				</svg>
			</div>
						</div>
						<div class="wp-story-pagination wp-story-pagination-bullets">
			<div class="wp-story-pagination-bullet " aria-label="Aller à la diapositive 1">
			<div class="wp-story-pagination-bullet-bar"></div>
		</div>
<div class="wp-story-pagination-bullet " aria-label="Aller à la diapositive 2">
			<div class="wp-story-pagination-bullet-bar"></div>
		</div>
<div class="wp-story-pagination-bullet " aria-label="Aller à la diapositive 3">
			<div class="wp-story-pagination-bullet-bar"></div>
		</div>
<div class="wp-story-pagination-bullet " aria-label="Aller à la diapositive 4">
			<div class="wp-story-pagination-bullet-bar"></div>
		</div>
<div class="wp-story-pagination-bullet " aria-label="Aller à la diapositive 5">
			<div class="wp-story-pagination-bullet-bar"></div>
		</div>
<div class="wp-story-pagination-bullet " aria-label="Aller à la diapositive 6">
			<div class="wp-story-pagination-bullet-bar"></div>
		</div>
<div class="wp-story-pagination-bullet " aria-label="Aller à la diapositive 7">
			<div class="wp-story-pagination-bullet-bar"></div>
		</div><div class="wp-story-pagination-bullet wp-story-pagination-ellipsis" aria-label="Aller à la diapositive 8">
			<div class="wp-story-pagination-bullet-bar"></div>
		</div>
		</div>
					</a>
				</div>
			</div>
		</div></div>



<div class="wp-block-uagb-tabs-child uagb-tabs__body-container uagb-inner-tab-1" aria-labelledby="uagb-tabs__tab1">
<p>Idem pour le <strong>diaporama</strong> avec un réglage <strong>diapositives ou fondu</strong> au choix. Là, c&#8217;est <strong>uniquement pour des images</strong>.</p>



<div class="wp-block-jetpack-slideshow aligncenter" data-effect="slide" style="--aspect-ratio:calc(1024 / 1024)"><div class="wp-block-jetpack-slideshow_container swiper"><ul class="wp-block-jetpack-slideshow_swiper-wrapper swiper-wrapper"><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img loading="lazy" decoding="async" width="1024" height="1024" alt="" class="wp-block-jetpack-slideshow_image wp-image-31307" data-id="31307" data-aspect-ratio="1024 / 1024" src="https://st9ph.fr/wp-content/uploads/2025/12/reserve.jpg" srcset="https://st9ph.fr/wp-content/uploads/2025/12/reserve.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/reserve-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/reserve-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/reserve-768x768.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img loading="lazy" decoding="async" width="1024" height="1024" alt="" class="wp-block-jetpack-slideshow_image wp-image-31306" data-id="31306" data-aspect-ratio="1024 / 1024" src="https://st9ph.fr/wp-content/uploads/2025/12/liveshop2.jpg" srcset="https://st9ph.fr/wp-content/uploads/2025/12/liveshop2.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/liveshop2-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/liveshop2-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/liveshop2-768x768.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img loading="lazy" decoding="async" width="1024" height="1024" alt="" class="wp-block-jetpack-slideshow_image wp-image-31305" data-id="31305" data-aspect-ratio="1024 / 1024" src="https://st9ph.fr/wp-content/uploads/2025/12/info-cli.jpg" srcset="https://st9ph.fr/wp-content/uploads/2025/12/info-cli.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/info-cli-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/info-cli-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/info-cli-768x768.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img loading="lazy" decoding="async" width="1024" height="1024" alt="" class="wp-block-jetpack-slideshow_image wp-image-31308" data-id="31308" data-aspect-ratio="1024 / 1024" src="https://st9ph.fr/wp-content/uploads/2025/12/groupe.jpg" srcset="https://st9ph.fr/wp-content/uploads/2025/12/groupe.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/groupe-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/groupe-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/groupe-768x768.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img loading="lazy" decoding="async" width="1024" height="1024" alt="" class="wp-block-jetpack-slideshow_image wp-image-31303" data-id="31303" data-aspect-ratio="1024 / 1024" src="https://st9ph.fr/wp-content/uploads/2025/12/liveshop.jpg" srcset="https://st9ph.fr/wp-content/uploads/2025/12/liveshop.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/liveshop-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/liveshop-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/liveshop-768x768.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img loading="lazy" decoding="async" width="1024" height="1024" alt="" class="wp-block-jetpack-slideshow_image wp-image-31304" data-id="31304" data-aspect-ratio="1024 / 1024" src="https://st9ph.fr/wp-content/uploads/2025/12/info-cli2.jpg" srcset="https://st9ph.fr/wp-content/uploads/2025/12/info-cli2.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/info-cli2-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/info-cli2-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/info-cli2-768x768.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img loading="lazy" decoding="async" width="1024" height="1024" alt="" class="wp-block-jetpack-slideshow_image wp-image-31301" data-id="31301" data-aspect-ratio="1024 / 1024" src="https://st9ph.fr/wp-content/uploads/2025/12/depan.jpg" srcset="https://st9ph.fr/wp-content/uploads/2025/12/depan.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/depan-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/depan-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/depan-768x768.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img loading="lazy" decoding="async" width="1024" height="1024" alt="" class="wp-block-jetpack-slideshow_image wp-image-31302" data-id="31302" data-aspect-ratio="1024 / 1024" src="https://st9ph.fr/wp-content/uploads/2025/12/anim-sport.jpg" srcset="https://st9ph.fr/wp-content/uploads/2025/12/anim-sport.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/anim-sport-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/anim-sport-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/anim-sport-768x768.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img loading="lazy" decoding="async" width="1024" height="1024" alt="" class="wp-block-jetpack-slideshow_image wp-image-31300" data-id="31300" data-aspect-ratio="1024 / 1024" src="https://st9ph.fr/wp-content/uploads/2025/12/sponsor.jpg" srcset="https://st9ph.fr/wp-content/uploads/2025/12/sponsor.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/sponsor-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/sponsor-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/sponsor-768x768.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img loading="lazy" decoding="async" width="1024" height="1024" alt="" class="wp-block-jetpack-slideshow_image wp-image-31299" data-id="31299" data-aspect-ratio="1024 / 1024" src="https://st9ph.fr/wp-content/uploads/2025/12/vendeuse.jpg" srcset="https://st9ph.fr/wp-content/uploads/2025/12/vendeuse.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/vendeuse-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/vendeuse-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/vendeuse-768x768.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></li></ul><a class="wp-block-jetpack-slideshow_button-prev swiper-button-prev swiper-button-white" role="button"></a><a class="wp-block-jetpack-slideshow_button-next swiper-button-next swiper-button-white" role="button"></a><a aria-label="Pause Slideshow" class="wp-block-jetpack-slideshow_button-pause" role="button"></a><div class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-white"></div></div></div>
</div>



<div class="wp-block-uagb-tabs-child uagb-tabs__body-container uagb-inner-tab-2" aria-labelledby="uagb-tabs__tab2">
<p>Enfin, la galerie, qui permet de <strong>mettre en valeur certaines images </strong>par rapport à d&#8217;autres</p>



<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular"><div class=""><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col" style="flex-basis:58.33333%"><figure class="tiled-gallery__item"><img decoding="async" srcset="https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/groupe.jpg?strip=info&#038;w=600&#038;ssl=1 600w,https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/groupe.jpg?strip=info&#038;w=900&#038;ssl=1 900w,https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/groupe.jpg?strip=info&#038;w=1024&#038;ssl=1 1024w" alt="" data-height="1024" data-id="31308" data-link="https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/groupe/#main" data-url="https://st9ph.fr/wp-content/uploads/2025/12/groupe.jpg" data-width="1024" src="https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/groupe.jpg?ssl=1" data-amp-layout="responsive"/></figure></div><div class="tiled-gallery__col" style="flex-basis:41.66667%"><figure class="tiled-gallery__item"><img decoding="async" srcset="https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/liveshop.jpg?strip=info&#038;w=600&#038;ssl=1 600w,https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/liveshop.jpg?strip=info&#038;w=900&#038;ssl=1 900w,https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/liveshop.jpg?strip=info&#038;w=1024&#038;ssl=1 1024w" alt="" data-height="1024" data-id="31303" data-link="https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/liveshop/#main" data-url="https://st9ph.fr/wp-content/uploads/2025/12/liveshop.jpg" data-width="1024" src="https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/liveshop.jpg?ssl=1" data-amp-layout="responsive"/></figure><figure class="tiled-gallery__item"><img decoding="async" srcset="https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/info-cli2.jpg?strip=info&#038;w=600&#038;ssl=1 600w,https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/info-cli2.jpg?strip=info&#038;w=900&#038;ssl=1 900w,https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/info-cli2.jpg?strip=info&#038;w=1024&#038;ssl=1 1024w" alt="" data-height="1024" data-id="31304" data-link="https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/info-cli2/#main" data-url="https://st9ph.fr/wp-content/uploads/2025/12/info-cli2.jpg" data-width="1024" src="https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/info-cli2.jpg?ssl=1" data-amp-layout="responsive"/></figure></div></div><div class="tiled-gallery__row"><div class="tiled-gallery__col" style="flex-basis:NaN%"><figure class="tiled-gallery__item"><img decoding="async" srcset="https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/info-cli.jpg?strip=info&#038;w=600&#038;ssl=1 600w,https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/info-cli.jpg?strip=info&#038;w=900&#038;ssl=1 900w,https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/info-cli.jpg?strip=info&#038;w=1024&#038;ssl=1 1024w" alt="" data-height="1024" data-id="31305" data-link="https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/info-cli/#main" data-url="https://st9ph.fr/wp-content/uploads/2025/12/info-cli.jpg" data-width="1024" src="https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/info-cli.jpg?ssl=1" data-amp-layout="responsive"/></figure></div></div></div></div></div>
</div>
</div></div>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-9db77aaf551b61e7eaf38ebe44c526b7" id="6-linfographie-plut%C3%B4t-que-des-mots">4️⃣| L&#8217;infographie plutôt que des mots</h2>



<p>J&#8217;en ai déjà parlé <a href="https://st9ph.fr/wordpress-un-article-en-partant-de-zero/#eveiller-est-mieux-quaffirmer" target="_blank" rel="noreferrer noopener">ici</a> mais j&#8217;insiste. <strong>Des visuels </strong>de style &#8220;<strong>tableau de bord</strong>&#8221; avec<strong> des KPI</strong> appropriés vaudront tous les discours.</p>



<p>Prenons l&#8217;exemple du paragraphe ci-dessous :</p>



<p class="has-base-3-color has-contrast-2-background-color has-text-color has-background has-link-color wp-elements-f8ec9dbcbd21df7075da3a56b7c7243c">Le référencement auprès de Google est une évidence. 94% des internautes effectuent leurs recherches avec ce seul moteur ! 42% ne dépasse jamais la première page de résultats (SERP) et ils sont 15 % à atteindre la page 3 ! Quand on sait que la mesure Google Lighthouse des boutiques en ligne donne un score moyen SEO de 65 / 100, il y&#8217;a encore pas mal de boulot pour les webmasters afin de les rendre visibles !</p>



<p>On peut dire exactement la même chose ainsi :</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">
<div class="wp-block-uagb-counter uagb-block-db739740 wp-block-uagb-counter--circle"><div class="wp-block-uagb-counter-circle-container"><div class="wp-block-uagb-counter-circle-container__content"><span class="wp-block-uagb-counter__icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"></path></svg></span><div class="wp-block-uagb-counter__number"><span class="uagb-counter-block-number" data-duration="1.5" data-to-value="94" data-from-value="0" data-delimiter=","></span><span class="uagb-counter-block-suffix">%</span></div><div class="wp-block-uagb-counter__title">des <strong>SERP</strong> sont demandées<br> à <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">G</mark><mark style="background-color:rgba(0, 0, 0, 0);color:#f79834" class="has-inline-color">o</mark><mark style="background-color:rgba(0, 0, 0, 0);color:#69cb46" class="has-inline-color">o</mark><mark style="background-color:rgba(0, 0, 0, 0);color:#c434bd" class="has-inline-color">g</mark>l<mark style="background-color:rgba(0, 0, 0, 0);color:#3ca0bf" class="has-inline-color">e</mark></strong></div></div><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 230 230" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="uagb-counter-circle__background"></circle><circle class="uagb-counter-circle__progress"></circle></svg></div></div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-uagb-counter uagb-block-397f131e wp-block-uagb-counter--bars"><div class="wp-block-uagb-counter-bars-container"><div class="wp-block-uagb-counter__number"><span class="uagb-counter-block-number" data-duration="1.5" data-to-value="42" data-from-value="0" data-delimiter=","></span><span class="uagb-counter-block-suffix">%</span></div></div><div class="wp-block-uagb-counter__title">des internautes vont <br><strong>en page 2 </strong>des SERP 👀</div></div>



<div class="wp-block-uagb-counter uagb-block-886b2325 wp-block-uagb-counter--bars"><div class="wp-block-uagb-counter-bars-container"><div class="wp-block-uagb-counter__number"><span class="uagb-counter-block-number" data-duration="1.5" data-to-value="15" data-from-value="0" data-delimiter=","></span><span class="uagb-counter-block-suffix">%</span></div></div><div class="wp-block-uagb-counter__title"><strong>dépassent </strong>la <strong>page 2</strong> ↗️</div></div>



<p class="has-text-align-center has-small-font-size">source abc.net</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-uagb-counter uagb-block-593857b6 wp-block-uagb-counter--circle"><div class="wp-block-uagb-counter-circle-container"><div class="wp-block-uagb-counter-circle-container__content"><span class="wp-block-uagb-counter__icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M495.5 223.2C491.6 223.7 487.6 224 483.4 224C457.4 224 434.2 212.6 418.3 195C402.4 212.6 379.2 224 353.1 224C327 224 303.8 212.6 287.9 195C272 212.6 248.9 224 222.7 224C196.7 224 173.5 212.6 157.6 195C141.7 212.6 118.5 224 92.36 224C88.3 224 84.21 223.7 80.24 223.2C24.92 215.8-1.255 150.6 28.33 103.8L85.66 13.13C90.76 4.979 99.87 0 109.6 0H466.4C476.1 0 485.2 4.978 490.3 13.13L547.6 103.8C577.3 150.7 551 215.8 495.5 223.2H495.5zM499.7 254.9C503.1 254.4 508 253.6 512 252.6V448C512 483.3 483.3 512 448 512H128C92.66 512 64 483.3 64 448V252.6C67.87 253.6 71.86 254.4 75.97 254.9L76.09 254.9C81.35 255.6 86.83 256 92.36 256C104.8 256 116.8 254.1 128 250.6V384H448V250.7C459.2 254.1 471.1 256 483.4 256C489 256 494.4 255.6 499.7 254.9L499.7 254.9z"></path></svg></span><div class="wp-block-uagb-counter__number"><span class="uagb-counter-block-number" data-duration="1.5" data-to-value="65" data-from-value="0" data-delimiter=","></span></div><div class="wp-block-uagb-counter__title">Score moyen SEO<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">des Eshops</mark></div></div><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 230 230" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="uagb-counter-circle__background"></circle><circle class="uagb-counter-circle__progress"></circle></svg></div></div>
</div>
</div>



<div class="bloc-rappel">
 ➡️ J&#8217;ai utilisé le contrôle<strong> Spectra &#8220;Counter&#8221; </strong> pour ces 4 indicateurs.</div>

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



<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary>une <strong>SERP</strong>, c&#8217;est le truc qu&#8217;utilisaient les druides pour couper du gui ? 🔪</summary>
<p>Pas tout à fait ! SERP pour <strong>Search Engine Result</strong> (ou Response) <strong>Page </strong>= la page de résultats d&#8217;une recherche</p>
</details>



<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary><strong>Lighthouse</strong>, c&#8217;est une  boite de nuit dans le coin  ? 🫠</summary>
<p>Non plus ! Le lighthouse est <strong>un outil de mesure de la performance SEO </strong>inclus dans <strong>Chrome</strong>. Clic droit sur la page à mesurer &#8211; inspecter &#8211; menu chevrons &gt;&gt; du panneau qui apparait &#8211; Lighthouse &#8211; lancer l&#8217;analyse.</p>
</details>



<p></p>



<h2 class="wp-block-heading">4️⃣| Un soupçon de HTML</h2>



<p> 👉🏻 Je sais ce que vous allez me dire : &#8220;<em>On est pas développeur, nous !</em>&#8221; et vous aurez raison, mais <strong>j&#8217;ai pas mal simplifié les choses pour vous</strong>.</p>



<div class="bloc-attention">
  🔴Tout ce <span style="color:blue;">chapitre</span> 4️⃣ n&#8217;est bien évidemment  <span style="color:red;">pas au programme de 🖥️ l&#8217;épreuve technique </span>  mais pour <strong> votre connaissance personnelle.</strong> 
  
</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>



<h3 class="wp-block-heading">4-1 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Utiliser des blocs HTML personnalisés</mark></h3>



<p>➡️ On avait déjà vu <em>dans un autre article</em> comment<strong> faire </strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"><strong>des textes défilants</strong> </mark>un intégrant un texte sous la forme ci-dessous à l&#8217;intérieur <strong>d&#8217;un 🔹bloc HTML Personnalisé</strong>.</p>



<p class="has-text-align-center has-contrast-3-background-color has-background"><strong>&lt;marquee&gt;</strong> ✨ trop top 👍🏻 le blog st9ph ! On apprend plein de choses ! ✨ <strong>&lt;/marquee&gt;</strong></p>



<p>Ca donnait ça 👇🏻 :</p>



<marquee> ✨ trop top 👍🏻 le blog st9ph ! On apprend plein de choses ! ✨ </marquee>



<div class="bloc-rappel">
 ➡️ Bon, le but n&#8217;est pas non plus de transformer votre article en facade de Time Square🗽 mais <strong> utilisé avec modération</strong>, cet effet attirera le regard vers une information clé 🔑</div>

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



<p>👆🏻 C&#8217;est cette méthode que j&#8217;utilise <strong>pour mes petits blocs comme celui ci-dessus</strong>. Je voulais un peu le style des blocs citations mais avec un fond coloré.</p>



<p>➡️ Il m&#8217;a fallu <strong>2 choses</strong> :</p>



<ul class="wp-block-list">
<li>un<strong> composant</strong> que je balise en <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">&lt;div class=</mark></strong>&#8220;<em>nom du composant</em>&#8220;<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">&gt;</mark></strong> <em>contenu </em>(notre texte) <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">&lt;/div&gt;</mark></strong></li>



<li>une &#8220;<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">feuille de style</mark></strong>&#8221; où je définis mes <strong>attributs</strong> de &#8220;décoration&#8221;</li>
</ul>



<p>👉🏻 Il y&#8217;a <strong>un peu de travail</strong> pour trouver <strong>le bon dosage</strong> :</p>



<figure class="wp-block-image size-full is-style-zoooom"><img loading="lazy" decoding="async" width="899" height="218" src="https://st9ph.fr/wp-content/uploads/2025/12/image-158.png" alt="" class="wp-image-34687" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-158.png 899w, https://st9ph.fr/wp-content/uploads/2025/12/image-158-300x73.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-158-768x186.png 768w" sizes="auto, (max-width: 899px) 100vw, 899px" /></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">
<p>➡️ il me faut<strong> pas mal d&#8217;attributs </strong>aussi :</p>



<ul class="wp-block-list">
<li>La <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">bordure gauche</mark></strong>
<ul class="wp-block-list">
<li>sa <strong>taille </strong>(Size) en pixels (px)</li>



<li>sa <strong>courbure </strong>(radius)</li>
</ul>
</li>



<li>le <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">fond</mark></strong>
<ul class="wp-block-list">
<li>sa <strong>couleur </strong>(background) en héxadécimal</li>



<li>sa <strong>marge </strong>(margin)</li>



<li>son <strong>remplissage </strong>(taux en px)</li>
</ul>
</li>



<li>la <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">police</mark></strong>
<ul class="wp-block-list">
<li>sa <strong>taille </strong>(font-size)</li>



<li>son <strong>type </strong>(font-family)</li>



<li>sa <strong>couleur</strong></li>
</ul>
</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Vous pouvez trouver le code hexa de couleur avec la palette des blocs texte ou titre :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="218" height="255" src="https://st9ph.fr/wp-content/uploads/2025/12/image-159.png" alt="" class="wp-image-34688"/></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="415" height="58" src="https://st9ph.fr/wp-content/uploads/2025/12/image-160.png" alt="" class="wp-image-34689" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-160.png 415w, https://st9ph.fr/wp-content/uploads/2025/12/image-160-300x42.png 300w" sizes="auto, (max-width: 415px) 100vw, 415px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👈🏻 <strong>basculez </strong>de &#8220;<strong>HTML</strong>&#8221; à &#8220;<strong>Prévisualiser</strong>&#8221; chaque fois pour <strong>voir le résultat </strong>en &#8220;live&#8221;</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>➡️ Il ne reste plus qu&#8217;à tout assembler dans<strong> une balise de style </strong> :</p>



<blockquote class="wp-block-quote has-small-font-size is-layout-flow wp-block-quote-is-layout-flow">
<p>&lt;style&gt;</p>



<p>bloc.<em>nom du composant</em> {</p>



<p>&nbsp; border-left: 4px solid #1e73be;</p>



<p>&nbsp; background: #f5f9ff;</p>



<p>&nbsp; padding: 12px 18px;</p>



<p>&nbsp; margin: 20px 0;</p>



<p>&nbsp; font-size: 15px;</p>



<p>&nbsp; color: #0f172a;</p>



<p>&nbsp; border-radius: 4px;</p>



<p>&nbsp; font-family: Arial, sans-serif;</p>



<p>} &lt;/style&gt;</p>
</blockquote>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>➡️ Je place cette balise sous la déclaration de mon composant :</p>



<blockquote class="wp-block-quote has-small-font-size is-layout-flow wp-block-quote-is-layout-flow">
<p>&lt;div class=&#8221;nom du composant&#8221;&gt;</p>



<p>votre contenu</p>



<p>&lt;/div&gt;</p>



<p>&lt;style&gt;</p>



<p>&lt;- ce qu&#8217;on a écrit à côté (vos attributs)</p>



<p>&lt;/style&gt;</p>
</blockquote>



<p class="has-base-2-background-color has-background">😥 Je sais que <strong>ça peut faire un peu peur,</strong> mais je m&#8217;adresse ici surtout <strong>à ceux qui ont envie </strong>de coder un peu.</p>
</div>
</div>



<p>➡️ Vous pouvez aussi <strong>mettre en forme votre contenu</strong> (dans la balise div) :</p>



<p>🔵 Mettre <strong>en gras</strong> (balise strong)</p>



<p class="has-text-align-center has-contrast-3-background-color has-background"><strong>&lt;strong&gt;</strong> <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">le texte en gras</mark></strong> <strong>&lt;/strong&gt;</strong></p>



<p>🔵 Mettre <strong>en italique</strong> (balise em)</p>



<p class="has-text-align-center has-contrast-3-background-color has-background"><strong>&lt;em&gt;</strong> <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">le texte en italique</mark></strong> <strong>&lt;/em&gt;</strong></p>



<p>🔵 <strong>Souligner</strong> (balise u)</p>



<p class="has-text-align-center has-contrast-3-background-color has-background"><strong>&lt;u&gt;</strong> <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">le texte souligné</mark></strong> <strong>&lt;/u&gt;</strong></p>



<p>🔵 Mettre <strong>en couleur</strong> (balise span en attribut <em>color</em>)</p>



<p class="has-text-align-center has-contrast-3-background-color has-background"><strong>&lt;span style=&#8221;color:blue;&#8221;></strong> <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Texte en bleu</mark></strong> <strong>&lt;/span></strong></p>



<div class="bloc-exemple">
 votre contenu <strong> en gras si vous voulez </strong> ou <span style="color:blue;"> en couleur </span> ou <em> en italique </em> ou <u> souligné </u></div>

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



<div class="wp-block-file"><a id="wp-block-file--media-2aeab3ba-73c1-448a-bc51-1d05a5918773" href="https://st9ph.fr/wp-content/uploads/2025/12/bloc-exemple.zip">bloc-exemple</a><a href="https://st9ph.fr/wp-content/uploads/2025/12/bloc-exemple.zip" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-2aeab3ba-73c1-448a-bc51-1d05a5918773">Télécharger</a></div>



<p class="has-base-2-background-color has-background">👆🏻 Téléchargez le fichier ci-dessus que vous aurez juste à<strong> copier coller</strong> (après l&#8217;avoir ouvert) dans <strong>un bloc HTML personnalisé </strong>si vous souhaitez reproduire le composant juste au dessus.</p>



<h3 class="wp-block-heading">4-2 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Les enregistrer sous forme de compositions</mark></h3>



<p>👉🏻 Vu le travail que cela a demandé, <strong>on ne va pas recommencer à chaque fois</strong>. Il suffit de <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">créer une composition </mark></strong>avec le bloc html que vous avez créé pour qu&#8217;il soit disponible ensuite, <strong>comme n&#8217;importe quel autre bloc</strong>, comme un modèle, en fait.</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-cd23b568-15a3-49c2-a442-733808ad7e0f">
<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-99b3533d-d2c0-40a8-bf4a-8e0e784d640e">
			<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">cliquer sur <strong>le menu hamburger</strong> 🍔 (les 3 points tout au bout) de <strong>la barre flottante de votre bloc</strong></span>
			</div>
			
		</li>
</ul>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="744" height="91" src="https://st9ph.fr/wp-content/uploads/2025/12/image-162.png" alt="" class="wp-image-34704" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-162.png 744w, https://st9ph.fr/wp-content/uploads/2025/12/image-162-300x37.png 300w" sizes="auto, (max-width: 744px) 100vw, 744px" /></figure>


<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-22ee2e93-b387-4201-9356-4d731f9d6b07">
<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-fc643afd-e548-4dc2-8a51-7394a42e0f75">
			<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 <strong>Créer une composition</strong> <img loading="lazy" decoding="async" width="35" height="20" class="wp-image-34705" style="width: 35px" src="https://st9ph.fr/wp-content/uploads/2025/12/ico-composition-perso.jpg" alt=""> </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">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="392" height="431" src="https://st9ph.fr/wp-content/uploads/2025/12/image-163.png" alt="" class="wp-image-34707" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-163.png 392w, https://st9ph.fr/wp-content/uploads/2025/12/image-163-273x300.png 273w" sizes="auto, (max-width: 392px) 100vw, 392px" /></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-81ce8096-2d7c-4d4f-81bb-27d74dcaf312">
<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-900e604b-2d7d-4701-905a-51e56578846d">
			<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>Saisissez le nom </strong>que vous souhaitez pour le modèle de bloc</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-27ae6d43-a4fe-450b-a1f9-1e55e335076f">
			<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>Cliquez sur catégories</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-2caf2c84-ed96-4152-9ff8-d3e1dff09333">
			<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>Classez votre composition </strong>dans la catégorie que vous souhaitez</span>
			</div>
			
		</li>
</ul>


<div class="bloc-rappel">
 ➡️ <strong> un conseil :</strong> <span style="color:blue;"> Faites-le ! </span> Sinon, ça va vite devenir un problème pour le retrouver <strong> si vous en créez beaucoup </strong> </div>

<style>
.bloc-rappel {
  border-left: 4px solid #1e73be;
  background: #f5f9ff;
  padding: 12px 18px;
  margin: 20px 0;
  font-size: 15px;
   border-radius: 4px;
  font-family: Arial, sans-serif;
}
</style>


<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-207f948d-17c4-4bf2-9355-62eb2aa51da9">
<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-9f7488cc-99f9-4ec8-81a3-cf5e83a5b079">
			<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">Cliquer sur 🟦 <strong><mark class="has-inline-color has-accent-color">Ajouter</mark></strong></span>
			</div>
			
		</li>
</ul>


<p class="has-base-2-background-color has-background">👉🏻 Votre composition vous attend sagement dans le liste des blocs Gutenberg !</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"><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-e60a66d1-8c5b-4a0b-a6e2-0290ffe9b82c">
<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-f8693ebe-32b3-4ae9-8371-79be3732df98">
			<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">Cliquer sur le <img loading="lazy" decoding="async" width="30" height="27" class="wp-image-34708" style="width: 30px" src="https://st9ph.fr/wp-content/uploads/2025/12/ico-plus-editeur.jpg" alt=""> de <strong>la barre d&#8217;éditeur</strong> ou de <strong>votre nouveau bloc</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 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-e7797d94-b2a8-4573-a2dd-f1fc397b8cd2">
			<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">Tapez <strong>les premières lettres</strong> de votre contrôle</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-822649b3-f913-4f72-9498-2d2c0f3e5dca">
			<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>Cliquez dessus</strong> <img loading="lazy" decoding="async" width="35" height="20" class="wp-image-34705" style="width: 35px" src="https://st9ph.fr/wp-content/uploads/2025/12/ico-composition-perso.jpg" alt=""> pour le choisir</span>
			</div>
			
		</li>
</ul>


<div class="bloc-attention">
  ⚠️ <strong>Attention :</strong> pour l&#8217;instant, il est inerte car il faut le détacher du modèle pour pouvoir le modifier.
</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>


<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-26dafe0f-2e27-4f48-8610-42bda6deb99b">
<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-42b2f7af-401d-4fcb-b08c-539215fe8a97">
			<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">Cliquer sur le<strong> menu hamburger </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-86af4875-53e1-44a4-bfd1-e86df7bb857d">
			<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 &#8220;<strong>Détacher</strong>&#8221; (du modèle)</span>
			</div>
			
		</li>
</ul>


<p>👉🏻 Votre bloc est <strong>redevenu </strong>un HTML personnalisé <strong>indépendant </strong>que vous pouvez <strong>modifier librement <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">sans affecter votre composition enregistrée</mark></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="350" height="433" src="https://st9ph.fr/wp-content/uploads/2025/12/image-164.png" alt="" class="wp-image-34711" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-164.png 350w, https://st9ph.fr/wp-content/uploads/2025/12/image-164-242x300.png 242w" sizes="auto, (max-width: 350px) 100vw, 350px" /></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%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="606" height="322" src="https://st9ph.fr/wp-content/uploads/2025/12/image-165.png" alt="" class="wp-image-34714" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-165.png 606w, https://st9ph.fr/wp-content/uploads/2025/12/image-165-300x159.png 300w" sizes="auto, (max-width: 606px) 100vw, 606px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>👈🏻 Vous pouvez retrouver aussi vos compositions dans l&#8217;onglet &#8220;compositions&#8221; de l&#8217;éditeur de blocs.</p>



<p>👉🏻 Vous pouvez aussi <strong>modifier l&#8217;original </strong>soit :</p>



<ul class="wp-block-list">
<li>en cliquant sur &#8220;modifier l&#8217;original&#8221; de l<strong>a barre flottante du bloc</strong></li>



<li>Dans Apparence &gt; Design</li>
</ul>
</div>
</div>



<div class="bloc-attention">
  ⚠️ Si vous <strong>modifiez l&#8217;original</strong> <u>tous les articles et pages où vous aviez inséré</u> la composition <strong>sans la détacher</strong> seront modifiés aussi.
</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>



<p>➡️ <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Pour résumer </mark></strong>:</p>



<ul class="wp-block-list">
<li>si vous utilisez les compositions<img loading="lazy" decoding="async" width="35" height="20" class="wp-image-34705" style="width: 35px;" src="https://st9ph.fr/wp-content/uploads/2025/12/ico-composition-perso.jpg" alt=""> <strong>sous forme de matrice</strong> (modèle à modifier)
<ul class="wp-block-list">
<li><strong>insérez la composition</strong> et <strong>détachez la</strong></li>



<li>Modifiez ensuite cette composition librement (elle est redevenue un bloc normal)</li>
</ul>
</li>



<li>Si vous utilisez les compositions<img loading="lazy" decoding="async" width="35" height="20" class="wp-image-34705" style="width: 35px;" src="https://st9ph.fr/wp-content/uploads/2025/12/ico-composition-perso.jpg" alt=""> sous forme<strong> de bloc invariable</strong>
<ul class="wp-block-list">
<li><strong>insérez la composition <mark style="background-color:rgba(0, 0, 0, 0);color:#ed2323" class="has-inline-color">sans la détacher</mark></strong></li>



<li>Si vous devez faire évoluer la composition, cliquez sur &#8220;<strong>modifier l&#8217;orignal</strong>&#8221; (elle sera modifée <strong>partout où elle apparait</strong></li>
</ul>
</li>
</ul>



<p>📚 <strong>Voyez aussi </strong>un tour d&#8217;horizon complet des<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"> contrôles Spectra</mark></strong> <a href="https://st9ph.fr/wordpress-blocs-spectra-remarquables/" target="_blank" rel="noreferrer noopener">dans cet article</a>, Gardez en tête <a href="https://st9ph.fr/wordpress-methode-habi-et-yoast-seo-synchronises/" target="_blank" rel="noreferrer noopener">l&#8217;HABI</a> et proposez les <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">outils et méthodes </mark></strong>suggérées dans <a href="https://st9ph.fr/wordpress-un-article-en-partant-de-zero/" target="_blank" rel="noreferrer noopener">cet autre article</a>, et <strong>vous deviendrez rapidement un auteur WordPress qui aura une foule d&#8217;abonnés </strong>! 😉</p>



<!-- Bouton principal -->
<button id="uxMenuBtn" style="
  position: fixed;
  right: 14px;
  bottom: 40%;
  padding: 12px 14px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  font-size: 18px;
">
  ☰
</button>

<!-- Menu -->
<div id="uxMenu" style="
  display:none;
  position: fixed;
  right: 14px;
  bottom: 48%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 10000;
  font-family: Arial, sans-serif;
">
  <button class="uxItem" data-popup="sources">📚 Sources</button>
  <button class="uxItem" data-popup="methodo">🧑‍🎓NDRC</button>
  <button class="uxItem" data-popup="glossary">📘 Glossaire</button>
</div>

<!-- Overlay -->
<div id="uxOverlay" style="
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.55);
  z-index:10001;
"></div>

<!-- POPUPS -->

<div class="uxPopup" id="sources" data-title="📚 Sources UX mobile">
 

  <img decoding="async" 
    src="https://st9ph.fr/wp-content/uploads/2026/02/logo-blogst9ph-small.jpg"
    alt="blog st9ph"
    style="
      width:100%;
      max-width:120px;
      display:block;
      margin:12px auto 20px;
      border-radius:8px;
    "
  >
<h4>📚 Sources</h4>
<ul>
 <!--  ✅ contenus 📚 Sources -->
<li>🔌<a href="https:/https://ultimateblocks.com/"> &#8211; Ultimate Blocks</a> – Extension utilisée pour les images (arrondis, rognage …) </li>
<li>🔌<a href="https://getinstantimages.com/"> &#8211; InstantImages</a> – Extension utilisée pour la bibliothèque d&#8217;images supplémentaire (Unsplash, Pixabay …) </li>
<li><strong>🔊 Voicertool</strong> &#8211; introduction parlée </li>
<li><strong>🌐 Nano Banana Pro de Google Gemini</strong> – génération d&#8217;image par IA</li>
</ul>
</div>

<div class="uxPopup" id="methodo" data-title="🧑‍🎓 NDRC">


  <img decoding="async" 
    src="https://st9ph.fr/wp-content/uploads/2026/02/logo-blogst9ph-small.jpg"
    alt="blog st9ph"
    style="
      width:100%;
      max-width:120px;
      display:block;
      margin:12px auto 20px;
      border-radius:8px;
    "
  >
<h4>🧑‍🎓 NDRC</h4>
<!--  ✅ contenus 🧑‍🎓 NDRC -->
<p> 🟦 Cet article est à visée de l&#8217;épreuve technique E5B.</p>
<ul>
<li>savoir  mettre en forme un article ou une page </li>
<li>savoir  utiliser les blocs Spectra </li>
</ul>
<p>👉 les générations IA, Instant Image, Ultimate Blocks et le codage HTML sont hors programme </p>
</div>

<div class="uxPopup" id="glossary" data-title="📘 Glossaire UX mobile">


  <img decoding="async" 
    src="https://st9ph.fr/wp-content/uploads/2026/02/logo-blogst9ph-small.jpg"
    alt="blog st9ph"
    style="
      width:100%;
      max-width:120px;
      display:block;
      margin:12px auto 20px;
      border-radius:8px;
    "
  >
<h4>📘 Glossaire</h4>
<!-- ✅ contenus 📘 Glossaire -->
<ul>
<li><strong>Infographie</strong> : dire par par des schémas, des KPI, des images, des icones avec peu de commentaires </li>
<li><strong>SERP</strong> : Search Engine Result (ou Response) Page </li>
<li><strong>Lighthouse</strong> : outil d&#8217;audit de site de Google Chrome </li>
<li><strong>Marquee</strong> : balise HTML de texte défilant</li>
<li><strong>Menu Hamburger</strong> : menu symbolisé par des points ou des traits verticaux (très utilisé en UX Mobile) </li>
</ul>
</div>

<!-- Style popup -->
<style>
.uxItem {
  display: block;
  padding: 10px 16px;
  background: #fff;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: #111;        /* ✅ TEXTE VISIBLE */
  font-size: 14px;
}

.uxItem:hover {
  background: #f0f0f0;
}
.uxItem:hover { background:#f0f0f0; }

.uxPopup {
  display:none;
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  width:90%;
  max-width:560px;
  max-height:80%;
  padding:24px;
  border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  z-index:10002;
  overflow-y:auto;
}
</style>
<style>
@media (max-width: 768px) {
  #uxMenuBtn,
  #uxMenu {
    display: none !important;
  }
}
</style>
<style>
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}
</style>
<style>
@media (max-width: 768px) {
  #uxMenuBtn,
  #uxMenu,
  #uxOverlay,
  .uxPopup {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    display: none !important;
  }
}
</style>

<script>
(function () {

  // === DÉSACTIVATION MOBILE ===
  if (window.innerWidth <= 768) {
    return; // on ne fait RIEN sur mobile
  }

  // === RÉFÉRENCES ===
  const menuBtn = document.getElementById("uxMenuBtn");
  const menu = document.getElementById("uxMenu");
  const overlay = document.getElementById("uxOverlay");
  const popups = document.querySelectorAll(".uxPopup");

  if (!menuBtn || !menu || !overlay) return;

  // === OUVERTURE / FERMETURE MENU ===
  menuBtn.addEventListener("click", () => {
    menu.style.display = menu.style.display === "block" ? "none" : "block";
  });

  // === OUVERTURE POPUPS ===
  document.querySelectorAll(".uxItem").forEach(btn => {
    btn.addEventListener("click", () => {
      popups.forEach(p => p.style.display = "none");
      const target = document.getElementById(btn.dataset.popup);
      if (target) target.style.display = "block";
      overlay.style.display = "block";
      menu.style.display = "none";
    });
  });

  // === FERMETURE OVERLAY ===
  overlay.addEventListener("click", () => {
    popups.forEach(p => p.style.display = "none");
    overlay.style.display = "none";
  });

})();
</script>



</script>
<script>
(function () {
  if (window.innerWidth <= 768) {
    const uxPanel = document.querySelector('.ux-panel');
    if (uxPanel) {
      uxPanel.remove();
    }
  }
})();
</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">

<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-trucs-et-astuces-pour-embellir-vos-articles%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>



<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">🛠️ création de sites</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-uagb-post-grid uagb-post-grid  uagb-post__image-position-top uagb-post__image-enabled uagb-block-7a1e30da     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-depoussierons-la-methode-dabonnement/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="253" src="https://st9ph.fr/wp-content/uploads/2026/02/EnAVANT-UM-1024x288.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/02/EnAVANT-UM-1024x288.png 1024w, https://st9ph.fr/wp-content/uploads/2026/02/EnAVANT-UM-300x84.png 300w, https://st9ph.fr/wp-content/uploads/2026/02/EnAVANT-UM-768x216.png 768w, https://st9ph.fr/wp-content/uploads/2026/02/EnAVANT-UM-1536x432.png 1536w, https://st9ph.fr/wp-content/uploads/2026/02/EnAVANT-UM.png 1967w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/wordpress-depoussierons-la-methode-dabonnement/" target="_self" rel="bookmark noopener noreferrer">WordPress | Dépoussiérons la méthode d&#8217;abonnement</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-02-12T17:06:03+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					12 février 2026				</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>🚣🏻 C&#8217;est une telle galère de s&#8217;abonner simplement sur un site WordPress par défaut que...				</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-depoussierons-la-methode-dabonnement/" 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...				</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...				</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)....				</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...				</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)...				</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>
			


<p></p>
<p>L’article <a href="https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/">WordPress | trucs et astuces pour embellir vos articles</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">31267</post-id>	</item>
		<item>
		<title>WordPress &#124; un article en partant de zéro ?</title>
		<link>https://st9ph.fr/wordpress-un-article-en-partant-de-zero/</link>
					<comments>https://st9ph.fr/wordpress-un-article-en-partant-de-zero/#respond</comments>
		
		<dc:creator><![CDATA[St9ph]]></dc:creator>
		<pubDate>Thu, 04 Dec 2025 09:16:03 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[🛠️ création de sites]]></category>
		<category><![CDATA[🌐 public]]></category>
		<category><![CDATA[article wordpress en partant de rien]]></category>
		<category><![CDATA[concevoir un article de blog]]></category>
		<category><![CDATA[des titres qui font cliquer wordpress]]></category>
		<category><![CDATA[interaction blog wordpress]]></category>
		<category><![CDATA[spectra number]]></category>
		<guid isPermaLink="false">https://st9ph.fr/?p=30926</guid>

					<description><![CDATA[<p>WordPress &#124; un article en partant de 0️⃣? 👉🏻 C&#8217;est le pire scénario qui puisse se présenter sur votre sujet NDRC E5B de l&#8217;épreuve technique mais cela arrive. A partir d&#8217;annexes incomplètes ou, même, en partant de zéro, concevoir un article en un quart d&#8217;heure chrono qui respecte toutes les règles du genre ! Voyons, ... <a title="WordPress &#124; un article en partant de zéro ?" class="read-more" href="https://st9ph.fr/wordpress-un-article-en-partant-de-zero/" aria-label="En savoir plus sur WordPress &#124; un article en partant de zéro ?">Lire la suite</a></p>
<p>L’article <a href="https://st9ph.fr/wordpress-un-article-en-partant-de-zero/">WordPress | un article en partant de zéro ?</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 loading="lazy" 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> | un article en partant de 0️⃣?</p>



<p>👉🏻 C&#8217;est <strong>le pire scénario </strong>qui puisse se présenter sur votre sujet NDRC E5B <strong>de l&#8217;épreuve technique </strong>mais cela arrive. A partir <strong>d&#8217;annexes incomplètes</strong> ou, même,<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"> <strong>en partant de zéro</strong></mark>, concevoir un article <strong>en un quart d&#8217;heure chrono</strong> qui respecte <strong>toutes les règles</strong> du genre !</p>



<p>Voyons, en détail, comment éviter <a href="https://fr.wikipedia.org/wiki/Bataille_de_la_B%C3%A9r%C3%A9zina">la B</a><a href="https://fr.wikipedia.org/wiki/Bataille_de_la_B%C3%A9r%C3%A9zina" target="_blank" rel="noreferrer noopener">érézina</a> !</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:33.33%"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" 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-2e804d82-d626-40ba-a106-bbc014f1c22c">
			<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-2e804d82-d626-40ba-a106-bbc014f1c22c-0"><rect height="150" width="150" 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-2e804d82-d626-40ba-a106-bbc014f1c22c-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-2e804d82-d626-40ba-a106-bbc014f1c22c-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-2e804d82-d626-40ba-a106-bbc014f1c22c-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-2e804d82-d626-40ba-a106-bbc014f1c22c-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-2e804d82-d626-40ba-a106-bbc014f1c22c-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-2e804d82-d626-40ba-a106-bbc014f1c22c-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-2e804d82-d626-40ba-a106-bbc014f1c22c-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-2e804d82-d626-40ba-a106-bbc014f1c22c-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-2e804d82-d626-40ba-a106-bbc014f1c22c-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-c8d065c8-ef14-4560-baf3-76d312b5eb2e">
			<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-c8d065c8-ef14-4560-baf3-76d312b5eb2e-0"><rect height="150" width="150" 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-c8d065c8-ef14-4560-baf3-76d312b5eb2e-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-c8d065c8-ef14-4560-baf3-76d312b5eb2e-1"><rect height="150" width="150" 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-c8d065c8-ef14-4560-baf3-76d312b5eb2e-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-c8d065c8-ef14-4560-baf3-76d312b5eb2e-2"><rect height="150" width="150" 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-c8d065c8-ef14-4560-baf3-76d312b5eb2e-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-c8d065c8-ef14-4560-baf3-76d312b5eb2e-3"><rect height="150" width="150" 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-c8d065c8-ef14-4560-baf3-76d312b5eb2e-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-c8d065c8-ef14-4560-baf3-76d312b5eb2e-4"><rect height="150" width="150" 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-c8d065c8-ef14-4560-baf3-76d312b5eb2e-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-57385cc9-0d22-43d1-b47d-21c6712b4849">
			<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-57385cc9-0d22-43d1-b47d-21c6712b4849-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-57385cc9-0d22-43d1-b47d-21c6712b4849-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-57385cc9-0d22-43d1-b47d-21c6712b4849-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-57385cc9-0d22-43d1-b47d-21c6712b4849-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-57385cc9-0d22-43d1-b47d-21c6712b4849-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-57385cc9-0d22-43d1-b47d-21c6712b4849-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-57385cc9-0d22-43d1-b47d-21c6712b4849-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-57385cc9-0d22-43d1-b47d-21c6712b4849-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-57385cc9-0d22-43d1-b47d-21c6712b4849-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-57385cc9-0d22-43d1-b47d-21c6712b4849-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 class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="51" height="53" src="https://st9ph.fr/wp-content/uploads/2025/12/image-153.png" alt="" class="wp-image-33778" style="width:33px;height:auto"/></figure>



<p class="has-small-font-size">v<em>oyez le menu flottant (à droite) pour les sources, un glossaire et la méthodologie </em></p>
</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">12–18 minutes</div>


<p>|</p>


<div class="wp-block-post-time-to-read">2 887 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-02-23T17:21:18+01:00">23 février  2026</time></div></div>


				<div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-f5d8c27e      uagb-toc__collapse--list"
					data-scroll= "1"
					data-offset= "30"
					style=""
				>
				<div class="uagb-toc__wrap">
						<div class="uagb-toc__title">
							plan de l&#8217;article						</div>
												<div class="uagb-toc__loader"></div>										<div class="uagb-toc__list-wrap uagb-toc__list-hidden">
						<ol class="uagb-toc__list"><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#1-mettez-vous-à-la-place-de-vos-lecteurs" class="uagb-toc-link__trigger">1️⃣| Mettez vous à la place de vos lecteurs</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#1-1-ne-ratez-pas-votre-cible" class="uagb-toc-link__trigger">1-1 | 🎯 Ne ratez pas votre cible !</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#1-2-focus-sur-la-charte-éditoriale" class="uagb-toc-link__trigger">1-2 | Focus sur la charte éditoriale</a></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#2-proposez-un-titre-accrocheur" class="uagb-toc-link__trigger">2️⃣| Proposez un titre accrocheur</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#2-1-la-curiosité" class="uagb-toc-link__trigger">2-1 | 🤔 La curiosité</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#2-2-lappât-du-gain" class="uagb-toc-link__trigger">2-2 | 🪙l&#039;appât du gain</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#2-3-la-personnalisation" class="uagb-toc-link__trigger">2-3 | ☝🏻La personnalisation</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#2-4-la-peur-de-manquer-fomo" class="uagb-toc-link__trigger">2-4 | 😨 La peur de manquer (FOMO)</a></li></ul></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#3-une-bonne-introduction-pour-assoir-vos-lecteurs" class="uagb-toc-link__trigger">3️⃣| Une bonne introduction pour assoir vos lecteurs</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#3-1-répéter-nest-pas-jouer" class="uagb-toc-link__trigger">3-1 | Répéter n&#039;est pas jouer</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#3-2-illustrer-cest-reposer-et-orienter" class="uagb-toc-link__trigger">3-2 | Illustrer, c&#039;est reposer et orienter</a></li></ul></li></ul></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#4-un-contenu-varié-et-interactif" class="uagb-toc-link__trigger">4️⃣| Un contenu varié et interactif</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#4-1-le-podcast-pour-les-mobinautes-qui-ont-la-tête-ailleurs" class="uagb-toc-link__trigger">4-1 | 🎧 Le podcast pour les mobinautes qui ont &quot;la tête ailleurs&quot;</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#4-2-de-la-vidéo-pour-rendre-vivant-votre-contenu" class="uagb-toc-link__trigger">4-2 | 📽️ De la vidéo pour rendre vivant votre contenu</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#4-3-utilisez-les-blocs-interactifs" class="uagb-toc-link__trigger">4-3 | Utilisez les blocs interactifs</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#4-4-eveiller-est-mieux-quaffirmer" class="uagb-toc-link__trigger">4-4 | Eveiller est mieux qu&#039;affirmer</a></li></ul></li></ul></li></ul></li></ul></li><li class="uagb-toc__list "><a href="#conclusion-vers-lépreuve-e5b" class="uagb-toc-link__trigger">🧑🏻‍🎓 | Conclusion, vers l&#039;épreuve E5B</a></ul></ul></ul></ul></ol>					</div>
									</div>
				</div>
			


<p>👉🏻 En complément de cet article, gardez en tête <strong>la méthode HABI</strong> (<a href="https://st9ph.fr/wordpress-methode-habi-et-yoast-seo-synchronises/" target="_blank" rel="noreferrer noopener">voir l&#8217;article</a>) pour une structure SEO optimisée et <strong>le complément Yoast</strong> (<a href="https://st9ph.fr/yoast-seo/" target="_blank" rel="noreferrer noopener">voir la présentation</a> sur ce blog)</p>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-e6785327aa9a6a07bbaf9af0b7cfbabd">1️⃣| Mettez vous à la place de vos lecteurs</h2>



<h3 class="wp-block-heading">1-1 | 🎯 <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Ne ratez pas votre cible </mark></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">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="1024" src="https://st9ph.fr/wp-content/uploads/2025/12/image.png" alt="" class="wp-image-30929" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image.png 1024w, https://st9ph.fr/wp-content/uploads/2025/12/image-300x300.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-150x150.png 150w, https://st9ph.fr/wp-content/uploads/2025/12/image-768x768.png 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Votre empathie naturelle vous aidera à <strong>vous mettre dans la peau de votre 🧑🏻 Persona </strong>afin de lui proposer <strong>un contenu qui l&#8217;intéresse,</strong> dans <strong>un 🪶phrasé qu&#8217;il apprécie</strong>, qui ℹ️ <strong>l&#8217;informe et le rend 🤔curieux </strong>de votre sujet. Il doit être <strong>varié et interactif</strong>, proposer du rebond <strong>à l&#8217;intérieur et à l&#8217;extérieur</strong> de votre blog.</p>



<p>Gardez <strong>une ligne éditoriale et une forme de communication </strong>(charte graphique) <strong>stable </strong>afin de  ne pas décontenancer vos habitués.</p>



<div class="bloc-astuce">
 ✅ Gardez <strong>une ligne éditoriale et une forme de communication stable </strong>(charte graphique) stable afin de ne pas décontenancer vos habitués.
</div>

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



<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary>C&#8217;est quoi 🧑🏻 <strong>le Persona </strong>?</summary>
<p>C&#8217;est un personnage fictif qui a toutes les caractéristiques de votre cible et que vous personnalisez pour penser à lui et lui adresser votre contenu de la manière la plus adaptée. Tapez &#8220;persona&#8221; dans le moteur, il y&#8217;a un article à ce sujet/</p>
</details>
</div>
</div>



<p class="has-base-2-background-color has-background">👆🏻 Ci-Dessus, u<strong>n exemple d&#8217;interactivité</strong>. Une définition qu&#8217;on obtient <strong>en cliquant sur la question</strong>. Dans la réponse, <strong>un moyen pour prolonger le sujet </strong>annexe.</p>



<h3 class="wp-block-heading">1-2 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Focus sur la charte éditoriale</mark></h3>



<div class="bloc-rappel">
 ➡️ Il est essentiel <strong>de procurer à votre lecteur une accoutumance à votre contenu </strong>  en le proposant <strong> toujours de la même manière </strong></div>

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



<p>Prenons l&#8217;exemple de mon blog, <strong>sans avoir besoin de le légender</strong>, chacun qui à l&#8217;habitude de venir ici sait que :</p>



<ul class="wp-block-list">
<li>les sous parties principales sont t<strong>itrées en Bleu</strong> 1️⃣<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">| partie un</mark></li>



<li>une <strong>annonce du plan </strong>figure sous l&#8217;introduction 🔻</li>



<li>Les <strong>paragraphes sur fond gris </strong> sont des commentaires 👉🏻 (instructifs, je l&#8217;espère)</li>



<li>Les expressions principales <strong>des paragraphes sont en gras </strong>afin de <strong>faciliter une lecture rapide 👀.</strong></li>



<li>Les manipulations dans les tutos sont <strong>sous forme de liste à puce</strong>s ↹</li>



<li>les éléments <strong>précédés d&#8217;un triangle</strong> sont des définitions qu&#8217;on peut développer en cliquant dessus</li>



<li>On peut <strong>liker 👍🏻 et commenter </strong>💬 chaque article en bas (même si personne ne le fait)</li>



<li>Une <strong>liste d&#8217;articles sur la même thématique</strong> est toujours présente tout en bas ⬇️.</li>
</ul>



<p class="has-base-2-background-color has-background">👉🏻 <strong>Définissez une charte et respectez la</strong> sans quoi vous allez désorienter vos lecteurs. Remarquez qu&#8217;hormis les titres et les commentaires, t<strong>ous les éléments listés ci-dessus sont interactifs.</strong></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:33.33%">
<p>La charte épaule <strong>votre ligne éditoriale</strong> (thèmes, ton, limite, registre) que vous devez affirmer <strong>dans la présentation de votre blog </strong>(<a href="https://st9ph.fr/a-propos-de-st9ph/">voir la mienne</a>)</p>



<div class="bloc-astuce">
  💡 <strong>faites la partager </strong> à vos auteurs, abonnés et contributeurs qui conçoivent du contenu pour vous.
</div>

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



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="412" height="284" src="https://st9ph.fr/wp-content/uploads/2025/12/image-6.png" alt="" class="wp-image-30943" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-6.png 412w, https://st9ph.fr/wp-content/uploads/2025/12/image-6-300x207.png 300w" sizes="auto, (max-width: 412px) 100vw, 412px" /></figure>
</div>
</div>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-f9c5a031bc4157ef4f56f45ddf22d86d">2️⃣| Proposez un titre accrocheur</h2>



<p class="has-base-2-background-color has-background">➡️ <strong>Elément fondamental</strong> de votre article, le titre est <strong>le seul élément avec votre méta description </strong>qu&#8217;un internaute verra dans u<strong>ne SERP ou un flux RSS</strong>.</p>



<p>Comme toujours, tout reposera sur les 4 piliers habituels du CTA (appel au clic).</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:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="209" height="388" src="https://st9ph.fr/wp-content/uploads/2025/12/image-1.png" alt="" class="wp-image-30931" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-1.png 209w, https://st9ph.fr/wp-content/uploads/2025/12/image-1-162x300.png 162w" sizes="auto, (max-width: 209px) 100vw, 209px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<h3 class="wp-block-heading">2-1 | 🤔 <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">La curiosité</mark></h3>



<p>Il s&#8217;agit de <strong>lui donner envie d&#8217;en savoir plus</strong>. Prenons l&#8217;exemple du vététiste qui illustrait la partie précédente :</p>



<ul class="wp-block-list">
<li><strong>Les</strong> <strong>7 Réglages Essentiels Pour Rouler en VTT Sans Douleur</strong></li>



<li><strong>Un jeune vététiste fait le buzz sur Tik-Tok !</strong></li>



<li><strong>3 Erreurs basiques à Éviter Absolument Quand On Débute en VTT</strong></li>
</ul>



<p></p>



<p class="has-base-2-background-color has-background">👉🏻 Remarquez qu&#8217;on fait souvent appel aux <strong>chiffres</strong>, aux <strong>morts forts</strong>, qu&#8217;on laisse le <strong>suspens </strong>entier !</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%">
<h3 class="wp-block-heading">2-2 | 🪙<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">l&#8217;appât du gain</mark></h3>



<p>➡️ Sans doute l<strong>e CTA le plus utilisé en marketing,</strong> Il fonctionne depuis toujours et pour toujours. Qui ne veut pas d&#8217;un bon plan pour <strong>économiser son argent, son temps ou ses efforts</strong> ?</p>



<ul class="wp-block-list">
<li><strong>5 modèles de VTT électriques à moins de 1000 €</strong></li>



<li><strong>Nos conseils pour bien entretenir votre VTT</strong></li>



<li><strong>S&#8217;équiper sans se ruiner pour le vélo tous terrains</strong></li>
</ul>



<p class="has-base-2-background-color has-background">📈 Selon Reuters, <strong>les plateformes en ligne </strong>(blogs, webzines &#8230;) <strong>concentrent 72 % des &#8220;usages d&#8217;information&#8221;</strong> grand public (B2C) en 2024. C&#8217;est souvent par votre <strong>communication non commerciale</strong> que vous accrocherez en premier vos lead ! <a href="https://mediaculture.fr/usages-tendances-2024-information-fragmentation-evitement-ia/" target="_blank" rel="noreferrer noopener">Voir l&#8217;article sur MediaCulture</a></p>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="285" height="401" src="https://st9ph.fr/wp-content/uploads/2025/12/image-2.png" alt="" class="wp-image-30932" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-2.png 285w, https://st9ph.fr/wp-content/uploads/2025/12/image-2-213x300.png 213w" sizes="auto, (max-width: 285px) 100vw, 285px" /></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%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="249" height="404" src="https://st9ph.fr/wp-content/uploads/2025/12/image-3.png" alt="" class="wp-image-30935" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-3.png 249w, https://st9ph.fr/wp-content/uploads/2025/12/image-3-185x300.png 185w" sizes="auto, (max-width: 249px) 100vw, 249px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<h3 class="wp-block-heading">2-3 | ☝🏻<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">La personnalisation</mark></h3>



<p>➡️ C&#8217;est l&#8217;art de faire comprendre à votre lecteur que c<strong>et article est fait particulièrement pour lui, </strong>qu&#8217;il traite de <strong>ses gouts,</strong> de <strong>son territoire</strong>, de <strong>ses hobbies,</strong> bref, de <strong>toutes choses qui le concernent</strong>.</p>



<ul class="wp-block-list">
<li><strong>Le 3 meilleurs circuits de VTT dans le Bessin normand</strong></li>



<li><strong>Le Fat Bike est-il fait pour vous ?</strong></li>



<li><strong>Reprendre le VTT après 50 ans ? Est-ce une bonne idée ?</strong></li>
</ul>



<p></p>



<p class="has-base-2-background-color has-background">👉🏻 Les exemples ci-dessus en appellent à <strong>la proximité </strong>géographique, à <strong>un choix de personnalité </strong>et à <strong>un segment ciblé </strong>par sa génération.</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%">
<h3 class="wp-block-heading">2-4 |<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"> 😨 La peur de manquer (FOMO)</mark></h3>



<p>➡️ T<strong>rès utilisée dans le commerce,</strong> cette technique peut aussi fonctionner dans le blog, avec modération.</p>



<p class="has-base-2-background-color has-background">Les trois titres ci-dessous jouent essentiellement sur <strong>la peur d&#8217;un changement.</strong></p>



<ul class="wp-block-list">
<li><strong>Equipez votre VTT d&#8217;un traceur GPS avant que votre assureur ne vous l&#8217;impose.</strong></li>



<li><strong>Ce qui pourrait changer dans votre pratique du VTT si la loi sur les chemins de Grande Randonnée est votée</strong></li>



<li><strong>Il ne sera bientôt plus possible d&#8217;acheter cette marque de VTT en France !</strong></li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="1024" src="https://st9ph.fr/wp-content/uploads/2025/12/image-4.png" alt="" class="wp-image-30937" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-4.png 1024w, https://st9ph.fr/wp-content/uploads/2025/12/image-4-300x300.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-4-150x150.png 150w, https://st9ph.fr/wp-content/uploads/2025/12/image-4-768x768.png 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</div>
</div>



<div class="bloc-a-retenir">
 ⚠️ N&#8217;oubliez pas qu&#8217;un titre, <strong>c&#8217;est 60 caractères maximum ! </strong> Faites relativement court si vous ne voulez pas être <strong>tronqués en résultat de SERP</strong> et perdre bêtement <strong>des points de classement en SEO </strong>
</div>

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



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="590" height="159" src="https://st9ph.fr/wp-content/uploads/2025/12/image-5.png" alt="" class="wp-image-30939" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-5.png 590w, https://st9ph.fr/wp-content/uploads/2025/12/image-5-300x81.png 300w" sizes="auto, (max-width: 590px) 100vw, 590px" /></figure>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-ba768003a62bf2c13afc231b5cb24e3f">3️⃣| Une bonne introduction pour assoir vos lecteurs</h2>



<p>✨ Ca y&#8217;est !<strong>Ils ont cliqué pour voir</strong> ! A vous maintenant de les rassurer qu&#8217;ils ont <strong>fait le bon choix </strong>!</p>



<p>➡️ <strong>Annoncez</strong> cette fois <strong>clairement</strong> </p>



<ul class="wp-block-list">
<li>de quoi vous allez traiter, </li>



<li>posez <strong>votre plan</strong> sommairement. </li>



<li>Ne dites <strong>pas tout dans l&#8217;introduction</strong> non plus, sinon la suite ne sert plus à rien.</li>
</ul>



<h3 class="wp-block-heading">3-1 |<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"> Répéter n&#8217;est pas jouer</mark></h3>



<div class="bloc-attention">
  ⚠️ Attention aussi à <strong>ne pas &#8220;cannibaliser&#8221; vos mots clés !</strong> 
</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>



<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary>🤔 Ca veut dire quoi &#8220;<strong>cannibaliser les mots clés</strong> ?&#8221;</summary>
<p>C&#8217;est les utiliser trop souvent au point d&#8217;obliger Google à les référencer sans arrêt. Si c&#8217;est à outrance, il risque de vous déclasser rien que pour cela ! Tout redondance, en règle générale, est à éviter.</p>
</details>



<p>➡️ <strong>Une technique</strong> que j&#8217;apprécie personnellement beaucoup mais <strong>que je n&#8217;utilise plu</strong>s est celle de <strong>l&#8217;extrait</strong>, comme dans l&#8217;aperçu ci-dessous :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="899" height="345" src="https://st9ph.fr/wp-content/uploads/2025/12/image-12.png" alt="" class="wp-image-30950" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-12.png 899w, https://st9ph.fr/wp-content/uploads/2025/12/image-12-300x115.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-12-768x295.png 768w" sizes="auto, (max-width: 899px) 100vw, 899px" /><figcaption class="wp-element-caption"><em>Extrait de l&#8217;article LA Revue du Digital du 1er dec 25 intitulé &#8220;L’e-commerçant BackMarket crée des agents IA pour stopper la fraude logistique&#8221; <a href="https://www.larevuedudigital.com/le-site-e-commerce-backmarket-cree-des-agents-ia-pour-stopper-la-fraude-logistique/" target="_blank" rel="noreferrer noopener">à lire ici</a></em></figcaption></figure>



<p class="has-base-2-background-color has-background">👉🏻 Le fait de <strong>reprendre un élément clé </strong>de ce que le lecteur s&#8217;apprête à découvrir (ici, les premières phrases) <strong>peut le rendre curieux </strong>et <strong>l&#8217;inciter à poursuivre </strong>quand le contenu entier lui semble un peu long.</p>



<p>ℹ️  Les journalistes utilisent beaucoup cette technique <strong>dans les interviews de la presse écrite</strong> afin de <strong>mettre en valeur un élément clé de la réponse </strong>(un trait d&#8217;humour, une annonce particulière &#8230;)</p>



<h3 class="wp-block-heading">3-2 |<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"> Illustrer, c&#8217;est reposer et orienter</mark></h3>



<p>➡️ <strong>une petite illustration</strong> pour mettre dans l&#8217;ambiance ne gâtera rien si vous y pensez.</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="1024" height="1024" src="https://st9ph.fr/wp-content/uploads/2025/12/image-10.png" alt="" class="wp-image-30947" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-10.png 1024w, https://st9ph.fr/wp-content/uploads/2025/12/image-10-300x300.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-10-150x150.png 150w, https://st9ph.fr/wp-content/uploads/2025/12/image-10-768x768.png 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</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="1024" height="1024" src="https://st9ph.fr/wp-content/uploads/2025/12/image-11.png" alt="" class="wp-image-30948" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-11.png 1024w, https://st9ph.fr/wp-content/uploads/2025/12/image-11-300x300.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-11-150x150.png 150w, https://st9ph.fr/wp-content/uploads/2025/12/image-11-768x768.png 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</div>
</div>



<p>👉🏻 Les <strong>deux images</strong> ci dessus, toutes deux générées par l&#8217;IA, donnent <strong>un message différent</strong> tout en illustrant toutes les deux <strong>la même présentation </strong>d&#8217;une activité commerciale. </p>



<ul class="wp-block-list">
<li>La première focalise l&#8217;attention des visiteurs <strong>sur la présentatrice</strong></li>



<li> la seconde les concentre sur <strong>les plaquettes commerciales.</strong></li>
</ul>



<p class="has-base-2-background-color has-background">🖼️ L&#8217;image est non seulement <strong>récréative pour l&#8217;œil </strong>mais elle <strong>fait appel à l&#8217;interprétation individuelle</strong>. <strong>L&#8217;IA permet </strong>maintenant <strong>de créer </strong>avec précision <strong>l&#8217;univers visuel</strong> et l&#8217;ambiance <strong>que vous souhaitez diffuser</strong>.</p>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-7fbae1cdbca923c3567de84dd2d12039">4️⃣| Un contenu varié et interactif</h2>



<p>➡️ <strong>Vos parties</strong> (deux <strong>H2</strong> minimum) doivent être :</p>



<ul class="wp-block-list">
<li> <strong>équilibrées en longueur</strong></li>



<li><strong>alterner les blocs</strong></li>



<li>proposer <strong>un maximum d&#8217;interaction et de rebond. </strong></li>
</ul>



<div class="bloc-astuce">
  ✅ Faites <strong>une phrase d&#8217;introduction accrocheuse</strong> et une autre de conclusion pour en rappeler <strong>les idées clés</strong>.
</div>

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



<p>Je vous renvois au &#8220;<strong>A&#8221; de la méthode HABI</strong> <a href="https://st9ph.fr/wordpress-methode-habi-et-yoast-seo-synchronises/#alternance-des-blocs" target="_blank" rel="noreferrer noopener">dans cet article</a> pour les règles de base.</p>



<ul class="wp-block-list">
<li>Tout ce qui pourra appuyer ou <strong>remplacer un propos écrit</strong> sera le bienvenu, sauf si vous écrivez dans un blog pour les passionnés de lecture, bien évidemment.</li>



<li>Faites <strong>court</strong>, utilisez ma méthode de <strong>lecture rapide </strong>en mettant <strong>en gras les mots importants.</strong></li>



<li>Orientez par <strong>des expressions de liaison </strong>(&#8220;dans le même temps&#8221;, &#8220;a contrario&#8221;, &#8220;la seconde étape consiste à &#8230;&#8221;, &#8220;Pour résumer &#8230;&#8221;</li>



<li><strong>Introduisez vos division</strong>s par des courtes phrases d&#8217;introduction et terminez lès <strong>en rappelant brièvement votre idée principale.</strong></li>



<li><strong>Relisez</strong> vous-même <strong>à haute voix </strong>vos paragraphes. Vous pourrez mieux <strong>vous rendre compte</strong> quand ils sont <strong>trop longs</strong> et / ou difficiles à comprendre.</li>
</ul>



<p>👉🏻 <strong>Yoast</strong>, dans, son <strong>onglet de lisibilité</strong> vous <strong>conseille </strong>à ce sujet :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="610" height="338" src="https://st9ph.fr/wp-content/uploads/2025/12/image-13.png" alt="" class="wp-image-30958" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-13.png 610w, https://st9ph.fr/wp-content/uploads/2025/12/image-13-300x166.png 300w" sizes="auto, (max-width: 610px) 100vw, 610px" /></figure>



<h3 class="wp-block-heading">4-1 | 🎧 <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Le podcast pour les mobinautes qui ont &#8220;la tête ailleurs&#8221;</mark></h3>



<p>Certains vous suivrons <strong>dans les transports</strong> en commun ou <strong>en faisant autre chose</strong> en même temps et apprécieront aussi que vous leurs proposiez <strong>du contenu 100% audio</strong>. </p>



<p class="has-base-2-background-color has-background">🌐 Des SaaS <strong>de Text-to-Speech </strong>(convertisseurs de texte en parole) sont <strong>disponibles en ligne</strong>. Certains dans leurs <strong>versions gratuites </strong>sont suffisantes <strong>pour débuter</strong>.</p>



<figure class="wp-block-audio"><audio controls src="https://st9ph.fr/wp-content/uploads/2025/12/voicertool_audio_Denise_03-12-2025_at_09_47_46_on_December_3rd_2025.mp3"></audio></figure>



<p>➡️ Le lecteur ci-dessus permet de <strong>lire l&#8217;introduction</strong> qui le précède. Il a été généré par <strong><a href="https://voicertool.com/fr" target="_blank" rel="noreferrer noopener">Voicertool</a></strong> qui ne demande<mark style="background-color:rgba(0, 0, 0, 0);color:#1fa137" class="has-inline-color"> <strong>pas d&#8217;inscription et qui est gratuit</strong></mark>. <strong>Un mp3 généré est téléchargeable gratuitement</strong>. Il vous suffit de <strong>le téléverser via le bloc &#8220;audio&#8221;</strong> de la section &#8220;<strong>Media</strong>&#8220;.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="846" height="277" src="https://st9ph.fr/wp-content/uploads/2025/12/image-14.png" alt="" class="wp-image-30960" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-14.png 846w, https://st9ph.fr/wp-content/uploads/2025/12/image-14-300x98.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-14-768x251.png 768w" sizes="auto, (max-width: 846px) 100vw, 846px" /></figure>



<p>👉🏻 Vous pouvez aussi tout simplement <strong>utiliser le magnéto de Windows</strong> ou de votre smartphone pour enregistrer <strong>votre texte en le lisant</strong>.</p>



<h3 class="wp-block-heading">4-2 | 📽️ <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">De la vidéo pour rendre vivant votre contenu</mark></h3>



<p>➡️ Qu&#8217;il s&#8217;agisse de <strong>vidéos Youtube </strong>que vous allez sélectionner (ou pourquoi pas créer vous-même)<strong>pour illustrer votre propos</strong>, de <strong>schémas </strong>pour indiquer <strong>pas-à-pas</strong> un processus ou de <strong>captures d&#8217;écran vidéo</strong> pour un tuto logiciel, les outils de génération de contenus animées ne manquent pas.</p>



<h4 class="wp-block-heading">🟦 Un lecteur vidéo</h4>



<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="758" height="444" src="https://st9ph.fr/wp-content/uploads/2025/12/image-15.png" alt="" class="wp-image-30962" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-15.png 758w, https://st9ph.fr/wp-content/uploads/2025/12/image-15-300x176.png 300w" sizes="auto, (max-width: 758px) 100vw, 758px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Une <strong>recherche google</strong> dans <strong>la section vidéo</strong> vous donnera en général une liste pléthorique d&#8217;illustrations de vos propos.</p>



<ul class="wp-block-list">
<li>Copiez en <strong>clic droit l&#8217;url de la vidéo</strong> que vous collerez dans <strong>un bloc vidéo </strong>de la section Media </li>
</ul>



<div class="bloc-a-retenir">
  💡 <strong>N&#8217;oubliez pas d&#8217;annoncer ce contenu</strong> par un paragraphe du style <em>&#8220;ci-dessous, une vidéo d&#8217;Untel illustrant &#8230;&#8221;</em>
</div>

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



<h4 class="wp-block-heading">🟦 Une animation Mpeg4</h4>



<p>➡️ Un schéma animé peut être généré <strong>avec un logiciel de PréAO.</strong> Powerpoint, par exemple, fait cela très bien.</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:33.33%">
<p><strong>Adaptez la taille des diapositives </strong>pour que la vidéo que vous allez générer ne soit pas trop grosse.</p>



<p class="has-base-2-background-color has-background">👉🏻 Une vignette <strong>de 10 x 5 cm </strong>est largement <strong>suffisante pour un deskstop</strong> et le zoom arrière que proposera le <strong>Frendly Mobile</strong> ne sera <strong>pas trop violent</strong> <strong>pour visionner </strong>l&#8217;animation <strong>depuis un smartphone.</strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="367" height="232" src="https://st9ph.fr/wp-content/uploads/2025/12/image-16.png" alt="" class="wp-image-30967" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-16.png 367w, https://st9ph.fr/wp-content/uploads/2025/12/image-16-300x190.png 300w" sizes="auto, (max-width: 367px) 100vw, 367px" /></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%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="450" height="264" src="https://st9ph.fr/wp-content/uploads/2025/12/image-17.png" alt="" class="wp-image-30969" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-17.png 450w, https://st9ph.fr/wp-content/uploads/2025/12/image-17-300x176.png 300w" sizes="auto, (max-width: 450px) 100vw, 450px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>👇🏻 Dans la vidéo ci-dessous, un simple <strong>fond de carte</strong> et <strong>un icone de vélo</strong> que j&#8217;anime avec l&#8217;option &#8220;<strong>parcours personnalisé</strong>&#8221; du <strong>Ruban Animations </strong>afin d&#8217;indiquer le parcours à suivre sur une carte IGN.</p>



<ul class="wp-block-list">
<li>Il suffit d&#8217;<strong>enregistrer le diaporama</strong> en changeant le <strong>type de document</strong> de présentation PowerPoint -&gt; <strong>vidéo mpeg4</strong></li>
</ul>
</div>
</div>



<figure class="wp-block-video"><video height="1080" style="aspect-ratio: 2160 / 1080;" width="2160" controls src="https://st9ph.fr/wp-content/uploads/2025/12/VTT.mp4"></video></figure>



<p class="has-base-2-background-color has-background">🎧 Vous pouvez bien entendu utiliser touts les options de <strong>narration</strong>, d&#8217;<strong>effets audio</strong> et d&#8217;<strong>animations</strong> que vous souhaitez.</p>



<h4 class="wp-block-heading">🟦 Un Screenshot vidéo</h4>



<p>➡️ Enfin, pour montrer une manipulation ou une observation sur l&#8217;écran, utilisez <strong>l&#8217;outil de capture d&#8217;écran</strong> de votre PC qui ne fait pas que des <strong>Screenshot</strong>, vous pouvez aussi lui demander d&#8217;<strong>enregistrer de la vidéo</strong> d&#8217;une zone de votre écran (depuis Windows 11).</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:60%">
<p>Dans <a href="https://st9ph.fr/tidio-un-outil-de-chatbot-dans-votre-eshop/" target="_blank" rel="noreferrer noopener">cet article,</a> par exemple, j&#8217;utilise <strong>un screenshot vidéo</strong> de la zone de chatbot de la boutique pédagogique pour en faire une démo.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="358" height="91" src="https://st9ph.fr/wp-content/uploads/2025/12/image-18.png" alt="" class="wp-image-30971" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-18.png 358w, https://st9ph.fr/wp-content/uploads/2025/12/image-18-300x76.png 300w" sizes="auto, (max-width: 358px) 100vw, 358px" /></figure>
</div>


<p class="has-base-2-background-color has-background">👉🏻 Attention toutefois à faire <strong>des éléments courts</strong> et qui <strong>ne se substituent pas</strong> à ce que vous exposez à l&#8217;écrit. </p>



<ul class="wp-block-list">
<li>La complémentarité doit venir à la fois de <strong>l&#8217;alternance des formats et des contenus</strong>. </li>



<li>Evitez l&#8217;effet hypnotique qui va <strong>détourner vos lecteurs de votre sujet.</strong></li>
</ul>



<div class="bloc-attention">
  ⚠️ <strong>Les personnages ci-dessous sont fictifs</strong>, Fort heureusement ! Toute ressemblance avec mes étudiants serait une pure coïncidence 😜
</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>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:40%">
<figure class="wp-block-video"><video height="648" style="aspect-ratio: 366 / 648;" width="366" controls src="https://st9ph.fr/wp-content/uploads/2023/09/tidio.mp4"></video></figure>
</div>
</div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="724" height="409" src="https://st9ph.fr/wp-content/uploads/2025/12/image-19.png" alt="" class="wp-image-30975" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-19.png 724w, https://st9ph.fr/wp-content/uploads/2025/12/image-19-300x169.png 300w" sizes="auto, (max-width: 724px) 100vw, 724px" /><figcaption class="wp-element-caption">Des &#8220;Zombinautes&#8221;</figcaption></figure>
</div>


<h3 class="wp-block-heading">4-3 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Utilisez les blocs interactifs</mark></h3>



<p>Ne parlons pas <strong>des blocs Spectra </strong>déjà mis en avant <a href="https://st9ph.fr/wordpress-blocs-spectra-remarquables/" target="_blank" rel="noreferrer noopener">dans cet article</a> (Google Maps, Post timeline ou grid, Compte-à-rebours, FAQ &#8230;) et concentrons nous sur les autres :</p>



<h4 class="wp-block-heading">🟦 Le contrôle tabulaire à onglets (Spectra &#8211; tab)</h4>



<p>➡️ C&#8217;est un moyen à la fois de permettre au lecteur <strong>de dérouler à son rythme</strong> un contenu (comme le contrôle FAQ) et <strong>de gagner de l&#8217;espace</strong>. C&#8217;est un moyen idéal <strong>de proposer un choix,</strong> aussi, pour des contenus optionnels que le lecteur ne souhaite peut-être pas tous parcourir.</p>



<div class="wp-block-uagb-tabs uagb-block-c020ae79 uagb-tabs__wrap uagb-tabs__hstyle1-desktop uagb-tabs__vstyle6-tablet uagb-tabs__stack1-mobile" data-tab-active="0"><ul class="uagb-tabs__panel uagb-tabs__align-left" role="tablist"><li class="uagb-tab uagb-tabs__active" role="none"><a href="#uagb-tabs__tab0" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="0" role="tab"><div>Franchissement</div></a></li><li class="uagb-tab " role="none"><a href="#uagb-tabs__tab1" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="1" role="tab"><div>Wheeling</div></a></li><li class="uagb-tab " role="none"><a href="#uagb-tabs__tab2" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="2" role="tab"><div>dérapage</div></a></li></ul><div class="uagb-tabs__body-wrap">
<div class="wp-block-uagb-tabs-child uagb-tabs__body-container uagb-inner-tab-0" aria-labelledby="uagb-tabs__tab0">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="469" height="453" src="https://st9ph.fr/wp-content/uploads/2025/12/image-20.png" alt="" class="wp-image-30976" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-20.png 469w, https://st9ph.fr/wp-content/uploads/2025/12/image-20-300x290.png 300w" sizes="auto, (max-width: 469px) 100vw, 469px" /></figure>
</div>



<div class="wp-block-uagb-tabs-child uagb-tabs__body-container uagb-inner-tab-1" aria-labelledby="uagb-tabs__tab1">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="552" height="564" src="https://st9ph.fr/wp-content/uploads/2025/12/image-21.png" alt="" class="wp-image-30977" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-21.png 552w, https://st9ph.fr/wp-content/uploads/2025/12/image-21-294x300.png 294w" sizes="auto, (max-width: 552px) 100vw, 552px" /></figure>
</div>



<div class="wp-block-uagb-tabs-child uagb-tabs__body-container uagb-inner-tab-2" aria-labelledby="uagb-tabs__tab2">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="598" height="621" src="https://st9ph.fr/wp-content/uploads/2025/12/image-22.png" alt="" class="wp-image-30978" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-22.png 598w, https://st9ph.fr/wp-content/uploads/2025/12/image-22-289x300.png 289w" sizes="auto, (max-width: 598px) 100vw, 598px" /></figure>
</div>
</div></div>



<h4 class="wp-block-heading">🟦 Le partage sur les réseaux (Spectra- Social Share)</h4>



<p>➡️ Si votre contenu a coutume <strong>d&#8217;être très populaire</strong>, tentez ce contrôle qui permettra à vos lecteurs de mettre en avant vos articles <strong>en les partageant sur leurs réseaux sociaux </strong>en deux clics.</p>



<div class="wp-block-uagb-social-share uagb-social-share__outer-wrap uagb-social-share__layout-horizontal uagb-block-a23999f8">
<div class="wp-block-uagb-social-share-child uagb-ss-repeater uagb-ss__wrapper uagb-block-a9ff138c"><span class="uagb-ss__link" data-href="https://www.facebook.com/sharer.php?u=" tabindex="0" role="button" aria-label="facebook"><span class="uagb-ss__source-wrap"><span class="uagb-ss__source-icon"><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></span></span></span></div>



<div class="wp-block-uagb-social-share-child uagb-ss-repeater uagb-ss__wrapper uagb-block-ae00f610"><span class="uagb-ss__link" data-href="https://twitter.com/share?url=" tabindex="0" role="button" aria-label="twitter"><span class="uagb-ss__source-wrap"><span class="uagb-ss__source-icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.25V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.62 74.62 0 1 0 52.23 71.18V0l88 0a121.2 121.2 0 0 0 1.86 22.17h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.14z"></path></svg></span></span></span></div>



<div class="wp-block-uagb-social-share-child uagb-ss-repeater uagb-ss__wrapper uagb-block-4c6714ff"><span class="uagb-ss__link" data-href="https://pinterest.com/pin/create/link/?url=" tabindex="0" role="button" aria-label="pinterest"><span class="uagb-ss__source-wrap"><span class="uagb-ss__source-icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 80v352c0 26.5-21.5 48-48 48H154.4c9.8-16.4 22.4-40 27.4-59.3 3-11.5 15.3-58.4 15.3-58.4 8 15.3 31.4 28.2 56.3 28.2 74.1 0 127.4-68.1 127.4-152.7 0-81.1-66.2-141.8-151.4-141.8-106 0-162.2 71.1-162.2 148.6 0 36 19.2 80.8 49.8 95.1 4.7 2.2 7.1 1.2 8.2-3.3 .8-3.4 5-20.1 6.8-27.8 .6-2.5 .3-4.6-1.7-7-10.1-12.3-18.3-34.9-18.3-56 0-54.2 41-106.6 110.9-106.6 60.3 0 102.6 41.1 102.6 99.9 0 66.4-33.5 112.4-77.2 112.4-24.1 0-42.1-19.9-36.4-44.4 6.9-29.2 20.3-60.7 20.3-81.8 0-53-75.5-45.7-75.5 25 0 21.7 7.3 36.5 7.3 36.5-31.4 132.8-36.1 134.5-29.6 192.6l2.2 .8H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48z"></path></svg></span></span></span></div>



<div class="wp-block-uagb-social-share-child uagb-ss-repeater uagb-ss__wrapper uagb-block-e9f9e921"><span class="uagb-ss__link" data-href="https://www.linkedin.com/shareArticle?url=" tabindex="0" role="button" aria-label="linkedin"><span class="uagb-ss__source-wrap"><span class="uagb-ss__source-icon"><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></span></span></span></div>
</div>



<h4 class="wp-block-heading">🟦 Le comparateur d&#8217;image (JetPack)</h4>



<p class="has-base-2-background-color has-background">Le <strong>JetPack </strong>est <strong>un Plug-In </strong>installé sur la plupart des CMS WordPress par défaut mais si ce n&#8217;est pas le cas, vous pouvez le faire gratuitement <strong>depuis la section extensions</strong>. Il fournit un certain nombre de blocs pour vos compositions dont celui-ci.</p>



<p>👉🏻 Le comparateur d&#8217;image est <strong>un moyen de juger de deux visuels différents</strong> afin de <strong>faire un choix</strong> (ici couleurs ou Noir et Blanc). Ca peut être aussi <strong>une maquette pour un projet</strong> d&#8217;aménagement (d&#8217;un espace vert, par exemple) avec <strong>des options différentes.</strong></p>



<figure class="wp-block-jetpack-image-compare"><div class="juxtapose" data-mode="horizontal"><img loading="lazy" decoding="async" id="30983" src="https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/VTTcouleur.jpg?ssl=1" alt="" width="1024" height="1024" class="image-compare__image-before"/><img loading="lazy" decoding="async" id="30982" src="https://i0.wp.com/st9ph.fr/wp-content/uploads/2025/12/VTTNB.jpg?ssl=1" alt="" width="1024" height="1024" class="image-compare__image-after"/></div></figure>



<h4 class="wp-block-heading">🟦 Sondez vos lecteurs</h4>



<p>➡️ Il existe beaucoup d&#8217;extensions <strong>téléchargeables gratuitement</strong> qui permettent d<strong>&#8216;effectuer des sondages.</strong></p>



<p>👉🏻 Ci-dessous, un exemple <strong>avec Poll Maker</strong>.</p>


<input type="hidden" id="ays_finish_poll_2" name="ays_finish_poll_2" value="f0daf68f5f" /><input type="hidden" name="_wp_http_referer" value="/category/creation-de-sites/feed/" /><input type="hidden" id="ays_finish_poll_show_res_2" name="ays_finish_poll_show_res_2" value="f0daf68f5f" /><input type="hidden" name="_wp_http_referer" value="/category/creation-de-sites/feed/" /><style>        #ays-poll-id-69fa3c550d64e.box-apm {            width: 600px;                        margin: 0 auto !important;            border-style: ridge;            border-color: #0C6291;            border-radius: 0;            border-width: 2px;            box-shadow: none;background-color: #FBFEF9;            background-position: center center;            background-repeat: no-repeat;            background-size: cover;            max-width: 100%;            position: relative;            padding-bottom: 60px;        }        .ays-poll-id-69fa3c550d64e.ays-minimal-theme .apm-choosing{		    display: flex;		    align-items: center;		}        .ays-poll-id-69fa3c550d64e div.ays-image-logo-show{			position: absolute;			bottom: -5px;    		left: 1px;			margin: 2px 0 0 0;			padding: 2px;			width: 100%;			height: 65px;			text-align: left;				}        .ays-poll-id-69fa3c550d64e .ays-poll-image-logo{			width: 55px;			height: 55px;		}		.ays-poll-id-69fa3c550d64e.ays-minimal-theme .apm-choosing input[type=radio]:checked + label, .ays-poll-id-69fa3c550d64e.ays-minimal-theme .apm-choosing label.ays_enable_hover:hover{        	background-color: #0C6291 !important;		    color: #0C6291 !important;		    border-color: #0C6291 !important;		    font-weight: initial !important;		    margin:3px 0 !important;		}		.ays-poll-id-69fa3c550d64e.ays-minimal-theme .apm-choosing input[type=radio]:checked + label *,		.ays-poll-id-69fa3c550d64e.ays-minimal-theme .apm-choosing input[type=checkbox]:checked + label *,		.ays-poll-id-69fa3c550d64e.ays-minimal-theme .apm-choosing label.ays_enable_hover:hover *{		    color: #0C6291;		}		.ays-poll-id-69fa3c550d64e.ays-minimal-theme .apm-choosing input[type=radio]{						border-radius: 50%;			width: 20px;			height: 19px;			margin: 3px !important;			border: 1px solid #1e8cbe;			opacity: 1;		}		.ays-poll-id-69fa3c550d64e.ays-minimal-theme .apm-answers .apm-choosing input[type=radio]:checked::after{			content: '';			border-radius: 50%;			width: 11px;			height: 11px;			background-color: #1e8cbe;			 		}		.ays-poll-id-69fa3c550d64e.ays-minimal-theme .apm-choosing input[type=radio]:focus{			outline-offset: 0 !important;    		outline: unset !important;		}		.ays-poll-id-69fa3c550d64e.ays-minimal-theme .apm-choosing label{			border-color: #0C6291 !important;		    font-weight: initial !important;		    margin:3px 0 !important;		}		.ays-poll-id-69fa3c550d64e.ays-minimal-theme .apm-choosing input[type='radio']{		    display: block !important;		}		.ays-poll-id-69fa3c550d64e.ays-minimal-theme input[type='button'].ays-poll-btn:hover, .ays-poll-id-69fa3c550d64e.ays-minimal-theme input[type='button'].ays-poll-btn:focus{			text-decoration: none;		}		.ays-poll-id-69fa3c550d64e.ays-minimal-theme input[type='button'].ays-poll-btn{		    color: initial !important;		    background: initial !important;		    border: 1px solid #0C6291;		    border-radius: 3px;		}		.ays-poll-id-69fa3c550d64e.ays-minimal-theme .ays_poll_passed_count{		    color: #0C6291 !important;		    background: initial !important;		    border: 1px solid #0C6291;		    border-radius: 3px;		}		.ays-poll-id-69fa3c550d64e.ays-minimal-theme .ays_poll_passed_count i.ays_poll_fa:before{		    color: #0C6291 !important;		    		}        .ays-poll-id-69fa3c550d64e.ays-minimal-theme .answer-percent{        	color: initial !important;		}        .ays-poll-id-69fa3c550d64e.box-apm span.ays_poll_passed_count{            background-color: #0C6291;            color: #FBFEF9;        }        #ays-poll-id-69fa3c550d64e.box-apm span.ays_poll_passed_count i{            color: #FBFEF9;        }        #ays-poll-id-69fa3c550d64e.box-apm .apm-title-box{            background-color: rgba(255,255,255,0);        }        .ays-poll-id-69fa3c550d64e .answer-percent {            background-color: #0C6291;            color: #FBFEF9 !important;        }        .ays-poll-id-69fa3c550d64e .ays-poll-btn{            color: #FBFEF9 !important;            background-color: #0C6291 !important;            overflow: hidden;        }        #ays-poll-id-69fa3c550d64e .ays-poll-view-more-button{		    border-radius: 0;		}        .ays-poll-id-69fa3c550d64e.box-apm * {            color: #0C6291;        }        .ays-poll-id-69fa3c550d64e.box-apm .apm-title-box div {            color: #0C6291;            text-transform: inherit;            font-family: inherit;			        }        #ays-poll-id-69fa3c550d64e.box-apm i {            color: #0C6291;            font-size: 24px;            font-style: normal;                    }		#ays-poll-id-69fa3c550d64e .ays-poll-btn{       		width: auto;			font-size: 17px;			padding: 10px 20px;			border-radius: 3px;			color: #FBFEF9 !important;			background: #0C6291 !important;			border: none;			line-height: 12px !important;		}		#ays-poll-id-69fa3c550d64e .apm-add-answer input.ays-poll-new-answer-apply-text{            width: 100%;			margin-bottom: 0;			margin-right: 5px;			border-color: #0C6291; 			padding: 7px;			font-size: 14px;			color: black;			height: 40px; 			outline: none;			display: inline-block;        }        #ays-poll-id-69fa3c550d64e.box-apm i.ays_poll_far{                        font-family: 'Font Awesome 5 Free';        }        #ays-poll-id-69fa3c550d64e.box-apm .apm-choosing .ays-poll-each-answer-list{            			width: initial;			text-align: initial;			display: initial;			padding: 10px;        }        #ays-poll-id-69fa3c550d64e.box-apm .apm-choosing .ays-poll-each-answer-grid{            			width: 100%;			text-align: left;			display: inline-block;			word-break: break-word;        }		        #ays-poll-id-69fa3c550d64e.box-apm .apm-choosing .ays_label_poll{            			width: 100%;			text-align: center;			display: flex;			;			align-items: center;			padding: 10px;        }        #ays-poll-id-69fa3c550d64e.box-apm .apm-choosing .ays-poll-each-image{            			height: 150px;			border-radius: 0px;			object-fit: cover;        }        #ays-poll-id-69fa3c550d64e.box-apm .apm-choosing .ays-poll-each-image-list{			width: 220px;        }        #ays-poll-id-69fa3c550d64e.box-apm .apm-choosing .ays-poll-each-image-grid{			width: 100%;        }        #ays-poll-id-69fa3c550d64e.box-apm .apm-choosing .ays-poll-answer-container-label-grid{			align-items: center;        }        #ays-poll-id-69fa3c550d64e.box-apm .apm-choosing .ays-poll-answer-container-label-list{			flex-direction: row;        }        #ays-poll-id-69fa3c550d64e.box-apm .ays_poll_grid_view_container{			display: flex;			flex-wrap: wrap;			justify-content: space-between;			align-items: flex-start;        }        #ays-poll-id-69fa3c550d64e.box-apm .ays-poll-answer-container-gird{			width: calc(50% - 5px);			margin-bottom: 10px;        }		        #ays-poll-id-69fa3c550d64e.box-apm .ays_poll_label_without_padding{			padding: 10px;			align-items: center;			flex-direction: column;        }        #ays-poll-id-69fa3c550d64e.box-apm .apm-title-box div{			font-size: 20px;			word-break: break-word;			word-wrap: break-word;			text-align: center;        }        #ays-poll-id-69fa3c550d64e.box-apm .ays-poll-answer-container-list{						margin-bottom: 10px;			display: flex;			width: 100%;        }        #ays-poll-id-69fa3c550d64e.box-apm .ays-poll-maker-text-answer-main input,		#ays-poll-id-69fa3c550d64e.box-apm .ays-poll-maker-text-answer-main textarea{			min-width: 150px;			max-width: 100%;			width: %;        }        #ays-poll-id-69fa3c550d64e.box-apm .ays-poll-password-box .ays-poll-password-button-box .ays-poll-password-button{			background-color: #0C6291;			color: #FBFEF9;			border-color: #0C6291;			outline: none;			box-shadow: unset;			border: 0;			transition: .5s;        }        #ays-poll-id-69fa3c550d64e.box-apm .ays-poll-password-box .ays-poll-password-button-box .ays-poll-password-button:hover{			background-color: #0C6291b5;        }        #ays-poll-id-69fa3c550d64e.box-apm .ays-poll-password-box .ays-poll-password-input-box .ays-poll-password-input{			border-color: #0C6291;        }		#ays-poll-id-69fa3c550d64e.box-apm .apm-answers .apm-choosing label.ays_label_poll{            			box-shadow:unset;			border-radius: 0px;        }		#ays-poll-id-69fa3c550d64e.box-apm.text-poll .apm-answers .ays-poll-text-types-inputs{            			font-size: 16px;        }					#ays-poll-id-69fa3c550d64e div.apm-load-message-container{            				background-color: #FBFEF9 !important;			}	        #ays-poll-id-69fa3c550d64e.choosing-poll label {	            background-color: #FBFEF9;	            border: 1px solid #0C6291;	            text-transform: inherit;	        }        .ays-poll-id-69fa3c550d64e.choosing-poll input[type=radio]:checked + label,		.ays-poll-id-69fa3c550d64e:not(.ays-minimal-theme).choosing-poll input[type='checkbox']:checked + label,        .ays-poll-id-69fa3c550d64e.choosing-poll label.ays_enable_hover:hover {        	background-color: #0C6291 !important;            color: #FBFEF9;        }		.ays-poll-id-69fa3c550d64e:not(.ays-minimal-theme).choosing-poll input[type='checkbox']{			display: none;		}        .ays-poll-id-69fa3c550d64e.choosing-poll input[type=radio]:checked + label *,        .ays-poll-id-69fa3c550d64e.choosing-poll input[type=checkbox]:checked + label *,        .ays-poll-id-69fa3c550d64e.choosing-poll label.ays_enable_hover:hover * {            color: #FBFEF9;        }.ays-poll-id-69fa3c550d64e .apm-info-form input {            border-color: #0C6291;        }        div[class~=ays-poll-id-69fa3c550d64e] label.ays_label_font_size {            font-size: 16px;        }        button.ays-poll-next-btn:focus {            background: unset;            outline: none;        }        button.ays-poll-next-btn:disabled {            cursor: not-allowed;            background: dimgrey !important;            color: white !important;        }        button.ays-poll-next-btn:enabled {            cursor: pointer;        }        .ays-poll-id-69fa3c550d64e .apm-info-form input {            color: #0C6291 !important;            background-color: #FBFEF9 !important;        }         .ays-poll-main #ays-poll-id-69fa3c550d64e .ays-poll-img {            object-fit: cover;			height: 100%;         }        .ays-poll-id-69fa3c550d64e div.apm-loading-gif .apm-loader svg path,        .ays-poll-id-69fa3c550d64e div.apm-loading-gif .apm-loader svg rect {            fill: #0C6291;        }.ays-poll-id-69fa3c550d64e div.apm-loading-gif .apm-loader{				display: flex;				justify-content: center;				align-items: center;				padding-top: 10px;			}			.ays-poll-id-69fa3c550d64e div.apm-loading-gif{				width: 100%;    			height: 100%;			}			.ays-poll-id-69fa3c550d64e.box-apm .ays_question p{			font-size: 16px;		}				@media only screen and (max-width: 768px){			#ays-poll-id-69fa3c550d64e.box-apm {				width: 100%;			}			#ays-poll-id-69fa3c550d64e.box-apm .ays-poll-btn{				width: auto;			}			.ays-poll-id-69fa3c550d64e.box-apm .ays_question p{				font-size: 16px;			}						.ays-poll-id-69fa3c550d64e .apm-answers .apm-rating i.ays_poll_fa-star {				font-size: 4vw !important;			}			#ays-poll-id-69fa3c550d64e.box-apm .ays-poll-answer-container-gird{				width: 100%;			}			#ays-poll-id-69fa3c550d64e.box-apm .apm-title-box div{				font-size: 20px;				text-align: center;				word-break: break-word;				word-wrap: break-word;			}			.ays-poll-id-69fa3c550d64e.box-apm label.ays_label_font_size {				font-size: 16px;			}			#ays-poll-id-69fa3c550d64e.box-apm.text-poll .apm-answers .ays-poll-text-types-inputs{            				font-size: 16px;			}			#ays-poll-id-69fa3c550d64e.box-apm .apm-answers > .apm-choosing > .ays_label_poll > div.ays-poll-answer-image > img.ays-poll-each-image{				height: 150px;			}			#ays-poll-id-69fa3c550d64e.box-apm .apm-answers .apm-choosing > label.ays-poll-answer-container-label-list > p.ays-poll-answers > span.ays-poll-each-answer-list {				padding: unset;				word-wrap: break-word;			}			#ays-poll-id-69fa3c550d64e .ays-poll-btn{				font-size: 17px;				line-height: 1;				white-space: normal;				word-break: break-word;			}		}		@media screen and (max-width: 768px){			#ays-poll-id-69fa3c550d64e{				max-width: 100%;			}		}		#ays-poll-container-2{        	width: 600px;		}		@media screen and (max-width: 768px){			#ays-poll-container-2{				width: 100%;				max-width: 96%;			}			#ays-poll-id-69fa3c550d64e.box-apm .apm-choosing .ays-poll-each-image-list{				width: 100%;        	}		}			           </style>        <script>            var dataCss = {				width: '600px',                maxWidth: '98%',                fontSize: '16px',                padding: '10px',                margin: '0 auto',                marginTop: '-1rem',                borderStyle: 'ridge',                borderWidth: '2px',                borderColor: '#0C6291',                background: '#FBFEF9',                color: '#0C6291',                transition: '.3s ease',                WebkitAppearance: 'none',                appearance: 'none',                };            var hoverCss = {                background: '#0C6291',                color: '#FBFEF9',                borderColor: '#FBFEF9',            };        </script><div style='margin-bottom: 1rem;' class='ays-poll-main ' id='ays-poll-container-2' data-load-method=''>        <form style='margin-bottom: 0;' >                        <div                dir='ltr'        data-loading='load_gif'        data-load-gif='plg_default'        data-load-gif-font-size='64'                data-hide-bg-image='false'        data-gradient-check=''        data-gradient-dir='to bottom'        data-gradient-c1='#103251'        data-gradient-c2='#607593'        data-hide-bg-image-def-color='#FBFEF9'        data-show-social=''        class='box-apm  choosing-poll ays-poll-id-69fa3c550d64e '        id='ays-poll-id-69fa3c550d64e'        data-res='0'        data-res-sort='none'        data-restart ='false'        data-redirection = '0'        data-redirect-check = '0'        data-url-href = ''        data-href = ''        data-delay = '0'        data-id='2'        data-res-rgba = ''        data-percent-color = '#0C6291'        data-enable-top-animation = ''        data-top-animation-scroll = '100'        data-info-form=''        data-enable-social-links=''        ><span class='ays_poll_passed_count'><i class='ays_poll_fa ays_poll_fa-users' aria-hidden='true'></i> 17</span><div class='ays_poll_cb_and_a'></div><div class='apm-title-box'><div>Quel type de cyclisme pratiquez-vous ?</div></div><div class='ays-poll-id-69fa3c550d64e ays_question'><p>Quel type de cyclisme pratiquez vous ?</p></div><div class='ays-poll-id-69fa3c550d64e hideResults ays-poll-hide-result-box'> </div><div class='apm-answers  ays_poll_list_view_container'>											<div class='apm-choosing answer-ays-poll-id-69fa3c550d64e  ays-poll-field ays-poll-answer-container-list' >											<input type=radio name='answer' id='radio-0-ays-poll-id-69fa3c550d64e' value='6' autocomplete="off">											<label 												for='radio-0-ays-poll-id-69fa3c550d64e' 												class='ays_label_poll   ays_enable_hover ays_label_font_size   ays-poll-answer-container-label-list' 												data-answers-url=''											> <p style='' class='ays-poll-answers'><span class='ays-poll-each-answer-grid'>Sportif sur route</span></p></label>											</div>											<div class='apm-choosing answer-ays-poll-id-69fa3c550d64e  ays-poll-field ays-poll-answer-container-list' >											<input type=radio name='answer' id='radio-1-ays-poll-id-69fa3c550d64e' value='7' autocomplete="off">											<label 												for='radio-1-ays-poll-id-69fa3c550d64e' 												class='ays_label_poll   ays_enable_hover ays_label_font_size   ays-poll-answer-container-label-list' 												data-answers-url=''											> <p style='' class='ays-poll-answers'><span class='ays-poll-each-answer-grid'>Cross sportif</span></p></label>											</div>											<div class='apm-choosing answer-ays-poll-id-69fa3c550d64e  ays-poll-field ays-poll-answer-container-list' >											<input type=radio name='answer' id='radio-2-ays-poll-id-69fa3c550d64e' value='8' autocomplete="off">											<label 												for='radio-2-ays-poll-id-69fa3c550d64e' 												class='ays_label_poll   ays_enable_hover ays_label_font_size   ays-poll-answer-container-label-list' 												data-answers-url=''											> <p style='' class='ays-poll-answers'><span class='ays-poll-each-answer-grid'>Loisir, promenade</span></p></label>											</div>											<div class='apm-choosing answer-ays-poll-id-69fa3c550d64e  ays-poll-field ays-poll-answer-container-list' >											<input type=radio name='answer' id='radio-3-ays-poll-id-69fa3c550d64e' value='9' autocomplete="off">											<label 												for='radio-3-ays-poll-id-69fa3c550d64e' 												class='ays_label_poll   ays_enable_hover ays_label_font_size   ays-poll-answer-container-label-list' 												data-answers-url=''											> <p style='' class='ays-poll-answers'><span class='ays-poll-each-answer-grid'>Je n&#039;en pratique pas</span></p></label>											</div></div><div class='apm-cashed-fa'><div>                                <i class='ays_poll_fas ays_poll_fa-star' style='font-size: 0'></i>                            </div><div>                                <i class='ays_poll_fas ays_poll_fa-star' style='font-size: 0'></i>                            </div><div>                                <i class='ays_poll_fas ays_poll_fa-star' style='font-size: 0'></i>                            </div><div>                                <i class='ays_poll_fas ays_poll_fa-star' style='font-size: 0'></i>                            </div></div><input type="hidden" id="ays_finish_poll_show_res_2" name="ays_finish_poll_show_res_2" value="f0daf68f5f" /><input type="hidden" name="_wp_http_referer" value="/category/creation-de-sites/feed/" /><div class='apm-button-box'><input type='button' 	                    name='ays_finish_poll'	                    class='btn ays-poll-btn choosing-btn ays_finish_poll'	                    data-form='ays-poll-id-69fa3c550d64e'	                    value="Vote"	                    ></div><script>				if(typeof aysPollOptions === 'undefined'){					var aysPollOptions = [];				}				aysPollOptions['ays-poll-id-69fa3c550d64e']  = 'eyJtYWluX2NvbG9yIjoiIzBDNjI5MSIsInRleHRfY29sb3IiOiIjMEM2MjkxIiwiYnV0dG9uX3RleHRfY29sb3IiOiIjRkJGRUY5IiwiYnV0dG9uX2JnX2NvbG9yIjoiIzBDNjI5MSIsImljb25fY29sb3IiOiIjMEM2MjkxIiwiYmdfY29sb3IiOiIjRkJGRUY5IiwiYmdfaW1hZ2UiOiIiLCJlbmFibGVfYW5zd2VyX3N0eWxlIjoib24iLCJhbnN3ZXJfYmdfY29sb3IiOiIjRkJGRUY5IiwiYW5zd2VyX2hvdmVyX2NvbG9yIjoiIzBDNjI5MSIsImFuc3dlcl9ib3JkZXJfc2lkZSI6ImFsbF9zaWRlcyIsImFuc3dlcl9mb250X3NpemUiOiIxNiIsInBvbGxfYW5zd2VyX2ZvbnRfc2l6ZV9tb2JpbGUiOiIxNiIsInBvbGxfYW5zd2VyX29iamVjdF9maXQiOiJjb3ZlciIsInBvbGxfYW5zd2VyX3BhZGRpbmciOiIxMCIsInBvbGxfYW5zd2VyX21hcmdpbiI6IjEwIiwicG9sbF9hbnN3ZXJfYm9yZGVyX3JhZGl1cyI6MCwicG9sbF9hbnN3ZXJfaWNvbl9jaGVjayI6Im9mZiIsInBvbGxfYW5zd2VyX2ljb24iOiJyYWRpbyIsInBvbGxfYW5zd2VyX3ZpZXdfdHlwZSI6Imxpc3QiLCJwb2xsX2Fuc3dlcl9lbmFibGVfYm94X3NoYWRvdyI6Im9mZiIsInBvbGxfYW5zd2VyX2JveF9zaGFkb3dfY29sb3IiOiIjMDAwMDAwIiwicG9sbF9hbnN3ZXJfYm94X3NoYWRvd194X29mZnNldCI6MCwicG9sbF9hbnN3ZXJfYm94X3NoYWRvd195X29mZnNldCI6MCwicG9sbF9hbnN3ZXJfYm94X3NoYWRvd196X29mZnNldCI6MTAsInRpdGxlX2JnX2NvbG9yIjoicmdiYSgyNTUsMjU1LDI1NSwwKSIsInBvbGxfdGl0bGVfZm9udF9zaXplIjoiMjAiLCJwb2xsX3RpdGxlX2ZvbnRfc2l6ZV9tb2JpbGUiOiIyMCIsImljb25fc2l6ZSI6MjQsIndpZHRoIjo2MDAsIndpZHRoX2Zvcl9tb2JpbGUiOjAsInBvbGxfbWluX2hlaWdodCI6IiIsImJvcmRlcl9zdHlsZSI6InJpZGdlIiwiYm9yZGVyX3JhZGl1cyI6IjAiLCJib3JkZXJfd2lkdGgiOiIyIiwiYm9yZGVyX2NvbG9yIjoiIzBDNjI5MSIsImVuYWJsZV9ib3hfc2hhZG93Ijoib2ZmIiwiYm94X3NoYWRvd19jb2xvciI6IiMwMDAwMDAiLCJwb2xsX2JveF9zaGFkb3dfeF9vZmZzZXQiOjAsInBvbGxfYm94X3NoYWRvd195X29mZnNldCI6MCwicG9sbF9ib3hfc2hhZG93X3pfb2Zmc2V0IjoxNSwiZW5hYmxlX2JhY2tncm91bmRfZ3JhZGllbnQiOiJvZmYiLCJiYWNrZ3JvdW5kX2dyYWRpZW50X2NvbG9yXzEiOiIjMTAzMjUxIiwiYmFja2dyb3VuZF9ncmFkaWVudF9jb2xvcl8yIjoiIzYwNzU5MyIsInBvbGxfZ3JhZGllbnRfZGlyZWN0aW9uIjoidmVydGljYWwiLCJwb2xsX3F1ZXN0aW9uX3NpemVfcGMiOiIxNiIsInBvbGxfcXVlc3Rpb25fc2l6ZV9tb2JpbGUiOiIxNiIsInBvbGxfcXVlc3Rpb25faW1hZ2VfaGVpZ2h0IjoiIiwicG9sbF9xdWVzdGlvbl9pbWFnZV9vYmplY3RfZml0IjoiY292ZXIiLCJwb2xsX21vYmlsZV9tYXhfd2lkdGgiOiIiLCJwb2xsX2J1dHRvbnNfc2l6ZSI6Im1lZGl1bSIsInBvbGxfYnV0dG9uc19mb250X3NpemUiOiIxNyIsInBvbGxfYnV0dG9uc19tb2JpbGVfZm9udF9zaXplIjoiMTciLCJwb2xsX2J1dHRvbnNfbGVmdF9yaWdodF9wYWRkaW5nIjoiMjAiLCJwb2xsX2J1dHRvbnNfdG9wX2JvdHRvbV9wYWRkaW5nIjoiMTAiLCJwb2xsX2J1dHRvbnNfYm9yZGVyX3JhZGl1cyI6IjMiLCJwb2xsX2J1dHRvbnNfd2lkdGgiOiIiLCJwb2xsX2J1dHRvbnNfbW9iaWxlX3dpZHRoIjoiIiwiZGlzYWJsZV9hbnN3ZXJfaG92ZXIiOjAsImxvZ29faW1hZ2UiOiIiLCJwb2xsX2VuYWJsZV9sb2dvX3VybCI6Im9mZiIsInBvbGxfbG9nb190aXRsZSI6IiIsInBvbGxfbG9nb191cmwiOiIiLCJjdXN0b21fY2xhc3MiOiIiLCJlbmFibGVfcG9sbF90aXRsZV90ZXh0X3NoYWRvdyI6Im9mZiIsInBvbGxfdGl0bGVfdGV4dF9zaGFkb3ciOiJyZ2JhKDI1NSwyNTUsMjU1LDApIiwicG9sbF90aXRsZV90ZXh0X3NoYWRvd194X29mZnNldCI6MiwicG9sbF90aXRsZV90ZXh0X3NoYWRvd195X29mZnNldCI6MiwicG9sbF90aXRsZV90ZXh0X3NoYWRvd196X29mZnNldCI6MCwicG9sbF9hbGxvd19tdWx0aXZvdGUiOiJvZmYiLCJtdWx0aXZvdGVfYW5zd2VyX21pbl9jb3VudCI6IjEiLCJwb2xsX2FsbG93X211bHRpdm90ZV9jb3VudCI6IjEiLCJwb2xsX2RpcmVjdGlvbiI6Imx0ciIsInNob3dfY3JlYXRlX2RhdGUiOjAsInNob3dfYXV0aG9yIjowLCJhY3RpdmVfZGF0ZV9jaGVjayI6IiIsImFjdGl2ZUludGVydmFsIjoiMjAyNS0xMi0wNCIsImFjdGl2ZUludGVydmFsU2VjIjoiIiwiZGVhY3RpdmVJbnRlcnZhbCI6IjIwMjUtMTItMDQiLCJkZWFjdGl2ZUludGVydmFsU2VjIjoiIiwiYXlzX3BvbGxfc2hvd190aW1lciI6MCwic2hvd19ib3R0b21fdGltZXIiOjAsImF5c19zaG93X3RpbWVyX3R5cGUiOiJjb3VudGRvd24iLCJzaG93X3Jlc3VsdF9idG5fc2VlX3NjaGVkdWxlIjoid2l0aF9zZWUiLCJhY3RpdmVfZGF0ZV9tZXNzYWdlX3Nvb24iOiI8cCBzdHlsZT1cXFwidGV4dC1hbGlnbjogY2VudGVyO1xcXCI+TGUgc29uZGFnZSBzZXJhIGJpZW50XHUwMGY0dCBkaXNwb25pYmxlXHUwMGEwITxcL3A+XG4iLCJhY3RpdmVfZGF0ZV9tZXNzYWdlIjoiPHAgc3R5bGU9XFxcInRleHQtYWxpZ246IGNlbnRlcjtcXFwiPkxlIHNvbmRhZ2UgYSBleHBpclx1MDBlOVx1MDBhMCE8XC9wPlxuIiwic2hvd19yZXN1bHRfYnRuX3NjaGVkdWxlIjowLCJkb250X3Nob3dfcG9sbF9jb250Ijoib2ZmIiwiYWxsb3dfbm90X3ZvdGUiOjAsInNlZV9yZXNfYnRuX3RleHQiOiJWb2lyIGxlcyByXHUwMGU5c3VsdGF0cyIsImVuYWJsZV9wYXNzX2NvdW50Ijoib24iLCJyZWRpcmVjdF91c2VycyI6MCwicmVkaXJlY3RfYWZ0ZXJfdm90ZV91cmwiOmZhbHNlLCJyZWRpcmVjdGlvbl9kZWxheSI6MCwicmFuZG9taXplX2Fuc3dlcnMiOiJvZmYiLCJlbmFibGVfYXNud2Vyc19zb3VuZCI6Im9mZiIsInBvbGxfdm90ZV9yZWFzb24iOiJvZmYiLCJlbmFibGVfdm90ZV9idG4iOjEsImJ0bl90ZXh0IjoiVm90ZSIsImVuYWJsZV92aWV3X21vcmVfYnV0dG9uIjoib2ZmIiwicG9sbF92aWV3X21vcmVfYnV0dG9uX2NvdW50IjowLCJhbnN3ZXJfc29ydF90eXBlIjoiZGVmYXVsdCIsInNob3dfYW5zd2Vyc19udW1iZXJpbmciOiJub25lIiwiaGlkZV9yZXN1bHRzIjowLCJoaWRlX3Jlc3VsdF9tZXNzYWdlIjowLCJoaWRlX3Jlc3VsdHNfdGV4dCI6IjxwIHN0eWxlPVwidGV4dC1hbGlnbjogY2VudGVyO1wiPk1lcmNpIHBvdXIgdm90cmUgclx1MDBlOXBvbnNlXHUwMGEwITxcL3A+IiwicmVzdWx0X21lc3NhZ2UiOiIiLCJzaG93X3NvY2lhbCI6MCwicG9sbF9zb2NpYWxfYnV0dG9uc19oZWFkaW5nIjoiIiwicG9sbF9zaG93X3NvY2lhbF9sbiI6Im9uIiwicG9sbF9zaG93X3NvY2lhbF9mYiI6Im9uIiwicG9sbF9zaG93X3NvY2lhbF90ciI6Im9uIiwicG9sbF9zaG93X3NvY2lhbF92ayI6Im9mZiIsImxvYWRfZWZmZWN0IjoibG9hZF9naWYiLCJsb2FkX2dpZiI6InBsZ19kZWZhdWx0IiwibGltaXRfdXNlcnMiOjAsImxpbWl0X3VzZXJzX21ldGhvZCI6ImlwIiwibGltaXRhdGlvbl9tZXNzYWdlIjoiPHAgc3R5bGU9XFxcInRleHQtYWxpZ246IGNlbnRlcjtcXFwiPlZvdXMgYXZleiBkXHUwMGU5alx1MDBlMCB2b3RcdTAwZTk8XC9wPlxuIiwicmVkaXJlY3RfdXJsIjpmYWxzZSwidXNlcl9yb2xlIjpbXSwiZW5hYmxlX3Jlc3RyaWN0aW9uX3Bhc3MiOjAsInJlc3RyaWN0aW9uX3Bhc3NfbWVzc2FnZSI6IjxwIHN0eWxlPVxcXCJ0ZXh0LWFsaWduOiBjZW50ZXI7XFxcIj5Wb3VzIG5cdTIwMTlhdmV6IHBhcyBsZXMgZHJvaXRzIHBvdXIgcGFydGljaXBlciBhdSBzb25kYWdlPFwvcD5cbiIsImVuYWJsZV9sb2dnZWRfdXNlcnMiOjAsImVuYWJsZV9sb2dnZWRfdXNlcnNfbWVzc2FnZSI6IjxwIHN0eWxlPVxcXCJ0ZXh0LWFsaWduOiBjZW50ZXI7XFxcIj5Wb3VzIGRldmV6IHZvdXMgY29ubmVjdGVyIHBvdXIgcGFydGljaXBlciBhdSBzb25kYWdlPFwvcD5cbiIsIm5vdGlmeV9lbWFpbF9vbiI6MCwibm90aWZ5X2VtYWlsIjoiYWlsbGUuYW1AZnJlZS5mciIsInJlc3VsdF9zb3J0X3R5cGUiOiJub25lIiwiY3JlYXRlX2RhdGUiOiIyMDI1LTEyLTA0IDA4OjU2OjMwIiwiYXV0aG9yIjp7ImlkIjoiMSIsIm5hbWUiOiJTdDlwaCJ9LCJwb2xsX21haW5fdXJsIjoiIiwicmVkaXJlY3RfYWZ0ZXJfdm90ZV9kZWxheSI6MCwicHVibGlzaGVkIjoxLCJlbmFibGVfcmVzdGFydF9idXR0b24iOjAsInNob3dfdm90ZXNfY291bnQiOjEsInNob3dfcmVzX3BlcmNlbnQiOjEsInNob3dfbG9naW5fZm9ybSI6Im9mZiIsImluZm9fZm9ybSI6MCwiZmllbGRzIjoiYXBtX25hbWUsYXBtX2VtYWlsLGFwbV9waG9uZSIsImFuc3dlcnNfZ3JpZF9jb2x1bW5fbW9iaWxlIjoib24iLCJyZXF1aXJlZF9maWVsZHMiOiJhcG1fZW1haWwiLCJpbmZvX2Zvcm1fdGl0bGUiOiI8aDU+VmV1aWxsZXogcmVtcGxpciBsZSBmb3JtdWxhaXJlXHUwMGEwOjxcL2g1PlxuIiwiZW5hYmxlX21haWxjaGltcCI6Im9mZiIsInJlZGlyZWN0X2FmdGVyX3N1Ym1pdCI6MCwibWFpbGNoaW1wX2xpc3QiOiIiLCJ1c2Vyc19yb2xlIjoiW10iLCJwb2xsX2JnX2ltYWdlX3Bvc2l0aW9uIjoiY2VudGVyIGNlbnRlciIsInBvbGxfYmdfaW1nX2luX2ZpbmlzaF9wYWdlIjoib2ZmIiwiYXlzX2FkZF9wb3N0X2Zvcl9wb2xsIjoib2ZmIiwicmVzdWx0X2luX3JnYmEiOiJvZmYiLCJzaG93X3Bhc3NlZF91c2VycyI6Im9mZiIsInNlZV9yZXN1bHRfYnV0dG9uIjoib24iLCJzZWVfcmVzdWx0X3JhZGlvIjoiYXlzX3NlZV9yZXN1bHRfYnV0dG9uIiwibG9hZGVyX2ZvbnRfc2l6ZSI6IjY0IiwiZWZmZWN0X21lc3NhZ2UiOiIiLCJwb2xsX2FsbG93X2NvbGxlY3RpbmdfdXNlcnNfZGF0YSI6Im9mZiIsInBvbGxfZXZlcnlfYW5zd2VyX3JlZGlyZWN0X2RlbGF5IjoiIiwicG9sbF9lbmFibGVfYW5zd2VyX2ltYWdlX2FmdGVyX3ZvdGluZyI6Im9mZiIsInBvbGxfZW5hYmxlX2Fuc3dlcl9yZWRpcmVjdF9kZWxheSI6Im9mZiIsInBvbGxfc2hvd19wYXNzZWRfdXNlcnNfY291bnQiOjMsInBvbGxfYWxsb3dfYW5zd2VyIjoib2ZmIiwicG9sbF9hbGxvd19hbnN3ZXJfcmVxdWlyZSI6Im9mZiIsInBvbGxfYW5zd2VyX2ltYWdlX2hlaWdodCI6IjE1MCIsInBvbGxfYW5zd2VyX2ltYWdlX2hlaWdodF9mb3JfbW9iaWxlIjoiMTUwIiwicG9sbF9hbnN3ZXJfaW1hZ2VfYm9yZGVyX3JhZGl1cyI6IjAiLCJwb2xsX3RpdGxlX2FsaWdubWVudCI6ImNlbnRlciIsInBvbGxfdGl0bGVfYWxpZ25tZW50X21vYmlsZSI6ImNlbnRlciIsInBvbGxfdGV4dF90eXBlX2xlbmd0aF9lbmFibGUiOiJvZmYiLCJwb2xsX3RleHRfdHlwZV9saW1pdF90eXBlIjoiY2hhcmFjdGVycyIsInBvbGxfdGV4dF90eXBlX2xpbWl0X2xlbmd0aCI6IiIsInBvbGxfdGV4dF90eXBlX2xpbWl0X21lc3NhZ2UiOiJvZmYiLCJwb2xsX3RleHRfdHlwZV9wbGFjZWhvbGRlciI6IllvdXIgYW5zd2VyIiwicG9sbF90ZXh0X3R5cGVfd2lkdGgiOiIiLCJwb2xsX3RleHRfdHlwZV93aWR0aF90eXBlIjoicGVyY2VudCIsInBvbGxfZW5hYmxlX3Bhc3N3b3JkIjoib2ZmIiwicG9sbF9wYXNzd29yZCI6IiIsInBvbGxfZW5hYmxlX3Bhc3N3b3JkX3Zpc2liaWxpdHkiOiJvZmYiLCJwb2xsX3Bhc3N3b3JkX21lc3NhZ2UiOiJQbGVhc2UgZW50ZXIgcGFzc3dvcmQiLCJkaXNwbGF5X2ZpZWxkc19sYWJlbHMiOiJvZmYiLCJhdXRvZmlsbF91c2VyX2RhdGEiOiJvZmYiLCJwb2xsX2NyZWF0ZV9hdXRob3IiOjEsInBvbGxfbG9nb191cmxfbmV3X3RhYiI6Im9mZiIsImVuYWJsZV9zb2NpYWxfbGlua3MiOiJvZmYiLCJwb2xsX3NvY2lhbF9saW5rc19oZWFkaW5nIjoiIiwic29jaWFsX2xpbmtzIjp7ImxpbmtlZGluX2xpbmsiOiIiLCJmYWNlYm9va19saW5rIjoiIiwidHdpdHRlcl9saW5rIjoiIiwidmtvbnRha3RlX2xpbmsiOiIiLCJ5b3V0dWJlX2xpbmsiOiIifSwic2hvd19jaGFydF90eXBlIjoiZ29vZ2xlX2Jhcl9jaGFydCIsInNob3dfY2hhcnRfdHlwZV9nb29nbGVfaGVpZ2h0Ijo0MDAsInBvbGxfZW5hYmxlX2FuaW1hdGlvbl90b3AiOiJvbiJ9';			</script></div></form></div>


<ul class="wp-block-list">
<li><strong>Vous pouvez voter</strong> pour alimenter le compteur si vous voulez. Cela vous permettra de c<strong>onsulter l&#8217;état des suffrages</strong>.</li>
</ul>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="606" height="581" src="https://st9ph.fr/wp-content/uploads/2025/12/image-166.png" alt="" class="wp-image-34744" style="aspect-ratio:1.043077245571743;width:416px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-166.png 606w, https://st9ph.fr/wp-content/uploads/2025/12/image-166-300x288.png 300w" sizes="auto, (max-width: 606px) 100vw, 606px" /></figure>
</div>


<p class="has-base-2-background-color has-background">💡 Ca peut être un moyen idéal pour <strong>orienter vos travaux en fonction de leurs souhaits</strong> et de <strong>satisfaire au mieux leurs attentes.</strong></p>



<p>👉🏻 L&#8217;objectif est de <strong>demander l&#8217;avis de vos lecteurs</strong> (donner leurs un contrôle commentaire pour permettre le débat).</p>



<h4 class="wp-block-heading">🟦 Le commentaire</h4>



<p>➡️La liste est longue des contrôles interactifs que vous pouvez proposer mais, pour terminer, le moins incontournable reste, bien évidemment, celui <strong>de laisser des commentaires.</strong> A condition :</p>



<ul class="wp-block-list">
<li>de <strong>les lire régulièrement</strong></li>



<li>d&#8217;y <strong>répondre rapidement </strong>si besoin</li>



<li><strong>d&#8217;en tenir compte s</strong>&#8216;ils sont récurrents et concernent ce que vos lecteurs attendent de votre blog</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="840" height="414" src="https://st9ph.fr/wp-content/uploads/2025/12/image-23.png" alt="" class="wp-image-30988" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-23.png 840w, https://st9ph.fr/wp-content/uploads/2025/12/image-23-300x148.png 300w, https://st9ph.fr/wp-content/uploads/2025/12/image-23-768x379.png 768w" sizes="auto, (max-width: 840px) 100vw, 840px" /></figure>



<h3 class="wp-block-heading">4-4 |<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"> Eveiller est mieux qu&#8217;affirmer</mark></h3>



<h4 class="wp-block-heading">🟦 Infographier plutôt que dire</h4>



<p>➡️ Ci-dessous <strong>le contrôle Counter </strong>de Spectra :</p>



<div class="wp-block-uagb-counter uagb-block-2d263a1f wp-block-uagb-counter--circle"><div class="wp-block-uagb-counter-circle-container"><div class="wp-block-uagb-counter-circle-container__content"><span class="wp-block-uagb-counter__icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M503.2 393.8L280.1 44.25c-10.42-16.33-37.73-16.33-48.15 0L8.807 393.8c-11.11 17.41-11.75 39.42-1.666 57.45C17.07 468.1 35.92 480 56.31 480h399.4c20.39 0 39.24-11.03 49.18-28.77C514.9 433.2 514.3 411.2 503.2 393.8zM256 111.8L327.8 224H256L208 288L177.2 235.3L256 111.8z"></path></svg></span><div class="wp-block-uagb-counter__number"><span class="uagb-counter-block-number" data-duration="1.5" data-to-value="110" data-from-value="0" data-delimiter=","></span><span class="uagb-counter-block-suffix"> m</span></div><div class="wp-block-uagb-counter__title">dénivelé</div></div><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 230 230" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="uagb-counter-circle__background"></circle><circle class="uagb-counter-circle__progress"></circle></svg></div></div>



<p>👉🏻 Ce contrôle <strong>hyper personnalisable</strong> est excellent pour <strong>afficher des éléments d&#8217;infographie</strong>, qui, en peu de mots, donne les informations clés. Le fait de <strong>pouvoir l&#8217;animer</strong> va, en plus, <strong>porter l&#8217;attention sur lui.</strong> C&#8217;est un contrôle idéal pou r<strong>mettre en avant vos KPI</strong>.</p>



<h4 class="wp-block-heading">🟦 Elargissez votre point de vue avec des apports extérieurs</h4>



<p>👉🏻 <strong>Citez des personnalités Adhoc</strong>, <strong>interviewez des influenceurs</strong>, <strong>donnez des liens externes</strong> pour prolonger la découverte de votre sujet. <strong>Ne restez pas enfermé sur votre seule réflexion !</strong></p>



<ul class="wp-block-list">
<li><strong>Le bloc &#8220;Citations&#8221;</strong> permettra d&#8217;introduire ou d&#8217;illustrer votre propos :</li>
</ul>



<blockquote class="wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow">
<p>&#8220;<strong>Oui, les circuits contiennent de plus en plus de passages techniques,</strong> [&#8230;]. J<strong>e pense que c’est pour rendre la discipline plus spectaculaire. J’aime beaucoup les circuits techniques où il y’a de la pente. Les circuits de Coupe du Monde</strong> [ndla : de VTT] <strong>sont tellement beaux, il y en a pour tous les goûts.</strong>&#8220;</p>
<cite>Interview d&#8217;<strong>Antoine Philipp </strong>sur le blog <strong>velo101 </strong>du 19 mars 2019 &#8211; <a href="https://www.velo101.com/actualite/vtt/interview-dantoine-philipp/">voir </a><a href="https://www.velo101.com/actualite/vtt/interview-dantoine-philipp/" target="_blank" rel="noreferrer noopener">l&#8217;article </a><a href="https://www.velo101.com/actualite/vtt/interview-dantoine-philipp/">complet</a> &#8211;</cite></blockquote>



<p class="has-base-2-background-color has-background">Pensez à <strong>mettre entre guillemets vos citations </strong>pour signalez que vous citez quelqu&#8217;un d&#8217;autre. <strong>Nommez le</strong>. <strong>Datez le propos</strong> et <strong>maillez vers la source </strong>si c&#8217;est possible. <strong>[&#8230;]</strong> Indique que vous avez <strong>coupé un morceau de la citation</strong> (c&#8217;est obligatoire de le signaler). Vous pouvez également <strong>apportez une précision</strong> sous la forme<strong> [ndla : &#8230;] </strong>pour <strong>Note de l&#8217;Auteur</strong>. Ex : [ndla : &#8220;Lui&#8221; comprendre &#8220;mon sponsor&#8221;]</p>



<ul class="wp-block-list">
<li><strong>les Flux RSS</strong> permettent d&#8217;ouvrir à l&#8217;actualité récente sur votre thème d&#8217;écriture</li>
</ul>


<ul class="has-dates has-excerpts wp-block-rss has-background has-base-2-background-color"><li class='wp-block-rss__item'><div class='wp-block-rss__item-title'><a href='https://www.20min.ch/fr/story/tour-de-france-emotion-garantie-la-belle-annonce-de-seixas-a-ses-grands-parents-103558145' target="_blank">Émotion garantie: la belle annonce de Seixas à ses grands-parents</a></div><time datetime="2026-05-05T15:20:03+02:00" class="wp-block-rss__item-publish-date">5 mai 2026</time> <div class="wp-block-rss__item-excerpt">Le prodige français du cyclisme sera au départ de la Grande Boucle en juillet. Il a fait cette révélation à sa famille devant les caméras, pour un moment touchant.</div></li><li class='wp-block-rss__item'><div class='wp-block-rss__item-title'><a href='https://www.20min.ch/fr/story/cyclisme-fracture-de-l-epaule-droite-pour-noemi-rueegg-103557717' target="_blank">Fracture de l’épaule droite pour Noemi Rüegg</a></div><time datetime="2026-05-04T18:21:11+02:00" class="wp-block-rss__item-publish-date">4 mai 2026</time> <div class="wp-block-rss__item-excerpt">La Suissesse est tombée, lundi, dans le final de la 2e étape du Tour d&#039;Espagne féminin. Elle n&#039;a pas pu repartir et devra se faire opérer.</div></li><li class='wp-block-rss__item'><div class='wp-block-rss__item-title'><a href='https://www.20min.ch/fr/story/tour-de-romandie-richard-chassot-il-me-manque-une-etape-et-de-l-argent-103557504' target="_blank">Richard Chassot: «Il me manque une étape et de l’argent»</a></div><time datetime="2026-05-04T12:08:13+02:00" class="wp-block-rss__item-publish-date">4 mai 2026</time> <div class="wp-block-rss__item-excerpt">Le directeur fribourgeois tire la sonnette d’alarme à quatre mois du départ de la manifestation sportive féminine.</div></li></ul>


<p class="has-text-align-center">Voir aussi <a href="https://st9ph.fr/flux-rss-lagregateur-de-votre-actualite/" target="_blank" rel="noreferrer noopener">l&#8217;article complet sur les flux RSS</a></p>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-af5482bdfe957fbd0d38b6e173785aea">🧑🏻‍🎓 | Conclusion, vers l&#8217;épreuve E5B</h2>



<p>Ce <strong>tour d&#8217;horizon d&#8217;outils et de méthode</strong>s non exhaustifs, vous aura, je l&#8217;espère, donné <strong>des idées et des directions</strong> pour la conception de vos articles.</p>



<p class="has-base-2-background-color has-background">👉🏻 Votre blog doit rester aussi un prolongement de <strong>votre style et de votre personnalité.</strong> C&#8217;est ce qui le rendra <strong>différent des autres</strong>, comme vous l&#8217;êtes vous-même.</p>



<p>🖥️ <strong>Durant l&#8217;épreuve technique</strong>, vous ne pourrez bien sur pas installer de plug-in et <strong>le choix d&#8217;outils se limitera à ceux de Spectra</strong> et du modèle Gutenberg générique. Les autres outils et méthodes de cette article sont pour votre conception personnelle. N&#8217;oubliez pas :</p>



<ul class="wp-block-list">
<li>l<strong>es annexes de votre sujet </strong>qui sont données <strong>pour alimenter votre production</strong></li>



<li><strong>les blocs déjà intégrés </strong>dans les articles ou pages qu&#8217;on vous demande d&#8217;améliorer <strong>sont souvent à transformer </strong>(citations, FAQ, listes, données de tableaux &#8230; fournies sous formes de paragraphes simples)</li>



<li><strong>La médiathèqu</strong>e contient certainement <strong>des ressources en rapport avec votre sujet</strong>. Ca vaut le coup d&#8217;y jeter un œil pour <strong>voir ce que vous pouvez utiliser dedans</strong>.</li>
</ul>



<!-- =====================================================
     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">

<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-un-article-en-partant-de-zero%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>



<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">🛠️ création de sites</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-uagb-post-grid uagb-post-grid  uagb-post__image-position-top uagb-post__image-enabled uagb-block-aa09d1a0     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-depoussierons-la-methode-dabonnement/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="253" src="https://st9ph.fr/wp-content/uploads/2026/02/EnAVANT-UM-1024x288.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/02/EnAVANT-UM-1024x288.png 1024w, https://st9ph.fr/wp-content/uploads/2026/02/EnAVANT-UM-300x84.png 300w, https://st9ph.fr/wp-content/uploads/2026/02/EnAVANT-UM-768x216.png 768w, https://st9ph.fr/wp-content/uploads/2026/02/EnAVANT-UM-1536x432.png 1536w, https://st9ph.fr/wp-content/uploads/2026/02/EnAVANT-UM.png 1967w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/wordpress-depoussierons-la-methode-dabonnement/" target="_self" rel="bookmark noopener noreferrer">WordPress | Dépoussiérons la méthode d&#8217;abonnement</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-02-12T17:06:03+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					12 février 2026				</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>🚣🏻 C&#8217;est une telle galère de s&#8217;abonner simplement sur un site WordPress par défaut que&#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-depoussierons-la-methode-dabonnement/" 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-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-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>
			<p>L’article <a href="https://st9ph.fr/wordpress-un-article-en-partant-de-zero/">WordPress | un article en partant de zéro ?</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://st9ph.fr/wordpress-un-article-en-partant-de-zero/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://st9ph.fr/wp-content/uploads/2025/12/voicertool_audio_Denise_03-12-2025_at_09_47_46_on_December_3rd_2025.mp3" length="223200" type="audio/mpeg" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2025/12/VTT.mp4" length="4001048" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2023/09/tidio.mp4" length="1625543" type="video/mp4" />

		<post-id xmlns="com-wordpress:feed-additions:1">30926</post-id>	</item>
		<item>
		<title>WordPress &#124; Méthode HABI et Yoast SEO synchronisés</title>
		<link>https://st9ph.fr/wordpress-methode-habi-et-yoast-seo-synchronises/</link>
					<comments>https://st9ph.fr/wordpress-methode-habi-et-yoast-seo-synchronises/#respond</comments>
		
		<dc:creator><![CDATA[St9ph]]></dc:creator>
		<pubDate>Thu, 20 Nov 2025 19:10:40 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[🛠️ création de sites]]></category>
		<category><![CDATA[🌐 public]]></category>
		<category><![CDATA[concevoir un article wordpress]]></category>
		<category><![CDATA[hierarchie dans yoast]]></category>
		<category><![CDATA[techniques SEO Wordpress]]></category>
		<guid isPermaLink="false">https://st9ph.fr/?p=30896</guid>

					<description><![CDATA[<p>WordPress &#124; Méthode HABI &#38; Yoast Durant l&#8217;épreuve E5B, vous serez amenez à concevoir ou mettre en forme un article ou une page puis à le référencer en utilisant Yoast SEO. Ces deux parties représentent les 2 tiers de l&#8217;examen soit approximativement 26 minutes de votre épreuve. Voyons comment organiser ces deux taches de manière ... <a title="WordPress &#124; Méthode HABI et Yoast SEO synchronisés" class="read-more" href="https://st9ph.fr/wordpress-methode-habi-et-yoast-seo-synchronises/" aria-label="En savoir plus sur WordPress &#124; Méthode HABI et Yoast SEO synchronisés">Lire la suite</a></p>
<p>L’article <a href="https://st9ph.fr/wordpress-methode-habi-et-yoast-seo-synchronises/">WordPress | Méthode HABI et Yoast SEO synchronisés</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 loading="lazy" 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> | Méthode HABI &amp; <img loading="lazy" decoding="async" width="48" height="44" class="wp-image-34551" style="width: 48px;" src="https://st9ph.fr/wp-content/uploads/2021/04/ico-yoast.jpg" alt="">Yoast </p>



<p>Durant l&#8217;épreuve E5B, vous serez amenez à concevoir ou mettre en forme un article ou une page puis à le référencer en utilisant Yoast SEO. <strong>Ces deux parties représentent les 2 tiers de l&#8217;examen </strong>soit approximativement <strong>26 minutes</strong> de votre épreuve.</p>



<p>Voyons comment organiser ces deux taches <strong>de manière synchronisée</strong>.</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:33.33%"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" 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>
</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-6a6cc1de-b6e0-432b-b1ad-f5b5dd7c4fa0">
			<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-6a6cc1de-b6e0-432b-b1ad-f5b5dd7c4fa0-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-6a6cc1de-b6e0-432b-b1ad-f5b5dd7c4fa0-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-6a6cc1de-b6e0-432b-b1ad-f5b5dd7c4fa0-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-6a6cc1de-b6e0-432b-b1ad-f5b5dd7c4fa0-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-6a6cc1de-b6e0-432b-b1ad-f5b5dd7c4fa0-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-6a6cc1de-b6e0-432b-b1ad-f5b5dd7c4fa0-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-6a6cc1de-b6e0-432b-b1ad-f5b5dd7c4fa0-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-6a6cc1de-b6e0-432b-b1ad-f5b5dd7c4fa0-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-6a6cc1de-b6e0-432b-b1ad-f5b5dd7c4fa0-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-6a6cc1de-b6e0-432b-b1ad-f5b5dd7c4fa0-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-6a262872-8e3f-47a6-a159-52a1948f8402">
			<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-6a262872-8e3f-47a6-a159-52a1948f8402-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-6a262872-8e3f-47a6-a159-52a1948f8402-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-6a262872-8e3f-47a6-a159-52a1948f8402-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-6a262872-8e3f-47a6-a159-52a1948f8402-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-6a262872-8e3f-47a6-a159-52a1948f8402-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-6a262872-8e3f-47a6-a159-52a1948f8402-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-6a262872-8e3f-47a6-a159-52a1948f8402-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-6a262872-8e3f-47a6-a159-52a1948f8402-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-6a262872-8e3f-47a6-a159-52a1948f8402-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-6a262872-8e3f-47a6-a159-52a1948f8402-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-a4172840-cb84-4d07-a99c-9f03334eca92">
			<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-a4172840-cb84-4d07-a99c-9f03334eca92-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-a4172840-cb84-4d07-a99c-9f03334eca92-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-a4172840-cb84-4d07-a99c-9f03334eca92-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-a4172840-cb84-4d07-a99c-9f03334eca92-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-a4172840-cb84-4d07-a99c-9f03334eca92-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-a4172840-cb84-4d07-a99c-9f03334eca92-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-a4172840-cb84-4d07-a99c-9f03334eca92-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-a4172840-cb84-4d07-a99c-9f03334eca92-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-a4172840-cb84-4d07-a99c-9f03334eca92-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-a4172840-cb84-4d07-a99c-9f03334eca92-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">8–12 minutes</div>


<p>|</p>


<div class="wp-block-post-time-to-read">1 903 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-02-23T17:21:28+01:00">23 février  2026</time></div></div>


				<div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-60d48787      "
					data-scroll= "1"
					data-offset= "30"
					style=""
				>
				<div class="uagb-toc__wrap">
						<div class="uagb-toc__title">
							plan de l&#8217;article						</div>
																						<div class="uagb-toc__list-wrap ">
						<ol class="uagb-toc__list"><li class="uagb-toc__list"><a href="#la-méthode-habi" class="uagb-toc-link__trigger">La Méthode HABI</a><li class="uagb-toc__list"><a href="#hiérarchie-des-titres" class="uagb-toc-link__trigger">Hiérarchie des titres</a><li class="uagb-toc__list"><a href="#alternance-des-blocs" class="uagb-toc-link__trigger">Alternance des blocs</a><li class="uagb-toc__list"><a href="#balisez-vos-images" class="uagb-toc-link__trigger">Balisez vos images</a><li class="uagb-toc__list"><a href="#impasse-évitée" class="uagb-toc-link__trigger">Impasse évitée</a></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">*</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 Méthode HABI
    </h2>
    <p class="chapter-subtitle">&#8230; et Yoast synchronisé !</p>
  </div>
</div>



<p>Le grille d&#8217;évaluation de la conception de votre article comporte 4 points de vigilance clés qui sont :</p>



<ul class="wp-block-list">
<li>H pour la <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Hiérarchie des titres</mark>.</strong> Vos titres doivent respecter une structure comportant au moins deux sous-parties <strong>précédées par une introduction</strong></li>



<li>A pour l&#8217;<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Alternance des Blocs</mark></strong>. Votre contenu doit être varié (si possible interactif) et ne pas comporter plus de 3 paragraphes consécutifs.</li>



<li>B pour le <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Balisage ALT</mark> </strong>(<strong>Vos images doivent être référencées</strong> elles aussi)</li>



<li>I pour <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Impasse à éviter</mark>.</strong> Votre contenu doit se terminer par <strong>un rebond interne</strong> pour éviter de perdre vos visiteurs en fin de lecture.</li>
</ul>



<p class="callout bleu">ℹ️ Vous ne trouverez cette méthode nulle part ailleurs car <strong>je l&#8217;ai inventée</strong> ! Je me suis basé sur <strong>les piliers du référencement rapide </strong>d&#8217;un article et sur <strong>la grille d&#8217;évaluation</strong> de l&#8217;épreuve E5B. Elle permet de réaliser la conformité d&#8217;<strong>au moins 60 % du SEO</strong> demandé si vous la respectez.</p>



<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;tournoi six nations

  font-style: italic;
  color: #555;
  font-size: 0.95rem;
}
</style>

<div class="chapter-title">
  <div class="chapter-number">H</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">
      Hiérarchie des titres
    </h2>
    <p class="chapter-subtitle">Vos headers doivent permettre le crawling</p>
  </div>
</div>



<p></p>



<p></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="556" height="540" src="https://st9ph.fr/wp-content/uploads/2025/11/image-14.png" alt="" class="wp-image-30900" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-14.png 556w, https://st9ph.fr/wp-content/uploads/2025/11/image-14-300x291.png 300w" sizes="auto, (max-width: 556px) 100vw, 556px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>La structure en Header doit comporter <strong>au moins deux sous-parties</strong>.</p>



<p class="has-base-2-background-color has-background">Certains types de documents en comporteront naturellement plus. Ex : un menu -&gt; Entrée, Plat, déssert</p>



<p>Si vous Passez en niveau H3 à l&#8217;intérieur d&#8217;un H2, il vous faudra également <strong>au moins deux H3 </strong>pour respecter la structure avant de remettre un H2.</p>



<p>Les exemples ci-dessous vous indiquent des exemples de bonnes et mauvaises structures.</p>
</div>
</div>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="849" height="274" src="https://st9ph.fr/wp-content/uploads/2025/11/image-15.png" alt="Schéma d'une hiérarchie des titres optimisée pour le SEO (H1, intro, H2, H3) de l'article &quot;la méthode HABI&quot; sur le blog s9ph" class="wp-image-30901" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-15.png 849w, https://st9ph.fr/wp-content/uploads/2025/11/image-15-300x97.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/image-15-768x248.png 768w" sizes="auto, (max-width: 849px) 100vw, 849px" /></figure>


<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-3d756571-e529-4774-b7a4-16af5b97c26a">
<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 384 512&quot;&gt;&lt;path fill=&quot;%23cf2e2e&quot; d=&quot;M32 32C32 14.3 46.3 0 64 0S96 14.3 96 32V240H32V32zM224 192c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V192zm-64-64c17.7 0 32 14.3 32 32v48c0 17.7-14.3 32-32 32s-32-14.3-32-32V160c0-17.7 14.3-32 32-32zm160 96c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V224zm-96 88l0-.6c9.4 5.4 20.3 8.6 32 8.6c13.2 0 25.4-4 35.6-10.8c8.7 24.9 32.5 42.8 60.4 42.8c11.7 0 22.6-3.1 32-8.6V352c0 88.4-71.6 160-160 160H162.3c-42.4 0-83.1-16.9-113.1-46.9L37.5 453.5C13.5 429.5 0 396.9 0 363V336c0-35.3 28.7-64 64-64h88c22.1 0 40 17.9 40 40s-17.9 40-40 40H96c-8.8 0-16 7.2-16 16s7.2 16 16 16h56c39.8 0 72-32.2 72-72z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-79282539-c149-44c1-b50d-32ad2df9ff11">
			<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 384 512"><path fill="#cf2e2e" d="M32 32C32 14.3 46.3 0 64 0S96 14.3 96 32V240H32V32zM224 192c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V192zm-64-64c17.7 0 32 14.3 32 32v48c0 17.7-14.3 32-32 32s-32-14.3-32-32V160c0-17.7 14.3-32 32-32zm160 96c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V224zm-96 88l0-.6c9.4 5.4 20.3 8.6 32 8.6c13.2 0 25.4-4 35.6-10.8c8.7 24.9 32.5 42.8 60.4 42.8c11.7 0 22.6-3.1 32-8.6V352c0 88.4-71.6 160-160 160H162.3c-42.4 0-83.1-16.9-113.1-46.9L37.5 453.5C13.5 429.5 0 396.9 0 363V336c0-35.3 28.7-64 64-64h88c22.1 0 40 17.9 40 40s-17.9 40-40 40H96c-8.8 0-16 7.2-16 16s7.2 16 16 16h56c39.8 0 72-32.2 72-72z"></path></svg>
				</span>
				<span class="ub_list_item_text">La première arborescence serait correcte sans <strong>le H3 unique </strong>de la 1ère sous partie. <strong>Il en faudrait un second </strong>si on en insère un 1er.</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 384 512&quot;&gt;&lt;path fill=&quot;%23cf2e2e&quot; d=&quot;M32 32C32 14.3 46.3 0 64 0S96 14.3 96 32V240H32V32zM224 192c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V192zm-64-64c17.7 0 32 14.3 32 32v48c0 17.7-14.3 32-32 32s-32-14.3-32-32V160c0-17.7 14.3-32 32-32zm160 96c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V224zm-96 88l0-.6c9.4 5.4 20.3 8.6 32 8.6c13.2 0 25.4-4 35.6-10.8c8.7 24.9 32.5 42.8 60.4 42.8c11.7 0 22.6-3.1 32-8.6V352c0 88.4-71.6 160-160 160H162.3c-42.4 0-83.1-16.9-113.1-46.9L37.5 453.5C13.5 429.5 0 396.9 0 363V336c0-35.3 28.7-64 64-64h88c22.1 0 40 17.9 40 40s-17.9 40-40 40H96c-8.8 0-16 7.2-16 16s7.2 16 16 16h56c39.8 0 72-32.2 72-72z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-abc3c339-2df8-42bb-8cb4-76770fe8d514">
			<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 384 512"><path fill="#cf2e2e" d="M32 32C32 14.3 46.3 0 64 0S96 14.3 96 32V240H32V32zM224 192c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V192zm-64-64c17.7 0 32 14.3 32 32v48c0 17.7-14.3 32-32 32s-32-14.3-32-32V160c0-17.7 14.3-32 32-32zm160 96c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V224zm-96 88l0-.6c9.4 5.4 20.3 8.6 32 8.6c13.2 0 25.4-4 35.6-10.8c8.7 24.9 32.5 42.8 60.4 42.8c11.7 0 22.6-3.1 32-8.6V352c0 88.4-71.6 160-160 160H162.3c-42.4 0-83.1-16.9-113.1-46.9L37.5 453.5C13.5 429.5 0 396.9 0 363V336c0-35.3 28.7-64 64-64h88c22.1 0 40 17.9 40 40s-17.9 40-40 40H96c-8.8 0-16 7.2-16 16s7.2 16 16 16h56c39.8 0 72-32.2 72-72z"></path></svg>
				</span>
				<span class="ub_list_item_text">La seconde <strong>ne propose pas d&#8217;introduction</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&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;'); " id="ub-styled-list-item-39342f30-afdb-48e2-852f-cfc74a2c6acb">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">Les 3èmes et 4ème sont correctes avec<strong> une introduction et au moins deux sous parties</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&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;'); " id="ub-styled-list-item-703d9bd8-511f-4d21-95da-75da6b1725d7">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">La 5ème est correcte car elle propose u<strong>ne introduction, deux sous-parties </strong>et un troisième niveau dans sa seconde sous-partie elle-même divisée (au moins) en <strong>deux sous-parties H3</strong></span>
			</div>
			
		</li>
</ul>


<p class="has-base-2-background-color has-background">ℹ️ Lors du référencement automatique par <strong>le passage d&#8217;un Bot</strong> <strong>scrawleur</strong> sur votre site, le script recherche <strong>vos balises Header</strong> et s&#8217;attend à en trouver <strong>au moins deux à chaque niveau.</strong> Si ce n&#8217;est pas le cas, il identifie <strong><mark style="background-color:rgba(0, 0, 0, 0);color:#c82828" class="has-inline-color">une erreur qui l&#8217;empêche de recenser votre contenu</mark></strong> et il repart sans l&#8217;inscrire.  ⚠️ <strong>Vous ne serez donc jamais référencé !</strong></p>



<p></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%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="306" height="802" src="https://st9ph.fr/wp-content/uploads/2025/11/image-44.png" alt="" class="wp-image-35159" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-44.png 306w, https://st9ph.fr/wp-content/uploads/2025/11/image-44-114x300.png 114w" sizes="auto, (max-width: 306px) 100vw, 306px" /></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-uagb-blockquote uagb-block-c14bf9b4 uagb-blockquote__skin-border uagb-blockquote__stack-img-none"><blockquote class="uagb-blockquote"><div class="uagb-blockquote__content">Le principe est assez simple :<br> &#8220;<strong>Si vous commencez à découper une pomme, vous obtiendrez au moins deux morceaux !</strong>&#8220;</div><footer><div class="uagb-blockquote__author-wrap uagb-blockquote__author-at-left"><cite class="uagb-blockquote__author">🍏 Isaac Newton</cite></div></footer></blockquote></div>



<p></p>



<p class="has-accent-color has-text-color has-link-color wp-elements-919e9b0574cabb6258706a0dc910976c"><strong>Référencement synchronisé</strong> :</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;%2300d084&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-9d122ee2-8e08-475a-82a6-0d21e9855dd9">
<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;%2300d084&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;'); " id="ub-styled-list-item-4903b466-a342-45f1-a645-c84f8b264e59">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">Votre <strong>Titre H1 copié en expression clé</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&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;'); " id="ub-styled-list-item-797b710f-6dac-4092-b4e3-db3b3a484acf">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Collé dans votre introduction</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&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;'); " id="ub-styled-list-item-72361b31-8df7-4688-9aef-5c77a1a24440">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Collé dans la moitié des vos titres H2</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&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;'); " id="ub-styled-list-item-78f7859c-6df4-4a45-9ab7-19e84b716658">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">Une <strong>introduction simplifiée</strong> qui servira de base pour <strong>votre méta description</strong></span>
			</div>
			
		</li>
</ul>


<p><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Audit onglet SEO :</mark></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;%2300d084&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z&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-110746d5-9b82-4b23-b163-0590b9953b69">
<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;%2300d084&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-f9967ae9-1dc4-457c-81f0-98820a8d27c3">
			<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="#00d084" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Expression clé dans votre titre et sous titres</strong> <strong>(H2, H3</strong>) : Votre expression clé figure suffisamment dans vos titres.</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-a82e9976-7a4f-4735-bae0-a57256d48893">
			<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="#00d084" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Expression clé dans l&#8217;introduction</strong> : Votre expression clé est présente dans votre introduction</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-d1d986f2-824e-43a0-9da6-41b5d3041e2b">
			<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="#00d084" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Expression clé dans votre méta description</strong> : Bon travail !</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">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="433" height="458" src="https://st9ph.fr/wp-content/uploads/2025/11/image-38.png" alt="" class="wp-image-35116" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-38.png 433w, https://st9ph.fr/wp-content/uploads/2025/11/image-38-284x300.png 284w" sizes="auto, (max-width: 433px) 100vw, 433px" /></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-b0af0d93-bd48-4f1d-99e6-bf65fdf21e86">
<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-8f4c777f-a957-433c-ad7c-7c9e099d6e92">
			<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">Vous pouvez<strong> vérifier facilement</strong> la structure de votre site  en cliquant sur ⬛ le bouton escalier de l&#8217;éditeur</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-88c8c95b-05eb-4cfc-becd-13f5117f95a3">
			<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>Onglet Structure </strong>(voir l&#8217;aperçu ci-contre)</span>
			</div>
			
		</li>
</ul>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="334" height="164" src="https://st9ph.fr/wp-content/uploads/2025/11/image-39.png" alt="" class="wp-image-35117" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-39.png 334w, https://st9ph.fr/wp-content/uploads/2025/11/image-39-300x147.png 300w" sizes="auto, (max-width: 334px) 100vw, 334px" /></figure>



<p class="callout rouge">👆🏻 Si vous voyez le schéma ci-dessus, c&#8217;est que <strong>vous ne disposez d&#8217;aucun Header </strong>!</p>
</div>
</div>



<p class="has-text-align-center">➡️ Voir aussi les <a href="https://st9ph.fr/wordpress-un-article-en-partant-de-zero/#proposez-un-titre-accrocheur" target="_blank" rel="noreferrer noopener">techniques pour rédiger un titre accrocheur</a> dans <a href="https://st9ph.fr/wordpress-un-article-en-partant-de-zero/" target="_blank" rel="noreferrer noopener">cet autre article</a>.</p>



<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">A</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">
     Alternance des blocs
    </h2>
    <p class="chapter-subtitle">Ne lassez pas vos lecteurs avec un contenu monotone</p>
  </div>
</div>



<p>👉 L&#8217;objectif est de proposer un <strong>contenu varié</strong>, si possible interactif, <strong>qui maintienne l&#8217;attention de votre lecteur</strong>.</p>



<p></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="394" height="788" src="https://st9ph.fr/wp-content/uploads/2025/11/image-16.png" alt="" class="wp-image-30903" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-16.png 394w, https://st9ph.fr/wp-content/uploads/2025/11/image-16-150x300.png 150w" sizes="auto, (max-width: 394px) 100vw, 394px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👈 Dans la <strong>barre supérieure,</strong> à droite, vous pouvez visualiser <strong>un aperçu</strong> de votre contenu <strong>en mode smartphone</strong> (mobile).</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="604" height="263" src="https://st9ph.fr/wp-content/uploads/2025/11/image-17.png" alt="" class="wp-image-30904" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-17.png 604w, https://st9ph.fr/wp-content/uploads/2025/11/image-17-300x131.png 300w" sizes="auto, (max-width: 604px) 100vw, 604px" /></figure>



<p>L&#8217;objectif est de faire défiler votre contenu<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"> sans qu&#8217;à aucun moment, vous ne soyez en présence de <strong>paragraphes seuls</strong> </mark>(ennuyeux à la longue et qui risquent donc de provoquer un rebond). </p>



<p>ℹ️ <strong>6 visiteurs sur 10 vous liront sur un écran de moins de 7 pouces.</strong></p>



<p class="has-base-2-background-color has-background">Cela équivaut <strong><mark style="background-color:rgba(0, 0, 0, 0);color:#ae3030" class="has-inline-color">au maximum</mark> à 3 paragraphes de 4 lignes</strong> maximum. Au delà, <strong>votre alternance est insuffisante</strong>.</p>
</div>
</div>


<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 448 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&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-90adce8f-1502-4fd6-a671-045c602a80d2">
<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 448 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-b8cacf5c-863f-4a27-9ca6-9ab81f23ea95">
			<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 448 512"><path fill="#00d084" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>
				</span>
				<span class="ub_list_item_text">Alternez avec <strong>les images d&#8217;illustration fournies</strong>, les <strong>widget Vidéo </strong>ou <strong>podcast </strong>dont on vous donne le lien url (toujours <strong>en les faisant précéder d&#8217;une zone de texte</strong>  : &#8220;voici une vidéo sur le sujet &#8230;&#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 448 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-f565b732-953c-4804-aaa4-5046bb821fc2">
			<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 448 512"><path fill="#00d084" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>
				</span>
				<span class="ub_list_item_text">Ajoutez <strong>une trame fond</strong> à certains d&#8217;entre eux qui semblent être une synthèse ou un point de vigilance</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 448 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-b0e410f1-aca3-408a-8892-ef8548149702">
			<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 448 512"><path fill="#00d084" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>
				</span>
				<span class="ub_list_item_text">Transformez certains paragraphes qui seraient mieux mis en valeur <strong>en types de blocs différents </strong>(les <strong>citations</strong>, les <strong>listes</strong>, les <strong>tableaux </strong>&#8230;) comme dans l&#8217;exemple ci-dessous 👇🏻</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"><div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="220" height="164" src="https://st9ph.fr/wp-content/uploads/2025/11/CompetitionDuckRaceGIF-1.gif" alt="" class="wp-image-35121"/></figure>
</div>


<p class="has-small-font-size">Illustration &#8220;Muppet&#8217;s Show&#8221; ©BBC</p>



<p class="callout rouge">Pour faire une sauce béchamel, il vous faudra 30 g de farine 30 g de beurre, 40 cl de lait, 1 pincée de muscade, du sel et du poivre.<br></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group callout vert"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
<p>Pour faire une sauce béchamel, il vous faudra :</p>



<ul class="wp-block-list">
<li>30 g de farine</li>



<li>30 g de beurre </li>



<li>40 cl de lait</li>



<li>1 pincée de muscade</li>



<li>du sel et du poivre.</li>
</ul>
</div></div>
</div>
</div>


<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 448 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&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-0573a7bc-1401-463c-af6b-9f582a2c4672">
<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 448 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-33dba55f-4b90-48aa-844b-3ff0ed9e63c7">
			<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 448 512"><path fill="#00d084" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>
				</span>
				<span class="ub_list_item_text">Transformez en <strong>FAQ </strong><img loading="lazy" decoding="async" width="17" height="16" class="wp-image-33631" style="width: 17px" src="https://st9ph.fr/wp-content/uploads/2024/12/ico-spectra.png" alt=""> <strong><mark style="color:#621c7b" class="has-inline-color">Spectra</mark></strong> les paragraphes qui semblent être <strong>un jeu de questions / réponses</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 448 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-9d48560f-042d-477d-8c2e-0fd8dd8cfda9">
			<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 448 512"><path fill="#00d084" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>
				</span>
				<span class="ub_list_item_text">faites <strong>un compte à rebours</strong> quand vous lisez <strong>une information qui indique une échéance </strong>(ex : &#8220;Vous avez jusqu&#8217;à la fin du mois pour en profiter !&#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 448 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-baec91b3-0428-4cb7-829a-2cf15e1768c3">
			<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 448 512"><path fill="#00d084" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>
				</span>
				<span class="ub_list_item_text">Une <strong>signature de l&#8217;auteu</strong>r, v<strong>oire sa présentation dans l&#8217;introduction</strong>, même présentée sous forme de paragraphe, mérite <strong>un bloc Team </strong>de <img loading="lazy" decoding="async" width="17" height="16" class="wp-image-33631" style="width: 17px" src="https://st9ph.fr/wp-content/uploads/2024/12/ico-spectra.png" alt=""> <strong><mark style="color:#621c7b" class="has-inline-color">Spectra</mark></strong>.</span>
			</div>
			
		</li>
</ul>


<p class="has-base-2-background-color has-background">ℹ️ Pour rappel, vous êtes autorisé(e) à <strong>modifier le contenu</strong> des articles et pages qu&#8217;on vous demande de manipuler à l&#8217;examen <strong>à condition d&#8217;<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">en conserver le sens et l&#8217;intégralité du message</mark></strong>, sans l&#8217;interpréter ou le compléter par d&#8217;autres considérations personnelles.</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%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="432" height="799" src="https://st9ph.fr/wp-content/uploads/2025/11/image-45.png" alt="" class="wp-image-35162" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-45.png 432w, https://st9ph.fr/wp-content/uploads/2025/11/image-45-162x300.png 162w" sizes="auto, (max-width: 432px) 100vw, 432px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p class="has-accent-color has-text-color has-link-color wp-elements-919e9b0574cabb6258706a0dc910976c"><strong>Référencement synchronisé</strong> :</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;%2300d084&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-f0f6bc9e-60ad-43c4-b298-7e1ff9be4689">
<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;%2300d084&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;'); " id="ub-styled-list-item-6f470d6e-5375-4e4c-8e00-bf3a332f8487">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">Votre <strong>expression clé </strong>collée <strong>2 ou 3 fois</strong> dans vos paragraphes</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&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;'); " id="ub-styled-list-item-dc5c1eb2-c11a-4f2c-aba2-1970461d36d2">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">Repérez un nom de <strong>site</strong>, de <strong>marque</strong>, de <strong>personnage célèbre </strong>afin de faire <strong>un lien externe</strong>, une <strong>URL déjà présente </strong>afin de la transformer <strong>en lien hypertexte</strong></span>
			</div>
			
		</li>
</ul>


<p class="has-accent-color has-text-color has-link-color wp-elements-c4512d53c8523b0791c035b4fd055dc9"><strong>Audit Onglet SEO</strong> :</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;%2300d084&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z&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-2ef6ba4a-a775-4da7-abbe-923372f29bd0">
<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;%2300d084&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-904e1626-5217-4ee0-b315-0f7a5d832663">
			<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="#00d084" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Expression clé dans votre contenu</strong> : Votre expression clé est présente x fois dans le texte de votre article : bon travail !</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 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-e3905ff4-9fd2-482f-ba0f-da127281bdbd">
			<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="#00d084" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Liens externes</strong> : Parfait !</span>
			</div>
			
		</li>
</ul></div>
</div>



<p class="has-medium-font-size">➡️ Voyons <strong>ce dernier point </strong>en détail :</p>



<p>Dans l&#8217;exemple ci-dessous, on va créer un lien vers la page <a href="https://fr.wikipedia.org/wiki/Steve_Jobs" target="_blank" rel="noreferrer noopener">Wikipédia de Steve Job</a>,  ce qui activera le flag &#8220;<strong>liens externes</strong>&#8221; en vert</p>



<ul class="wp-block-list">
<li><strong>Selectionner le texte à cliquer </strong>(futur lien hypertexte)</li>



<li>Cliquer sur le chainon pour<strong> indiquer l&#8217;URL</strong></li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="834" height="152" src="https://st9ph.fr/wp-content/uploads/2025/11/image-20.png" alt="" class="wp-image-30910" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-20.png 834w, https://st9ph.fr/wp-content/uploads/2025/11/image-20-300x55.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/image-20-768x140.png 768w" sizes="auto, (max-width: 834px) 100vw, 834px" /></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="352" height="135" src="https://st9ph.fr/wp-content/uploads/2025/11/image-22.png" alt="biographie de Steve Jobs sur le blog WikiInfo, image montrant le premier Mac d'Apple de 1983" class="wp-image-30912" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-22.png 352w, https://st9ph.fr/wp-content/uploads/2025/11/image-22-300x115.png 300w" sizes="auto, (max-width: 352px) 100vw, 352px" /></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-29e09e1a-6deb-4a6b-beba-43c755fbc6bd">
<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-549a4c7d-b524-4511-87a0-294e0e9f69d9">
			<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> cible</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-482e6862-7166-4b08-b08a-28a7360f9fb3">
			<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>Valider</strong> <img loading="lazy" decoding="async" width="23" height="19" class="wp-image-35127" style="width: 23px" src="https://st9ph.fr/wp-content/uploads/2025/11/ico-fleche-ronde.jpg" alt=""></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-5702ceea-0985-4cbb-af35-8c543bde2f5e">
			<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>Selectionner à nouveau <mark style="color:#69a2ca" class="has-inline-color"><span style="text-decoration: underline">le lien hypertexte</span></mark></strong></span>
			</div>
			
		</li>
</ul>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="356" height="83" src="https://st9ph.fr/wp-content/uploads/2025/11/image-23.png" alt="" class="wp-image-30913" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-23.png 356w, https://st9ph.fr/wp-content/uploads/2025/11/image-23-300x70.png 300w" sizes="auto, (max-width: 356px) 100vw, 356px" /></figure>
</div>
</div>


<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-77d13a0b-57f2-4c41-a119-db03e837eaa1">
<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-a69ba965-2a0b-4d6b-ad1a-d00afd638963">
			<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">Cliquer sur <strong>modifier le lien</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-28842a22-515b-43dd-a753-23a8f45a79a7">
			<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">✅ cocher &#8220;<strong>Ouvrir dans un nouvel onglet</strong>&#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-409f4c8e-ceb1-4ced-8423-796eab0efdc5">
			<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">Enregistrer</mark></strong></span>
			</div>
			
		</li>
</ul>


<p class="callout bleu">👉 rappel, <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">un lien externe</mark> s&#8217;ouvre toujours dans un nouvel onglet</strong>, sinon la nouvelle page va remplacer la page actuelle et <strong>vous allez perdre votre lecteur</strong>. En revanche,<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"> <strong>un maillage interne</strong></mark> se fait toujours <strong>dans le même onglet</strong> (à la place de la page précédente). <strong>Vous allez énerver 😡votre lecteur</strong> s&#8217;il doit fermer un onglet à chaque page qu&#8217;il a consulté chez vous.</p>



<p>💡<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Petites astuces </mark></strong>:</p>



<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>lien vers <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">le wiki</mark> d&#8217;une célébrité / personnage<br><strong>https://fr.wikipedia.org/wiki/ </strong>+ pseudo ou prénom &amp; nom séparés par un underscore (tiret du bas)</td><td>🌐https://fr.wikipedia.org/wiki/Steve_Jobs<br>🌐https://fr.wikipedia.org/wiki/pinocchio</td></tr><tr><td>Lien vers <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">une enseigne</mark>, une marque :<br><strong>https://www.nom.com</strong> (ou <strong>.fr</strong> si c&#8217;est en France)</td><td>🌐https://www.addidas.fr<br>🌐https://greenpeace.com</td></tr></tbody></table></figure>



<p class="callout rouge">⚠️Pour rappel, <mark style="background-color:rgba(0, 0, 0, 0);color:#962828" class="has-inline-color"><strong>vous n&#8217;aurez pas le droit de vérifier votre lien</strong> </mark>🖥️ lors de l&#8217;examen. Ce qui compte, c&#8217;est qu&#8217;il soit <strong>correct au niveau de la structure </strong>et cohérent afin d&#8217;<strong>activer le flag vert</strong> pour &#8220;<strong>liens externes</strong>&#8220;.</p>



<p class="has-text-align-center">Voir aussi comment <a href="https://st9ph.fr/wordpress-un-article-en-partant-de-zero/#un-contenu-vari%C3%A9-et-interactif" target="_blank" rel="noreferrer noopener">créer un contenu varié et interactif</a></p>



<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">B</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">
     Balisez vos images
    </h2>
    <p class="chapter-subtitle">Balise ALT (appelée aussi texte alternatif)</p>
  </div>
</div>



<p>👉🏻 Le référencement de vos images ne peut se faire que si <strong>votre balise alternative</strong> (Alt) notée parfois &#8220;<em>texte de remplacement</em>&#8221; ou &#8220;<em>texte alternatif</em>&#8221; est renseignée <strong>avec des mots clés</strong>.</p>



<p class="callout bleu">♿ La balise Alt a aussi un rôle pour <strong>les internautes mal voyants</strong> qui utilisent <strong>des polices agrandies</strong> et qui configurent leur navigateur afin qu&#8217;<strong>ils n&#8217;affichent pas les images</strong> mais <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">leur texte de remplacement </mark></strong>(plus facile à scroller). </p>



<p>➡️ Vous devez donc aussi l<strong>a renseigner de manière descriptive</strong> (afin qu&#8217;elle puisse être lue par la synthèse vocale)🔈.</p>



<p>👉🏻 Une bonne balise Alt est donc idéalement : <strong>votre expression clé + le nom de votre blog + une description de l&#8217;image contenant des mots clés de vos étiquettes.</strong></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="265" height="169" src="https://st9ph.fr/wp-content/uploads/2025/11/image-25.png" alt="" class="wp-image-30922"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Dans l&#8217;exemple ci-contre, l<strong>&#8216;expression clé </strong>&#8220;Biographie de Steve Jobs&#8221; est devant <strong>la mention du blog,</strong> suivi de <strong>mots clés inclus dans une description</strong> fidèle à l&#8217;image.</p>
</div>
</div>



<p>🔹 D&#8217;autres exemples :</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="1024" height="1024" src="https://st9ph.fr/wp-content/uploads/2026/01/pack6.jpg" alt="" class="wp-image-32924" srcset="https://st9ph.fr/wp-content/uploads/2026/01/pack6.jpg 1024w, https://st9ph.fr/wp-content/uploads/2026/01/pack6-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2026/01/pack6-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2026/01/pack6-768x768.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-small-font-size">TEXTE ALTERNATIF</p>


<div style="border: 3px solid #000000; border-radius: 0%; background-color: inherit; " class="ub-styled-box ub-bordered-box wp-block-ub-styled-box" id="ub-styled-box-b5f871c9-d0c3-4725-ad7d-2d7049ae932e">
<p id="ub-styled-box-bordered-content-">Image d&#8217;un pack de bouteilles d&#8217;eau de la marque st9ph dans l&#8217;article &#8220;OP Com dans la Eshop&#8221; du blog St9ph</p>


</div></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="1024" height="1024" src="https://st9ph.fr/wp-content/uploads/2025/12/20.jpg" alt="" class="wp-image-31862" srcset="https://st9ph.fr/wp-content/uploads/2025/12/20.jpg 1024w, https://st9ph.fr/wp-content/uploads/2025/12/20-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2025/12/20-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2025/12/20-768x768.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-small-font-size">TEXTE ALTERNATIF</p>


<div style="border: 3px solid #000000; border-radius: 0%; background-color: inherit; " class="ub-styled-box ub-bordered-box wp-block-ub-styled-box" id="ub-styled-box-bc302ac0-24f1-42b4-b80c-e29f1b492f69">
<p id="ub-styled-box-bordered-content-">Image d&#8217;un personnage 3D féminin au téléphone, agacée d&#8217;attendre sur le SVI, dans l&#8217;article &#8220;La Satisfaction client&#8221; du blog Steph</p>


</div></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:25%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="331" height="638" src="https://st9ph.fr/wp-content/uploads/2025/11/image-46.png" alt="" class="wp-image-35164" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-46.png 331w, https://st9ph.fr/wp-content/uploads/2025/11/image-46-156x300.png 156w" sizes="auto, (max-width: 331px) 100vw, 331px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary>🤨 C&#8217;est quoi une &#8220;<strong>étiquette</strong>&#8221; ?</summary>
<p>La zone d&#8217;étiquette est l&#8217;endroit du <strong>bandeau paramètres</strong> &#8211; <strong>onglet article </strong>où vous allez saisir <strong>vos mots clés</strong>.</p>
</details>



<p></p>



<p class="has-accent-color has-text-color has-link-color wp-elements-919e9b0574cabb6258706a0dc910976c"><strong>Référencement synchronisé</strong> :</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;%2300d084&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-5283cd52-9651-4ef5-adf4-0e4c7477f9e5">
<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;%2300d084&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;'); " id="ub-styled-list-item-73f855a4-b137-44a5-9ae1-938abbbdf7fb">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">Votre <strong>expression clé </strong>dans toutes vos balises Alt</span>
			</div>
			
		</li>
</ul>


<p><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Audit en onglet SEO</mark> :</strong></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;%2300d084&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z&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-04f45617-69a8-49f5-a3a5-ca942b2055ca">
<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;%2300d084&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-2b62eac3-b652-49f3-a50d-d6d0f8f24459">
			<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="#00d084" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Expression clé dans les images</strong> : Bon travail !</span>
			</div>
			
		</li>
</ul></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">I</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">
      Impasse évitée
    </h2>
    <p class="chapter-subtitle">Proposez un rebond interne en toute fin d&#8217;article</p>
  </div>
</div>



<p>Un visiteur qui aura fini de lire votre article <strong>ne retournera pas forcément </strong>dans votre header pour <strong>retrouver votre menu de navigation</strong>. Il a <strong>besoin d&#8217;un CTA à la fin de votre contenu </strong>pour continuer à <strong>rebondir en interne</strong> sans quoi il va fermer l&#8217;onglet pour trouver d&#8217;autres lectures ailleurs.</p>



<p class="has-base-2-background-color has-background">La solution <strong>la plus simple et rapide</strong> est de lui proposer un lien hypertexte pour <strong>revenir à l&#8217;accueil.</strong></p>



<p>Quel que soit l&#8217;URL du site d&#8217;examen, <strong>la page d&#8217;accueil</strong> sera toujours la partie précédent le<strong> /wp-admin</strong></p>



<ul class="wp-block-list">
<li><strong>copier l&#8217;url</strong> dans la barre d&#8217;adresse <strong>jusqu&#8217;à .fr</strong></li>



<li>Insérez un bloc texte<strong> en toute fin d&#8217;article</strong></li>



<li>Saisissez &#8220;<strong>Revenir à l&#8217;accueil</strong> &#8221; puis sélectionner tout le texte</li>



<li><strong>Cliquez sur le chainon </strong>de la barre d&#8217;outils contextuelle</li>



<li>coller l&#8217;url</li>



<li><strong>Valider</strong> par la flèche</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="846" height="230" src="https://st9ph.fr/wp-content/uploads/2025/11/image-26.png" alt="" class="wp-image-31013" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-26.png 846w, https://st9ph.fr/wp-content/uploads/2025/11/image-26-300x82.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/image-26-768x209.png 768w" sizes="auto, (max-width: 846px) 100vw, 846px" /></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:25%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="342" height="636" src="https://st9ph.fr/wp-content/uploads/2025/11/image-47.png" alt="" class="wp-image-35165" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-47.png 342w, https://st9ph.fr/wp-content/uploads/2025/11/image-47-161x300.png 161w" sizes="auto, (max-width: 342px) 100vw, 342px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p class="has-accent-color has-text-color has-link-color wp-elements-919e9b0574cabb6258706a0dc910976c"><strong>Référencement synchronisé</strong> :</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;%2300d084&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-f41401ac-3d61-4247-a68b-f64addf2bf3d">
<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;%2300d084&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;'); " id="ub-styled-list-item-56042638-3b32-4d31-ab4a-e4473da68ce1">
			<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="#00d084" d="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"></path></svg>
				</span>
				<span class="ub_list_item_text">votre lien de rebond interne active automatiquement le flag vert pour &#8220;maillage interne&#8221;, vous n&#8217;avez rien à faire.</span>
			</div>
			
		</li>
</ul>


<p class="has-accent-color has-text-color has-link-color wp-elements-c4512d53c8523b0791c035b4fd055dc9"><strong>Audit Onglet SEO</strong> :</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;%2300d084&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z&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-11f44334-cadf-4090-9200-7ec69c5334f6">
<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;%2300d084&quot; d=&quot;M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-b56afe67-8eb3-404a-8c78-c77f02777a61">
			<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="#00d084" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Maillage interne</strong> : Parfait !</span>
			</div>
			
		</li>
</ul>


<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary><strong>URL, domaine, slug,</strong> pour rappel &#8230;</summary>
<p>➡️L&#8217;<strong>URL</strong> (Uniform Ressource Locator) est l&#8217;<strong>adresse complète du lien </strong>qui commence par <strong>https://</strong> (hypertexte transfert protocole securised), ➡️ <strong>le domaine</strong> est ce qui suit jusque au <strong>.fr, .org, .com</strong> ou autre (ici : st9ph.fr) Tout ce qui <strong>vient après</strong> est ➡️<strong> le slug </strong>est un <strong>suffixe variable </strong>d&#8217;une page à l&#8217;autre à l&#8217;intérieur du même site. (ici : &#8220;/wordpress-methode-habi-et-yoast-seo-synchronises/&#8221;)</p>
</details>



<p></p>



<p class="callout jaune">⚠️<strong>Attention</strong> ! D&#8217;autres méthodes comme <strong>l&#8217;ajout d&#8217;un bloc &#8220;<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">derniers articles</mark>&#8221; ou &#8220;<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Catégories</mark>&#8220;</strong> afin de proposer une navigation de pied de page <strong>ne sera pas identifié comme un maillage interne</strong> par Yoast SEO. </p>
</div>
</div>



<p>🤨 Idem, le bloc <strong>Spectra &#8220;<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Post grid</mark>&#8220;</strong> que j&#8217;intègre en bas de chacun de mes articles sur ce blog <strong>n&#8217;est pas repéré </strong>par Yoast, d&#8217;où mon conseil ✅ <strong>du lien hypertexte de retour à l&#8217;accueil</strong>.</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">
<p><strong>Alternative</strong> : le bloc &#8220;<strong>fil d&#8217;ariane de Yoast</strong>&#8221; (présent aussi en bas de cet article) qui <strong>propose nativement un retour à l&#8217;accueil </strong>tout en flaguant en vert votre <strong>maillage interne</strong>.</p>



<p>⬇️ <strong>Ca donne ça</strong>  :</p>


<div class="yoast-breadcrumbs"><span><span><a href="https://st9ph.fr/">Accueil</a></span> » <span class="breadcrumb_last" aria-current="page">🛠️ création de sites</span></span></div></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="399" height="248" src="https://st9ph.fr/wp-content/uploads/2025/11/image-35.png" alt="" class="wp-image-31551" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-35.png 399w, https://st9ph.fr/wp-content/uploads/2025/11/image-35-300x186.png 300w" sizes="auto, (max-width: 399px) 100vw, 399px" /></figure>
</div>
</div>



<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary>C&#8217;est quoi <strong>un fil d&#8217;Ariane</strong> ? Un truc qui s&#8217;est décousu de la fusée ? 🚀</summary>
<p>Pas loin ! C&#8217;est <strong>un lien guide</strong> qui permet de r<strong>evenir à n&#8217;importe quel niveau </strong>du site de n&#8217;importe où. C&#8217;est b<strong>asé sur la mythologi</strong>e, où la <strong>Déesse Ariane </strong>avait donné <strong>un pelote de laine</strong> à Thésée pour qu&#8217;il la déroule<strong> dans le Labyrinthe </strong>du Minotaure <strong>afin qu&#8217;il ne se perde pas</strong>.</p>
</details>



<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></p>



<p class="has-text-align-center">✅Un <strong>HABI </strong>respecté en pensant à effectuer en simultané les manipulations de conformité SEO attendues par Yoast <strong>vous fera gagner énormément de temps</strong>. L<strong>a très grande majorité des Flags sera déjà en vert </strong>quand vous irez contrôler leur état dans Yoast.</p>



<p class="has-medium-font-size">👉 <strong>Renseignez aussi des mots clés</strong> dans la <strong>zone étiquettes</strong> (du bandeau paramètres, onglet article). </p>



<p class="callout rouge">🧑🏻‍🎓 La plupart <strong>des étudiants l&#8217;oublient</strong> durant l&#8217;épreuve E5B pensant qu&#8217;ils ont terminé en ayant <strong>tout flagué en vert</strong> dans Yoast et <strong>cela leurs coute des points</strong>.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="291" height="327" src="https://st9ph.fr/wp-content/uploads/2025/11/image-34.png" alt="" class="wp-image-31545" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-34.png 291w, https://st9ph.fr/wp-content/uploads/2025/11/image-34-267x300.png 267w" sizes="auto, (max-width: 291px) 100vw, 291px" /></figure>
</div>
</div>



<p>Voyez aussi les articles sur <a href="https://st9ph.fr/la-requete-cible-de-wordpress/">la requête cibl</a>e (expression clé) et sur le <a href="https://st9ph.fr/yoast-seo/">tour d&#8217;horizon de Yoast</a>.</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">

<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-methode-habi-et-yoast-seo-synchronises%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>



<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">🛠️ création de sites</span></span></div></div>



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



<p></p>



<p></p>
<p>L’article <a href="https://st9ph.fr/wordpress-methode-habi-et-yoast-seo-synchronises/">WordPress | Méthode HABI et Yoast SEO synchronisés</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://st9ph.fr/wordpress-methode-habi-et-yoast-seo-synchronises/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">30896</post-id>	</item>
		<item>
		<title>Prestashop &#124; Nouveautés de la version 9</title>
		<link>https://st9ph.fr/prestashop-nouveautes-de-la-version-9/</link>
					<comments>https://st9ph.fr/prestashop-nouveautes-de-la-version-9/#respond</comments>
		
		<dc:creator><![CDATA[St9ph]]></dc:creator>
		<pubDate>Wed, 19 Nov 2025 09:45:25 +0000</pubDate>
				<category><![CDATA[PrestaShop]]></category>
		<category><![CDATA[🛠️ création de sites]]></category>
		<category><![CDATA[🌐 public]]></category>
		<guid isPermaLink="false">https://st9ph.fr/?p=30877</guid>

					<description><![CDATA[<p>Une nouvelle version du CMS pose quelques améliorations au Backoffice et un nouveau thème en option. Il s&#8217;agit surtout de simplifications et de récapitulatifs plus marqués. Cette version sera celle installée dans les centres d&#8217;examen pour l&#8217;épreuve E5B du BTS NDRC à partir de la session 2026. Part d&#8217;IA /5 dans cet article ♨️ Sources ... <a title="Prestashop &#124; Nouveautés de la version 9" class="read-more" href="https://st9ph.fr/prestashop-nouveautes-de-la-version-9/" aria-label="En savoir plus sur Prestashop &#124; Nouveautés de la version 9">Lire la suite</a></p>
<p>L’article <a href="https://st9ph.fr/prestashop-nouveautes-de-la-version-9/">Prestashop | Nouveautés de la version 9</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Une nouvelle version du CMS pose <strong>quelques améliorations au Backoffice </strong>et <strong>un nouveau thème</strong> en option. Il s&#8217;agit surtout de <strong>simplifications </strong>et de <strong>récapitulatifs </strong>plus marqués. </p>



<p class="has-base-2-background-color has-background">Cette version sera celle installée dans les centres d&#8217;examen<strong> pour l&#8217;épreuve E5B</strong> du BTS NDRC à partir de la <strong>session 2026</strong>.</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:33.33%"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" 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>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td class="has-text-align-center" data-align="center">♨️ Sources</td><td class="has-text-align-center" data-align="center">🖼️ illustrations</td><td class="has-text-align-center" data-align="center">✒️ Contenu</td></tr><tr><td class="has-text-align-center" data-align="center">&#8211;</td><td class="has-text-align-center" data-align="center">⭐⭐⭐</td><td class="has-text-align-center" data-align="center">&#8211;</td></tr></tbody></table></figure>
</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">3–5 minutes</div>


<p>|</p>


<div class="wp-block-post-time-to-read">759 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-02-23T17:21:36+01:00">23 février  2026</time></div></div>


				<div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-41378026      uagb-toc__collapse--list"
					data-scroll= "1"
					data-offset= "30"
					style=""
				>
				<div class="uagb-toc__wrap">
						<div class="uagb-toc__title">
							Plan de cet article :						</div>
												<div class="uagb-toc__loader"></div>										<div class="uagb-toc__list-wrap uagb-toc__list-hidden">
						<ol class="uagb-toc__list"><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#1-un-nouveau-thème-en-option" class="uagb-toc-link__trigger">1️⃣| Un nouveau thème en option</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#1-1-des-aperçus-de-produits-quon-peut-commander-sans-afficher-le-détail" class="uagb-toc-link__trigger">1-1 | Des aperçus de produits qu&#039;on peut commander sans afficher le détail.</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#1-2-la-liste-denvies-pour-plus-tard" class="uagb-toc-link__trigger">1- 2 | La Liste d&#039;envies pour plus tard.</a></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#2-un-backoffice-plus-logique-avec-aperçus-mais-sans-révolution" class="uagb-toc-link__trigger">2️⃣| Un backoffice plus logique, avec aperçus mais sans révolution</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#2-1-une-interface-relookée" class="uagb-toc-link__trigger">2-1 | Une interface relookée</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#2-2-des-fiches-produits-améliorées" class="uagb-toc-link__trigger">2-2 | Des fiches produits améliorées</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#2-3-un-détail-de-déclinaisons-avec-bandeau" class="uagb-toc-link__trigger">2-3 | Un détail de déclinaisons avec bandeau</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#2-4-la-possibilité-de-fixer-un-prix-remisé-libre" class="uagb-toc-link__trigger">2-4 | La possibilité de fixer un prix remisé libre</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#2-5-le-récapitulatif-de-longlet-prix" class="uagb-toc-link__trigger">2-5 | Le récapitulatif de l&#039;onglet prix</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#2-6-un-onglet-seo-complet" class="uagb-toc-link__trigger">2-6 | Un Onglet SEO complet</a></li></ul></li></ul></li><li class="uagb-toc__list "><a href="#vers-lépreuve-e5b" class="uagb-toc-link__trigger">🧑🏻‍🎓 | Vers l&#039;épreuve E5B</a></ul></ul></ol>					</div>
									</div>
				</div>
			


<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-f2d5454a6bca9060d5035bab64c28975">1️⃣| Un nouveau thème en option</h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="756" height="328" src="https://st9ph.fr/wp-content/uploads/2025/11/image-5.png" alt="" class="wp-image-30879" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-5.png 756w, https://st9ph.fr/wp-content/uploads/2025/11/image-5-300x130.png 300w" sizes="auto, (max-width: 756px) 100vw, 756px" /></figure>



<p>Hummingbird <strong>en alternative au thème Classic</strong> propose un visuel &#8220;<strong>bord à bord</strong>&#8221; et une <strong>charte modernisée</strong>.</p>



<p>👉🏻 Vous pouvez juger de ce thème s<a href="https://boutiq.st9ph.fr/" target="_blank" rel="noreferrer noopener">ur la boutique d&#8217;entrainement.</a></p>



<h3 class="wp-block-heading">1-1 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Des aperçus de produits qu&#8217;on peut commander sans afficher le détail.</mark></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">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="324" height="512" src="https://st9ph.fr/wp-content/uploads/2025/11/image-27.png" alt="" class="wp-image-31026" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-27.png 324w, https://st9ph.fr/wp-content/uploads/2025/11/image-27-190x300.png 190w" sizes="auto, (max-width: 324px) 100vw, 324px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>➡️ L&#8217;aperçu des produits a été repensé pour permettre <strong>davantage de CTA</strong> et provoquer<strong>l&#8217;achat en un clic</strong>, sans passer par l&#8217;affichage complet de la fiche produit.</p>



<ul class="wp-block-list">
<li>le choix des <strong>déclinaisons</strong>, la <strong>quantité </strong>et l&#8217;ajout au <strong>panier </strong>disponible depuis l&#8217;aperçu</li>



<li>L&#8217;ajout à<strong> la liste d&#8217;envie</strong>s désormais activée sans avoir à ajouter un module spécifique</li>



<li>la vignette d&#8217;aperçu affiche l&#8217;<strong>état du produit </strong>sans avoir à cocher l&#8217;option.</li>
</ul>



<p class="has-base-2-background-color has-background">👉🏻 L&#8217;affichage de la <strong>promo éventuelle</strong> ainsi que le <strong>prix remisé</strong> était déjà présent dans le thème Classic</p>
</div>
</div>



<h3 class="wp-block-heading">1- 2 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">La Liste d&#8217;envies pour plus tard.</mark></h3>



<p>➡️ La liste d&#8217;envies &#8220;<strong>WishList</strong>&#8221; est disponible pour le client dans <strong>son espace personnel</strong> afin qu&#8217;il puisse retrouver sa <strong>présélection </strong>(et la commander) sans avoir à reparcourir tout le catalogue.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="265" src="https://st9ph.fr/wp-content/uploads/2025/11/image-7-1024x265.png" alt="" class="wp-image-30882" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-7-1024x265.png 1024w, https://st9ph.fr/wp-content/uploads/2025/11/image-7-300x78.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/image-7-768x199.png 768w, https://st9ph.fr/wp-content/uploads/2025/11/image-7.png 1339w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p></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:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="700" height="606" src="https://st9ph.fr/wp-content/uploads/2025/11/image-32.png" alt="" class="wp-image-31040" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-32.png 700w, https://st9ph.fr/wp-content/uploads/2025/11/image-32-300x260.png 300w" sizes="auto, (max-width: 700px) 100vw, 700px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>👉🏻 Ce n&#8217;est pas simplement le client qui va e<strong>xploiter cette section</strong>.</p>



<p class="has-base-2-background-color has-background">L<strong>e commerçant lui-même</strong> pourra analyser  quels sont les produits de son catalogue qui provoquent <strong>un achat différé</strong> et <strong>adapter ses campagnes de Push</strong>, ses <strong>promotions</strong>, voire sa <strong>stratégie tarifaire</strong> si le frein n&#8217;est pas que temporel.</p>
</div>
</div>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-11651f6949891774edd78e4b22e2face">2️⃣| Un backoffice plus logique, avec aperçus mais sans révolution</h2>



<h3 class="wp-block-heading">2-1 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Une interface relookée</mark></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" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="225" height="447" src="https://st9ph.fr/wp-content/uploads/2025/11/image-9.png" alt="" class="wp-image-30887" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-9.png 225w, https://st9ph.fr/wp-content/uploads/2025/11/image-9-151x300.png 151w" sizes="auto, (max-width: 225px) 100vw, 225px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p class="has-base-2-background-color has-background">👉🏻 Dans une i<strong>nterface relookée,</strong> vous retrouverez rapidement <strong>les mêmes fonctionnalités</strong> des versions précédentes qui demeurent avec, parfois, des v<strong>ariations mineures.</strong></p>



<p>➡️ Dans les <strong>nouvelles rubriques,</strong> notons :</p>



<ul class="wp-block-list">
<li>Le &#8220;<strong>Care Center</strong>&#8221; est une interface d&#8217;assistance qui vous propose des <strong>packs et de tutoriels payants</strong> pour progresser dans Prestashop. <strong>Restez plutôt ici où tout est gratuit !</strong></li>
</ul>



<ul class="wp-block-list">
<li>&#8220;<strong>Markéting</strong>&#8221; qui vous permet à la fois de vous connecter au <strong>Google Merchant Center </strong>afin d&#8217;être présent dans <strong>Google Shopping</strong> et de vous connecter à <strong>Meta Ads </strong>afin de réaliser des campagnes promotionnelles sur <strong>Facebook et Instagram</strong></li>
</ul>
</div>
</div>



<h3 class="wp-block-heading">2-2 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Des fiches produits améliorées</mark></h3>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="906" height="183" src="https://st9ph.fr/wp-content/uploads/2025/11/image-33.png" alt="" class="wp-image-31043" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-33.png 906w, https://st9ph.fr/wp-content/uploads/2025/11/image-33-300x61.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/image-33-768x155.png 768w" sizes="auto, (max-width: 906px) 100vw, 906px" /></figure>



<p>👉🏻 Au dessus de vos onglets de manipulation, <strong>une synthèse des éléments clés</strong>, déjà présente dans la version 8, vous permet de retrouver les informations principales. Vous pouvez aussi directement consulter <strong>les ventes de ce produit </strong>dans la barre d&#8217;outils à droite des onglets.</p>



<p></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="434" height="553" src="https://st9ph.fr/wp-content/uploads/2025/11/image-11.png" alt="" class="wp-image-30891" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-11.png 434w, https://st9ph.fr/wp-content/uploads/2025/11/image-11-235x300.png 235w" sizes="auto, (max-width: 434px) 100vw, 434px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>➡️ L&#8217;onglet détail regroupe maintenant tous les champs de personnalisation du produit (qu&#8217;on trouvait avant dans Options :</p>



<ul class="wp-block-list">
<li>Les <strong>Caractéristiques </strong>(qu&#8217;on ne peut plus confondre avec les attributs des déclinaisons)</li>



<li>Les <strong>références </strong>(chaque produit doit en avoir une)</li>



<li>Les <strong>documents joints </strong>(notices, fiches détaillées, catalogue des produits dérivés, en pdf &#8230;)</li>



<li>Les inscriptions de<strong> personnalisation </strong>(flocage, gravage &#8230;)</li>
</ul>



<p class="has-base-2-background-color has-background">👉🏻 L&#8217;onglet détails est donc le <strong>moyen centralisé</strong> de n&#8217;oublier aucun des réglages spécifiques qu&#8217;on vous demandera sur le produit à créer ou à modifier durant l&#8217;examen</p>
</div>
</div>



<h3 class="wp-block-heading">2-3 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Un détail de déclinaisons avec bandeau</mark></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="344" src="https://st9ph.fr/wp-content/uploads/2025/11/image-28-1024x344.png" alt="" class="wp-image-31028" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-28-1024x344.png 1024w, https://st9ph.fr/wp-content/uploads/2025/11/image-28-300x101.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/image-28-768x258.png 768w, https://st9ph.fr/wp-content/uploads/2025/11/image-28.png 1438w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>👉🏻 <strong>Le bandeau</strong> de droite <strong>rappelle </strong>quelles sont <strong>les déclinaisons</strong> que vous avez <strong>modifiées</strong>.</p>



<p class="has-base-2-background-color has-background">C&#8217;est particulièrement utile pour <strong>n&#8217;en oublier aucune,</strong> notamment quand vous saisissez les <strong>références spécifiques</strong> ou les <strong>visuels différencié</strong>s.</p>



<h3 class="wp-block-heading">2-4 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">La possibilité de fixer un prix remisé libre</mark></h3>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="797" height="354" src="https://st9ph.fr/wp-content/uploads/2025/11/image-31.png" alt="" class="wp-image-31036" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-31.png 797w, https://st9ph.fr/wp-content/uploads/2025/11/image-31-300x133.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/image-31-768x341.png 768w" sizes="auto, (max-width: 797px) 100vw, 797px" /></figure>



<p>👉🏻 Jusqu&#8217;à présent, la remise était <strong>en Euros ou en pourcentage</strong>. Un nouvelle option &#8220;<strong>saisir un prix spécifique</strong>&#8221; vous permet de le déterminer directement (sans faire le calcul par le choix remise en euros).</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="396" src="https://st9ph.fr/wp-content/uploads/2025/11/image-30-1024x396.png" alt="" class="wp-image-31033" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-30-1024x396.png 1024w, https://st9ph.fr/wp-content/uploads/2025/11/image-30-300x116.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/image-30-768x297.png 768w, https://st9ph.fr/wp-content/uploads/2025/11/image-30.png 1105w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-base-2-background-color has-background">⚠️ Pensez à bien renseigner <strong>le prix unitaire</strong> et que c&#8217;est du <strong>hors taxes</strong> !</p>



<h3 class="wp-block-heading">2-5 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Le récapitulatif de l&#8217;onglet prix</mark></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" style="flex-basis:33.33%">
<p>L&#8217;onglet prix dispose d&#8217;un <strong>récapitulatif permanent de l&#8217;état marchand de votre produit.</strong></p>



<p class="has-base-2-background-color has-background">Impossible d&#8217;<strong>oublier le prix d&#8217;achat</strong> ou de réaliser une promotion qui <strong>va rogner tellement votre marge que vous vendrez à perte</strong>. Vous n&#8217;avez plus d&#8217;excuse pour <strong>tomber dans ce piège</strong> à l&#8217;examen</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="545" height="240" src="https://st9ph.fr/wp-content/uploads/2025/11/image-12.png" alt="" class="wp-image-30893" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-12.png 545w, https://st9ph.fr/wp-content/uploads/2025/11/image-12-300x132.png 300w" sizes="auto, (max-width: 545px) 100vw, 545px" /></figure>
</div>
</div>



<h3 class="wp-block-heading">2-6 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Un Onglet SEO complet</mark></h3>



<p>➡️ <strong>L&#8217;onglet SEO</strong> regroupe maintenant les 3 champs <strong>Titre + meta description + mots clés</strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="742" height="202" src="https://st9ph.fr/wp-content/uploads/2025/11/image-13.png" alt="" class="wp-image-30894" srcset="https://st9ph.fr/wp-content/uploads/2025/11/image-13.png 742w, https://st9ph.fr/wp-content/uploads/2025/11/image-13-300x82.png 300w" sizes="auto, (max-width: 742px) 100vw, 742px" /></figure>



<p>Vous pouvez même <strong>atteindre les Alias,</strong> en cliquant sur l&#8217;icone &#8220;gérer les mots clés&#8221;. <a href="https://st9ph.fr/prestashop-mots-cles-et-alias-de-recherche/">Voir l&#8217;article sur le sujet</a>.</p>



<p class="has-base-2-background-color has-background">L&#8217;ensemble de ses améliorations est une réelle chance de mieux contrôler les détails de ce qui vous sera demandé à l&#8217;examen sans rien oublier.</p>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-fecd992935cc593b9bd49874de359aaa">🧑🏻‍🎓 | Vers l&#8217;épreuve E5B</h2>



<p>➡️ Vous l&#8217;aurez compris, <strong>les améliorations de la version 9 </strong>vont vous <strong>faciliter la tache </strong>pour ne rien rater à l&#8217;examen. N&#8217;oubliez pas en complément à cet article de <strong>visiter les autres articles </strong>ci-dessous. Les manipulations qu&#8217;ils exposent sont <strong>toujours valables en v9</strong>.</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">

<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%2Fprestashop-nouveautes-de-la-version-9%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>



<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">🛠️ création de sites</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-uagb-post-grid uagb-post-grid  uagb-post__image-position-top uagb-post__image-enabled uagb-block-d826b3d3     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="4" style="">

												<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="732" height="259" src="https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop.jpg 732w, https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop-300x106.jpg 300w" sizes="auto, (max-width: 732px) 100vw, 732px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/" target="_self" rel="bookmark noopener noreferrer">Prestashop | OP Com dans la Eshop</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-02-17T18:27:24+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					17 février 2026				</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>PrestaShop | 💥OP Com dans la Eshop ➡️ Que ce soit pour &#8230; vider les&#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/prestashop-op-com-dans-la-eshop/" 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/prestashop-le-service-apres-vente/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="840" height="248" src="https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech.jpg 840w, https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech-300x89.jpg 300w, https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech-768x227.jpg 768w" sizes="auto, (max-width: 840px) 100vw, 840px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-le-service-apres-vente/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Le Service Après Vente</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-24T16:55:00+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					24 janvier 2026				</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'>
					SAV prestashop,, commande prestashop en backoffice, messages prédéfinis prestashop

				</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/prestashop-le-service-apres-vente/" 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/prestashop-manipuler-la-boutique/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="736" height="226" src="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958.jpg 736w, https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958-300x92.jpg 300w" sizes="auto, (max-width: 736px) 100vw, 736px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-manipuler-la-boutique/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Manipuler la boutique</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-22T14:40:35+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					22 janvier 2026				</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>PrestaShop | Manipuler la boutique 🏪 👉🏻 2nd bloc d&#8217;évaluation de l&#8217;épreuve technique, les manipulations&#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/prestashop-manipuler-la-boutique/" 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/prestashop-la-fiche-produit/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="769" height="245" src="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-144419.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-144419.jpg 769w, https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-144419-300x96.jpg 300w" sizes="auto, (max-width: 769px) 100vw, 769px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-la-fiche-produit/" target="_self" rel="bookmark noopener noreferrer">Prestashop | La Fiche Produit par l&#8217;exemple</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-16T22:44:19+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					16 janvier 2026				</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>PrestaShop | La Fiche Produit 🎧 Ecouter l&#8217;introduction audio 👉🏻 1er bloc d&#8217;évaluation de l&#8217;épreuve&#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/prestashop-la-fiche-produit/" 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/prestashop-cas-de-retours-produits/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="723" height="199" src="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925.jpg 723w, https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925-300x83.jpg 300w" sizes="auto, (max-width: 723px) 100vw, 723px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-cas-de-retours-produits/" target="_self" rel="bookmark noopener noreferrer">Prestashop | les retours produits</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-12-18T19:06:17+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					18 décembre 2025				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Un commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>restaShop | Les retours produits 🔙 ➡️ Il faut savoir que les différents scénarios devront&#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/prestashop-cas-de-retours-produits/" 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/prestashop-nouveautes-de-la-version-9/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="307" src="https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-1024x349.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-1024x349.png 1024w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-300x102.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-768x262.png 768w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9.png 1059w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-nouveautes-de-la-version-9/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Nouveautés de la version 9</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-11-19T10:45:25+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					19 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>Une nouvelle version du CMS pose quelques améliorations au Backoffice et un nouveau thème en&#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/prestashop-nouveautes-de-la-version-9/" 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/prestashop-nouveautes-de-la-version-9/">Prestashop | Nouveautés de la version 9</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://st9ph.fr/prestashop-nouveautes-de-la-version-9/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">30877</post-id>	</item>
	</channel>
</rss>
