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

<channel>
	<title>Carole Sauvanet</title>
	<atom:link href="https://carolesauvanet.fr/feed/" rel="self" type="application/rss+xml" />
	<link>https://carolesauvanet.fr</link>
	<description>Du tempo &#38; des templates</description>
	<lastBuildDate>Sun, 23 Nov 2025 09:32:55 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	
<image>
	<url>https://carolesauvanet.fr/wp-content/uploads/2025/07/cropped-favicon-32x32.png</url>
	<title>Carole Sauvanet</title>
	<link>https://carolesauvanet.fr</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Calculateur de durée musicale</title>
		<link>https://carolesauvanet.fr/calculateur-duree-musicale/</link>
		
		<dc:creator><![CDATA[KrolSpirit]]></dc:creator>
		<pubDate>Sat, 22 Nov 2025 11:43:20 +0000</pubDate>
				<category><![CDATA[Outils]]></category>
		<category><![CDATA[Rythme]]></category>
		<category><![CDATA[Tempo]]></category>
		<category><![CDATA[Rythme & Tempo]]></category>
		<guid isPermaLink="false">https://carolesauvanet.fr/?p=11840</guid>

					<description><![CDATA[Lorsqu’on compose de la musique à l’image, il est souvent nécessaire d’écrire un morceau avec une durée précise, voire de caler des transitions pour qu’elles coïncident parfaitement avec certains moments visuels.
Pour faciliter ce travail, j’ai conçu trois petits calculateurs]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="11840" class="elementor elementor-11840">
				<div class="elementor-element elementor-element-ec81dde e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="ec81dde" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-fbe59a3 elementor-widget__width-initial elementor-widget-tablet__width-auto elementor-widget elementor-widget-heading" data-id="fbe59a3" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
					<h1 class="elementor-heading-title elementor-size-default">Calculateur de durée ou de tempo d'un morceau</h1>				</div>
				</div>
		<div class="elementor-element elementor-element-3d10e07e e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="3d10e07e" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-d3553e1 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child" data-id="d3553e1" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-455ad8c elementor-widget elementor-widget-text-editor" data-id="455ad8c" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
									<p data-start="120" data-end="340">Lorsqu’on compose de la musique à l’image, il est souvent nécessaire d’écrire un morceau avec une <strong data-start="218" data-end="235">durée précise</strong>, voire de <strong data-start="246" data-end="271">caler des transitions</strong> pour qu’elles coïncident parfaitement avec certains moments visuels.</p><p data-start="342" data-end="429">Pour faciliter ce travail, j’ai conçu <strong data-start="380" data-end="409">trois petits calculateurs</strong> qui permettent de :</p><ul data-start="431" data-end="746"><li data-start="431" data-end="521"><p data-start="433" data-end="521">déterminer la durée d’un passage à partir d’un <strong data-start="480" data-end="489">tempo</strong> et d’un <strong data-start="498" data-end="519">nombre de mesures</strong> ;</p></li><li data-start="522" data-end="628"><p data-start="524" data-end="628">savoir combien de <strong data-start="542" data-end="553">mesures</strong> sont nécessaires pour atteindre une durée donnée, en fonction d’un tempo ;</p></li><li data-start="629" data-end="746"><p data-start="631" data-end="746">calculer à quel <strong data-start="647" data-end="656">tempo</strong> jouer pour que le morceau atteigne une certaine durée, selon un nombre de mesures précis.</p></li></ul><p data-start="748" data-end="931">Dans chaque cas, vous pouvez définir une <strong data-start="789" data-end="801">métrique</strong> (mesure) spécifique, mais attention : <strong data-start="840" data-end="910">le tempo et la métrique doivent rester constants du début à la fin</strong> du segment concerné.</p><p data-start="129" data-end="205">J’espère que ces outils vous seront utiles dans vos créations musicales. Bon travail sur vos prochaines musiques à l’image !</p>								</div>
				</div>
		<div class="elementor-element elementor-element-64b00283 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child" data-id="64b00283" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-341ad20 elementor-widget__width-inherit elementor-widget elementor-widget-html" data-id="341ad20" 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>Suite de Calculateurs de Durée Musicale</title>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #F0F5FA;
            min-height: 100vh;
            padding: 20px;
            color: #334155;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: #FFFFFF;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(51, 65, 85, 0.1);
            overflow: hidden;
            border: 1px solid #d4d0cf;
        }
        
        .header {
            background: #b57657;
            color: #FFFFFF;
            padding: 24px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 24px;
            margin-bottom: 8px;
            color: #FFFFFF;
        }
        
        .header p {
            opacity: 0.95;
            font-size: 14px;
            color: #F0E6C5;
        }
        
        .content {
            padding: 24px;
        }
        
        /* Style pour séparer visuellement les 3 outils */
        .tool-section {
            border: 1px solid #d4d0cf;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
            background-color: #fcfcfc;
        }

        .tool-section h2 {
            color: #702619;
            font-size: 20px;
            margin-bottom: 15px;
            border-bottom: 2px solid #F0E6C5;
            padding-bottom: 5px;
        }
        
        .section {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .input-group {
            flex: 1 1 200px;
            min-width: 150px;
        }
        
        /* Ajout d'un style pour le groupe d'entrée de la durée (minutes/secondes) */
        .duration-group {
            display: flex;
            gap: 10px;
        }

        .duration-group .input-group {
            flex: 1;
            min-width: 0; /* Permet aux groupes de minutes/secondes d'être petits */
        }
        
        .label {
            display: block;
            font-weight: 500;
            margin-bottom: 12px;
            color: #702619;
            font-size: 16px;
        }
        
        input[type="number"] {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #d4d0cf;
            border-radius: 8px;
            background: #FFFFFF;
            font-size: 16px;
            color: #334155;
            transition: border-color 0.2s;
        }

        input[type="number"]:focus {
            outline: none;
            border-color: #702619;
        }
        
        .calculate-btn {
            width: 100%;
            padding: 15px 24px;
            border: 2px solid #b57657;
            border-radius: 8px;
            background: #702619;
            color: #FFFFFF;
            cursor: pointer;
            font-size: 18px;
            font-weight: 600;
            transition: all 0.2s;
            text-align: center;
            margin-top: 20px;
        }
        
        .calculate-btn:hover {
            background: #b57657;
            border-color: #b57657;
        }

        .calculate-btn:active {
            transform: scale(0.98);
        }

        /* Section Résultat */
        .result-main {
            background: #F0E6C5;
            border: 2px solid #d7b49e;
            border-radius: 12px;
            padding: 24px;
            text-align: center;
            margin-top: 32px;
            transition: all 0.3s ease;
        }
        
        .result-title {
            font-size: 14px;
            color: #702619;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .result-key {
            font-size: 32px;
            font-weight: bold;
            color: #702619;
            margin-bottom: 8px;
        }
        
        .result-relative {
            font-size: 18px;
            color: #334155;
            opacity: 0.8;
        }
        
        /* Responsive - Tablettes */
        @media (max-width: 768px) {
            .content {
                padding: 16px;
            }
            .tool-section {
                padding: 15px;
            }
            .section {
                flex-direction: column;
                gap: 15px;
            }
            .input-group {
                flex: 1 1 100%;
            }
            .result-key {
                font-size: 26px;
            }
            .result-relative {
                font-size: 16px;
            }
        }
        
        /* Responsive - Mobiles */
        @media (max-width: 480px) {
            .content {
                padding: 12px;
            }
            .result-key {
                font-size: 22px;
            }
            .result-relative {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <header class="header">
            <h1>Suite de calculateurs de durée musicale ⏱️</h1>
            <p>Trois calculateurs pour adapter le tempo, la durée ou le nombre de mesures à vos besoins.</p>
        </header>

        <main class="content">
            
            <div class="tool-section">
                <h2>1. Durée d'un Morceau</h2>
                <div class="section">
                    <div class="input-group">
                        <label for="tempo1" class="label">Tempo (BPM)</label>
                        <input type="number" id="tempo1" value="120" min="1" placeholder="Ex: 120" required>
                    </div>
                    <div class="input-group">
                        <label for="mesures1" class="label">Nombre de Mesures</label>
                        <input type="number" id="mesures1" value="16" min="1" placeholder="Ex: 16" required>
                    </div>
                    <div class="input-group">
                        <label for="metrique1" class="label">Métrique (Temps par mesure)</label>
                        <input type="number" id="metrique1" value="4" min="1" placeholder="Ex: 4 (pour 4/4)" required>
                    </div>
                </div>

                <button onclick="calculerDuree(1)" class="calculate-btn">CALCULER LA DURÉE</button>

                <div class="result-main" id="resultat1">
                    <div class="result-title">Durée Estimée</div>
                    <div class="result-key">...</div>
                    <div class="result-relative">Entrez les valeurs ci-dessus.</div>
                </div>
            </div>
            
            <hr>

            <div class="tool-section">
                <h2>2. Nombre de Mesures Nécessaires</h2>
                <div class="section">
                    <div class="input-group">
                        <label class="label">Durée Totale Requise</label>
                        <div class="duration-group">
                            <div class="input-group">
                                <input type="number" id="min2" value="1" min="0" placeholder="Min" required>
                                <label style="font-size: 12px; margin-top: 5px;">Minutes</label>
                            </div>
                            <div class="input-group">
                                <input type="number" id="sec2" value="30" min="0" max="59" placeholder="Sec" required>
                                <label style="font-size: 12px; margin-top: 5px;">Secondes</label>
                            </div>
                        </div>
                    </div>
                    <div class="input-group">
                        <label for="tempo2" class="label">Tempo (BPM)</label>
                        <input type="number" id="tempo2" value="120" min="1" placeholder="Ex: 120" required>
                    </div>
                    <div class="input-group">
                        <label for="metrique2" class="label">Métrique (Temps par mesure)</label>
                        <input type="number" id="metrique2" value="4" min="1" placeholder="Ex: 4 (pour 4/4)" required>
                    </div>
                </div>

                <button onclick="calculerMesures()" class="calculate-btn">CALCULER LE NOMBRE DE MESURES</button>

                <div class="result-main" id="resultat2">
                    <div class="result-title">Nombre de Mesures à Écrire</div>
                    <div class="result-key">...</div>
                    <div class="result-relative">Entrez les valeurs ci-dessus.</div>
                </div>
            </div>

            <hr>
            
            <div class="tool-section">
                <h2>3. Tempo Requis (BPM)</h2>
                <div class="section">
                    <div class="input-group">
                        <label class="label">Durée Totale Requise</label>
                        <div class="duration-group">
                            <div class="input-group">
                                <input type="number" id="min3" value="1" min="0" placeholder="Min" required>
                                <label style="font-size: 12px; margin-top: 5px;">Minutes</label>
                            </div>
                            <div class="input-group">
                                <input type="number" id="sec3" value="30" min="0" max="59" placeholder="Sec" required>
                                <label style="font-size: 12px; margin-top: 5px;">Secondes</label>
                            </div>
                        </div>
                    </div>
                    <div class="input-group">
                        <label for="mesures3" class="label">Nombre de Mesures</label>
                        <input type="number" id="mesures3" value="16" min="1" placeholder="Ex: 16" required>
                    </div>
                    <div class="input-group">
                        <label for="metrique3" class="label">Métrique (Temps par mesure)</label>
                        <input type="number" id="metrique3" value="4" min="1" placeholder="Ex: 4 (pour 4/4)" required>
                    </div>
                </div>

                <button onclick="calculerTempo()" class="calculate-btn">CALCULER LE TEMPO</button>

                <div class="result-main" id="resultat3">
                    <div class="result-title">Tempo Nécessaire</div>
                    <div class="result-key">...</div>
                    <div class="result-relative">Entrez les valeurs ci-dessus.</div>
                </div>
            </div>

        </main>
    </div>

    <script>
        // Fonction utilitaire pour le formatage
        function formaterDuree(totalSecondes) {
            const minutes = Math.floor(totalSecondes / 60);
            const secondes = (totalSecondes % 60);
            const secondesEntieres = Math.floor(secondes);
            const millisecondes = Math.floor((secondes - secondesEntieres) * 100);
            
            return `${minutes} min ${secondesEntieres} s ${millisecondes} ms`;
        }

        // Fonction utilitaire pour la validation
        function validerInputs(values, resultatId, outputType) {
            const resultatDiv = document.getElementById(resultatId);
            const resultKeyDiv = resultatDiv.querySelector('.result-key');
            const resultRelativeDiv = resultatDiv.querySelector('.result-relative');

            for (const key in values) {
                if (isNaN(values[key]) || values[key] <= 0) {
                    // Les minutes/secondes peuvent être zéro, mais pas négatives
                    if (key !== 'min' && key !== 'sec') {
                        resultKeyDiv.textContent = "Erreur !";
                        resultRelativeDiv.textContent = "⚠️ Veuillez entrer des valeurs numériques positives.";
                        return false;
                    }
                    if (values[key] < 0) {
                         resultKeyDiv.textContent = "Erreur !";
                        resultRelativeDiv.textContent = "⚠️ Les valeurs doivent être positives ou nulles.";
                        return false;
                    }
                }
            }

            // Vérification spécifique pour les calculateurs 2 et 3
            if (outputType !== 1 && values.min === 0 && values.sec === 0) {
                 resultKeyDiv.textContent = "Erreur !";
                resultRelativeDiv.textContent = "⚠️ La durée totale requise ne peut pas être zéro.";
                return false;
            }

            // Gestion de l'animation
            resultatDiv.classList.add('updated');
            setTimeout(() => {
                resultatDiv.classList.remove('updated');
            }, 500);

            return { resultKeyDiv, resultRelativeDiv };
        }


        // ==============================================
        // 1. CALCUL DE LA DURÉE (Tempo & Mesures -> Durée)
        // ==============================================
        function calculerDuree(outilNumero) {
            const tempo = parseFloat(document.getElementById(`tempo${outilNumero}`).value);
            const mesures = parseFloat(document.getElementById(`mesures${outilNumero}`).value);
            const metrique = parseFloat(document.getElementById(`metrique${outilNumero}`).value);

            const validation = validerInputs({ tempo, mesures, metrique }, `resultat${outilNumero}`, 1);
            if (!validation) return;
            const { resultKeyDiv, resultRelativeDiv } = validation;

            // Logique de Calcul
            // Total de Temps = Mesures * Métrique
            const totalTemps = mesures * metrique;
            // Durée Totale (en secondes) = (Total de Temps * 60) / Tempo
            const dureeTotaleSecondes = (totalTemps * 60) / tempo;

            // Affichage du Résultat
            resultKeyDiv.textContent = `${dureeTotaleSecondes.toFixed(2)} SECONDES`;
            resultRelativeDiv.textContent = `Soit : ${formaterDuree(dureeTotaleSecondes)}`;
        }

        // ==============================================
        // 2. CALCUL DU NOMBRE DE MESURES (Durée & Tempo -> Mesures)
        // ==============================================
        function calculerMesures() {
            const min = parseFloat(document.getElementById('min2').value) || 0;
            const sec = parseFloat(document.getElementById('sec2').value) || 0;
            const tempo = parseFloat(document.getElementById('tempo2').value);
            const metrique = parseFloat(document.getElementById('metrique2').value);

            const validation = validerInputs({ min, sec, tempo, metrique }, 'resultat2', 2);
            if (!validation) return;
            const { resultKeyDiv, resultRelativeDiv } = validation;

            // Conversion de la durée totale en secondes
            const dureeTotaleSecondes = (min * 60) + sec;

            // Logique de Calcul
            // Total de Temps Requis = (Durée Totale (s) * Tempo) / 60 
            const totalTempsRequis = (dureeTotaleSecondes * tempo) / 60;

            // Nombre de Mesures = Total de Temps Requis / Métrique
            const mesures = totalTempsRequis / metrique;
            
            // Affichage du Résultat
            resultKeyDiv.textContent = `${mesures.toFixed(2)}`; // Garde deux décimales pour la précision
            resultRelativeDiv.textContent = `Soit environ ${Math.ceil(mesures)} mesures complètes pour atteindre ${formaterDuree(dureeTotaleSecondes)}.`;
        }

        // ==============================================
        // 3. CALCUL DU TEMPO (Durée & Mesures -> Tempo)
        // ==============================================
        function calculerTempo() {
            const min = parseFloat(document.getElementById('min3').value) || 0;
            const sec = parseFloat(document.getElementById('sec3').value) || 0;
            const mesures = parseFloat(document.getElementById('mesures3').value);
            const metrique = parseFloat(document.getElementById('metrique3').value);

            const validation = validerInputs({ min, sec, mesures, metrique }, 'resultat3', 3);
            if (!validation) return;
            const { resultKeyDiv, resultRelativeDiv } = validation;

            // Conversion de la durée totale en secondes
            const dureeTotaleSecondes = (min * 60) + sec;

            // Logique de Calcul
            // Total de Temps Fourni = Mesures * Métrique
            const totalTempsFourni = mesures * metrique;
            
            // Tempo (BPM) = (Total de Temps Fourni * 60) / Durée Totale (s)
            const tempo = (totalTempsFourni * 60) / dureeTotaleSecondes;

            // Affichage du Résultat
            resultKeyDiv.textContent = `${tempo.toFixed(2)} BPM`;
            resultRelativeDiv.textContent = `La vitesse requise est **${Math.round(tempo)} BPM** pour couvrir ${mesures} mesures en ${formaterDuree(dureeTotaleSecondes)}.`;
        }
        
        // Initialisation de l'outil 1 au chargement pour afficher un résultat de départ
        window.onload = function() {
            calculerDuree(1);
        };
    </script>

</body>
</html>				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-ac6426e e-grid e-con-full wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="ac6426e" data-element_type="container" data-e-type="container">
				</div>
		<div class="elementor-element elementor-element-d7eed13 e-grid e-con-full wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="d7eed13" data-element_type="container" data-e-type="container">
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Widget musical</title>
		<link>https://carolesauvanet.fr/widget-musical/</link>
		
		<dc:creator><![CDATA[KrolSpirit]]></dc:creator>
		<pubDate>Wed, 15 Oct 2025 22:58:22 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://carolesauvanet.fr/?p=6472</guid>

					<description><![CDATA[Guide des tonalités 🎼 Guide des tonalités Identifiez les tonalités à partir du nombre d&#8217;altérations Nombre d&#8217;altérations à la clé : − 0 + Aucune Dièses ♯ Bémols ♭ Tonalité correspondante Do majeur (La mineur) Tableau complet des tonalités Altérations Tonalité majeure Tonalité mineure(relative) Ordre des altérations]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="6472" class="elementor elementor-6472">
				<div class="elementor-element elementor-element-e717bb5 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="e717bb5" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-8a0e811 elementor-widget elementor-widget-html" data-id="8a0e811" 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>Guide des tonalités</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #F0F5FA;
            min-height: 100vh;
            padding: 20px;
            color: #334155;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: #FFFFFF;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(51, 65, 85, 0.1);
            overflow: hidden;
            border: 1px solid #d4d0cf;
        }
        
        .header {
            background: #b57657;
            color: #FFFFFF;
            padding: 24px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 24px;
            margin-bottom: 8px;
            color: #FFFFFF;
        }
        
        .header p {
            opacity: 0.95;
            font-size: 14px;
            color: #F0E6C5;
        }
        
        .content {
            padding: 24px;
        }
        
        .section {
            margin-bottom: 32px;
        }
        
        .label {
            display: block;
            font-weight: 500;
            margin-bottom: 12px;
            color: #702619;
            font-size: 16px;
        }
        
        .alteration-selector {
            display: flex;
            gap: 16px;
            align-items: center;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }
        
        .number-input {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .number-display {
            font-size: 24px;
            font-weight: bold;
            color: #702619;
            min-width: 40px;
            text-align: center;
            padding: 8px;
            border: 2px solid #d4d0cf;
            border-radius: 8px;
            background: #FFFFFF;
        }
        
        .number-btn {
            width: 40px;
            height: 40px;
            border: 2px solid #d4d0cf;
            border-radius: 8px;
            background: #FFFFFF;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            color: #702619;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .number-btn:hover {
            border-color: #702619;
            background: #F0E6C5;
        }
        
        .number-btn:active {
            transform: scale(0.95);
        }
        
        .alteration-type {
            display: flex;
            gap: 8px;
        }
        
        .type-btn {
            padding: 12px 24px;
            border: 2px solid #d4d0cf;
            border-radius: 8px;
            background: #FFFFFF;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.2s;
            color: #334155;
        }
        
        .type-btn:hover {
            border-color: #702619;
            background: #F0E6C5;
            color: #702619;
        }
        
        .type-btn.active {
            background: #702619;
            color: #FFFFFF;
            border-color: #702619;
        }
        
        .result-main {
            background: #F0E6C5;
            border: 2px solid #d7b49e;
            border-radius: 12px;
            padding: 24px;
            text-align: center;
            margin-bottom: 24px;
            transition: all 0.3s ease;
        }
        
        .result-main.updated {
            transform: scale(1.02);
        }
        
        .result-title {
            font-size: 14px;
            color: #702619;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .result-key {
            font-size: 32px;
            font-weight: bold;
            color: #702619;
            margin-bottom: 8px;
        }
        
        .result-relative {
            font-size: 18px;
            color: #334155;
            opacity: 0.8;
        }
        
        .complete-table {
            margin-top: 32px;
        }
        
        .table-header {
            color: #702619;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
            text-align: center;
        }
        
        .table-container {
            overflow-x: auto;
            border-radius: 8px;
            border: 1px solid #d4d0cf;
        }
        
        .tonality-table {
            width: 100%;
            border-collapse: collapse;
            background: #FFFFFF;
        }
        
        .tonality-table th {
            background: #b57657;
            color: #FFFFFF;
            padding: 12px 8px;
            font-weight: 600;
            font-size: 14px;
            text-align: center;
        }
        
        .tonality-table td {
            padding: 12px 8px;
            text-align: center;
            border-bottom: 1px solid #d4d0cf;
            color: #334155;
        }
        
        .tonality-table tr:nth-child(even) {
            background: #F0F5FA;
        }
        
        .tonality-table tr:hover {
            background: #F0E6C5;
        }
        
        .tonality-table .major-key {
            font-weight: 600;
            color: #702619;
            font-size: 16px;
        }
        
        .tonality-table .minor-key {
            font-style: italic;
            color: #334155;
            font-size: 14px;
        }
        
        .tonality-table .alteration-count {
            font-weight: bold;
            color: #b57657;
        }
        
        /* Responsive - Tablettes */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .container {
                border-radius: 8px;
            }
            
            .header {
                padding: 20px 16px;
            }
            
            .header h1 {
                font-size: 20px;
            }
            
            .header p {
                font-size: 13px;
            }
            
            .content {
                padding: 16px;
            }
            
            .section {
                margin-bottom: 24px;
            }
            
            .label {
                font-size: 14px;
                margin-bottom: 10px;
            }
            
            .alteration-selector {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
            }
            
            .number-input {
                justify-content: center;
            }
            
            .alteration-type {
                justify-content: center;
                flex-wrap: wrap;
            }
            
            .type-btn {
                padding: 10px 20px;
                font-size: 14px;
                flex: 1;
                min-width: 100px;
            }
            
            .result-main {
                padding: 20px 16px;
            }
            
            .result-title {
                font-size: 13px;
            }
            
            .result-key {
                font-size: 26px;
            }
            
            .result-relative {
                font-size: 16px;
            }
            
            .complete-table {
                margin-top: 24px;
            }
            
            .table-header {
                font-size: 16px;
                margin-bottom: 12px;
            }
            
            .tonality-table th,
            .tonality-table td {
                padding: 10px 6px;
                font-size: 12px;
            }
            
            .tonality-table .major-key {
                font-size: 14px;
            }
            
            .tonality-table .minor-key {
                font-size: 12px;
            }
        }
        
        /* Responsive - Mobiles */
        @media (max-width: 480px) {
            body {
                padding: 5px;
            }
            
            .header h1 {
                font-size: 18px;
            }
            
            .header p {
                font-size: 12px;
            }
            
            .content {
                padding: 12px;
            }
            
            .number-display {
                font-size: 20px;
                min-width: 35px;
                padding: 6px;
            }
            
            .number-btn {
                width: 35px;
                height: 35px;
                font-size: 16px;
            }
            
            .type-btn {
                padding: 8px 12px;
                font-size: 13px;
                min-width: auto;
            }
            
            .result-key {
                font-size: 22px;
            }
            
            .result-relative {
                font-size: 14px;
            }
            
            .tonality-table th,
            .tonality-table td {
                padding: 8px 4px;
                font-size: 11px;
            }
            
            .tonality-table .major-key {
                font-size: 13px;
            }
            
            .tonality-table .minor-key {
                font-size: 11px;
            }
            
            .tonality-table th {
                font-size: 11px;
                padding: 10px 4px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎼 Guide des tonalités</h1>
            <p>Identifiez les tonalités à partir du nombre d'altérations</p>
        </div>
        
        <div class="content">
            <div class="section">
                <label class="label">Nombre d'altérations à la clé :</label>
                <div class="alteration-selector">
                    <div class="number-input">
                        <button class="number-btn" onclick="changeNumber(-1)">−</button>
                        <div class="number-display" id="number-display">0</div>
                        <button class="number-btn" onclick="changeNumber(1)">+</button>
                    </div>
                    
                    <div class="alteration-type">
                        <button class="type-btn active" onclick="setType('none')" id="none-btn">Aucune</button>
                        <button class="type-btn" onclick="setType('sharps')" id="sharps-btn">Dièses ♯</button>
                        <button class="type-btn" onclick="setType('flats')" id="flats-btn">Bémols ♭</button>
                    </div>
                </div>
            </div>
            
            <div class="result-main" id="result-main">
                <div class="result-title">Tonalité correspondante</div>
                <div class="result-key" id="result-key">Do majeur</div>
                <div class="result-relative" id="result-relative">(La mineur)</div>
            </div>
            
            <div class="complete-table">
                <div class="table-header">Tableau complet des tonalités</div>
                <div class="table-container">
                    <table class="tonality-table">
                        <thead>
                            <tr>
                                <th>Altérations</th>
                                <th>Tonalité majeure</th>
                                <th>Tonalité mineure<br>(relative)</th>
                                <th>Ordre des altérations</th>
                            </tr>
                        </thead>
                        <tbody id="table-body"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        let state = {
            number: 0,
            type: 'none'
        };

        const tonalities = {
            sharps: [
                { count: 0, major: 'Do', minor: 'La', order: '' },
                { count: 1, major: 'Sol', minor: 'Mi', order: 'Fa♯' },
                { count: 2, major: 'Ré', minor: 'Si', order: 'Fa♯ Do♯' },
                { count: 3, major: 'La', minor: 'Fa♯', order: 'Fa♯ Do♯ Sol♯' },
                { count: 4, major: 'Mi', minor: 'Do♯', order: 'Fa♯ Do♯ Sol♯ Ré♯' },
                { count: 5, major: 'Si', minor: 'Sol♯', order: 'Fa♯ Do♯ Sol♯ Ré♯ La♯' },
                { count: 6, major: 'Fa♯', minor: 'Ré♯', order: 'Fa♯ Do♯ Sol♯ Ré♯ La♯ Mi♯' },
                { count: 7, major: 'Do♯', minor: 'La♯', order: 'Fa♯ Do♯ Sol♯ Ré♯ La♯ Mi♯ Si♯' }
            ],
            flats: [
                { count: 0, major: 'Do', minor: 'La', order: '' },
                { count: 1, major: 'Fa', minor: 'Ré', order: 'Si♭' },
                { count: 2, major: 'Si♭', minor: 'Sol', order: 'Si♭ Mi♭' },
                { count: 3, major: 'Mi♭', minor: 'Do', order: 'Si♭ Mi♭ La♭' },
                { count: 4, major: 'La♭', minor: 'Fa', order: 'Si♭ Mi♭ La♭ Ré♭' },
                { count: 5, major: 'Ré♭', minor: 'Si♭', order: 'Si♭ Mi♭ La♭ Ré♭ Sol♭' },
                { count: 6, major: 'Sol♭', minor: 'Mi♭', order: 'Si♭ Mi♭ La♭ Ré♭ Sol♭ Do♭' },
                { count: 7, major: 'Do♭', minor: 'La♭', order: 'Si♭ Mi♭ La♭ Ré♭ Sol♭ Do♭ Fa♭' }
            ]
        };

        function changeNumber(delta) {
            const newNumber = Math.max(0, Math.min(7, state.number + delta));
            if (newNumber !== state.number) {
                state.number = newNumber;
                updateDisplay();
                updateResult();
            }
        }

        function setType(type) {
            if (state.type !== type) {
                state.type = type;
                
                document.querySelectorAll('.type-btn').forEach(btn => btn.classList.remove('active'));
                document.getElementById(type + '-btn').classList.add('active');
                
                if ((type === 'none' && state.number > 0) || (type !== 'none' && state.number === 0)) {
                    state.number = type === 'none' ? 0 : 1;
                }
                
                updateDisplay();
                updateResult();
            }
        }

        function updateDisplay() {
            document.getElementById('number-display').textContent = state.number;
            
            const minusBtn = document.querySelector('.number-btn');
            const plusBtn = document.querySelectorAll('.number-btn')[1];
            
            if (state.type === 'none') {
                minusBtn.style.opacity = '0.5';
                plusBtn.style.opacity = '0.5';
                minusBtn.style.pointerEvents = 'none';
                plusBtn.style.pointerEvents = 'none';
            } else {
                minusBtn.style.opacity = state.number <= 1 ? '0.5' : '1';
                plusBtn.style.opacity = state.number >= 7 ? '0.5' : '1';
                minusBtn.style.pointerEvents = state.number <= 1 ? 'none' : 'auto';
                plusBtn.style.pointerEvents = state.number >= 7 ? 'none' : 'auto';
            }
        }

        function updateResult() {
            const resultMain = document.getElementById('result-main');
            const resultKey = document.getElementById('result-key');
            const resultRelative = document.getElementById('result-relative');
            
            let tonality;
            
            if (state.type === 'none' || state.number === 0) {
                tonality = tonalities.sharps[0];
            } else if (state.type === 'sharps') {
                tonality = tonalities.sharps[state.number];
            } else {
                tonality = tonalities.flats[state.number];
            }
            
            resultKey.textContent = tonality.major + ' majeur';
            resultRelative.textContent = '(' + tonality.minor + ' mineur)';
            
            resultMain.classList.add('updated');
            setTimeout(() => resultMain.classList.remove('updated'), 300);
        }

        function generateTable() {
            const tableBody = document.getElementById('table-body');
            tableBody.innerHTML = '';
            
            const noneRow = document.createElement('tr');
            noneRow.innerHTML = `
                <td class="alteration-count">0</td>
                <td class="major-key">Do majeur</td>
                <td class="minor-key">La mineur</td>
                <td>Aucune altération</td>
            `;
            tableBody.appendChild(noneRow);
            
            for (let i = 1; i <= 7; i++) {
                const sharp = tonalities.sharps[i];
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td class="alteration-count">${i} ♯</td>
                    <td class="major-key">${sharp.major} majeur</td>
                    <td class="minor-key">${sharp.minor} mineur</td>
                    <td>${sharp.order}</td>
                `;
                tableBody.appendChild(row);
            }
            
            for (let i = 1; i <= 7; i++) {
                const flat = tonalities.flats[i];
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td class="alteration-count">${i} ♭</td>
                    <td class="major-key">${flat.major} majeur</td>
                    <td class="minor-key">${flat.minor} mineur</td>
                    <td>${flat.order}</td>
                `;
                tableBody.appendChild(row);
            }
        }

        function init() {
            updateDisplay();
            updateResult();
            generateTable();
        }

        init();
    </script>
</body>
</html>				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Concerts</title>
		<link>https://carolesauvanet.fr/concerts/</link>
		
		<dc:creator><![CDATA[KrolSpirit]]></dc:creator>
		<pubDate>Sat, 27 Sep 2025 10:39:17 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://carolesauvanet.fr/?p=4954</guid>

					<description><![CDATA[Voici mes dates de concerts pour l&#8217;année en cours]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="4954" class="elementor elementor-4954">
				<div class="elementor-element elementor-element-0c062fc e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="0c062fc" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-7bba46f elementor-widget elementor-widget-text-editor" data-id="7bba46f" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
									<p>Voici mes dates de concerts pour l&rsquo;année en cours</p>								</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-cc38227 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="cc38227" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-ab5589f elementor-widget elementor-widget-shortcode" data-id="ab5589f" data-element_type="widget" data-e-type="widget" data-widget_type="shortcode.default">
							<div class="elementor-shortcode">
<table id="tablepress-2" class="tablepress tablepress-id-2">
<thead>
<tr class="row-1">
	<th class="column-1">Concerts 2025</th><td class="column-2"></td><td class="column-3"></td><td class="column-4"></td><td class="column-5"></td><td class="column-6"></td>
</tr>
</thead>
<tbody class="row-striping row-hover">
<tr class="row-2">
	<td class="column-1"><strong>Date</strong></td><td class="column-2"><strong>Evenement</strong></td><td class="column-3"><strong>Formation</strong></td><td class="column-4"><strong>Instrument</strong></td><td class="column-5"><strong>Lieu</strong></td><td class="column-6"></td>
</tr>
<tr class="row-3">
	<td class="column-1">7 janvier</td><td class="column-2">Musicien au Musée</td><td class="column-3"><a href="https://philharmoniedeparis.fr/fr/activite/musicien-au-musee/17722-carole-sauvanet?itemId=145258" target="_blank">Concert pédagogique</a></td><td class="column-4">Sax baryton</td><td class="column-5">Philharmonie de Paris, musée de la musique</td><td class="column-6"></td>
</tr>
<tr class="row-4">
	<td class="column-1">15 février</td><td class="column-2">Musicien au Musée</td><td class="column-3"><a href="https://philharmoniedeparis.fr/fr/activite/musicien-au-musee/17722-carole-sauvanet?itemId=145258" target="_blank">Concert pédagogique</a></td><td class="column-4">Sax baryton</td><td class="column-5">Philharmonie de Paris, musée de la musique</td><td class="column-6"></td>
</tr>
<tr class="row-5">
	<td class="column-1">8 mars</td><td class="column-2">Evénement privé</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/bluepearl-jazz/"target="_blank">BluePearl Quartet</a><br />
<br />
<br />
</td><td class="column-4">Basse</td><td class="column-5">Veretz - 37</td><td class="column-6"></td>
</tr>
<tr class="row-6">
	<td class="column-1">29 mars</td><td class="column-2">Carnaval Larçay</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/plumes-danges-et-la-fanfare-de-poche/">Plumes d'Anges &amp; la fanfare de poche</a></td><td class="column-4">Sax baryton</td><td class="column-5">Veretz - 37</td><td class="column-6"></td>
</tr>
<tr class="row-7">
	<td class="column-1">5 avril</td><td class="column-2">Evénement privé</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/bluepearl-jazz/"target="_blank">BluePearl Jazz Trio </a></td><td class="column-4">Contrebasse</td><td class="column-5">Saint Lô - 50</td><td class="column-6"></td>
</tr>
<tr class="row-8">
	<td class="column-1">23 avril</td><td class="column-2">Inauguration Magasin </td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/pockpockblues/" target="_blank">Pock Pock Blues</a></td><td class="column-4">Sax baryton</td><td class="column-5">Cholet - 49</td><td class="column-6"></td>
</tr>
<tr class="row-9">
	<td class="column-1">27 avril</td><td class="column-2">Les Joyeuseries</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/plumes-danges-et-la-fanfare-de-poche/">Plumes d'Anges &amp; la fanfare de poche</a></td><td class="column-4">Sax baryton</td><td class="column-5">La Chaussée St Victor - 41</td><td class="column-6"></td>
</tr>
<tr class="row-10">
	<td class="column-1">4 mai<br />
</td><td class="column-2">Velotour Tours</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/pockpockblues/" target="_blank">Pock Pock Blues</a></td><td class="column-4">Sax baryton</td><td class="column-5">Tours - 37</td><td class="column-6"></td>
</tr>
<tr class="row-11">
	<td class="column-1">22 mai</td><td class="column-2">Evénement privé</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/bluepearl-jazz/"target="_blank">BluePearl Trio</a><br />
<br />
<br />
</td><td class="column-4">Contrebasse</td><td class="column-5">Tours - 37</td><td class="column-6"></td>
</tr>
<tr class="row-12">
	<td class="column-1">8 juin</td><td class="column-2">Foire Expo Limoges</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/pockpockblues/" target="_blank">Pock Pock Blues</a></td><td class="column-4">Sax baryton</td><td class="column-5">Limoges - 87</td><td class="column-6"></td>
</tr>
<tr class="row-13">
	<td class="column-1">13 juin</td><td class="column-2">Virage de Mulsanne</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/pockpockblues/" target="_blank">Pock Pock Blues</a></td><td class="column-4">Sax baryton</td><td class="column-5">Mulsanne - 72</td><td class="column-6"></td>
</tr>
<tr class="row-14">
	<td class="column-1">21 juin</td><td class="column-2">Lys Haut Layon en fête</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/pockpockblues/" target="_blank">Pock Pock Blues</a></td><td class="column-4">Sax baryton</td><td class="column-5">Lys haut Layon - 49</td><td class="column-6"></td>
</tr>
<tr class="row-15">
	<td class="column-1">26 juin</td><td class="column-2">Musicien au Musée</td><td class="column-3"><a href="https://philharmoniedeparis.fr/fr/activite/musicien-au-musee/17722-carole-sauvanet?itemId=145258" target="_blank">Concert pédagogique</a></td><td class="column-4">Sax baryton</td><td class="column-5">Philharmonie de Paris, musée de la musique</td><td class="column-6"></td>
</tr>
<tr class="row-16">
	<td class="column-1">5 juillet</td><td class="column-2">Evénement d'entreprise</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/pockpockblues/" target="_blank">Pock Pock Blues</a></td><td class="column-4">Sax baryton</td><td class="column-5">Longuenée en Anjou - 49</td><td class="column-6"></td>
</tr>
<tr class="row-17">
	<td class="column-1">5 juillet</td><td class="column-2">Les grandes tablées du moulin</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/pockpockblues/" target="_blank">Pock Pock Blues</a></td><td class="column-4">Sax baryton</td><td class="column-5">Longué Jumelles - 49</td><td class="column-6"></td>
</tr>
<tr class="row-18">
	<td class="column-1">6 juillet</td><td class="column-2">Fête du domino</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/plumes-danges-et-la-fanfare-de-poche/">Plumes d'Anges &amp; la fanfare de poche</a></td><td class="column-4">Sax baryton</td><td class="column-5">Suèvres - 41 EVENEMENT ANNULE</td><td class="column-6"></td>
</tr>
<tr class="row-19">
	<td class="column-1">12 juillet</td><td class="column-2">Evénement privé</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/pockpockblues/" target="_blank">Pock Pock Blues</a></td><td class="column-4">Sax baryton</td><td class="column-5">Roiffé - 86</td><td class="column-6"></td>
</tr>
<tr class="row-20">
	<td class="column-1">2 aout</td><td class="column-2">Evénement privé</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/bluepearl-jazz/"target="_blank">BluePearl Trio</a><br />
<br />
<br />
</td><td class="column-4">Contrebasse</td><td class="column-5">Courseulles sur ler - 14</td><td class="column-6"></td>
</tr>
<tr class="row-21">
	<td class="column-1">10 aout</td><td class="column-2">Concert Vigon</td><td class="column-3"><a href="https://www.facebook.com/bernard.alain.10/videos/792006846600323">Vigon and the Rolling Dominos</a></td><td class="column-4">Sax baryton</td><td class="column-5">La Croisille sur Briance - 87</td><td class="column-6"></td>
</tr>
<tr class="row-22">
	<td class="column-1">24 aout</td><td class="column-2">La soirée perchée</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/pockpockblues/" target="_blank">Pock Pock Blues</a></td><td class="column-4">Sax baryton</td><td class="column-5">Droué - 41</td><td class="column-6"></td>
</tr>
<tr class="row-23">
	<td class="column-1">31 aout</td><td class="column-2">Buchemaine en roue libre</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/pockpockblues/" target="_blank">Pock Pock Blues</a></td><td class="column-4">Sax baryton</td><td class="column-5">Bouchemaine 49</td><td class="column-6"></td>
</tr>
<tr class="row-24">
	<td class="column-1">6 septembre</td><td class="column-2">Journée des associations</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/pockpockblues/" target="_blank">Pock Pock Blues</a></td><td class="column-4">Sax baryton</td><td class="column-5">St Cyr sur Loire - 37</td><td class="column-6"></td>
</tr>
<tr class="row-25">
	<td class="column-1">7 septembre</td><td class="column-2">Evénement privé</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/pockpockblues/" target="_blank">Pock Pock Blues</a></td><td class="column-4">Sax baryton</td><td class="column-5">Limoges - 87</td><td class="column-6"></td>
</tr>
<tr class="row-26">
	<td class="column-1">12 septembre</td><td class="column-2">Concert Espace Florian</td><td class="column-3"><a href="https://valerieotero.com/" target="_blank">Valérie Otero Quartet</a></td><td class="column-4">Contrebasse</td><td class="column-5">Chateauneuf sur Loire- 45</td><td class="column-6"></td>
</tr>
<tr class="row-27">
	<td class="column-1">14 septembre</td><td class="column-2">Evénement privé</td><td class="column-3"><a href="https://valerieotero.com/" target="_blank">Valérie Otero Quartet</a></td><td class="column-4">Contrebasse / basse</td><td class="column-5">Paris - 75</td><td class="column-6"></td>
</tr>
<tr class="row-28">
	<td class="column-1">21 septembre</td><td class="column-2">Evénement privé</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/bluepearl-jazz/"target="_blank">BluePearl Jazz Trio </a></td><td class="column-4">Contrebasse</td><td class="column-5">Paris - 75</td><td class="column-6"></td>
</tr>
<tr class="row-29">
	<td class="column-1">28 septembre</td><td class="column-2">Vinscène en Bourbonnais</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/pockpockblues/" target="_blank">Pock Pock Blues</a></td><td class="column-4">Sax baryton</td><td class="column-5">Moulins - 03</td><td class="column-6"></td>
</tr>
<tr class="row-30">
	<td class="column-1">11 octobre</td><td class="column-2">Animation entreprise</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/pockpockblues/" target="_blank">Pock Pock Blues</a></td><td class="column-4">Sax baryton</td><td class="column-5">Rennes - 35</td><td class="column-6"></td>
</tr>
<tr class="row-31">
	<td class="column-1">12 octobre</td><td class="column-2">Vredestein 20km Paris</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/archive-demos-audio-jazz-salsa/"target="_blank">Pock Pock Blues</a></td><td class="column-4">Contrebasse</td><td class="column-5">Paris - 75</td><td class="column-6"></td>
</tr>
<tr class="row-32">
	<td class="column-1">14 octobre</td><td class="column-2">Musicien au Musée</td><td class="column-3"><a href="https://philharmoniedeparis.fr/fr/activite/musicien-au-musee/17722-carole-sauvanet?itemId=145258" target="_blank">Concert pédagogique</a></td><td class="column-4">Sax baryton</td><td class="column-5">Philharmonie de Paris, musée de la musique</td><td class="column-6"></td>
</tr>
<tr class="row-33">
	<td class="column-1">15 octobre</td><td class="column-2">Musicien au Musée</td><td class="column-3"><a href="https://philharmoniedeparis.fr/fr/activite/musicien-au-musee/17722-carole-sauvanet?itemId=145258" target="_blank">Concert pédagogique</a></td><td class="column-4">Sax baryton</td><td class="column-5">Philharmonie de Paris, musée de la musique</td><td class="column-6"></td>
</tr>
<tr class="row-34">
	<td class="column-1">19 octobre</td><td class="column-2">Marché fermier marché gourmet</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/plumes-danges-et-la-fanfare-de-poche/">Plumes d'Anges &amp; la fanfare de poche</a></td><td class="column-4">Sax baryton</td><td class="column-5">Chaveignes - 37</td><td class="column-6"></td>
</tr>
<tr class="row-35">
	<td class="column-1">28 novembre</td><td class="column-2">Evénement d'entreprise</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/archive-demos-audio-jazz-salsa/"target="_blank">Pock Pock Blues</a></td><td class="column-4">Contrebasse</td><td class="column-5">Argentonnay - 79</td><td class="column-6"></td>
</tr>
<tr class="row-36">
	<td class="column-1">6 décembre</td><td class="column-2">Marché de Noël</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/plumes-danges-et-la-fanfare-de-poche/">Plumes d'Anges &amp; la fanfare de poche</a></td><td class="column-4">Sax baryton</td><td class="column-5">Chilleurs aux bois - 45</td><td class="column-6"></td>
</tr>
<tr class="row-37">
	<td class="column-1">7 décembre</td><td class="column-2">Marché de Noël</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/plumes-danges-et-la-fanfare-de-poche/">Plumes d'Anges &amp; la fanfare de poche</a></td><td class="column-4">Sax baryton</td><td class="column-5">Montbazon - 37</td><td class="column-6"></td>
</tr>
<tr class="row-38">
	<td class="column-1">14 décembre</td><td class="column-2">Marché de Noël</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/plumes-danges-et-la-fanfare-de-poche/">Plumes d'Anges &amp; la fanfare de poche</a></td><td class="column-4">Sax baryton</td><td class="column-5">Hirson - 59</td><td class="column-6"></td>
</tr>
<tr class="row-39">
	<td class="column-1">23 décembre</td><td class="column-2">Marché de Noël</td><td class="column-3"><a href="https://spectacles-lepocklectif.fr/plumes-danges-et-la-fanfare-de-poche/">Plumes d'Anges &amp; la fanfare de poche</a></td><td class="column-4">Sax baryton</td><td class="column-5">Laon - 02</td><td class="column-6"></td>
</tr>
</tbody>
</table>
<!-- #tablepress-2 from cache --></div>
						</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Guide des tessitures</title>
		<link>https://carolesauvanet.fr/guide-des-tessitures/</link>
		
		<dc:creator><![CDATA[KrolSpirit]]></dc:creator>
		<pubDate>Sat, 30 Aug 2025 12:53:59 +0000</pubDate>
				<category><![CDATA[Harmonie & théorie]]></category>
		<category><![CDATA[Ressources]]></category>
		<guid isPermaLink="false">https://carolesauvanet.fr/?p=3079</guid>

					<description><![CDATA[Choisir un instrument : &#8212; Sélectionner &#8212;Flûte traversièrePiccoloHautboisClarinette en Si♭Clarinette basseSaxophone altoSaxophone ténorSaxophone sopranoBasson Trompette en Si♭Cor en FaTromboneTuba ViolonAltoVioloncelleContrebasse PianoGuitare classique Tessiture normale Tessiture étendue Tessiture extrême]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="3079" class="elementor elementor-3079">
				<div class="elementor-element elementor-element-0185a0b e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="0185a0b" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-d7a8f2c elementor-widget elementor-widget-html" data-id="d7a8f2c" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
					<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
    .tessiture-widget {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 20px auto;
        padding: 20px;
        background: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .controls {
        margin-bottom: 30px;
        text-align: center;
    }
    
    select {
        padding: 8px 12px;
        font-size: 16px;
        border: 2px solid #4CAF50;
        border-radius: 4px;
        background: white;
        cursor: pointer;
    }
    
    .staff-container {
        position: relative;
        height: 300px;
        background: white;
        border-radius: 4px;
        padding: 40px 20px;
        overflow-x: auto;
    }
    
    .staff {
        position: relative;
        width: 100%;
        min-width: 600px;
        height: 200px;
    }
    
    .staff-line {
        position: absolute;
        width: 100%;
        height: 1px;
        background: #333;
    }
    
    .ledger-line {
        position: absolute;
        width: 30px;
        height: 1px;
        background: #666;
    }
    
    .note {
        position: absolute;
        width: 20px;
        height: 16px;
        background: #333;
        border-radius: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: all 0.3s ease;
    }
    
    .note.extended {
        background: #ff9800;
        border: 2px solid #ff6600;
    }
    
    .note.extreme {
        background: #f44336;
        border: 2px solid #d32f2f;
    }
    
    .note-label {
        position: absolute;
        font-size: 11px;
        text-align: center;
        width: 40px;
        transform: translateX(-50%);
        color: #333;
    }
    
    .clef {
        position: absolute;
        left: 10px;
        font-size: 60px;
        font-family: serif;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .legend {
        margin-top: 20px;
        padding: 15px;
        background: #e8f5e9;
        border-radius: 4px;
        text-align: center;
    }
    
    .legend-item {
        display: inline-block;
        margin: 0 15px;
    }
    
    .legend-dot {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 5px;
        vertical-align: middle;
    }
    
    .legend-dot.normal { background: #333; }
    .legend-dot.extended { background: #ff9800; border: 1px solid #ff6600; }
    .legend-dot.extreme { background: #f44336; border: 1px solid #d32f2f; }
    
    .instrument-info {
        margin-top: 15px;
        padding: 10px;
        background: #fff3e0;
        border-radius: 4px;
        font-size: 14px;
        text-align: center;
    }
</style>
</head>
<body>

<div class="tessiture-widget">
    <div class="controls">
        <label for="instrument-select">Choisir un instrument : </label>
        <select id="instrument-select">
            <option value="">-- Sélectionner --</option>
            <optgroup label="Bois">
                <option value="flute">Flûte traversière</option>
                <option value="piccolo">Piccolo</option>
                <option value="oboe">Hautbois</option>
                <option value="clarinet">Clarinette en Si♭</option>
                <option value="bass-clarinet">Clarinette basse</option>
                <option value="saxophone-alto">Saxophone alto</option>
                <option value="saxophone-tenor">Saxophone ténor</option>
                <option value="saxophone-soprano">Saxophone soprano</option>
                <option value="bassoon">Basson</option>
            </optgroup>
            <optgroup label="Cuivres">
                <option value="trumpet">Trompette en Si♭</option>
                <option value="horn">Cor en Fa</option>
                <option value="trombone">Trombone</option>
                <option value="tuba">Tuba</option>
            </optgroup>
            <optgroup label="Cordes">
                <option value="violin">Violon</option>
                <option value="viola">Alto</option>
                <option value="cello">Violoncelle</option>
                <option value="double-bass">Contrebasse</option>
            </optgroup>
            <optgroup label="Autres">
                <option value="piano">Piano</option>
                <option value="guitar">Guitare classique</option>
            </optgroup>
        </select>
    </div>
    
    <div class="staff-container">
        <div class="staff" id="staff">
            <span class="clef" id="clef"></span>
            <!-- Les lignes de la portée seront générées dynamiquement -->
        </div>
    </div>
    
    <div class="legend">
        <span class="legend-item">
            <span class="legend-dot normal"></span>
            <span>Tessiture normale</span>
        </span>
        <span class="legend-item">
            <span class="legend-dot extended"></span>
            <span>Tessiture étendue</span>
        </span>
        <span class="legend-item">
            <span class="legend-dot extreme"></span>
            <span>Tessiture extrême</span>
        </span>
    </div>
    
    <div class="instrument-info" id="instrument-info" style="display: none;"></div>
</div>

<script>
const instruments = {
    'flute': {
        name: 'Flûte traversière',
        clef: 'treble',
        transposition: 0,
        range: {
            lowest: { note: 'C', octave: 4, written: 'Do3' },
            normal_low: { note: 'C', octave: 4, written: 'Do3' },
            normal_high: { note: 'C', octave: 7, written: 'Do6' },
            highest: { note: 'D', octave: 7, written: 'Ré6' }
        },
        info: 'La flûte sonne comme écrit (instrument en Do)'
    },
    'piccolo': {
        name: 'Piccolo',
        clef: 'treble',
        transposition: 12,
        range: {
            lowest: { note: 'D', octave: 4, written: 'Ré3' },
            normal_low: { note: 'D', octave: 4, written: 'Ré3' },
            normal_high: { note: 'C', octave: 7, written: 'Do6' },
            highest: { note: 'C', octave: 7, written: 'Do6' }
        },
        info: 'Le piccolo sonne une octave plus haut que ce qui est écrit'
    },
    'oboe': {
        name: 'Hautbois',
        clef: 'treble',
        transposition: 0,
        range: {
            lowest: { note: 'Bb', octave: 3, written: 'Si♭2' },
            normal_low: { note: 'Bb', octave: 3, written: 'Si♭2' },
            normal_high: { note: 'G', octave: 6, written: 'Sol5' },
            highest: { note: 'A', octave: 6, written: 'La5' }
        },
        info: 'Le hautbois sonne comme écrit (instrument en Do)'
    },
    'clarinet': {
        name: 'Clarinette en Si♭',
        clef: 'treble',
        transposition: -2,
        range: {
            lowest: { note: 'E', octave: 3, written: 'Mi2' },
            normal_low: { note: 'E', octave: 3, written: 'Mi2' },
            normal_high: { note: 'C', octave: 7, written: 'Do6' },
            highest: { note: 'G', octave: 7, written: 'Sol6' }
        },
        info: 'La clarinette en Si♭ sonne un ton plus bas que ce qui est écrit'
    },
    'bass-clarinet': {
        name: 'Clarinette basse',
        clef: 'treble',
        transposition: -14,
        range: {
            lowest: { note: 'Bb', octave: 2, written: 'Si♭1' },
            normal_low: { note: 'Bb', octave: 2, written: 'Si♭1' },
            normal_high: { note: 'F', octave: 5, written: 'Fa4' },
            highest: { note: 'G', octave: 5, written: 'Sol4' }
        },
        info: 'La clarinette basse sonne une 9e majeure plus bas que ce qui est écrit'
    },
    'saxophone-alto': {
        name: 'Saxophone alto',
        clef: 'treble',
        transposition: -9,
        range: {
            lowest: { note: 'Bb', octave: 3, written: 'Si♭2' },
            normal_low: { note: 'Bb', octave: 3, written: 'Si♭2' },
            normal_high: { note: 'F#', octave: 6, written: 'Fa#5' },
            highest: { note: 'Ab', octave: 6, written: 'La♭5' }
        },
        info: 'Le saxophone alto en Mi♭ sonne une 6te majeure plus bas que ce qui est écrit'
    },
    'saxophone-tenor': {
        name: 'Saxophone ténor',
        clef: 'treble',
        transposition: -14,
        range: {
            lowest: { note: 'Bb', octave: 2, written: 'Si♭1' },
            normal_low: { note: 'Bb', octave: 2, written: 'Si♭1' },
            normal_high: { note: 'F#', octave: 5, written: 'Fa#4' },
            highest: { note: 'Ab', octave: 5, written: 'La♭4' }
        },
        info: 'Le saxophone ténor en Si♭ sonne une 9e majeure plus bas que ce qui est écrit'
    },
    'saxophone-soprano': {
        name: 'Saxophone soprano',
        clef: 'treble',
        transposition: -2,
        range: {
            lowest: { note: 'Bb', octave: 3, written: 'Si♭2' },
            normal_low: { note: 'Bb', octave: 3, written: 'Si♭2' },
            normal_high: { note: 'F#', octave: 6, written: 'Fa#5' },
            highest: { note: 'Ab', octave: 6, written: 'La♭5' }
        },
        info: 'Le saxophone soprano en Si♭ sonne un ton plus bas que ce qui est écrit'
    },
    'bassoon': {
        name: 'Basson',
        clef: 'bass',
        transposition: 0,
        range: {
            lowest: { note: 'Bb', octave: 1, written: 'Si♭0' },
            normal_low: { note: 'Bb', octave: 1, written: 'Si♭0' },
            normal_high: { note: 'Eb', octave: 5, written: 'Mi♭4' },
            highest: { note: 'F', octave: 5, written: 'Fa4' }
        },
        info: 'Le basson sonne comme écrit (instrument en Do)'
    },
    'trumpet': {
        name: 'Trompette en Si♭',
        clef: 'treble',
        transposition: -2,
        range: {
            lowest: { note: 'F#', octave: 3, written: 'Fa#2' },
            normal_low: { note: 'F#', octave: 3, written: 'Fa#2' },
            normal_high: { note: 'D', octave: 6, written: 'Ré5' },
            highest: { note: 'C', octave: 7, written: 'Do6' }
        },
        info: 'La trompette en Si♭ sonne un ton plus bas. Les notes aiguës au-delà de Ré5 sont considérées comme suraiguës'
    },
    'horn': {
        name: 'Cor en Fa',
        clef: 'treble',
        transposition: -7,
        range: {
            lowest: { note: 'B', octave: 1, written: 'Si0' },
            normal_low: { note: 'F', octave: 2, written: 'Fa1' },
            normal_high: { note: 'C', octave: 6, written: 'Do5' },
            highest: { note: 'F', octave: 6, written: 'Fa5' }
        },
        info: 'Le cor en Fa sonne une 5te juste plus bas que ce qui est écrit'
    },
    'trombone': {
        name: 'Trombone',
        clef: 'bass',
        transposition: 0,
        range: {
            lowest: { note: 'E', octave: 2, written: 'Mi1' },
            normal_low: { note: 'E', octave: 2, written: 'Mi1' },
            normal_high: { note: 'Bb', octave: 4, written: 'Si♭3' },
            highest: { note: 'F', octave: 5, written: 'Fa4' }
        },
        info: 'Le trombone sonne comme écrit (instrument en Do)'
    },
    'tuba': {
        name: 'Tuba',
        clef: 'bass',
        transposition: 0,
        range: {
            lowest: { note: 'D', octave: 1, written: 'Ré0' },
            normal_low: { note: 'D', octave: 1, written: 'Ré0' },
            normal_high: { note: 'F', octave: 4, written: 'Fa3' },
            highest: { note: 'Bb', octave: 4, written: 'Si♭3' }
        },
        info: 'Le tuba sonne comme écrit (instrument en Do)'
    },
    'violin': {
        name: 'Violon',
        clef: 'treble',
        transposition: 0,
        range: {
            lowest: { note: 'G', octave: 3, written: 'Sol2' },
            normal_low: { note: 'G', octave: 3, written: 'Sol2' },
            normal_high: { note: 'E', octave: 7, written: 'Mi6' },
            highest: { note: 'C', octave: 8, written: 'Do7' }
        },
        info: 'Le violon sonne comme écrit. Les notes très aiguës nécessitent une grande maîtrise technique'
    },
    'viola': {
        name: 'Alto',
        clef: 'alto',
        transposition: 0,
        range: {
            lowest: { note: 'C', octave: 3, written: 'Do2' },
            normal_low: { note: 'C', octave: 3, written: 'Do2' },
            normal_high: { note: 'E', octave: 6, written: 'Mi5' },
            highest: { note: 'A', octave: 6, written: 'La5' }
        },
        info: 'L\'alto utilise principalement la clé d\'ut 3e ligne et sonne comme écrit'
    },
    'cello': {
        name: 'Violoncelle',
        clef: 'bass',
        transposition: 0,
        range: {
            lowest: { note: 'C', octave: 2, written: 'Do1' },
            normal_low: { note: 'C', octave: 2, written: 'Do1' },
            normal_high: { note: 'A', octave: 5, written: 'La4' },
            highest: { note: 'E', octave: 6, written: 'Mi5' }
        },
        info: 'Le violoncelle sonne comme écrit et utilise aussi la clé de ténor et de sol pour les passages aigus'
    },
    'double-bass': {
        name: 'Contrebasse',
        clef: 'bass',
        transposition: -12,
        range: {
            lowest: { note: 'E', octave: 1, written: 'Mi0' },
            normal_low: { note: 'E', octave: 1, written: 'Mi0' },
            normal_high: { note: 'G', octave: 4, written: 'Sol3' },
            highest: { note: 'C', octave: 5, written: 'Do4' }
        },
        info: 'La contrebasse sonne une octave plus bas que ce qui est écrit'
    },
    'piano': {
        name: 'Piano',
        clef: 'grand',
        transposition: 0,
        range: {
            lowest: { note: 'A', octave: 0, written: 'La-1' },
            normal_low: { note: 'A', octave: 0, written: 'La-1' },
            normal_high: { note: 'C', octave: 8, written: 'Do7' },
            highest: { note: 'C', octave: 8, written: 'Do7' }
        },
        info: 'Le piano sonne comme écrit et utilise le système de double portée (clé de sol et clé de fa)'
    },
    'guitar': {
        name: 'Guitare classique',
        clef: 'treble',
        transposition: -12,
        range: {
            lowest: { note: 'E', octave: 3, written: 'Mi2' },
            normal_low: { note: 'E', octave: 3, written: 'Mi2' },
            normal_high: { note: 'B', octave: 5, written: 'Si4' },
            highest: { note: 'E', octave: 6, written: 'Mi5' }
        },
        info: 'La guitare sonne une octave plus bas que ce qui est écrit'
    }
};

const notePositions = {
    'treble': {
        'C': { 4: 0, 5: 7, 6: 14, 7: 21, 8: 28 },
        'D': { 4: 1, 5: 8, 6: 15, 7: 22, 8: 29 },
        'E': { 3: -5, 4: 2, 5: 9, 6: 16, 7: 23 },
        'F': { 3: -4, 4: 3, 5: 10, 6: 17, 7: 24 },
        'G': { 3: -3, 4: 4, 5: 11, 6: 18, 7: 25 },
        'A': { 3: -2, 4: 5, 5: 12, 6: 19, 7: 26 },
        'B': { 3: -1, 4: 6, 5: 13, 6: 20, 7: 27 },
        'C#': { 4: 0, 5: 7, 6: 14, 7: 21 },
        'D#': { 4: 1, 5: 8, 6: 15, 7: 22 },
        'F#': { 3: -4, 4: 3, 5: 10, 6: 17, 7: 24 },
        'G#': { 3: -3, 4: 4, 5: 11, 6: 18, 7: 25 },
        'A#': { 3: -2, 4: 5, 5: 12, 6: 19, 7: 26 },
        'Bb': { 3: -1, 4: 6, 5: 13, 6: 20, 7: 27 },
        'Eb': { 4: 2, 5: 9, 6: 16, 7: 23 },
        'Ab': { 3: -2, 4: 5, 5: 12, 6: 19, 7: 26 },
        'Db': { 4: 0, 5: 7, 6: 14, 7: 21 },
        'Gb': { 3: -4, 4: 3, 5: 10, 6: 17, 7: 24 }
    },
    'bass': {
        'C': { 2: 2, 3: 9, 4: 16, 5: 23 },
        'D': { 1: -4, 2: 3, 3: 10, 4: 17, 5: 24 },
        'E': { 1: -3, 2: 4, 3: 11, 4: 18, 5: 25 },
        'F': { 1: -2, 2: 5, 3: 12, 4: 19, 5: 26 },
        'G': { 1: -1, 2: 6, 3: 13, 4: 20, 5: 27 },
        'A': { 1: 0, 2: 7, 3: 14, 4: 21, 5: 28 },
        'B': { 1: 1, 2: 8, 3: 15, 4: 22, 5: 29 },
        'C#': { 2: 2, 3: 9, 4: 16, 5: 23 },
        'D#': { 1: -4, 2: 3, 3: 10, 4: 17, 5: 24 },
        'F#': { 1: -2, 2: 5, 3: 12, 4: 19, 5: 26 },
        'G#': { 1: -1, 2: 6, 3: 13, 4: 20, 5: 27 },
        'A#': { 1: 0, 2: 7, 3: 14, 4: 21, 5: 28 },
        'Bb': { 1: 1, 2: 8, 3: 15, 4: 22, 5: 29 },
        'Eb': { 1: -3, 2: 4, 3: 11, 4: 18, 5: 25 },
        'Ab': { 1: 0, 2: 7, 3: 14, 4: 21, 5: 28 },
        'Db': { 2: 2, 3: 9, 4: 16, 5: 23 },
        'Gb': { 1: -2, 2: 5, 3: 12, 4: 19, 5: 26 }
    },
    'alto': {
        'C': { 3: 3, 4: 10, 5: 17, 6: 24 },
        'D': { 2: -3, 3: 4, 4: 11, 5: 18, 6: 25 },
        'E': { 2: -2, 3: 5, 4: 12, 5: 19, 6: 26 },
        'F': { 2: -1, 3: 6, 4: 13, 5: 20, 6: 27 },
        'G': { 2: 0, 3: 7, 4: 14, 5: 21, 6: 28 },
        'A': { 2: 1, 3: 8, 4: 15, 5: 22, 6: 29 },
        'B': { 2: 2, 3: 9, 4: 16, 5: 23, 6: 30 },
        'C#': { 3: 3, 4: 10, 5: 17, 6: 24 },
        'D#': { 2: -3, 3: 4, 4: 11, 5: 18, 6: 25 },
        'F#': { 2: -1, 3: 6, 4: 13, 5: 20, 6: 27 },
        'G#': { 2: 0, 3: 7, 4: 14, 5: 21, 6: 28 },
        'A#': { 2: 1, 3: 8, 4: 15, 5: 22, 6: 29 },
        'Bb': { 2: 2, 3: 9, 4: 16, 5: 23, 6: 30 },
        'Eb': { 2: -2, 3: 5, 4: 12, 5: 19, 6: 26 },
        'Ab': { 2: 1, 3: 8, 4: 15, 5: 22, 6: 29 },
        'Db': { 3: 3, 4: 10, 5: 17, 6: 24 },
        'Gb': { 2: -1, 3: 6, 4: 13, 5: 20, 6: 27 }
    }
};

function clearStaff() {
    const staff = document.getElementById('staff');
    staff.innerHTML = '<span class="clef" id="clef"></span>';
}

function drawStaffLines() {
    const staff = document.getElementById('staff');
    const linePositions = [40, 60, 80, 100, 120];
    
    linePositions.forEach(pos => {
        const line = document.createElement('div');
        line.className = 'staff-line';
        line.style.top = pos + 'px';
        staff.appendChild(line);
    });
}

function setClef(clefType) {
    const clefElement = document.getElementById('clef');
    const clefSymbols = {
        'treble': '𝄞',
        'bass': '𝄢',
        'alto': '𝄡',
        'grand': '𝄞/𝄢'
    };
    clefElement.textContent = clefSymbols[clefType] || '';
    
    if (clefType === 'alto') {
        clefElement.style.top = '100px';
        clefElement.style.fontSize = '50px';
    } else if (clefType === 'bass') {
        clefElement.style.top = '80px';
        clefElement.style.fontSize = '50px';
    } else {
        clefElement.style.top = '100px';
        clefElement.style.fontSize = '60px';
    }
}

function getNotePosition(note, octave, clef) {
    const positions = notePositions[clef];
    if (!positions || !positions[note]) return null;
    
    const lineHeight = 20;
    const topLine = 40;
    const notePos = positions[note][octave];
    
    if (notePos === undefined) return null;
    
    return topLine + (10 - notePos) * (lineHeight / 2);
}

function drawNote(note, octave, position, className, label) {
    const staff = document.getElementById('staff');
    const noteElement = document.createElement('div');
    noteElement.className = 'note ' + className;
    noteElement.style.left = position + '%';
    noteElement.style.top = getNotePosition(note, octave, staff.dataset.clef) + 'px';
    
    // Ajouter des lignes supplémentaires si nécessaire
    const noteY = getNotePosition(note, octave, staff.dataset.clef);
    if (noteY < 40 || noteY > 120) {
        const ledgerLines = [];
        if (noteY < 40) {
            for (let y = 20; y <= 40; y += 20) {
                if (y < noteY) ledgerLines.push(y);
            }
        } else if (noteY > 120) {
            for (let y = 140; y <= noteY + 10; y += 20) {
                if (y > 120) ledgerLines.push(y);
            }
        }
        
        ledgerLines.forEach(y => {
            const ledger = document.createElement('div');
            ledger.className = 'ledger-line';
            ledger.style.top = y + 'px';
            ledger.style.left = (position - 2) + '%';
            staff.appendChild(ledger);
        });
    }
    
    staff.appendChild(noteElement);
    
    // Ajouter le label
    const labelElement = document.createElement('div');
    labelElement.className = 'note-label';
    labelElement.style.left = position + '%';
    labelElement.style.top = (noteY + 25) + 'px';
    labelElement.textContent = label;
    staff.appendChild(labelElement);
}

function displayRange(instrumentKey) {
    if (!instrumentKey) {
        clearStaff();
        document.getElementById('instrument-info').style.display = 'none';
        return;
    }
    
    const instrument = instruments[instrumentKey];
    if (!instrument) return;
    
    clearStaff();
    drawStaffLines();
    setClef(instrument.clef);
    
    const staff = document.getElementById('staff');
    staff.dataset.clef = instrument.clef;
    
    // Calculer les positions des notes
    const positions = {
        lowest: 20,
        normalLow: 35,
        normalHigh: 65,
        highest: 80
    };
    
    // Note la plus grave (extrême)
    if (instrument.range.lowest !== instrument.range.normal_low) {
        drawNote(
            instrument.range.lowest.note,
            instrument.range.lowest.octave,
            positions.lowest,
            'extreme',
            instrument.range.lowest.written
        );
    }
    
    // Début de la tessiture normale
    drawNote(
        instrument.range.normal_low.note,
        instrument.range.normal_low.octave,
        positions.normalLow,
        'normal',
        instrument.range.normal_low.written
    );
    
    // Fin de la tessiture normale
    drawNote(
        instrument.range.normal_high.note,
        instrument.range.normal_high.octave,
        positions.normalHigh,
        'normal',
        instrument.range.normal_high.written
    );
    
    // Note la plus aiguë (étendue ou extrême)
    if (instrument.range.highest !== instrument.range.normal_high) {
        const isExtreme = (instrumentKey === 'trumpet' || instrumentKey.includes('saxophone'));
        drawNote(
            instrument.range.highest.note,
            instrument.range.highest.octave,
            positions.highest,
            isExtreme ? 'extreme' : 'extended',
            instrument.range.highest.written
        );
    }
    
    // Afficher les informations de l'instrument
    const infoElement = document.getElementById('instrument-info');
    infoElement.textContent = instrument.info;
    infoElement.style.display = 'block';
}

// Gestionnaire d'événement pour le menu déroulant
document.getElementById('instrument-select').addEventListener('change', function(e) {
    displayRange(e.target.value);
});

// Initialisation
drawStaffLines();
</script>

</body>
</html>				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Contact</title>
		<link>https://carolesauvanet.fr/contact/</link>
		
		<dc:creator><![CDATA[KrolSpirit]]></dc:creator>
		<pubDate>Fri, 22 Aug 2025 16:52:16 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://carolesauvanet.fr/?p=2544</guid>

					<description><![CDATA[laissez-moi un message ! J&#8217;y répondrai avec grand plaisir !]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="2544" class="elementor elementor-2544">
				<div class="elementor-element elementor-element-b1d0e60 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="b1d0e60" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-506003d e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child" data-id="506003d" data-element_type="container" data-e-type="container">
				</div>
		<div class="elementor-element elementor-element-adcc583 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child" data-id="adcc583" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-04c1bfe elementor-widget elementor-widget-spacer" data-id="04c1bfe" data-element_type="widget" data-e-type="widget" data-widget_type="spacer.default">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				<div class="elementor-element elementor-element-9591c65 elementor-widget elementor-widget-text-editor" data-id="9591c65" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
									<div class="forminator-ui forminator-custom-form forminator-custom-form-2539 forminator-design--default  forminator_ajax" data-forminator-render="0" data-form="forminator-module-2539" data-uid="69f1f1fd131e9"><br/></div><form
				id="forminator-module-2539"
				class="forminator-ui forminator-custom-form forminator-custom-form-2539 forminator-design--default  forminator_ajax"
				method="post"
				data-forminator-render="0"
				data-form-id="2539"
				 data-color-option="theme" data-design="default" data-grid="open" style="display: none;"
				data-uid="69f1f1fd131e9"
			><div role="alert" aria-live="polite" class="forminator-response-message forminator-error" aria-hidden="true"></div><div class="forminator-row"><div id="select-1" class="forminator-field-select forminator-col forminator-col-12 "><div class="forminator-field"><label for="forminator-form-2539__field--select-1_69f1f1fd131e9" id="forminator-form-2539__field--select-1_69f1f1fd131e9-label" class="forminator-label">Je souhaite connaitre</label><select multiple id="forminator-form-2539__field--select-1_69f1f1fd131e9" class="forminator-select--field forminator-select2 forminator-select2-multiple" data-required="" name="select-1[]" data-default-value="" data-hidden-behavior="zero" data-placeholder="" data-search="false" data-search-placeholder="Search" data-checkbox="false" data-allow-clear="true" aria-labelledby="forminator-form-2539__field--select-1_69f1f1fd131e9-label"><option value="one"  data-calculation="0">la musique</option><option value="two"  data-calculation="0">la pédagogie</option><option value="les-sites-web"  data-calculation="0">les sites web</option></select></div></div></div><div class="forminator-row"><div id="name-1" class="forminator-field-name forminator-col forminator-col-12 "><div class="forminator-field"><label for="forminator-field-name-1_69f1f1fd131e9" id="forminator-field-name-1_69f1f1fd131e9-label" class="forminator-label">Prénom <span class="forminator-required">*</span></label><input type="text" name="name-1" value="" placeholder="" id="forminator-field-name-1_69f1f1fd131e9" class="forminator-input forminator-name--field" aria-required="true" autocomplete="name" /></div></div></div><div class="forminator-row"><div id="email-1" class="forminator-field-email forminator-col forminator-col-12 "><div class="forminator-field"><label for="forminator-field-email-1_69f1f1fd131e9" id="forminator-field-email-1_69f1f1fd131e9-label" class="forminator-label">Adresse de messagerie <span class="forminator-required">*</span></label><input type="email" name="email-1" value="" placeholder="" id="forminator-field-email-1_69f1f1fd131e9" class="forminator-input forminator-email--field" data-required="true" aria-required="true" autocomplete="email" /></div></div></div><div class="forminator-row"><div id="phone-1" class="forminator-field-phone forminator-col forminator-col-12 "><div class="forminator-field"><label for="forminator-field-phone-1_69f1f1fd131e9" id="forminator-field-phone-1_69f1f1fd131e9-label" class="forminator-label">Numéro de téléphone</label><input type="text" name="phone-1" value="" placeholder="" id="forminator-field-phone-1_69f1f1fd131e9" class="forminator-input forminator-field--phone" data-required="" aria-required="false" autocomplete="off" /></div></div></div><div class="forminator-row"><div id="textarea-1" class="forminator-field-textarea forminator-col forminator-col-12 "><div class="forminator-field"><label for="forminator-field-textarea-1_69f1f1fd131e9" id="forminator-field-textarea-1_69f1f1fd131e9-label" class="forminator-label">Message</label><span id="forminator-field-textarea-1_69f1f1fd131e9-description" class="forminator-description"><span data-limit="180" data-type="characters" data-editor="">0 / 180</span></span><textarea name="textarea-1" placeholder="" id="forminator-field-textarea-1_69f1f1fd131e9" class="forminator-textarea" rows="6" style="--forminator-textarea-min-height:140px;" maxlength="180" ></textarea></div></div></div><input type="hidden" name="referer_url" value="" /><div class="forminator-row forminator-row-last"><div class="forminator-col"><div class="forminator-field"><button class="forminator-button forminator-button-submit">Envoyer</button></div></div></div><input type="hidden" id="forminator_nonce" name="forminator_nonce" value="ca63cf052c" /><input type="hidden" name="_wp_http_referer" value="/feed/" /><input type="hidden" name="form_id" value="2539"><input type="hidden" name="page_id" value="2544"><input type="hidden" name="form_type" value="default"><input type="hidden" name="current_url" value="https://carolesauvanet.fr/contact/"><input type="hidden" name="render_id" value="0"><input type="hidden" name="action" value="forminator_submit_form_custom-forms"></form>								</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Guide des tonalités</title>
		<link>https://carolesauvanet.fr/guide-des-tonalites/</link>
		
		<dc:creator><![CDATA[KrolSpirit]]></dc:creator>
		<pubDate>Tue, 12 Aug 2025 17:22:38 +0000</pubDate>
				<category><![CDATA[Harmonie & théorie]]></category>
		<category><![CDATA[Outils]]></category>
		<category><![CDATA[tonalités]]></category>
		<guid isPermaLink="false">https://carolesauvanet.fr/?p=114</guid>

					<description><![CDATA[La tonalité définit le cadre d’un morceau : une note principale (la tonique) et un mode (majeur ou mineur).
Chaque gamme suit un schéma d’intervalles précis — par exemple, en do majeur : ton, ton, demi-ton, ton, ton, ton, demi-ton. Si l’on part de sol, il faut un fa♯ pour garder ce schéma : c’est ce qu’on appelle une altération.]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="114" class="elementor elementor-114">
				<div class="elementor-element elementor-element-c6e87c2 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="c6e87c2" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-fbe59a3 elementor-widget__width-initial elementor-widget-tablet__width-auto elementor-widget elementor-widget-heading" data-id="fbe59a3" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
					<h1 class="elementor-heading-title elementor-size-default">Guide des tonalités et altérations</h1>				</div>
				</div>
		<div class="elementor-element elementor-element-6a2ccab e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="6a2ccab" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-159641d e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child" data-id="159641d" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-455ad8c elementor-widget elementor-widget-text-editor" data-id="455ad8c" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
									<p data-start="0" data-end="337">La tonalité, c’est le cadre d’un morceau : elle repose sur une note principale (la tonique) et un mode (majeur ou mineur).<br data-start="122" data-end="125" />Chaque gamme suit un schéma d’intervalles précis — par exemple, en do majeur : ton, ton, demi-ton, ton, ton, ton, demi-ton. Si on part de sol, on doit ajouter un fa♯ pour garder ce schéma, d’où les altérations.</p><p data-start="339" data-end="556">Les altérations modifient les notes : ♯ monte d’un demi-ton, ♭ descend, ♮ annule.<br data-start="420" data-end="423" />Celles à la clé indiquent la gamme (donc la tonalité), tandis que les altérations ponctuelles ne valent que pour la note concernée.</p><p data-start="1321" data-end="1560">Dans ce petit guide, il vous suffit d&rsquo;entrer le nombre (avec le sélecteur + / -) et le type d&rsquo;altération (♯ ou ♭), pour obtenir la tonalité majeure correspondante (et sa relative mineure).</p><p data-start="1321" data-end="1560">Au-dessous, vous trouverez aussi le tableau complet des tonalités (et de leur relative mineure), avec le nombre et la nature des altérations correspondantes.</p>								</div>
				</div>
		<div class="elementor-element elementor-element-1bea1d2 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child" data-id="1bea1d2" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-341ad20 elementor-widget elementor-widget-html" data-id="341ad20" 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>Guide des tonalités</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #F0F5FA;
            min-height: 100vh;
            padding: 20px;
            color: #334155;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: #FFFFFF;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(51, 65, 85, 0.1);
            overflow: hidden;
            border: 1px solid #d4d0cf;
        }
        
        .header {
            background: #b57657;
            color: #FFFFFF;
            padding: 24px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 24px;
            margin-bottom: 8px;
            color: #FFFFFF;
        }
        
        .header p {
            opacity: 0.95;
            font-size: 14px;
            color: #F0E6C5;
        }
        
        .content {
            padding: 24px;
        }
        
        .section {
            margin-bottom: 32px;
        }
        
        .label {
            display: block;
            font-weight: 500;
            margin-bottom: 12px;
            color: #702619;
            font-size: 16px;
        }
        
        .alteration-selector {
            display: flex;
            gap: 16px;
            align-items: center;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }
        
        .number-input {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .number-display {
            font-size: 24px;
            font-weight: bold;
            color: #702619;
            min-width: 40px;
            text-align: center;
            padding: 8px;
            border: 2px solid #d4d0cf;
            border-radius: 8px;
            background: #FFFFFF;
        }
        
        .number-btn {
            width: 40px;
            height: 40px;
            border: 2px solid #d4d0cf;
            border-radius: 8px;
            background: #FFFFFF;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            color: #702619;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .number-btn:hover {
            border-color: #702619;
            background: #F0E6C5;
        }
        
        .number-btn:active {
            transform: scale(0.95);
        }
        
        .alteration-type {
            display: flex;
            gap: 8px;
        }
        
        .type-btn {
            padding: 12px 24px;
            border: 2px solid #d4d0cf;
            border-radius: 8px;
            background: #FFFFFF;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.2s;
            color: #334155;
        }
        
        .type-btn:hover {
            border-color: #702619;
            background: #F0E6C5;
            color: #702619;
        }
        
        .type-btn.active {
            background: #702619;
            color: #FFFFFF;
            border-color: #702619;
        }
        
        .result-main {
            background: #F0E6C5;
            border: 2px solid #d7b49e;
            border-radius: 12px;
            padding: 24px;
            text-align: center;
            margin-bottom: 24px;
            transition: all 0.3s ease;
        }
        
        .result-main.updated {
            transform: scale(1.02);
        }
        
        .result-title {
            font-size: 14px;
            color: #702619;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .result-key {
            font-size: 32px;
            font-weight: bold;
            color: #702619;
            margin-bottom: 8px;
        }
        
        .result-relative {
            font-size: 18px;
            color: #334155;
            opacity: 0.8;
        }
        
        .complete-table {
            margin-top: 32px;
        }
        
        .table-header {
            color: #702619;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
            text-align: center;
        }
        
        .table-container {
            overflow-x: auto;
            border-radius: 8px;
            border: 1px solid #d4d0cf;
        }
        
        .tonality-table {
            width: 100%;
            border-collapse: collapse;
            background: #FFFFFF;
        }
        
        .tonality-table th {
            background: #b57657;
            color: #FFFFFF;
            padding: 12px 8px;
            font-weight: 600;
            font-size: 14px;
            text-align: center;
        }
        
        .tonality-table td {
            padding: 12px 8px;
            text-align: center;
            border-bottom: 1px solid #d4d0cf;
            color: #334155;
        }
        
        .tonality-table tr:nth-child(even) {
            background: #F0F5FA;
        }
        
        .tonality-table tr:hover {
            background: #F0E6C5;
        }
        
        .tonality-table .major-key {
            font-weight: 600;
            color: #702619;
            font-size: 16px;
        }
        
        .tonality-table .minor-key {
            font-style: italic;
            color: #334155;
            font-size: 14px;
        }
        
        .tonality-table .alteration-count {
            font-weight: bold;
            color: #b57657;
        }
        
        /* Responsive - Tablettes */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .container {
                border-radius: 8px;
            }
            
            .header {
                padding: 20px 16px;
            }
            
            .header h1 {
                font-size: 20px;
            }
            
            .header p {
                font-size: 13px;
            }
            
            .content {
                padding: 16px;
            }
            
            .section {
                margin-bottom: 24px;
            }
            
            .label {
                font-size: 14px;
                margin-bottom: 10px;
            }
            
            .alteration-selector {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
            }
            
            .number-input {
                justify-content: center;
            }
            
            .alteration-type {
                justify-content: center;
                flex-wrap: wrap;
            }
            
            .type-btn {
                padding: 10px 20px;
                font-size: 14px;
                flex: 1;
                min-width: 100px;
            }
            
            .result-main {
                padding: 20px 16px;
            }
            
            .result-title {
                font-size: 13px;
            }
            
            .result-key {
                font-size: 26px;
            }
            
            .result-relative {
                font-size: 16px;
            }
            
            .complete-table {
                margin-top: 24px;
            }
            
            .table-header {
                font-size: 16px;
                margin-bottom: 12px;
            }
            
            .tonality-table th,
            .tonality-table td {
                padding: 10px 6px;
                font-size: 12px;
            }
            
            .tonality-table .major-key {
                font-size: 14px;
            }
            
            .tonality-table .minor-key {
                font-size: 12px;
            }
        }
        
        /* Responsive - Mobiles */
        @media (max-width: 480px) {
            body {
                padding: 5px;
            }
            
            .header h1 {
                font-size: 18px;
            }
            
            .header p {
                font-size: 12px;
            }
            
            .content {
                padding: 12px;
            }
            
            .number-display {
                font-size: 20px;
                min-width: 35px;
                padding: 6px;
            }
            
            .number-btn {
                width: 35px;
                height: 35px;
                font-size: 16px;
            }
            
            .type-btn {
                padding: 8px 12px;
                font-size: 13px;
                min-width: auto;
            }
            
            .result-key {
                font-size: 22px;
            }
            
            .result-relative {
                font-size: 14px;
            }
            
            .tonality-table th,
            .tonality-table td {
                padding: 8px 4px;
                font-size: 11px;
            }
            
            .tonality-table .major-key {
                font-size: 13px;
            }
            
            .tonality-table .minor-key {
                font-size: 11px;
            }
            
            .tonality-table th {
                font-size: 11px;
                padding: 10px 4px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎼 Guide des tonalités</h1>
            <p>Identifiez les tonalités à partir du nombre d'altérations</p>
        </div>
        
        <div class="content">
            <div class="section">
                <label class="label">Nombre d'altérations à la clé :</label>
                <div class="alteration-selector">
                    <div class="number-input">
                        <button class="number-btn" onclick="changeNumber(-1)">−</button>
                        <div class="number-display" id="number-display">0</div>
                        <button class="number-btn" onclick="changeNumber(1)">+</button>
                    </div>
                    
                    <div class="alteration-type">
                        <button class="type-btn active" onclick="setType('none')" id="none-btn">Aucune</button>
                        <button class="type-btn" onclick="setType('sharps')" id="sharps-btn">Dièses ♯</button>
                        <button class="type-btn" onclick="setType('flats')" id="flats-btn">Bémols ♭</button>
                    </div>
                </div>
            </div>
            
            <div class="result-main" id="result-main">
                <div class="result-title">Tonalité correspondante</div>
                <div class="result-key" id="result-key">Do majeur</div>
                <div class="result-relative" id="result-relative">(La mineur)</div>
            </div>
            
            <div class="complete-table">
                <div class="table-header">Tableau complet des tonalités</div>
                <div class="table-container">
                    <table class="tonality-table">
                        <thead>
                            <tr>
                                <th>Altérations</th>
                                <th>Tonalité majeure</th>
                                <th>Tonalité mineure<br>(relative)</th>
                                <th>Ordre des altérations</th>
                            </tr>
                        </thead>
                        <tbody id="table-body"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        let state = {
            number: 0,
            type: 'none'
        };

        const tonalities = {
            sharps: [
                { count: 0, major: 'Do', minor: 'La', order: '' },
                { count: 1, major: 'Sol', minor: 'Mi', order: 'Fa♯' },
                { count: 2, major: 'Ré', minor: 'Si', order: 'Fa♯ Do♯' },
                { count: 3, major: 'La', minor: 'Fa♯', order: 'Fa♯ Do♯ Sol♯' },
                { count: 4, major: 'Mi', minor: 'Do♯', order: 'Fa♯ Do♯ Sol♯ Ré♯' },
                { count: 5, major: 'Si', minor: 'Sol♯', order: 'Fa♯ Do♯ Sol♯ Ré♯ La♯' },
                { count: 6, major: 'Fa♯', minor: 'Ré♯', order: 'Fa♯ Do♯ Sol♯ Ré♯ La♯ Mi♯' },
                { count: 7, major: 'Do♯', minor: 'La♯', order: 'Fa♯ Do♯ Sol♯ Ré♯ La♯ Mi♯ Si♯' }
            ],
            flats: [
                { count: 0, major: 'Do', minor: 'La', order: '' },
                { count: 1, major: 'Fa', minor: 'Ré', order: 'Si♭' },
                { count: 2, major: 'Si♭', minor: 'Sol', order: 'Si♭ Mi♭' },
                { count: 3, major: 'Mi♭', minor: 'Do', order: 'Si♭ Mi♭ La♭' },
                { count: 4, major: 'La♭', minor: 'Fa', order: 'Si♭ Mi♭ La♭ Ré♭' },
                { count: 5, major: 'Ré♭', minor: 'Si♭', order: 'Si♭ Mi♭ La♭ Ré♭ Sol♭' },
                { count: 6, major: 'Sol♭', minor: 'Mi♭', order: 'Si♭ Mi♭ La♭ Ré♭ Sol♭ Do♭' },
                { count: 7, major: 'Do♭', minor: 'La♭', order: 'Si♭ Mi♭ La♭ Ré♭ Sol♭ Do♭ Fa♭' }
            ]
        };

        function changeNumber(delta) {
            const newNumber = Math.max(0, Math.min(7, state.number + delta));
            if (newNumber !== state.number) {
                state.number = newNumber;
                updateDisplay();
                updateResult();
            }
        }

        function setType(type) {
            if (state.type !== type) {
                state.type = type;
                
                document.querySelectorAll('.type-btn').forEach(btn => btn.classList.remove('active'));
                document.getElementById(type + '-btn').classList.add('active');
                
                if ((type === 'none' && state.number > 0) || (type !== 'none' && state.number === 0)) {
                    state.number = type === 'none' ? 0 : 1;
                }
                
                updateDisplay();
                updateResult();
            }
        }

        function updateDisplay() {
            document.getElementById('number-display').textContent = state.number;
            
            const minusBtn = document.querySelector('.number-btn');
            const plusBtn = document.querySelectorAll('.number-btn')[1];
            
            if (state.type === 'none') {
                minusBtn.style.opacity = '0.5';
                plusBtn.style.opacity = '0.5';
                minusBtn.style.pointerEvents = 'none';
                plusBtn.style.pointerEvents = 'none';
            } else {
                minusBtn.style.opacity = state.number <= 1 ? '0.5' : '1';
                plusBtn.style.opacity = state.number >= 7 ? '0.5' : '1';
                minusBtn.style.pointerEvents = state.number <= 1 ? 'none' : 'auto';
                plusBtn.style.pointerEvents = state.number >= 7 ? 'none' : 'auto';
            }
        }

        function updateResult() {
            const resultMain = document.getElementById('result-main');
            const resultKey = document.getElementById('result-key');
            const resultRelative = document.getElementById('result-relative');
            
            let tonality;
            
            if (state.type === 'none' || state.number === 0) {
                tonality = tonalities.sharps[0];
            } else if (state.type === 'sharps') {
                tonality = tonalities.sharps[state.number];
            } else {
                tonality = tonalities.flats[state.number];
            }
            
            resultKey.textContent = tonality.major + ' majeur';
            resultRelative.textContent = '(' + tonality.minor + ' mineur)';
            
            resultMain.classList.add('updated');
            setTimeout(() => resultMain.classList.remove('updated'), 300);
        }

        function generateTable() {
            const tableBody = document.getElementById('table-body');
            tableBody.innerHTML = '';
            
            const noneRow = document.createElement('tr');
            noneRow.innerHTML = `
                <td class="alteration-count">0</td>
                <td class="major-key">Do majeur</td>
                <td class="minor-key">La mineur</td>
                <td>Aucune altération</td>
            `;
            tableBody.appendChild(noneRow);
            
            for (let i = 1; i <= 7; i++) {
                const sharp = tonalities.sharps[i];
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td class="alteration-count">${i} ♯</td>
                    <td class="major-key">${sharp.major} majeur</td>
                    <td class="minor-key">${sharp.minor} mineur</td>
                    <td>${sharp.order}</td>
                `;
                tableBody.appendChild(row);
            }
            
            for (let i = 1; i <= 7; i++) {
                const flat = tonalities.flats[i];
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td class="alteration-count">${i} ♭</td>
                    <td class="major-key">${flat.major} majeur</td>
                    <td class="minor-key">${flat.minor} mineur</td>
                    <td>${flat.order}</td>
                `;
                tableBody.appendChild(row);
            }
        }

        function init() {
            updateDisplay();
            updateResult();
            generateTable();
        }

        init();
    </script>
</body>
</html>				</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Transposition facile</title>
		<link>https://carolesauvanet.fr/transposition-facile/</link>
		
		<dc:creator><![CDATA[KrolSpirit]]></dc:creator>
		<pubDate>Mon, 04 Aug 2025 13:36:30 +0000</pubDate>
				<category><![CDATA[Harmonie & théorie]]></category>
		<category><![CDATA[Outils]]></category>
		<guid isPermaLink="false">https://carolesauvanet.fr/?p=72</guid>

					<description><![CDATA[Contrairement au piano, où un Do écrit correspond à un Do joué, certains instruments à vent (les saxophones, clarinettes, trompettes ou cors) transposent : la note lue ne sonne pas comme celle du piano. Par exemple, un Do joué au saxophone alto sonne en réalité comme un Mi bémol, et au saxophone]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="72" class="elementor elementor-72">
				<div class="elementor-element elementor-element-ec81dde e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="ec81dde" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-fbe59a3 elementor-widget__width-initial elementor-widget-tablet__width-auto elementor-widget elementor-widget-heading" data-id="fbe59a3" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
					<h1 class="elementor-heading-title elementor-size-default">Transposition facile</h1>				</div>
				</div>
		<div class="elementor-element elementor-element-3d10e07e e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="3d10e07e" data-element_type="container" data-e-type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-d3553e1 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child" data-id="d3553e1" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-455ad8c elementor-widget elementor-widget-text-editor" data-id="455ad8c" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
									<p data-start="0" data-end="320">Contrairement au piano, où un Do écrit correspond à un Do joué, certains instruments à vent (les saxophones, clarinettes, trompettes ou cors) transposent : la note lue ne sonne pas comme celle du piano. Par exemple, un Do joué au saxophone alto sonne en réalité comme un Mi bémol, et au saxophone ténor comme un Si bémol.</p><p data-start="322" data-end="517">Cette différence a deux avantages :<br data-start="357" data-end="360" />– les musiciens d’une même famille gardent les mêmes doigtés,<br data-start="421" data-end="424" />– les partitions restent dans une tessiture confortable, sans changer l’intention musicale.</p><p data-start="519" data-end="623">Mais dès qu’on joue avec d’autres instruments, ces décalages peuvent vite compliquer la communication…. Cet outil a été conçu pour aider à s’y retrouver, que l&rsquo;on débute ou que l&rsquo;on veuille simplement gagner du temps.</p>								</div>
				</div>
		<div class="elementor-element elementor-element-64b00283 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child" data-id="64b00283" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-341ad20 elementor-widget__width-inherit elementor-widget elementor-widget-html" data-id="341ad20" 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>Guide de transposition interactif</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #F0F5FA;
            min-height: 100vh;
            padding: 20px;
            color: #334155;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: #FFFFFF;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(51, 65, 85, 0.1);
            overflow: hidden;
            border: 1px solid #d4d0cf;
        }
        
        .header {
            background: #b57657;
            color: #FFFFFF;
            padding: 24px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 24px;
            margin-bottom: 8px;
            color: #FFFFFF;
        }
        
        .header p {
            opacity: 0.95;
            font-size: 14px;
            color: #F0E6C5;
        }
        
        .tabs {
            display: flex;
            border-bottom: 1px solid #d4d0cf;
            background: #F0F5FA;
        }
        
        .tab {
            flex: 1;
            padding: 16px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.2s;
            color: #334155;
        }
        
        .tab.active {
            background: #FFFFFF;
            color: #702619;
            border-bottom: 2px solid #702619;
            font-weight: 600;
        }
        
        .tab:hover:not(.active) {
            background: #c8bcac;
            color: #702619;
        }
        
        .content {
            padding: 24px;
        }
        
        .section {
            margin-bottom: 24px;
        }
        
        .label {
            display: block;
            font-weight: 500;
            margin-bottom: 12px;
            color: #702619;
            font-size: 15px;
        }
        
        .button-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .note-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
            gap: 8px;
        }
        
        .btn {
            padding: 12px;
            border: 2px solid #d4d0cf;
            border-radius: 8px;
            background: #FFFFFF;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
            text-align: center;
            color: #334155;
        }
        
        .btn:hover {
            border-color: #702619;
            background: #F0E6C5;
            color: #702619;
        }
        
        .btn.active {
            background: #702619;
            color: #FFFFFF;
            border-color: #702619;
        }
        
        .btn.source {
            background: #d7b49e;
            color: #702619;
            border-color: #d7b49e;
            font-weight: 600;
        }
        
        .btn.source:hover {
            background: #d3b8a7;
            border-color: #d3b8a7;
        }
        
        .note-btn {
            padding: 8px 4px;
            min-height: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .results {
            margin-top: 24px;
        }
        
        .results h3 {
            color: #702619;
            margin-bottom: 16px;
            text-align: center;
            font-size: 18px;
        }
        
        .result-item {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 16px;
            margin-bottom: 8px;
            border: 2px solid #d4d0cf;
            border-radius: 8px;
            transition: all 0.2s;
            background: #FFFFFF;
        }
        
        .result-item:hover {
            box-shadow: 0 2px 8px rgba(51, 65, 85, 0.1);
        }
        
        .result-item.source {
            border-color: #d7b49e;
            background: #F0E6C5;
        }
        
        .result-item.bb { 
            border-color: #b57657; 
            background: #F0F5FA;
        }
        .result-item.eb { 
            border-color: #d7b49e; 
            background: #F0E6C5;
        }
        .result-item.f { 
            border-color: #ab7d70; 
            background: #c8bcac;
        }
        .result-item.c { 
            border-color: #8b6654; 
            background: #c7c2be;
        }
        
        .instrument-info {
            flex: 1;
            margin-right: 16px;
        }
        
        .instrument-info h3 {
            font-size: 16px;
            margin-bottom: 4px;
            color: #702619;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .instrument-list {
            font-size: 12px;
            color: #334155;
            opacity: 0.8;
            line-height: 1.3;
        }
        
        .note-result {
            text-align: right;
            flex-shrink: 0;
            min-width: 120px;
        }
        
        .note-main {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 4px;
            color: #702619;
        }
        
        .note-alt {
            font-size: 14px;
            color: #334155;
            opacity: 0.8;
        }
        
        .alteration {
            font-size: 12px;
            color: #334155;
            margin-top: 4px;
            opacity: 0.8;
        }
        
        .source-badge {
            background: #b57657;
            color: #FFFFFF;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 10px;
            margin-left: 8px;
            font-weight: 600;
        }
        
        .mode-buttons {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }
        
        .mode-btn {
            padding: 8px 16px;
            border: 2px solid #d4d0cf;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.2s;
            color: #334155;
            background: #FFFFFF;
        }
        
        .mode-btn.active {
            background: #b57657;
            color: #FFFFFF;
            border-color: #b57657;
        }
        
        .mode-btn:hover:not(.active) {
            background: #F0E6C5;
            border-color: #b57657;
            color: #702619;
        }

        /* Responsive - Tablettes */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .container {
                border-radius: 8px;
            }
            
            .header {
                padding: 20px 16px;
            }
            
            .header h1 {
                font-size: 20px;
            }
            
            .header p {
                font-size: 13px;
            }
            
            .content {
                padding: 16px;
            }
            
            .tab {
                padding: 12px 8px;
                font-size: 14px;
            }
            
            .section {
                margin-bottom: 20px;
            }
            
            .label {
                font-size: 14px;
                margin-bottom: 10px;
            }
            
            .button-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 6px;
            }
            
            .note-grid {
                grid-template-columns: repeat(6, 1fr);
                gap: 6px;
            }
            
            .btn {
                padding: 10px 8px;
                font-size: 13px;
            }
            
            .note-btn {
                min-height: 50px;
                padding: 6px 2px;
            }
            
            .results h3 {
                font-size: 16px;
                margin-bottom: 12px;
            }
            
            .result-item {
                padding: 12px;
            }
            
            .instrument-info h3 {
                font-size: 14px;
            }
            
            .instrument-list {
                font-size: 11px;
            }
            
            .note-result {
                min-width: 100px;
            }
            
            .note-main {
                font-size: 16px;
            }
            
            .note-alt {
                font-size: 12px;
            }
            
            .mode-buttons {
                gap: 6px;
            }
            
            .mode-btn {
                padding: 8px 12px;
                font-size: 14px;
                flex: 1;
            }
        }

        /* Responsive - Mobiles */
        @media (max-width: 480px) {
            body {
                padding: 5px;
            }
            
            .header {
                padding: 16px 12px;
            }
            
            .header h1 {
                font-size: 18px;
            }
            
            .header p {
                font-size: 12px;
            }
            
            .content {
                padding: 12px;
            }
            
            .tab {
                padding: 10px 6px;
                font-size: 12px;
            }
            
            .label {
                font-size: 13px;
            }
            
            .button-grid {
                grid-template-columns: 1fr;
                gap: 6px;
            }
            
            .note-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 4px;
            }
            
            .btn {
                padding: 10px;
                font-size: 13px;
            }
            
            .note-btn {
                min-height: 55px;
                font-size: 12px;
            }
            
            .results h3 {
                font-size: 14px;
                text-align: left;
            }
            
            .result-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
                padding: 12px;
            }
            
            .instrument-info {
                margin-right: 0;
                width: 100%;
            }
            
            .instrument-info h3 {
                font-size: 14px;
            }
            
            .instrument-list {
                font-size: 11px;
            }
            
            .note-result {
                text-align: left;
                width: 100%;
                min-width: 0;
            }
            
            .note-main {
                font-size: 16px;
            }
            
            .note-alt {
                font-size: 13px;
            }
            
            .alteration {
                font-size: 11px;
            }
            
            .source-badge {
                display: inline-block;
                margin-left: 6px;
                margin-top: 4px;
            }
            
            .mode-buttons {
                gap: 8px;
            }
            
            .mode-btn {
                padding: 10px;
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎵 Guide de transposition interactif</h1>
            <p>Trouvez facilement les notes et tonalités pour tous vos instruments</p>
        </div>
        
        <div class="tabs">
            <button class="tab active" onclick="showTab('notes')">🎼 Transposition de Notes</button>
            <button class="tab" onclick="showTab('keys')">🔄 Transposition de Tonalités</button>
        </div>
        
        <div class="content">
            <!-- Transposition de Notes -->
            <div id="notes-tab">
                <div class="section">
                    <label class="label">Instrument source :</label>
                    <div class="button-grid" id="source-instruments"></div>
                </div>
                
                <div class="section">
                    <label class="label">Choisissez une note :</label>
                    <div class="note-grid" id="note-buttons"></div>
                </div>
                
                <div class="results" id="note-results"></div>
            </div>
            
            <!-- Transposition de Tonalités -->
            <div id="keys-tab" style="display: none;">
                <div class="section">
                    <label class="label">Instrument source :</label>
                    <div class="button-grid" id="source-keys-instruments"></div>
                </div>
                
                <div class="section">
                    <label class="label">Choisissez une tonalité :</label>
                    <div class="button-grid" id="key-buttons"></div>
                    <div class="mode-buttons">
                        <button class="mode-btn active" onclick="setMode('majeur')">Majeur</button>
                        <button class="mode-btn" onclick="setMode('mineur')">Mineur</button>
                    </div>
                </div>
                
                <div class="results" id="key-results"></div>
            </div>
        </div>
    </div>

    <script>
        // État de l'application
        let state = {
            activeTab: 'notes',
            selectedNote: 'C',
            selectedKey: 'C',
            selectedMode: 'majeur',
            sourceInstrument: 'Piano/Guitare',
            sourceKeyInstrument: 'Piano/Guitare'
        };

        // Données
        const notes = {
            'C': { eu: 'Do', us: 'C' },
            'C#': { eu: 'Do#', us: 'C#' },
            'Db': { eu: 'Réb', us: 'Db' },
            'D': { eu: 'Ré', us: 'D' },
            'D#': { eu: 'Ré#', us: 'D#' },
            'Eb': { eu: 'Mib', us: 'Eb' },
            'E': { eu: 'Mi', us: 'E' },
            'F': { eu: 'Fa', us: 'F' },
            'F#': { eu: 'Fa#', us: 'F#' },
            'Gb': { eu: 'Solb', us: 'Gb' },
            'G': { eu: 'Sol', us: 'G' },
            'G#': { eu: 'Sol#', us: 'G#' },
            'Ab': { eu: 'Lab', us: 'Ab' },
            'A': { eu: 'La', us: 'A' },
            'A#': { eu: 'La#', us: 'A#' },
            'Bb': { eu: 'Sib', us: 'Bb' },
            'B': { eu: 'Si', us: 'B' }
        };

        const instruments = {
            'Piano/Guitare': {
                transposition: 0,
                color: 'c',
                instruments: ['Piano', 'Guitare', 'Violon', 'Flûte']
            },
            'Instruments en Bb': {
                transposition: 2,
                color: 'bb',
                instruments: ['Saxophone Ténor', 'Saxophone Soprano', 'Trompette', 'Clarinette']
            },
            'Instruments en Eb': {
                transposition: 9,
                color: 'eb',
                instruments: ['Saxophone Alto', 'Saxophone Baryton']
            },
            'Cor en F': {
                transposition: 7,
                color: 'f',
                instruments: ['Cor français']
            }
        };

        const keySignatures = {
            'C': { sharps: 0, flats: 0, name: 'Do' },
            'G': { sharps: 1, flats: 0, name: 'Sol' },
            'D': { sharps: 2, flats: 0, name: 'Ré' },
            'A': { sharps: 3, flats: 0, name: 'La' },
            'E': { sharps: 4, flats: 0, name: 'Mi' },
            'B': { sharps: 5, flats: 0, name: 'Si' },
            'F#': { sharps: 6, flats: 0, name: 'Fa#' },
            'C#': { sharps: 7, flats: 0, name: 'Do#' },
            'F': { sharps: 0, flats: 1, name: 'Fa' },
            'Bb': { sharps: 0, flats: 2, name: 'Sib' },
            'Eb': { sharps: 0, flats: 3, name: 'Mib' },
            'Ab': { sharps: 0, flats: 4, name: 'Lab' },
            'Db': { sharps: 0, flats: 5, name: 'Réb' },
            'Gb': { sharps: 0, flats: 6, name: 'Solb' },
            'Cb': { sharps: 0, flats: 7, name: 'Dob' },
            'A#': { sharps: 0, flats: 2, name: 'La#' },
            'D#': { sharps: 0, flats: 3, name: 'Ré#' },
            'G#': { sharps: 0, flats: 4, name: 'Sol#' }
        };

        // Fonctions utilitaires
        function noteToIndex(note) {
            const noteMap = {
                'C': 0, 'C#': 1, 'Db': 1, 'D': 2, 'D#': 3, 'Eb': 3, 'E': 4,
                'F': 5, 'F#': 6, 'Gb': 6, 'G': 7, 'G#': 8, 'Ab': 8, 'A': 9,
                'A#': 10, 'Bb': 10, 'B': 11
            };
            return noteMap[note] || 0;
        }

        function indexToNote(index, preferFlats) {
            const sharpMap = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
            const flatMap = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'];
            return preferFlats ? flatMap[index % 12] : sharpMap[index % 12];
        }

        function getEnharmonic(note) {
            const enharmonics = {
                'C#': 'Db', 'Db': 'C#',
                'D#': 'Eb', 'Eb': 'D#',
                'F#': 'Gb', 'Gb': 'F#',
                'G#': 'Ab', 'Ab': 'G#',
                'A#': 'Bb', 'Bb': 'A#'
            };
            return enharmonics[note] || null;
        }

        function shouldPreferFlats(instrumentName) {
            return instrumentName.includes('Eb') || instrumentName.includes('Ab') || instrumentName.includes('Bb');
        }

        function shouldPreferFlatsForKey(key) {
            return key.includes('b') || ['Bb', 'Eb', 'Ab', 'Db', 'Gb', 'Cb'].includes(key);
        }

        function transposeNote(note, semitones, preferFlats) {
            const index = noteToIndex(note);
            const newIndex = (index + semitones + 12) % 12;
            return indexToNote(newIndex, preferFlats);
        }

        function transposeNoteFromTo(note, sourceInstrument, targetInstrument) {
            const sourceTransposition = instruments[sourceInstrument].transposition;
            const targetTransposition = instruments[targetInstrument].transposition;
            const preferFlats = shouldPreferFlats(targetInstrument);

            const pianoNote = transposeNote(note, -sourceTransposition);
            return transposeNote(pianoNote, targetTransposition, preferFlats);
        }

        function transposeKeyFromTo(key, sourceInstrument, targetInstrument) {
            const sourceTransposition = instruments[sourceInstrument].transposition;
            const targetTransposition = instruments[targetInstrument].transposition;
            const preferFlats = shouldPreferFlats(targetInstrument);

            const pianoKey = transposeNote(key, -sourceTransposition);
            return transposeNote(pianoKey, targetTransposition, preferFlats);
        }

        function getKeySignature(key, mode) {
            if (mode === 'mineur') {
                const relativeIndex = (noteToIndex(key) + 3) % 12;
                const relativeMajor = indexToNote(relativeIndex);
                return keySignatures[relativeMajor] || { sharps: 0, flats: 0, name: key };
            }
            return keySignatures[key] || { sharps: 0, flats: 0, name: key };
        }

        // Interface utilisateur
        function showTab(tabName) {
            state.activeTab = tabName;
            
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
            event.target.classList.add('active');
            
            document.getElementById('notes-tab').style.display = tabName === 'notes' ? 'block' : 'none';
            document.getElementById('keys-tab').style.display = tabName === 'keys' ? 'block' : 'none';
        }

        function setSourceInstrument(instrument) {
            state.sourceInstrument = instrument;
            renderSourceInstruments();
            renderNoteResults();
        }

        function setSourceKeyInstrument(instrument) {
            state.sourceKeyInstrument = instrument;
            renderSourceKeyInstruments();
            renderKeyResults();
        }

        function setNote(note) {
            state.selectedNote = note;
            renderNoteButtons();
            renderNoteResults();
        }

        function setKey(key) {
            state.selectedKey = key;
            renderKeyButtons();
            renderKeyResults();
        }

        function setMode(mode) {
            state.selectedMode = mode;
            document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');
            renderKeyResults();
        }

        // Rendu
        function renderSourceInstruments() {
            const container = document.getElementById('source-instruments');
            container.innerHTML = '';
            
            Object.keys(instruments).forEach(instrument => {
                const btn = document.createElement('button');
                btn.className = 'btn' + (state.sourceInstrument === instrument ? ' source' : '');
                btn.textContent = instrument;
                btn.onclick = () => setSourceInstrument(instrument);
                container.appendChild(btn);
            });
        }

        function renderSourceKeyInstruments() {
            const container = document.getElementById('source-keys-instruments');
            container.innerHTML = '';
            
            Object.keys(instruments).forEach(instrument => {
                const btn = document.createElement('button');
                btn.className = 'btn' + (state.sourceKeyInstrument === instrument ? ' source' : '');
                btn.textContent = instrument;
                btn.onclick = () => setSourceKeyInstrument(instrument);
                container.appendChild(btn);
            });
        }

        function renderNoteButtons() {
            const container = document.getElementById('note-buttons');
            container.innerHTML = '';
            
            Object.keys(notes).forEach(note => {
                const btn = document.createElement('button');
                btn.className = 'btn note-btn' + (state.selectedNote === note ? ' active' : '');
                btn.innerHTML = '<div>' + notes[note].eu + '</div><div style="font-size: 11px; opacity: 0.7;">' + notes[note].us + '</div>';
                btn.onclick = () => setNote(note);
                container.appendChild(btn);
            });
        }

        function renderKeyButtons() {
            const container = document.getElementById('key-buttons');
            container.innerHTML = '';
            
            Object.keys(keySignatures).slice(0, 13).forEach(key => {
                const btn = document.createElement('button');
                btn.className = 'btn' + (state.selectedKey === key ? ' active' : '');
                btn.innerHTML = '<div>' + keySignatures[key].name + '</div><div style="font-size: 11px; opacity: 0.7;">' + key + '</div>';
                btn.onclick = () => setKey(key);
                container.appendChild(btn);
            });
        }

        function renderNoteResults() {
            const container = document.getElementById('note-results');
            container.innerHTML = '<h3>Équivalences pour ' + notes[state.selectedNote].eu + ' (' + notes[state.selectedNote].us + ') sur ' + state.sourceInstrument + ' :</h3>';
            
            Object.entries(instruments).forEach(([instrument, config]) => {
                const transposedNote = transposeNoteFromTo(state.selectedNote, state.sourceInstrument, instrument);
                const transposedEu = notes[transposedNote].eu;
                const transposedUs = notes[transposedNote].us;
                const enharmonic = getEnharmonic(transposedNote);
                const preferFlats = shouldPreferFlats(instrument);
                
                let primaryNote, primaryEu, primaryUs, secondaryNote, secondaryEu, secondaryUs;
                
                if (enharmonic) {
                    if (preferFlats) {
                        if (transposedNote.includes('#')) {
                            primaryNote = enharmonic;
                            primaryEu = notes[enharmonic].eu;
                            primaryUs = enharmonic;
                            secondaryNote = transposedNote;
                            secondaryEu = transposedEu;
                            secondaryUs = transposedUs;
                        } else {
                            primaryNote = transposedNote;
                            primaryEu = transposedEu;
                            primaryUs = transposedUs;
                            secondaryNote = enharmonic;
                            secondaryEu = notes[enharmonic].eu;
                            secondaryUs = enharmonic;
                        }
                    } else {
                        if (transposedNote.includes('b')) {
                            primaryNote = enharmonic;
                            primaryEu = notes[enharmonic].eu;
                            primaryUs = enharmonic;
                            secondaryNote = transposedNote;
                            secondaryEu = transposedEu;
                            secondaryUs = transposedUs;
                        } else {
                            primaryNote = transposedNote;
                            primaryEu = transposedEu;
                            primaryUs = transposedUs;
                            secondaryNote = enharmonic;
                            secondaryEu = notes[enharmonic].eu;
                            secondaryUs = enharmonic;
                        }
                    }
                } else {
                    primaryNote = transposedNote;
                    primaryEu = transposedEu;
                    primaryUs = transposedUs;
                }
                
                const div = document.createElement('div');
                div.className = 'result-item ' + config.color + (instrument === state.sourceInstrument ? ' source' : '');
                
                div.innerHTML = 
                    '<div class="instrument-info">' +
                        '<h3>' + instrument + (instrument === state.sourceInstrument ? '<span class="source-badge">SOURCE</span>' : '') + '</h3>' +
                        '<div class="instrument-list">' + config.instruments.join(', ') + '</div>' +
                    '</div>' +
                    '<div class="note-result">' +
                        '<div class="note-main">' + primaryEu + ' (' + primaryUs + ')</div>' +
                        (secondaryNote ? '<div class="note-alt">= ' + secondaryEu + ' (' + secondaryUs + ')</div>' : '') +
                    '</div>';
                
                container.appendChild(div);
            });
        }

        function renderKeyResults() {
            const container = document.getElementById('key-results');
            container.innerHTML = '<h3>Équivalences pour ' + keySignatures[state.selectedKey].name + ' ' + state.selectedMode + ' sur ' + state.sourceKeyInstrument + ' :</h3>';
            
            Object.entries(instruments).forEach(([instrument, config]) => {
                const transposedKey = transposeKeyFromTo(state.selectedKey, state.sourceKeyInstrument, instrument);
                const enharmonic = getEnharmonic(transposedKey);
                
                let primaryKey, primaryKeyName, secondaryKey, secondaryKeyName, primaryKeyInfo;
                
                if (enharmonic && keySignatures[enharmonic]) {
                    if (shouldPreferFlatsForKey(transposedKey) || shouldPreferFlatsForKey(enharmonic)) {
                        if (transposedKey.includes('b') || ['Bb', 'Eb', 'Ab', 'Db', 'Gb', 'Cb'].includes(transposedKey)) {
                            primaryKey = transposedKey;
                            primaryKeyName = keySignatures[transposedKey].name || transposedKey;
                            primaryKeyInfo = getKeySignature(transposedKey, state.selectedMode);
                            secondaryKey = enharmonic;
                            secondaryKeyName = keySignatures[enharmonic].name || enharmonic;
                        } else {
                            primaryKey = enharmonic;
                            primaryKeyName = keySignatures[enharmonic].name || enharmonic;
                            primaryKeyInfo = getKeySignature(enharmonic, state.selectedMode);
                            secondaryKey = transposedKey;
                            secondaryKeyName = keySignatures[transposedKey].name || transposedKey;
                        }
                    } else {
                        if (transposedKey.includes('#') || ['F#', 'C#', 'G#', 'D#', 'A#'].includes(transposedKey)) {
                            primaryKey = transposedKey;
                            primaryKeyName = keySignatures[transposedKey].name || transposedKey;
                            primaryKeyInfo = getKeySignature(transposedKey, state.selectedMode);
                            secondaryKey = enharmonic;
                            secondaryKeyName = keySignatures[enharmonic].name || enharmonic;
                        } else {
                            primaryKey = enharmonic;
                            primaryKeyName = keySignatures[enharmonic].name || enharmonic;
                            primaryKeyInfo = getKeySignature(enharmonic, state.selectedMode);
                            secondaryKey = transposedKey;
                            secondaryKeyName = keySignatures[transposedKey].name || transposedKey;
                        }
                    }
                } else {
                    primaryKey = transposedKey;
                    primaryKeyName = keySignatures[transposedKey].name || transposedKey;
                    primaryKeyInfo = getKeySignature(transposedKey, state.selectedMode);
                }
                
                let alterationText = '';
                if (primaryKeyInfo.sharps > 0) {
                    alterationText = primaryKeyInfo.sharps + ' dièse' + (primaryKeyInfo.sharps > 1 ? 's' : '');
                } else if (primaryKeyInfo.flats > 0) {
                    alterationText = primaryKeyInfo.flats + ' bémol' + (primaryKeyInfo.flats > 1 ? 's' : '');
                } else {
                    alterationText = 'Aucune altération';
                }
                
                const div = document.createElement('div');
                div.className = 'result-item ' + config.color + (instrument === state.sourceKeyInstrument ? ' source' : '');
                
                div.innerHTML = 
                    '<div class="instrument-info">' +
                        '<h3>' + instrument + (instrument === state.sourceKeyInstrument ? '<span class="source-badge">SOURCE</span>' : '') + '</h3>' +
                        '<div class="instrument-list">' + config.instruments.join(', ') + '</div>' +
                    '</div>' +
                    '<div class="note-result">' +
                        '<div class="note-main">' + primaryKeyName + ' ' + state.selectedMode + '</div>' +
                        (secondaryKey && keySignatures[secondaryKey] ? '<div class="note-alt">= ' + secondaryKeyName + ' ' + state.selectedMode + '</div>' : '') +
                        '<div class="alteration">' + alterationText + '</div>' +
                    '</div>';
                
                container.appendChild(div);
            });
        }

        // Initialisation
        function init() {
            renderSourceInstruments();
            renderSourceKeyInstruments();
            renderNoteButtons();
            renderKeyButtons();
            renderNoteResults();
            renderKeyResults();
        }

        // Démarrer l'application
        init();
    </script>
</body>
</html>				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-ac6426e e-grid e-con-full wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="ac6426e" data-element_type="container" data-e-type="container">
				</div>
		<div class="elementor-element elementor-element-d7eed13 e-grid e-con-full wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent" data-id="d7eed13" data-element_type="container" data-e-type="container">
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Bonjour tout le monde !</title>
		<link>https://carolesauvanet.fr/bonjour-tout-le-monde/</link>
		
		<dc:creator><![CDATA[KrolSpirit]]></dc:creator>
		<pubDate>Sun, 20 Jul 2025 11:28:13 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://carolesauvanet.fr/?p=1</guid>

					<description><![CDATA[Bienvenue sur WordPress. Ceci est votre premier article. Modifiez-le ou supprimez-le, puis commencez à écrire !]]></description>
										<content:encoded><![CDATA[
<p>Bienvenue sur WordPress. Ceci est votre premier article. Modifiez-le ou supprimez-le, puis commencez à écrire !</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
