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

<channel>
	<title>Julien Animateur</title>
	<atom:link href="https://julien-animateur.fr/feed/" rel="self" type="application/rss+xml" />
	<link>https://julien-animateur.fr</link>
	<description>Je suis un animateur</description>
	<lastBuildDate>Wed, 20 Aug 2025 11:10:55 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.5</generator>

<image>
	<url>https://julien-animateur.fr/wp-content/uploads/2025/07/cropped-IMG_0929-32x32.jpeg</url>
	<title>Julien Animateur</title>
	<link>https://julien-animateur.fr</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>AUTRES PROJETS</title>
		<link>https://julien-animateur.fr/autres-projets/</link>
					<comments>https://julien-animateur.fr/autres-projets/#respond</comments>
		
		<dc:creator><![CDATA[contact@praful-design.fr]]></dc:creator>
		<pubDate>Sat, 16 Aug 2025 15:55:11 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<guid isPermaLink="false">https://julien-animateur.fr/?p=9954</guid>

					<description><![CDATA[AUTRES PROJETS D&#8217;ANIMATION Présentation Technique &#8211; Détourage Photoshop pour Veillée Retour vers le Futur Veillée « Retour vers le Futur » &#8211; Technique de Détourage Photoshop Lors des dernières veillées, j&#8217;ai contribué à un projet immersif pour plonger les familles dans l&#8217;univers de Retour vers le Futur dès leur entrée dans la salle. Mon travail s&#8217;est concentré [&#8230;]]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="9954" class="elementor elementor-9954">
				<div class="elementor-element elementor-element-fd3628b e-con-full e-flex e-con e-parent" data-id="fd3628b" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
				<div class="elementor-element elementor-element-9ad2be6 elementor-widget elementor-widget-heading" data-id="9ad2be6" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
					<h2 class="elementor-heading-title elementor-size-default">AUTRES PROJETS D'ANIMATION</h2>				</div>
				</div>
		<div class="elementor-element elementor-element-39b0d9d e-con-full e-flex e-con e-parent" data-id="39b0d9d" data-element_type="container" data-e-type="container">
		<div class="elementor-element elementor-element-aecf0ea e-con-full e-flex e-con e-child" data-id="aecf0ea" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-11bf5a9 elementor-widget elementor-widget-html" data-id="11bf5a9" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
					<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Présentation Technique - Détourage Photoshop pour Veillée Retour vers le Futur</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #1a1a1a;
            color: #ffffff;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #2c2c2c;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
        }
        h1 {
            color: #00ccff;
            text-align: center;
            font-size: 2.5em;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        p {
            font-size: 1.1em;
            text-align: justify;
        }
        .technique-section {
            margin: 30px 0;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        .animateurs-container {
            flex: 1;
            background-color: #3a3a3a;
            border-radius: 8px;
            border: 2px solid #00ccff;
            padding: 15px;
            margin-right: 20px;
        }
        .animateurs-row {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .animateur-card {
            text-align: center;
            margin: 10px;
        }
        .animateur-card img {
            width: 150px;
            height: auto;
            border-radius: 10px;
            margin-bottom: 10px;
        }
        .animateur-card h3 {
            color: #00ccff;
            font-size: 1.4em;
            margin: 0;
        }
        .animateur-card p {
            font-size: 1em;
            margin: 5px 0 0;
        }
        .resultat {
            flex: 1;
            text-align: center;
        }
        .resultat video {
            width: 100%;
            max-width: 500px;
            border-radius: 8px;
            border: 2px solid #00ccff;
        }
        .video-controls {
            margin-top: 10px;
        }
        .video-controls button {
            background-color: #00ccff;
            color: #1a1a1a;
            border: none;
            padding: 10px 20px;
            margin: 0 5px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }
        .video-controls button:hover {
            background-color: #00aaff;
        }
        .video-controls input[type="range"] {
            width: 100px;
            margin: 0 10px;
        }
        @media (max-width: 768px) {
            .technique-section {
                flex-direction: column;
            }
            .animateurs-container {
                margin-right: 0;
                margin-bottom: 20px;
            }
            .resultat {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Veillée "Retour vers le Futur" - Technique de Détourage Photoshop</h1>
        <p>
            Lors des dernières veillées, j'ai contribué à un projet immersif pour plonger les familles dans l'univers de <em>Retour vers le Futur</em> dès leur entrée dans la salle. Mon travail s'est concentré sur une technique clé : le détourage précis des visages des animateurs sous <strong>Photoshop</strong>. Ces visages ont ensuite été intégrés dans des scènes dynamiques à l'aide de <strong>After Effects</strong> et finalisés avec <strong>Premiere Pro</strong>. L'objectif était de créer un montage captivant, mêlant la DeLorean entourée d'éclairs crépitants, l'horloge emblématique de l'hôtel de ville et des effets visuels qui évoquent les voyages temporels, pour une immersion totale dans l'ambiance du film.
        </p>
        
        <div class="technique-section">
            <div class="animateurs-container">
                <h2>Les Animateurs - Visages Détourés</h2>
                <div class="animateurs-row">
                    <div class="animateur-card">
                        <img decoding="async" src="https://julien-animateur.fr/wp-content/uploads/2025/08/IMG_6880-scaled.jpeg" alt="Matthieu en Doc Brown - Visage Détouré">
                        <h3>Matthieu - Doc Brown</h3>
                        <p>Visage détouré avec précision sous Photoshop pour une intégration fluide dans le montage.</p>
                    </div>
                    <div class="animateur-card">
                        <img decoding="async" src="https://julien-animateur.fr/wp-content/uploads/2025/08/IMG_6878-scaled.jpeg" alt="Nicolas en Marty McFly - Visage Détouré">
                        <h3>Nicolas - Marty McFly</h3>
                        <p>Détourage soigné pour isoler le visage, prêt à être animé dans After Effects.</p>
                    </div>
                </div>
            </div>
            
            <div class="resultat">
                <h2>Le Résultat Final</h2>
                <p>
                    Le montage final transporte le public dans l'univers de <em>Retour vers le Futur</em> avec des effets visuels saisissants : la DeLorean illuminée par des éclairs dynamiques, l'horloge de l'hôtel de ville marquant le temps, et des transitions fluides qui capturent l'essence des voyages temporels.
                </p>
                <video id="videoPlayer" autoplay loop>
                    <source src="https://julien-animateur.fr/wp-content/uploads/2025/08/officiel-musique-projection.mov" type="video/mp4">
                    Votre navigateur ne supporte pas la lecture de vidéos.
                </video>
                <div class="video-controls">
                    <button onclick="playPause()">Pause</button>
                    <button onclick="restart()">Rejouer</button>
                    <label for="volume">Volume :</label>
                    <input type="range" id="volume" min="0" max="1" step="0.1" value="1" oninput="setVolume()">
                </div>
            </div>
        </div>
    </div>

    <script>
        const video = document.getElementById('videoPlayer');
        
        function playPause() {
            if (video.paused) {
                video.play();
                this.textContent = 'Pause';
            } else {
                video.pause();
                this.textContent = 'Play';
            }
        }
        
        function restart() {
            video.currentTime = 0;
            video.play();
            document.querySelector('button[onclick="playPause()"]').textContent = 'Pause';
        }
        
        function setVolume() {
            video.volume = document.getElementById('volume').value;
        }
    </script>
</body>
</html>				</div>
				</div>
		<div class="elementor-element elementor-element-02834f2 e-con-full e-flex e-con e-child" data-id="02834f2" data-element_type="container" data-e-type="container">
				</div>
		<div class="elementor-element elementor-element-93abe7f e-con-full e-flex e-con e-child" data-id="93abe7f" data-element_type="container" data-e-type="container">
				</div>
				</div>
		<div class="elementor-element elementor-element-143f2c9 e-flex e-con-boxed e-con e-parent" data-id="143f2c9" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
					</div>
				</div>
				</div>
		]]></content:encoded>
					
					<wfw:commentRss>https://julien-animateur.fr/autres-projets/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://julien-animateur.fr/wp-content/uploads/2025/08/officiel-musique-projection.mov" length="67649352" type="video/quicktime" />

			</item>
		<item>
		<title>L&#8217;ANIMATION</title>
		<link>https://julien-animateur.fr/lanimation/</link>
					<comments>https://julien-animateur.fr/lanimation/#respond</comments>
		
		<dc:creator><![CDATA[contact@praful-design.fr]]></dc:creator>
		<pubDate>Mon, 11 Aug 2025 20:05:36 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<guid isPermaLink="false">https://julien-animateur.fr/?p=7768</guid>

					<description><![CDATA[L&#8217;Animation en Centre de Loisirs]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>L&rsquo;Animation en Centre de Loisirs</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');

    :root{
      --violet:#9C5CF5;
      --violet-600:#7B3EF0;
      --violet-700:#6732D4;
      --bg:#F8F6FF;
      --text:#130F49;
      --muted:#6b7280; /* gris tailwind-ish */
    }
    html{ scroll-behavior:smooth; }
    body{ font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }

    /* Header gradient animé subtil */
    .hero {
      background: radial-gradient(1200px 600px at 20% -10%, rgba(156,92,245,.25), transparent 60%),
                  radial-gradient(1000px 500px at 110% 20%, rgba(123,62,240,.25), transparent 60%),
                  linear-gradient(135deg, var(--violet) 0%, var(--violet-600) 100%);
      color:#fff;
    }

    /* Cartes */
    .card { background:#fff; border-radius:1rem; box-shadow:0 10px 30px rgba(20,0,80,.06); }
    .chip { background:rgba(156,92,245,.10); color:var(--violet-700); }

    /* Règles typographiques */
    h1,h2,h3,h4 { font-weight:900 !important; font-family:'Inter', sans-serif; }
    p, li { font-size:16px; line-height:1.7; }
    .lead { font-size:18px; opacity:.95; }

    /* Barre nav */
    .nav a { color:#6b6b6b; }
    .nav a.active{ color:var(--violet); font-weight:700; }
    .nav a:hover{ color:var(--violet); }

    /* Listes à puces violettes */
    .bullet:before{
      content:"•";
      display:inline-block;
      margin-right:.6rem;
      color:var(--violet);
      font-weight:700;
    }

    /* Blocs conseils (bord violet) */
    .tip { background:#F3EAFF; border-left:4px solid var(--violet); border-radius:.75rem .75rem .75rem 0; }

    /* Bouton principal */
    .btn {
      background:#fff; color:var(--violet); border:2px solid #fff;
      padding:.75rem 1.75rem; border-radius:9999px; font-weight:700;
      transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    }
    .btn:hover { background:#f4f0ff; box-shadow:0 8px 24px rgba(156,92,245,.25); transform:translateY(-1px); }

    /* Sections teintées violettes */
    .violet-panel { background:linear-gradient(180deg, #FBF8FF 0%, #F4EEFF 100%); }

    /* Bordures d’accent (uniformes) */
    .accent { border-left:4px solid var(--violet); }

    /* Petits helpers */
    .container { max-width:1100px; }
  </style>
</head>
<body>
<!-- Le reste du contenu HTML reste identique -->
</body>
</html>

]]></content:encoded>
					
					<wfw:commentRss>https://julien-animateur.fr/lanimation/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>TEST LECTEUR</title>
		<link>https://julien-animateur.fr/test-lecteur/</link>
					<comments>https://julien-animateur.fr/test-lecteur/#respond</comments>
		
		<dc:creator><![CDATA[contact@praful-design.fr]]></dc:creator>
		<pubDate>Sat, 02 Aug 2025 17:19:05 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<guid isPermaLink="false">https://julien-animateur.fr/?p=3858</guid>

					<description><![CDATA[Voici le code HTML complet mis à jour avec la nouvelle playlist. J&#8217;ai remplacé les pistes existantes dans le code JavaScript et j&#8217;ai généré automatiquement les éléments de la liste ` ` pour qu&#8217;ils correspondent à la nouvelle playlist. ### Code HTML mis à jour « `html Lecteur Audio &#8211; Arc en Scène 0:00 0:00 🔊 [&#8230;]]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="3858" class="elementor elementor-3858">
				<div class="elementor-element elementor-element-3756607 e-flex e-con-boxed e-con e-parent" data-id="3756607" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-6211217 e-con-full e-flex e-con e-child" data-id="6211217" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-69f1d79 elementor-widget elementor-widget-html" data-id="69f1d79" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
					Voici le code HTML complet mis à jour avec la nouvelle playlist. J'ai remplacé les pistes existantes dans le code JavaScript et j'ai généré automatiquement les éléments de la liste `<ul>` pour qu'ils correspondent à la nouvelle playlist.

### Code HTML mis à jour

```html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Lecteur Audio - Arc en Scène</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #f4f4f8;
      font-family: 'Inter', sans-serif;
    }

    .album-player {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      background: #f4f4f8;
      padding: 30px;
      border-radius: 20px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
      max-width: 1100px;
      margin: 40px auto;
    }

    .left-panel {
      width: 400px;
      background: #222;
      border-radius: 16px;
      padding: 20px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }

    .background-blur {
      position: absolute;
      inset: 0;
      background-image: url('https://julien-animateur.fr/wp-content/uploads/2025/07/ARC-EN-CIEL-2023-SUPER-ARC.jpg');
      background-size: cover;
      background-position: center;
      filter: blur(12px) brightness(0.6);
      z-index: 0;
      pointer-events: none;
    }

    .left-panel::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("https://www.transparenttextures.com/patterns/noise.png");
      opacity: 0.3;
      z-index: 1;
      pointer-events: none;
    }

    .album-cover,
    .track-info,
    .controls,
    #progress-bar,
    .time-info,
    .volume-control {
      position: relative;
      z-index: 2;
    }

    .album-cover {
      width: 100%;
      max-width: 180px;
      margin: 0 auto 20px;
      border-radius: 12px;
      display: block;
    }

    .track-info h3 {
      font-size: 20px;
      color: white;
      font-weight: bold;
      text-align: center;
      margin-bottom: 5px;
    }

    .track-info p {
      color: white;
      text-align: center;
      margin-bottom: 20px;
    }

    .controls {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin: 20px 0;
    }

    .svg-btn {
      background: #9C5CF5;
      border: none;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .svg-btn svg {
      width: 28px;
      height: 28px;
      fill: white;
    }

    #progress-bar {
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: white;
      appearance: none;
      margin-top: 10px;
    }

    #progress-bar::-webkit-slider-thumb {
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: white;
      cursor: pointer;
      margin-top: -4px;
    }

    #progress-bar::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: white;
      cursor: pointer;
      border: none;
    }

    .time-info {
      display: flex;
      justify-content: space-between;
      color: white;
      font-size: 14px;
      margin-top: 5px;
    }

    .volume-control {
      margin-top: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: white;
    }

    .volume-control input[type="range"] {
      flex: 1;
      accent-color: #9C5CF5;
    }

    .right-panel {
      flex: 1;
      min-width: 260px;
    }

    .right-panel h4 {
      font-size: 18px;
      margin-bottom: 15px;
      color: #333;
    }

    #playlist {
      list-style: none;
      padding: 0;
    }

    #playlist li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      margin-bottom: 8px;
      background-color: #e8e2fa;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s;
      color: #111;
    }

    #playlist li:hover {
      background-color: #d4c8ff;
    }

    #playlist li.active {
      background-color: #9C5CF5;
      color: white;
      font-weight: bold;
    }

    .download-section {
      margin-top: 30px;
      text-align: left;
    }

    .download-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: #9C5CF5;
      color: white;
      text-decoration: none;
      padding: 10px 16px;
      font-size: 14px;
      border-radius: 8px;
    }

    .download-btn:hover,
    .download-btn:focus,
    .download-btn span {
      color: white;
    }

    @media (max-width: 900px) {
      .album-player {
        flex-direction: column;
      }

      .left-panel,
      .right-panel {
        width: 100%;
      }

      .right-panel {
        margin-top: 30px;
      }
    }
  </style>
</head>
<body>

<div class="album-player">
  <div class="left-panel">
    <div class="background-blur"></div>
    <img decoding="async" class="album-cover" src="https://julien-animateur.fr/wp-content/uploads/2025/07/ARC-EN-CIEL-2023-SUPER-ARC.jpg" alt="Album Cover">
    <div class="track-info">
      <h3 id="track-title"></h3>
      <p id="track-artist"></p>
    </div>
    <audio id="audio-player"></audio>
    <div class="controls">
      <button onclick="prevTrack()" class="svg-btn"><svg viewBox="0 0 24 24"><path d="M6 19V5h2v14H6zm3.5-7l8.5 6V6l-8.5 6z"/></svg></button>
      <button id="play-btn" onclick="togglePlay()" class="svg-btn"><svg id="play-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></button>
      <button onclick="nextTrack()" class="svg-btn"><svg viewBox="0 0 24 24"><path d="M16 5v14h-2V5h2zm-3.5 7L4 19V5l8.5 7z"/></svg></button>
    </div>
    <input type="range" id="progress-bar" value="0">
    <div class="time-info">
      <span id="current-time">0:00</span>
      <span id="duration">0:00</span>
    </div>
    <div class="volume-control">
      <span><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f50a.png" alt="🔊" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
      <input type="range" id="volume" min="0" max="1" step="0.01" value="1">
    </div>
  </div>

  <div class="right-panel">
    <h4>Écouter l'album Arc en scène – Il était une fois... ARC !</h4>
    <ul id="playlist">
      <li onclick="selectTrack(0)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>0. INTRO SPECTACLE NARRATION (VOIX OFF ARMANDO)</span></li>
      <li onclick="selectTrack(1)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>0.5 SCÈNE INTRO (CLEMENCE + LONY + CLARA + JULIEN)</span></li>
      <li onclick="selectTrack(2)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>1. SCÈNE SKETCH 1 (RETOUR À LA MAISON - PART DANS LE MONDE DES RÊVES) LONY + JULIE + LENA + MARGAUX 1</span></li>
      <li onclick="selectTrack(3)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>1.5 TRANSITION - DU RÉVEIL À LA CAPOEIRA - (LONY + JULIE + LOLA + CATALINA)</span></li>
      <li onclick="selectTrack(4)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>2. CAPOEIRA</span></li>
      <li onclick="selectTrack(5)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>2.5 TRANSITION - RENCONTRE AVEC LA GYMNASTIQUE (VOIX OFF ARMANDO)</span></li>
      <li onclick="selectTrack(6)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>3. GYMNASTIQUE</span></li>
      <li onclick="selectTrack(7)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>3.5 TRANSITION - DE LA GYM AU CHANT AVEC ANNA T.</span></li>
      <li onclick="selectTrack(8)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>4.5 TRANSITION - DU CHANT VERS LES TALENTS (NOTRE ECOLE À DU TALENT)</span></li>
      <li onclick="selectTrack(9)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>5.5 TRANSITION - DE LA COURS À LA DANSE BOLLYWOOD</span></li>
      <li onclick="selectTrack(10)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>6. DANSE BOLLYWOOD - N°1</span></li>
      <li onclick="selectTrack(11)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>6.5 TRANSITION - DE LA DANSE BOLLYWOOD AU CHANT (VOIX OFF ARMANDO)</span></li>
      <li onclick="selectTrack(12)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>7. CHANT - GROUPE N°2</span></li>
      <li onclick="selectTrack(13)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>7.5 TRANSITION - DU CHANT AUX MATERS - PAR MÉLANIE</span></li>
      <li onclick="selectTrack(14)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>8.5 TRANSITION - DANS BOLLYWOOD VERS LA DANSE MATERNELLE (RACHEL + VOIX OFF ARMANDO)</span></li>
      <li onclick="selectTrack(15)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>9. DANSE MATERNELLE</span></li>
      <li onclick="selectTrack(16)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>9.5 TRANSITION - FIN DE DANSE MATERNELLE</span></li>
      <li onclick="selectTrack(17)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>10. FINAL</span></li>
    </ul>
    <div class="download-section">
      <p>Téléchargez l’album complet en haute qualité :</p>
      <a href="https://julien-animateur.fr/wp-content/uploads/2025/08/ARC-EN-SCENE-V.1-SUPER-ARC.zip" download class="download-btn">
        <svg width="20" height="20" viewBox="0 0 24 24"><path fill="white" d="M5 20h14v-2H5v2zm7-18L5.33 9h4.67v6h4V9h4.67L12 2z"/></svg>
        <span>Télécharger l’album</span>
      </a>
    </div>
  </div>
</div>

<script>
  const audio = document.getElementById('audio-player');
  const playBtn = document.getElementById('play-btn');
  const playIcon = document.getElementById('play-icon');
  const progressBar = document.getElementById('progress-bar');
  const currentTimeDisplay = document.getElementById('current-time');
  const durationDisplay = document.getElementById('duration');
  const volumeSlider = document.getElementById('volume');
  const trackTitle = document.getElementById('track-title');
  const trackArtist = document.getElementById('track-artist');
  const playlistContainer = document.getElementById('playlist');

  const playlist = [
    {
      title: 'INTRO SPECTACLE NARRATION',
      artist: 'Voix Off : Armando',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/0.-INTRO-SPECTACLE-NARRATION-VOIX-OFF-ARMANDO.mp3'
    },
    {
      title: 'SCÈNE INTRO',
      artist: 'Clémence, Lony, Clara, Julien',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/0.5-SCENE-INTRO-CLEMENCE-LONY-CLARA-JULIEN-_-FINIE.mp3'
    },
    {
      title: 'SKETCH 1 – RETOUR À LA MAISON',
      artist: 'Lony, Julie, Léna, Margaux',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/1.-SCENE-SKETCH-1-RETOUR-A-LA-MAISON-PART-DANS-LE-MONDE-DES-REVES-LONY-JULIE-LENA-MARGAUX-1.mp3'
    },
    {
      title: 'TRANSITION – RÉVEIL > CAPOEIRA',
      artist: 'Lony, Julie, Lola, Catalina',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/1.5-TRANSITION-DU-REVEIL-A-LA-CAPOEIRA-LONY-JULIE-LOLA-CATALINA.mp3'
    },
    {
      title: 'CAPOEIRA',
      artist: null,
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/2.-CAPOEIRA.mp3'
    },
    {
      title: 'TRANSITION – RENCONTRE AVEC LA GYMNASTIQUE',
      artist: 'Voix Off : Armando',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/2.5-TRANSITION-RENCONTRE-AVEC-LA-GYMNASTIQUE-VOIX-OFF-ARMANDO.mp3'
    },
    {
      title: 'GYMNASTIQUE',
      artist: null,
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/3.-GYMNASTIQUE.mp3'
    },
    {
      title: 'TRANSITION – GYM > CHANT',
      artist: 'Anna T.',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/3.5-TRANSITION-DE-LA-GYM-AU-CHANT-AVEC-ANNA-T.mp3'
    },
    {
      title: 'TRANSITION – CHANT > TALENTS',
      artist: 'NOTRE ECOLE À DU TALENT',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/4.5-TRANSITION-DU-CHANT-VERS-LES-TALENTS-NOTRE-ECOLE-A-DU-TALENT.mp3'
    },
    {
      title: 'TRANSITION – COURS > DANSE BOLLYWOOD',
      artist: null,
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/5.5-TRANSITION-DE-LA-COURS-A-LA-DANSE-BOLLYWOOD.mp3'
    },
    {
      title: 'DANSE BOLLYWOOD',
      artist: 'Groupe N°1',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/6.-DANSE-BOLLYWOOD-N°1.mp3'
    },
    {
      title: 'TRANSITION – DANSE BOLLYWOOD > CHANT',
      artist: 'Voix Off : Armando',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/6.5-TRANSITION-DE-LA-DANSE-BOLLYWOOD-AU-CHANT-VOIX-OFF-ARMANDO.mp3'
    },
    {
      title: 'CHANT',
      artist: 'Groupe N°2',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/7.-CHANT-GROUPE-N°2.mp3'
    },
    {
      title: 'TRANSITION – CHANT > MATERS',
      artist: 'Mélanie',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/7.5-TRANSITION-DU-CHANT-AUX-MATERS-PAR-MELANIE.mp3'
    },
    {
      title: 'TRANSITION – BOLLYWOOD > MATERNELLE',
      artist: 'Rachel + Voix Off Armando',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/8.5-TRANSITION-DANS-BOLLYWOOD-VERS-LA-DANSE-MATERNELLE-RACHEL-VOIX-OFF-ARMANDO.mp3'
    },
    {
      title: 'DANSE MATERNELLE',
      artist: null,
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/9.-DANSE-MATERNELLE.mp3'
    },
    {
      title: 'TRANSITION – FIN DE DANSE MATERNELLE',
      artist: null,
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/9.5-TRANSITION-FIN-DE-DANSE-MATERNELLE.mp3'
    },
    {
      title: 'FINAL',
      artist: null,
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/10.-FINAL.mp3'
    },
  ];

  let currentTrack = 0;

  function loadTrack(index, autoPlay = false) {
    const track = playlist[index];
    currentTrack = index;
    audio.src = track.src;
    trackTitle.textContent = track.title;
    trackArtist.textContent = track.artist ? `Artiste: ${track.artist}` : 'ARC EN SCÈNE - IL ETAIT UNE FOIS ... ARC !';
    highlightCurrentTrack();
    if (autoPlay) audio.play();
  }

  function togglePlay() {
    if (audio.paused) {
      audio.play();
      playIcon.innerHTML = '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>';
    } else {
      audio.pause();
      playIcon.innerHTML = '<path d="M8 5v14l11-7z"/>';
    }
  }

  function nextTrack() {
    currentTrack = (currentTrack + 1) % playlist.length;
    loadTrack(currentTrack, true);
  }

  function prevTrack() {
    currentTrack = (currentTrack - 1 + playlist.length) % playlist.length;
    loadTrack(currentTrack, true);
  }

  function highlightCurrentTrack() {
    document.querySelectorAll('#playlist li').forEach((li, i) => {
      li.classList.toggle('active', i === currentTrack);
    });
  }

  function selectTrack(index) {
    loadTrack(index, true);
  }

  function formatTime(seconds) {
    if (isNaN(seconds)) return '0:00';
    const m = Math.floor(seconds / 60) || 0;
    const s = Math.floor(seconds % 60) || 0;
    return `${m}:${s < 10 ? '0' : ''}${s}`;
  }

  audio.addEventListener('timeupdate', () => {
    const progress = (audio.currentTime / audio.duration) * 100;
    progressBar.value = progress || 0;
    currentTimeDisplay.textContent = formatTime(audio.currentTime);
    durationDisplay.textContent = formatTime(audio.duration);
    progressBar.style.background = `linear-gradient(to right, #9C5CF5 ${progress}%, white ${progress}%)`;
  });

  progressBar.addEventListener('input', () => {
    const seekTime = audio.duration * (progressBar.value / 100);
    audio.currentTime = seekTime;
  });

  audio.addEventListener('ended', nextTrack);
  volumeSlider.addEventListener('input', () => {
    audio.volume = volumeSlider.value;
  });

  loadTrack(currentTrack);
</script>

</body>
</html>
```				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-89c56ca e-flex e-con-boxed e-con e-parent" data-id="89c56ca" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
					</div>
				</div>
				</div>
		]]></content:encoded>
					
					<wfw:commentRss>https://julien-animateur.fr/test-lecteur/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>BD</title>
		<link>https://julien-animateur.fr/bd/</link>
					<comments>https://julien-animateur.fr/bd/#respond</comments>
		
		<dc:creator><![CDATA[contact@praful-design.fr]]></dc:creator>
		<pubDate>Sat, 26 Jul 2025 23:13:43 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<guid isPermaLink="false">https://julien-animateur.fr/?p=2830</guid>

					<description><![CDATA[CRÉATION D&#8217;UN BANDE DESSINÉ PAR LES ENFANTS BD – Trop c’est trop ! BD : Trop, c’est trop ! Une création collective des enfants du centre de loisirs sur le harcèlement scolaire 📅 Réalisé le 28 février 2025 🎯 Un projet engagé À travers cette bande dessinée, les enfants ont souhaité dénoncer une réalité trop [&#8230;]]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="2830" class="elementor elementor-2830">
				<div class="elementor-element elementor-element-fb628e2 e-flex e-con-boxed e-con e-parent" data-id="fb628e2" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-9dddcbe elementor-widget__width-inherit elementor-widget elementor-widget-heading" data-id="9dddcbe" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
					<h2 class="elementor-heading-title elementor-size-default">CRÉATION D'UN BANDE DESSINÉ</h2>				</div>
				<div class="elementor-element elementor-element-47fda62 elementor-widget-divider--view-line_text elementor-widget-divider--element-align-center elementor-widget elementor-widget-divider" data-id="47fda62" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
							<div class="elementor-divider">
			<span class="elementor-divider-separator">
							<span class="elementor-divider__text elementor-divider__element">
				PAR LES ENFANTS				</span>
						</span>
		</div>
						</div>
				<div class="elementor-element elementor-element-69e9046 elementor-view-default elementor-widget elementor-widget-icon" data-id="69e9046" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
							<div class="elementor-icon-wrapper">
			<div class="elementor-icon">
			<i aria-hidden="true" class="icon icon-arrows"></i>			</div>
		</div>
						</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-1e0d4cf e-flex e-con-boxed e-con e-parent" data-id="1e0d4cf" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-e59a50d e-con-full e-flex e-con e-child" data-id="e59a50d" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-a9e8ab0 elementor-widget__width-inherit elementor-widget elementor-widget-image" data-id="a9e8ab0" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
															<img fetchpriority="high" decoding="async" width="595" height="842" src="https://julien-animateur.fr/wp-content/uploads/2025/08/1.png" class="attachment-large size-large wp-image-3759" alt="" srcset="https://julien-animateur.fr/wp-content/uploads/2025/08/1.png 595w, https://julien-animateur.fr/wp-content/uploads/2025/08/1-212x300.png 212w" sizes="(max-width: 595px) 100vw, 595px" />															</div>
				<div class="elementor-element elementor-element-286dbc0 elementor-widget__width-inherit elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel" data-id="286dbc0" data-element_type="widget" data-e-type="widget" data-settings="{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;navigation&quot;:&quot;dots&quot;,&quot;autoplay_speed&quot;:1000,&quot;speed&quot;:1000,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;infinite&quot;:&quot;yes&quot;,&quot;effect&quot;:&quot;slide&quot;}" data-widget_type="image-carousel.default">
							<div class="elementor-image-carousel-wrapper swiper" role="region" aria-roledescription="carousel" aria-label="Carrousel d’images" dir="ltr">
			<div class="elementor-image-carousel swiper-wrapper swiper-image-stretch" aria-live="off">
								<div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="1 sur 8"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/2025/08/2.png" alt="2" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="2 sur 8"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/2025/08/3.png" alt="3" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="3 sur 8"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/2025/08/4.png" alt="4" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="4 sur 8"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/2025/08/5.png" alt="5" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="5 sur 8"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/2025/08/6.png" alt="6" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="6 sur 8"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/2025/08/7.png" alt="7" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="7 sur 8"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/2025/08/8.png" alt="8" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="8 sur 8"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/2025/08/9.png" alt="9" /></figure></div>			</div>
							
									<div class="swiper-pagination"></div>
									</div>
						</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-012fa75 e-con-full e-flex e-con e-parent" data-id="012fa75" data-element_type="container" data-e-type="container">
		<div class="elementor-element elementor-element-c106825 e-flex e-con-boxed e-con e-child" data-id="c106825" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-e35bf1f elementor-widget elementor-widget-shortcode" data-id="e35bf1f" data-element_type="widget" data-e-type="widget" data-widget_type="shortcode.default">
							<div class="elementor-shortcode"><!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>BD – Trop c’est trop !</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --violet: #6A4C93;
      --rose: #ff7aa2;
      --jaune: #ffd54f;
      --fond: #f9f6ff;
      --text: #1a1a1a;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Rubik', sans-serif;
      background-color: var(--fond);
      color: var(--text);
      padding: 40px 60px;
      line-height: 1.7;
    }

    .container {
      max-width: 960px;
      margin: auto;
      background-color: white;
      padding: 50px 60px;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    header {
      text-align: center;
      margin-bottom: 50px;
    }

    header h1 {
      color: var(--violet);
      font-size: 2.5em;
      margin-bottom: 15px;
    }

    .cover {
      max-width: 100%;
      border-radius: 16px;
      box-shadow: 0 6px 16px rgba(0,0,0,0.15);
      margin: 20px auto 0;
      display: block;
    }

    header p {
      font-size: 1.15em;
      color: #444;
      margin-top: 15px;
    }

    .date {
      text-align: right;
      color: #888;
      margin-top: 10px;
      font-size: 0.95em;
    }

    .section {
      margin-top: 50px;
    }

    .section h2 {
      font-size: 1.6em;
      color: var(--violet);
      margin-bottom: 15px;
    }

    .section p {
      font-size: 1.1em;
      text-align: justify;
      margin-bottom: 25px;
    }

    .highlight {
      background-color: var(--jaune);
      padding: 3px 8px;
      border-radius: 6px;
      font-weight: 600;
    }

    u {
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
    }

    .temoignage {
      background-color: var(--rose);
      color: white;
      padding: 25px;
      border-radius: 12px;
      font-style: italic;
      font-size: 1.05em;
    }

    .morale {
      background-color: var(--jaune);
      color: #000;
      padding: 30px;
      border-radius: 14px;
      font-weight: bold;
      margin-top: 40px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      font-size: 1.15em;
    }

    .btn {
      display: inline-block;
      margin-top: 30px;
      padding: 16px 32px;
      background-color: var(--violet);
      color: white;
      border: none;
      border-radius: 12px;
      text-decoration: none;
      font-size: 1em;
      font-weight: bold;
      transition: background-color 0.3s ease;
    }

    .btn:hover {
      background-color: #573a78;
      color: white;
    }

    img {
      max-width: 100%;
      border-radius: 16px;
      margin-top: 20px;
      box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    }

    @media (max-width: 768px) {
      body {
        padding: 30px 30px;
      }

      .container {
        padding: 40px 30px;
      }

      header h1 {
        font-size: 2em;
      }

      .section h2 {
        font-size: 1.4em;
      }

      .btn {
        width: 100%;
        text-align: center;
      }
    }

    @media (max-width: 480px) {
      body {
        padding: 25px 20px;
      }

      .container {
        padding: 30px 20px;
      }

      header h1 {
        font-size: 1.8em;
      }

      .section h2 {
        font-size: 1.3em;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <header>
      <h1>BD : Trop, c’est trop !</h1>
      <p>Une création collective des enfants du centre de loisirs sur le <span class="highlight">harcèlement scolaire</span></p>
      <div class="date"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f4c5.png" alt="📅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Réalisé le 28 février 2025</div>
    </header>

    <section class="section">
      <h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3af.png" alt="🎯" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Un projet engagé</h2>
      <p>À travers cette bande dessinée, les enfants ont souhaité dénoncer une réalité trop fréquente : <u>le harcèlement scolaire</u>. Accompagnés par deux animateurs, ils ont écrit l’histoire, créé les dialogues et imaginé les dessins pour faire passer un <span class="highlight">message fort</span> : <strong>le silence n’est jamais la solution.</strong></p>
    </section>

    <section class="section">
      <h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3a8.png" alt="🎨" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Le rôle des animateurs</h2>
      <p>Deux animateurs ont accompagné les enfants tout au long de ce projet. <strong>Julien</strong> s’est occupé de la <span class="highlight">mise en page, du design</span> et du <span class="highlight">tournage vidéo</span> en collaboration avec les enfants. Ce fut un travail d’équipe basé sur l’écoute, la créativité et l’expression de chacun.</p>

      <div class="temoignage">
        « C’était une aventure collective et artistique. Voir les enfants s’investir autant, débattre, dessiner, corriger, crier “Action !”... c'était puissant. Ils ont compris que leur voix compte. »
      </div>
    </section>

    <section class="section">
      <h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f4f8.png" alt="📸" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Dans les coulisses</h2>
      <p>Voici une photo prise pendant le projet : les enfants travaillent en petits groupes, créent les personnages, écrivent les dialogues, et testent les mises en page. C’est dans cette dynamique collaborative que la BD a vu le jour.</p>
      <img decoding="async" src="https://julien-animateur.fr/wp-content/uploads/2025/07/IMG_9907-scaled.jpg" alt="Enfants créant une BD sur le harcèlement scolaire">

      <h2 style="margin-top: 40px;"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f4d6.png" alt="📖" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Lire et télécharger la BD</h2>
      <p>Vous pouvez découvrir le travail des enfants et télécharger la BD au format PDF via le bouton ci-dessous :</p>
      <a class="btn" href="https://home.mycloud.com/action/share/0fb400e8-fbe3-426c-bc93-dfb422791dec" download="BD-Trop-Cest-Trop.pdf"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f4e5.png" alt="📥" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Télécharger la BD</a>
    </section>

    <section class="section">
      <h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f4a1.png" alt="💡" class="wp-smiley" style="height: 1em; max-height: 1em;" /> La morale de l'histoire</h2>
      <div class="morale">
        Personne ne mérite d’être mis à l’écart ou moqué.<br>
        <strong><u>Si tu es témoin ou victime de harcèlement, parle-en !</u></strong><br>
        Ensemble, nous pouvons dire STOP au harcèlement. Un simple mot, un soutien, un geste, ça peut tout changer.
      </div>
    </section>
  </div>

</body>
</html></div>
						</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-302259d e-con-full e-flex e-con e-parent" data-id="302259d" data-element_type="container" data-e-type="container">
				</div>
		<div class="elementor-element elementor-element-8bc174c e-flex e-con-boxed e-con e-parent" data-id="8bc174c" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-92710dc elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button" data-id="92710dc" data-element_type="widget" data-e-type="widget" data-widget_type="button.default">
										<a class="elementor-button elementor-button-link elementor-size-sm" href="https://julien-animateur.fr">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-arrow-alt-circle-right" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"></path></svg>			</span>
									<span class="elementor-button-text">RETOUR AU SITE</span>
					</span>
					</a>
								</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
					<wfw:commentRss>https://julien-animateur.fr/bd/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>LES OCÉANS &#8211; PROJET DE CLASSE (CM2)</title>
		<link>https://julien-animateur.fr/les-oceans-projet-de-classe-cm2/</link>
					<comments>https://julien-animateur.fr/les-oceans-projet-de-classe-cm2/#respond</comments>
		
		<dc:creator><![CDATA[contact@praful-design.fr]]></dc:creator>
		<pubDate>Sat, 26 Jul 2025 22:46:21 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<guid isPermaLink="false">https://julien-animateur.fr/?p=2761</guid>

					<description><![CDATA[LES OCÉANS &#8211; PROJET SPECTACLE CM2 [Mme LUGAGNE] Projet CM2 – Les Océans LES OCÉANS Projet Artistique CM2 – Chant · Danse · Vidéo CM2 Éducation artistique Biodiversité &#038; pollution Écouter le titre 🌊 Un Projet Inédit Mme Lugagne, enseignante en classe de CM2, m’a sollicité pour construire un spectacle éducatif. Ce fut une première [&#8230;]]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="2761" class="elementor elementor-2761">
				<div class="elementor-element elementor-element-8d42ef9 e-flex e-con-boxed e-con e-parent" data-id="8d42ef9" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-8e4cdc6 elementor-widget elementor-widget-heading" data-id="8e4cdc6" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
					<h2 class="elementor-heading-title elementor-size-default">LES OCÉANS -  PROJET SPECTACLE CM2 [Mme LUGAGNE]</h2>				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-fb7192d e-con-full e-flex e-con e-parent" data-id="fb7192d" data-element_type="container" data-e-type="container">
		<div class="elementor-element elementor-element-ce00bb4 e-con-full e-flex e-con e-child" data-id="ce00bb4" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-42e6acb elementor-widget__width-inherit elementor-widget elementor-widget-presto_video" data-id="42e6acb" data-element_type="widget" data-e-type="widget" data-widget_type="presto_video.default">
				<div class="elementor-widget-container">
					
			
			
										
			
							</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-4f83e4c e-con-full e-flex e-con e-parent" data-id="4f83e4c" data-element_type="container" data-e-type="container">
		<div class="elementor-element elementor-element-2365491 e-con-full e-flex e-con e-child" data-id="2365491" data-element_type="container" data-e-type="container">
		<div class="elementor-element elementor-element-917514b e-con-full e-flex e-con e-child" data-id="917514b" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-b04f425 elementor-widget elementor-widget-html" data-id="b04f425" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
					<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Projet CM2 – Les Océans</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap" rel="stylesheet" />
  <style>
    :root{
      --bleu-profond:#0B2545;
      --bleu-moyen:#134074;
      --accent-orange:#F26419;
      --sable:#EEDCBC;
      --texte-clair:#F7F9FB;
      --clair:#FFFFFF;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:'Poppins','Segoe UI',sans-serif;
      background:var(--bleu-profond);
      color:var(--texte-clair);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    a{color:inherit}

    /* ===== HERO : image non coupée + overlay lisible ===== */
    .hero{
      position:relative;
      background:var(--bleu-profond);
      overflow:hidden;
    }
    .hero-media{
      position:relative;
      width:100%;
    }
    .hero-media img{
      width:100%;
      height:clamp(260px,50vw,560px); /* responsive */
      object-fit:cover;               /* couverture écran */
      object-position:top center;     /* montre le haut de l'image */
      display:block;
    }
    .hero-overlay{
      position:absolute; inset:0;
      background:
        linear-gradient(to bottom,
          rgba(11,37,69,0.10) 0%,
          rgba(11,37,69,0.25) 35%,
          rgba(11,37,69,0.55) 65%,
          rgba(11,37,69,0.85) 100%);
      pointer-events:none;
    }
    .hero-content{
      position:absolute; left:50%; bottom: clamp(18px,5vw,40px);
      transform:translateX(-50%);
      width:min(100%,1100px);
      padding:0 20px;
      text-align:center;
    }
    .hero h1{
      margin:0 0 6px;
      font-size:clamp(2.2rem,6.5vw,4.5rem);
      line-height:1.05;
      font-weight:900;
      color:var(--accent-orange);
      text-shadow:0 6px 30px rgba(0,0,0,.4);
    }
    .subtitle{
      margin:0 auto;
      font-size:clamp(1rem,2.8vw,1.4rem);
      font-weight:600;
      letter-spacing:.5px;
      color:var(--texte-clair);
      opacity:.95;
    }

    /* petites “chips” d’infos */
    .chips{
      margin-top:14px;
      display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
    }
    .chip{
      background:rgba(238,220,188,.15);
      color:var(--sable);
      border:1px solid rgba(238,220,188,.35);
      padding:6px 10px;
      border-radius:999px;
      font-size:.85rem;
      font-weight:600;
      backdrop-filter:saturate(120%) blur(2px);
    }

    /* vagues décoratives (haut->bas) */
    .wave-divider{display:block;width:100%;height:auto}
    .wave-divider path{fill:var(--bleu-profond)}

    .container{max-width:900px;margin:auto;padding:0 20px}

    .content-section{
      margin-bottom:50px; padding-bottom:50px;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .content-section:last-of-type{border-bottom:none}

    h2{
      font-size:2rem; font-weight:700; color:var(--clair);
      display:inline-block; margin:0 0 16px;
      border-bottom:3px solid var(--accent-orange); padding-bottom:10px;
    }
    p{
      line-height:1.8; color:rgba(247,249,251,.88);
      margin:0 0 16px; max-width:800px;
    }
    .highlight{
      background:var(--sable); color:var(--bleu-profond);
      padding:3px 10px; border-radius:6px; font-weight:700;
    }

    /* grille creation (image + texte) */
    .creation-grid{
      display:grid; gap:40px; align-items:center;
      grid-template-columns:1.1fr 0.9fr;
    }
    .creation-gif img{
      width:100%; border-radius:14px;
      box-shadow:0 12px 26px rgba(0,0,0,.28);
      display:block
    }
    @media (max-width:900px){
      .creation-grid{grid-template-columns:1fr}
    }

    .creation-list{list-style:none; padding:0; margin:22px 0 0}
    .creation-list li{
      margin:0 0 12px; padding-left:28px; position:relative;
      color:rgba(247,249,251,.9)
    }
    .creation-list li::before{
      content:'✓'; position:absolute; left:0; top:0;
      color:var(--accent-orange); font-weight:800;
    }
    .creation-list span{font-weight:700; color:var(--clair)}

    /* ===== Lecteur audio ===== */
    .audio-player-container{
      margin-top:26px;
      background:linear-gradient(135deg,#134074,#0B2545);
      border:1px solid rgba(255,255,255,.06);
      border-radius:14px; padding:18px;
      box-shadow:0 8px 22px rgba(0,0,0,.22);
    }
    .audio-controls{display:flex; align-items:center; gap:14px}
    .control-btn{
      background:var(--accent-orange); border:none; border-radius:50%;
      width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center;
      cursor:pointer; transition:transform .2s ease; flex-shrink:0
    }
    .control-btn:hover{transform:scale(1.08)}
    .control-btn svg{width:24px; height:24px; fill:var(--clair)}
    .hidden{display:none}
    .time-display{color:var(--texte-clair); font-size:.9em; min-width:40px; text-align:center}
    .progress-container{
      flex:1; height:8px; border-radius:999px; overflow:hidden; cursor:pointer;
      background:linear-gradient(90deg, rgba(19,64,116,.6), rgba(19,64,116,.25))
    }
    .progress-bar{
      background:linear-gradient(90deg, var(--sable), #fff);
      width:0%; height:100%; transition:width .1s linear
    }
    .volume{
      display:flex; align-items:center; gap:8px; margin-left:6px
    }
    .volume input[type="range"]{
      appearance:none; width:110px; height:4px; border-radius:999px;
      background:rgba(255,255,255,.25); outline:none;
    }
    .volume input[type="range"]::-webkit-slider-thumb{
      appearance:none; width:14px; height:14px; border-radius:50%;
      background:var(--accent-orange); border:none; box-shadow:0 0 0 3px rgba(242,100,25,.25)
    }
    .volume svg{width:18px;height:18px;fill:#fff;opacity:.9}

    .footer{
      text-align:center; font-size:.92em; color:rgba(255,255,255,.55);
      margin-top:64px; padding:30px 0
    }

    /* ===== Bulles décoratives (subtil) ===== */
    .bubbles{position:absolute; inset:0; pointer-events:none; overflow:hidden}
    .bubble{
      position:absolute; bottom:-60px; width:8px; height:8px; border-radius:50%;
      background:rgba(238,220,188,.35); filter:blur(.2px);
      animation:rise linear infinite;
    }
    @keyframes rise{
      from{transform:translateY(0) translateX(0); opacity:.0}
      10%{opacity:.8}
      to{transform:translateY(-120vh) translateX(-20px); opacity:0}
    }
    @media (prefers-reduced-motion: reduce){
      .bubble{display:none}
      .control-btn{transition:none}
      .progress-bar{transition:none}
    }

    /* ===== Responsif titres/sections ===== */
    @media (max-width:1024px){
      h2{font-size:1.8rem}
    }
    @media (max-width:768px){
      .hero-content{padding:0 14px}
      .subtitle{max-width:90%}
      .content-section{margin-bottom:30px; padding-bottom:30px}
      h2{font-size:1.6rem}
      p{font-size:.95rem}
    }

    /* petit bouton “Écouter” collant */
    .cta-ecouter{
      position: sticky; top: 14px; z-index: 10;
      display:inline-flex; align-items:center; gap:10px;
      margin: 8px 0 0;
      background:rgba(242,100,25,.12);
      color:#fff; border:1px solid rgba(242,100,25,.45);
      padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:700;
      backdrop-filter:saturate(120%) blur(2px);
    }
    .cta-ecouter svg{width:18px;height:18px;fill:#fff}
  </style>
</head>
<body>

  <!-- ===== HERO ===== -->
  <header class="hero" role="banner">
    <figure class="hero-media" aria-hidden="true">
      <img decoding="async" src="https://julien-animateur.fr/wp-content/uploads/2025/07/LES-OCEANS-PROJET-CM2.png"
           alt="" />
    </figure>
    <div class="hero-overlay"></div>
    <div class="bubbles" aria-hidden="true">
      <!-- quelques bulles avec durées/positions variées -->
      <span class="bubble" style="left:8%; animation-duration:12s;"></span>
      <span class="bubble" style="left:22%; animation-duration:10s; width:6px; height:6px;"></span>
      <span class="bubble" style="left:38%; animation-duration:14s; width:10px; height:10px;"></span>
      <span class="bubble" style="left:55%; animation-duration:11s;"></span>
      <span class="bubble" style="left:71%; animation-duration:13s; width:7px; height:7px;"></span>
      <span class="bubble" style="left:86%; animation-duration:9s;"></span>
    </div>
    <div class="hero-content">
      <h1>LES OCÉANS</h1>
      <p class="subtitle">Projet Artistique CM2 – Chant · Danse · Vidéo</p>
      <div class="chips">
        <span class="chip">CM2</span>
        <span class="chip">Éducation artistique</span>
        <span class="chip">Biodiversité & pollution</span>
      </div>
    </div>
  </header>

  <!-- vague -->
  <svg class="wave-divider" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none">
    <path d="M0,60 C180,120 360,0 540,30 C720,60 900,120 1080,90 C1260,60 1440,90 1440,90 L1440,120 L0,120 Z"></path>
  </svg>

  <main class="container" role="main">
    <a class="cta-ecouter" href="#audio">
      <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
      Écouter le titre
    </a>

    <section class="content-section">
      <h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f30a.png" alt="🌊" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Un Projet Inédit</h2>
      <p><span class="highlight">Mme Lugagne</span>, enseignante en classe de <em>CM2</em>, m’a sollicité pour construire un <strong>spectacle éducatif</strong>. Ce fut une première : un animateur intervenant en temps scolaire !</p>
      <p>En tant qu’<strong>animateur ALSH</strong> passionné de scène, j’ai accompagné la classe sur le thème des <strong>océans</strong>. Ce sujet, riche et porteur, a été déterminé par la <strong>directrice coordinatrice de l'école Olympe de Gouges à Bruges</strong>. Nous avons ensuite défini un fil rouge autour de la biodiversité, la pollution, les tortues et les baleines.</p>
    </section>

    <section class="content-section">
      <div class="creation-grid">
        <div class="creation-text">
          <h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3a8.png" alt="🎨" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Des Artistes Complets</h2>
          <p>La plus grande fierté de ce projet est que les enfants en sont les <strong>véritables créateurs</strong>. Guidés par mon expérience technique, ils ont tout imaginé de A à Z :</p>
          <ul class="creation-list">
            <li><span>Les Paroles :</span> Issues de leurs idées, de leurs mots et de leur vision du monde marin, écrites collectivement en classe.</li>
            <li><span>La Musique :</span> J’ai trouvé une musique que j’ai ensuite entièrement arrangée et mixée sur <strong>Logic Pro (iPad Pro M4)</strong> pour donner vie à leur composition.</li>
            <li><span>La Chorégraphie :</span> Chaque mouvement de danse vu sur scène a été pensé, proposé et validé par les élèves eux-mêmes pour une performance 100% authentique.</li>
            <li><span>Le Support Visuel :</span> Pour le spectacle, j’ai aussi extrait les paroles et réalisé le montage vidéo de fond qui était projeté sur scène pour le public.</li>
          </ul>

          <!-- ===== Lecteur audio ===== -->
          <div id="audio" class="audio-player-container" aria-label="Lecteur audio Les Océans">
            <audio id="audio-player" preload="metadata">
              <source src="https://julien-animateur.fr/wp-content/uploads/2025/08/LES-OCEANS-PROJET-CM2-MME-LUGAGNE.m4a" type="audio/mp4" />
              Votre navigateur ne supporte pas l’élément audio.
            </audio>
            <div class="audio-controls">
              <button id="play-pause-btn" class="control-btn" aria-label="Lecture/Pause">
                <svg id="play-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
                <svg id="pause-icon" class="hidden" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
              </button>
              <span id="current-time" class="time-display" aria-live="off">0:00</span>
              <div id="progress-container" class="progress-container" role="slider" aria-label="Progression" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" tabindex="0">
                <div id="progress-bar" class="progress-bar"></div>
              </div>
              <span id="total-duration" class="time-display">0:00</span>
              <div class="volume" aria-label="Volume">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10v4h4l5 5V5L7 10H3z"/></svg>
                <input id="volume" type="range" min="0" max="1" step="0.01" value="0.9" aria-label="Régler le volume" />
              </div>
            </div>
          </div>
        </div>

        <div class="creation-gif">
          <img decoding="async" src="https://julien-animateur.fr/wp-content/uploads/2025/08/IMG_0946.gif"
               alt="Les enfants de CM2 dansant sur la scène de l’Espace Treulon" />
        </div>
      </div>
    </section>

    <section class="content-section">
      <h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3ad.png" alt="🎭" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Le Spectacle</h2>
      <p>Le spectacle a eu lieu le <strong>10 juin 2024</strong> à <em>l’Espace Culturel Treulon</em> à <strong>Bruges (33)</strong>, à 10h00. J’ai filmé bénévolement ce moment unique pour graver cette aventure.</p>
    </section>

    <section class="content-section">
      <h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f44f.png" alt="👏" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Une Fierté Partagée</h2>
      <p>Les enfants ont été ovationnés par les parents et remerciés par la directrice de l’école Olympe de Gouges. Ce projet a rencontré un vrai <strong>succès</strong>, et l’événement pourrait bien être renouvelé !</p>
    </section>
  </main>

  <footer class="footer">
    © 2024–2025 · Projet “Les Océans” – CM2 · Réalisation pédagogique et artistique
  </footer>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const audio = document.getElementById('audio-player');
      const btn = document.getElementById('play-pause-btn');
      const playIco = document.getElementById('play-icon');
      const pauseIco = document.getElementById('pause-icon');
      const progress = document.getElementById('progress-bar');
      const progressContainer = document.getElementById('progress-container');
      const current = document.getElementById('current-time');
      const total = document.getElementById('total-duration');
      const volume = document.getElementById('volume');

      function formatTime(s){
        const m = Math.floor(s/60)||0; const sec = Math.floor(s%60)||0;
        return `${m}:${sec<10?'0':''}${sec}`;
      }

      audio.addEventListener('loadedmetadata', ()=>{
        total.textContent = formatTime(audio.duration || 0);
      });

      btn.addEventListener('click', ()=>{
        if(audio.paused){ audio.play(); playIco.classList.add('hidden'); pauseIco.classList.remove('hidden'); }
        else{ audio.pause(); playIco.classList.remove('hidden'); pauseIco.classList.add('hidden'); }
      });

      audio.addEventListener('timeupdate', ()=>{
        if(audio.duration){
          const pct = (audio.currentTime / audio.duration) * 100;
          progress.style.width = `${pct}%`;
          progressContainer.setAttribute('aria-valuenow', Math.round(pct));
        }
        current.textContent = formatTime(audio.currentTime);
      });

      audio.addEventListener('ended', ()=>{
        playIco.classList.remove('hidden'); pauseIco.classList.add('hidden');
      });

      // clique pour seek
      progressContainer.addEventListener('click', (e)=>{
        const rect = progressContainer.getBoundingClientRect();
        const ratio = (e.clientX - rect.left) / rect.width;
        if(audio.duration) audio.currentTime = ratio * audio.duration;
      });

      // clavier pour seek (accessibilité)
      progressContainer.addEventListener('keydown', (e)=>{
        if(!audio.duration) return;
        const step = audio.duration * 0.02; // 2%
        if(e.key === 'ArrowRight'){ audio.currentTime = Math.min(audio.duration, audio.currentTime + step);}
        if(e.key === 'ArrowLeft'){ audio.currentTime = Math.max(0, audio.currentTime - step);}
      });

      // volume
      volume.addEventListener('input', (e)=>{ audio.volume = parseFloat(e.target.value); });

      // si on clique sur le lien “Écouter”, on lance la lecture quand le focus arrive
      const hash = window.location.hash;
      if(hash === '#audio'){
        // petite latence pour s'assurer que le média est prêt
        setTimeout(()=>{ audio.play().catch(()=>{}); playIco.classList.add('hidden'); pauseIco.classList.remove('hidden'); }, 150);
      }
    });
  </script>
</body>
</html>
				</div>
				<div class="elementor-element elementor-element-3952b71 elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button" data-id="3952b71" data-element_type="widget" data-e-type="widget" data-widget_type="button.default">
										<a class="elementor-button elementor-button-link elementor-size-sm" href="https://julien-animateur.fr">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-arrow-alt-circle-right" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"></path></svg>			</span>
									<span class="elementor-button-text">RETOUR AU SITE</span>
					</span>
					</a>
								</div>
				</div>
				</div>
				</div>
				</div>
		]]></content:encoded>
					
					<wfw:commentRss>https://julien-animateur.fr/les-oceans-projet-de-classe-cm2/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://julien-animateur.fr/wp-content/uploads/2025/08/LES-OCEANS-PROJET-CM2-MME-LUGAGNE.m4a" length="0" type="audio/mpeg" />

			</item>
		<item>
		<title>CARTES POKÉMON</title>
		<link>https://julien-animateur.fr/cartes-pokemon/</link>
					<comments>https://julien-animateur.fr/cartes-pokemon/#respond</comments>
		
		<dc:creator><![CDATA[contact@praful-design.fr]]></dc:creator>
		<pubDate>Sat, 26 Jul 2025 22:08:46 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<guid isPermaLink="false">https://julien-animateur.fr/?p=2712</guid>

					<description><![CDATA[Projet Pokémon – Activité Élémentaire Projet Pokémon – Activité Élémentaire 🎨 Création des cartes Pokémon À l’aide d’Illustrator, j’ai conçu des cartes Pokémon personnalisées. Les enfants les ont ensuite découpées et collées au dos de cartes cartonnées pour en faire leurs propres versions du jeu. 🧩 Plateau de jeu Pokémon J’ai également conçu un plateau [&#8230;]]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="2712" class="elementor elementor-2712">
				<div class="elementor-element elementor-element-12cdd92 e-con-full e-flex e-con e-parent" data-id="12cdd92" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-a5f6764 elementor-widget elementor-widget-shortcode" data-id="a5f6764" data-element_type="widget" data-e-type="widget" data-widget_type="shortcode.default">
							<div class="elementor-shortcode"><!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Projet Pokémon – Activité Élémentaire</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Rubik:wght@300;400;500;700&display=swap" rel="stylesheet">
  <style>
    :root{
      --blue:#3b4cca;
      --blue-d:#2a3799;
      --yellow:#ffcb05;
      --ink:#1e2233;
      --paper:#ffffff;
      --bg:#f8f8ff;
      --radius:16px;
      --shadow:0 10px 30px rgba(0,0,0,.08);
    }

    /* Base */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:'Rubik',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
      color:var(--ink);
      background: var(--bg);
      line-height:1.7;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* Header */
    header{
      background: linear-gradient(90deg, var(--yellow), #ffd64d, var(--blue));
      background-size:220% 100%;
      color:#fff;
      text-align:center;
      padding: clamp(16px, 3vw, 28px) 16px;
      animation: headerSlide 18s ease-in-out infinite;
      position:relative;
      overflow:hidden;
    }
    @keyframes headerSlide{
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }
    header .brand{
      max-width:1100px;
      margin:0 auto;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:.5rem;
    }
    header img{
      width: clamp(180px, 40vw, 360px);
      height:auto;
      filter: drop-shadow(0 6px 16px rgba(0,0,0,.18));
    }
    header h1{
      font-family:'Fredoka One', cursive;
      font-size: clamp(1.25rem, 1rem + 2vw, 2.2rem);
      margin: 2px 0 0 0;
      letter-spacing:.3px;
      text-shadow: 0 2px 0 rgba(0,0,0,.12);
    }

    /* Layout */
    .container{
      max-width:1100px;
      margin: clamp(18px, 4vw, 36px) auto;
      padding: 0 16px;
    }

    /* Cards/Sections */
    .section{
      position:relative;
      background:var(--paper);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: clamp(18px, 2.4vw, 28px);
      margin-bottom: clamp(18px, 3.2vw, 32px);
      overflow:hidden;
    }
    /* Liseré animé à gauche */
    .section::before{
      content:"";
      position:absolute;
      inset:0 auto 0 0;
      width:8px;
      background: linear-gradient(180deg, var(--blue), var(--blue-d));
      transform: translateZ(0);
      animation: stripe 8s linear infinite;
    }
    @keyframes stripe{
      0%,100%{filter:hue-rotate(0deg)}
      50%{filter:hue-rotate(20deg)}
    }

    .section h2{
      font-family:'Fredoka One', cursive;
      color:var(--blue);
      font-size: clamp(1.1rem, .9rem + 1.2vw, 1.6rem);
      margin:0 0 10px 0;
      letter-spacing:.2px;
      position:relative;
      display:inline-block;
    }
    .section h2::after{
      content:"";
      display:block;
      height:6px;
      width:54px;
      margin-top:8px;
      border-radius:4px;
      background: linear-gradient(90deg, var(--yellow), #ffe77a);
    }

    .section p, .section ul{
      font-size: clamp(1rem, .95rem + .2vw, 1.08rem);
      margin:0.25rem 0 0 0;
    }

    /* Highlight “jaune énergie” */
    .highlight{
      background: linear-gradient(90deg, #ffef9a, var(--yellow));
      color:#1a1600;
      padding: 2px 8px;
      border-radius:8px;
      font-weight:700;
      box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
      white-space:nowrap;
    }

    /* Liste avec icône &#x26a1; pour le thème */
    ul{
      list-style:none;
      padding-left:0;
      margin-top:.6rem;
    }
    li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding: 6px 0;
    }
    li::before{
      content:"&#x26a1;";
      font-size:1.05em;
      line-height:1;
      margin-top: 2px;
      color: var(--yellow);
      text-shadow: 0 1px 0 rgba(0,0,0,.15);
    }

    /* Galerie */
    .gallery{
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
      margin-top:14px;
    }
    .gallery img{
      width:100%;
      height:auto;
      border-radius: 14px;
      background:#fff;
      border: 6px solid #fff;
      box-shadow: 0 10px 24px rgba(0,0,0,.15);
      transition: transform .35s ease, box-shadow .35s ease;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }
    .gallery img:hover{
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 16px 32px rgba(0,0,0,.20);
    }

    /* Footer */
    footer{
      text-align:center;
      padding: 20px 12px;
      background: linear-gradient(90deg, var(--blue-d), var(--blue));
      color:#fff;
      font-size:.95rem;
    }

    /* Responsive */
    @media (min-width:768px){
      .gallery{ grid-template-columns: repeat(2, 1fr); }
    }

    /* Accessibilité : réduire les animations si demandé */
    @media (prefers-reduced-motion: reduce){
      *{ animation: none !important; transition: none !important; }
    }
  </style>
</head>
<body>

  <header>
    <div class="brand">
      <img decoding="async" src="https://julien-animateur.fr/wp-content/uploads/2025/07/International_Pokemon_logo.svg.png" alt="Logo Pokémon" />
      <h1>Projet Pokémon – Activité Élémentaire</h1>
    </div>
  </header>

  <main class="container">

    <section class="section">
      <h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3a8.png" alt="🎨" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Création des cartes Pokémon</h2>
      <p>À l’aide d’<span class="highlight">Illustrator</span>, j’ai conçu des cartes Pokémon personnalisées. Les enfants les ont ensuite <strong>découpées</strong> et <strong>collées au dos</strong> de cartes cartonnées pour en faire leurs propres versions du jeu.</p>
    </section>

    <section class="section">
      <h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f9e9.png" alt="🧩" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Plateau de jeu Pokémon</h2>
      <p>J’ai également conçu un <strong>plateau de jeu</strong> inspiré du jeu Pokémon officiel. Il a été imprimé et plastifié pour un usage en autonomie dans l’espace élémentaire.</p>
      <div class="gallery">
        <img decoding="async" src="https://julien-animateur.fr/wp-content/uploads/2025/07/Design-sans-titre-14.png" alt="Plateau de jeu Pokémon créé pour les enfants" />
      </div>
    </section>

    <section class="section">
      <h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f4d8.png" alt="📘" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Règles du jeu adaptées</h2>
      <p>J’ai expliqué aux enfants les <strong>règles simplifiées</strong> du jeu :</p>
      <ul>
        <li>Comment lancer un combat Pokémon</li>
        <li>Utilisation des cartes Énergie</li>
        <li>Évolution des Pokémon</li>
        <li>Gestion des PV et attaques</li>
      </ul>
    </section>

    <section class="section">
      <h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f9e0.png" alt="🧠" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Jeu en libre service</h2>
      <p>Une fois les règles intégrées, les enfants peuvent désormais jouer en <span class="highlight">autonomie</span> avec leurs cartes et le plateau. Ce projet leur permet de développer leur <strong>créativité</strong>, leur <strong>stratégie</strong> et leur <strong>coopération</strong>.</p>
    </section>

  </main>

</body>
</html>
</div>
						</div>
				</div>
		<div class="elementor-element elementor-element-d866c9f e-flex e-con-boxed e-con e-parent" data-id="d866c9f" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-1d2afb5 e-con-full e-flex e-con e-child" data-id="1d2afb5" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-3d16f3f elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button" data-id="3d16f3f" data-element_type="widget" data-e-type="widget" data-widget_type="button.default">
										<a class="elementor-button elementor-button-link elementor-size-sm" href="https://julien-animateur.fr">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-arrow-alt-circle-right" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"></path></svg>			</span>
									<span class="elementor-button-text">RETOUR AU SITE</span>
					</span>
					</a>
								</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
					<wfw:commentRss>https://julien-animateur.fr/cartes-pokemon/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>SEMAINES URBAINES</title>
		<link>https://julien-animateur.fr/semaines-urbaines/</link>
					<comments>https://julien-animateur.fr/semaines-urbaines/#respond</comments>
		
		<dc:creator><![CDATA[contact@praful-design.fr]]></dc:creator>
		<pubDate>Sat, 26 Jul 2025 20:42:59 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<guid isPermaLink="false">https://julien-animateur.fr/?p=2645</guid>

					<description><![CDATA[Semaine Urbaine – Culture Hip-Hop SEMAINE URBAINE La Semaine Urbaine est un événement annuel dédié à la culture hip-hop. Pendant une semaine, les enfants explorent plusieurs disciplines artistiques qui composent cet univers riche et expressif. Voici les ateliers proposés cette année : 🎤 Beatbox Les enfants ont appris à reproduire des sons de percussions uniquement [&#8230;]]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="2645" class="elementor elementor-2645">
				<div class="elementor-element elementor-element-e174865 e-con-full e-flex e-con e-parent" data-id="e174865" data-element_type="container" data-e-type="container">
		<div class="elementor-element elementor-element-f603484 e-con-full e-flex e-con e-child" data-id="f603484" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
				</div>
				</div>
		<div class="elementor-element elementor-element-3b64643 e-flex e-con-boxed e-con e-parent" data-id="3b64643" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-e0494b9 e-con-full e-flex e-con e-child" data-id="e0494b9" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-5f31b8e elementor-widget__width-inherit elementor-widget elementor-widget-html" data-id="5f31b8e" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
					<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Semaine Urbaine – Culture Hip-Hop</title>
  <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Oswald:wght@400;700&display=swap" rel="stylesheet">
  <style>
    html {
      overflow-y: scroll;
    }
    :root {
      --violet: #9C5CF5;
      --noir: #1a1a1a;
      --blanc: #f0f0f0;
      --accent: #f97316;
    }
    body {
      margin: 0;
      font-family: 'Oswald', sans-serif;
      background-color: var(--noir);
      color: var(--blanc);
      line-height: 1.6;
    }
    .container {
      max-width: 1000px;
      margin: auto;
      padding: 40px 20px;
    }
    h1 {
      font-family: 'Permanent Marker', cursive;
      font-size: 42px;
      text-align: center;
      color: var(--accent);
      animation: fadeInDown 1s ease-out forwards;
    }
    .intro-text {
      animation: fadeInUp 1s ease-out forwards;
      margin-bottom: 40px;
    }
    .intro-text p {
      font-size: 18px;
      margin-bottom: 20px;
    }
    .accordion {
      border-top: 1px solid #444;
    }
    .accordion-item {
      border-bottom: 1px solid #444;
    }
    .accordion-title {
      background-color: var(--violet);
      color: #fff;
      cursor: pointer;
      padding: 15px 20px;
      font-weight: bold;
      font-size: 18px;
      position: relative;
      transition: background 0.3s ease;
    }
    .accordion-title:hover {
      background-color: #7e40d8;
    }
    .accordion-title::after {
      content: "+";
      position: absolute;
      right: 20px;
      font-size: 20px;
      transition: transform 0.3s ease;
    }
    .accordion-title.active::after {
      content: "-";
    }
    .accordion-content {
      max-height: 0;
      overflow: hidden;
      background-color: #2a2a2a;
      transition: max-height 0.5s ease;
    }
    .accordion-content p {
      padding: 20px;
      margin: 0;
      font-size: 16px;
      color: #ddd;
    }
    @keyframes fadeInDown {
      0% {opacity: 0; transform: translateY(-30px);}
      100% {opacity: 1; transform: translateY(0);}
    }
    @keyframes fadeInUp {
      0% {opacity: 0; transform: translateY(30px);}
      100% {opacity: 1; transform: translateY(0);}
    }
    @media (max-width: 768px) {
      h1 {
        font-size: 32px;
      }
      .intro-text p {
        font-size: 16px;
      }
      .accordion-title {
        font-size: 16px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>SEMAINE URBAINE</h1>
    <div class="intro-text">
      <p>
        La <strong>Semaine Urbaine</strong> est un événement annuel dédié à la <strong>culture hip-hop</strong>. Pendant une semaine, les enfants explorent plusieurs disciplines artistiques qui composent cet univers riche et expressif.
      </p>
      <p>Voici les ateliers proposés cette année :</p>
    </div>
    <div class="accordion">
      <div class="accordion-item">
        <div class="accordion-title"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3a4.png" alt="🎤" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Beatbox</div>
        <div class="accordion-content">
          <p>Les enfants ont appris à reproduire des sons de percussions uniquement avec leur bouche ! Une initiation ludique qui développe l’écoute, le rythme et la confiance vocale.</p>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-title"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f57a.png" alt="🕺" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Breakdance</div>
        <div class="accordion-content">
          <p>Ils ont découvert les bases du break avec des pas dynamiques et des figures au sol, tout en développant leur souplesse et leur sens du rythme.</p>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-title"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3a7.png" alt="🎧" class="wp-smiley" style="height: 1em; max-height: 1em;" /> DJing</div>
        <div class="accordion-content">
          <p>Avec un contrôleur DJ, les enfants ont mixé deux musiques, utilisé les effets, les loops, et même découvert les bases du scratch !</p>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-title"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3a4.png" alt="🎤" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Rap</div>
        <div class="accordion-content">
          <p>À travers l’écriture et le flow, ils ont créé leurs propres textes sur des thèmes choisis, en découvrant le plaisir de s’exprimer en rythme.</p>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-title"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3a8.png" alt="🎨" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Graffiti</div>
        <div class="accordion-content">
          <p>Encadrés par un artiste, ils ont appris à créer leur blaze, à utiliser les bombes en toute sécurité, et à peindre un mur collectif dans un esprit de collaboration.</p>
        </div>
      </div>
    </div>
  </div>
  <script>
    const titles = document.querySelectorAll('.accordion-title');
    titles.forEach(title => {
      title.addEventListener('click', () => {
        const content = title.nextElementSibling;
        const isActive = title.classList.contains('active');
        document.querySelectorAll('.accordion-content').forEach(c => {
          c.style.maxHeight = null;
        });
        document.querySelectorAll('.accordion-title').forEach(t => {
          t.classList.remove('active');
        });
        if (!isActive) {
          title.classList.add('active');
          content.style.maxHeight = content.scrollHeight + "px";
        }
      });
    });
  </script>
</body>
</html>				</div>
		<div class="elementor-element elementor-element-7191aa2 e-flex e-con-boxed e-con e-child" data-id="7191aa2" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-6b1b66c elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel" data-id="6b1b66c" data-element_type="widget" data-e-type="widget" data-settings="{&quot;navigation&quot;:&quot;both&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;speed&quot;:500}" data-widget_type="image-carousel.default">
							<div class="elementor-image-carousel-wrapper swiper" role="region" aria-roledescription="carousel" aria-label="Carrousel d’images" dir="ltr">
			<div class="elementor-image-carousel swiper-wrapper swiper-image-stretch" aria-live="off">
								<div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="1 sur 9"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/elementor/thumbs/IMG_6315-scaled-rbpi3nocnj0dmk0wzy0ieq946mude68qjgc7vliiew.jpeg" alt="IMG_6315" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="2 sur 9"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/elementor/thumbs/IMG_6370-scaled-rbpi3pk1172y9ry6oytrjps1del3tkg77pn6u5fq2g.jpeg" alt="IMG_6370" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="3 sur 9"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/elementor/thumbs/AFFICHE-HIP-HOP-scaled-rbpi3pk1172y9ry6oytrjps1del3tkg77pn6u5fq2g.jpg" alt="AFFICHE-HIP-HOP" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="4 sur 9"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/elementor/thumbs/IMG_6311-scaled-rbpi3nocnj0dmk0wzy0ieq946mude68qjgc7vliiew.jpeg" alt="IMG_6311" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="5 sur 9"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/elementor/thumbs/IMG_6324-scaled-rbpi3nocnj0dmk0wzy0ieq946mude68qjgc7vliiew.jpeg" alt="IMG_6324" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="6 sur 9"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/elementor/thumbs/IMG_6486-rbpi3kuu30winq50gesmp8yqeh89r2xjj2drfrmoxk.jpeg" alt="Screenshot" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="7 sur 9"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/elementor/thumbs/IMG_9073-scaled-rbpi3nocnj0dmk0wzy0ieq946mude68qjgc7vliiew.jpeg" alt="IMG_9073" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="8 sur 9"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/elementor/thumbs/IMG_9102-1-scaled-rbpi3nocnj0dmk0wzy0ieq946mude68qjgc7vliiew.jpeg" alt="IMG_9102" /></figure></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="9 sur 9"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://julien-animateur.fr/wp-content/uploads/elementor/thumbs/IMG_8998-scaled-rbpi3mqigoz3ay2a5flvu8hnl8z06h507boqebjwl4.jpeg" alt="IMG_8998" /></figure></div>			</div>
												<div class="elementor-swiper-button elementor-swiper-button-prev" role="button" tabindex="0">
						<svg aria-hidden="true" class="e-font-icon-svg e-eicon-chevron-left" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z"></path></svg>					</div>
					<div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0">
						<svg aria-hidden="true" class="e-font-icon-svg e-eicon-chevron-right" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M696 533C708 521 713 504 713 487 713 471 708 454 696 446L400 146C388 133 375 125 354 125 338 125 325 129 313 142 300 154 292 171 292 187 292 204 296 221 308 233L563 492 304 771C292 783 288 800 288 817 288 833 296 850 308 863 321 871 338 875 354 875 371 875 388 867 400 854L696 533Z"></path></svg>					</div>
				
									<div class="swiper-pagination"></div>
									</div>
						</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-3dd5e90 e-con-full e-flex e-con e-child" data-id="3dd5e90" data-element_type="container" data-e-type="container">
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-cb7b5c8 e-flex e-con-boxed e-con e-parent" data-id="cb7b5c8" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-1c75dc3 elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button" data-id="1c75dc3" data-element_type="widget" data-e-type="widget" data-widget_type="button.default">
										<a class="elementor-button elementor-button-link elementor-size-sm" href="https://julien-animateur.fr">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-arrow-alt-circle-right" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"></path></svg>			</span>
									<span class="elementor-button-text">RETOUR AU SITE</span>
					</span>
					</a>
								</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
					<wfw:commentRss>https://julien-animateur.fr/semaines-urbaines/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>ATELIER DESSIN NUMÉRIQUE</title>
		<link>https://julien-animateur.fr/atelier-dessin-numerique/</link>
					<comments>https://julien-animateur.fr/atelier-dessin-numerique/#respond</comments>
		
		<dc:creator><![CDATA[contact@praful-design.fr]]></dc:creator>
		<pubDate>Sat, 26 Jul 2025 19:10:54 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<guid isPermaLink="false">https://julien-animateur.fr/?p=2583</guid>

					<description><![CDATA[Atelier Graphiste : Dessin Numérique avec Spider-Man Atelier Dessin Numérique Deviens un super-héros de la création avec Spider-Man ! La Découverte d&#8217;un Pouvoir Créatif Lors de cet atelier exceptionnel, les enfants ont plongé dans l&#8217;univers fascinant du dessin sur tablette numérique. Pour apprivoiser ce nouvel outil, qui de mieux que l&#8217;un de leurs héros préférés [&#8230;]]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="2583" class="elementor elementor-2583">
				<div class="elementor-element elementor-element-bcc1247 e-con-full e-flex e-con e-parent" data-id="bcc1247" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
				<div class="elementor-element elementor-element-360399a elementor-widget__width-inherit elementor-widget elementor-widget-image" data-id="360399a" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
															<img decoding="async" width="800" height="293" src="https://julien-animateur.fr/wp-content/uploads/2025/07/TITRE-ATELIER-DESSIN-NUMERIQUE.png" class="attachment-large size-large wp-image-2587" alt="" srcset="https://julien-animateur.fr/wp-content/uploads/2025/07/TITRE-ATELIER-DESSIN-NUMERIQUE.png 1000w, https://julien-animateur.fr/wp-content/uploads/2025/07/TITRE-ATELIER-DESSIN-NUMERIQUE-300x110.png 300w, https://julien-animateur.fr/wp-content/uploads/2025/07/TITRE-ATELIER-DESSIN-NUMERIQUE-768x281.png 768w" sizes="(max-width: 800px) 100vw, 800px" />															</div>
				</div>
		<div class="elementor-element elementor-element-af25e58 e-flex e-con-boxed e-con e-parent" data-id="af25e58" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-0e390e6 elementor-widget__width-inherit elementor-widget elementor-widget-html" data-id="0e390e6" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
					<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atelier Graphiste : Dessin Numérique avec Spider-Man</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --spidey-red: #d10007;
            --spidey-blue: #005c97;
            --dark-bg: #121212;
            --light-text: #f0f0f0;
            --grey-text: #aaa;
        }
        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--dark-bg);
            color: var(--light-text);
            margin: 0;
            padding: 0;
            line-height: 1.6;
            background-image:
                radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            background-position: 0 0, 20px 20px;
        }
        .container {
            max-width: 900px;
            margin: 20px auto;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.7);
            border: 2px solid var(--spidey-red);
            box-shadow: 0 0 15px rgba(209, 0, 7, 0.5);
            border-radius: 10px;
        }
        header {
            text-align: center;
            padding-bottom: 20px;
            border-bottom: 4px solid var(--spidey-blue);
        }
        header h1 {
            font-family: 'Bangers', cursive;
            font-size: 4rem;
            color: var(--spidey-red);
            margin: 0;
            letter-spacing: 3px;
            text-shadow: 3px 3px 0 var(--spidey-blue), -1px -1px 0 var(--spidey-blue), 1px -1px 0 var(--spidey-blue), -1px 1px 0 var(--spidey-blue), 1px 1px 0 var(--spidey-blue);
        }
        header p {
            font-size: 1.2rem;
            color: var(--light-text);
        }
        main {
            padding: 20px 0;
        }
        h2 {
            font-family: 'Bangers', cursive;
            font-size: 2.5rem;
            color: var(--spidey-blue);
            text-align: center;
            letter-spacing: 2px;
            border-bottom: 2px solid var(--spidey-red);
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .intro, .gallery {
            margin-bottom: 30px;
        }
        .intro p {
            text-align: justify;
            font-size: 1.1rem;
        }
        .workshop-image {
            width: 100%;
            border-radius: 8px;
            border: 3px solid var(--light-text);
            box-shadow: 0 0 10px rgba(0, 92, 151, 0.7);
        }
        .gallery {
            text-align: center;
        }
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        .gallery-item {
            background-color: #222;
            padding: 15px;
            border-radius: 8px;
            border: 2px solid var(--spidey-blue);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 0 15px rgba(209, 0, 7, 0.8);
        }
        .gallery-item img {
            width: 100%;
            border-radius: 5px;
        }
        .gallery-item figcaption {
            margin-top: 10px;
            font-weight: bold;
            color: var(--spidey-red);
        }
        .audio-container {
            background: #222;
            padding: 15px 20px;
            border: 2px solid var(--spidey-blue);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            margin-top: 30px;
        }
        .audio-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            gap: 15px;
            flex-wrap: wrap;
        }
        .control-btn {
            background: transparent;
            border: 2px solid var(--spidey-red);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.2s, transform 0.2s;
        }
        .control-btn:hover {
            background-color: var(--spidey-red);
            transform: scale(1.1);
        }
        .control-btn svg {
            fill: var(--light-text);
            width: 36px;
            height: 36px;
        }
        .time-display {
            font-family: 'Bangers', cursive;
            color: var(--grey-text);
            font-size: 1.2rem;
            letter-spacing: 1px;
        }
        .progress-container {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 8px;
            background: #444;
            border-radius: 5px;
            cursor: pointer;
            outline: none;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: var(--spidey-red);
            border-radius: 50%;
            border: 2px solid var(--light-text);
        }
        input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            background: var(--spidey-red);
            border-radius: 50%;
            border: 2px solid var(--light-text);
        }
        .volume-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .volume-container .control-btn {
            width: 50px;
            height: 50px;
            border-color: var(--spidey-blue);
        }
        .volume-container .control-btn:hover {
            background-color: var(--spidey-blue);
        }
        .volume-container input[type="range"] {
            width: 100px;
        }
        footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 2px solid var(--spidey-blue);
            color: #888;
        }
        @media (max-width: 600px) {
            .container {
                margin: 10px;
                padding: 15px;
            }
            header h1 {
                font-size: 2.8rem;
                text-shadow: 2px 2px 0 var(--spidey-blue), -1px -1px 0 var(--spidey-blue), 1px -1px 0 var(--spidey-blue), -1px 1px 0 var(--spidey-blue), 1px 1px 0 var(--spidey-blue);
            }
            h2 {
                font-size: 2rem;
            }
            .audio-controls {
                justify-content: space-between;
            }
            .progress-container {
                order: 1;
                flex-basis: 100%;
            }
            .play-pause-btn { order: 2; }
            .volume-container { order: 3; }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Atelier Dessin Numérique</h1>
            <p>Deviens un super-héros de la création avec Spider-Man !</p>
        </header>
        <main>
            <section class="intro">
                <h2>La Découverte d'un Pouvoir Créatif</h2>
                <p>
                    Lors de cet atelier exceptionnel, les enfants ont plongé dans l'univers fascinant du dessin sur tablette numérique. Pour apprivoiser ce nouvel outil, qui de mieux que l'un de leurs héros préférés ? L'agile et créatif Spider-Man !
                </p>
                <img decoding="async" src="https://julien-animateur.fr/wp-content/uploads/2025/07/DESSIN-NUMERIQUE-1.jpg" alt="Enfants participant à l'atelier de dessin sur tablette" class="workshop-image">
                <p style="margin-top: 20px;">
                    Chaque enfant a pu, pas à pas, apprendre les bases du dessin digital : gestion des calques, choix des couleurs, utilisation des différents pinceaux... Une aventure où la seule limite était leur imagination, guidée par les acrobaties de l'homme-araignée.
                </p>
            </section>
            <section class="gallery">
                <h2>Les Œuvres de nos Artistes</h2>
                <div class="gallery-grid">
                    <figure class="gallery-item">
                        <img decoding="async" src="https://julien-animateur.fr/wp-content/uploads/2025/08/Image-3D.png" alt="Dessin final de Spider-Man en couleur">
                        <figcaption>Spider-Man, prêt à l'action !</figcaption>
                    </figure>
                    <figure class="gallery-item">
                        <img decoding="async" src="https://julien-animateur.fr/wp-content/uploads/2025/08/Spider-Man-2.png" alt="Dessin de Spider-Man en noir et blanc">
                        <figcaption>Le côté sombre de la toile</figcaption>
                    </figure>
                </div>
            </section>
            <section>
                <h2>Mets-toi dans l'ambiance !</h2>
                <div class="audio-container">
                    <audio id="audio" src="https://julien-animateur.fr/wp-content/uploads/2025/07/Marvels-Spider-Man-Spider-Man-PS4-Main-Theme-Full.mp3"></audio>
                    <div class="progress-container">
                        <span id="currentTime" class="time-display">0:00</span>
                        <input type="range" id="progressBar" value="0" step="1" min="0">
                        <span id="duration" class="time-display">0:00</span>
                    </div>
                    <div class="audio-controls">
                        <button id="playPauseBtn" class="control-btn play-pause-btn">
                            <svg id="playIcon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
                            <svg id="pauseIcon" viewBox="0 0 24 24" style="display: none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
                        </button>
                        <div class="volume-container">
                            <button id="muteBtn" class="control-btn">
                                <svg id="volumeIcon" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></svg>
                                <svg id="muteIcon" viewBox="0 0 24 24" style="display: none;"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"></path></svg>
                            </button>
                            <input type="range" id="volumeBar" min="0" max="1" step="0.1" value="1">
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <footer>
            <p>Atelier animé avec passion. Création web propulsée par l'imagination.</p>
        </footer>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Sélection des éléments du DOM
            const audio = document.getElementById('audio');
            const playPauseBtn = document.getElementById('playPauseBtn');
            const playIcon = document.getElementById('playIcon');
            const pauseIcon = document.getElementById('pauseIcon');
            const progressBar = document.getElementById('progressBar');
            const currentTimeEl = document.getElementById('currentTime');
            const durationEl = document.getElementById('duration');
            const muteBtn = document.getElementById('muteBtn');
            const volumeIcon = document.getElementById('volumeIcon');
            const muteIcon = document.getElementById('muteIcon');
            const volumeBar = document.getElementById('volumeBar');

            // Vérifier que tous les éléments existent
            if (!audio || !playPauseBtn || !playIcon || !pauseIcon || !progressBar || !currentTimeEl || !durationEl || !muteBtn || !volumeIcon || !muteIcon || !volumeBar) {
                console.error('Un ou plusieurs éléments du DOM sont introuvables.');
                return;
            }

            // --- FONCTIONS ---
            // Fonction pour formater le temps en minutes:secondes
            function formatTime(seconds) {
                const minutes = Math.floor(seconds / 60);
                const secs = Math.floor(seconds % 60);
                return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
            }

            // Fonction pour mettre à jour l'icône Play/Pause
            function updatePlayPauseIcon() {
                if (audio.paused) {
                    playIcon.style.display = 'block';
                    pauseIcon.style.display = 'none';
                } else {
                    playIcon.style.display = 'none';
                    pauseIcon.style.display = 'block';
                }
            }

            // Fonction pour gérer la lecture/pause
            function togglePlayPause() {
                if (audio.paused) {
                    audio.play().catch(error => {
                        console.error('Erreur lors de la lecture audio :', error);
                    });
                } else {
                    audio.pause();
                }
                updatePlayPauseIcon();
            }

            // Fonction pour mettre à jour la barre de progression
            function updateProgress() {
                progressBar.value = audio.currentTime;
                currentTimeEl.textContent = formatTime(audio.currentTime);
            }

            // --- ÉVÉNEMENTS ---
            // Quand les métadonnées de l'audio sont chargées
            audio.addEventListener('loadedmetadata', () => {
                durationEl.textContent = formatTime(audio.duration);
                progressBar.max = audio.duration;
            });

            // Gestion des erreurs de chargement audio
            audio.addEventListener('error', (e) => {
                console.error('Erreur de chargement audio :', e);
            });

            // Clic sur le bouton Play/Pause
            playPauseBtn.addEventListener('click', togglePlayPause);

            // Mise à jour de la barre de progression pendant la lecture
            audio.addEventListener('timeupdate', updateProgress);

            // Quand on déplace le curseur de la barre de progression
            progressBar.addEventListener('input', () => {
                audio.currentTime = progressBar.value;
                updateProgress();
            });

            // Quand la musique se termine
            audio.addEventListener('ended', () => {
                updatePlayPauseIcon();
                audio.currentTime = 0;
                progressBar.value = 0;
            });

            // Gestion du volume
            volumeBar.addEventListener('input', (e) => {
                audio.volume = e.target.value;
                audio.muted = e.target.value == 0;
            });

            // Gestion du bouton Mute
            muteBtn.addEventListener('click', () => {
                audio.muted = !audio.muted;
            });

            // Mise à jour des icônes de volume
            audio.addEventListener('volumechange', () => {
                volumeBar.value = audio.volume;
                if (audio.muted || audio.volume == 0) {
                    volumeIcon.style.display = 'none';
                    muteIcon.style.display = 'block';
                } else {
                    volumeIcon.style.display = 'block';
                    muteIcon.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>
```				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-840ca14 e-flex e-con-boxed e-con e-parent" data-id="840ca14" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-c6c40ae elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button" data-id="c6c40ae" data-element_type="widget" data-e-type="widget" data-widget_type="button.default">
										<a class="elementor-button elementor-button-link elementor-size-sm" href="https://julien-animateur.fr">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-arrow-alt-circle-right" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"></path></svg>			</span>
									<span class="elementor-button-text">RETOUR AU SITE</span>
					</span>
					</a>
								</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
					<wfw:commentRss>https://julien-animateur.fr/atelier-dessin-numerique/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://julien-animateur.fr/wp-content/uploads/2025/07/Marvels-Spider-Man-Spider-Man-PS4-Main-Theme-Full.mp3" length="4310968" type="audio/mpeg" />

			</item>
		<item>
		<title>ARC EN CIEL &#8211; MUSIQUE THÈME CAMPING</title>
		<link>https://julien-animateur.fr/arc-en-ciel-musique-theme-camping/</link>
					<comments>https://julien-animateur.fr/arc-en-ciel-musique-theme-camping/#respond</comments>
		
		<dc:creator><![CDATA[contact@praful-design.fr]]></dc:creator>
		<pubDate>Sat, 26 Jul 2025 15:49:41 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<guid isPermaLink="false">https://julien-animateur.fr/?p=2496</guid>

					<description><![CDATA[Clip « Arc-en-Ciel » Projet enfants 🎬 Clip « Arc-en-Ciel » Un projet artistique complet mené avec les enfants : de l’écriture à la musique, de l’enregistrement au clip final — le tout dans une ambiance fun et professionnelle. Création musicale Les enfants ont composé leur propre chanson en s’inspirant de leurs mots, leurs idées et leurs [&#8230;]]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="2496" class="elementor elementor-2496">
				<div class="elementor-element elementor-element-8a4927d e-flex e-con-boxed e-con e-parent" data-id="8a4927d" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-945479f e-con-full e-flex e-con e-child" data-id="945479f" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-a4e15b0 elementor-widget elementor-widget-presto_video" data-id="a4e15b0" data-element_type="widget" data-e-type="widget" data-widget_type="presto_video.default">
				<div class="elementor-widget-container">
					
			
			
										
			
							</div>
				</div>
		<div class="elementor-element elementor-element-1c7f1db e-con-full e-flex e-con e-child" data-id="1c7f1db" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-c529e20 elementor-widget elementor-widget-shortcode" data-id="c529e20" data-element_type="widget" data-e-type="widget" data-widget_type="shortcode.default">
							<div class="elementor-shortcode"><!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Clip "Arc-en-Ciel"</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Inter -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

  <style>
    :root{
      --violet:#9C5CF5;
      --violet-2:#C78BF7;
      --ink:#130F49;
      --muted:#68627E;
      --bg:#ffffff;
      --bg-soft:#F9F6FF;
      --line:#ECE8FA;
      --radius:18px;
      --shadow:0 20px 50px rgba(20,12,56,.10);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
      color:var(--ink);
      background:
        radial-gradient(1200px 600px at 10% -10%, rgba(156,92,245,.18), transparent 60%),
        radial-gradient(900px 500px at 120% 10%, rgba(199,139,247,.18), transparent 55%),
        linear-gradient(180deg, var(--bg-soft), #EEE9FF);
      padding: 28px 20px env(safe-area-inset-bottom);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .cec-shell{
      width:100%;
      max-width:1000px;
      position:relative;
    }

    /* Carte contenant avec bordure dégradée */
    .cec-wrap{
      position:relative;
      border-radius:calc(var(--radius) + 2px);
      padding:1.5px; /* pour le contour dégradé */
      background:
        linear-gradient(#fff,#fff) padding-box,
        conic-gradient(from 180deg at 50% 50%,
          #EDE6FF 0%,
          var(--violet) 20%,
          #EDE6FF 40%,
          var(--violet-2) 60%,
          #EDE6FF 80%,
          var(--violet) 100%) border-box;
      box-shadow: var(--shadow);
    }

    .cec-card{
      border-radius:var(--radius);
      background:
        linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.88));
      backdrop-filter:saturate(1.2) blur(6px);
      border:1px solid var(--line);
      overflow:hidden;
    }

    /* Header */
    .cec-head{
      padding:28px 26px 12px;
      text-align:center;
      position:relative;
    }
    .cec-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-weight:600;
      color:var(--violet);
      background:rgba(156,92,245,.10);
      border:1px solid rgba(156,92,245,.25);
      padding:6px 12px;
      border-radius:999px;
      margin-bottom:14px;
    }
    .cec-badge i{font-size:14px}

    h1{
      margin:0 0 10px;
      font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
      line-height:1.1;
      letter-spacing:-.02em;
      background: linear-gradient(90deg, var(--ink), var(--violet));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .cec-sub{
      margin:0 auto;
      max-width:680px;
      color:var(--muted);
      font-size:clamp(.95rem,.85rem + .3vw,1.05rem);
      line-height:1.5;
    }

    /* Soulignement animé discret */
    .cec-underline{
      height:10px;
      display:block;
      margin:18px auto 0;
      width:min(220px,50%);
      background:
        radial-gradient(60% 100% at 50% 0%, rgba(156,92,245,.25), transparent 70%);
      mask: linear-gradient(90deg, transparent, #000 15% 85%, transparent);
    }

    /* Grille */
    .cec-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap:18px;
      padding:22px;
    }

    /* Item */
    .cec-item{
      position:relative;
      padding:18px 16px 16px;
      border:1px solid var(--line);
      border-radius:14px;
      background:linear-gradient(180deg,#FFF, #FAF7FF 85%);
      transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
      will-change: transform;
    }
    .cec-item:hover{
      transform: translateY(-6px);
      box-shadow: 0 14px 30px rgba(156,92,245,.18);
    }

    /* Icône circulaire */
    .cec-icon{
      width:52px;height:52px;
      display:grid;place-items:center;
      border-radius:12px;
      background:
        radial-gradient(120% 120% at 20% 0%, #FFFFFF 0%, rgba(255,255,255,.7) 35%, transparent 36%) padding-box,
        linear-gradient(135deg, var(--violet), var(--violet-2)) border-box;
      border:2px solid transparent;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 6px 16px rgba(156,92,245,.35);
      margin-bottom:12px;
    }
    .cec-icon i{color:#fff;font-size:22px}

    .cec-title{
      margin:4px 0 6px;
      font-size:1.05rem;
      font-weight:800;
      color:#211A3F;
      letter-spacing:-.01em;
    }
    .cec-text{
      margin:0;
      color:#5a5670;
      font-size:.95rem;
      line-height:1.5;
    }

    /* Stagger d’apparition */
    @keyframes cec-fadeUp{
      from{opacity:0; transform: translateY(10px)}
      to{opacity:1; transform: translateY(0)}
    }
    .cec-item{opacity:0; animation: cec-fadeUp .55s both}
    .cec-item:nth-child(1){animation-delay:.02s}
    .cec-item:nth-child(2){animation-delay:.06s}
    .cec-item:nth-child(3){animation-delay:.10s}
    .cec-item:nth-child(4){animation-delay:.14s}
    .cec-item:nth-child(5){animation-delay:.18s}
    .cec-item:nth-child(6){animation-delay:.22s}

    /* Footer doux */
    .cec-foot{
      padding:8px 22px 22px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:center;
    }
    .chip{
      font-size:.9rem;
      color:#3c3463;
      background:#F2ECFF;
      border:1px solid var(--line);
      padding:8px 12px;
      border-radius:999px;
      display:inline-flex; align-items:center; gap:8px;
    }
    .chip i{color:var(--violet)}

    /* Mobile */
    @media (max-width:600px){
      .cec-grid{gap:12px;padding:16px}
      .cec-head{padding:22px 18px 6px}
      .cec-foot{padding:0 16px 16px}
    }

    /* Motion accessibility */
    @media (prefers-reduced-motion:reduce){
      .cec-item, .cec-item:hover{transition:none}
      .cec-item{animation:none; opacity:1}
    }

    /* Dark auto (optionnel, si l’OS est en sombre) */
    @media (prefers-color-scheme: dark){
      :root{ --bg:#12121A; --bg-soft:#161626; --ink:#F6F5FF; --muted:#BAB6CF; --line:#2B2640 }
      body{ background:
        radial-gradient(1200px 600px at 10% -10%, rgba(156,92,245,.22), transparent 60%),
        radial-gradient(900px 500px at 120% 10%, rgba(199,139,247,.16), transparent 55%),
        linear-gradient(180deg, #12121A, #18152A);}
      .cec-card{ background:linear-gradient(180deg,rgba(22,22,38,.9),rgba(22,22,38,.86));}
      .cec-item{ background:linear-gradient(180deg,#1D1A2E,#19172A 85%); }
      .cec-title{ color:#EDEAFB }
      .cec-text{ color:#CAC6DD }
      .chip{ background:#1E1B32; color:#E2DEFA }
    }
  </style>
</head>
<body>
  <main class="cec-shell" role="main">
    <div class="cec-wrap">
      <section class="cec-card" aria-labelledby="cec-title">
        <header class="cec-head">
          <span class="cec-badge"><i class="fa-solid fa-star"></i> Projet enfants</span>
          <h1 id="cec-title"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3ac.png" alt="🎬" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Clip « Arc-en-Ciel »</h1>
          <p class="cec-sub">Un projet artistique complet mené avec les enfants : de l’écriture à la musique, de l’enregistrement au clip final — le tout dans une ambiance fun et professionnelle.</p>
          <span class="cec-underline" aria-hidden="true"></span>
        </header>

        <div class="cec-grid" role="list">
          <article class="cec-item" role="listitem">
            <div class="cec-icon" aria-hidden="true"><i class="fa-solid fa-music"></i></div>
            <h3 class="cec-title">Création musicale</h3>
            <p class="cec-text">Les enfants ont composé leur propre chanson en s’inspirant de leurs mots, leurs idées et leurs émotions.</p>
          </article>

          <article class="cec-item" role="listitem">
            <div class="cec-icon" aria-hidden="true"><i class="fa-solid fa-microphone-lines"></i></div>
            <h3 class="cec-title">Enregistrement audio</h3>
            <p class="cec-text">En studio, les enfants ont enregistré leurs voix avec un micro Shure SM57 et une carte son Scarlett 2i2.</p>
          </article>

          <article class="cec-item" role="listitem">
            <div class="cec-icon" aria-hidden="true"><i class="fa-solid fa-wand-magic-sparkles"></i></div>
            <h3 class="cec-title">Autotune créatif</h3>
            <p class="cec-text">Un effet autotune a été ajouté pour donner une touche fun et corriger les petites fausses notes.</p>
          </article>

          <article class="cec-item" role="listitem">
            <div class="cec-icon" aria-hidden="true"><i class="fa-solid fa-video"></i></div>
            <h3 class="cec-title">Tournage du clip</h3>
            <p class="cec-text">Le clip a été tourné avec les enfants, mettant en valeur leur énergie et leur joie autour du thème du camping.</p>
          </article>

          <article class="cec-item" role="listitem">
            <div class="cec-icon" aria-hidden="true"><i class="fa-solid fa-film"></i></div>
            <h3 class="cec-title">Montage vidéo</h3>
            <p class="cec-text">Réalisé avec Adobe Premiere Pro, le montage met en lumière les meilleurs moments de cette belle aventure.</p>
          </article>

          <article class="cec-item" role="listitem">
            <div class="cec-icon" aria-hidden="true"><i class="fa-solid fa-headphones"></i></div>
            <h3 class="cec-title">Montage audio</h3>
            <p class="cec-text">Réalisé sur Logic Pro (iPad Pro M4), pour un rendu professionnel tout en gardant la fraîcheur des enfants.</p>
          </article>
        </div>

        <footer class="cec-foot" aria-label="Mots-clés">
          <span class="chip"><i class="fa-regular fa-circle-check"></i> Pédagogie active</span>
          <span class="chip"><i class="fa-regular fa-circle-check"></i> Expression artistique</span>
          <span class="chip"><i class="fa-regular fa-circle-check"></i> Travail d’équipe</span>
        </footer>
      </section>
    </div>
  </main>
</body>
</html></div>
						</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-bfb5891 e-con-full e-flex e-con e-child" data-id="bfb5891" data-element_type="container" data-e-type="container">
		<div class="elementor-element elementor-element-6d9d03c e-con-full e-flex e-con e-child" data-id="6d9d03c" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-5fe8761 elementor-widget elementor-widget-image" data-id="5fe8761" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
															<img decoding="async" width="330" height="186" src="https://julien-animateur.fr/wp-content/uploads/2025/08/IMG_0942.gif" class="attachment-large size-large wp-image-3854" alt="" />															</div>
				</div>
				<div class="elementor-element elementor-element-4bd301b elementor-widget elementor-widget-shortcode" data-id="4bd301b" data-element_type="widget" data-e-type="widget" data-widget_type="shortcode.default">
							<div class="elementor-shortcode"><div class="lyrics-container">
  <style>
    .lyrics-container {
      max-width: 900px;
      margin: 0auto;
      padding: 0 20px;
    }

    .lyrics {
      background-color: #f2e9ff;
      border-left: 6px solid #9C5CF5;
      border-radius: 12px;
      padding: 25px;
      font-size: 1em;
      line-height: 1.8;
      color: #333;
    }

    .lyrics h2 {
      color: #9C5CF5;
      text-align: center;
      margin-bottom: 20px;
    }

    .lyrics p {
      margin-bottom: 30px;
    }

    .lyrics strong {
      color: #9C5CF5;
    }
  </style>

  <div class="lyrics">
    <h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3b5.png" alt="🎵" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Paroles de la chanson</h2>

    <p><strong><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Refrain [TOUS ENSEMBLE]</strong><br>
    Arc en Ciel,<br>
    On met l’ambiance à fond.<br>
    Arc en Ciel,<br>
    Notre façon.<br>
    Arc en Ciel,<br>
    La danse et la chanson.<br>
    Arc en Ciel,<br>
    Vibrations !</p>

    <p><strong><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Couplet 1 [LEÏA & LYDIA]</strong><br>
    <strong>[ENAYA]</strong> J’aime la récré, courir avec les enfants,<br>
    Le midi à la cantine, on chante en mâchant.<br>
    Les animateurs nous guident, c’est motivant,<br>
    Et Julien fait le show, c’est le feu tout le temps.<br><br>
    <strong>[LEÏA]</strong> Arc en Ciel, des sourires plein les bras,<br>
    Arc en Ciel, on secoue les maracas !<br>
    Arc en Ciel, les spectacles et les shows,<br>
    Arc en Ciel, du love en stéréo.</p>

    <p><strong><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Refrain [TOUS LES ENFANTS]</strong><br>
    Arc en Ciel,<br>
    On met l’ambiance à fond.<br>
    Arc en Ciel,<br>
    Notre façon.<br>
    Arc en Ciel,<br>
    La danse et la chanson.<br>
    Arc en Ciel,<br>
    Vibrations !</p>

    <p><strong><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Couplet 2 [ARSÈNE & LEÏA]</strong><br>
    <strong>[ARSÈNE]</strong> J’adore les vacances, les veillées camping,<br>
    Avec ma lampe torche, c’est la nuit qu’on swing.<br>
    Les histoires de tante autour du feu qui crépite,<br>
    Les rires éclatent, la magie nous invite.<br><br>
    <strong>[LEÏA]</strong> Et quand les maracas lancent le rythme au micro,<br>
    Tout le monde danse jusqu’au dernier écho !<br>
    Arc en Ciel, on partage l’émotion,<br>
    Arc en Ciel, c’est bien plus qu’un prénom.<br>
    Arc en Ciel, souvenirs qui ne fanent pas,<br>
    Arc en Ciel, c’est la fête à chaque pas.</p>

    <p><strong><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Refrain [SACHA - VERSION SLOW]</strong><br>
    Arc en Ciel,<br>
    On met l’ambiance à fond.<br>
    Arc en Ciel,<br>
    C’est façon.<br>
    Arc en Ciel,<br>
    La danse et la chanson.<br>
    Arc en Ciel,<br>
    Vibrations !</p>

    <p><strong><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Refrain [ENSEMBLE]</strong><br>
    Arc en Ciel,<br>
    On met l’ambiance à fond.<br>
    Arc en Ciel,<br>
    C’est façon.<br>
    Arc en Ciel,<br>
    La danse et la chanson.<br>
    Arc en Ciel,<br>
    Vibrations !</p>
  </div>
</div>
</div>
						</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-6e4d21d e-flex e-con-boxed e-con e-parent" data-id="6e4d21d" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-2f938a7 elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button" data-id="2f938a7" data-element_type="widget" data-e-type="widget" data-widget_type="button.default">
										<a class="elementor-button elementor-button-link elementor-size-sm" href="https://julien-animateur.fr">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-arrow-alt-circle-right" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"></path></svg>			</span>
									<span class="elementor-button-text">RETOUR AU SITE</span>
					</span>
					</a>
								</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
					<wfw:commentRss>https://julien-animateur.fr/arc-en-ciel-musique-theme-camping/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>ARC EN SCÈNE</title>
		<link>https://julien-animateur.fr/arc-en-scene/</link>
					<comments>https://julien-animateur.fr/arc-en-scene/#respond</comments>
		
		<dc:creator><![CDATA[contact@praful-design.fr]]></dc:creator>
		<pubDate>Sat, 26 Jul 2025 14:22:09 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<guid isPermaLink="false">https://julien-animateur.fr/?p=2386</guid>

					<description><![CDATA[[2023] ARC EN SCENE V1 &#8211; SUPER ARC Il était une fois un petit garçon qui rêvait de devenir « Super Arc ». Il imaginait un monde où tous les enfants se rassembleraient autour de lui pour l&#8217;acclamer comme un héros. Visionnez maintenant le spectacle !  Lecteur Audio &#8211; Arc en Scène 0 (0 avis) 0:00 0:00 [&#8230;]]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="2386" class="elementor elementor-2386">
				<div class="elementor-element elementor-element-6d7c274 e-con-full e-flex e-con e-parent" data-id="6d7c274" data-element_type="container" data-e-type="container">
		<div class="elementor-element elementor-element-1fa0f30 e-con-full e-flex e-con e-child" data-id="1fa0f30" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
				<div class="elementor-element elementor-element-b2e547b elementor-widget elementor-widget-image" data-id="b2e547b" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
															<img loading="lazy" decoding="async" width="800" height="324" src="https://julien-animateur.fr/wp-content/uploads/2025/07/Logo-Spectacle.png" class="attachment-large size-large wp-image-2423" alt="" srcset="https://julien-animateur.fr/wp-content/uploads/2025/07/Logo-Spectacle.png 1000w, https://julien-animateur.fr/wp-content/uploads/2025/07/Logo-Spectacle-300x122.png 300w, https://julien-animateur.fr/wp-content/uploads/2025/07/Logo-Spectacle-768x311.png 768w" sizes="(max-width: 800px) 100vw, 800px" />															</div>
				</div>
		<div class="elementor-element elementor-element-7b78e09 e-flex e-con-boxed e-con e-child" data-id="7b78e09" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-b2005d1 e-con-full e-flex e-con e-child" data-id="b2005d1" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-9f00710 elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="9f00710" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
							<div class="elementor-icon-box-wrapper">

						<div class="elementor-icon-box-icon">
				<span  class="elementor-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-video" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z"></path></svg>				</span>
			</div>
			
						<div class="elementor-icon-box-content">

									<h3 class="elementor-icon-box-title">
						<span  >
							[2023] ARC EN SCENE V1 - SUPER ARC						</span>
					</h3>
				
									<p class="elementor-icon-box-description">
						Il était une fois un petit garçon qui rêvait de devenir "Super Arc". Il imaginait un monde où tous les enfants se rassembleraient autour de lui pour l'acclamer comme un héros.					</p>
				
			</div>
			
		</div>
						</div>
				<div class="elementor-element elementor-element-956f5e5 elementor-widget elementor-widget-text-editor" data-id="956f5e5" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
									<p>Visionnez maintenant le spectacle ! </p>								</div>
				<div class="elementor-element elementor-element-8d6db03 elementor-view-default elementor-widget elementor-widget-icon" data-id="8d6db03" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
							<div class="elementor-icon-wrapper">
			<div class="elementor-icon">
			<svg aria-hidden="true" class="e-font-icon-svg e-fas-arrow-down" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"></path></svg>			</div>
		</div>
						</div>
		<div class="elementor-element elementor-element-2240851 e-con-full e-flex e-con e-child" data-id="2240851" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-3d0abb3 elementor-widget elementor-widget-html" data-id="3d0abb3" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
					<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Lecteur Audio - Arc en Scène</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #f4f4f8;
      font-family: 'Inter', sans-serif;
    }

    .album-player {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      background: #f4f4f8;
      padding: 30px;
      border-radius: 20px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
      max-width: 1100px;
      margin: 40px auto;
    }

    .left-panel {
      width: 400px;
      background: #222;
      border-radius: 16px;
      padding: 20px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }

    .background-blur {
      position: absolute;
      inset: 0;
      background-image: url('https://julien-animateur.fr/wp-content/uploads/2025/07/ARC-EN-CIEL-2023-SUPER-ARC.jpg');
      background-size: cover;
      background-position: center;
      filter: blur(12px) brightness(0.6);
      z-index: 0;
      pointer-events: none;
    }

    .left-panel::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("https://www.transparenttextures.com/patterns/noise.png");
      opacity: 0.3;
      z-index: 1;
      pointer-events: none;
    }

    .album-cover,
    .track-info,
    .controls,
    #progress-bar,
    .time-info,
    .volume-control,
    .rating-control {
      position: relative;
      z-index: 2;
    }

    .album-cover {
      width: 100%;
      max-width: 180px;
      margin: 0 auto 20px;
      border-radius: 12px;
      display: block;
    }

    .track-info h3 {
      font-size: 20px;
      color: white;
      font-weight: bold;
      text-align: center;
      margin-bottom: 5px;
    }

    .track-info p {
      color: white;
      text-align: center;
      margin-bottom: 10px;
    }

    .rating-control {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      margin-bottom: 20px;
    }

    .star {
      cursor: pointer;
      width: 24px;
      height: 24px;
      fill: none;
      stroke: white;
      stroke-width: 2;
    }

    .star.filled {
      fill: #FFD700;
      stroke: #FFD700;
    }

    .rating-average {
      color: white;
      font-size: 14px;
      margin-left: 10px;
    }

    .controls {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin: 20px 0;
    }

    .svg-btn {
      background: #9C5CF5;
      border: none;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .svg-btn svg {
      width: 28px;
      height: 28px;
      fill: white;
    }

    #progress-bar {
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: white;
      appearance: none;
      margin-top: 10px;
    }

    #progress-bar::-webkit-slider-thumb {
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: white;
      cursor: pointer;
      margin-top: -4px;
    }

    #progress-bar::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: white;
      cursor: pointer;
      border: none;
    }

    .time-info {
      display: flex;
      justify-content: space-between;
      color: white;
      font-size: 14px;
      margin-top: 5px;
    }

    .volume-control {
      margin-top: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: white;
    }

    .volume-control input[type="range"] {
      flex: 1;
      accent-color: #9C5CF5;
    }

    .right-panel {
      flex: 1;
      min-width: 260px;
    }

    .right-panel h4 {
      font-size: 18px;
      margin-bottom: 15px;
      color: #333;
    }

    #playlist {
      list-style: none;
      padding: 0;
    }

    #playlist li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      margin-bottom: 8px;
      background-color: #e8e2fa;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s;
      color: #111;
    }

    #playlist li:hover {
      background-color: #d4c8ff;
    }

    #playlist li.active {
      background-color: #9C5CF5;
      color: white;
      font-weight: bold;
    }

    .download-section {
      margin-top: 30px;
      text-align: left;
    }

    .download-section p {
      color: #000;
    }

    .download-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: #9C5CF5;
      color: white;
      text-decoration: none;
      padding: 10px 16px;
      font-size: 14px;
      border-radius: 8px;
    }

    .download-btn:hover,
    .download-btn:focus,
    .download-btn span {
      color: white;
    }

    @media (max-width: 900px) {
      .album-player {
        flex-direction: column;
      }

      .left-panel,
      .right-panel {
        width: 100%;
      }

      .right-panel {
        margin-top: 30px;
      }
    }
  </style>
</head>
<body>

<div class="album-player">
  <div class="left-panel">
    <div class="background-blur"></div>
    <img decoding="async" class="album-cover" src="https://julien-animateur.fr/wp-content/uploads/2025/07/ARC-EN-CIEL-2023-SUPER-ARC.jpg" alt="Album Cover">
    <div class="track-info">
      <h3 id="track-title"></h3>
      <p id="track-artist"></p>
      <div class="rating-control">
        <svg class="star" data-rating="1" onclick="rateTrack(1)" viewBox="0 0 24 24">
          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
        </svg>
        <svg class="star" data-rating="2" onclick="rateTrack(2)" viewBox="0 0 24 24">
          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
        </svg>
        <svg class="star" data-rating="3" onclick="rateTrack(3)" viewBox="0 0 24 24">
          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
        </svg>
        <svg class="star" data-rating="4" onclick="rateTrack(4)" viewBox="0 0 24 24">
          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
        </svg>
        <svg class="star" data-rating="5" onclick="rateTrack(5)" viewBox="0 0 24 24">
          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
        </svg>
        <span class="rating-average" id="rating-average">0 (0 avis)</span>
      </div>
    </div>
    <audio id="audio-player"></audio>
    <div class="controls">
      <button onclick="prevTrack()" class="svg-btn"><svg viewBox="0 0 24 24"><path d="M6 19V5h2v14H6zm3.5-7l8.5 6V6l-8.5 6z"/></svg></button>
      <button id="play-btn" onclick="togglePlay()" class="svg-btn"><svg id="play-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></button>
      <button onclick="nextTrack()" class="svg-btn"><svg viewBox="0 0 24 24"><path d="M16 5v14h-2V5h2zm-3.5 7L4 19V5l8.5 7z"/></svg></button>
    </div>
    <input type="range" id="progress-bar" value="0">
    <div class="time-info">
      <span id="current-time">0:00</span>
      <span id="duration">0:00</span>
    </div>
    <div class="volume-control">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
        <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-.77-3.37-2-4.47v8.94c1.23-1.1 2-2.7 2-4.47zM16 12c0 2.21-1.79 4-4 4v2c3.31 0 6-2.69 6-6s-2.69-6-6-6v2c2.21 0 4 1.79 4 4z"/>
      </svg>
      <input type="range" id="volume" min="0" max="1" step="0.01" value="1">
    </div>
  </div>

  <div class="right-panel">
    <h4>Écouter l'album Arc en scène – Il était une fois... ARC !</h4>
    <ul id="playlist">
      <li onclick="selectTrack(0)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>0. INTRO SPECTACLE NARRATION (VOIX OFF ARMANDO)</span></li>
      <li onclick="selectTrack(1)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>0.5 SCÈNE INTRO (CLEMENCE + LONY + CLARA + JULIEN)</span></li>
      <li onclick="selectTrack(2)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>1. SCÈNE SKETCH 1 (RETOUR À LA MAISON - PART DANS LE MONDE DES RÊVES) LONY + JULIE + LENA + MARGAUX 1</span></li>
      <li onclick="selectTrack(3)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>1.5 TRANSITION - DU RÉVEIL À LA CAPOEIRA - (LONY + JULIE + LOLA + CATALINA)</span></li>
      <li onclick="selectTrack(4)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>2. CAPOEIRA</span></li>
      <li onclick="selectTrack(5)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>2.5 TRANSITION - RENCONTRE AVEC LA GYMNASTIQUE (VOIX OFF ARMANDO)</span></li>
      <li onclick="selectTrack(6)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>3. GYMNASTIQUE</span></li>
      <li onclick="selectTrack(7)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>3.5 TRANSITION - DE LA GYM AU CHANT AVEC ANNA T.</span></li>
      <li onclick="selectTrack(8)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>4.5 TRANSITION - DU CHANT VERS LES TALENTS (NOTRE ECOLE À DU TALENT)</span></li>
      <li onclick="selectTrack(9)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>5.5 TRANSITION - DE LA COURS À LA DANSE BOLLYWOOD</span></li>
      <li onclick="selectTrack(10)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>6. DANSE BOLLYWOOD - N°1</span></li>
      <li onclick="selectTrack(11)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>6.5 TRANSITION - DE LA DANSE BOLLYWOOD AU CHANT (VOIX OFF ARMANDO)</span></li>
      <li onclick="selectTrack(12)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>7. CHANT - GROUPE N°2</span></li>
      <li onclick="selectTrack(13)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>7.5 TRANSITION - DU CHANT AUX MATERS - PAR MÉLANIE</span></li>
      <li onclick="selectTrack(14)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>8. DANSE HIP-HOP (BATTLE)</span></li>
      <li onclick="selectTrack(15)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>8.5 TRANSITION - DANS BOLLYWOOD VERS LA DANSE MATERNELLE (RACHEL + VOIX OFF ARMANDO)</span></li>
      <li onclick="selectTrack(16)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>9. DANSE MATERNELLE</span></li>
      <li onclick="selectTrack(17)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>9.5 TRANSITION - FIN DE DANSE MATERNELLE</span></li>
      <li onclick="selectTrack(18)"><svg width="20" height="20" viewBox="0 0 24 24"><path fill="#9C5CF5" d="M8 5v14l11-7z"/></svg><span>10. FINAL</span></li>
    </ul>
    <div class="download-section">
      <p>Téléchargez l’album complet en haute qualité :</p>
      <a href="https://julien-animateur.fr/wp-content/uploads/2025/08/ARC-EN-SCENE-V.1-SUPER-ARC.zip" download class="download-btn">
        <svg width="20" height="20" viewBox="0 0 24 24"><path fill="white" d="M5 20h14v-2H5v2zm7-18L5.33 9h4.67v6h4V9h4.67L12 2z"/></svg>
        <span>Télécharger l’album</span>
      </a>
    </div>
  </div>
</div>

<script>
  const audio = document.getElementById('audio-player');
  const playBtn = document.getElementById('play-btn');
  const playIcon = document.getElementById('play-icon');
  const progressBar = document.getElementById('progress-bar');
  const currentTimeDisplay = document.getElementById('current-time');
  const durationDisplay = document.getElementById('duration');
  const volumeSlider = document.getElementById('volume');
  const trackTitle = document.getElementById('track-title');
  const trackArtist = document.getElementById('track-artist');
  const playlistContainer = document.getElementById('playlist');
  const ratingAverageDisplay = document.getElementById('rating-average');

  const playlist = [
    {
      title: 'INTRO SPECTACLE NARRATION',
      artist: 'Voix Off : Armando',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/0.-INTRO-SPECTACLE-NARRATION-VOIX-OFF-ARMANDO.mp3'
    },
    {
      title: 'SCÈNE INTRO',
      artist: 'Clémence, Lony, Clara, Julien',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/0.5-SCENE-INTRO-CLEMENCE-LONY-CLARA-JULIEN-_-FINIE.mp3'
    },
    {
      title: 'SKETCH 1 – RETOUR À LA MAISON',
      artist: 'Lony, Julie, Léna, Margaux',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/1.-SCENE-SKETCH-1-RETOUR-A-LA-MAISON-PART-DANS-LE-MONDE-DES-REVES-LONY-JULIE-LENA-MARGAUX-1.mp3'
    },
    {
      title: 'TRANSITION – RÉVEIL > CAPOEIRA',
      artist: 'Lony, Julie, Lola, Catalina',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/1.5-TRANSITION-DU-REVEIL-A-LA-CAPOEIRA-LONY-JULIE-LOLA-CATALINA.mp3'
    },
    {
      title: 'CAPOEIRA',
      artist: null,
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/2.-CAPOEIRA.mp3'
    },
    {
      title: 'TRANSITION – RENCONTRE AVEC LA GYMNASTIQUE',
      artist: 'Voix Off : Armando',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/2.5-TRANSITION-RENCONTRE-AVEC-LA-GYMNASTIQUE-VOIX-OFF-ARMANDO.mp3'
    },
    {
      title: 'GYMNASTIQUE',
      artist: null,
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/3.-GYMNASTIQUE.mp3'
    },
    {
      title: 'TRANSITION – GYM > CHANT',
      artist: 'Anna T.',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/3.5-TRANSITION-DE-LA-GYM-AU-CHANT-AVEC-ANNA-T.mp3'
    },
    {
      title: 'TRANSITION – CHANT > TALENTS',
      artist: 'NOTRE ECOLE À DU TALENT',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/4.5-TRANSITION-DU-CHANT-VERS-LES-TALENTS-NOTRE-ECOLE-A-DU-TALENT.mp3'
    },
    {
      title: 'TRANSITION – COURS > DANSE BOLLYWOOD',
      artist: null,
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/5.5-TRANSITION-DE-LA-COURS-A-LA-DANSE-BOLLYWOOD.mp3'
    },
    {
      title: 'DANSE BOLLYWOOD',
      artist: 'Groupe N°1',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/6.-DANSE-BOLLYWOOD-N°1.mp3'
    },
    {
      title: 'TRANSITION – DANSE BOLLYWOOD > CHANT',
      artist: 'Voix Off : Armando',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/6.5-TRANSITION-DE-LA-DANSE-BOLLYWOOD-AU-CHANT-VOIX-OFF-ARMANDO.mp3'
    },
    {
      title: 'CHANT',
      artist: 'Groupe N°2',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/7.-CHANT-GROUPE-N°2.mp3'
    },
    {
      title: 'TRANSITION – CHANT > MATERS',
      artist: 'Mélanie',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/7.5-TRANSITION-DU-CHANT-AUX-MATERS-PAR-MELANIE.mp3'
    },
    {
      title: 'DANSE HIP-HOP (BATTLE)',
      artist: null,
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/8.-DANSE-HIP-HOP-BATTLE.mp3'
    },
    {
      title: 'TRANSITION – BOLLYWOOD > MATERNELLE',
      artist: 'Rachel + Voix Off Armando',
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/8.5-TRANSITION-DANS-BOLLYWOOD-VERS-LA-DANSE-MATERNELLE-RACHEL-VOIX-OFF-ARMANDO.mp3'
    },
    {
      title: 'DANSE MATERNELLE',
      artist: null,
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/9.-DANSE-MATERNELLE.mp3'
    },
    {
      title: 'TRANSITION – FIN DE DANSE MATERNELLE',
      artist: null,
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/9.5-TRANSITION-FIN-DE-DANSE-MATERNELLE.mp3'
    },
    {
      title: 'FINAL',
      artist: null,
      src: 'https://julien-animateur.fr/wp-content/uploads/2025/08/10.-FINAL.mp3'
    },
  ];

  let currentTrack = 0;
  let ratings = JSON.parse(localStorage.getItem('trackRatings')) || Array(playlist.length).fill().map(() => []);

  function loadTrack(index, autoPlay = false) {
    const track = playlist[index];
    currentTrack = index;
    audio.src = track.src;
    trackTitle.textContent = track.title;
    trackArtist.textContent = track.artist ? `Artiste: ${track.artist}` : 'ARC EN SCÈNE - IL ETAIT UNE FOIS ... ARC !';
    highlightCurrentTrack();
    updateRatingDisplay();
    if (autoPlay) {
      audio.play();
      playIcon.innerHTML = '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>';
    } else {
      playIcon.innerHTML = '<path d="M8 5v14l11-7z"/>';
    }
  }

  function togglePlay() {
    if (audio.paused) {
      audio.play();
      playIcon.innerHTML = '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>';
    } else {
      audio.pause();
      playIcon.innerHTML = '<path d="M8 5v14l11-7z"/>';
    }
  }

  function nextTrack() {
    currentTrack = (currentTrack + 1) % playlist.length;
    loadTrack(currentTrack, true);
  }

  function prevTrack() {
    currentTrack = (currentTrack - 1 + playlist.length) % playlist.length;
    loadTrack(currentTrack, true);
  }

  function highlightCurrentTrack() {
    document.querySelectorAll('#playlist li').forEach((li, i) => {
      li.classList.toggle('active', i === currentTrack);
    });
  }

  function selectTrack(index) {
    loadTrack(index, true);
  }

  function formatTime(seconds) {
    if (isNaN(seconds)) return '0:00';
    const m = Math.floor(seconds / 60) || 0;
    const s = Math.floor(seconds % 60) || 0;
    return `${m}:${s < 10 ? '0' : ''}${s}`;
  }

  function rateTrack(rating) {
    ratings[currentTrack].push(rating);
    localStorage.setItem('trackRatings', JSON.stringify(ratings));
    updateRatingDisplay();
  }

  function updateRatingDisplay() {
    const stars = document.querySelectorAll('.star');
    const trackRatings = ratings[currentTrack];
    const average = trackRatings.length > 0
      ? (trackRatings.reduce((sum, r) => sum + r, 0) / trackRatings.length).toFixed(1)
      : 0;
    ratingAverageDisplay.textContent = `${average} (${trackRatings.length} avis)`;

    stars.forEach(star => {
      const starRating = parseInt(star.dataset.rating);
      star.classList.toggle('filled', starRating <= Math.round(average));
    });
  }

  audio.addEventListener('timeupdate', () => {
    const progress = (audio.currentTime / audio.duration) * 100;
    progressBar.value = progress || 0;
    currentTimeDisplay.textContent = formatTime(audio.currentTime);
    durationDisplay.textContent = formatTime(audio.duration);
    progressBar.style.background = `linear-gradient(to right, #9C5CF5 ${progress}%, white ${progress}%)`;
  });

  progressBar.addEventListener('input', () => {
    const seekTime = audio.duration * (progressBar.value / 100);
    audio.currentTime = seekTime;
  });

  audio.addEventListener('ended', nextTrack);

  // Initialize volume
  audio.volume = volumeSlider.value;

  // Update volume on input and change events
  volumeSlider.addEventListener('input', () => {
    audio.volume = parseFloat(volumeSlider.value);
  });

  volumeSlider.addEventListener('change', () => {
    audio.volume = parseFloat(volumeSlider.value);
  });

  loadTrack(currentTrack);
</script>

</body>
</html>				</div>
				<div class="elementor-element elementor-element-0c361e5 elementor-widget-mobile__width-inherit elementor-widget__width-inherit elementor-widget elementor-widget-presto_video" data-id="0c361e5" data-element_type="widget" data-e-type="widget" data-widget_type="presto_video.default">
				<div class="elementor-widget-container">
					
			
			
										
			
							</div>
				</div>
				<div class="elementor-element elementor-element-84addfc elementor-widget elementor-widget-image" data-id="84addfc" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
															<img loading="lazy" decoding="async" width="800" height="800" src="https://julien-animateur.fr/wp-content/uploads/2025/07/ARC-EN-CIEL-2023-SUPER-ARC-1024x1024.jpg" class="attachment-large size-large wp-image-799" alt="" srcset="https://julien-animateur.fr/wp-content/uploads/2025/07/ARC-EN-CIEL-2023-SUPER-ARC-1024x1024.jpg 1024w, https://julien-animateur.fr/wp-content/uploads/2025/07/ARC-EN-CIEL-2023-SUPER-ARC-300x300.jpg 300w, https://julien-animateur.fr/wp-content/uploads/2025/07/ARC-EN-CIEL-2023-SUPER-ARC-150x150.jpg 150w, https://julien-animateur.fr/wp-content/uploads/2025/07/ARC-EN-CIEL-2023-SUPER-ARC-768x768.jpg 768w, https://julien-animateur.fr/wp-content/uploads/2025/07/ARC-EN-CIEL-2023-SUPER-ARC-1536x1536.jpg 1536w, https://julien-animateur.fr/wp-content/uploads/2025/07/ARC-EN-CIEL-2023-SUPER-ARC.jpg 2000w" sizes="(max-width: 800px) 100vw, 800px" />															</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-125d30d e-con-full e-flex e-con e-child" data-id="125d30d" data-element_type="container" data-e-type="container">
		<div class="elementor-element elementor-element-cfcb843 e-con-full e-flex e-con e-child" data-id="cfcb843" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-d51184e elementor-widget elementor-widget-shortcode" data-id="d51184e" data-element_type="widget" data-e-type="widget" data-widget_type="shortcode.default">
							<div class="elementor-shortcode"><!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Arc en Scène 2023 - Super Arc</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <style>
    *, *::before, *::after {
      box-sizing: border-box;
    }
    html, body {
      margin: 0;
      overflow-x: hidden;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #0072ce;
      color: #fff;
      line-height: 1.6;
    }
    .container {
      max-width: 900px;
      margin: 0 auto;
      padding: 40px 20px;
      position: relative;
    }
    .home-link {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 1.5rem;
      color: #fff;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    .home-link:hover {
      color: #ffd700;
    }
    h1 {
      font-size: 2.5em;
      text-align: center;
      margin-bottom: 10px;
    }
    .container > h2:first-of-type {
      color: #fff;
      font-weight: bold;
      font-size: 30px;
      text-align: center;
      border-bottom: none;
      padding-top: 20px;
    }
    h2 {
      color: #ffd700;
      font-size: 1.6em;
      margin-top: 30px;
      border-bottom: 2px solid #ffd700;
      padding-bottom: 5px;
    }
    .info-card {
      background-color: #005aa7;
      border-radius: 10px;
      padding: 20px;
      margin: 20px 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 20px;
    }
    .info-item {
      flex: 1 1 45%;
      background-color: #006fbe;
      padding: 15px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      font-size: 1rem;
    }
    .info-item i {
      font-size: 1.4rem;
      color: #ffd700;
      margin-right: 10px;
      min-width: 24px;
      text-align: center;
    }
    ul {
      padding-left: 0;
      list-style: none;
    }
    .highlight {
      color: #ffd700;
      font-weight: bold;
      text-align: center;
      display: block;
      margin-bottom: 30px;
    }
    footer {
      text-align: center;
      margin-top: 40px;
      font-size: 0.9em;
      color: #ddd;
    }
    a {
      color: #ffd700;
      text-decoration: underline;
    }
    .inscription-section {
      margin-top: 60px;
      text-align: left;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }
    .inscription-section p {
      max-width: 700px;
      margin: 20px 0;
      font-size: 1rem;
      color: #ffffff;
      line-height: 1.7;
    }
    .image-inscription {
      display: flex;
      justify-content: flex-start;
      padding-left: 20px;
    }
    .image-inscription img {
      max-width: 500px;
      height: auto;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      margin-top: 30px;
    }
    .button-section {
      margin-top: 60px;
      text-align: left;
    }
    .button-section p {
      font-size: 1rem;
      color: #ffffff;
      margin-bottom: 20px;
    }
    .custom-button {
      display: block;
      width: 100%;
      max-width: 480px;
      background-color: #ffd700;
      color: #0072ce;
      font-weight: bold;
      font-size: 1rem;
      padding: 15px 25px;
      border: none;
      border-radius: 8px;
      margin: 10px 0;
      text-align: left;
      text-decoration: none;
      transition: background 0.3s ease, transform 0.2s ease;
    }
    .custom-button:hover {
      background-color: #ffcc00;
      transform: scale(1.02);
    }
    @media (max-width: 768px) {
      .info-item {
        flex: 1 1 100%;
      }
      .image-inscription {
        justify-content: center;
        padding-left: 0;
      }
      .image-inscription img {
        max-width: 100%;
      }
      .custom-button {
        text-align: center;
      }
      .home-link {
        top: 15px;
        right: 15px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Arc en Scène 2023 - Super Arc</h2>
    <p class="highlight">Spectacle de fin d'année de l'école Arc-en-Ciel</p>
    <div class="info-card">
      <div class="info-item"><i class="fas fa-calendar-alt" aria-hidden="true"></i> Date : 28 juin 2023</div>
      <div class="info-item"><i class="fas fa-clock" aria-hidden="true"></i> Durée : 2h00</div>
      <div class="info-item"><i class="fas fa-map-marker-alt" aria-hidden="true"></i> Lieu : École Arc-en-Ciel</div>
      <div class="info-item"><i class="fas fa-users" aria-hidden="true"></i> 100 enfants / 16 animateurs</div>
    </div>
    <h2>Résumé</h2>
    <p>Le 28 juin 2023, l'école Arc-en-Ciel a présenté son spectacle de fin d'année...</p>
 <section class="inscription-section">
      <h2 style="color: #ffd700;">Inscriptions pour Arc-en-Scène</h2>
      <p>Les enfants pouvaient s'inscrire sur ce mur, ils choisissaient ce qu'ils préféraient (libre choix, 2 scènes max)</p>
      <div class="image-inscription">
        <img decoding="async" src="https://julien-animateur.fr/wp-content/uploads/2025/07/LES-INSCRIPTIONS-ENFANTS-scaled.jpg" alt="Tableau d'inscription Arc-en-Scène">
      </div>
    </section>
    <h2>L'histoire de Super Arc</h2>
    <p>Le spectacle raconte l'histoire de <strong>Lony</strong>...</p>
    <h2>Une aventure participative</h2>
    <p>Les enfants ont choisi leurs rôles selon leurs talents...</p>
    <h2>Des scènes dynamiques</h2>
    <ul>
      <li>Capoeira brésilienne animée par Catalina et Lola</li>
      <li>Démonstrations de gymnastique</li>
      <li>Chants émouvants...</li>
      <li>Danses Bollywood festives, chorégraphiées par Julien</li>
      <li>Battles hip-hop dynamiques</li>
      <li>Sketchs humoristiques sur le thème de la « corde »</li>
      <li>Une danse maternelle empreinte de tendresse</li>
    </ul>
    <p>Le narrateur, <strong>Armando</strong>, a guidé le public avec malice...</p>
    <h2>Un projet éducatif et humain</h2>
    <ul>
      <li>Le travail en équipe</li>
      <li>La confiance en soi</li>
      <li>L'expression artistique</li>
      <li>Les liens intergénérationnels</li>
      <li>La gestion complète d’un projet</li>
    </ul>
    <h2>Un final émouvant</h2>
    <p>Le spectacle s’achève sur un retour à la réalité...</p>
  
    <footer>
      © École Arc-en-Ciel - Projet Arc en Scène 2023
    </footer>
  </div>
</body>
</html></div>
						</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-d873427 e-flex e-con-boxed e-con e-parent" data-id="d873427" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-9ea8553 elementor-widget-divider--view-line_text elementor-widget-divider--element-align-center elementor-widget elementor-widget-divider" data-id="9ea8553" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
							<div class="elementor-divider">
			<span class="elementor-divider-separator">
							<span class="elementor-divider__text elementor-divider__element">
				AUTRES SPECTACLES DE ARC EN SCÈNE				</span>
						</span>
		</div>
						</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-ace7055 e-flex e-con-boxed e-con e-parent" data-id="ace7055" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-b78beb2 e-con-full e-flex e-con e-child" data-id="b78beb2" data-element_type="container" data-e-type="container">
		<div class="elementor-element elementor-element-cb9f085 e-con-full e-flex e-con e-child" data-id="cb9f085" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-7a0f9e4 elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="7a0f9e4" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
							<div class="elementor-icon-box-wrapper">

						<div class="elementor-icon-box-icon">
				<span  class="elementor-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-video" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z"></path></svg>				</span>
			</div>
			
						<div class="elementor-icon-box-content">

									<h3 class="elementor-icon-box-title">
						<span  >
							[2024] ARC EN SCENE V2 - VOYAGE AUTOUR DU MONDE						</span>
					</h3>
				
									<p class="elementor-icon-box-description">
						<img src="https://s.w.org/images/core/emoji/16.0.1/72x72/2708.png" alt="✈" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Une aventure artistique où les enfants ont embarqué pour un tour du monde des cultures à travers la danse, le théâtre, le chant et les costumes.
<img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f30d.png" alt="🌍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Chaque escale a été une célébration de la diversité, mêlant créativité, découverte et émotion sur la scène de Treulon.					</p>
				
			</div>
			
		</div>
						</div>
				<div class="elementor-element elementor-element-b96d0a2 elementor-widget elementor-widget-image" data-id="b96d0a2" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
															<img loading="lazy" decoding="async" width="724" height="1024" src="https://julien-animateur.fr/wp-content/uploads/2025/07/AFFICHE-A3-ARC-EN-SCENE-724x1024.jpg" class="attachment-large size-large wp-image-3626" alt="" srcset="https://julien-animateur.fr/wp-content/uploads/2025/07/AFFICHE-A3-ARC-EN-SCENE-724x1024.jpg 724w, https://julien-animateur.fr/wp-content/uploads/2025/07/AFFICHE-A3-ARC-EN-SCENE-212x300.jpg 212w, https://julien-animateur.fr/wp-content/uploads/2025/07/AFFICHE-A3-ARC-EN-SCENE-768x1086.jpg 768w, https://julien-animateur.fr/wp-content/uploads/2025/07/AFFICHE-A3-ARC-EN-SCENE-1086x1536.jpg 1086w, https://julien-animateur.fr/wp-content/uploads/2025/07/AFFICHE-A3-ARC-EN-SCENE-1448x2048.jpg 1448w, https://julien-animateur.fr/wp-content/uploads/2025/07/AFFICHE-A3-ARC-EN-SCENE.jpg 1500w" sizes="(max-width: 724px) 100vw, 724px" />															</div>
				<div class="elementor-element elementor-element-18aeacb elementor-widget elementor-widget-presto_video" data-id="18aeacb" data-element_type="widget" data-e-type="widget" data-widget_type="presto_video.default">
				<div class="elementor-widget-container">
					
			
			
										
			
							</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-0f6ed65 e-con-full e-flex e-con e-child" data-id="0f6ed65" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-1af82ce elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="1af82ce" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
							<div class="elementor-icon-box-wrapper">

						<div class="elementor-icon-box-icon">
				<span  class="elementor-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-video" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z"></path></svg>				</span>
			</div>
			
						<div class="elementor-icon-box-content">

									<h3 class="elementor-icon-box-title">
						<span  >
							[2025] ARC EN SCENE V3 - LES FILMS CULTES						</span>
					</h3>
				
									<p class="elementor-icon-box-description">
						<img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3ac.png" alt="🎬" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Les enfants sont montés sur scène pour revisiter avec humour et passion les grands classiques du cinéma : action, comédie, aventure et émotion au rendez-vous !
<img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f37f.png" alt="🍿" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Un spectacle haut en couleur, où chaque tableau rendait hommage à un film.					</p>
				
			</div>
			
		</div>
						</div>
				<div class="elementor-element elementor-element-a5f946f elementor-widget elementor-widget-image" data-id="a5f946f" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
															<img loading="lazy" decoding="async" width="724" height="1024" src="https://julien-animateur.fr/wp-content/uploads/2025/08/ARC-EN-SCENE-V3-724x1024.png" class="attachment-large size-large wp-image-6124" alt="" srcset="https://julien-animateur.fr/wp-content/uploads/2025/08/ARC-EN-SCENE-V3-724x1024.png 724w, https://julien-animateur.fr/wp-content/uploads/2025/08/ARC-EN-SCENE-V3-212x300.png 212w, https://julien-animateur.fr/wp-content/uploads/2025/08/ARC-EN-SCENE-V3-768x1087.png 768w, https://julien-animateur.fr/wp-content/uploads/2025/08/ARC-EN-SCENE-V3.png 1000w" sizes="(max-width: 724px) 100vw, 724px" />															</div>
				<div class="elementor-element elementor-element-c6e1b3b elementor-widget elementor-widget-presto_video" data-id="c6e1b3b" data-element_type="widget" data-e-type="widget" data-widget_type="presto_video.default">
				<div class="elementor-widget-container">
					
			
			
										
			
							</div>
				</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-f3fbec2 elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button" data-id="f3fbec2" data-element_type="widget" data-e-type="widget" data-widget_type="button.default">
										<a class="elementor-button elementor-button-link elementor-size-sm" href="https://julien-animateur.fr">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-arrow-alt-circle-right" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z"></path></svg>			</span>
									<span class="elementor-button-text">RETOUR AU SITE</span>
					</span>
					</a>
								</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
					<wfw:commentRss>https://julien-animateur.fr/arc-en-scene/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
