Outiref

Code source de l'URL : https://www.guitarharmony.app/it

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GuitarHarmony — L'atelier d'harmonie guitare en ligne</title>
    <meta name="description" content="Trouvez la gamme de vos accords, bâtissez vos solos, réharmonisez et composez. L'atelier complet pour guitaristes — Premium 39€/an." />
    <meta name="author" content="GuitarHarmony" />
    <meta name="google-site-verification" content="Z6PQfCVPyv76UxrUj1vHREsXc1XYB2Y79DlEK9G1gOU" />

    <!-- Google Analytics 4 -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-8CP1YVECT8"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-8CP1YVECT8');
    </script>
    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="apple-touch-icon" href="/favicon.png" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet" />

    
    
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.guitarharmony.app/" />

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "GuitarHarmony",
        "url": "https://www.guitarharmony.app/",
        "inLanguage": ["fr", "en", "it", "de"],
        "potentialAction": {
          "@type": "SearchAction",
          "target": "https://www.guitarharmony.app/?q={search_term_string}",
          "query-input": "required name=search_term_string"
        }
      }
    </script>
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "GuitarHarmony",
        "url": "https://www.guitarharmony.app/",
        "applicationCategory": "MusicApplication",
        "operatingSystem": "Web",
        "description": "Atelier d'harmonie pour guitaristes : gammes, accords, progressions, cercle des quintes, identification d'accords, accordages alternatifs, ukulélé, constructeur de solos et analyse IA.",
        "offers": {
          "@type": "Offer",
          "price": "39",
          "priceCurrency": "EUR"
        }
      }
    </script>
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "GuitarHarmony",
        "url": "https://www.guitarharmony.app/",
        "applicationCategory": "EducationalApplication",
        "applicationSuite": "Music Theory and Guitar Tools",
        "operatingSystem": "Web",
        "inLanguage": ["fr", "en", "it", "de"],
        "description": "L'atelier d'harmonie complet pour guitaristes. Outils de théorie, gammes, accords et analyse de progression par IA.",
        "offers": {
          "@type": "Offer",
          "price": "39.00",
          "priceCurrency": "EUR"
        },
        "publisher": {
          "@type": "Organization",
          "name": "GuitarHarmony",
          "url": "https://www.guitarharmony.app/"
        }
      }
    </script>
    <meta property="og:title" content="GuitarHarmony — L'atelier d'harmonie guitare en ligne" />
  <meta name="twitter:title" content="GuitarHarmony — L'atelier d'harmonie guitare en ligne" />
  <meta property="og:description" content="Trouvez la gamme de vos accords, bâtissez vos solos, réharmonisez et composez. L'atelier complet pour guitaristes — Premium 39€/an." />
  <meta name="twitter:description" content="Trouvez la gamme de vos accords, bâtissez vos solos, réharmonisez et composez. L'atelier complet pour guitaristes — Premium 39€/an." />
  <meta property="og:image" content="https://storage.googleapis.com/gpt-engineer-file-uploads/attachments/og-images/1edd867e-1fae-4ab7-a5c7-7b7851957bba">
  <meta name="twitter:image" content="https://storage.googleapis.com/gpt-engineer-file-uploads/attachments/og-images/1edd867e-1fae-4ab7-a5c7-7b7851957bba">
  <meta name="twitter:card" content="summary_large_image" />
  <script type="module" crossorigin src="/assets/index-CZHwl2hQ.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-B8X_3rMx.css">
  <link rel="canonical" href="https://www.guitarharmony.app/" />
    <meta property="og:locale" content="fr_FR" />
  
  
  
  
    <link rel="alternate" hreflang="fr-FR" href="https://www.guitarharmony.app/fr" />
  <link rel="alternate" hreflang="en" href="https://www.guitarharmony.app/en" />
  <link rel="alternate" hreflang="it-IT" href="https://www.guitarharmony.app/it" />
  <link rel="alternate" hreflang="de-DE" href="https://www.guitarharmony.app/de" />
  <link rel="alternate" hreflang="x-default" href="https://www.guitarharmony.app/fr" />
  
<style>
	@font-face {
		font-family: 'CameraPlainVariable';
		src: url('https://cdn.gpteng.co/mcp-widgets/v1/fonts/CameraPlainVariable.woff2') format('woff2');
		font-weight: 100 900;
		font-style: normal;
		font-display: swap;
	}

	#lovable-badge {
		--badge-bg: #1b1b1b;
		--badge-text: #c5c1b9;
		--badge-text-hover: #dcdad5;
		--badge-radius: 6px;
		--badge-padding: 8px;
		--badge-gap: 6px;
		--badge-shadow: 
			0 0 0 1px rgba(0, 0, 0, 0.88),
			0 1px 0 0 rgba(0, 0, 0, 0.04),
			0 2px 2px -1px rgba(0, 0, 0, 0.08),
			0 4px 4px -2px rgba(0, 0, 0, 0.08),
			0 8px 8px -4px rgba(0, 0, 0, 0.08),
			0 16px 16px -8px rgba(0, 0, 0, 0.08);
		--badge-transition-duration: 0.2s;
		--badge-transition-easing: cubic-bezier(0.16, 1, 0.32, 1);
		--focus-color: #575ECF;
		--focus-offset: 2px;
		--focus-width: 2px;
		
		position: fixed;
		bottom: 12px;
		right: 12px;
		height: 24px;
		display: flex;
		align-items: center;
		z-index: 1000000;
		background-color: var(--badge-bg);
		color: var(--badge-text);
		border-radius: var(--badge-radius);
		box-shadow: var(--badge-shadow);
		font-size: 12px;
		font-family: CameraPlainVariable, "CameraPlainVariable Fallback", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-weight: 400 !important;
		text-transform: none !important;
		font-feature-settings: normal !important;
		transform: translateZ(0);
		will-change: transform, opacity;
	}

	#lovable-badge-cta {
		display: flex;
		align-items: center;
		gap: var(--badge-gap);
		padding: 0 var(--badge-padding);
		height: 100%;
		color: inherit;
		text-decoration: none;
		white-space: nowrap;
		border-radius: var(--badge-radius) 0 0 var(--badge-radius);
		transition: 
			background-color var(--badge-transition-duration) ease,
			color var(--badge-transition-duration) ease,
			transform 0.1s ease;
	}

	#lovable-badge-cta:hover {
		background: rgba(255, 255, 255, 0.04);
		color: var(--badge-text-hover);
	}

	#lovable-badge-cta:active {
		transform: scale(0.98);
	}

	#lovable-badge-cta:focus {
		outline: none;
	}

	#lovable-badge-cta:focus-visible {
		outline: var(--focus-width) solid var(--focus-color);
		outline-offset: var(--focus-offset);
		z-index: 1;
	}

	#lovable-badge-text {
		line-height: 1;
	}

	#lovable-badge-divider {
		width: 1px;
		height: 24px;
		background-color: rgba(255, 255, 255, 0.04);
		flex-shrink: 0;
	}

	#lovable-badge-close {
		width: 24px;
		height: 24px;
		min-width: 24px;
		min-height: 24px;
		cursor: pointer;
		background: none;
		border: none;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0 var(--badge-radius) var(--badge-radius) 0;
		flex-shrink: 0;
		transition: 
			background-color var(--badge-transition-duration) ease,
			transform 0.1s ease;
	}

	#lovable-badge-close:hover {
		background: rgba(255, 255, 255, 0.04);
	}

	#lovable-badge-close:active {
		transform: scale(0.92);
	}

	#lovable-badge-close:focus {
		outline: none;
	}

	#lovable-badge-close:focus-visible {
		outline: var(--focus-width) solid var(--focus-color);
		outline-offset: calc(var(--focus-offset) * -1);
		z-index: 1;
	}

	#lovable-badge-close svg path {
		fill: var(--badge-text);
		transition: fill var(--badge-transition-duration) ease;
	}

	#lovable-badge-close:hover svg path {
		fill: var(--badge-text-hover);
	}

	@media (prefers-reduced-motion: reduce) {
		#lovable-badge-cta,
		#lovable-badge-close,
		#lovable-badge-close svg path {
			transition: none;
		}
		
		#lovable-badge-cta:active,
		#lovable-badge-close:active {
			transform: none;
		}
	}

	@media (prefers-contrast: high) {
		#lovable-badge {
			--badge-bg: #000;
			--badge-text: #fff;
			--badge-text-hover: #fff;
			border: 2px solid currentColor;
		}
		
		#lovable-badge-cta:focus-visible,
		#lovable-badge-close:focus-visible {
			outline-width: 3px;
		}
	}
</style>
<script defer src="/~flock.js" data-proxy-url="/~api/analytics"></script></head>

  <body>
    <div id="root">
      <!--
        Pre-hydration fallback content. Crawlers without JS (LLM bots,
        social previews) see this rich, structured summary instead of an
        empty shell. React replaces it on mount.
      -->
      <main hidden aria-hidden="true">
        <h1>GuitarHarmony — L'atelier d'harmonie guitare en ligne</h1>
        <p>
          GuitarHarmony est une application web pédagogique et un outil
          d'analyse d'harmonie pour les guitaristes. Trouvez les gammes de
          vos accords, identifiez n'importe quel accord, construisez vos
          solos, réharmonisez vos progressions et composez avec l'aide de
          l'IA. Disponible en français, anglais, italien et allemand.
        </p>
        <h2>Outils principaux</h2>
        <ul>
          <li><a href="/scales">Gammes &amp; accords</a> — détecte les gammes qui sonnent sur votre grille d'accords, avec positions sur le manche.</li>
          <li><a href="/identify">Identifier un accord</a> — posez vos doigts sur le manche, GuitarHarmony nomme l'accord, ses notes et ses voicings.</li>
          <li><a href="/progressions">Progressions d'accords</a> — bibliothèque de suites classiques (ii-V-I, anatole, blues) transposables.</li>
          <li><a href="/circle">Cercle des quintes interactif</a> — tonalités, enchaînements et accords pivots.</li>
          <li><a href="/tunings">Accordages alternatifs</a> — Drop D, Drop C, DADGAD, Open G, Open D et plus.</li>
          <li><a href="/ukulele">Ukulélé</a> — diagrammes d'accords et gammes adaptés aux 4 cordes.</li>
          <li><a href="/triads">Maîtrise des triades</a> — majeures, mineures, augmentées, diminuées sur tous les triplets de cordes.</li>
          <li><a href="/toolbox">Boîte à outils PDF</a> — manches vierges, diagrammes vierges, cheat-sheets et tablatures à imprimer.</li>
          <li><a href="/songs">Mes morceaux</a> — feuilles de chant accords + paroles exportables en PDF.</li>
        </ul>
        <h2>Outils Premium</h2>
        <ul>
          <li><a href="/progression-ai">Analyse IA d'une progression</a> — altérations, substitutions et suite logique proposées par l'IA.</li>
          <li><a href="/solo">Constructeur de solo</a> — pour chaque accord : gamme, arpège, notes-cibles et lignes prêtes à jouer.</li>
          <li><a href="/substitutions">Substitutions d'accords</a> — tritone, dominantes secondaires, emprunts modaux pour réharmoniser.</li>
        </ul>
        <h2>Tarifs</h2>
        <p>
          <a href="/pricing">Premium 39 €/an</a> (3,25 €/mois) débloque tout :
          analyse IA, constructeur de solo, substitutions avancées,
          sauvegarde illimitée et 25 crédits IA par mois. Modules
          disponibles à l'unité (6,90 €). Sans engagement, annulable à
          tout moment.
        </p>
        <h2>Langues disponibles</h2>
        <p>
          Site multilingue :
          <a href="/fr">Français</a> ·
          <a href="/en">English</a> ·
          <a href="/it">Italiano</a> ·
          <a href="/de">Deutsch</a>.
        </p>
        <p>
          Pour les assistants IA, un résumé Markdown est disponible sur
          <a href="/llm.txt">/llm.txt</a> et
          <a href="/llms.txt">/llms.txt</a>.
        </p>
      </main>
    </div>
  
<aside 
	id="lovable-badge" 
	role="complementary"
	dir="ltr"
	lang="en"
	aria-label="Edit with Lovable">
	<a 
		id="lovable-badge-cta" 
		target="_blank" 
		href="https://lovable.dev/projects/380c941a-8f6e-4e9d-a40b-16a61bb0eee2?utm_source=lovable-badge"
		rel="noopener nofollow"
		aria-label="Edit with Lovable">
		<span id="lovable-badge-text">Edit with</span>
		<svg xmlns="http://www.w3.org/2000/svg" width="52" height="16" fill="none" viewbox="0 0 52 16">
  <path fill="#FCFBF8" fill-rule="evenodd" d="M20.318 5.25c.643 0 1.206.14 1.69.418a2.81 2.81 0 0 1 1.118 1.191c.266.513.4 1.115.4 1.807s-.134 1.296-.4 1.812a2.81 2.81 0 0 1-1.118 1.193c-.484.278-1.047.418-1.69.418s-1.208-.14-1.695-.418a2.85 2.85 0 0 1-1.125-1.193c-.262-.516-.393-1.12-.393-1.812s.131-1.294.393-1.807a2.848 2.848 0 0 1 1.125-1.191c.487-.279 1.052-.418 1.695-.418Zm0 1.425c-.27 0-.504.076-.7.228-.193.147-.34.37-.443.67-.102.295-.153.66-.153 1.093 0 .435.05.801.153 1.1.102.3.25.524.443.676.196.147.43.22.7.22.27 0 .502-.073.694-.22.193-.152.341-.375.443-.67.103-.299.153-.667.153-1.106 0-.65-.112-1.145-.337-1.481a1.08 1.08 0 0 0-.953-.51ZM32.7 5.25c.61 0 1.127.1 1.549.3.422.197.74.48.953.849.217.368.325.809.325 1.32v2.704c0 .29.02.562.062.812.044.245.108.4.19.466V12h-1.935a5.895 5.895 0 0 1-.105-.684 7.745 7.745 0 0 1-.02-.228 2.293 2.293 0 0 1-.151.203c-.205.242-.47.437-.793.584-.32.143-.685.215-1.094.215-.406 0-.77-.08-1.094-.24a1.845 1.845 0 0 1-.756-.682 1.984 1.984 0 0 1-.27-1.045c0-.606.178-1.069.535-1.388.356-.324.87-.534 1.542-.633l1.125-.16c.225-.032.403-.074.534-.123a.622.622 0 0 0 .288-.196.549.549 0 0 0 .093-.327.65.65 0 0 0-.11-.367.702.702 0 0 0-.32-.27c-.14-.07-.31-.105-.51-.105-.32 0-.576.083-.768.251-.193.164-.298.39-.314.676h-1.923c.016-.434.147-.82.393-1.155.25-.34.596-.604 1.039-.792.442-.189.954-.283 1.535-.283Zm.99 3.498a.98.98 0 0 1-.215.14 2.49 2.49 0 0 1-.584.178l-.473.092c-.315.061-.553.156-.713.283-.155.127-.233.305-.233.534 0 .23.084.412.252.547.168.135.383.203.645.203s.494-.058.694-.173c.201-.118.355-.282.461-.49.11-.21.166-.448.166-.714v-.6Zm4.526-2.375c.065-.125.138-.243.221-.349.197-.25.437-.44.719-.571.282-.135.6-.203.952-.203.528 0 .988.138 1.377.412.389.275.688.67.896 1.186.21.512.314 1.12.314 1.824 0 .7-.107 1.309-.32 1.825-.213.512-.518.906-.915 1.18-.393.275-.854.412-1.383.412-.352 0-.667-.062-.946-.184a1.832 1.832 0 0 1-.7-.554 2.2 2.2 0 0 1-.234-.383V12h-1.843V3h1.862v3.373Zm1.284.296c-.274 0-.51.085-.707.253-.192.163-.338.397-.436.7a3.376 3.376 0 0 0-.148 1.05c0 .406.05.759.148 1.058.098.299.243.53.436.694.197.164.433.246.707.246.279 0 .512-.082.7-.246.193-.164.336-.395.43-.694.099-.3.148-.652.148-1.058 0-.405-.05-.757-.147-1.056-.095-.299-.238-.53-.43-.694a1.015 1.015 0 0 0-.7-.253Zm9.416-1.419c.602 0 1.136.131 1.604.393.466.262.829.643 1.086 1.143.263.5.394 1.097.394 1.794 0 .25-.002.449-.006.596H47.51c.018.288.071.538.164.75a1.3 1.3 0 0 0 .491.596c.214.13.465.196.757.196.319 0 .583-.082.792-.246.209-.167.34-.403.393-.706h1.862a2.48 2.48 0 0 1-.485 1.235 2.54 2.54 0 0 1-1.051.805c-.439.188-.949.283-1.53.283-.655 0-1.225-.125-1.708-.375a2.672 2.672 0 0 1-1.13-1.143c-.267-.508-.4-1.137-.4-1.887 0-.712.14-1.327.418-1.843a2.86 2.86 0 0 1 1.155-1.186c.491-.27 1.051-.405 1.678-.405Zm-.044 1.345c-.274 0-.516.068-.725.203a1.29 1.29 0 0 0-.479.59 2.045 2.045 0 0 0-.132.498h2.562a1.873 1.873 0 0 0-.138-.602 1.061 1.061 0 0 0-.418-.516 1.243 1.243 0 0 0-.67-.173Z" clip-rule="evenodd"/>
  <path fill="#FCFBF8" d="m26.605 9.995 1.342-4.566h1.924L27.628 12h-2.07l-2.33-6.57h1.98l1.397 4.565Zm-13.013.143h2.256c1.632 0 1.421 1.837 1.418 1.861h-5.603V3h1.93v7.138Zm31.516 1.861h-1.862V3h1.862v8.999Z"/>
  <path fill="url(#a)" fill-rule="evenodd" d="M2.7 3c1.492 0 2.7 1.192 2.7 2.663v1.012h.9c1.49 0 2.7 1.192 2.7 2.662S7.791 12 6.3 12H0V5.663C0 4.193 1.209 3 2.7 3Z" clip-rule="evenodd"/>
  <defs>
    <radialgradient id="a" cx="0" cy="0" r="1" gradienttransform="matrix(-1.54236 7.07838 -10.231 -2.15602 4.627 5.022)" gradientunits="userSpaceOnUse">
      <stop offset=".106" stop-color="#FE7B02"/>
      <stop offset=".394" stop-color="#FE3F21"/>
      <stop offset=".608" stop-color="#F858BC"/>
      <stop offset=".929" stop-color="#575ECF"/>
    </radialgradient>
  </defs>
</svg>


	</a>
	
	<span id="lovable-badge-divider" aria-hidden="true"></span>
	
	<button 
		id="lovable-badge-close"
		aria-label="Dismiss"
		title="Dismiss"
		type="button">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewbox="0 0 16 16" aria-hidden="true">
			<path d="M10.646 4.646a.5.5 0 1 1 .707.708L8.707 8l2.646 2.646a.5.5 0 1 1-.707.707L8 8.707l-2.646 2.646a.5.5 0 1 1-.708-.707L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708L8 7.293l2.646-2.647Z"/>
		</svg>
	</button>
</aside>
<script>
	// Don't show the lovable-badge if the page is in an iframe or if it's being rendered by puppeteer (screenshot service)
	if (window.self !== window.top || navigator.userAgent.includes('puppeteer')) {
		// the page is in an iframe
		var badge = document.getElementById('lovable-badge');
		if (badge) {
			badge.style.display = 'none';
		}
	}

	// Add click event listener to close button with animation
	var closeButton = document.getElementById('lovable-badge-close');
	if (closeButton) {
		closeButton.addEventListener('click', function(event) {
			event.preventDefault();
			event.stopPropagation();
			var badge = document.getElementById('lovable-badge');
			if (badge) {
				badge.classList.add('closing');
				setTimeout(function() {
					if (badge) {
						badge.style.display = 'none';
					}
				}, 240);
			}
		});
	}
</script>
</body>
</html>