# -*- coding: utf-8 -*- """ Écrit les six pages du site dans pages/*.html, d'après les maquettes V2. python pages/_generer.py (depuis le dossier du thème) Puis, pour les charger dans WordPress : .\\wp.ps1 eval-file wp-content/themes/citizenmotion2/pages/_construire.php Les pages sont générées plutôt que saisies : une retouche de bloc ou de CSS demande de les rejouer toutes, et les attributs de blocs sont du JSON dans un commentaire HTML — écrit à la main, un guillemet dans un texte casse tout sans que WordPress ne le signale. """ import io import os import sys sys.path.insert(0, os.path.dirname(os.path.abspath(__file__))) from _blocs import ( # noqa: E402 blk, section, grille, pile, croppe, arrondi, texte, bouton, etiquette, icone, decor, figure, composition, separateur, surtitre, entete_section, heros_fendu, style, pad, sp, col, mark, ) IMG = '/wp-content/themes/citizenmotion2/assets/img/' PAGES = {} # ========================================================================== # ACCUEIL # ========================================================================== CARTES_ACCUEIL = [ ('brand-coral', 'ATELIERS
& STAGES', 'Nos équipes d’animateurs spécialisés en EAM accompagnent vos jeunes dans leur ' 'éducation aux médias et à la citoyenneté, dans une dynamique collective et participative.', 'brand-teal', 65), ('brand-teal', 'MÉDIA
JEUNES ET CITOYENS', 'Développer et donner accès aux jeunes à des outils professionnels pour créer des ' 'contenus médias en toute autonomie, dans leur safe-space.', 'brand-yellow', 145), ('brand-yellow', 'CRÉATIONS
AUDIOVISUELLES', 'Soutenir la visibilité et les créations médiatiques pour les institutions à finalité ' 'pédagogique, sociétale ou culturelle.', 'brand-coral', 225), ] def carte_accueil(accent, titre, txt, deco, rot): return arrondi( {'radius': 12, 'cornerTL': True, 'cornerBR': True, 'cornerWidth': 5, 'cornerSize': 20, 'cornerColor': accent, 'borderWidth': 1, 'borderColor': accent, 'borderAlpha': 30, 'bgColor': 'brand-surface', 'justify': 'center', 'align': 'center', 'gap': '0.75rem', 'style': style(padding=pad('1.75rem', '1.75rem', '1.75rem', '1.75rem'), min_height='17rem')}, [ decor(source='theme', shape='lame', fill='color', color=deco, width='58%', top='8%', left='21%', rotate=rot, opacity=25, zIndex=0), texte('card-xl', titre, level=3, align='center', style=style(color={'text': col(accent)})), texte('small', txt, align='center'), ]) PAGES['accueil'] = '\n\n'.join([ # Le héros est un bloc à lui seul : les deux photos, l'éclair qui les # découpe et le cadre. Les valeurs de placement du séparateur sont celles # relevées sur la maquette — l'éclair commence à 26 % et en occupe 57,7 %. heros_fendu( {'tagName': 'header', 'height': 'full', 'measure': '46rem', 'leftUrl': IMG + 'hero3.jpg', 'leftFit': 'contain', 'leftAnchor': 'xMinYMin', 'rightUrl': IMG + 'hero4.jpg', 'rightFit': 'cover', 'rightAnchor': 'xMidYMid', 'shape': 'eclair-separateur', 'sepLeft': 26, 'sepTop': 0, 'sepWidth': 57.7, 'sepHeight': 100.6, 'photoOpacity': 50, 'rise': 15, 'style': style(padding=pad(left=sp(40), right=sp(40)))}, [ pile( {'gap': '1.5rem', 'align': 'center'}, [ pile({'gap': '0', 'align': 'center', 'className': 'cimo-loop'}, [ texte('hero', 'Faire les %s
pour mieux
les %s' % (mark('médias', 'brand-teal'), mark('comprendre', 'brand-coral')), level=1, align='center'), texte('hero', 'Deux %s,
une même
%s' % (mark('pôles', 'brand-coral'), mark('conviction', 'brand-teal')), level=2, align='center'), ]), texte('lead', 'Professionnels de l’audiovisuel, nous armons les jeunes pour décoder ' 'l’image, questionner le réel et bâtir un avenir plus solidaire et ' 'démocratique.', align='center', style=style(color={'text': col('brand-cream')}, margin={'bottom': sp(30)})), pile({'direction': 'row', 'gap': '1.5rem', 'justify': 'center', 'align': 'center'}, [ bouton('Éducation média', 'cimo-btn--teal', '/education-aux-medias/', fixedWidth=True), bouton('Productions audiovisuelles', 'cimo-btn--coral', '/productions/', fixedWidth=True), ]), ]), ]), section( {'cols': 1, 'measured': True, 'measure': '72rem', 'gap': '2rem', 'style': style(padding=pad(sp(70), sp(70), sp(40), sp(40)))}, [ entete_section('Nos thématiques & ateliers', 'Domaines d’intervention'), grille({'cols': 3, 'gap': '1.5rem'}, [carte_accueil(*c) for c in CARTES_ACCUEIL]), ]), ]) # ========================================================================== # ÉDUCATION AUX MÉDIAS # ========================================================================== # Chaque pilier porte sa forme de fond : couleur, rotation, et surtout # POSITION. Centrée, elle passait derrière le titre et le rendait illisible ; # les maquettes les font longer un bord et déborder de la carte. PILIERS = [ ('globe', 'Accompagner', 'Accompagner les jeunes dans la compréhension du monde qui les entoure.', 'brand-yellow', 20, '72%', '-14%', '60%'), ('bulb', 'Développer', 'Développer l’esprit critique des jeunes.', 'brand-coral', -25, '-22%', '58%', '62%'), ('aperture', 'Autonomiser', 'Autonomiser les jeunes dans un paysage médiatique en constante transformation.', 'brand-teal', 45, '60%', '-6%', '62%'), ] def pilier(ic, titre, txt, deco, rot, gauche, haut, large): return croppe( {'cutDepth': 16, 'cutTL': False, 'cutTR': True, 'cutBR': False, 'cutBL': False, 'borderWidth': 1, 'borderColor': 'brand-teal', 'borderAlpha': 40, 'bgColor': 'brand-surface', 'hover': False, 'align': 'center', 'justify': 'center', 'gap': '0', 'style': style(padding=pad('2.5rem', '2.5rem', '2rem', '2rem'))}, [ decor(source='theme', shape='eclair-1', fill='color', color=deco, width=large, top=haut, left=gauche, rotate=rot, opacity=90, zIndex=0), icone(ic, frame='circle', size='1.5rem', style=style(color={'text': col('brand-teal')}, margin={'bottom': '1.5rem'})), separateur('cimo-rule', 'brand-coral'), texte('card', titre, level=2, align='center', style=style(color={'text': col('brand-coral')}, margin={'top': '1.5rem', 'bottom': '1rem'})), texte('small', txt, align='center'), ]) THEMATIQUES = [ ('brand-coral', 'IA & FAKE
NEWS', 'Comprendre la désinformation, analyser les algorithmes et développer des réflexes de vérification des faits.'), ('brand-teal', 'MÉDIA
SCOLAIRE', 'Accompagnement à la création de journaux, blogs ou chaînes vidéo au sein des établissements.'), ('brand-yellow', 'PODCAST
& RADIO', 'Prise de parole, écriture audio, animation d’émissions et techniques de prise de son.'), ('brand-yellow', 'REPORTAGE
& INTERVIEW', 'Initiation au journalisme de terrain, cadrage, montage et préparation d’interviews.'), ('brand-coral', 'ATELIER
MULTIMÉDIA', 'Projets créatifs à fort impact visuel, expression citoyenne et créations participatives.'), ('brand-teal', 'COURT-MÉTRAGE
DE FICTION', 'Écriture de scénario, jeu d’acteur, réalisation et sensibilisation au langage cinématographique.'), ] def carte_thematique(accent, titre, txt): return arrondi( {'radius': 12, 'cornerTL': True, 'cornerBR': True, 'cornerWidth': 4, 'cornerSize': 20, 'cornerColor': accent, 'borderWidth': 1, 'borderColor': accent, 'borderAlpha': 30, 'bgColor': 'brand-surface', 'justify': 'space-between', 'gap': '0.75rem', 'style': style(padding=pad('1.75rem', '1.75rem', '1.75rem', '1.75rem'))}, [ texte('card-xl', titre, level=3, style=style(color={'text': col(accent)})), texte('small', txt), ]) ZONES = [ ('brand-teal', 'Bruxelles', 'aperture', 'Siège social, basé à LaVallée (Molenbeek). Projets scolaires et extrascolaires, Molenzine et stages.'), ('brand-coral', 'Brabant-Wallon', 'pin', 'Projets PECA BW, centres culturels, projets scolaires et projet « IA plus de secret ».'), ('brand-yellow', 'Liège', 'globe', 'Projets scolaires et extrascolaires (MJ, centres culturels…), REBOOTLiège.'), ('white', 'Et ailleurs', 'plus', 'On se déplace aussi ponctuellement sur d’autres zones : Namur, Mons, Charleroi…'), ] def zone(accent, nom, ic, txt): return arrondi( {'radius': 0, 'cornerTL': False, 'cornerBR': False, 'borderWidth': 1, 'borderColor': 'white', 'borderAlpha': 8, 'accentSide': 'top', 'accentWidth': 4, 'accentColor': accent, 'bgColor': 'brand-surface', 'gap': '1rem', 'hover': False, 'style': style(padding=pad('1.5rem', '1.5rem', '1.5rem', '1.5rem'))}, [ pile({'direction': 'row', 'justify': 'space-between', 'align': 'flex-start', 'gap': '0.5rem', 'wrap': False}, [ texte('card', nom, level=3, style=style(color={'text': col('white')})), icone(ic, size='2rem', style=style(color={'text': col(accent)})), ]), texte('small', txt), ]) ETAPES = [ ('01', 'brand-teal', 'ON SE CONTACTE', 'Vous nous envoyez un message avec votre demande ou votre idée de projet : public, objectifs pédagogiques, calendrier.', True), ('02', 'brand-coral', 'ON CO-CONSTRUIT', 'On adapte le projet à vos besoins, avec l’enseignant·e ou l’éducateur·ice. Si nécessaire, on répond ensemble à un appel à projets.', False), ('03', 'brand-yellow', 'ON INTERVIENT', 'Nos animateur·ices viennent dans vos locaux ou vous accueillent dans nos espaces à Molenbeek ou Liège.', True), ('04', 'brand-cream', 'ON DIFFUSE', 'Les productions des jeunes sont valorisées : diffusion en ligne, festivals, événements de fin de projet.', False), ] def etape(num, accent, titre, txt, dessus): bloc_texte = pile({'gap': '0.5rem', 'align': 'center'}, [ texte('card', titre, level=3, align='center', style=style(color={'text': col(accent)})), texte('small', txt, align='center'), ]) medaillon = icone('obturateur', frame='badge', label=num, style=style(color={'text': col(accent)})) return pile( {'gap': '1.5rem', 'align': 'center', 'className': 'cimo-step' + ('' if dessus else ' is-below')}, [bloc_texte, medaillon] if dessus else [medaillon, bloc_texte]) def appel(accent, titre, txt, libelle): return croppe( {'cutDepth': 48, 'cutTL': False, 'cutTR': True, 'cutBR': False, 'cutBL': True, 'borderWidth': 2, 'accentSide': 'top', 'accentWidth': 5, 'borderColor': accent, 'bgColor': 'brand-surface', 'hover': False, 'align': 'center', 'justify': 'center', 'gap': '1rem', 'style': style(padding=pad('3rem', '3rem', '2.5rem', '2.5rem'))}, [ texte('quote', titre, level=3, align='center'), texte('small', txt, align='center', style=style(margin={'bottom': '0.5rem'})), bouton(libelle, 'cimo-btn--' + ('teal' if accent == 'brand-teal' else 'yellow'), '/contact/', square=True, arrow=True), ]) PAGES['education-aux-medias'] = '\n\n'.join([ section( {'cols': 1, 'measured': True, 'measure': '80rem', 'tagName': 'header', 'style': style(padding=pad(sp(60), sp(70), sp(40), sp(40)))}, [ composition('fond-hero-eam'), pile({'gap': '1.5rem', 'maxWidth': '36rem'}, [ texte('hero', 'Armer la
%s
des jeunes' % mark('pensée critique', 'brand-teal'), level=1), texte('lead', 'Ateliers pratiques, sensibilisation au décodage de l’image et création ' 'participative pour donner la parole aux jeunes et former les citoyens de demain.'), pile({'direction': 'row', 'gap': '1rem', 'align': 'center', 'style': style(margin={'top': '0.5rem'})}, [ bouton('Découvrir nos ateliers', 'cimo-btn--teal', '#'), bouton('En savoir plus', 'cimo-btn--outline', '#'), ]), ]), ]), section( {'cols': 1, 'measured': True, 'measure': '72rem', 'gap': '2rem', 'style': style(padding=pad(bottom=sp(70), left=sp(40), right=sp(40)))}, [grille({'cols': 3, 'gap': '2rem'}, [pilier(*p) for p in PILIERS])]), section( {'cols': 1, 'measured': True, 'measure': '72rem', 'gap': '2rem', 'style': style(padding=pad(bottom=sp(70), left=sp(40), right=sp(40)))}, [ entete_section('Nos thématiques & ateliers', 'Domaines d’intervention'), grille({'cols': 3, 'gap': '1.5rem'}, [carte_thematique(*c) for c in THEMATIQUES]), ]), section( {'cols': 1, 'measured': True, 'measure': '72rem', 'gap': '2rem', 'style': style(padding=pad(bottom=sp(70), left=sp(40), right=sp(40)))}, [ entete_section('Territoire & ancrage', 'Zones d’activité', 'brand-yellow'), grille({'cols': 4, 'gap': '1.5rem'}, [zone(*z) for z in ZONES]), ]), section( {'cols': 1, 'measured': True, 'measure': '72rem', 'gap': '3rem', 'style': style(padding=pad(bottom=sp(80), left=sp(40), right=sp(40)))}, [ pile({'gap': '0.25rem', 'align': 'center'}, [ surtitre('Méthodologie & accompagnement'), texte('section', 'Comment ça se passe ?', level=2, align='center'), ]), grille({'cols': 4, 'gap': '1rem', 'className': 'cimo-steps'}, [etape(*e) for e in ETAPES]), ]), section( {'cols': 2, 'measured': True, 'measure': '72rem', 'gap': '2rem', 'style': style(padding=pad(bottom=sp(80), left=sp(40), right=sp(40)))}, [ appel('brand-teal', 'Envie de monter
un projet %s' % mark('avec nous ?', 'brand-teal'), 'Enseignant·e, éducateur·ice, coordinateur·ice de maison de jeunes : ' 'écrivez-nous, on s’adapte à votre projet.', 'Nous contacter'), appel('brand-yellow', 'Envie de nous rejoindre
dans un projet de %s' % mark('média jeune ?', 'brand-yellow'), 'Tu as entre 15 et 25 ans et tu veux nous rejoindre comme participant·e à un ' 'projet extrascolaire, ou comme jeune bénévole ? Contacte-nous.', 'Contacte-nous'), ]), ]) # ========================================================================== # PAGES DE THÉMATIQUE ET DE PRODUCTIONS — même gabarit, deux contenus # ========================================================================== def tuile(accent, span, categorie, titre, txt, note=None, meta=None, image='atelier-1.webp'): corps = [ texte('card', titre, level=3), texte('small', txt), ] return croppe( {'span': span, 'cutDepth': 20, 'cutTL': True, 'cutTR': False, 'cutBR': True, 'cutBL': False, 'borderWidth': 2, 'accentSide': 'top', 'accentWidth': 4, 'borderColor': accent, # Le fond prend la couleur du filet : c'est lui qui teinte la photo, # posée par-dessus à 45 % — tout l'effet des tuiles des maquettes. 'bgColor': accent, 'mediaUrl': IMG + image, 'mediaOpacity': 45, 'scrim': True, 'category': categorie, 'catBg': accent, 'catColor': 'brand-dark', 'catPos': 'left', 'meta': meta, 'note': note, 'noteColor': accent, 'justify': 'flex-end', 'gap': '0.5rem', 'url': '#', 'linkLabel': titre, 'style': style(padding=pad('1.75rem', '1.75rem', '1.75rem', '1.75rem'), min_height='340px')}, corps) def page_thematique(tag, tag_bg, titre_html, lead, illu, sur, titre_grille, accent_sur, tuiles): return '\n\n'.join([ section( {'cols': 2, 'measured': True, 'measure': '80rem', 'gap': '2rem', 'tagName': 'header', 'className': 'cimo-hero-pole', 'style': style(padding=pad(sp(60), sp(50), sp(40), sp(40)))}, [ pile({'gap': '1.5rem', 'justify': 'center', 'maxWidth': '36rem'}, [ etiquette(tag, style=style(color={'background': col(tag_bg)})), texte('hero', titre_html, level=1), texte('lead', lead), ]), blk('image', {'className': 'cimo-hero-illu'}, '
' '
' % (IMG, illu)), ]), section( {'cols': 1, 'measured': True, 'measure': '80rem', 'gap': '2rem', 'style': style(padding=pad(bottom=sp(80), left=sp(40), right=sp(40)))}, [ entete_section(sur, titre_grille, accent_sur, rule=True), grille({'cols': 12, 'gap': '1.5rem'}, tuiles), ]), ]) PAGES['podcast-expression-audio'] = page_thematique( 'Éducation aux médias', 'brand-yellow', 'Podcast &
%s' % mark('expression audio', 'brand-yellow'), 'La voix comme outil d’émancipation. De la prise de parole au micro jusqu’à la ' 'réalisation d’émissions de radio et de podcasts engagés, nous accompagnons les ' 'jeunes dans la maîtrise du média sonore.', 'casque2.png', 'Formats & réalisations', 'Projets menés par et pour les jeunes', 'brand-yellow', [ tuile('brand-teal', '8', 'Extrascolaire', '« On Air », jeu de rôle radio', 'Après une plongée dans les coulisses du média radio, chaque participant reçoit ' 'un rôle et une mission. L’atelier se termine par l’enregistrement d’une ' 'véritable émission, dans les conditions du direct.', meta='3 séances | 12-25 ans | 10 max'), tuile('brand-yellow', '4', 'Molenzine', 'Tabous', 'À la demande des jeunes de Molenzine, un podcast sur les tabous de ' 'l’adolescence : l’amour, la réussite scolaire, la santé mentale, la puberté.', note='Cycle de samedis • 14-20 ans'), tuile('brand-coral', '4', 'Scolaire', 'La Politique & Moi !', 'Une 7e Déco Pub du Centre scolaire Ma Campagne interroge son rapport à la ' 'politique, après être allée à la rencontre du Forum des Jeunes.', note='Mars – mai 2025 • Bruxelles'), tuile('brand-teal', '4', 'Scolaire', 'Voi(x) Libre !', 'Le sens du travail, les formations, les débouchés, la possibilité de se ' 'réorienter : un podcast sur l’orientation, par une 1re professionnelle.', note='Sept – déc 2025'), tuile('brand-yellow', '4', 'Partenariat', 'Indications de lecture', 'Un podcast collectif construit à partir des lectures personnelles des élèves, ' 'en appui à l’ASBL Indications.', note='Octobre 2025 • 5e secondaire'), ]) PAGES['productions'] = page_thematique( 'Productions audiovisuelles', 'brand-coral', 'L’image au service de
%s' % mark('l’engagement', 'brand-coral'), 'Citizen Motion réalise des productions audiovisuelles engagées pour des ' 'organisations dont les valeurs rejoignent les siennes : solidarité, culture, ' 'citoyenneté, éducation.', 'camera.png', 'Formats & réalisations', 'Projets réalisés par La Base', 'brand-coral', [ tuile('brand-teal', '8', 'Aftermovie', 'Nous sommes les DASPA', 'Bande annonce du court-métrage réalisé avec deux classes de primo-arrivants ' 'à l’Institut Dominique Pire de Bruxelles.', meta='Goethe-Institut | Bruxelles | 2024', image='atelier-2.webp'), tuile('brand-yellow', '4', 'After-movie', 'Belarus Day', 'Captation et montage d’une journée de rencontres, de concerts et de débats ' 'autour de la diaspora biélorusse.', note='Goethe Institute • Bruxelles', image='hero-production.webp'), tuile('brand-coral', '4', 'Production', 'Changeons la recette', 'Une campagne vidéo pour le CNCD, tournée dans cinq pays, sur les systèmes ' 'alimentaires et la souveraineté paysanne.', note='CNCD · 5 pays', image='equipe-1.webp'), tuile('brand-teal', '4', 'Édition spéciale', 'Curieucity', 'Dans le cadre du festival bruxellois mêlant arts et sciences, plusieurs ' 'vidéos pour accompagner l’événement, portées par l’ULB et la VUB.', note='Sept – déc 2025', image='equipe-2.webp'), tuile('brand-yellow', '4', 'Partenariat', 'The Momentary Anaesthesia of the Heart', 'Trois vidéos pour les réseaux sociaux explorant le rôle de l’humour comme ' 'forme d’expression dans un monde en crise.', note='Goethe Institute • 2026', image='hero-eam.webp'), ]) # ========================================================================== # ARTICLE # ========================================================================== PARAGRAPHES_1 = [ 'À Hanshu, en Tanzanie, dans le district d’Hanang, Modeste pratique l’agroécologie. ' 'Avec sa famille, il possède une exploitation agricole dans le village d’Endagane. ' 'Modeste a développé sa propre banque de semences et tient fondamentalement à son ' 'droit de choisir : choisir entre les semences industrielles qui inondent le marché ' 'et la pérennisation de l’utilisation des semences locales.', 'L’équipe de Citizen Motion s’est chargée de la scénarisation, du tournage et du ' 'montage de ces deux reportages en étroite collaboration avec l’ONG Îles de Paix. ' 'Cette dernière s’est chargée de toute la production du projet ainsi que du dossier ' 'pédagogique l’accompagnant et des diffusions scolaires.', 'La transition vers des méthodes durables demande de la patience et un travail de ' 'terrain continu. En documentant ces initiatives, nous permettons aux jeunes de mieux ' 'comprendre la provenance de leur alimentation et l’impact direct des choix agricoles ' 'sur l’environnement mondial.', ] PARAGRAPHES_2 = [ 'À travers des images immersives et une approche ancrée dans le terrain, ce projet ' 'démontre l’importance cruciale de donner la parole aux acteurs locaux. Les ' 'films-outils permettent ainsi d’ouvrir le débat dans les classes sur des enjeux ' 'géopolitiques complexes, abordés sous un angle humain et accessible.', 'Chaque étape de réalisation a impliqué des échanges riches avec les communautés sur ' 'place, garantissant un récit authentique et respectueux des réalités locales. Ce ' 'travail de terrain nourrit nos ateliers scolaires en Belgique en apportant des ' 'témoignages concrets.', 'En offrant aux élèves des clés de lecture claires, nous facilitons l’émergence d’un ' 'esprit critique face aux flux d’informations et aux idées reçues sur les pays du Sud ' 'global.', ] PAGES['graines-de-changement'] = '\n\n'.join([ section( {'cols': 1, 'measured': True, 'measure': '64rem', 'gap': '2rem', 'style': style(padding=pad(sp(50), sp(40), sp(40), sp(40)))}, [ texte('meta', 'Accueil > Productions & reportages ' '> Graines de changement', className='cimo-breadcrumb'), ]), section( {'cols': 2, 'measured': True, 'measure': '64rem', 'gap': '2rem', 'tagName': 'header', 'style': style(padding=pad(bottom=sp(50), left=sp(40), right=sp(40)))}, [ figure(mediaUrl=IMG + 'atelier-1.webp', mediaAlt='Tournage du reportage Graines de changement', ratio='1 / 1', **{'float': 'none'}, cutDepth=24, cutTL=True, cutTR=False, cutBR=True, cutBL=False, borderWidth=2, accentSide='top', accentWidth=4, borderColor='brand-yellow'), croppe( {'cutDepth': 0, 'borderWidth': 0, 'bgColor': 'brand-surface', 'hover': False, 'justify': 'space-between', 'gap': '1rem', 'style': style(padding=pad('2rem', '2rem', '2rem', '2rem'))}, [ texte('meta', 'Reportage documentaire — 2024', slashes=False, style=style(color={'text': col('brand-yellow')})), texte('hero', 'Production audiovisuelle documentaire & films-outils pédagogiques', level=1, style=style(margin={'bottom': 'auto'})), pile({'direction': 'row', 'justify': 'space-between', 'gap': '1rem', 'className': 'cimo-article-byline'}, [ texte('meta', 'Par l’équipe Citizen Motion'), texte('meta', 'Temps de lecture : 5 min'), ]), ]), ]), section( {'cols': 1, 'measured': True, 'measure': '56rem', 'gap': '1.5rem', 'className': 'cimo-prose', 'tagName': 'article', 'style': style(padding=pad(bottom=sp(80), left=sp(40), right=sp(40)))}, [ texte('chapeau', 'Réalisé pour l’ONG Îles de Paix, le reportage « Graines de Changement » — ' 'destiné à un public de secondaire — et sa version vulgarisée « Modeste, les ' 'mains dans la terre » — pour les primaires — traitent de l’agroécologie et de ' 'la liberté semencière, dans un contexte mondialisé où les semences ' 'industrielles posent de nombreux défis socio-économiques.'), figure(mediaUrl=IMG + 'atelier-1.webp', mediaAlt='Modeste dans son champ', ratio='4 / 5', **{'float': 'left'}, width='33%', cutDepth=28, cutTL=False, cutTR=False, cutBR=True, cutBL=False, borderWidth=0, caption='Modeste dans son champPratique de ' 'l’agroécologie dans le village d’Endagane, Tanzanie.', captionBg='brand-teal', captionColor='white', capCutDepth=28, capCutTR=True), ] + [texte('body', p) for p in PARAGRAPHES_1] + [ figure(mediaUrl=IMG + 'atelier-1.webp', mediaAlt='Tournage sur le terrain', ratio='4 / 5', **{'float': 'right'}, width='33%', cutDepth=28, cutTL=False, cutTR=False, cutBR=False, cutBL=True, borderWidth=0, caption='Tournage 2024Le dossier pédagogique complet ' 'est disponible sur ilesdepaix.org', captionBg='brand-yellow', captionColor='brand-dark', capCutDepth=28, capCutTL=True), ] + [texte('body', p) for p in PARAGRAPHES_2]), ]) # ========================================================================== # FICHE D'ATELIER # ========================================================================== OBJECTIFS = [ 'Analyser le fonctionnement et les biais des générateurs d’images actuels ' '(Midjourney, DALL-E, Stable Diffusion).', 'Déconstruire la fausse vérité de l’image et aborder les questions de droits ' 'd’auteur et d’éthique.', 'Expérimenter des dispositifs d’ateliers réutilisables directement avec un public ' 'jeune (12-25 ans).', ] INFOS = [ ('pin', 'Lieux', 'Wavre, Namur et Bruxelles. Même journée de formation reproduite trois fois.'), ('clock', 'Horaire', '9h – 16h'), ('price', 'Prix', 'Gratuit si enseignant (IFPC)'), ('mail', 'Personne de contact', 'Martin Culot — m.culot@media-animation.be'), ] def objectif(txt): return pile({'direction': 'row', 'gap': '0.75rem', 'align': 'flex-start', 'wrap': False}, [ icone('check', size='1rem', style=style(color={'text': col('brand-teal')})), texte('small', txt), ]) def info(ic, libelle, txt): return pile({'direction': 'row', 'gap': '0.75rem', 'align': 'flex-start', 'wrap': False}, [ icone(ic, size='1.25rem', style=style(color={'text': col('brand-teal')})), pile({'gap': '0.125rem'}, [ texte('meta', libelle, style=style(color={'text': col('white')})), texte('small', txt), ]), ]) PAGES['ia-generatives-images'] = '\n\n'.join([ section( {'cols': 1, 'measured': True, 'measure': '72rem', 'style': style(padding=pad(sp(50), sp(40), sp(40), sp(40)))}, [ texte('meta', 'Accueil > Formations & ateliers ' '> IA génératives d’images', className='cimo-breadcrumb'), ]), section( {'cols': 2, 'measured': True, 'measure': '72rem', 'gap': '2rem', 'tagName': 'header', 'className': 'cimo-section-head has-rule', 'style': style(padding=pad(bottom=sp(60), left=sp(40), right=sp(40)))}, [ pile({'gap': '1.5rem', 'maxWidth': '36rem'}, [ texte('hero', 'Les intelligences artificielles génératives d’images :
%s' % mark('échanges de pratiques', 'brand-teal'), level=1), texte('small', 'Un espace de réflexion critique et de pratique partagée pour analyser ' 'les enjeux de la création synthétique et intégrer ces outils en classe ' 'ou en atelier.'), ]), pile({'gap': '0', 'className': 'cimo-fiche-decor'}, [ decor(source='theme', shape='lame', fill='color', color='brand-teal', width='40%', top='-10%', left='5%', rotate=65, opacity=90), decor(source='theme', shape='lame', fill='color', color='brand-teal', width='34%', top='20%', left='38%', rotate=165, opacity=70), decor(source='theme', shape='lame', fill='color', color='brand-teal', width='30%', top='5%', left='68%', rotate=15, opacity=50), ]), ]), section( {'cols': 12, 'measured': True, 'measure': '72rem', 'gap': '3rem', 'style': style(padding=pad(bottom=sp(80), left=sp(40), right=sp(40)))}, [ pile({'gap': '2rem', 'className': 'cimo-span-7'}, [ pile({'gap': '1rem'}, [ pile({'direction': 'row', 'gap': '0.75rem', 'align': 'center'}, [ texte('card', '//', style=style(color={'text': col('brand-coral')})), texte('card', 'Court descriptif', level=2), ]), texte('small', 'Formation à destination des enseignants et éducateurs qui ont déjà ' 'des pratiques pédagogiques à partir des IA génératives d’images. La ' 'formation propose d’échanger autour des pratiques dans une ' 'perspective d’éducation critique aux médias.'), ]), pile({'gap': '1rem'}, [ pile({'direction': 'row', 'gap': '0.75rem', 'align': 'center'}, [ texte('card', '//', style=style(color={'text': col('brand-yellow')})), texte('card', 'Objectifs & déroulement', level=2), ]), pile({'gap': '0.75rem'}, [objectif(o) for o in OBJECTIFS]), ]), ]), arrondi( {'radius': 12, 'cornerTL': True, 'cornerBR': True, 'cornerWidth': 5, 'cornerSize': 20, 'cornerColor': 'brand-teal', 'borderWidth': 1, 'borderColor': 'brand-teal', 'borderAlpha': 30, 'bgColor': 'brand-surface', 'gap': '1.25rem', 'hover': False, 'span': '5', 'style': style(padding=pad('1.75rem', '1.75rem', '1.75rem', '1.75rem'))}, [ texte('card', 'Informations
& pratiques', level=3, style=style(color={'text': col('brand-teal')})), ] + [info(*i) for i in INFOS] + [ texte('small', 'L’ensemble des dates est à découvrir sur :', align='center'), bouton('Inscriptions IFPC-FWB', 'cimo-btn--coral', 'https://ifpc-fwb.be/', square=True, arrow=True, newTab=True), ]), ]), ]) # ========================================================================== if __name__ == '__main__': base = os.path.dirname(os.path.abspath(__file__)) for slug, html in PAGES.items(): p = os.path.join(base, slug + '.html') io.open(p, 'w', encoding='utf-8', newline='\n').write(html + '\n') print('%-28s %5d octets' % (slug + '.html', len(html)))