#01 – La sémantique HTML

RAPPELS DE B1

Qu'avez vous retenu de la première année d'intégration ?

Balises de l'en-tête

Balises de l'en-tête

Les balises les plus "basiques" de tout sites web : pour indiquer le début du code html de la page, qui contient des informations sur la page (link, meta , title) , et donc qui peut varier pour contenir plusieurs informations (description, charset, keywords, auteur , etc ...)

Balises multimédias

Balises multimédias

Les principales balises pour gérer toutes la partie multimédias de votre page web . On les utilisent pour intégrer des images ( ) , des videos , des fichiers audios , ou encore des images avec une légende (

Balises de formulaire

Balises de formulaire

Lorsqu'on souhaite construire un formulaire (contact, newsletter, inscription, connexion), on utilise des balises particulières :

pour indiquer que ce qui est dedans sera lié au formulaire, qui sont les champs de saisie de base,

</span> pour une zone de texte multilignes, ou encore <span class="styleCode"></span> et  <span class="styleCode"></span> pour créer une liste déroulante.						</div>
					
								</div>
		</div>
		</div>
		</div>
						</div>
				</div>
					</div>
				</div>
				</section>
		<section class="elementor-element elementor-element-7a3623d e-con-full e-flex e-con e-child" data-id="7a3623d" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-8c8710f e-flex e-con-boxed e-con e-child" data-id="8c8710f" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div data-rocket-location-hash="f7e9ce9538b59e7af6cdbc7238fc7f66" class="e-con-inner">
				<div class="elementor-element elementor-element-5010194 elementor-flip-box--direction-right elementor-flip-box--effect-push styleCode exad-glass-effect-no elementor-widget elementor-widget-flip-box" data-id="5010194" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="flip-box.default">
				<div class="elementor-widget-container">
							<div class="elementor-flip-box" tabindex="0">
			<div class="elementor-flip-box__layer elementor-flip-box__front">
				<div class="elementor-flip-box__layer__overlay">
					<div class="elementor-flip-box__layer__inner">
													<div class="elementor-icon-wrapper elementor-view-default">
								<div class="elementor-icon">
									<i aria-hidden="true" class="material-icons md-code" data-md-icon="code"></i>								</div>
							</div>
						
													<p class="elementor-flip-box__layer__title">
								Balises de liaison							</p>
						
													<div class="elementor-flip-box__layer__description">
								<span class="styleCode"><style/> / <script> / <link></span>							</div>
											</div>
				</div>
			</div>
			<div class="elementor-flip-box__layer elementor-flip-box__back">
			<div class="elementor-flip-box__layer__overlay">
				<div class="elementor-flip-box__layer__inner">
											<p class="elementor-flip-box__layer__title">
							Balises de liaison						</p>
					
											<div class="elementor-flip-box__layer__description">
							Les balises <span class="styleCode"></span> et <span class="styleCode"></span> ont un fonctionnement similaire, il est possible d'écrire directement du code dedans (<span class="styleCode"></span> pour le  CSS / <span class="styleCode"></span> pour le Javascript) . 
<br /><br />
Le code est directement intégré à la page de structure HTML.La balise <span class="styleCode"></span> permet de créer un lien vers d'autres ressources (CSS/JS/PHP/images etc...). C'est grace a cette balise que l'on peut séparer les fichiers de codes en fichiers dédiés.						</div>
					
								</div>
		</div>
		</div>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-20850ff elementor-flip-box--direction-right elementor-flip-box--effect-push styleCode exad-glass-effect-no elementor-widget elementor-widget-flip-box" data-id="20850ff" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="flip-box.default">
				<div class="elementor-widget-container">
							<div class="elementor-flip-box" tabindex="0">
			<div class="elementor-flip-box__layer elementor-flip-box__front">
				<div class="elementor-flip-box__layer__overlay">
					<div class="elementor-flip-box__layer__inner">
													<div class="elementor-icon-wrapper elementor-view-default">
								<div class="elementor-icon">
									<i aria-hidden="true" class="material-icons md-code" data-md-icon="code"></i>								</div>
							</div>
						
													<p class="elementor-flip-box__layer__title">
								Attributs							</p>
						
													<div class="elementor-flip-box__layer__description">
								ID / Class / Elements							</div>
											</div>
				</div>
			</div>
			<div class="elementor-flip-box__layer elementor-flip-box__back">
			<div class="elementor-flip-box__layer__overlay">
				<div class="elementor-flip-box__layer__inner">
											<p class="elementor-flip-box__layer__title">
							Attributs						</p>
					
											<div class="elementor-flip-box__layer__description">
							Chaque éléments HTML d'une page peut disposer d'un ou plusieurs attributs . Certains sont quasi indispensable , d'autres dépendent de l'utilisation et de nos besoins.
<br />
<ul>
<li>Class : Permet de cibler un élément (CSS / JS) et de regrouper ces éléments </li>
<li>ID : Permet de cibler précisément un élément car un ID est unique sur une page</li>
<li>Attributs : Les attributs regroupent tout les éléments que l'on rajoute à une balise (y compris les classes et les ID). On en utilise parfois sans s'en rendre compte comme : title / alt / href ou src
</ul>						</div>
					
								</div>
		</div>
		</div>
		</div>
						</div>
				</div>
					</div>
				</div>
				</section>
		<section class="elementor-element elementor-element-8b624bf e-con-full linknostyle e-flex e-con e-child" data-id="8b624bf" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-a361a21 exad-glass-effect-no elementor-widget elementor-widget-elementskit-heading" data-id="a361a21" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="elementskit-heading.default">
				<div class="elementor-widget-container">
					<div class="ekit-wid-con" ><div class="ekit-heading elementskit-section-title-wraper text_center   ekit_heading_tablet-   ekit_heading_mobile-"><h2 class="ekit-heading--title elementskit-section-title ">Extensions utiles <span><span>VSCode</span></span></h2><div class="ekit_heading_separetor_wraper ekit_heading_elementskit-border-divider ekit-dotted"><div class="elementskit-border-divider ekit-dotted"></div></div></div></div>				</div>
				</div>
				<div class="elementor-element elementor-element-71812cb elementor-widget__width-initial exad-glass-effect-no elementor-widget elementor-widget-eael-creative-button" data-id="71812cb" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="eael-creative-button.default">
				<div class="elementor-widget-container">
					        <div class="eael-creative-button-wrapper">

<span class="cretive-button-text">Visual Studio Code</span>

<span class="eael-creative-button-icon-right"><i aria-hidden="true" class="material-icons md-downloading" data-md-icon="downloading"></i></span>                                    </div>
	                        </a>
        </div>
        				</div>
				</div>
		<div class="elementor-element elementor-element-641bd36 e-flex e-con-boxed e-con e-child" data-id="641bd36" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div data-rocket-location-hash="59cc51dd4ed28913aafa875afe178604" class="e-con-inner">
		<div class="elementor-element elementor-element-1863e81 e-con-full e-flex e-con e-child" data-id="1863e81" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-014182f e-flex e-con-boxed e-con e-child" data-id="014182f" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-413190b exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="413190b" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h2 class="elementor-heading-title elementor-size-xl">Extensions de base</h2>				</div>
				</div>
					</div>
				</div>
				<div class="elementor-element elementor-element-8110298 exad-glass-effect-no elementor-widget elementor-widget-bdt-image-stack" data-id="8110298" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="bdt-image-stack.default">
				<div class="elementor-widget-container">
							<div class="bdt-image-stack">
			
				<div class="bdt-ep-image-stack-item elementor-repeater-item-b2ba939 bdt-tippy-tooltip" data-tippy="" data-tippy-arrow="true" data-tippy-placement="top" 
					data-tippy-content="LivePreview"
				>
											<a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server" target="_blank">
							
		<img fetchpriority="high" fetchpriority="high" width="510" height="510" src="https://learn.e-kodama.fr/wp-content/uploads/2023/10/livepreview.png" class="attachment-full size-full" alt="LivePreview" decoding="async" srcset="https://learn.e-kodama.fr/wp-content/uploads/2023/10/livepreview.png 510w, https://learn.e-kodama.fr/wp-content/uploads/2023/10/livepreview-300x300.png 300w, https://learn.e-kodama.fr/wp-content/uploads/2023/10/livepreview-150x150.png 150w" sizes="(max-width: 510px) 100vw, 510px" />
								</a>
									</div>

</div>
						</div>
				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-00c2718 e-flex e-con-boxed e-con e-child" data-id="00c2718" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-1a069f3 e-con-full e-flex e-con e-child" data-id="1a069f3" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-fc3e2bc e-flex e-con-boxed e-con e-child" data-id="fc3e2bc" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-711c7b2 exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="711c7b2" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h2 class="elementor-heading-title elementor-size-xl">Extensions dev et IA</h2>				</div>
				</div>
					</div>
				</div>
				<div class="elementor-element elementor-element-a2aff65 exad-glass-effect-no elementor-widget elementor-widget-bdt-image-stack" data-id="a2aff65" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="bdt-image-stack.default">
				<div class="elementor-widget-container">
							<div class="bdt-image-stack">
			
				<div class="bdt-ep-image-stack-item elementor-repeater-item-b2ba939 bdt-tippy-tooltip" data-tippy="" data-tippy-arrow="true" data-tippy-placement="top" 
					data-tippy-content="PHPServer"
				>
											<a href="https://marketplace.visualstudio.com/items?itemName=brapifra.phpserver" target="_blank">
							
		<img loading="lazy" loading="lazy" width="1024" height="1024" src="https://learn.e-kodama.fr/wp-content/uploads/2023/10/PHPServer.png" class="attachment-full size-full" alt="PHPServer" decoding="async" srcset="https://learn.e-kodama.fr/wp-content/uploads/2023/10/PHPServer.png 1024w, https://learn.e-kodama.fr/wp-content/uploads/2023/10/PHPServer-300x300.png 300w, https://learn.e-kodama.fr/wp-content/uploads/2023/10/PHPServer-150x150.png 150w, https://learn.e-kodama.fr/wp-content/uploads/2023/10/PHPServer-768x768.png 768w" sizes="(max-width: 1024px) 100vw, 1024px" />
								</a>
									</div>

</div>
						</div>
				</div>
				</div>
					</div>
				</div>
				</section>
				</section>
		<section class="elementor-element elementor-element-667fda5 e-con-full e-flex e-con e-child" data-id="667fda5" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<header class="elementor-element elementor-element-a2efcbd e-con-full e-flex e-con e-child" data-id="a2efcbd" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-c96f1f1 eael-dual-header-content-align-center exad-glass-effect-no elementor-widget elementor-widget-eael-dual-color-header" data-id="c96f1f1" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="eael-dual-color-header.default">
				<div class="elementor-widget-container">
								<div class="eael-dual-header">
									<span class="eael-dch-svg-icon"><i aria-hidden="true" class="material-icons md-code" data-md-icon="code"></i></span>								<h2 class="title eael-dch-title"><span class="eael-dch-title-text eael-dch-title-lead lead solid-color">HTML</span> <span class="eael-dch-title-text">/ CSS</span></h2>				<span class="subtext"><p>Coder pour optimiser son site</p></span>
			</div>
						</div>
				</div>
				</header>
		<div class="elementor-element elementor-element-5c0ce04 e-flex e-con-boxed e-con e-child" data-id="5c0ce04" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-48ce7c8 exad-glass-effect-no elementor-widget elementor-widget-elementskit-heading" data-id="48ce7c8" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="elementskit-heading.default">
				<div class="elementor-widget-container">
					<div class="ekit-wid-con" ><div class="ekit-heading elementskit-section-title-wraper text_left   ekit_heading_tablet-   ekit_heading_mobile-"><h2 class="ekit-heading--title elementskit-section-title ">La <span><span>sémantique</span></span> HTML</h2><div class="ekit_heading_separetor_wraper ekit_heading_elementskit-border-divider ekit-dotted"><div class="elementskit-border-divider ekit-dotted"></div></div></div></div>				</div>
				</div>
		<div class="elementor-element elementor-element-47ba48a e-con-full e-flex e-con e-child" data-id="47ba48a" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-c06d099 exad-glass-effect-no elementor-widget elementor-widget-bdt-interactive-card" data-id="c06d099" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="bdt-interactive-card.default">
				<div class="elementor-widget-container">
					        <div class="bdt-interactive-card bdt-interactive-card-default">

<div class="bdt-width-1-1 bdt-width-1-2@s">
                    <div class="bdt-interactive-card-content">
                                            <div class="bdt-interactive-card-sub-title">
                La sémantique se réfère à la signification ou à l'interprétation d'un élément ou d'une structure.            </div>
        
                    <h3 class="bdt-interactive-card-title">
            <span >
                Introduction            </span>
            </h3>
        
                    <div class="bdt-interactive-card-text">
                <p>Dans le contexte du HTML, la sémantique concerne l'utilisation d'éléments (balises) qui transmettent clairement la signification de la section de contenu qu'ils encadrent. Au lieu de simplement décrire la présentation, les éléments sémantiques décrivent le type de contenu.</p><p><span style="text-decoration: underline"><strong>Exemple</strong> </span>: en utilisant la balise <span class="styleCode"><article></span>, on indique que le contenu encadré est un article autonome</p>            </div>
        
                                    </div>
                </div>

</div>

</div>
				</div>
				</div>
					</div>
				</div>
		<section class="elementor-element elementor-element-92fc60a e-flex e-con-boxed e-con e-child" data-id="92fc60a" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-f4ecfb3 e-con-full e-flex e-con e-child" data-id="f4ecfb3" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-17dd615 e-flex e-con-boxed e-con e-child" data-id="17dd615" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-3af4af2 eael-infobox-content-align--left eael-infobox-icon-bg-shape-circle elementor-widget__width-inherit eael-infobox-icon-hover-bg-shape-none exad-glass-effect-no elementor-widget elementor-widget-eael-info-box" data-id="3af4af2" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="eael-info-box.default">
				<div class="elementor-widget-container">
					        <div class="eael-infobox icon-on-top">
	            <div class="infobox-icon eael-icon-only">

<div class="infobox-icon-wrap">
                    <i aria-hidden="true" class="material-icons md-accessibility" data-md-icon="accessibility"></i>                </div>
            
            
        </div>
            <div class="infobox-content eael-icon-only">
                    <div class="infobox-title-section">
                <p class="title">Accessibilité</p>            </div>
            <div><p>Balises sémantiques aident les  technologies d’assistance, à interpréter correctement le contenu</p></div>        </div>
            </div>

</div>
				</div>
				<div class="elementor-element elementor-element-d37e34c eael-infobox-content-align--left eael-infobox-icon-bg-shape-circle elementor-widget__width-inherit eael-infobox-icon-hover-bg-shape-none exad-glass-effect-no elementor-widget elementor-widget-eael-info-box" data-id="d37e34c" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="eael-info-box.default">
				<div class="elementor-widget-container">
					        <div class="eael-infobox icon-on-top">
	            <div class="infobox-icon eael-icon-only">

<div class="infobox-icon-wrap">
                    <i aria-hidden="true" class="material-icons md-content_paste_search" data-md-icon="content_paste_search"></i>                </div>
            
            
        </div>
            <div class="infobox-content eael-icon-only">
                    <div class="infobox-title-section">
                <p class="title">Optimisation SEO</p>            </div>
            <div><p>Une structure sémantique claire peut améliorer le référencement d’une page car elle aide les moteurs de recherche à indexer le contenu de manière appropriée.</p></div>        </div>
            </div>

</div>
				</div>
				<div class="elementor-element elementor-element-5d9fb96 eael-infobox-content-align--left eael-infobox-icon-bg-shape-circle elementor-widget__width-inherit eael-infobox-icon-hover-bg-shape-none exad-glass-effect-no elementor-widget elementor-widget-eael-info-box" data-id="5d9fb96" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="eael-info-box.default">
				<div class="elementor-widget-container">
					        <div class="eael-infobox icon-on-top">
	            <div class="infobox-icon eael-icon-only">

<div class="infobox-icon-wrap">
                    <i aria-hidden="true" class="material-icons md-build" data-md-icon="build"></i>                </div>
            
            
        </div>
            <div class="infobox-content eael-icon-only">
                    <div class="infobox-title-section">
                <p class="title">Maintenabilité</p>            </div>
            <div><p>Un code sémantique est plus lisible et plus facile à maintenir.Les développeurs peuvent rapidement comprendre la structure d’une page</p></div>        </div>
            </div>

</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-683bda7 e-flex e-con-boxed e-con e-child" data-id="683bda7" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-f93a9e6 eael-infobox-content-align--left eael-infobox-icon-bg-shape-circle elementor-widget__width-inherit eael-infobox-icon-hover-bg-shape-none exad-glass-effect-no elementor-widget elementor-widget-eael-info-box" data-id="f93a9e6" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="eael-info-box.default">
				<div class="elementor-widget-container">
					        <div class="eael-infobox icon-on-top">
	            <div class="infobox-icon eael-icon-only">

<div class="infobox-icon-wrap">
                    <i aria-hidden="true" class="material-icons md-all_inclusive" data-md-icon="all_inclusive"></i>                </div>
            
            
        </div>
            <div class="infobox-content eael-icon-only">
                    <div class="infobox-title-section">
                <p class="title">Interopérabilité</p>            </div>
            <div><p>Meilleure interopérabilité entre différents dispositifs, navigateurs et applications.Le contenu est plus susceptible d’être affiché et interprété de manière cohérente</p></div>        </div>
            </div>

</div>
				</div>
				<div class="elementor-element elementor-element-8b0d0dd eael-infobox-content-align--left eael-infobox-icon-bg-shape-circle elementor-widget__width-inherit eael-infobox-icon-hover-bg-shape-none exad-glass-effect-no elementor-widget elementor-widget-eael-info-box" data-id="8b0d0dd" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="eael-info-box.default">
				<div class="elementor-widget-container">
					        <div class="eael-infobox icon-on-top">
	            <div class="infobox-icon eael-icon-only">

<div class="infobox-icon-wrap">
                    <i aria-hidden="true" class="material-icons md-category" data-md-icon="category"></i>                </div>
            
            
        </div>
            <div class="infobox-content eael-icon-only">
                    <div class="infobox-title-section">
                <p class="title">Expérience utilisateur</p>            </div>
            <div><p>Améliorer l’expérience utilisateur en permettant aux navigateurs et aux extensions de fournir des fonctionnalités spécifiques basées sur le type de contenu</p></div>        </div>
            </div>

</div>
				</div>
					</div>
				</div>
				</div>
					</div>
				</section>
		<section class="elementor-element elementor-element-c70f22c e-flex e-con-boxed e-con e-child" data-id="c70f22c" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-cbd3942 exad-glass-effect-no elementor-widget elementor-widget-elementskit-heading" data-id="cbd3942" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="elementskit-heading.default">
				<div class="elementor-widget-container">
					<div class="ekit-wid-con" ><div class="ekit-heading elementskit-section-title-wraper text_left   ekit_heading_tablet-   ekit_heading_mobile-"><h2 class="ekit-heading--title elementskit-section-title ">Balises de <span><span>section</span></span></h2><div class="ekit_heading_separetor_wraper ekit_heading_elementskit-border-divider ekit-dotted"><div class="elementskit-border-divider ekit-dotted"></div></div></div></div>				</div>
				</div>
		<article class="elementor-element elementor-element-8e17190 e-con-full e-flex e-con e-child" data-id="8e17190" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-ea202b5 e-con-full e-flex e-con e-child" data-id="ea202b5" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-057e36c e-flex e-con-boxed e-con e-child" data-id="057e36c" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-fdadd22 exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="fdadd22" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<span class="elementor-heading-title elementor-size-default"><header> </header></span>				</div>
				</div>
				<div class="elementor-element elementor-element-efab802 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="efab802" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Cette balise est utilisée pour définir l’en-tête ou la partie supérieure d’une section spécifique dans une page web. Chaque section d’une page peut avoir son propre en-tête, ce qui contribue à la structure sémantique de la page.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-b7fc074 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="b7fc074" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Les balises <header> et <head> sont deux éléments distincts en HTML et servent à des fins différentes dans la structure d’une page web.</p>								</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-8b3bb7a e-flex e-con-boxed e-con e-child" data-id="8b3bb7a" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-c8feb3e exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="c8feb3e" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><header>
    <img decoding="async" src="logo.png" alt="Logo de mon site">
    <h1>Titre de Mon Site Web</h1>
    <nav>
        <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">À Propos</a></li>
        </ul>
    </nav>
</header>
</xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-b27515e e-flex e-con-boxed e-con e-child" data-id="b27515e" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
					</div>
				</div>
				</article>
		<article class="elementor-element elementor-element-41590c7 e-con-full e-flex e-con e-child" data-id="41590c7" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-dd27625 e-con-full e-flex e-con e-child" data-id="dd27625" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-78bf11c e-flex e-con-boxed e-con e-child" data-id="78bf11c" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-3ddb613 exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="3ddb613" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<span class="elementor-heading-title elementor-size-default"><nav> </nav></span>				</div>
				</div>
				<div class="elementor-element elementor-element-31801ee exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="31801ee" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Cette balise est utilisée pour définir la navigation principale de la page, généralement sous forme de menus ou de liens vers différentes sections du site.</p><p> </p><p>Elle se place généralement dans le header du site. L’utilisation appropriée de balises HTML comme <span class="styleCode">< nav ></span> aide à donner une structure sémantique à votre page web, ce qui est important pour l’accessibilité et le référencement.</p>								</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-618dc8d e-flex e-con-boxed e-con e-child" data-id="618dc8d" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-93ae318 exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="93ae318" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><nav>
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">À Propos</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-a2df22a e-flex e-con-boxed e-con e-child" data-id="a2df22a" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
					</div>
				</div>
				</article>
		<article class="elementor-element elementor-element-a072ef2 e-con-full e-flex e-con e-child" data-id="a072ef2" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-00df280 e-con-full e-flex e-con e-child" data-id="00df280" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-ad97ee1 e-flex e-con-boxed e-con e-child" data-id="ad97ee1" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-fa6514a exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="fa6514a" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<span class="elementor-heading-title elementor-size-default"><main> </main></span>				</div>
				</div>
				<div class="elementor-element elementor-element-75fe124 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="75fe124" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Cette balise englobe le contenu principal de la page, c’est-à-dire le contenu central et le plus important :</p>								</div>
				</div>
				<div class="elementor-element elementor-element-e136cad bdt-content-position--left exad-glass-effect-no elementor-widget elementor-widget-bdt-fancy-list" data-id="e136cad" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="bdt-fancy-list.default">
				<div class="elementor-widget-container">
							<div class="bdt-fancy-list bdt-fancy-list-style-1">
			<ul class="bdt-list bdt-fancy-list-group" class="bdt-fancy-list-icon">
									<li>
						<div class="bdt-fancy-list-wrap">						<div class="bdt-flex flex-wrap">
																					
														<div class="bdt-fancy-list-content">
																<h4									class="bdt-fancy-list-title">
									Contenu central								</h4>
																								<p class="bdt-fancy-list-text">
									La balise <span class="styleCode"> <main> </span> est utilisée pour entourer le contenu central et principal de la page, tel que le texte principal, les images ou d'autres éléments importants qui constituent le cœur de la page.								</p>
															</div>
																				</div>
												</div>
											</li>
														<li>
						<div class="bdt-fancy-list-wrap">						<div class="bdt-flex flex-wrap">
																					
														<div class="bdt-fancy-list-content">
																<h4									class="bdt-fancy-list-title">
									Accessibilité								</h4>
																								<p class="bdt-fancy-list-text">
									L'utilisation de la balise <span class="styleCode"> <main> </span> aide à améliorer l'accessibilité, car elle permet aux technologies d'assistance et aux lecteurs d'écran de comprendre immédiatement où se trouve le contenu principal de la page.								</p>
															</div>
																				</div>
												</div>
											</li>
														<li>
						<div class="bdt-fancy-list-wrap">						<div class="bdt-flex flex-wrap">
																					
														<div class="bdt-fancy-list-content">
																<h4									class="bdt-fancy-list-title">
									Utilisation unique								</h4>
																								<p class="bdt-fancy-list-text">
									Il est recommandé de n'utiliser la balise <span class="styleCode"> <main> </span> qu'une seule fois par page. Elle doit englober le contenu qui est spécifique à la page et qui en constitue le contenu principal.								</p>
															</div>
																				</div>
												</div>
											</li>
												</ul>
		</div>
						</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-9b76b21 e-flex e-con-boxed e-con e-child" data-id="9b76b21" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-bc26c98 exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="bc26c98" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><main>
  
  <h1>Titre Principal</h1>
  <p>Ceci est le contenu principal de la page...</p>
  <img decoding="async" src="image.jpg" alt="Une image représentant le sujet principal">
</main>
</xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-6d51589 e-flex e-con-boxed e-con e-child" data-id="6d51589" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
					</div>
				</div>
				</article>
		<article class="elementor-element elementor-element-ecb7807 e-con-full e-flex e-con e-child" data-id="ecb7807" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-6220eae e-con-full e-flex e-con e-child" data-id="6220eae" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-fccb2fe e-flex e-con-boxed e-con e-child" data-id="fccb2fe" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-9c872a0 exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="9c872a0" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<span class="elementor-heading-title elementor-size-default"><aside> < /aside></span>				</div>
				</div>
				<div class="elementor-element elementor-element-d611e36 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="d611e36" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Cette balise est utilisée pour définir le contenu complémentaire ou accessoire à l’article principal. Il peut contenir des informations contextuelles, des publicités, des liens connexes, etc.</p><p> </p><p>La bonne utilisation de cette balise peut aider les moteurs de recherche à mieux comprendre le contenu de la page.</p>								</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-c096a31 e-flex e-con-boxed e-con e-child" data-id="c096a31" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-031a442 exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="031a442" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia  ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><aside>
  <h3>Articles connexes</h3>
  <ul>
    <li><a href="#">Article 1</a></li>
    <li><a href="#">Article 2</a></li>
    <li><a href="#">Article 3</a></li>
  </ul>
</aside>
</xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-db45b03 e-flex e-con-boxed e-con e-child" data-id="db45b03" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
					</div>
				</div>
				</article>
		<article class="elementor-element elementor-element-5829d70 e-con-full e-flex e-con e-child" data-id="5829d70" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-729281e e-con-full e-flex e-con e-child" data-id="729281e" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-9ffb536 e-flex e-con-boxed e-con e-child" data-id="9ffb536" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-41d8bf5 exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="41d8bf5" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<span class="elementor-heading-title elementor-size-default"><section> < /section></span>				</div>
				</div>
				<div class="elementor-element elementor-element-3df8d3c exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="3df8d3c" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Cette balise représente une section générique d’une page.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-eb8ee32 bdt-content-position--left exad-glass-effect-no elementor-widget elementor-widget-bdt-fancy-list" data-id="eb8ee32" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="bdt-fancy-list.default">
				<div class="elementor-widget-container">
							<div class="bdt-fancy-list bdt-fancy-list-style-1">
			<ul class="bdt-list bdt-fancy-list-group" class="bdt-fancy-list-icon">
									<li>
						<div class="bdt-fancy-list-wrap">						<div class="bdt-flex flex-wrap">
																					
														<div class="bdt-fancy-list-content">
																<h4									class="bdt-fancy-list-title">
									Segmentation du contenu								</h4>
																								<p class="bdt-fancy-list-text">
									La balise <span class="styleCode"><section></span> est utilisée pour définir des sections indépendantes de contenu, chacune ayant un sens ou un sujet distinct. Elle peut être utilisée pour diviser le contenu en chapitres, sujets, articles, etc.								</p>
															</div>
																				</div>
												</div>
											</li>
														<li>
						<div class="bdt-fancy-list-wrap">						<div class="bdt-flex flex-wrap">
																					
														<div class="bdt-fancy-list-content">
																<h4									class="bdt-fancy-list-title">
									Sémantique								</h4>
																								<p class="bdt-fancy-list-text">
									L'utilisation de la balise <span class="styleCode"><section></span> renforce la sémantique de la page en indiquant que le contenu englobé a une signification cohérente en lui-même.								</p>
															</div>
																				</div>
												</div>
											</li>
														<li>
						<div class="bdt-fancy-list-wrap">						<div class="bdt-flex flex-wrap">
																					
														<div class="bdt-fancy-list-content">
																<h4									class="bdt-fancy-list-title">
									En-tête de section								</h4>
																								<p class="bdt-fancy-list-text">
									Il est courant d'utiliser la balise <span class="styleCode"><header></span> à l'intérieur de <span class="styleCode"><section></span> pour ajouter un en-tête décrivant le contenu de la section.								</p>
															</div>
																				</div>
												</div>
											</li>
														<li>
						<div class="bdt-fancy-list-wrap">						<div class="bdt-flex flex-wrap">
																					
														<div class="bdt-fancy-list-content">
																<h4									class="bdt-fancy-list-title">
									Organisation								</h4>
																								<p class="bdt-fancy-list-text">
									L'utilisation de <span class="styleCode"><section></span> facilite la mise en forme du contenu en appliquant des styles CSS spécifiques à chaque section.								</p>
															</div>
																				</div>
												</div>
											</li>
												</ul>
		</div>
						</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-993e5c9 e-flex e-con-boxed e-con e-child" data-id="993e5c9" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-483f487 exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="483f487" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia  ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><section>
  <h2>Section d'introduction</h2>
  <p>Cette section contient du texte d'introduction.</p>
</section>
<section>
  <h2>Section de contenu principal</h2>
  <header>
    <h3>En-tête de la section de contenu principal</h3>
  </header>
  <p>Ceci est le contenu principal de la section.</p>
</section>
</xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-abb5c2f e-flex e-con-boxed e-con e-child" data-id="abb5c2f" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
					</div>
				</div>
				</article>
		<article class="elementor-element elementor-element-9caf28f e-con-full e-flex e-con e-child" data-id="9caf28f" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-c883d1f e-con-full e-flex e-con e-child" data-id="c883d1f" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-98a0939 e-flex e-con-boxed e-con e-child" data-id="98a0939" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-06a54ca exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="06a54ca" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<span class="elementor-heading-title elementor-size-default"><article> < /article></span>				</div>
				</div>
				<div class="elementor-element elementor-element-8196d23 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="8196d23" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>La balise <span class="styleCode"><article></span> est utilisée pour encapsuler un contenu autonome qui peut être distribué ou réutilisé indépendamment. Par exemple, un article de blog, une actualité, un commentaire, etc.</p><p> </p><p>Comme on s’en doute, cette balise permet d’indiquer un article aux moteurs de recherches et aux moteurs de lecteurs d’écran de comprendre qu’il s’agit d’un contenu à lire.</p>								</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-3f58297 e-flex e-con-boxed e-con e-child" data-id="3f58297" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-fd455e8 exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="fd455e8" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia  ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><aside>
  <h3>Articles connexes</h3>
  <ul>
    <li><a href="#">Article 1</a></li>
    <li><a href="#">Article 2</a></li>
    <li><a href="#">Article 3</a></li>
  </ul>
</aside>
</xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-f7ae026 e-flex e-con-boxed e-con e-child" data-id="f7ae026" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
					</div>
				</div>
				</article>
					</div>
				</section>
		<section class="elementor-element elementor-element-7d3dc1e e-flex e-con-boxed e-con e-child" data-id="7d3dc1e" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-8c5bdb1 exad-glass-effect-no elementor-widget elementor-widget-elementskit-heading" data-id="8c5bdb1" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="elementskit-heading.default">
				<div class="elementor-widget-container">
					<div class="ekit-wid-con" ><div class="ekit-heading elementskit-section-title-wraper text_left   ekit_heading_tablet-   ekit_heading_mobile-"><h2 class="ekit-heading--title elementskit-section-title ">Balises de <span><span>contenus</span></span></h2><div class="ekit_heading_separetor_wraper ekit_heading_elementskit-border-divider ekit-dotted"><div class="elementskit-border-divider ekit-dotted"></div></div></div></div>				</div>
				</div>
		<article class="elementor-element elementor-element-94b89cc e-con-full e-flex e-con e-child" data-id="94b89cc" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-b211c35 e-con-full e-flex e-con e-child" data-id="b211c35" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-93b87b6 e-flex e-con-boxed e-con e-child" data-id="93b87b6" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-a36eeb0 exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="a36eeb0" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h3 class="elementor-heading-title elementor-size-default"><hN></h3>				</div>
				</div>
				<div class="elementor-element elementor-element-33eaea0 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="33eaea0" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									Ces balises représentent les titres de différents niveaux. <span class="styleCode"><h1></span> est généralement utilisé pour le titre principal de la page, tandis que <span class="styleCode"><h2></span> à <span class="styleCode"><h6></span> sont utilisés pour les sous-titres.								</div>
				</div>
				<div class="elementor-element elementor-element-c36026a bdt-content-position--left exad-glass-effect-no elementor-widget elementor-widget-bdt-fancy-list" data-id="c36026a" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="bdt-fancy-list.default">
				<div class="elementor-widget-container">
							<div class="bdt-fancy-list bdt-fancy-list-style-1">
			<ul class="bdt-list bdt-fancy-list-group" class="bdt-fancy-list-icon">
									<li>
						<div class="bdt-fancy-list-wrap">						<div class="bdt-flex flex-wrap">
																					
														<div class="bdt-fancy-list-content">
																<h4									class="bdt-fancy-list-title">
									<span class="styleCode"><h1></span>								</h4>
																								<p class="bdt-fancy-list-text">
									C'est le titre principal d'une page ou d'une section. Il devrait y avoir idéalement un seul <span class="styleCode"><h1></span> par page pour des raisons de référencement (SEO) et d'accessibilité.								</p>
															</div>
																				</div>
												</div>
											</li>
														<li>
						<div class="bdt-fancy-list-wrap">						<div class="bdt-flex flex-wrap">
																					
														<div class="bdt-fancy-list-content">
																<h4									class="bdt-fancy-list-title">
									<span class="styleCode"><h2></span>								</h4>
																								<p class="bdt-fancy-list-text">
									Utilisé pour les sous-titres ou les titres de sections principales sous le <span class="styleCode"><h1></span>. 								</p>
															</div>
																				</div>
												</div>
											</li>
														<li>
						<div class="bdt-fancy-list-wrap">						<div class="bdt-flex flex-wrap">
																					
														<div class="bdt-fancy-list-content">
																<h4									class="bdt-fancy-list-title">
									<span class="styleCode"><h3></span>								</h4>
																								<p class="bdt-fancy-list-text">
									Représente les sous-sections des sections <span class="styleCode"><h3></span>								</p>
															</div>
																				</div>
												</div>
											</li>
														<li>
						<div class="bdt-fancy-list-wrap">						<div class="bdt-flex flex-wrap">
																					
														<div class="bdt-fancy-list-content">
																<h4									class="bdt-fancy-list-title">
									<span class="styleCode"><h4>, <h5>, <h6></span>								</h4>
																								<p class="bdt-fancy-list-text">
									Ces balises définissent des niveaux de sous-sections encore plus détaillés. Dans la pratique, <span class="styleCode"><h4></span> à <span class="styleCode"><h6></span> sont moins couramment utilisés que <span class="styleCode"><h1></span> à <span class="styleCode"><h3></span>, car la plupart des documents n'ont pas besoin d'une telle granularité dans la structuration.								</p>
															</div>
																				</div>
												</div>
											</li>
												</ul>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-96f588c exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="96f588c" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Il est important de noter que l’utilisation de ces balises ne devrait pas être basée sur l’apparence visuelle (par exemple, choisir une balise parce qu’elle a la taille de police souhaitée), mais plutôt sur la structure et la hiérarchie du contenu. Les styles visuels peuvent être ajustés avec CSS.</p>								</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-eb58077 e-flex e-con-boxed e-con e-child" data-id="eb58077" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-f934990 exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="f934990" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><body>
  <h1></h1>
    <h2></h2>
       <h3></h3>
            <h4></h4>
        <h3></h3>
            <h4></h4>
    <h2></h2>
        <h3></h3>
        <h3></h3>
</body></xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-7f9430d e-flex e-con-boxed e-con e-child" data-id="7f9430d" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
					</div>
				</div>
				</article>
		<article class="elementor-element elementor-element-965e442 e-con-full e-flex e-con e-child" data-id="965e442" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-68138f0 e-con-full e-flex e-con e-child" data-id="68138f0" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-11e863d e-flex e-con-boxed e-con e-child" data-id="11e863d" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-87948df exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="87948df" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h3 class="elementor-heading-title elementor-size-default"><p></h3>				</div>
				</div>
				<div class="elementor-element elementor-element-5fc2b19 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="5fc2b19" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Cette balise est utilisée pour définir un paragraphe de texte. Elle est essentielle pour organiser le contenu d’une page web en sections lisibles. Chaque fois que vous fermez une balise <span class="styleCode"><p></span>, un espace est automatiquement inséré avant le prochain élément ou le prochain paragraphe, ce qui aide à séparer visuellement les blocs de texte.</p><p> </p><p>En réalité il s’agit d’une marge appliquée automatiquement. Il est possible de la supprimer ou la modifier via la propriété CSS ‘<em><strong>margin</strong></em>‘ appliquée sur l’élément <span class="styleCode"><p></span></p>								</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-3ceb1bc e-flex e-con-boxed e-con e-child" data-id="3ceb1bc" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-9bdad7f exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="9bdad7f" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><body>
  <p>Ceci est un exemple de paragraphe. Il contient quelques phrases pour
    illustrer comment le texte est structuré.</p>
  <p>Voici un autre paragraphe. Comme vous pouvez le voir, il est séparé
  du précédent par un espace automatique.</p>
</body>
</xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-1ad9a37 e-flex e-con-boxed e-con e-child" data-id="1ad9a37" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
					</div>
				</div>
				</article>
		<article class="elementor-element elementor-element-75d3b3e e-con-full e-flex e-con e-child" data-id="75d3b3e" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-1abfa8e e-con-full e-flex e-con e-child" data-id="1abfa8e" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-f4747d3 e-flex e-con-boxed e-con e-child" data-id="f4747d3" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-ff00522 exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="ff00522" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h3 class="elementor-heading-title elementor-size-default"><ul> / <li></h3>				</div>
				</div>
				<div class="elementor-element elementor-element-fe1625e exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="fe1625e" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p><ul> est utilisée pour créer des listes non-ordonnées (à puces). Les éléments de liste sont marqués avec la balise <li>, qui représente chaque élément de la liste.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-b2aed36 exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="b2aed36" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h3 class="elementor-heading-title elementor-size-default"><ol> / <li></h3>				</div>
				</div>
				<div class="elementor-element elementor-element-1ab25ea exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="1ab25ea" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p><ol> est utilisée pour créer des listes ordonnées (numérotées). De la même manière que pour les listes non-ordonnées, les éléments de liste sont définis avec la balise <li>.</p>								</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-f27448b e-flex e-con-boxed e-con e-child" data-id="f27448b" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-3e35e5a exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="3e35e5a" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><ol>
  <li>Pomme</li>
  <li>Banane</li>
  <li>Cerise</li>
  <li>Orange</li>
</ol>
</xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-88942c8 exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="88942c8" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><ul>
  <li>Pomme</li>
  <li>Banane</li>
  <li>Cerise</li>
  <li>Orange</li>
</ul>
</xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-abca623 e-flex e-con-boxed e-con e-child" data-id="abca623" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
					</div>
				</div>
				</article>
					</div>
				</section>
		<section class="elementor-element elementor-element-a2f11d5 e-flex e-con-boxed e-con e-child" data-id="a2f11d5" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-73909ae exad-glass-effect-no elementor-widget elementor-widget-elementskit-heading" data-id="73909ae" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="elementskit-heading.default">
				<div class="elementor-widget-container">
					<div class="ekit-wid-con" ><div class="ekit-heading elementskit-section-title-wraper text_left   ekit_heading_tablet-   ekit_heading_mobile-"><h2 class="ekit-heading--title elementskit-section-title ">Balises de <span><span>mise en forme</span></span></h2><div class="ekit_heading_separetor_wraper ekit_heading_elementskit-border-divider ekit-dotted"><div class="elementskit-border-divider ekit-dotted"></div></div></div></div>				</div>
				</div>
		<article class="elementor-element elementor-element-4119472 e-con-full e-flex e-con e-child" data-id="4119472" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-3433ee0 e-con-full e-flex e-con e-child" data-id="3433ee0" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-a284c1a e-flex e-con-boxed e-con e-child" data-id="a284c1a" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-8552302 exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="8552302" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h3 class="elementor-heading-title elementor-size-default"><em></h3>				</div>
				</div>
				<div class="elementor-element elementor-element-24b1720 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="24b1720" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Utilisée pour mettre en emphase ou en italique le texte. Cela indique que le texte a une signification différente ou spéciale dans le contexte.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-4c3e65a exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="4c3e65a" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><p>Il est <em>essentiel</em> de boire suffisamment d'eau chaque jour.</p></xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-7c7d046 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="7c7d046" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Il est <em>essentiel</em> de boire suffisamment d’eau chaque jour </p>								</div>
				</div>
				<div class="elementor-element elementor-element-98979b5 exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="98979b5" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h3 class="elementor-heading-title elementor-size-default"><strong></h3>				</div>
				</div>
				<div class="elementor-element elementor-element-308a73a exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="308a73a" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Cette balise est utilisée pour mettre en évidence ou en gras le texte. Elle indique que le texte est d’une importance particulière, souvent utilisée pour des mots-clés ou des informations vitales.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-a97eb00 exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="a97eb00" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><p>Il est <strong>crucial</strong> de suivre les instructions pour garantir 
la sécurité.</p></xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-7ee515c exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="7ee515c" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Il est <strong>crucial</strong> de suivre les instructions pour garantir la sécurité</p>								</div>
				</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-75ffbd4 e-flex e-con-boxed e-con e-child" data-id="75ffbd4" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
					</div>
				</div>
				</article>
		<article class="elementor-element elementor-element-fd46b5e e-con-full e-flex e-con e-child" data-id="fd46b5e" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-1556033 e-con-full e-flex e-con e-child" data-id="1556033" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-7fdde32 e-flex e-con-boxed e-con e-child" data-id="7fdde32" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-36b654b exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="36b654b" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h3 class="elementor-heading-title elementor-size-default"><mark></h3>				</div>
				</div>
				<div class="elementor-element elementor-element-6473f25 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="6473f25" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Cette balise permet de surligner un texte pour le mettre en évidence visuellement. Elle est souvent utilisée pour indiquer des parties spécifiques d’un texte qui doivent attirer l’attention.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-c87b373 exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="c87b373" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><p>La <mark>photosynthèse</mark> est le processus 
par lequel les plantes vertes ...</p></xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-bc247a2 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="bc247a2" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									La <mark>photosynthèse</mark> est le processus par lequel les plantes vertes …								</div>
				</div>
				<div class="elementor-element elementor-element-04806ce exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="04806ce" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h3 class="elementor-heading-title elementor-size-default"><code></h3>				</div>
				</div>
				<div class="elementor-element elementor-element-252d913 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="252d913" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Utilisée pour encadrer un fragment de code, cette balise indique que le texte à l’intérieur est une représentation de code source. Le texte peut apparaître avec une police à largeur fixe pour le différencier du texte normal.</p><p> </p><p>C’est cet élément qui est utilisé depuis le début de la page pour te présenter le code d’exemple !</p>								</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-3c749e3 e-flex e-con-boxed e-con e-child" data-id="3c749e3" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-0761d03 exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="0761d03" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><code>Ceci est une balise code affichée par une balise code ! #codeception</code></xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-38222a0 e-flex e-con-boxed e-con e-child" data-id="38222a0" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
					</div>
				</div>
				</article>
					</div>
				</section>
				</section>
		<div class="elementor-element elementor-element-9e15f66 e-flex e-con-boxed e-con e-child" data-id="9e15f66" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-c520bc0 e-con-full e-flex e-con e-child" data-id="c520bc0" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-0d6372a e-con-full e-flex e-con e-child" data-id="0d6372a" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-decaee2 exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="decaee2" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h3 class="elementor-heading-title elementor-size-large">Optimiser l'écriture du HTML</h3>				</div>
				</div>
				<div class="elementor-element elementor-element-3a6b21d exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="3a6b21d" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Il existe des fonctionnalités dans VSCode pour améliorer et accélérer notre écriture du HTML lorsque l’on commence a maîtriser le langage.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-3b09e1b bdt-content-position--left exad-glass-effect-no elementor-widget elementor-widget-bdt-fancy-list" data-id="3b09e1b" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="bdt-fancy-list.default">
				<div class="elementor-widget-container">
							<div class="bdt-fancy-list bdt-fancy-list-style-1">
			<ul class="bdt-list bdt-fancy-list-group" class="bdt-fancy-list-icon">
									<li>
						<div class="bdt-fancy-list-wrap">						<div class="bdt-flex flex-wrap">
																					
														<div class="bdt-fancy-list-content">
																<h4									class="bdt-fancy-list-title">
									Emmet								</h4>
																								<p class="bdt-fancy-list-text">
									Enorme boite a outils pour développeurs ... directement intégré à VS Code ! Il se présente sous la forme de syntaxe particulière à écrire pour accélérer la création de notre page								</p>
															</div>
																						<div class="bdt-fancy-list-icon">
									<i aria-hidden="true" class="material-icons md-code" data-md-icon="code"></i>								</div>
													</div>
												</div>
											</li>
												</ul>
		</div>
						</div>
				</div>
		<div class="elementor-element elementor-element-4ab4009 e-flex e-con-boxed e-con e-child" data-id="4ab4009" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-30acbc8 elementor-widget__width-inherit exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="30acbc8" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p><strong>“!”</strong> puis Entrée => Insère toute la partie DOCTYPE </p>								</div>
				</div>
				<div class="elementor-element elementor-element-157776d exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="157776d" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp>! =>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html></xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-cd5689d elementor-widget__width-inherit exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="cd5689d" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p><strong>“balise” + “:”</strong>  => Insère la balise voulue avec en lien le fichier que vous séléctionnerez </p>								</div>
				</div>
				<div class="elementor-element elementor-element-0f052fa exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="0f052fa" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp>link:css =>
    </xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-cf8b9a1 elementor-widget__width-inherit exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="cf8b9a1" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p><strong>“balise” + “>” + balise</strong> => insère la hiérarchie de balises voulue </p>								</div>
				</div>
				<div class="elementor-element elementor-element-49dd771 exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="49dd771" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp>section>ul>li>a =>
<section>
    <ul>
        <li><a href=""></a></li>
    </ul>
</section>
</xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-271bf34 e-con-full e-flex e-con e-child" data-id="271bf34" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-43507c5 exad-glass-effect-no elementor-widget elementor-widget-spacer" data-id="43507c5" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				</div>
				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-903a7ef e-flex e-con-boxed e-con e-child" data-id="903a7ef" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-a071293 e-con-full e-flex e-con e-child" data-id="a071293" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-504724c e-con-full e-flex e-con e-child" data-id="504724c" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-014e65e exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="014e65e" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h3 class="elementor-heading-title elementor-size-large">Mettre en page son fichier HTML</h3>				</div>
				</div>
				<div class="elementor-element elementor-element-970f378 bdt-content-position--left exad-glass-effect-no elementor-widget elementor-widget-bdt-fancy-list" data-id="970f378" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="bdt-fancy-list.default">
				<div class="elementor-widget-container">
							<div class="bdt-fancy-list bdt-fancy-list-style-1">
			<ul class="bdt-list bdt-fancy-list-group" class="bdt-fancy-list-icon">
									<li>
						<div class="bdt-fancy-list-wrap">						<div class="bdt-flex flex-wrap">
																					
														<div class="bdt-fancy-list-content">
																<h4									class="bdt-fancy-list-title">
									Prettier								</h4>
																								<p class="bdt-fancy-list-text">
									Plugin permettant de mettre en page tout ou partie d'un fichier HTML , CSS etc ... . Il se base sur l'ouverture et la fermeture des balises , attention a bein structure son fichier ! 								</p>
															</div>
																						<div class="bdt-fancy-list-icon">
									<i aria-hidden="true" class="material-icons md-code" data-md-icon="code"></i>								</div>
													</div>
												</div>
											</li>
												</ul>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-370cab4 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="370cab4" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Lorsque l’on tape un fichier HTML il est parfois intéressant de ne pas trop porter attention aux indentations et autres mise en page. Il est possible de le faire en une fois de manière automatisé.</p><p> </p><p><strong> Sélectionnes le code a mettre en page et utilise la raccourci clavier : Alt + Maj + F / Option + Maj + F</strong></p>								</div>
				</div>
		<div class="elementor-element elementor-element-22b4850 e-flex e-con-boxed e-con e-child" data-id="22b4850" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-92622b0 e-flex e-con-boxed e-con e-child" data-id="92622b0" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-a804e43 exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="a804e43" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><!DOCTYPE html>
<html>
<head>
<title>Exemple HTML Non Indenté</title>
</head>
<body>
<h1>Ceci est un exemple de code HTML
non indenté.</h1>
<p>Ce code n'est pas correctement
formaté en termes d'indentation,
ce qui le rend moins lisible.</p>
<ul>
<li>Liste d'éléments non indentée.</li>
<li>Pas de sauts de ligne ni d'espaces 
pour structurer le code.</li>
</ul>
</body>
</html></xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-71f35a9 e-flex e-con-boxed e-con e-child" data-id="71f35a9" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-1137739 exad-glass-effect-no elementor-widget elementor-widget-code-highlight" data-id="1137739" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-okaidia copy-to-clipboard ">
			<pre data-line="" class="highlight-height language-html ">
				<code readonly="true" class="language-html">
					<xmp><!DOCTYPE html>
<html>
  <head>
    <title>Exemple HTML Indenté</title>
  </head>
  <body>
    <h1>Ceci est un exemple de code HTML 
    correctement indenté.</h1>
    <p>Ce code est maintenant formaté avec
    une indentation appropriée, ce qui le
    rend plus lisible.</p>
    <ul>
      <li>Liste d'éléments indentée.</li>
      <li>Les sauts de ligne et l'espacement
      structurent le code.</li>
    </ul>
  </body>
</html>
</xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
					</div>
				</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-44aa064 e-con-full e-flex e-con e-child" data-id="44aa064" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-1525208 exad-glass-effect-no elementor-widget elementor-widget-spacer" data-id="1525208" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				</div>
				</div>
				</div>
					</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-7579245 e-flex e-con-boxed e-con e-parent" data-id="7579245" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-e0ab2fa e-flex e-con-boxed e-con e-child" data-id="e0ab2fa" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-5939190 e-con-full e-flex e-con e-child" data-id="5939190" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-961f931 exad-glass-effect-no elementor-widget elementor-widget-bdt-lottie-image" data-id="961f931" data-element_type="widget" data-settings="{"caption_source":"none","lottie_start_point":{"unit":"%","size":"0","sizes":[]},"lottie_end_point":{"unit":"%","size":"100","sizes":[]},"ekit_we_effect_on":"none"}" data-widget_type="bdt-lottie-image.default">
				<div class="elementor-widget-container">
					
		<div class="bdt-lottie-image">

</div>
				</div>
				<div class="elementor-element elementor-element-5081d13 exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="5081d13" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h2 class="elementor-heading-title elementor-size-default">RÉSUMÉ</h2>				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-518c642 e-con-full e-flex e-con e-child" data-id="518c642" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-41a75c0 eael-infobox-icon-bg-shape-radius eael-infobox-icon-hover-bg-shape-none exad-glass-effect-no elementor-widget elementor-widget-eael-info-box" data-id="41a75c0" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="eael-info-box.default">
				<div class="elementor-widget-container">
					        <div class="eael-infobox icon-on-left">
	            <div class="infobox-icon eael-icon-only">

<div class="infobox-icon-wrap">
                    <i aria-hidden="true" class="material-icons md-menu_book" data-md-icon="menu_book"></i>                </div>
            
            
        </div>
            <div class="infobox-content eael-icon-only">
        <div><p><p> pour les paragraphes et textes</p><p><h1> à <h6> pour la hiérarchie des titres</p><p><ul> / <li> pour lister des éléments</p><p><nav> pour l’élément de navigation</p></div>        </div>
            </div>

</div>
				</div>
				<div class="elementor-element elementor-element-e47e1fe eael-infobox-icon-bg-shape-radius eael-infobox-icon-hover-bg-shape-none exad-glass-effect-no elementor-widget elementor-widget-eael-info-box" data-id="e47e1fe" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="eael-info-box.default">
				<div class="elementor-widget-container">
					        <div class="eael-infobox icon-on-left">
	            <div class="infobox-icon eael-icon-only">

<div class="infobox-icon-wrap">
                    <i aria-hidden="true" class="material-icons md-menu_book" data-md-icon="menu_book"></i>                </div>
            
            
        </div>
            <div class="infobox-content eael-icon-only">
        <div><p><span style="text-decoration: underline">En SEO</span> :</p><p>alt pour les images (hors illustrations)</p><p>href pour les liens</p><p>Contrastes suffisants (accessibilité)</p><p>title pour les balises de type texte et les <hN></p><p>Utilisation de balise meta</p></div>        </div>
            </div>

</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-3f39e5f e-con-full e-flex e-con e-child" data-id="3f39e5f" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-0938322 eael-infobox-icon-bg-shape-radius eael-infobox-icon-hover-bg-shape-none exad-glass-effect-no elementor-widget elementor-widget-eael-info-box" data-id="0938322" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="eael-info-box.default">
				<div class="elementor-widget-container">
					        <div class="eael-infobox icon-on-left">
	            <div class="infobox-icon eael-icon-only">

<div class="infobox-icon-wrap">
                    <i aria-hidden="true" class="material-icons md-menu_book" data-md-icon="menu_book"></i>                </div>
            
            
        </div>
            <div class="infobox-content eael-icon-only">
        <div><p>Bien découper sa page avec les balises sémantiques (article / aside / section …)</p><p>Pas de hiérarchie illogique (h3 avant h2, plusieurs <main> …)</p><p>Pas de balises obsolètes (<i> , <b> , etc…)</p></div>        </div>
            </div>

</div>
				</div>
				<div class="elementor-element elementor-element-4d82bcf eael-infobox-icon-bg-shape-radius eael-infobox-icon-hover-bg-shape-none exad-glass-effect-no elementor-widget elementor-widget-eael-info-box" data-id="4d82bcf" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="eael-info-box.default">
				<div class="elementor-widget-container">
					        <div class="eael-infobox icon-on-left">
	            <div class="infobox-icon eael-icon-only">

<div class="infobox-icon-wrap">
                    <i aria-hidden="true" class="material-icons md-menu_book" data-md-icon="menu_book"></i>                </div>
            
            
        </div>
            <div class="infobox-content eael-icon-only">
        <div><p>Ne pas oublier <blockquote> et <cite> pour mettre en avant des citations et références</p><p>Utiliser <mark> pour surligner du texte et <code> dès lors que du code informatique est affiché</p></div>        </div>
            </div>

</div>
				</div>
				</div>
					</div>
				</div>
					</div>
				</div>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-5a97c28 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default elementor-section-items-middle exad-glass-effect-no" data-id="5a97c28" data-element_type="section" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
						<div data-rocket-location-hash="ec5e0e3869c7cc5842a0e3936c74f646" class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8edbb85 exad-glass-effect-no" data-id="8edbb85" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<section class="elementor-section elementor-inner-section elementor-element elementor-element-04ceb9a elementor-section-full_width elementor-section-height-default elementor-section-height-default exad-glass-effect-no" data-id="04ceb9a" data-element_type="section" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
						<div data-rocket-location-hash="dace2e633235bb54b1aa5f08f1639059" class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-8ee0520 exad-glass-effect-no" data-id="8ee0520" data-element_type="column">
			<div class="elementor-widget-wrap">
							</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-a68bfc5 exad-glass-effect-no" data-id="a68bfc5" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-4d9692c bdt-title-link-yes elementor-position-right bdt-global-link-yes bdt-icon-effect-none exad-glass-effect-no elementor-widget elementor-widget-bdt-lottie-icon-box" data-id="4d9692c" data-element_type="widget" data-settings="{"lottie_start_point":{"unit":"%","size":"0","sizes":[]},"lottie_end_point":{"unit":"%","size":"100","sizes":[]},"ekit_we_effect_on":"none"}" data-widget_type="bdt-lottie-icon-box.default">
				<div class="elementor-widget-container">
							<div class="bdt-lottie-icon-box" onclick="window.open('https://learn.e-kodama.fr/cours/02-laccessibilite-web/', '_self')">

<div class="bdt-icon-box-title-wrapper">
													<span								class="bdt-lottie-icon-box-title" onclick="window.open('https://learn.e-kodama.fr/cours/02-laccessibilite-web/', '_self')">
								<span >
									#02 - ACCESSIBILITé WEB								</span>
							</span>

</div>

</div>
		</div>

</div>
				</div>
					</div>
		</div>
					</div>
		</section>
					</div>
		</div>
					</div>
		</section>
				</div>
				</div>
						</div>
				</div>
				</div>
				</div>
						</div>
				</div>
					</div>
		</div>
					</div>
		</section>
		<div class="elementor-element elementor-element-347d313 e-flex e-con-boxed e-con e-parent" data-id="347d313" data-element_type="container" id="quizz" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-883ca85 e-con-full e-flex e-con e-child" data-id="883ca85" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-2d90832 eael-dual-header-content-align-center exad-glass-effect-no elementor-invisible elementor-widget elementor-widget-eael-dual-color-header" data-id="2d90832" data-element_type="widget" data-settings="{"_animation":"slideInUp","ekit_we_effect_on":"none"}" data-widget_type="eael-dual-color-header.default">
				<div class="elementor-widget-container">
								<div class="eael-dual-header">
									<span class="eael-dch-svg-icon"><i aria-hidden="true" class="huge huge-game-controller-03"></i></span>								<h2 class="title eael-dch-title"><span class="eael-dch-title-text eael-dch-title-lead lead solid-color">QUIZZ </span> <span class="eael-dch-title-text">DE CONNAISSANCES</span></h2>				<span class="subtext">Test tes connaissances sur le sujet du cours</span>
			</div>
						</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-be45c03 e-con-full e-flex e-con e-child" data-id="be45c03" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-3d17fb5 elementor-cta--skin-cover elementor-bg-transform elementor-bg-transform-zoom-in exad-glass-effect-no elementor-widget elementor-widget-call-to-action" data-id="3d17fb5" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="call-to-action.default">
				<div class="elementor-widget-container">
							<a class="elementor-cta" href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjI2OTIxIiwidG9nZ2xlIjpmYWxzZX0%3D">
					<div class="elementor-cta__bg-wrapper">
				<div class="elementor-cta__bg elementor-bg" style="background-image: url(https://learn.e-kodama.fr/wp-content/uploads/2022/11/BG_Quizz_Flou.webp);" role="img" aria-label="BG_Quizz_Flou"></div>
				<div class="elementor-cta__bg-overlay"></div>
			</div>
							<div class="elementor-cta__content">
				
									<div class="elementor-cta__title elementor-cta__content-item elementor-content-item">
						FAIRE LE QUIZZ					</div>
				
				
							</div>
						</a>
						</div>
				</div>
				</div>
					</div>
				</div>
				</div>
				<footer data-elementor-type="footer" data-elementor-id="7171" class="elementor elementor-7171 elementor-location-footer" data-elementor-settings="{"element_pack_global_tooltip_width":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_laptop":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet_extra":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_mobile":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_padding":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true}}" data-elementor-post-type="elementor_library">
			<div class="elementor-element elementor-element-a30bc44 e-con-full elementor-hidden-mobile elementor-hidden-tablet e-flex elementor-invisible e-con e-parent" data-id="a30bc44" data-element_type="container" data-settings="{"background_background":"classic","sticky":"bottom","sticky_on":["tablet","mobile"],"animation":"slideInUp","ekit_has_onepagescroll_dot":"yes","sticky_offset":0,"sticky_effects_offset":0,"sticky_anchor_link_offset":0}">
		<div class="elementor-element elementor-element-4d7cc31 e-con-full e-flex e-con e-child" data-id="4d7cc31" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-a201889 e-con-full linknostyle e-flex e-con e-child" data-id="a201889" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-7535713 e-con-full e-flex e-con e-child" data-id="7535713" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-5df7431 exad-glass-effect-no elementor-widget elementor-widget-image" data-id="5df7431" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="image.default">
				<div class="elementor-widget-container">
																<a href="https://my.planethoster.com/world/new?promo_code=PHA-EkoPromo&billingcycle=annually&plan" target="_blank">
							<img loading="lazy" width="640" height="166" src="https://learn.e-kodama.fr/wp-content/uploads/2021/10/PH_partner-768x199.png" class="attachment-medium_large size-medium_large wp-image-36243" alt="" srcset="https://learn.e-kodama.fr/wp-content/uploads/2021/10/PH_partner-768x199.png 768w, https://learn.e-kodama.fr/wp-content/uploads/2021/10/PH_partner-300x78.png 300w, https://learn.e-kodama.fr/wp-content/uploads/2021/10/PH_partner.png 850w" sizes="(max-width: 640px) 100vw, 640px" />								</a>
															</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-d091c7f e-con-full e-flex e-con e-child" data-id="d091c7f" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-c36a529 elementor-widget__width-auto exad-glass-effect-no elementor-widget elementor-widget-bdt-animated-link" data-id="c36a529" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="bdt-animated-link.default">
				<div class="elementor-widget-container">
										<a class="bdt-ep-animated-link bdt-ep-animated-link--io" href="https://learn.e-kodama.fr/qui-sommes-nous/">
				Qui sommes nous ?			</a>
		
				</div>
				</div>
				<div class="elementor-element elementor-element-f37acfc elementor-widget__width-auto exad-glass-effect-no elementor-widget elementor-widget-bdt-animated-link" data-id="f37acfc" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="bdt-animated-link.default">
				<div class="elementor-widget-container">
										<a class="bdt-ep-animated-link bdt-ep-animated-link--io" href="https://learn.e-kodama.fr/plan-du-site/">
				Plan du site			</a>
		
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-8759056 e-con-full e-flex e-con e-child" data-id="8759056" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-293e24b exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="293e24b" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>☕ Crée par E-Kodama</p>								</div>
				</div>
				</div>
				</div>
				</div>
				</div>
				</footer>
		
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/Susty/*","/wp-content/themes/susty-master/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
    
<style type="text/css" class="darkmysite_inline_css">
    </style>

document.addEventListener("DOMContentLoaded", function(event) {
        darkmysite_init_draggable_floating_switch();
        darkmysite_init_alternative_dark_mode_switch();
    });

</script>

<div id="cmplz-cookiebanner-container"><div class="cmplz-cookiebanner cmplz-hidden banner-1 banner-a optin cmplz-center cmplz-categories-type-view-preferences" aria-modal="true" data-nosnippet="true" role="dialog" aria-live="polite" aria-labelledby="cmplz-header-1-optin" aria-describedby="cmplz-message-1-optin">
	<div class="cmplz-header">
		<div class="cmplz-logo"><a href="https://learn.e-kodama.fr/" class="custom-logo-link" rel="home"><img loading="lazy" width="531" height="470" src="https://learn.e-kodama.fr/wp-content/uploads/2021/02/logo_ekolearn-removebg-preview.png" class="custom-logo" alt="EKOLEARN" decoding="async" srcset="https://learn.e-kodama.fr/wp-content/uploads/2021/02/logo_ekolearn-removebg-preview.png 531w, https://learn.e-kodama.fr/wp-content/uploads/2021/02/logo_ekolearn-removebg-preview-300x266.png 300w" sizes="(max-width: 531px) 100vw, 531px" /></a></div>
		<div class="cmplz-title" id="cmplz-header-1-optin">Gérer le consentement</div>
		<div class="cmplz-close" tabindex="0" role="button" aria-label="Fermer la boîte de dialogue">
			<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
		</div>
	</div>

<div class="cmplz-divider cmplz-divider-header"></div>
	<div class="cmplz-body">
		<div class="cmplz-message" id="cmplz-message-1-optin"><p>Afin de fournir les meilleures expériences, nous utilisons des technologies telles que les cookies pour stocker et/ou accéder aux informations relatives à l'appareil. Le fait de consentir à ces technologies nous permettra de traiter des données telles que le comportement de navigation ou des identifiants uniques sur ce site. Le fait de ne pas consentir ou de retirer son consentement peut avoir un effet négatif sur certaines caractéristiques et fonctions.</p></div>
		
		<div class="cmplz-categories">
			<details class="cmplz-category cmplz-functional" >
				<summary>
						<span class="cmplz-category-header">
							<span class="cmplz-category-title">Fonctionnels</span>
							<span class='cmplz-always-active'>
								<span class="cmplz-banner-checkbox">
									<input type="checkbox"
										   id="cmplz-functional-optin"
										   data-category="cmplz_functional"
										   class="cmplz-consent-checkbox cmplz-functional"
										   size="40"
										   value="1"/>
									<label class="cmplz-label" for="cmplz-functional-optin"><span class="screen-reader-text">Fonctionnels</span></label>
								</span>
								Toujours activé							</span>
							<span class="cmplz-icon cmplz-open">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"  height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
							</span>
						</span>
				</summary>
				<div class="cmplz-description">
					<span class="cmplz-description-functional">Le stockage technique ou l'accès est strictement nécessaire dans le but légitime de permettre l'utilisation d'un service spécifique explicitement demandé par l'abonné ou l'utilisateur, ou dans le seul but d'effectuer la transmission d'une communication sur un réseau de communications électroniques.</span>
				</div>
			</details>

<details class="cmplz-category cmplz-preferences" >
				<summary>
						<span class="cmplz-category-header">
							<span class="cmplz-category-title">Preferences</span>
							<span class="cmplz-banner-checkbox">
								<input type="checkbox"
									   id="cmplz-preferences-optin"
									   data-category="cmplz_preferences"
									   class="cmplz-consent-checkbox cmplz-preferences"
									   size="40"
									   value="1"/>
								<label class="cmplz-label" for="cmplz-preferences-optin"><span class="screen-reader-text">Preferences</span></label>
							</span>
							<span class="cmplz-icon cmplz-open">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"  height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
							</span>
						</span>
				</summary>
				<div class="cmplz-description">
					<span class="cmplz-description-preferences">The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.</span>
				</div>
			</details>

<details class="cmplz-category cmplz-statistics" >
				<summary>
						<span class="cmplz-category-header">
							<span class="cmplz-category-title">Statistiques</span>
							<span class="cmplz-banner-checkbox">
								<input type="checkbox"
									   id="cmplz-statistics-optin"
									   data-category="cmplz_statistics"
									   class="cmplz-consent-checkbox cmplz-statistics"
									   size="40"
									   value="1"/>
								<label class="cmplz-label" for="cmplz-statistics-optin"><span class="screen-reader-text">Statistiques</span></label>
							</span>
							<span class="cmplz-icon cmplz-open">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"  height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
							</span>
						</span>
				</summary>
				<div class="cmplz-description">
					<span class="cmplz-description-statistics">Le stockage ou l'accès technique utilisé exclusivement à des fins statistiques.</span>
					<span class="cmplz-description-statistics-anonymous">The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.</span>
				</div>
			</details>
			<details class="cmplz-category cmplz-marketing" >
				<summary>
						<span class="cmplz-category-header">
							<span class="cmplz-category-title">Marketing</span>
							<span class="cmplz-banner-checkbox">
								<input type="checkbox"
									   id="cmplz-marketing-optin"
									   data-category="cmplz_marketing"
									   class="cmplz-consent-checkbox cmplz-marketing"
									   size="40"
									   value="1"/>
								<label class="cmplz-label" for="cmplz-marketing-optin"><span class="screen-reader-text">Marketing</span></label>
							</span>
							<span class="cmplz-icon cmplz-open">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"  height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
							</span>
						</span>
				</summary>
				<div class="cmplz-description">
					<span class="cmplz-description-marketing">The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.</span>
				</div>
			</details>
		</div>
			</div>

<div class="cmplz-links cmplz-information">
		<ul>
			<li><a class="cmplz-link cmplz-manage-options cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container">Gérer les options</a></li>
			<li><a class="cmplz-link cmplz-manage-third-parties cookie-statement" href="#" data-relative_url="#cmplz-cookies-overview">Gérer les services</a></li>
			<li><a class="cmplz-link cmplz-manage-vendors tcf cookie-statement" href="#" data-relative_url="#cmplz-tcf-wrapper">Gérer {vendor_count} fournisseurs</a></li>
			<li><a class="cmplz-link cmplz-external cmplz-read-more-purposes tcf" target="_blank" rel="noopener noreferrer nofollow" href="https://cookiedatabase.org/tcf/purposes/" aria-label="En savoir plus sur les finalités de TCF de la base de données de cookies">En savoir plus sur ces finalités</a></li>
		</ul>
			</div>

<div class="cmplz-buttons">
		<button class="cmplz-btn cmplz-accept">Accepter</button>
		<button class="cmplz-btn cmplz-deny">Refuser</button>
		<button class="cmplz-btn cmplz-view-preferences">Préférences</button>
		<button class="cmplz-btn cmplz-save-preferences">Save preferences</button>
		<a class="cmplz-btn cmplz-manage-options tcf cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container">Préférences</a>
			</div>

<div class="cmplz-documents cmplz-links">
		<ul>
			<li><a class="cmplz-link cookie-statement" href="#" data-relative_url="">{title}</a></li>
			<li><a class="cmplz-link privacy-statement" href="#" data-relative_url="">{title}</a></li>
			<li><a class="cmplz-link impressum" href="#" data-relative_url="">{title}</a></li>
		</ul>
			</div>
</div>
</div>
					<div id="cmplz-manage-consent" data-nosnippet="true"><button class="cmplz-btn cmplz-hidden cmplz-manage-consent manage-consent-1">Gérer le consentement</button>

</div>			<script>
				const registerAllyAction = () => {
					if ( ! window?.ElementorProFrontendConfig || ! window?.elementorFrontend?.utils?.urlActions ) {
						return;
					}

elementorFrontend.utils.urlActions.addAction( 'allyWidget:open', () => {
						if (window?.ea11yWidget?.widget?.open) {
							return window.ea11yWidget.widget.isOpen()
								? window.ea11yWidget.widget.close()
								: window.ea11yWidget.widget.open();
						}
					} );
				};

const waitingLimit = 30;
				let retryCounter = 0;

const waitForElementorPro = () => {
					return new Promise( ( resolve ) => {
						const intervalId = setInterval( () => {
							if ( retryCounter === waitingLimit ) {
								resolve( null );
							}

retryCounter++;

if ( window.elementorFrontend && window?.elementorFrontend?.utils?.urlActions ) {
								clearInterval( intervalId );
								resolve( window.elementorFrontend );
							}
								}, 100 ); // Check every 100 milliseconds for availability of elementorFrontend
					});
				};

waitForElementorPro().then( () => { registerAllyAction(); });
			</script>
					<div data-elementor-type="popup" data-elementor-id="4024" class="elementor elementor-4024 elementor-location-popup" data-elementor-settings="{"entrance_animation":"slideInLeft","exit_animation":"slideInLeft","entrance_animation_duration":{"unit":"px","size":0.8,"sizes":[]},"prevent_scroll":"yes","element_pack_global_tooltip_width":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_laptop":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet_extra":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_mobile":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_padding":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"a11y_navigation":"yes","triggers":[],"timing":[]}" data-elementor-post-type="elementor_library">
			<div class="elementor-element elementor-element-a0337e7 e-flex e-con-boxed e-con e-parent" data-id="a0337e7" data-element_type="container" id="offcanvas" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-7851540 e-con-full e-flex e-con e-child" data-id="7851540" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-f03daa5 e-con-full e-flex e-con e-child" data-id="f03daa5" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-26d5eb5 e-con-full e-flex e-con e-child" data-id="26d5eb5" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-d603b60 exad-glass-effect-no elementor-widget elementor-widget-bdt-lottie-image" data-id="d603b60" data-element_type="widget" data-settings="{"caption_source":"none","lottie_start_point":{"unit":"%","size":"0","sizes":[]},"lottie_end_point":{"unit":"%","size":"100","sizes":[]},"ekit_we_effect_on":"none"}" data-widget_type="bdt-lottie-image.default">
				<div class="elementor-widget-container">
					
		<div class="bdt-lottie-image">

</div>
				</div>
				<div class="elementor-element elementor-element-ef8d9e3 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="ef8d9e3" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Bienvenue sur la plateforme de cours numérique Ekolearn</p>								</div>
				</div>
		<div class="elementor-element elementor-element-6e1d90a dark-exclude e-con-full e-flex e-con e-child" data-id="6e1d90a" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-446a338 e-con-full e-flex e-con e-child" data-id="446a338" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-053baa5 exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="053baa5" data-element_type="widget" id="chgText" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Envie d’une escapade nocturne  ?</p>								</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-09b2f29 e-con-full e-flex e-con e-child" data-id="09b2f29" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-8c28750 elementor-hidden-mobile elementor-view-default exad-glass-effect-no elementor-widget elementor-widget-icon" data-id="8c28750" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="icon.default">
				<div class="elementor-widget-container">
							<div class="elementor-icon-wrapper">
			<div class="elementor-icon">
			<i aria-hidden="true" class="material-icons md-keyboard_double_arrow_right" data-md-icon="keyboard_double_arrow_right"></i>			</div>
		</div>
						</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-3e25846 e-con-full e-flex e-con e-child" data-id="3e25846" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-6cbc01a exad-glass-effect-no elementor-widget elementor-widget-shortcode" data-id="6cbc01a" data-element_type="widget" id="darkswitch" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
							<div class="elementor-shortcode">
                            <style type="text/css"></style>
            
                                                                                                                            <div id="darkmysite_switch_1476507225_shortcode" class="darkmysite_switch darkmysite_switch_incaberry" style="position: relative;" onclick="darkmysite_switch_trigger()">
                    <div class="darkmysite_switch_plate">
                        <span class="darkmysite_switch_icon"></span>
                    </div>
                </div>
                        
        </div>
						</div>
				</div>
				</div>
				</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-1a91649 elementor-widget-divider--view-line exad-glass-effect-no elementor-widget elementor-widget-divider" data-id="1a91649" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="divider.default">
				<div class="elementor-widget-container">
							<div class="elementor-divider">
			<span class="elementor-divider-separator">
						</span>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-e0495d2 linknostyle exad-glass-effect-no elementor-widget elementor-widget-bdt-slinky-vertical-menu" data-id="e0495d2" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="bdt-slinky-vertical-menu.default">
				<div class="elementor-widget-container">
							<div class="bdt-slinky-vertical-menu slinky-menu slinky-theme-default" id="bdt-slinky-vertical-menu-e0495d2">

<ul id="bdt-slinky-vertical-menu-e0495d2" class="slinky-vertical-menu "><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/sommaire-des-cours/" class="">Sommaire des cours</a></li><li class="bdt-menu-item"><a href="#"  class="has-arrow">Cours</a><ul><li class="bdt-menu-item"><a href="#"  class="has-arrow">Cours #01 – CMS</a><ul><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/cours/definition-interet-et-contexte-des-cms/" class="">#01 – Définition, intérêt et contexte des CMS</a></li><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/cours/02-deploiement-et-prise-en-main/" class="">#02 – Déploiement et prise en main</a></li><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/cours/03-parametrage-administration-et-configuration/" class="">#03 – Paramétrage, administration et configuration</a></li><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/cours/themes-plugins/" class="">#04 – Personnalisation : Thèmes & Plugins</a></li><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/cours/ecoresponsabilite-accessibilite-numerique/" class="">#05 – Ecoresponsabilité, Accessibilité Numérique</a></li></ul></li><li class="bdt-menu-item"><a href="#"  class="has-arrow">Cours #02 – Intégration Web</a><ul><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/cours/01-la-semantique-html/" class="">#01 – La sémantique HTML</a></li><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/cours/02-laccessibilite-web/" class="">#02 – L’accessibilité Web</a></li><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/cours/03-le-sass-et-le-scss/" class="">#03 – Le SASS et le SCSS</a></li></ul></li></ul></li><li class="bdt-menu-item"><a href="#"  class="has-arrow">Compte & Informations</a><ul><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/dashboard/" class="">Dashboard</a></li><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/qui-sommes-nous/" class="">Qui sommes-nous</a></li><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/mentions-legales/" class="">Mentions légales</a></li><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/confidentialite-cookies/" class="">Confidentialité & Cookies</a></li><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/cgu/" class="">CGU</a></li></ul></li><li class="bdt-menu-item"><a href="#"  class="has-arrow">Ressources du site</a><ul><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/outils-pratiques/" class="">Outils pratiques</a></li><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/grilles-tp/" class="">Grilles & TP</a></li><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/blog-veille/" class="">News & Veille</a></li><li class="bdt-menu-item"><a href="https://learn.e-kodama.fr/blogs/" class="">Blogs & Notions</a></li></ul></li></ul>
			
		</div>
					</div>
				</div>
				<div class="elementor-element elementor-element-c3415e7 elementor-hidden-desktop elementor-hidden-tablet exad-glass-effect-no elementor-widget elementor-widget-spacer" data-id="c3415e7" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-1952da7 elementor-widget-divider--view-line exad-glass-effect-no elementor-widget elementor-widget-divider" data-id="1952da7" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="divider.default">
				<div class="elementor-widget-container">
							<div class="elementor-divider">
			<span class="elementor-divider-separator">
						</span>
		</div>
						</div>
				</div>
		<div class="elementor-element elementor-element-ff9f224 e-con-full e-flex e-con e-child" data-id="ff9f224" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-4ea0f55 e-con-full e-flex e-con e-child" data-id="4ea0f55" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
				<div id="eael-section-tooltip-60c281a" class="eael-section-tooltip elementor-element elementor-element-60c281a elementor-view-stacked elementor-shape-square elementor-widget__width-inherit exad-glass-effect-no elementor-widget elementor-widget-icon" data-id="60c281a" data-element_type="widget" data-settings="{"eael_tooltip_section_content":"D\u00e9connexion","ekit_we_effect_on":"none","eael_tooltip_section_position":"top","eael_tooltip_section_animation":"scale","eael_tooltip_section_arrow":true,"eael_tooltip_section_arrow_type":"sharp","eael_tooltip_section_follow_cursor":"false","eael_tooltip_section_trigger":"mouseenter","eael_tooltip_section_duration":300,"eael_tooltip_section_delay":400,"eael_tooltip_section_size":"regular"}" data-widget_type="icon.default">
		
            <script>
                jQuery(window).on('elementor/frontend/init elementor/popup/show', function() {
                    var $currentTooltip = '#eael-section-tooltip-60c281a';

if (typeof tippy !== 'undefined') {
                        tippy($currentTooltip, {
                            content: 'Déconnexion',
                            placement: 'top',
                            animation: 'scale',
                            arrow: '1',
                            arrowType: 'sharp',
                            duration: '300',
                            distance: '10',
                            delay: '400',
                            size: 'regular',
                            trigger: 'mouseenter focus',
                            animateFill: false,
                            flip: false,
                            flipOnUpdate: true,
                            interactive: true,
                            flipBehavior: [],
                            maxWidth: 350,
                            zIndex: 99999,
                            followCursor: false,
                            onShow(instance) {
                                var tippyPopper = instance.popper;
                                jQuery(tippyPopper).attr('data-tippy-popper-id', '60c281a');
                            }
                        });
                    }
                });
            </script>
        		<div class="elementor-widget-container">
							<div class="elementor-icon-wrapper">
			<a class="elementor-icon" href="https://learn.e-kodama.fr/wp-login.php?action=logout">
			<i aria-hidden="true" class="huge huge-logout-05"></i>			</a>
		</div>
						</div>
				</div>
				</div>
				</div>
				</div>
					</div>
				</div>
				</div>
				<div data-elementor-type="popup" data-elementor-id="27406" class="elementor elementor-27406 elementor-location-popup" data-elementor-settings="{"entrance_animation":"fadeIn","exit_animation":"fadeIn","entrance_animation_duration":{"unit":"px","size":0.5,"sizes":[]},"prevent_close_on_esc_key":"yes","element_pack_global_tooltip_width":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_laptop":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet_extra":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_mobile":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_padding":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"a11y_navigation":"yes","triggers":[],"timing":{"devices_devices":["desktop","tablet"],"devices":"yes"}}" data-elementor-post-type="elementor_library">
					</div>
				<div data-elementor-type="popup" data-elementor-id="34327" class="elementor elementor-34327 elementor-location-popup" data-elementor-settings="{"entrance_animation":"fadeIn","exit_animation":"fadeIn","entrance_animation_duration":{"unit":"px","size":"0.5","sizes":[]},"element_pack_global_tooltip_width":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_laptop":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet_extra":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_mobile":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_padding":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"a11y_navigation":"yes","timing":[]}" data-elementor-post-type="elementor_library">
			<div class="elementor-element elementor-element-ac5177d e-flex e-con-boxed e-con e-parent" data-id="ac5177d" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-1931216 e-con-full e-flex e-con e-child" data-id="1931216" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-0b2c31a elementor-align-center exad-glass-effect-no elementor-widget elementor-widget-lottie" data-id="0b2c31a" data-element_type="widget" data-settings="{"source_json":{"url":"https:\/\/learn.e-kodama.fr\/wp-content\/uploads\/2023\/03\/searchanimation.json","id":234120,"size":"","alt":"","source":"library"},"source":"media_file","caption_source":"none","link_to":"none","trigger":"arriving_to_viewport","viewport":{"unit":"%","size":"","sizes":{"start":0,"end":100}},"play_speed":{"unit":"px","size":1,"sizes":[]},"start_point":{"unit":"%","size":0,"sizes":[]},"end_point":{"unit":"%","size":100,"sizes":[]},"renderer":"svg","ekit_we_effect_on":"none"}" data-widget_type="lottie.default">
				<div class="elementor-widget-container">
					<div class="e-lottie__container"><div class="e-lottie__animation"></div></div>				</div>
				</div>
				<div class="elementor-element elementor-element-b781b1a elementor-search-form-skin-default exad-glass-effect-no elementor-widget elementor-widget-bdt-search" data-id="b781b1a" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="bdt-search.default">
				<div class="elementor-widget-container">
							<div class="bdt-search-container">
			
			
			<form class="bdt-search bdt-search-default" role="search" method="get" action="https://learn.e-kodama.fr/">
				<div class="bdt-position-relative">
					<span class="bdt-search-icon-flip" data-bdt-search-icon></span>											<input name="post_type" id="post_type" type="hidden" value="post">
										<input placeholder="RECHERCHE" class="bdt-search-input" type="search" name="s" title="Search" value="">
									</div>

</form>

</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-aec7690 exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="aec7690" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<p class="elementor-heading-title elementor-size-default">Tapes ta recherche puis appuie sur Entrée (↵)</p>				</div>
				</div>
				<div class="elementor-element elementor-element-18d3580 exad-glass-effect-no elementor-widget elementor-widget-bdt-accordion" data-id="18d3580" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="bdt-accordion.default">
				<div class="elementor-widget-container">
							<div class="bdt-ep-accordion-container">
			<div id="bdt-ep-accordion-18d3580" class="bdt-ep-accordion bdt-accordion" data-bdt-accordion="{"collapsible":true,"multiple":false,"transition":"ease-in-out"}" 		data-settings="{"id":"bdt-ep-accordion-18d3580","activeHash":"no","activeScrollspy":null,"hashTopOffset":false,"hashScrollspyTime":false,"closeAllItemsOnMobile":false}">
									<div class="bdt-ep-accordion-item">
						<div							class="bdt-ep-accordion-title bdt-accordion-title bdt-flex bdt-flex-middle bdt-flex-between" id="bdt-ep-accordion-pas-dautocompltion-mais-pourquoi"
							data-accordion-index="0" data-title="pas-d-039-autocompl-tion-mais-pourquoi">

Pas d'autocomplétion, mais pourquoi ?							</span>

</div>
						<div class="bdt-ep-accordion-content bdt-accordion-content">
							<p>L’autocomplétion dans un formulaire de recherche consiste à proposer des mots clés, des résultats, à chaque lettre écrite dans le champ. </p><p>Oui cela est pratique, mais en terme de consommation de ressources c’est très gourmand ! Aussi, dans un soucis d’écoconception, ce formulaire de recherche ne régira pas à vos interactions en temps réel, mais il fonctionne quand même !</p><p><em>Bonne pratique n°4 du guide de l’éco-conception web</em></p>						</div>
					</div>
							</div>
		</div>
						</div>
				</div>
				</div>
					</div>
				</div>
				</div>
				<div data-elementor-type="popup" data-elementor-id="27398" class="elementor elementor-27398 elementor-location-popup" data-elementor-settings="{"entrance_animation":"slideInUp","exit_animation":"slideInUp","entrance_animation_duration":{"unit":"px","size":0.5,"sizes":[]},"prevent_close_on_background_click":"yes","prevent_close_on_esc_key":"yes","element_pack_global_tooltip_width":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_laptop":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet_extra":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_mobile":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_padding":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"a11y_navigation":"yes","triggers":[],"timing":{"devices_devices":["desktop","tablet"],"devices":"yes"}}" data-elementor-post-type="elementor_library">
			<div class="elementor-element elementor-element-7ab9599 e-con-full e-flex e-con e-parent" data-id="7ab9599" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-655aec7 elementor-widget__width-initial exad-glass-effect-no elementor-widget elementor-widget-image" data-id="655aec7" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="image.default">
				<div class="elementor-widget-container">
																<a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjI3NDA2IiwidG9nZ2xlIjp0cnVlfQ%3D%3D">
							<img loading="lazy" width="1000" height="1000" src="https://learn.e-kodama.fr/wp-content/uploads/2022/11/EKO.png" class="elementor-animation-grow attachment-full size-full wp-image-27359" alt="" srcset="https://learn.e-kodama.fr/wp-content/uploads/2022/11/EKO.png 1000w, https://learn.e-kodama.fr/wp-content/uploads/2022/11/EKO-300x300.png 300w, https://learn.e-kodama.fr/wp-content/uploads/2022/11/EKO-150x150.png 150w, https://learn.e-kodama.fr/wp-content/uploads/2022/11/EKO-768x768.png 768w" sizes="(max-width: 1000px) 100vw, 1000px" />								</a>
															</div>
				</div>
				</div>
				</div>
				<div data-elementor-type="popup" data-elementor-id="26921" class="elementor elementor-26921 elementor-location-popup" data-elementor-settings="{"entrance_animation":"slideInUp","exit_animation":"slideInUp","entrance_animation_duration":{"unit":"px","size":"1","sizes":[]},"prevent_close_on_background_click":"yes","prevent_scroll":"yes","avoid_multiple_popups":"yes","element_pack_global_tooltip_width":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_laptop":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet_extra":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_mobile":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_padding":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"a11y_navigation":"yes","timing":[]}" data-elementor-post-type="elementor_library">
					<section class="elementor-section elementor-top-section elementor-element elementor-element-22546b46 elementor-section-full_width elementor-section-height-min-height elementor-section-items-stretch elementor-section-content-middle elementor-section-height-default exad-glass-effect-no" data-id="22546b46" data-element_type="section" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
							<div data-rocket-location-hash="e9f16a81639c91e0909cfc48616016f1" class="elementor-background-overlay"></div>
							<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2ccff20 exad-glass-effect-no" data-id="2ccff20" data-element_type="column" data-settings="{"background_background":"classic"}">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-7b0ea99 elementor-view-stacked wp-dark-mode-ignore elementor-absolute elementor-widget__width-initial elementor-shape-circle exad-glass-effect-no elementor-widget elementor-widget-icon" data-id="7b0ea99" data-element_type="widget" data-settings="{"_position":"absolute","ekit_we_effect_on":"none"}" data-widget_type="icon.default">
				<div class="elementor-widget-container">
							<div class="elementor-icon-wrapper">
			<a class="elementor-icon" href="#elementor-action%3Aaction%3Dpopup%3Aclose%26settings%3DeyJkb19ub3Rfc2hvd19hZ2FpbiI6IiJ9">
			<i aria-hidden="true" class="material-icons md-close" data-md-icon="close"></i>			</a>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-84be809 exad-glass-effect-no elementor-widget elementor-widget-bdt-lottie-image" data-id="84be809" data-element_type="widget" data-settings="{"lottie_number_of_times":3,"caption_source":"none","lottie_start_point":{"unit":"%","size":"0","sizes":[]},"lottie_end_point":{"unit":"%","size":"100","sizes":[]},"ekit_we_effect_on":"none"}" data-widget_type="bdt-lottie-image.default">
				<div class="elementor-widget-container">
					
		<div class="bdt-lottie-image">

</div>
				</div>
				<section class="elementor-section elementor-inner-section elementor-element elementor-element-dbe7fd9 elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-glass-effect-no" data-id="dbe7fd9" data-element_type="section" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-6dbe6740 exad-glass-effect-no" data-id="6dbe6740" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
							</div>
		</div>
					</div>
		</section>
					</div>
		</div>
					</div>
		</section>
				</div>
				<div data-elementor-type="popup" data-elementor-id="44413" class="elementor elementor-44413 elementor-location-popup" data-elementor-settings="{"entrance_animation":"slideInRight","exit_animation":"slideInRight","entrance_animation_duration":{"unit":"px","size":0.8,"sizes":[]},"prevent_scroll":"yes","element_pack_global_tooltip_width":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_laptop":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet_extra":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_mobile":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_padding":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"a11y_navigation":"yes","triggers":[],"timing":[]}" data-elementor-post-type="elementor_library">
			<div class="elementor-element elementor-element-dbbbec7 e-flex e-con-boxed e-con e-parent" data-id="dbbbec7" data-element_type="container" id="offcanvas" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-2c13f58 e-con-full e-flex e-con e-child" data-id="2c13f58" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-0450c7e e-con-full e-flex e-con e-child" data-id="0450c7e" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-f45877b e-con-full e-flex e-con e-child" data-id="f45877b" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-e27f9c9 exad-glass-effect-no elementor-widget elementor-widget-bdt-document-viewer" data-id="e27f9c9" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="bdt-document-viewer.default">
				<div class="elementor-widget-container">
								<div class="bdt-document-viewer">
								<iframe src="https://docs.google.com/viewer?url=https%3A%2F%2Flearn.e-kodama.fr%2Fwp-content%2Fuploads%2F2023%2F10%2FLivret-pedagogique-intervenants_2023-2024_compress.pdf&embedded=true" class="bdt-document"></iframe>
			</div>
							</div>
				</div>
				</div>
				</div>
				</div>
					</div>
				</div>
				</div>
				<div data-elementor-type="popup" data-elementor-id="29648" class="elementor elementor-29648 elementor-location-popup" data-elementor-settings="{"entrance_animation":"rotateIn","exit_animation":"rotateIn","entrance_animation_duration":{"unit":"px","size":0.3,"sizes":[]},"prevent_close_on_background_click":"yes","prevent_close_on_esc_key":"yes","prevent_scroll":"yes","close_automatically":8,"element_pack_global_tooltip_width":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_laptop":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet_extra":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_mobile":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_padding":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"triggers":[],"timing":[]}" data-elementor-post-type="elementor_library">
					<section class="elementor-section elementor-top-section elementor-element elementor-element-351ee90 elementor-section-height-min-height elementor-section-items-stretch elementor-section-boxed elementor-section-height-default exad-glass-effect-no" data-id="351ee90" data-element_type="section" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-47bdd48 exad-glass-effect-no" data-id="47bdd48" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-9c2b970 elementor-align-center exad-glass-effect-no elementor-widget elementor-widget-lottie" data-id="9c2b970" data-element_type="widget" data-settings="{"trigger":"none","loop":"yes","source_json":{"url":"https:\/\/learn.e-kodama.fr\/wp-content\/uploads\/2022\/12\/loader_v2.json","id":37688,"size":"","alt":"","source":"library"},"play_speed":{"unit":"px","size":1.5,"sizes":[]},"source":"media_file","caption_source":"none","link_to":"none","start_point":{"unit":"%","size":0,"sizes":[]},"end_point":{"unit":"%","size":100,"sizes":[]},"renderer":"svg","ekit_we_effect_on":"none"}" data-widget_type="lottie.default">
				<div class="elementor-widget-container">
					<div class="e-lottie__container"><div class="e-lottie__animation"></div></div>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
				<div data-elementor-type="popup" data-elementor-id="28227" class="elementor elementor-28227 elementor-location-popup" data-elementor-settings="{"entrance_animation":"slideInDown","exit_animation":"slideInDown","entrance_animation_duration":{"unit":"px","size":"1","sizes":[]},"avoid_multiple_popups":"yes","classes":"modal_sante","prevent_scroll":"yes","element_pack_global_tooltip_width":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_laptop":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet_extra":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_mobile":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_padding":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"a11y_navigation":"yes","triggers":[],"timing":[]}" data-elementor-post-type="elementor_library">
			<div class="elementor-element elementor-element-c468099 e-con-full e-flex e-con e-parent" data-id="c468099" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-2a39677 e-con-full e-flex e-con e-child" data-id="2a39677" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-9e8e14e e-con-full e-flex e-con e-child" data-id="9e8e14e" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-f678948 e-con-full e-flex e-con e-child" data-id="f678948" data-element_type="container" data-settings="{"background_background":"gradient","ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-4dc01e4 elementor-align-right exad-glass-effect-no elementor-widget elementor-widget-lottie" data-id="4dc01e4" data-element_type="widget" data-settings="{"source_json":{"url":"https:\/\/learn.e-kodama.fr\/wp-content\/uploads\/2022\/12\/health_anim.json","id":33654,"size":"","alt":"","source":"library"},"trigger":"none","source":"media_file","caption_source":"none","link_to":"none","play_speed":{"unit":"px","size":1,"sizes":[]},"start_point":{"unit":"%","size":0,"sizes":[]},"end_point":{"unit":"%","size":100,"sizes":[]},"renderer":"svg","ekit_we_effect_on":"none"}" data-widget_type="lottie.default">
				<div class="elementor-widget-container">
					<div class="e-lottie__container"><div class="e-lottie__animation"></div></div>				</div>
				</div>
				<div class="elementor-element elementor-element-46ef43f exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="46ef43f" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h2 class="elementor-heading-title elementor-size-default">ATTENTION A TA SANTÉ</h2>				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-bc3ec36 e-con-full e-flex e-con e-child" data-id="bc3ec36" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-9b7d9ec e-con-full e-flex e-con e-child" data-id="9b7d9ec" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-ba6ecf3 e-con-full e-flex e-con e-child" data-id="ba6ecf3" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-ba8f2d3 exad-glass-effect-no elementor-widget elementor-widget-heading" data-id="ba8f2d3" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<span class="elementor-heading-title elementor-size-default">Tu ne semble pas avoir bougé depuis</span>				</div>
				</div>
		<div class="elementor-element elementor-element-68f7de4 e-con-full e-flex e-con e-child" data-id="68f7de4" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-ebc6b42 e-con-full e-flex e-con e-child" data-id="ebc6b42" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-857d3fc elementor-widget__width-initial exad-glass-effect-no elementor-widget elementor-widget-image" data-id="857d3fc" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img loading="lazy" width="640" height="640" src="https://learn.e-kodama.fr/wp-content/uploads/2022/12/tasse-a-cafe.gif" class="attachment-full size-full wp-image-341670" alt="" />															</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-7982862 e-con-full e-flex e-con e-child" data-id="7982862" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-2081be4 exad-glass-effect-no elementor-widget elementor-widget-counter" data-id="2081be4" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="counter.default">
				<div class="elementor-widget-container">
							<div class="elementor-counter">
			<div class="elementor-counter-title">MIN</div>			<div class="elementor-counter-number-wrapper">
				<span class="elementor-counter-number-prefix"></span>
				<span class="elementor-counter-number" data-duration="2000" data-to-value="50" data-from-value="0">0</span>
				<span class="elementor-counter-number-suffix"></span>
			</div>
		</div>
						</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-69c7c7e e-con-full e-flex e-con e-child" data-id="69c7c7e" data-element_type="container" data-settings="{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}">
		<div class="elementor-element elementor-element-bfed67e e-con-full e-flex e-con e-child" data-id="bfed67e" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-8dbd48b exad-glass-effect-no elementor-widget elementor-widget-text-editor" data-id="8dbd48b" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>N’hésites pas à lever les yeux , à regarder un peu “au loin” pour les soulager.</p><p>Également, n’hésites pas à t’étirer le cou et le dos en suivant quelques gestes simples.</p>								</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-0a12727 e-con-full e-flex e-con e-child" data-id="0a12727" data-element_type="container" data-settings="{"ekit_has_onepagescroll_dot":"yes"}">
				<div class="elementor-element elementor-element-a8e3b45 exad-glass-effect-no elementor-widget elementor-widget-image" data-id="a8e3b45" data-element_type="widget" data-settings="{"ekit_we_effect_on":"none"}" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img loading="lazy" width="269" height="300" src="https://learn.e-kodama.fr/wp-content/uploads/2022/12/eko_medecins-e1674946145865-269x300.png" class="attachment-medium size-medium wp-image-31450" alt="" srcset="https://learn.e-kodama.fr/wp-content/uploads/2022/12/eko_medecins-e1674946145865-269x300.png 269w, https://learn.e-kodama.fr/wp-content/uploads/2022/12/eko_medecins-e1674946145865-917x1024.png 917w, https://learn.e-kodama.fr/wp-content/uploads/2022/12/eko_medecins-e1674946145865-768x857.png 768w, https://learn.e-kodama.fr/wp-content/uploads/2022/12/eko_medecins-e1674946145865.png 1100w" sizes="(max-width: 269px) 100vw, 269px" />															</div>
				</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-7266f7a exad-glass-effect-no elementor-widget elementor-widget-gallery" data-id="7266f7a" data-element_type="widget" data-settings="{"columns":7,"columns_mobile":5,"gap":{"unit":"px","size":5,"sizes":[]},"gap_mobile":{"unit":"px","size":5,"sizes":[]},"aspect_ratio":"1:1","lazyload":"yes","gallery_layout":"grid","columns_tablet":2,"gap_laptop":{"unit":"px","size":10,"sizes":[]},"gap_tablet_extra":{"unit":"px","size":10,"sizes":[]},"gap_tablet":{"unit":"px","size":10,"sizes":[]},"link_to":"file","overlay_background":"yes","content_hover_animation":"fade-in","ekit_we_effect_on":"none"}" data-widget_type="gallery.default">
				<div class="elementor-widget-container">
							<div class="elementor-gallery__container">
							<a class="e-gallery-item elementor-gallery-item elementor-animated-content" href="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_01.webp" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="7266f7a" data-elementor-lightbox-title="exercice_etirements_01" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6Mjg2OTksInVybCI6Imh0dHBzOlwvXC9sZWFybi5lLWtvZGFtYS5mclwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTJcL2V4ZXJjaWNlX2V0aXJlbWVudHNfMDEud2VicCIsInNsaWRlc2hvdyI6IjcyNjZmN2EifQ%3D%3D">
					<div class="e-gallery-image elementor-gallery-item__image" data-thumbnail="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_01.webp" data-width="300" data-height="275" aria-label="" role="img" ></div>
											<div class="elementor-gallery-item__overlay"></div>
														</a>
							<a class="e-gallery-item elementor-gallery-item elementor-animated-content" href="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_02.webp" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="7266f7a" data-elementor-lightbox-title="exercice_etirements_02" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6Mjg3MDAsInVybCI6Imh0dHBzOlwvXC9sZWFybi5lLWtvZGFtYS5mclwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTJcL2V4ZXJjaWNlX2V0aXJlbWVudHNfMDIud2VicCIsInNsaWRlc2hvdyI6IjcyNjZmN2EifQ%3D%3D">
					<div class="e-gallery-image elementor-gallery-item__image" data-thumbnail="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_02.webp" data-width="300" data-height="275" aria-label="" role="img" ></div>
											<div class="elementor-gallery-item__overlay"></div>
														</a>
							<a class="e-gallery-item elementor-gallery-item elementor-animated-content" href="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_03.webp" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="7266f7a" data-elementor-lightbox-title="exercice_etirements_03" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6Mjg3MDEsInVybCI6Imh0dHBzOlwvXC9sZWFybi5lLWtvZGFtYS5mclwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTJcL2V4ZXJjaWNlX2V0aXJlbWVudHNfMDMud2VicCIsInNsaWRlc2hvdyI6IjcyNjZmN2EifQ%3D%3D">
					<div class="e-gallery-image elementor-gallery-item__image" data-thumbnail="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_03.webp" data-width="300" data-height="275" aria-label="" role="img" ></div>
											<div class="elementor-gallery-item__overlay"></div>
														</a>
							<a class="e-gallery-item elementor-gallery-item elementor-animated-content" href="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_04.webp" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="7266f7a" data-elementor-lightbox-title="exercice_etirements_04" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6Mjg3MDIsInVybCI6Imh0dHBzOlwvXC9sZWFybi5lLWtvZGFtYS5mclwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTJcL2V4ZXJjaWNlX2V0aXJlbWVudHNfMDQud2VicCIsInNsaWRlc2hvdyI6IjcyNjZmN2EifQ%3D%3D">
					<div class="e-gallery-image elementor-gallery-item__image" data-thumbnail="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_04.webp" data-width="300" data-height="275" aria-label="" role="img" ></div>
											<div class="elementor-gallery-item__overlay"></div>
														</a>
							<a class="e-gallery-item elementor-gallery-item elementor-animated-content" href="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_05.webp" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="7266f7a" data-elementor-lightbox-title="exercice_etirements_05" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6Mjg3MDMsInVybCI6Imh0dHBzOlwvXC9sZWFybi5lLWtvZGFtYS5mclwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTJcL2V4ZXJjaWNlX2V0aXJlbWVudHNfMDUud2VicCIsInNsaWRlc2hvdyI6IjcyNjZmN2EifQ%3D%3D">
					<div class="e-gallery-image elementor-gallery-item__image" data-thumbnail="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_05.webp" data-width="300" data-height="275" aria-label="" role="img" ></div>
											<div class="elementor-gallery-item__overlay"></div>
														</a>
							<a class="e-gallery-item elementor-gallery-item elementor-animated-content" href="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_06.webp" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="7266f7a" data-elementor-lightbox-title="exercice_etirements_06" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6Mjg3MDQsInVybCI6Imh0dHBzOlwvXC9sZWFybi5lLWtvZGFtYS5mclwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTJcL2V4ZXJjaWNlX2V0aXJlbWVudHNfMDYud2VicCIsInNsaWRlc2hvdyI6IjcyNjZmN2EifQ%3D%3D">
					<div class="e-gallery-image elementor-gallery-item__image" data-thumbnail="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_06.webp" data-width="300" data-height="275" aria-label="" role="img" ></div>
											<div class="elementor-gallery-item__overlay"></div>
														</a>
							<a class="e-gallery-item elementor-gallery-item elementor-animated-content" href="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_07.webp" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="7266f7a" data-elementor-lightbox-title="exercice_etirements_07" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6Mjg3MDUsInVybCI6Imh0dHBzOlwvXC9sZWFybi5lLWtvZGFtYS5mclwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTJcL2V4ZXJjaWNlX2V0aXJlbWVudHNfMDcud2VicCIsInNsaWRlc2hvdyI6IjcyNjZmN2EifQ%3D%3D">
					<div class="e-gallery-image elementor-gallery-item__image" data-thumbnail="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_07.webp" data-width="300" data-height="275" aria-label="" role="img" ></div>
											<div class="elementor-gallery-item__overlay"></div>
														</a>
							<a class="e-gallery-item elementor-gallery-item elementor-animated-content" href="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_08.webp" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="7266f7a" data-elementor-lightbox-title="exercice_etirements_08" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6Mjg3MDYsInVybCI6Imh0dHBzOlwvXC9sZWFybi5lLWtvZGFtYS5mclwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTJcL2V4ZXJjaWNlX2V0aXJlbWVudHNfMDgud2VicCIsInNsaWRlc2hvdyI6IjcyNjZmN2EifQ%3D%3D">
					<div class="e-gallery-image elementor-gallery-item__image" data-thumbnail="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_08.webp" data-width="300" data-height="275" aria-label="" role="img" ></div>
											<div class="elementor-gallery-item__overlay"></div>
														</a>
							<a class="e-gallery-item elementor-gallery-item elementor-animated-content" href="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_09.webp" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="7266f7a" data-elementor-lightbox-title="exercice_etirements_09" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6Mjg3MDcsInVybCI6Imh0dHBzOlwvXC9sZWFybi5lLWtvZGFtYS5mclwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTJcL2V4ZXJjaWNlX2V0aXJlbWVudHNfMDkud2VicCIsInNsaWRlc2hvdyI6IjcyNjZmN2EifQ%3D%3D">
					<div class="e-gallery-image elementor-gallery-item__image" data-thumbnail="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_09.webp" data-width="300" data-height="275" aria-label="" role="img" ></div>
											<div class="elementor-gallery-item__overlay"></div>
														</a>
							<a class="e-gallery-item elementor-gallery-item elementor-animated-content" href="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_10.webp" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="7266f7a" data-elementor-lightbox-title="exercice_etirements_10" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6Mjg3MDgsInVybCI6Imh0dHBzOlwvXC9sZWFybi5lLWtvZGFtYS5mclwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMlwvMTJcL2V4ZXJjaWNlX2V0aXJlbWVudHNfMTAud2VicCIsInNsaWRlc2hvdyI6IjcyNjZmN2EifQ%3D%3D">
					<div class="e-gallery-image elementor-gallery-item__image" data-thumbnail="https://learn.e-kodama.fr/wp-content/uploads/2022/12/exercice_etirements_10.webp" data-width="300" data-height="275" aria-label="" role="img" ></div>
											<div class="elementor-gallery-item__overlay"></div>
														</a>
					</div>
					</div>
				</div>
				</div>
				</div>
				</div>
				</div>
				</div>
				</div>
				</div>
				<div data-elementor-type="popup" data-elementor-id="27631" class="elementor elementor-27631 elementor-location-popup" data-elementor-settings="{"entrance_animation":"fadeIn","exit_animation":"fadeIn","entrance_animation_duration":{"unit":"px","size":0.5,"sizes":[]},"prevent_close_on_esc_key":"yes","element_pack_global_tooltip_width":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_laptop":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet_extra":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_tablet":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_width_mobile":{"unit":"px","size":"","sizes":[]},"element_pack_global_tooltip_padding":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_padding_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"element_pack_global_tooltip_border_radius_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"a11y_navigation":"yes","triggers":[],"timing":{"devices_devices":["mobile"],"devices":"yes"}}" data-elementor-post-type="elementor_library">
					</div>
		<div class='ha-scroll-to-top-wrap ha-scroll-to-top-hide'><span class='ha-scroll-to-top-button'><i class='fas fa-rocket'></i></span></div>	    
        <div id="mdp-readabler-popup-box" class="mdp-readabler-modal-animation-slide-tr mdp-readabler-modal-fixed  mdp-readabler-modal-shadow  mdp-readabler-non-draggable" aria-hidden="true" data-nosnippet style="display: none">

<div id="mdp-readabler-popup" role="dialog" aria-modal="true" data-start="right" aria-labelledby="mdp-readabler-popup-box">
                <div id="mdp-readabler-popup-header">
                    <span class=mdp-readabler-h3>Accessibilité</span>
                    <button id="mdp-readabler-popup-close" aria-label="Fermer le panneau d'accessibilité"></button>
                </div>
                <div id="mdp-readabler-popup-main">
                    
                    <div class="mdp-readabler-subheader">            <span class="mdp-readabler-h4">Modes d'accessibilité</span>
		</div>

<div id="mdp-readabler-accessibility-profiles-box">        <div id="mdp-readabler-accessibility-profile-epilepsy" class="mdp-readabler-accessibility-profile-item" >
            <div class="mdp-readabler-row">
                <div class="mdp-readabler-switch-box">
                    <label class="mdp-switch" tabindex="0">
	                    Mode sécurisé pour l'épilepsie                        <input type="checkbox" name="mdp-readabler-accessibility-profile-epilepsy" value="on" tabindex="-1">
                        <span class="mdp-slider"></span>
                    </label>
                </div>
                <div class="mdp-readabler-title-box">
                    <div class="mdp-readabler-profile-title">Mode sécurisé pour l'épilepsie</div>
                    <div class="mdp-readabler-profile-short">Atténue la couleur et supprime les clignotements</div>
                </div>
            </div>
            <div class="mdp-readabler-profile-description">Ce mode permet aux personnes épileptiques d'utiliser le site Web en toute sécurité, en éliminant le risque de crises d'épilepsie résultant des animations clignotantes et des combinaisons de couleurs risquées.</div>
        </div>
                <div id="mdp-readabler-accessibility-profile-visually-impaired" class="mdp-readabler-accessibility-profile-item" >
            <div class="mdp-readabler-row">
                <div class="mdp-readabler-switch-box">
                    <label class="mdp-switch" tabindex="0">
	                    Mode malvoyant                        <input type="checkbox" name="mdp-readabler-accessibility-profile-visually-impaired" value="on" tabindex="-1">
                        <span class="mdp-slider"></span>
                    </label>
                </div>
                <div class="mdp-readabler-title-box">
                    <div class="mdp-readabler-profile-title">Mode malvoyant</div>
                    <div class="mdp-readabler-profile-short">Améliore l'aspect visuel du site web</div>
                </div>
            </div>
            <div class="mdp-readabler-profile-description">Ce mode permet d'adapter le site Web aux besoins des utilisateurs souffrant de déficiences visuelles telles que la dégradation de la vue, la vision en tunnel, la cataracte, le glaucome, etc.</div>
        </div>
                <div id="mdp-readabler-accessibility-profile-cognitive-disability" class="mdp-readabler-accessibility-profile-item" >
            <div class="mdp-readabler-row">
                <div class="mdp-readabler-switch-box">
                    <label class="mdp-switch" tabindex="0">
	                    Mode de handicap cognitif                        <input type="checkbox" name="mdp-readabler-accessibility-profile-cognitive-disability" value="on" tabindex="-1">
                        <span class="mdp-slider"></span>
                    </label>
                </div>
                <div class="mdp-readabler-title-box">
                    <div class="mdp-readabler-profile-title">Mode de handicap cognitif</div>
                    <div class="mdp-readabler-profile-short">Aide à se concentrer sur un contenu spécifique</div>
                </div>
            </div>
            <div class="mdp-readabler-profile-description">Ce mode propose différentes options d'assistance pour aider les utilisateurs souffrant de troubles cognitifs tels que la dyslexie, l'autisme, la CVA et autres, à se concentrer plus facilement sur les éléments essentiels du site Web.</div>
        </div>
                <div id="mdp-readabler-accessibility-profile-adhd-friendly" class="mdp-readabler-accessibility-profile-item" >
            <div class="mdp-readabler-row">
                <div class="mdp-readabler-switch-box">
                    <label class="mdp-switch" tabindex="0">
	                    Mode adapté aux TDAH                        <input type="checkbox" name="mdp-readabler-accessibility-profile-adhd-friendly" value="on" tabindex="-1">
                        <span class="mdp-slider"></span>
                    </label>
                </div>
                <div class="mdp-readabler-title-box">
                    <div class="mdp-readabler-profile-title">Mode adapté aux TDAH</div>
                    <div class="mdp-readabler-profile-short">Réduit les distractions et améliore la concentration</div>
                </div>
            </div>
            <div class="mdp-readabler-profile-description">Ce mode aide les utilisateurs souffrant de TDAH et de troubles du développement neurologique à lire, à naviguer et à se concentrer sur les principaux éléments du site Web plus facilement tout en réduisant considérablement les distractions.</div>
        </div>
                <div id="mdp-readabler-accessibility-profile-blind-users" class="mdp-readabler-accessibility-profile-item" >
            <div class="mdp-readabler-row">
                <div class="mdp-readabler-switch-box">
                    <label class="mdp-switch" tabindex="0">
	                    Mode de cécité                        <input type="checkbox" name="mdp-readabler-accessibility-profile-blind-users" value="on" tabindex="-1">
                        <span class="mdp-slider"></span>
                    </label>
                </div>
                <div class="mdp-readabler-title-box">
                    <div class="mdp-readabler-profile-title">Mode de cécité</div>
                    <div class="mdp-readabler-profile-short">Permet d'utiliser le site avec votre lecteur d'écran</div>
                </div>
            </div>
            <div class="mdp-readabler-profile-description">Ce mode configure le site Web pour qu'il soit compatible avec les lecteurs d'écran tels que JAWS, NVDA, VoiceOver et TalkBack. Un lecteur d'écran est un logiciel pour les utilisateurs aveugles qui est installé sur un ordinateur et un smartphone, et les sites web doivent être compatibles avec lui.</div>
        </div>
        </div>
                    <div class="mdp-readabler-subheader">            <span class="mdp-readabler-h4">Dictionnaire en ligne</span>
        </div>

<div id="mdp-readabler-online-dictionary-box">
			<form id="mdp-readabler-online-dictionary-form" enctype="multipart/form-data" action="#" method="POST">
				<input type="text"
				       tabindex="0"
                       id="mdp-readabler-online-dictionary-search"
				       autocomplete="off"
				       placeholder="Cherchez dans le dictionnaire en ligne..."
				       aria-label="Cherchez dans le dictionnaire en ligne...">
                <label for="mdp-readabler-online-dictionary-search">Commencez à taper pour chercher dans Wikipedia</label>
			</form>
            <button tabindex="0" aria-label="Résultats de recherche clairs" id="mdp-readabler-online-dictionary-search-close"></button>
			<div id="mdp-readabler-online-dictionary-search-results-box">
                <ul id="mdp-readabler-online-dictionary-search-results"></ul>
            </div>
		</div>
		
                    <div class="mdp-readabler-subheader">                <span class="mdp-readabler-h4">Une expérience lisible</span>
	        </div><div id="mdp-readabler-readable-experience-box">        <div id="mdp-readabler-action-content-scaling" class="mdp-readabler-action-box mdp-readabler-spinner-box">
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-title">Mise à l'échelle du contenu</span>
            </div>
            <div class="mdp-readabler-input-spinner-box" data-step="5">
                <div class="mdp-readabler-control">
                    <button class="mdp-readabler-plus"
                            tabindex="0"
                            aria-label="Augmenter Taille du contenu" ></button>
                    <div class="mdp-readabler-value" data-value="0" data-default="Défaut">Défaut</div>
                    <button class="mdp-readabler-minus"
                            tabindex="0"
                            aria-label="Diminution Taille du contenu" ></button>
                </div>
            </div>
        </div>
                <div id="mdp-readabler-action-text-magnifier"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Loupe de texte</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-readable-font"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Police de caractères lisible</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-dyslexia-font"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Adapté à la dyslexie</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-highlight-titles"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Titres en surbrillance</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-highlight-links"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Liens en vedette</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-font-sizing" class="mdp-readabler-action-box mdp-readabler-spinner-box">
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-title">Taille de la police</span>
            </div>
            <div class="mdp-readabler-input-spinner-box" data-step="5">
                <div class="mdp-readabler-control">
                    <button class="mdp-readabler-plus"
                            tabindex="0"
                            aria-label="Augmenter Taille de la police" ></button>
                    <div class="mdp-readabler-value" data-value="0" data-default="Défaut">Défaut</div>
                    <button class="mdp-readabler-minus"
                            tabindex="0"
                            aria-label="Diminution Taille de la police" ></button>
                </div>
            </div>
        </div>
                <div id="mdp-readabler-action-line-height" class="mdp-readabler-action-box mdp-readabler-spinner-box">
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-title">Hauteur de la ligne</span>
            </div>
            <div class="mdp-readabler-input-spinner-box" data-step="5">
                <div class="mdp-readabler-control">
                    <button class="mdp-readabler-plus"
                            tabindex="0"
                            aria-label="Augmenter Hauteur de la ligne" ></button>
                    <div class="mdp-readabler-value" data-value="0" data-default="Défaut">Défaut</div>
                    <button class="mdp-readabler-minus"
                            tabindex="0"
                            aria-label="Diminution Hauteur de la ligne" ></button>
                </div>
            </div>
        </div>
                <div id="mdp-readabler-action-letter-spacing" class="mdp-readabler-action-box mdp-readabler-spinner-box">
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-title">Espacement des lettres</span>
            </div>
            <div class="mdp-readabler-input-spinner-box" data-step="5">
                <div class="mdp-readabler-control">
                    <button class="mdp-readabler-plus"
                            tabindex="0"
                            aria-label="Augmenter Espace lettre" ></button>
                    <div class="mdp-readabler-value" data-value="0" data-default="Défaut">Défaut</div>
                    <button class="mdp-readabler-minus"
                            tabindex="0"
                            aria-label="Diminution Espace lettre" ></button>
                </div>
            </div>
        </div>
                <div id="mdp-readabler-action-align-left"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Aligné à gauche</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-align-center"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Centre aligné</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-align-right"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Aligné à droite</span>
            </div>
        </div>
	    </div>
                    <div class="mdp-readabler-subheader">                <span class="mdp-readabler-h4">Une expérience agréable à l'œil</span>
		    </div><div id="mdp-readabler-visually-pleasing-experience-box">        <div id="mdp-readabler-action-dark-contrast"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Contraste foncé</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-light-contrast"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Contraste de la lumière</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-monochrome"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Monochrome</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-high-contrast"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Contraste élevé</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-high-saturation"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Saturation élevée</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-low-saturation"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Faible saturation</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-text-colors" class="mdp-readabler-action-box mdp-readabler-palette-box">
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-title">Ajuster les couleurs du texte</span>
                <div class="mdp-readabler-color-box">
                                            <span data-color="maroon"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enMarron"
                              style="background-color: maroon !important;">
                        </span>
                                            <span data-color="red"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enRouge"
                              style="background-color: red !important;">
                        </span>
                                            <span data-color="orange"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enOrange"
                              style="background-color: orange !important;">
                        </span>
                                            <span data-color="yellow"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enJaune"
                              style="background-color: yellow !important;">
                        </span>
                                            <span data-color="olive"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enOlive"
                              style="background-color: olive !important;">
                        </span>
                                            <span data-color="green"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enVert"
                              style="background-color: green !important;">
                        </span>
                                            <span data-color="purple"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enViolet"
                              style="background-color: purple !important;">
                        </span>
                                            <span data-color="fuchsia"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enFuchsia"
                              style="background-color: fuchsia !important;">
                        </span>
                                            <span data-color="lime"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enLime"
                              style="background-color: lime !important;">
                        </span>
                                            <span data-color="teal"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enSarcelle"
                              style="background-color: teal !important;">
                        </span>
                                            <span data-color="aqua"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enAqua"
                              style="background-color: aqua !important;">
                        </span>
                                            <span data-color="blue"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enBleu"
                              style="background-color: blue !important;">
                        </span>
                                            <span data-color="navy"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enMarine"
                              style="background-color: navy !important;">
                        </span>
                                            <span data-color="black"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enNoir"
                              style="background-color: black !important;">
                        </span>
                                            <span data-color="white"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enBlanc"
                              style="background-color: white !important;">
                        </span>
                                    </div>
            </div>
        </div>
	            <div id="mdp-readabler-action-title-colors" class="mdp-readabler-action-box mdp-readabler-palette-box">
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-title">Ajuster les couleurs du titre</span>
                <div class="mdp-readabler-color-box">
                                            <span data-color="maroon"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enMarron"
                              style="background-color: maroon !important;">
                        </span>
                                            <span data-color="red"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enRouge"
                              style="background-color: red !important;">
                        </span>
                                            <span data-color="orange"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enOrange"
                              style="background-color: orange !important;">
                        </span>
                                            <span data-color="yellow"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enJaune"
                              style="background-color: yellow !important;">
                        </span>
                                            <span data-color="olive"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enOlive"
                              style="background-color: olive !important;">
                        </span>
                                            <span data-color="green"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enVert"
                              style="background-color: green !important;">
                        </span>
                                            <span data-color="purple"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enViolet"
                              style="background-color: purple !important;">
                        </span>
                                            <span data-color="fuchsia"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enFuchsia"
                              style="background-color: fuchsia !important;">
                        </span>
                                            <span data-color="lime"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enLime"
                              style="background-color: lime !important;">
                        </span>
                                            <span data-color="teal"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enSarcelle"
                              style="background-color: teal !important;">
                        </span>
                                            <span data-color="aqua"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enAqua"
                              style="background-color: aqua !important;">
                        </span>
                                            <span data-color="blue"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enBleu"
                              style="background-color: blue !important;">
                        </span>
                                            <span data-color="navy"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enMarine"
                              style="background-color: navy !important;">
                        </span>
                                            <span data-color="black"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enNoir"
                              style="background-color: black !important;">
                        </span>
                                            <span data-color="white"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enBlanc"
                              style="background-color: white !important;">
                        </span>
                                    </div>
            </div>
        </div>
	            <div id="mdp-readabler-action-background-colors" class="mdp-readabler-action-box mdp-readabler-palette-box">
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-title">Ajuster les couleurs d'arrière-plan</span>
                <div class="mdp-readabler-color-box">
                                            <span data-color="maroon"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enMarron"
                              style="background-color: maroon !important;">
                        </span>
                                            <span data-color="red"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enRouge"
                              style="background-color: red !important;">
                        </span>
                                            <span data-color="orange"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enOrange"
                              style="background-color: orange !important;">
                        </span>
                                            <span data-color="yellow"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enJaune"
                              style="background-color: yellow !important;">
                        </span>
                                            <span data-color="olive"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enOlive"
                              style="background-color: olive !important;">
                        </span>
                                            <span data-color="green"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enVert"
                              style="background-color: green !important;">
                        </span>
                                            <span data-color="purple"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enViolet"
                              style="background-color: purple !important;">
                        </span>
                                            <span data-color="fuchsia"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enFuchsia"
                              style="background-color: fuchsia !important;">
                        </span>
                                            <span data-color="lime"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enLime"
                              style="background-color: lime !important;">
                        </span>
                                            <span data-color="teal"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enSarcelle"
                              style="background-color: teal !important;">
                        </span>
                                            <span data-color="aqua"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enAqua"
                              style="background-color: aqua !important;">
                        </span>
                                            <span data-color="blue"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enBleu"
                              style="background-color: blue !important;">
                        </span>
                                            <span data-color="navy"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enMarine"
                              style="background-color: navy !important;">
                        </span>
                                            <span data-color="black"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enNoir"
                              style="background-color: black !important;">
                        </span>
                                            <span data-color="white"
                              class="mdp-readabler-color "
                              role="button"
                              tabindex="0"
                              aria-label="Changer la couleur enBlanc"
                              style="background-color: white !important;">
                        </span>
                                    </div>
            </div>
        </div>
	    </div>
                    <div class="mdp-readabler-subheader">                <span class="mdp-readabler-h4">Orientation facile</span>
		    </div><div id="mdp-readabler-easy-orientation-box">        <div id="mdp-readabler-action-mute-sounds"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Couper les sons</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-hide-images"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Cacher les images</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-hide-emoji"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Masquer les emojis</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-reading-guide"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Guide de lecture</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-stop-animations"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Arrêter les animations</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-reading-mask"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Masque de lecture</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-highlight-hover"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Mise en évidence du survol</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-highlight-focus"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Mise en évidence</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-big-black-cursor"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Grand curseur sombre</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-big-white-cursor"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Grand curseur lumineux</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-cognitive-reading"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Lecture cognitive</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-virtual-keyboard"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Clavier virtuel</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-keyboard-navigation"
             class="mdp-readabler-action-box mdp-readabler-toggle-box"
             tabindex="0"            role="button"
        >
            <div class="mdp-readabler-action-box-content">
                <span class="mdp-readabler-icon"></span>
                <span class="mdp-readabler-title">Touches de navigation</span>
            </div>
        </div>
	            <div id="mdp-readabler-action-useful-links" class="mdp-readabler-action-box mdp-readabler-useful-links-box">
            <div class="mdp-readabler-action-box-content">
                <label for="mdp-readabler-useful-links" class="mdp-readabler-title">Navigateur de liens</label>
                <div class="mdp-readabler-select-box">
                    <select id="mdp-readabler-useful-links" aria-label="Liens utiles" autocomplete="on">
                        <option selected="" disabled="" value="mdp-default">
                            Sélectionnez une option                        </option>
                    </select>
                </div>
            </div>
        </div>
	    </div>
                </div>
                <div id="mdp-readabler-popup-footer">
                                        <button id="mdp-readabler-reset-btn" aria-label="Réinitialiser les paramètres">
                        <span>Réinitialiser les paramètres</span>
                    </button>
                    	                                    <p class="mdp-readabler-statement">
					<span>EKOLEARN</span> <a href="https://learn.e-kodama.fr/declaration-daccessibilite" aria-label="Déclaration d'accessibilité" target="_blank" rel="noopener">Déclaration d'accessibilité</a>
				</p>                </div>
                        <div id="mdp-readabler-accessibility-statement-box">
            <button id="mdp-readabler-close-statement-btn" aria-label="Fermer Déclaration d'accessibilité"></button>
            <div class="mdp-readabler-statement-content"><header>
<h2>Accessibility Statement</h2>
<ul>
<li>learn.e-kodama.fr</li>
<li>23/05/2026</li>
</ul>
</header>
<h3>Compliance status</h3>
<p>We firmly believe that the internet should be available and accessible to anyone, and are committed to providing a website that is accessible to the widest possible audience, regardless of circumstance and ability. To fulfill this, we aim to adhere as strictly as possible to the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines 2.1 (WCAG 2.1) at the AA level. These guidelines explain how to make web content accessible to people with a wide array of disabilities. Complying with those guidelines helps us ensure that the website is accessible to all people: blind people, people with motor impairments, visual impairment, cognitive disabilities, and more. This website utilizes various technologies that are meant to make it as accessible as possible at all times. We utilize an accessibility interface that allows persons with specific disabilities to adjust the website’s UI (user interface) and design it to their personal needs. Additionally, the website utilizes an AI-based application that runs in the background and optimizes its accessibility level constantly. This application remediates the website’s HTML, adapts Its functionality and behavior for screen-readers used by the blind users, and for keyboard functions used by individuals with motor impairments. If you’ve found a malfunction or have ideas for improvement, we’ll be happy to hear from you. You can reach out to the website’s operators by using the following email ekodama.fr@gmail.com</p>
<h3>Screen-reader and keyboard navigation</h3>
<p>Our website implements the ARIA attributes (Accessible Rich Internet Applications) technique, alongside various different behavioral changes, to ensure blind users visiting with screen-readers are able to read, comprehend, and enjoy the website’s functions. As soon as a user with a screen-reader enters your site, they immediately receive a prompt to enter the Screen-Reader Profile so they can browse and operate your site effectively. Here’s how our website covers some of the most important screen-reader requirements, alongside console screenshots of code examples:</p>
<ol>
<li><strong>Screen-reader optimization: </strong>we run a background process that learns the website’s components from top to bottom, to ensure ongoing compliance even when updating the website. In this process, we provide screen-readers with meaningful data using the ARIA set of attributes. For example, we provide accurate form labels; descriptions for actionable icons (social media icons, search icons, cart icons, etc.); validation guidance for form inputs; element roles such as buttons, menus, modal dialogues (popups), and others. Additionally, the background process scans all of the website’s images and provides an accurate and meaningful image-object-recognition-based description as an ALT (alternate text) tag for images that are not described. It will also extract texts that are embedded within the image, using an OCR (optical character recognition) technology. To turn on screen-reader adjustments at any time, users need only to press the Alt+1 keyboard combination. Screen-reader users also get automatic announcements to turn the Screen-reader mode on as soon as they enter the website. These adjustments are compatible with all popular screen readers, including JAWS and NVDA.</li>
<li><strong>Keyboard navigation optimization: </strong>The background process also adjusts the website’s HTML, and adds various behaviors using JavaScript code to make the website operable by the keyboard. This includes the ability to navigate the website using the Tab and Shift+Tab keys, operate dropdowns with the arrow keys, close them with Esc, trigger buttons and links using the Enter key, navigate between radio and checkbox elements using the arrow keys, and fill them in with the Spacebar or Enter key.Additionally, keyboard users will find quick-navigation and content-skip menus, available at any time by clicking Alt+1, or as the first elements of the site while navigating with the keyboard. The background process also handles triggered popups by moving the keyboard focus towards them as soon as they appear, and not allow the focus drift outside of it. Users can also use shortcuts such as “M” (menus), “H” (headings), “F” (forms), “B” (buttons), and “G” (graphics) to jump to specific elements.</li>
</ol>
<h3>Disability profiles supported in our website</h3>
<ul>
<li><strong>Epilepsy Safe Mode:</strong> this profile enables people with epilepsy to use the website safely by eliminating the risk of seizures that result from flashing or blinking animations and risky color combinations.</li>
<li><strong>Visually Impaired Mode:</strong> this mode adjusts the website for the convenience of users with visual impairments such as Degrading Eyesight, Tunnel Vision, Cataract, Glaucoma, and others.</li>
<li><strong>Cognitive Disability Mode:</strong> this mode provides different assistive options to help users with cognitive impairments such as Dyslexia, Autism, CVA, and others, to focus on the essential elements of the website more easily.</li>
<li><strong>ADHD Friendly Mode:</strong> this mode helps users with ADHD and Neurodevelopmental disorders to read, browse, and focus on the main website elements more easily while significantly reducing distractions.</li>
<li><strong>Blindness Mode:</strong> this mode configures the website to be compatible with screen-readers such as JAWS, NVDA, VoiceOver, and TalkBack. A screen-reader is software for blind users that is installed on a computer and smartphone, and websites must be compatible with it.</li>
<li><strong>Keyboard Navigation Profile (Motor-Impaired):</strong> this profile enables motor-impaired persons to operate the website using the keyboard Tab, Shift+Tab, and the Enter keys. Users can also use shortcuts such as “M” (menus), “H” (headings), “F” (forms), “B” (buttons), and “G” (graphics) to jump to specific elements.</li>
</ul>
<h3>Additional UI, design, and readability adjustments</h3>
<ol>
<li><strong>Font adjustments –</strong> users, can increase and decrease its size, change its family (type), adjust the spacing, alignment, line height, and more.</li>
<li><strong>Color adjustments –</strong> users can select various color contrast profiles such as light, dark, inverted, and monochrome. Additionally, users can swap color schemes of titles, texts, and backgrounds, with over 7 different coloring options.</li>
<li><strong>Animations –</strong> epileptic users can stop all running animations with the click of a button. Animations controlled by the interface include videos, GIFs, and CSS flashing transitions.</li>
<li><strong>Content highlighting –</strong> users can choose to emphasize important elements such as links and titles. They can also choose to highlight focused or hovered elements only.</li>
<li><strong>Audio muting –</strong> users with hearing devices may experience headaches or other issues due to automatic audio playing. This option lets users mute the entire website instantly.</li>
<li><strong>Cognitive disorders –</strong> we utilize a search engine that is linked to Wikipedia and Wiktionary, allowing people with cognitive disorders to decipher meanings of phrases, initials, slang, and others.</li>
<li><strong>Additional functions –</strong> we provide users the option to change cursor color and size, use a printing mode, enable a virtual keyboard, and many other functions.</li>
</ol>
<h3>Browser and assistive technology compatibility</h3>
<p>We aim to support the widest array of browsers and assistive technologies as possible, so our users can choose the best fitting tools for them, with as few limitations as possible. Therefore, we have worked very hard to be able to support all major systems that comprise over 95% of the user market share including Google Chrome, Mozilla Firefox, Apple Safari, Opera and Microsoft Edge, JAWS and NVDA (screen readers), both for Windows and for MAC users.</p>
<h3>Notes, comments, and feedback</h3>
<p>Despite our very best efforts to allow anybody to adjust the website to their needs, there may still be pages or sections that are not fully accessible, are in the process of becoming accessible, or are lacking an adequate technological solution to make them accessible. Still, we are continually improving our accessibility, adding, updating and improving its options and features, and developing and adopting new technologies. All this is meant to reach the optimal level of accessibility, following technological advancements. For any assistance, please reach out to ekodama.fr@gmail.com</p></div>        </div>
                    </div>

</div>
                    <div data-rocket-location-hash="40b4e2d666c83b23c485ecc4fd7a2d73" id="mdp-readabler-keyboard-box">
                <div data-rocket-location-hash="eb956af14ca79e9b9c6f092d9f7b3ed4" class="simple-keyboard"></div>
            </div>
        	    
	    <style></style>			<script>
				const lazyloadRunObserver = () => {
					const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
					const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
						entries.forEach( ( entry ) => {
							if ( entry.isIntersecting ) {
								let lazyloadBackground = entry.target;
								if( lazyloadBackground ) {
									lazyloadBackground.classList.add( 'e-lazyloaded' );
								}
								lazyloadBackgroundObserver.unobserve( entry.target );
							}
						});
					}, { rootMargin: '200px 0px 200px 0px' } );
					lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
						lazyloadBackgroundObserver.observe( lazyloadBackground );
					} );
				};
				const events = [
					'DOMContentLoaded',
					'elementor/lazyload/observe',
				];
				events.forEach( ( event ) => {
					document.addEventListener( event, lazyloadRunObserver );
				} );
			</script>

//# sourceURL=rocket-preload-links-js-after
/* ]]> */
</script>
<script type="text/javascript" src="https://learn.e-kodama.fr/wp-content/plugins/3d-flipbook-dflip-lite/assets/js/dflip.min.js?ver=2.4.27" id="dflip-script-js"></script>
<script type="text/javascript" src="https://learn.e-kodama.fr/wp-content/plugins/elementor-pro/assets/lib/lottie/lottie.min.js?ver=5.6.6" id="lottie-js"></script>
<script data-minify="1" type="text/javascript" src="https://learn.e-kodama.fr/wp-content/cache/min/1/wp-content/plugins/mycred/assets/libs/jquery-numerator.js?ver=1776606919" id="jquery-numerator-js"></script>
<script type="text/javascript" src="https://learn.e-kodama.fr/wp-content/plugins/elementor/assets/lib/swiper/v8/swiper.min.js?ver=8.4.5" id="swiper-js"></script>
<script type="text/javascript" src="https://learn.e-kodama.fr/wp-content/plugins/elementor/assets/lib/e-gallery/js/e-gallery.min.js?ver=1.2.0" id="elementor-gallery-js"></script>
<script type="text/javascript" id="eael-general-js-extra">
/* <![CDATA[ */
var localize = {"ajaxurl":"https://learn.e-kodama.fr/wp-admin/admin-ajax.php","nonce":"c88c4ac73e","i18n":{"added":"Ajout\u00e9","compare":"Comparez","loading":"Chargement..."},"eael_translate_text":{"required_text":"is a required field","invalid_text":"Invalid","billing_text":"Billing","shipping_text":"Exp\u00e9dition","fg_mfp_counter_text":"of"},"page_permalink":"https://learn.e-kodama.fr/cours/01-la-semantique-html/","cart_redirectition":"","cart_page_url":"","el_breakpoints":{"mobile":{"label":"Portrait mobile","value":640,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Paysage","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablette en mode portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablette en mode paysage","value":1200,"default_value":1200,"direction":"max","is_enabled":true},"laptop":{"label":"Portable","value":1366,"default_value":1366,"direction":"max","is_enabled":true},"widescreen":{"label":"\u00c9cran large","value":2400,"default_value":2400,"direction":"min","is_enabled":false}},"ParticleThemesData":{"default":"{\"particles\":{\"number\":{\"value\":160,\"density\":{\"enable\":true,\"value_area\":800}},\"color\":{\"value\":\"#ffffff\"},\"shape\":{\"type\":\"circle\",\"stroke\":{\"width\":0,\"color\":\"#000000\"},\"polygon\":{\"nb_sides\":5},\"image\":{\"src\":\"img/github.svg\",\"width\":100,\"height\":100}},\"opacity\":{\"value\":0.5,\"random\":false,\"anim\":{\"enable\":false,\"speed\":1,\"opacity_min\":0.1,\"sync\":false}},\"size\":{\"value\":3,\"random\":true,\"anim\":{\"enable\":false,\"speed\":40,\"size_min\":0.1,\"sync\":false}},\"line_linked\":{\"enable\":true,\"distance\":150,\"color\":\"#ffffff\",\"opacity\":0.4,\"width\":1},\"move\":{\"enable\":true,\"speed\":6,\"direction\":\"none\",\"random\":false,\"straight\":false,\"out_mode\":\"out\",\"bounce\":false,\"attract\":{\"enable\":false,\"rotateX\":600,\"rotateY\":1200}}},\"interactivity\":{\"detect_on\":\"canvas\",\"events\":{\"onhover\":{\"enable\":true,\"mode\":\"repulse\"},\"onclick\":{\"enable\":true,\"mode\":\"push\"},\"resize\":true},\"modes\":{\"grab\":{\"distance\":400,\"line_linked\":{\"opacity\":1}},\"bubble\":{\"distance\":400,\"size\":40,\"duration\":2,\"opacity\":8,\"speed\":3},\"repulse\":{\"distance\":200,\"duration\":0.4},\"push\":{\"particles_nb\":4},\"remove\":{\"particles_nb\":2}}},\"retina_detect\":true}","nasa":"{\"particles\":{\"number\":{\"value\":250,\"density\":{\"enable\":true,\"value_area\":800}},\"color\":{\"value\":\"#ffffff\"},\"shape\":{\"type\":\"circle\",\"stroke\":{\"width\":0,\"color\":\"#000000\"},\"polygon\":{\"nb_sides\":5},\"image\":{\"src\":\"img/github.svg\",\"width\":100,\"height\":100}},\"opacity\":{\"value\":1,\"random\":true,\"anim\":{\"enable\":true,\"speed\":1,\"opacity_min\":0,\"sync\":false}},\"size\":{\"value\":3,\"random\":true,\"anim\":{\"enable\":false,\"speed\":4,\"size_min\":0.3,\"sync\":false}},\"line_linked\":{\"enable\":false,\"distance\":150,\"color\":\"#ffffff\",\"opacity\":0.4,\"width\":1},\"move\":{\"enable\":true,\"speed\":1,\"direction\":\"none\",\"random\":true,\"straight\":false,\"out_mode\":\"out\",\"bounce\":false,\"attract\":{\"enable\":false,\"rotateX\":600,\"rotateY\":600}}},\"interactivity\":{\"detect_on\":\"canvas\",\"events\":{\"onhover\":{\"enable\":true,\"mode\":\"bubble\"},\"onclick\":{\"enable\":true,\"mode\":\"repulse\"},\"resize\":true},\"modes\":{\"grab\":{\"distance\":400,\"line_linked\":{\"opacity\":1}},\"bubble\":{\"distance\":250,\"size\":0,\"duration\":2,\"opacity\":0,\"speed\":3},\"repulse\":{\"distance\":400,\"duration\":0.4},\"push\":{\"particles_nb\":4},\"remove\":{\"particles_nb\":2}}},\"retina_detect\":true}","bubble":"{\"particles\":{\"number\":{\"value\":15,\"density\":{\"enable\":true,\"value_area\":800}},\"color\":{\"value\":\"#1b1e34\"},\"shape\":{\"type\":\"polygon\",\"stroke\":{\"width\":0,\"color\":\"#000\"},\"polygon\":{\"nb_sides\":6},\"image\":{\"src\":\"img/github.svg\",\"width\":100,\"height\":100}},\"opacity\":{\"value\":0.3,\"random\":true,\"anim\":{\"enable\":false,\"speed\":1,\"opacity_min\":0.1,\"sync\":false}},\"size\":{\"value\":50,\"random\":false,\"anim\":{\"enable\":true,\"speed\":10,\"size_min\":40,\"sync\":false}},\"line_linked\":{\"enable\":false,\"distance\":200,\"color\":\"#ffffff\",\"opacity\":1,\"width\":2},\"move\":{\"enable\":true,\"speed\":8,\"direction\":\"none\",\"random\":false,\"straight\":false,\"out_mode\":\"out\",\"bounce\":false,\"attract\":{\"enable\":false,\"rotateX\":600,\"rotateY\":1200}}},\"interactivity\":{\"detect_on\":\"canvas\",\"events\":{\"onhover\":{\"enable\":false,\"mode\":\"grab\"},\"onclick\":{\"enable\":false,\"mode\":\"push\"},\"resize\":true},\"modes\":{\"grab\":{\"distance\":400,\"line_linked\":{\"opacity\":1}},\"bubble\":{\"distance\":400,\"size\":40,\"duration\":2,\"opacity\":8,\"speed\":3},\"repulse\":{\"distance\":200,\"duration\":0.4},\"push\":{\"particles_nb\":4},\"remove\":{\"particles_nb\":2}}},\"retina_detect\":true}","snow":"{\"particles\":{\"number\":{\"value\":450,\"density\":{\"enable\":true,\"value_area\":800}},\"color\":{\"value\":\"#fff\"},\"shape\":{\"type\":\"circle\",\"stroke\":{\"width\":0,\"color\":\"#000000\"},\"polygon\":{\"nb_sides\":5},\"image\":{\"src\":\"img/github.svg\",\"width\":100,\"height\":100}},\"opacity\":{\"value\":0.5,\"random\":true,\"anim\":{\"enable\":false,\"speed\":1,\"opacity_min\":0.1,\"sync\":false}},\"size\":{\"value\":5,\"random\":true,\"anim\":{\"enable\":false,\"speed\":40,\"size_min\":0.1,\"sync\":false}},\"line_linked\":{\"enable\":false,\"distance\":500,\"color\":\"#ffffff\",\"opacity\":0.4,\"width\":2},\"move\":{\"enable\":true,\"speed\":6,\"direction\":\"bottom\",\"random\":false,\"straight\":false,\"out_mode\":\"out\",\"bounce\":false,\"attract\":{\"enable\":false,\"rotateX\":600,\"rotateY\":1200}}},\"interactivity\":{\"detect_on\":\"canvas\",\"events\":{\"onhover\":{\"enable\":true,\"mode\":\"bubble\"},\"onclick\":{\"enable\":true,\"mode\":\"repulse\"},\"resize\":true},\"modes\":{\"grab\":{\"distance\":400,\"line_linked\":{\"opacity\":0.5}},\"bubble\":{\"distance\":400,\"size\":4,\"duration\":0.3,\"opacity\":1,\"speed\":3},\"repulse\":{\"distance\":200,\"duration\":0.4},\"push\":{\"particles_nb\":4},\"remove\":{\"particles_nb\":2}}},\"retina_detect\":true}","nyan_cat":"{\"particles\":{\"number\":{\"value\":150,\"density\":{\"enable\":false,\"value_area\":800}},\"color\":{\"value\":\"#ffffff\"},\"shape\":{\"type\":\"star\",\"stroke\":{\"width\":0,\"color\":\"#000000\"},\"polygon\":{\"nb_sides\":5},\"image\":{\"src\":\"http://wiki.lexisnexis.com/academic/images/f/fb/Itunes_podcast_icon_300.jpg\",\"width\":100,\"height\":100}},\"opacity\":{\"value\":0.5,\"random\":false,\"anim\":{\"enable\":false,\"speed\":1,\"opacity_min\":0.1,\"sync\":false}},\"size\":{\"value\":4,\"random\":true,\"anim\":{\"enable\":false,\"speed\":40,\"size_min\":0.1,\"sync\":false}},\"line_linked\":{\"enable\":false,\"distance\":150,\"color\":\"#ffffff\",\"opacity\":0.4,\"width\":1},\"move\":{\"enable\":true,\"speed\":14,\"direction\":\"left\",\"random\":false,\"straight\":true,\"out_mode\":\"out\",\"bounce\":false,\"attract\":{\"enable\":false,\"rotateX\":600,\"rotateY\":1200}}},\"interactivity\":{\"detect_on\":\"canvas\",\"events\":{\"onhover\":{\"enable\":false,\"mode\":\"grab\"},\"onclick\":{\"enable\":true,\"mode\":\"repulse\"},\"resize\":true},\"modes\":{\"grab\":{\"distance\":200,\"line_linked\":{\"opacity\":1}},\"bubble\":{\"distance\":400,\"size\":40,\"duration\":2,\"opacity\":8,\"speed\":3},\"repulse\":{\"distance\":200,\"duration\":0.4},\"push\":{\"particles_nb\":4},\"remove\":{\"particles_nb\":2}}},\"retina_detect\":true}"},"eael_login_nonce":"a5cc6effe2","eael_register_nonce":"3c8c97e256","eael_lostpassword_nonce":"bb5119a914","eael_resetpassword_nonce":"04a041ad52"};
//# sourceURL=eael-general-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://learn.e-kodama.fr/wp-content/plugins/essential-addons-for-elementor-lite/assets/front-end/js/view/general.min.js?ver=6.6.2" id="eael-general-js"></script>

/** 
    * LISTENER
    * **/
		//A chaque bouton ayant un href "http" et dont le target différent de "blank" (demandant un chargement de page dans le même onglet) on affiche le loader
		jQuery('a').each(function() {
			jQuery(this).click(function(event) {
				var attribut = jQuery(this).attr('href');
				var classe = jQuery(this).attr('class');
				var isTargetBlank = jQuery(this).attr('target');
				var entete = attribut.substr(0, 4);
				if (!attribut.indexOf('wp-content')) {
					if (entete === 'http' && !isTargetBlank && classe != "pg-open-lightbox") {
						showLoader();
					}
				}
			});
		});

jQuery('.changeAvatar').click(function() {
			uwp_profile_image_change('avatar');
			return false;
		});

jQuery('#zindex_def').click(function() {
			jQuery('#z1,#z2,#z3').css('z-index', 'unset');
			RaZ();
			jQuery('#z1_exp').show();
		});

jQuery('#zindex_deux').click(function() {
			jQuery('#z1').css('z-index', '9999');
			jQuery('#z2').css('z-index', '0');
			jQuery('#z3').css('z-index', '-1');
			RaZ();
			jQuery('#z2_exp').show();
		});

jQuery('#zindex_trois').click(function() {
			jQuery('#z1').css('z-index', '9999');
			jQuery('#z2,#z3').css('z-index', '0');
			RaZ();
			jQuery('#z3_exp').show();
		});

// Au clic sur l'élément
		jQuery("div.mwai-input > button").click(function() {
			setTimeout(function() {
				pic_chat_bot(1);
			}, 500);
		});
		jQuery('.mwai-input-text>textarea').on('keydown', function(event) {
			// Vérifiez si la touche enfoncée est "Entrée" (key code 13)
			if (event.keyCode === 13) {
				// Insérez ici le code que vous souhaitez exécuter lorsque l'utilisateur appuie sur "Entrée" dans la textarea
				if (jQuery(this).val().trim() !== '') {
					setTimeout(function() {
						pic_chat_bot(1);
					}, 500);
				}
			}
		});

jQuery('#form-field-filecsv').change(function() {
                var fileName = jQuery(this).val().split('\\').pop();
								jQuery('.elementor-field-type-upload p').addClass('libelleFichier');
								//jQuery('.elementor-field-type-upload i').addClass('supprFichier');
								if (fileName) {		
											jQuery('.libelleFichier').text('Fichier sélectionné : ' + fileName);
											//jQuery('.supprFichier').html('<i aria-hidden="true" class="hm hm-cross-circle"></i>');
									} else {
											jQuery('.libelleFichier').text('Aucun fichier sélectionné');
									}
            });
		
		/* Substring les titres dans les cartes de l'accueil */
		jQuery('.elementor-element-5190ded h2').each(function() {
			var titreSpan = jQuery.trim(jQuery(this).text());
			var tiretSpan = titreSpan.indexOf('|');
			var showtitrespan = titreSpan.substr(tiretSpan+1);
			jQuery(this).html(showtitrespan);
		});
		
		/** 
         * FUNCTIONS
         * **/	
		function pic_chat_bot(event_keypress){
			if(event_keypress == 1){
				var derniersElements = jQuery('.mwai-reply').slice(-2);
				var user_elem = derniersElements[0];
				var ai_elem = derniersElements[1];

jQuery(user_elem).find('.mwai-name').html('<img src="https://learn.e-kodama.fr/wp-content/uploads/2023/07/chat_user-e1690363150405.png">');		
				jQuery(ai_elem).find('.mwai-name').html('<img src="https://learn.e-kodama.fr/wp-content/uploads/2022/11/eko_question_showbtn-e1677868972266.png">');		
			}
		}
		//Ajoute une icône de flèche aux liens internes
		function linkButton() {
			jQuery('.linkBtn').each(function() {
				var valuebtn = jQuery.trim(jQuery(this).text());
				var icon = '<i aria-hidden=\'true\' class=\'material-icons  md-arrow_right_alt\' data-md-icon=\'arrow_right_alt\' style=\'font-size: 1.6rem;margin: 0 1rem;\'></i>';
				jQuery(this).find('span').html(valuebtn + icon);
			});
		}
		//Ajoute une icône de check aux liens de l'onglet Mon Suivi du Dashboard
		function validateButton() {
			jQuery('#suivi-canva .um_user_form > .um_button').each(function() {
				var valuebtn = jQuery.trim(jQuery(this).val());
				var icon = '<i aria-hidden=\'true\' class=\'material-icons  md-arrow_right_alt\' data-md-icon=\'arrow_right_alt\' style=\'font-size: 1.6rem;margin: 0 1rem;\'></i>';
				jQuery(this).html(valuebtn + icon);
			});
		}
		//Ajoute une icône de lien aux liens externes
		function extButton() {
			jQuery('.extBtn').each(function() {
				var valuebtn = jQuery.trim(jQuery(this).text());
				var icon = '<i aria-hidden=\'true\' class=\'material-icons  md-link\' data-md-icon=\'link\' style=\'font-size: 1.6rem;margin: 0 1rem;\'></i>';
				jQuery(this).find('span').html(valuebtn + icon);
			});
		}
		//Ajoute une icône de connexion aux liens de connexions
		function cnxButton() {
			jQuery('.cnxBtn').each(function() {
				var valuebtn = '';
				var icon = '<i aria-hidden=\'true\' class=\'material-icons  md-login\' data-md-icon=\'login\' style=\'font-size: 1.6rem;margin: 0 1rem;\'></i>';
				if (jQuery(this).add('a').hasClass('bdt-ep-creative-button--pandora')) {
					valuebtn = jQuery.trim(jQuery(this).text());
					jQuery('.cnxBtn .bdt-ep-creative-button--pandora>span').html(icon + valuebtn);
				} else {
					valuebtn = jQuery.trim(jQuery('button .elementor-button-text').text());
					jQuery('.cnxBtn .elementor-button-text').html(icon + valuebtn);
				}
			});
		}

//Fonction appelée via le clic d'un élément ayant une certaine class (linkBtn)
		function showLoader() {
			elementorProFrontend.modules.popup.showPopup({
				id: 29648
			}, event);
		}
		
		jQuery(window).on('elementor/popup/show', function(event, id) { 		
    	if (id == 6739) { 
				var spanElement = jQuery.trim(jQuery('#name_account').text());					
				jQuery("[name='postdata-1-post-title']").val(spanElement);
    	}
		});

//Au cas ou on rajoute un evenement de fermeture de la popup à la fin du chargement de n'importe quelle page
		function hideLoader() {
			var popup = document.getElementById("elementor-29648");
			if (popup != null) {
				popup.remove();
			}
		}
		
		function breakLines(texte){
			 var texteModifie = texte.replace(/\./g, '.<br /><br />');
    	jQuery("#text_presentation").html(texteModifie);
		}
		
		
		//Remplace la balise <a> du sélecteur passé en paramètre par un <button> , et ajoute un tabindex 1 si isTabIndex = 1
		function replaceByButtons(nodeClass,isTabIndex){
        //Remplace les liens par des balises boutons (a11y)
        jQuery('.'+nodeClass).replaceWith(function () {
                return jQuery('<button/>', {
                        class: 'outline ' + nodeClass,
                        html: this.innerHTML
                });
        });
        if(isTabIndex == 1){
                //Rajoute l'attribut tabindex si besoin, pour permettre le ciblage avec la touche Tabulation (a11y)
                jQuery('.'+nodeClass).attr('tabindex','1');
        }
    }
    
    function replaceByDiv(nodeClass,isTabIndex){
        //Remplace les balise <p> par des balises <div> (correction formulaire RGPD)
        jQuery('.'+nodeClass).replaceWith(function () {
                return jQuery('<div/>', {
                        class: nodeClass,
                        html: this.innerHTML
                });
        });
        if(isTabIndex == 1){
                    //Rajoute l'attribut tabindex si besoin, pour permettre le ciblage avec la touche Tabulation (a11y)
                jQuery(nodeClass).attr('tabindex','1');
        }
    }
		
});																		 
</script>