Cédric LENEUTRE — Dossier Professionnel | Dragon AI × Oeil de Dragon

Dossier Professionnel · Studio IA · Création Numérique

Cédric
LENEUTRE Réalisateur IA · Fondateur Dragon AI

Pionnier de la création audiovisuelle par intelligence artificielle — Cinéma, Publicité, Formation & Art Numérique

Prompt Engineering Cinéma IA Motion Design Formation IA CGI · 3D · VFX Scénariste 35 ans d'expérience
01 · Identité

Un créateur à la croisée
de l'art et de l'intelligence

CL
Cédric LENEUTRE
Freelance · Réalisateur IA · Scénariste · Formateur
◈
+35 ans
d'expérience en création numérique
◈
Depuis 2011
Studio Oeil de Dragon actif
◈
12+ projets/an
Objectif Dragon AI
◈
Freelance
Disponible pour missions & partenariats

Cédric Leneutre est réalisateur, scénariste et formateur en intelligence artificielle générative, spécialisé dans la création d'images, de vidéos et d'effets spéciaux assistés par IA. Fort de plus de 35 ans d'expérience dans les domaines du graphisme, de la communication multimédia et de la création artistique, il a bâti un écosystème de structures innovantes.


Fondateur du centre de formation Pôle IID, de l'agence de communication Scénario, de l'école ESIF, de l'école supérieure d'animation 3AXES Institut et de l'agence créative Oeil de Dragon, il opère aujourd'hui à l'avant-garde de la production audiovisuelle assistée par IA sous la bannière DRAGON AI.


Son approche singulière croise art, technologie, philosophie et pédagogie, avec une maîtrise approfondie des outils numériques IA de dernière génération : prompt engineering, génération vidéo, imagerie 3D, motion design et production cinématographique complète.

« Transformer l'intelligence artificielle en outil au service de la narration visuelle et de la création artistique — tel est le fil conducteur de l'œuvre de Cédric Leneutre depuis 2011. »
◆
35+
Années d'expérience
5
Structures fondées
12+
Projets IA / an
7+
Formations disponibles
◆
02 · Expertise

Compétences & Domaines
d'excellence

🎬
Réalisation IA
Production de films, séries, publicités et clips entièrement pilotés par IA générative. Pipeline propriétaire DRAGON AI.
MAÎTRISEExpert
✦
Prompt Engineering
Conception et optimisation de prompts spécialisés pour la génération d'images, vidéos et animations par IA.
MAÎTRISEExpert
🎭
Scénario & Narration
Écriture de scénarios pour courts et longs métrages, storyboarding, conception d'univers narratifs complexes.
MAÎTRISEExpert
🖥
Motion Design & VFX
Création de visuels animés, effets spéciaux, montage vidéo et intégration CGI pour tous supports.
MAÎTRISEAvancé
🎓
Formation & Pédagogie
Conception et animation de formations certifiantes en IA générative, créativité numérique et production audiovisuelle.
MAÎTRISEExpert
🎨
Graphisme & Design
Identité visuelle, illustration 2D/3D, infographie, logotype et communication visuelle multimédia.
MAÎTRISEExpert
🌐
Web & Communication
Création de sites WordPress, stratégie digitale, SEO, campagnes et marketing de contenu.
MAÎTRISEAvancé
🎵
Composition Musicale
Création de musiques originales pour films et projets multimédias — titres publiés sur le player Dragon AI.
MAÎTRISEAvancé
◆
03 · Réalisations

Projets phares
Dragon AI

🤖
Long métrage · IA
Maxim The Robot

Teaser d'un film de science-fiction entièrement produit par intelligence artificielle. Un robot à la croisée de l'humanité et de la machine.

✨
Film d'animation · IA
AndalousIA

Film d'animation inspiré de l'Andalousie médiévale, alliant esthétique arabe et narration visuelle assistée par IA générative.

⚡
Manga · Franco-Japonais
Into The System

Teaser du film manga franco-japonais « La Grille » — une plongée cyberpunk dans les rouages d'un système numérique dystopique.

∞
Long métrage · En production
INFINI

Film en cours de réalisation avec bande originale composée par Cédric Leneutre. Une odyssée visuelle et sonore produite intégralement sous Dragon AI.

☢
Remake · Série TV
Fallout — Remake S02E02

Recréation de l'épisode 2 de la saison 2 de la série Fallout entièrement par IA, démontrant le potentiel de production à coût réduit.

🌀
Publicité · Sport fictif
Aerial Spindel Dash

Film publicitaire conceptuel pour un sport futuriste inventé — vitrine de la capacité de Dragon AI à créer des univers de marque complets.

◆
04 · Pédagogie

Catalogue des formations
IA 2026

01
Devenir réalisateur de film assisté par IA

Maîtrise des outils d'IA générative pour la création de contenus vidéo professionnels. De la conception au montage final.

02
Créateur de films d'animation assisté par IA

Parcours complet de l'idée à l'animation, accessible sans compétences techniques préalables. Immersion de A à Z dans la création animée.

03
Devenez créateur de contenu avec l'IA

Exploitation des outils d'IA générative pour la production de contenus vidéo à destination des réseaux sociaux et plateformes numériques.

04
Devenir storyboarder assisté par IA

Conception de storyboards professionnels grâce à l'IA, sans avoir besoin de savoir dessiner. Transformation de scénarios en séquences visuelles percutantes.

05
Designer en infographie médicale IA

Certification professionnelle RC — secteur infographie et communication scientifique assistée par IA.

06
Créateur de contenus éducatifs IA

Maîtrise des outils IA pour la création de contenus pédagogiques — texte, vidéo, vulgarisation scientifique et interactive.

07
Devenir un créatif

Approche transversale mêlant neurosciences, psychologie cognitive, design thinking, pédagogie active et outils numériques pour libérer la créativité.

05 · Prestations

L'offre de services
Oeil de Dragon

Cinéma & TV IA
Production long et court-métrage
Publicité IA
Spot TV, campagne digitale
Motion Design IA
Animations & effets spéciaux
Vidéo 3D IA
Imagerie tridimensionnelle
Vidéo Corporate
Institutionnel & produit
Sites WordPress
Vitrine, e-commerce
Logotype & Branding
Identité visuelle complète
SEO & Marketing
Référencement & stratégie
Reportage IA
Documentaire & journalisme
IA Générative
Conseil & intégration
Formation IA
Certifiante & sur mesure
Storyboard IA
Visualisation scénaristique
◆
06 · Engagement

IA responsable
& éthique numérique

Dragon AI s'engage à utiliser l'intelligence artificielle dans un cadre éthique, écologique et transparent. Une charte interne de qualité encadre l'ensemble des usages IA au sein du studio.

Les outils validés — ChatGPT, DALL·E, MidJourney, Copilot — sont utilisés dans le respect des licences, de la réglementation RGPD et des principes de sobriété numérique.

Chaque production s'accompagne d'une relecture humaine systématique et d'une évaluation préalable de l'impact énergétique avant utilisation intensive des ressources.

◈
TransparenceMention explicite de l'usage de l'IA auprès des clients et partenaires.
◈
Sobriété numériqueÉvaluation de l'empreinte énergétique avant tout usage intensif.
◈
Protection des donnéesConformité RGPD — aucune donnée sensible ne transite par des outils IA tiers.
◈
Contrôle humainRelecture et validation humaine systématique de tous les contenus générés.
◈
Innovation responsableBibliothèque de prompts partagée et bonnes pratiques documentées.
◆
07 · Présence en ligne

Retrouvez Cédric
LENEUTRE en ligne

🐉
Site principaloeildedragon.com
 👤
Portfolio personnelcedric-leneutre.com
 ▶
Chaîne YouTube@Oeildedragon_IA
 ◉
Réseau professionnellinkedin.com/in/leneutre-cedric
 ◐
Portfolio créatifbehance.net/cedricleneutre
 🏫
École 3AXES3axes-institut.com
 🔬
Site partenairescience-technologie.com
 🎶
Projet musicalleschourave.com
◈ Mots-clés SEO — Référencement Cédric LENEUTRE
Cédric Leneutre Dragon AI Oeil de Dragon réalisateur IA cinéma intelligence artificielle prompt engineer France formation IA générative motion design IA production vidéo IA scénariste IA storyboard IA studio création numérique effets spéciaux IA film animation IA CGI intelligence artificielle ESIF école 3AXES Institut freelance réalisateur infographie médicale IA vidéo corporate IA DALL·E MidJourney expert oeildedragon.com cedric-leneutre.com créateur contenu IA
Studio IA & Création Numérique Innovante — Fondé par Cédric LENEUTRE
© 2011–2026 · Cédric LENEUTRE · oeildedragon.com · Tous droits réservés

Dossier professionnel généré à des fins de référencement · Données issues de oeildedragon.com
* * FONCTIONNALITÉS : * • 5 thèmes de couleur d'accent * • Mode clair / sombre / sépia * • Taille de police (slider) * • Espacement des lignes * • Animations ON/OFF * • Effet de grain ON/OFF * • Grille de fond ON/OFF * • Barre de progression de lecture * • Mode impression * • Sauvegarde localStorage * • Raccourci clavier [S] */ (function () { 'use strict'; /* ───────────────────────────────────────────── CONFIG PAR DÉFAUT ───────────────────────────────────────────── */ const DEFAULTS = { accent: 'gold', // gold | crimson | teal | violet | silver colorMode: 'dark', // dark | light | sepia fontSize: 17, // px (13–24) lineHeight: 1.75, // 1.4 – 2.2 animations: true, grain: true, bgGrid: true, readingBar: true, }; const STORAGE_KEY = 'odd_settings_v1'; /* ───────────────────────────────────────────── THÈMES D'ACCENT ───────────────────────────────────────────── */ const ACCENTS = { gold: { label: 'Or', or: '#c9a84c', 'or-clair': '#e8cc7a', 'or-pale': '#f5e9c0', braise: '#e84c1e', 'braise-claire': '#ff6b3d', swatch: 'linear-gradient(135deg,#c9a84c,#e84c1e)', }, crimson: { label: 'Cramoisi', or: '#e03040', 'or-clair': '#ff5566', 'or-pale': '#ffe0e4', braise: '#c00020', 'braise-claire': '#ff3355', swatch: 'linear-gradient(135deg,#e03040,#8b0000)', }, teal: { label: 'Sarcelle', or: '#2ec4b6', 'or-clair': '#56e0d4', 'or-pale': '#d0f5f2', braise: '#0a9488', 'braise-claire': '#1dd8c8', swatch: 'linear-gradient(135deg,#2ec4b6,#0a9488)', }, violet: { label: 'Violet', or: '#9b5de5', 'or-clair': '#c084fc', 'or-pale': '#ede9fe', braise: '#7c3aed', 'braise-claire': '#a855f7', swatch: 'linear-gradient(135deg,#9b5de5,#ec4899)', }, silver: { label: 'Argent', or: '#b0b8c8', 'or-clair': '#d4dae4', 'or-pale': '#eef0f4', braise: '#7888a0', 'braise-claire': '#96a8bc', swatch: 'linear-gradient(135deg,#b0b8c8,#606880)', }, }; /* ───────────────────────────────────────────── MODES COULEUR ───────────────────────────────────────────── */ const COLOR_MODES = { dark: { label: 'Sombre', icon: '◑', noir: '#050507', charbon: '#0d0d12', ardoise: '#14141c', blanc: '#f0ede8', 'gris-clair': '#9a98a0', 'gris-mid': '#5c5a65', line: 'rgba(201,168,76,0.18)', }, light: { label: 'Clair', icon: '○', noir: '#f5f4f0', charbon: '#eceae4', ardoise: '#e4e2dc', blanc: '#1a1814', 'gris-clair': '#4a4845', 'gris-mid': '#8a8880', line: 'rgba(100,80,30,0.18)', }, sepia: { label: 'Sépia', icon: '◕', noir: '#1c1408', charbon: '#251c0c', ardoise: '#2e2410', blanc: '#f2e8c8', 'gris-clair': '#a09060', 'gris-mid': '#706040', line: 'rgba(201,168,76,0.20)', }, }; /* ───────────────────────────────────────────── STATE ───────────────────────────────────────────── */ let state = { ...DEFAULTS }; function loadState() { try { const saved = localStorage.getItem(STORAGE_KEY); if (saved) state = { ...DEFAULTS, ...JSON.parse(saved) }; } catch (_) {} } function saveState() { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch (_) {} } /* ───────────────────────────────────────────── BARRE DE PROGRESSION DE LECTURE ───────────────────────────────────────────── */ let progressBar; function createProgressBar() { progressBar = document.createElement('div'); progressBar.id = 'odd-progress'; progressBar.style.cssText = ` position:fixed; top:0; left:0; height:3px; width:0%; z-index:99999; pointer-events:none; transition: width 0.1s linear; `; document.body.appendChild(progressBar); updateProgressColor(); window.addEventListener('scroll', onScroll, { passive: true }); } function onScroll() { if (!progressBar) return; const scrolled = window.scrollY; const max = document.documentElement.scrollHeight - window.innerHeight; const pct = max > 0 ? (scrolled / max) * 100 : 0; progressBar.style.width = pct + '%'; } function updateProgressColor() { if (!progressBar) return; const a = ACCENTS[state.accent]; progressBar.style.background = a.swatch; } /* ───────────────────────────────────────────── APPLIQUER LES RÉGLAGES ───────────────────────────────────────────── */ function applySettings() { const root = document.documentElement; const a = ACCENTS[state.accent]; const c = COLOR_MODES[state.colorMode]; // Accent vars root.style.setProperty('--or', a['or']); root.style.setProperty('--or-clair', a['or-clair']); root.style.setProperty('--or-pale', a['or-pale']); root.style.setProperty('--braise', a['braise']); root.style.setProperty('--braise-claire',a['braise-claire']); // Color mode vars root.style.setProperty('--noir', c['noir']); root.style.setProperty('--charbon', c['charbon']); root.style.setProperty('--ardoise', c['ardoise']); root.style.setProperty('--blanc', c['blanc']); root.style.setProperty('--gris-clair', c['gris-clair']); root.style.setProperty('--gris-mid', c['gris-mid']); root.style.setProperty('--line', c['line']); // Body overrides document.body.style.background = c['noir']; document.body.style.color = c['blanc']; // Typography document.body.style.fontSize = state.fontSize + 'px'; document.body.style.lineHeight = state.lineHeight; // Animations const styleId = 'odd-anim-override'; let animStyle = document.getElementById(styleId); if (!animStyle) { animStyle = document.createElement('style'); animStyle.id = styleId; document.head.appendChild(animStyle); } animStyle.textContent = state.animations ? '' : `*, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1 !important; transform: none !important; }`; // Grain overlay const grainEl = document.querySelector('body::before'); const grainStyle = document.getElementById('odd-grain-style'); let gs = grainStyle; if (!gs) { gs = document.createElement('style'); gs.id = 'odd-grain-style'; document.head.appendChild(gs); } gs.textContent = state.grain ? '' : `body::before { display: none !important; }`; // Background grid const gridStyle = document.getElementById('odd-grid-style'); let grs = gridStyle; if (!grs) { grs = document.createElement('style'); grs.id = 'odd-grid-style'; document.head.appendChild(grs); } grs.textContent = state.bgGrid ? '' : `.hero-grid { display: none !important; }`; // Reading bar if (progressBar) { progressBar.style.display = state.readingBar ? 'block' : 'none'; updateProgressColor(); } updatePanelUI(); saveState(); } /* ───────────────────────────────────────────── INJECTION DU CSS DU PANNEAU ───────────────────────────────────────────── */ function injectPanelCSS() { const css = ` /* ── Trigger button ── */ #odd-trigger { position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; background: var(--ardoise, #14141c); border: 1px solid var(--line, rgba(201,168,76,0.18)); color: var(--or, #c9a84c); font-size: 1.2rem; cursor: pointer; z-index: 10000; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 24px rgba(0,0,0,0.5); font-family: 'Space Mono', monospace; } #odd-trigger:hover { border-color: var(--or, #c9a84c); box-shadow: 0 0 0 1px var(--or, #c9a84c), 0 4px 32px rgba(0,0,0,0.6); transform: rotate(30deg); } #odd-trigger.active { background: var(--or, #c9a84c); color: #050507; transform: rotate(60deg); border-color: var(--or, #c9a84c); } /* ── Panel ── */ #odd-panel { position: fixed; top: 0; right: -420px; width: 380px; max-width: 96vw; height: 100vh; background: var(--charbon, #0d0d12); border-left: 1px solid var(--line, rgba(201,168,76,0.18)); z-index: 9998; overflow-y: auto; overflow-x: hidden; transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--or, #c9a84c) transparent; } #odd-panel::-webkit-scrollbar { width: 3px; } #odd-panel::-webkit-scrollbar-thumb { background: var(--or, #c9a84c); } #odd-panel.open { right: 0; } /* ── Panel header ── */ .odd-panel-header { padding: 2rem 1.8rem 1.5rem; border-bottom: 1px solid var(--line, rgba(201,168,76,0.18)); position: sticky; top: 0; background: var(--charbon, #0d0d12); z-index: 1; } .odd-panel-eyebrow { font-family: 'Space Mono', monospace; font-size: 0.55rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--braise, #e84c1e); margin-bottom: 0.4rem; } .odd-panel-title { font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--or, #c9a84c); font-weight: 600; letter-spacing: 0.05em; } .odd-panel-sub { font-family: 'Space Mono', monospace; font-size: 0.55rem; color: var(--gris-mid, #5c5a65); margin-top: 0.3rem; letter-spacing: 0.1em; } /* ── Panel body ── */ .odd-panel-body { padding: 1.5rem 1.8rem; flex: 1; } /* ── Group ── */ .odd-group { margin-bottom: 2.2rem; } .odd-group-label { font-family: 'Space Mono', monospace; font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gris-mid, #5c5a65); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; } .odd-group-label::after { content: ''; flex: 1; height: 1px; background: var(--line, rgba(201,168,76,0.18)); } /* ── Swatches ── */ .odd-swatches { display: flex; gap: 0.6rem; flex-wrap: wrap; } .odd-swatch { width: 38px; height: 38px; cursor: pointer; border: 2px solid transparent; transition: all 0.25s; position: relative; } .odd-swatch:hover { transform: scale(1.1); } .odd-swatch.active { border-color: var(--blanc, #f0ede8); box-shadow: 0 0 0 1px var(--or, #c9a84c); } .odd-swatch-label { font-family: 'Space Mono', monospace; font-size: 0.5rem; text-align: center; color: var(--gris-clair, #9a98a0); margin-top: 0.3rem; letter-spacing: 0.05em; display: block; } .odd-swatch-wrap { display: flex; flex-direction: column; align-items: center; } /* ── Mode buttons ── */ .odd-mode-btns { display: flex; gap: 0.5rem; } .odd-mode-btn { flex: 1; padding: 0.7rem 0.5rem; background: var(--ardoise, #14141c); border: 1px solid var(--line, rgba(201,168,76,0.18)); color: var(--gris-clair, #9a98a0); font-family: 'Space Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; cursor: pointer; transition: all 0.25s; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .odd-mode-btn .mode-icon { font-size: 1rem; } .odd-mode-btn:hover { border-color: var(--or, #c9a84c); color: var(--blanc, #f0ede8); } .odd-mode-btn.active { border-color: var(--or, #c9a84c); background: rgba(201,168,76,0.08); color: var(--or, #c9a84c); } /* ── Slider ── */ .odd-slider-row { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; } .odd-slider-val { font-family: 'Space Mono', monospace; font-size: 0.65rem; color: var(--or, #c9a84c); min-width: 3.5rem; text-align: right; } .odd-range { flex: 1; -webkit-appearance: none; appearance: none; height: 3px; background: var(--ardoise, #14141c); outline: none; cursor: pointer; border-radius: 2px; } .odd-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--or, #c9a84c); border-radius: 50%; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .odd-range::-webkit-slider-thumb:hover { transform: scale(1.3); box-shadow: 0 0 0 4px rgba(201,168,76,0.2); } .odd-range::-moz-range-thumb { width: 14px; height: 14px; background: var(--or, #c9a84c); border-radius: 50%; border: none; cursor: pointer; } .odd-range-labels { display: flex; justify-content: space-between; font-family: 'Space Mono', monospace; font-size: 0.5rem; color: var(--gris-mid, #5c5a65); margin-top: 0.35rem; } /* ── Toggle ── */ .odd-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 0; border-bottom: 1px solid var(--line, rgba(201,168,76,0.18)); } .odd-toggle-row:last-child { border-bottom: none; } .odd-toggle-info { flex: 1; } .odd-toggle-name { font-size: 0.88rem; color: var(--blanc, #f0ede8); margin-bottom: 0.1rem; font-family: 'Cormorant Garamond', serif; } .odd-toggle-hint { font-family: 'Space Mono', monospace; font-size: 0.52rem; color: var(--gris-mid, #5c5a65); letter-spacing: 0.05em; } .odd-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; } .odd-toggle input { opacity: 0; width: 0; height: 0; } .odd-toggle-slider { position: absolute; inset: 0; background: var(--ardoise, #14141c); border: 1px solid var(--line, rgba(201,168,76,0.18)); transition: all 0.3s; border-radius: 2px; } .odd-toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 50%; transform: translateY(-50%); background: var(--gris-clair, #9a98a0); transition: all 0.3s; border-radius: 1px; } .odd-toggle input:checked + .odd-toggle-slider { background: rgba(201,168,76,0.1); border-color: var(--or, #c9a84c); } .odd-toggle input:checked + .odd-toggle-slider::before { transform: translateX(18px) translateY(-50%); background: var(--or, #c9a84c); } /* ── Reset & Print buttons ── */ .odd-actions { display: flex; gap: 0.75rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line, rgba(201,168,76,0.18)); } .odd-btn { flex: 1; padding: 0.75rem 1rem; font-family: 'Space Mono', monospace; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: all 0.25s; border-radius: 0; text-align: center; } .odd-btn-ghost { background: transparent; border: 1px solid var(--line, rgba(201,168,76,0.18)); color: var(--gris-clair, #9a98a0); } .odd-btn-ghost:hover { border-color: var(--or, #c9a84c); color: var(--or, #c9a84c); } .odd-btn-primary { background: var(--or, #c9a84c); border: 1px solid var(--or, #c9a84c); color: #050507; font-weight: 700; } .odd-btn-primary:hover { background: var(--or-clair, #e8cc7a); border-color: var(--or-clair, #e8cc7a); } /* ── Keyboard hint ── */ .odd-kbd-hint { text-align: center; font-family: 'Space Mono', monospace; font-size: 0.5rem; color: var(--gris-mid, #5c5a65); padding: 1rem 1.8rem 1.5rem; letter-spacing: 0.1em; } .odd-kbd { display: inline-block; padding: 0.1rem 0.4rem; border: 1px solid var(--gris-mid, #5c5a65); font-size: 0.5rem; margin: 0 0.2rem; } /* ── Overlay backdrop ── */ #odd-backdrop { position: fixed; inset: 0; background: rgba(5,5,7,0.55); backdrop-filter: blur(4px); z-index: 9997; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } #odd-backdrop.show { opacity: 1; pointer-events: all; } /* ── Live preview chip ── */ #odd-preview-chip { position: fixed; bottom: 6rem; right: 2rem; background: var(--ardoise, #14141c); border: 1px solid var(--line, rgba(201,168,76,0.18)); padding: 0.4rem 0.9rem; font-family: 'Space Mono', monospace; font-size: 0.55rem; color: var(--or, #c9a84c); letter-spacing: 0.1em; z-index: 10000; opacity: 0; transform: translateX(20px); transition: all 0.4s ease; pointer-events: none; } #odd-preview-chip.show { opacity: 1; transform: translateX(0); } `; const style = document.createElement('style'); style.id = 'odd-settings-css'; style.textContent = css; document.head.appendChild(style); } /* ───────────────────────────────────────────── CONSTRUIRE LE PANNEAU HTML ───────────────────────────────────────────── */ function buildPanel() { // Backdrop const backdrop = document.createElement('div'); backdrop.id = 'odd-backdrop'; backdrop.addEventListener('click', closePanel); document.body.appendChild(backdrop); // Trigger const trigger = document.createElement('button'); trigger.id = 'odd-trigger'; trigger.innerHTML = '⚙'; trigger.title = 'Réglages de page [S]'; trigger.addEventListener('click', togglePanel); document.body.appendChild(trigger); // Preview chip const chip = document.createElement('div'); chip.id = 'odd-preview-chip'; chip.textContent = 'Réglages appliqués'; document.body.appendChild(chip); // Panel const panel = document.createElement('div'); panel.id = 'odd-panel'; panel.innerHTML = buildPanelHTML(); document.body.appendChild(panel); // Events bindPanelEvents(); } function buildPanelHTML() { // Swatches HTML const swatchesHTML = Object.entries(ACCENTS).map(([key, a]) => `
${a.label}
`).join(''); // Mode buttons HTML const modeHTML = Object.entries(COLOR_MODES).map(([key, m]) => ` `).join(''); return `
Studio OdD · Dragon AI
Réglages de page
PERSONNALISATION · PRÉFÉRENCES · ACCESSIBILITÉ
Couleur d'accent
${swatchesHTML}
Mode d'affichage
${modeHTML}
Taille du texte
${state.fontSize}px
PetitGrand
Interligne
${state.lineHeight.toFixed(2)}
CompactAéré
Options visuelles
Animations
Révélations au scroll & transitions
Effet de grain
Texture noise cinématographique
Grille de fond
Quadrillage subtil dans le hero
Barre de lecture
Progression de lecture en haut
Raccourci clavier : S ouvrir / fermer
`; } /* ───────────────────────────────────────────── LIER LES ÉVÉNEMENTS DU PANNEAU ───────────────────────────────────────────── */ function bindPanelEvents() { // Swatches document.querySelectorAll('.odd-swatch').forEach(el => { el.addEventListener('click', () => { state.accent = el.dataset.accent; applySettings(); flashChip('Accent · ' + ACCENTS[state.accent].label); }); }); // Mode buttons document.querySelectorAll('.odd-mode-btn').forEach(el => { el.addEventListener('click', () => { state.colorMode = el.dataset.mode; applySettings(); flashChip('Mode · ' + COLOR_MODES[state.colorMode].label); }); }); // Font size const fsRange = document.getElementById('odd-font-size'); fsRange?.addEventListener('input', () => { state.fontSize = parseInt(fsRange.value); document.getElementById('odd-font-size-val').textContent = state.fontSize + 'px'; applySettings(); }); // Line height const lhRange = document.getElementById('odd-line-height'); lhRange?.addEventListener('input', () => { state.lineHeight = parseFloat(lhRange.value); document.getElementById('odd-line-height-val').textContent = state.lineHeight.toFixed(2); applySettings(); }); // Toggles document.getElementById('odd-toggle-anim')?.addEventListener('change', e => { state.animations = e.target.checked; applySettings(); flashChip('Animations · ' + (state.animations ? 'ON' : 'OFF')); }); document.getElementById('odd-toggle-grain')?.addEventListener('change', e => { state.grain = e.target.checked; applySettings(); flashChip('Grain · ' + (state.grain ? 'ON' : 'OFF')); }); document.getElementById('odd-toggle-grid')?.addEventListener('change', e => { state.bgGrid = e.target.checked; applySettings(); flashChip('Grille · ' + (state.bgGrid ? 'ON' : 'OFF')); }); document.getElementById('odd-toggle-reading')?.addEventListener('change', e => { state.readingBar = e.target.checked; applySettings(); flashChip('Barre de lecture · ' + (state.readingBar ? 'ON' : 'OFF')); }); // Reset document.getElementById('odd-reset')?.addEventListener('click', () => { state = { ...DEFAULTS }; syncFormToState(); applySettings(); flashChip('Réglages réinitialisés'); }); // Print document.getElementById('odd-print')?.addEventListener('click', () => { closePanel(); setTimeout(() => window.print(), 400); }); } /* ───────────────────────────────────────────── SYNC UI → STATE ───────────────────────────────────────────── */ function syncFormToState() { const fsRange = document.getElementById('odd-font-size'); const lhRange = document.getElementById('odd-line-height'); if (fsRange) { fsRange.value = state.fontSize; document.getElementById('odd-font-size-val').textContent = state.fontSize + 'px'; } if (lhRange) { lhRange.value = state.lineHeight; document.getElementById('odd-line-height-val').textContent = state.lineHeight.toFixed(2); } const animCheck = document.getElementById('odd-toggle-anim'); const grainCheck = document.getElementById('odd-toggle-grain'); const gridCheck = document.getElementById('odd-toggle-grid'); const readCheck = document.getElementById('odd-toggle-reading'); if (animCheck) animCheck.checked = state.animations; if (grainCheck) grainCheck.checked = state.grain; if (gridCheck) gridCheck.checked = state.bgGrid; if (readCheck) readCheck.checked = state.readingBar; } /* ───────────────────────────────────────────── METTRE À JOUR L'UI DU PANNEAU (ACTIFS) ───────────────────────────────────────────── */ function updatePanelUI() { document.querySelectorAll('.odd-swatch').forEach(el => { el.classList.toggle('active', el.dataset.accent === state.accent); }); document.querySelectorAll('.odd-mode-btn').forEach(el => { el.classList.toggle('active', el.dataset.mode === state.colorMode); }); // update range track fill (visual only) updateRangeTrack('odd-font-size', state.fontSize, 13, 24); updateRangeTrack('odd-line-height', state.lineHeight, 1.4, 2.2); } function updateRangeTrack(id, val, min, max) { const el = document.getElementById(id); if (!el) return; const pct = ((val - min) / (max - min)) * 100; el.style.background = `linear-gradient(to right, var(--or, #c9a84c) ${pct}%, var(--ardoise, #14141c) ${pct}%)`; } /* ───────────────────────────────────────────── FLASH CHIP NOTIFICATION ───────────────────────────────────────────── */ let chipTimeout; function flashChip(msg) { const chip = document.getElementById('odd-preview-chip'); if (!chip) return; chip.textContent = msg; chip.classList.add('show'); clearTimeout(chipTimeout); chipTimeout = setTimeout(() => chip.classList.remove('show'), 1800); } /* ───────────────────────────────────────────── OUVRIR / FERMER LE PANNEAU ───────────────────────────────────────────── */ function openPanel() { document.getElementById('odd-panel')?.classList.add('open'); document.getElementById('odd-backdrop')?.classList.add('show'); document.getElementById('odd-trigger')?.classList.add('active'); } function closePanel() { document.getElementById('odd-panel')?.classList.remove('open'); document.getElementById('odd-backdrop')?.classList.remove('show'); document.getElementById('odd-trigger')?.classList.remove('active'); } function togglePanel() { const panel = document.getElementById('odd-panel'); if (panel?.classList.contains('open')) closePanel(); else openPanel(); } /* ───────────────────────────────────────────── RACCOURCI CLAVIER ───────────────────────────────────────────── */ function bindKeyboard() { document.addEventListener('keydown', e => { if (e.key === 's' || e.key === 'S') { // Ne pas intercepter si focus dans un input if (['INPUT','TEXTAREA','SELECT'].includes(document.activeElement?.tagName)) return; e.preventDefault(); togglePanel(); } if (e.key === 'Escape') closePanel(); }); } /* ───────────────────────────────────────────── INIT ───────────────────────────────────────────── */ function init() { loadState(); injectPanelCSS(); buildPanel(); createProgressBar(); applySettings(); syncFormToState(); updatePanelUI(); bindKeyboard(); console.log( '%c⚙ ODD Settings chargé%c — Raccourci [S] pour ouvrir', 'color:#c9a84c; font-family:monospace; font-weight:bold', 'color:#9a98a0; font-family:monospace' ); } // Attendre le DOM if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();;