/* Theme "Feux de scène" (double spot) — voir specifications-guitarflow-ressources.md
   Lot 6 et le comparatif de maquettes validé avec l'utilisateur. Ambre = accent
   principal (CTA, niveau, dots d'accords) ; corail = second projecteur, réservé au
   badge de style pour rester "deux gélatines qui se croisent" plutôt qu'un bruit de
   couleurs. Polices vendorisées (Anton, Barlow) — voir /assets/fonts, pas de CDN. */

@font-face {
    font-family: "Anton";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/anton-400.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/barlow-400.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/barlow-600.woff2") format("woff2");
}

:root {
    --bg: #211823;
    --ink: #E7DCD6;
    --ink-strong: #FBF3EC;
    --ink-mute: #B7A6AC;
    --ink-faint: #8B7A82;
    --line: #38293B;
    --line-strong: #4E3B52;
    --card-bg: #2A1E2D;
    --grid-cell: #332536;

    --accent: #E8A33D;
    --on-accent: #221407;
    --accent-glow: rgba(232, 163, 61, 0.5);

    --accent2: #E1554F;
    --on-accent2: #FBF3EC;
    --accent2-glow: rgba(225, 85, 79, 0.45);

    --badge-bg: #3A2B3D;
    --badge-ink: #E0B98F;

    --chord-line: #C9B8C0;

    --font-display: "Anton", ui-sans-serif, sans-serif;
    --font-body: "Barlow", ui-sans-serif, system-ui, sans-serif;

    --radius: 3px;
}

* {
    box-sizing: border-box;
}

[x-cloak] {
    display: none !important;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    /* Double halo de scène : ambre en haut à gauche, corail en bas à droite. */
    background-image:
        radial-gradient(70% 50% at 8% -8%, rgba(232, 163, 61, 0.14), transparent 55%),
        radial-gradient(70% 50% at 100% 115%, rgba(225, 85, 79, 0.10), transparent 55%);
    background-attachment: fixed;
    color: var(--ink);
    line-height: 1.55;
}

h1, h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-synthesis: none;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
    color: var(--ink-strong);
    text-wrap: balance;
}

h1 {
    font-size: clamp(1.9rem, 4.4vw, 2.7rem);
    margin: 0 0 0.7rem;
}

h2 {
    font-size: 1.15rem;
    margin: 1.6rem 0 0.7rem;
}

a {
    color: var(--accent);
}

a:hover {
    text-decoration-thickness: 2px;
}

a:focus-visible, button:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--line);
}

.site-header .brand {
    font-family: var(--font-display);
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--ink-strong);
}

.main-nav {
    display: flex;
    gap: 1.4rem;
    flex: 1;
}

.main-nav a {
    color: var(--ink-mute);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.main-nav a:hover {
    color: var(--accent);
}

.lang-switch {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.lang-switch a {
    text-decoration: none;
    color: var(--ink-mute);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius);
}

.lang-switch a.active {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.lefty-toggle {
    font-family: var(--font-body);
}

main {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
}

.hero {
    text-align: center;
    padding: 2.5rem 0 2rem;
}

.hero-intro {
    max-width: 40rem;
    margin: 0 auto;
    font-size: 1.05rem;
    color: var(--ink-mute);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.3rem;
}

/* EVO-036 : audit zoom 200% — la grille de progression (jusqu'a 12 colonnes) peut
   depasser la largeur disponible a fort zoom ; elle defile plutot que de casser la
   mise en page ou forcer un scroll horizontal de toute la page. */
.table-scroll {
    overflow-x: auto;
}

.button-primary, .button-secondary, button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.3rem;
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink-strong);
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
}

.button-primary {
    background: var(--accent);
    color: var(--on-accent);
    border-color: transparent;
    box-shadow: 0 0 0 1px var(--accent-glow), 0 0 18px var(--accent-glow);
}

.button-secondary {
    background: transparent;
    color: var(--ink-strong);
}

/* Actions utilitaires de la fiche (imprimer / partager / carnet) : traitement
   secondaire discret pour laisser le CTA principal (accueil, "fiche aléatoire")
   seul à porter le halo ambré. */
.fiche-actions button {
    background: transparent;
    color: var(--ink-strong);
    border-color: var(--line-strong);
}

.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--badge-bg);
    color: var(--badge-ink);
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.25rem;
}

.badge-niveau {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

.badge-style {
    background: var(--accent2);
    color: var(--on-accent2);
    box-shadow: 0 0 10px var(--accent2-glow);
}

/* BUG-003 : grille de progression en cartes qui passent a la ligne (flex-wrap) plutot
   qu'un tableau a defilement horizontal — illisible/peu pratique des qu'une grille
   depasse 6-7 mesures (cf. retour utilisateur avec capture d'ecran). */
.progression-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0;
    font-family: var(--font-body);
}

.progression-mesure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 4.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--grid-cell);
}

.progression-mesure-label {
    font-size: 0.7rem;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.progression-mesure-accord {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink-strong);
}

/* EVO-022 : degre harmonique (I/IV/V...), discret sous l'accord. */
.progression-mesure-degre {
    color: var(--ink-faint);
    font-weight: 400;
    font-style: italic;
    font-size: 0.8rem;
}

/* EVO-086 : type "strumming" — badges D/U/- simples, aucun rendu SVG. */
.strum-pattern-legend {
    color: var(--ink-faint);
    font-size: 0.85rem;
    font-style: italic;
}

.strum-pattern-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.8rem 0;
}

.strum-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 1rem;
    border: 1px solid var(--line-strong);
}

.strum-badge-down {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.strum-badge-up {
    background: var(--accent2);
    color: var(--on-accent2);
    border-color: var(--accent2);
}

.strum-badge-rest {
    color: var(--ink-faint);
    background: transparent;
    border-style: dashed;
}

.chord-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* EVO-006 : mode gaucher, miroir horizontal des diagrammes. Les cordes/positions de
   doigts se retrouvent inversees (ce qui est correct pour un gaucher), mais le texte
   (nom de l'accord, numeros de doigts) est re-mirore pour rester lisible. */
.lefty-mode .chord-diagram svg {
    transform: scaleX(-1);
}

.lefty-mode .chord-diagram svg text {
    transform: scaleX(-1);
    transform-box: fill-box;
    transform-origin: center;
}

.lefty-mode .lefty-toggle {
    background: var(--accent);
    color: var(--on-accent);
    border-color: transparent;
}

/* BUG-004 : agrandi (90px -> 112px) pour mieux distinguer le doigte, retour direct
   utilisateur. */
.chord-diagram svg {
    width: 112px;
    height: auto;
    animation: chord-diagram-in 0.35s ease-out backwards;
}

/* BUG-004 : zoom leger au survol/focus, pour lire le doigte en detail sans quitter la
   page. transform n'affecte pas la mise en page des voisins (pas de reflow), le z-index
   evite qu'un voisin ne passe par-dessus le diagramme agrandi. */
.chord-diagram {
    position: relative;
    z-index: 1;
    transition: transform 0.15s ease-out;
    transform-origin: center;
}

.chord-diagram:hover, .chord-diagram:focus-within {
    transform: scale(1.6);
    z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
    .chord-diagram {
        transition: none;
    }
}

/* EVO-031 : leger fondu d'apparition des diagrammes, desactive si l'utilisateur a
   demande moins d'animations (prefers-reduced-motion). */
@keyframes chord-diagram-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.chord-grid .chord-diagram:nth-child(2) svg { animation-delay: 0.05s; }
.chord-grid .chord-diagram:nth-child(3) svg { animation-delay: 0.1s; }
.chord-grid .chord-diagram:nth-child(4) svg { animation-delay: 0.15s; }
.chord-grid .chord-diagram:nth-child(n+5) svg { animation-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
    .chord-diagram svg {
        animation: none;
    }
}

/* EVO-009 : diagramme de position de gamme, plus large qu'un diagramme d'accord. */
.scale .chord-diagram svg {
    width: 160px;
}

/* Reskin des diagrammes SVG precalcules (tools/generate_chord_svgs.php et
   generate_scale_svgs.php generent des couleurs fixes #222/#fff/#a00 pensees pour un
   fond clair) : les attributs presentation ont la priorite CSS la plus basse, donc ces
   regles les emportent sans avoir a regenerer les fichiers. */
.chord-diagram svg text:not([fill]) {
    fill: var(--ink-strong);
}

.chord-diagram svg line {
    stroke: var(--chord-line);
}

.chord-diagram svg circle[stroke] {
    fill: none;
    stroke: var(--chord-line);
}

.chord-diagram svg text[fill="#fff"] {
    fill: var(--on-accent);
}

.chord-diagram svg text[fill="#a00"] {
    fill: var(--ink-faint);
}

/* BUG-006 : chaque position jouee brille en ambre PARTOUT ou un diagramme d'accord est
   affiche (fiche, bibliotheque d'accords, poster...), pas seulement dans la section
   "Accords" d'une fiche — c'etait le bug (points noirs sans doigte lisible ailleurs).
   La regle .scale ci-dessous reste plus specifique et continue de s'appliquer sur les
   diagrammes de gamme, ou seule la fondamentale doit briller. */
.chord-diagram svg circle[fill="#222"] {
    fill: var(--accent);
    filter: drop-shadow(0 0 3px var(--accent-glow));
}

/* Gammes : seule la fondamentale (deja #b5502e dans le fichier genere) brille en
   ambre ; les autres notes restent en encre neutre pour garder la hierarchie
   pedagogique (repere visuel de la fondamentale). */
.scale .chord-diagram svg circle[fill="#222"] {
    fill: var(--chord-line);
}

.scale .chord-diagram svg circle[fill="#b5502e"] {
    fill: var(--accent);
    filter: drop-shadow(0 0 3px var(--accent-glow));
}

/* EVO-024 : legende expliquant le code couleur du diagramme de gamme. */
.scale-legend {
    display: flex;
    gap: 1.2rem;
    font-size: 0.78rem;
    color: var(--ink-faint);
    margin-top: 0.6rem;
}

.scale-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.scale-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chord-line);
}

.scale-legend-dot--racine {
    background: var(--accent);
    box-shadow: 0 0 4px var(--accent-glow);
}

/* BUG-007 : place-holder qui a la forme d'un diagramme (pas juste du texte qui flotte),
   pour les rares accords transposes sans forme mobile connue (voir ChordDiagramGenerator
   — seuls majeur/mineur/power barres sont synthetises, jamais une forme inventee). */
.chord-diagram-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 144px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink-faint);
    font-size: 0.95rem;
    font-weight: 700;
    box-sizing: border-box;
}

/* EVO-049 : diagramme cliquable vers la liste des fiches utilisant cet accord. */
.chord-diagram-link {
    display: inline-block;
    border-radius: var(--radius);
    transition: filter 0.15s ease;
}

.chord-diagram-link:hover,
.chord-diagram-link:focus-visible {
    filter: drop-shadow(0 0 4px var(--accent-glow));
}

.suivant-suggestion {
    border-left: 3px solid var(--accent);
    padding: 0.7rem 1rem;
    margin: 1.5rem 0;
    background: var(--card-bg);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.translation-notice {
    background: rgba(232, 163, 61, 0.12);
    border: 1px solid rgba(232, 163, 61, 0.4);
    color: var(--ink-strong);
    padding: 0.6rem 1rem;
    border-radius: var(--radius);
}

/* EVO-072 : distingue une entree de carnet issue du generateur aleatoire d'une fiche
   du catalogue, meme logique visuelle que .translation-notice (bandeau ambre discret). */
.carnet-item-generated {
    background: rgba(232, 163, 61, 0.18);
    color: var(--ink-strong);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* EVO-073 : tablature ASCII du type de fiche "riff/lick" — texte simple en police
   a chasse fixe, comme partout ou une tablature circule (forums, PDF...), volontairement
   pas de rendu graphique/anime propre au site. */
/* EVO-075 : tablature en SVG vectoriel (TabSvgRenderer), meme principe de recoloration
   que les diagrammes d'accords/gammes (couleurs de presentation generiques #222/#fff/
   #b5502e dans le SVG genere, reelle couleur decidee ici selon le theme). Pas de
   zoom au survol ni de miroir gaucher (EVO-006) contrairement a .chord-diagram : une
   tablature se lit dans le temps, gauche vers droite, quel que soit le sens du manche. */
.tablature-diagram {
    background: var(--card-bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin: 0;
}

.tablature-diagram svg {
    display: block;
    width: 100%;
    height: auto;
}

.tablature-diagram svg text {
    fill: var(--ink-mute);
}

.tablature-diagram svg line {
    stroke: var(--chord-line);
}

.tablature-diagram svg circle[fill="#222"] {
    fill: var(--chord-line);
}

.tablature-diagram svg circle[fill="#b5502e"] {
    fill: var(--accent);
    filter: drop-shadow(0 0 3px var(--accent-glow));
}

.tablature-diagram svg text[fill="#fff"] {
    fill: var(--on-accent);
}

.filters {
    margin: 1rem 0;
}

.filters-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.filters-fields label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--ink-mute);
    font-weight: 600;
}

.filters select, .filters input[type="search"],
.generateur-form select {
    background: var(--card-bg);
    color: var(--ink-strong);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 0.45rem 0.6rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
}

/* EVO-076 : memes principes que .filters-fields (largeur uniforme des selects, quelle
   que soit la longueur de leurs options — avant : chaque select prenait sa largeur
   intrinseque, "Type" bien plus large que "Style"/"Niveau"). */
.generateur-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.2rem;
    margin: 1.2rem 0;
}

.generateur-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--ink-mute);
    font-weight: 600;
}

.generateur-form select {
    min-width: 11rem;
}

/* EVO-048/051/052/055/057/074 : filtres booleens, sur leur propre ligne plutot que
   melanges aux champs select (mieux aligne, chips plus lisibles qu'inline). */
.filters-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.filters-toggles .filter-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0.45rem 0.9rem 0.45rem 0.7rem;
    font-size: 0.8rem;
    color: var(--ink-mute);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.filters-toggles .filter-checkbox:hover {
    border-color: var(--accent);
    color: var(--ink-strong);
}

.filters-toggles .filter-checkbox input {
    width: auto;
    accent-color: var(--accent);
}

.fiche-list {
    list-style: none;
    padding: 0;
}

.fiche-list li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}

.complementaires ul, .suggestions-tags ul, .suggestions-tonalites ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.complementaires li, .suggestions-tags li, .suggestions-tonalites li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.92rem;
}

/* BUG-005 : FAQ globale du site (/faq) — repliee par defaut, plus longue qu'une FAQ par
   page. Reprend la classe .faq initialement creee pour la FAQ par fiche (EVO-045,
   retiree). */
.faq details {
    border-bottom: 1px solid var(--line);
    padding: 0.6rem 0;
}

.faq summary {
    font-weight: 600;
    color: var(--ink-strong);
    cursor: pointer;
}

.faq details p {
    margin: 0.5rem 0 0;
    color: var(--ink-mute);
}

/* EVO-047 : glossaire, densite de contenu plus legere que le blog -> pastilles plutot
   que cartes (voir doc source). */
.glossaire-pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.glossaire-pastilles a {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--ink-mute);
    font-size: 0.85rem;
}

.glossaire-pastilles a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.blog-contenu, .glossaire-definition {
    line-height: 1.6;
}

.site-footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--ink-faint);
    font-size: 0.85rem;
}

.resume-historique, .fiche-du-jour, .echauffement-du-jour, .defi-semaine, .bienvenue-nouveau {
    border: 1px solid var(--line);
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    margin: 1rem 0;
}

.echauffement-du-jour ul {
    margin: 0;
    padding-left: 1.2rem;
}

/* EVO-038 : badge de fraicheur du contenu. */
.badge-nouveau {
    background: var(--accent2);
    color: var(--on-accent2);
}

/* EVO-040 : citation du jour. */
.citation-du-jour {
    font-style: italic;
    color: var(--ink-mute);
    text-align: center;
    max-width: 40ch;
    margin: 2rem auto;
}

/* EVO-039 : poster mural des accords ouverts, diagrammes agrandis pour l'impression. */
.poster-grid {
    justify-content: center;
    gap: 1.6rem;
    margin-top: 1.5rem;
}

.poster-grid .chord-diagram svg {
    width: 150px;
}

/* EVO-067 : bibliotheque d'accords recherchable. */
.accords-bibliotheque {
    align-items: flex-start;
}

.accord-carte {
    text-align: center;
}

.accord-type-label {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* EVO-053 : manche virtuel explorable. */
.manche-grid {
    border-collapse: collapse;
    width: 100%;
}

.manche-grid th, .manche-grid td {
    border: 1px solid var(--line);
    padding: 0.35rem 0.4rem;
    text-align: center;
    font-size: 0.8rem;
    min-width: 2.4rem;
}

.manche-grid th[scope="row"] {
    color: var(--ink-mute);
    font-weight: 700;
}

.manche-case-active {
    background: var(--card-bg);
}

.manche-badge {
    display: inline-block;
    margin: 1px;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.7rem;
    font-weight: 700;
}

.manche-badge:hover {
    filter: brightness(1.1);
}

/* EVO-054 : plan de progression multi-etapes sur une fiche. */
.plan-progression ol {
    list-style: decimal;
    padding-left: 1.4rem;
    margin: 0.6rem 0 0;
}

.plan-progression li {
    padding: 0.2rem 0;
}

/* EVO-056 : vue d'ensemble de toutes les branches de progression du catalogue. */
.plan-progression-branche {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
}

.plan-progression-branche li:not(:last-child)::after {
    content: "→";
    margin-left: 0.4rem;
    color: var(--ink-faint);
}

/* EVO-064 : arbre de competences. */
.competences-liste {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.competences-liste li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--ink-faint);
    font-size: 0.85rem;
}

.competences-liste li.competence-acquise {
    color: var(--ink-strong);
    border-color: var(--accent);
}

.competence-puce {
    color: var(--accent);
    font-weight: 700;
}

/* EVO-063 : carte thermique de pratique, 30 derniers jours. */
.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.3rem;
    max-width: 320px;
}

.heatmap-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    background: var(--card-bg);
}

.heatmap-level-1 { background: var(--accent2); opacity: 0.4; }
.heatmap-level-2 { background: var(--accent2); opacity: 0.7; }
.heatmap-level-3 { background: var(--accent); }

/* EVO-061 : cercle des quintes interactif. */
.cercle-quintes-wrap {
    position: relative;
    width: min(100%, 420px);
    aspect-ratio: 1;
    margin: 1.5rem auto;
    border-radius: 50%;
    border: 1px dashed var(--line-strong);
}

.cercle-quintes-position {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    text-align: center;
}

.cercle-quintes-majeur {
    font-weight: 700;
    color: var(--ink-strong);
    font-size: 0.95rem;
}

.cercle-quintes-mineur {
    font-size: 0.75rem;
    color: var(--ink-faint);
}

.cercle-quintes-majeur:hover, .cercle-quintes-mineur:hover {
    color: var(--accent);
}

/* EVO-062 : visualiseur d'octaves. */
.octaves-select-label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--ink-mute);
    max-width: 12rem;
    margin: 0.6rem 0 1rem;
}

.octaves-select-label select {
    background: var(--card-bg);
    color: var(--ink-strong);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 0.45rem 0.6rem;
}

.octave-highlight {
    background: var(--accent) !important;
    color: var(--on-accent);
    font-weight: 700;
}

/* EVO-073 : deuxieme note choisie (intervalle) — second spot de couleur du theme,
   distinct de la premiere note pour rester lisible simultanement. */
.octave-highlight-second {
    background: var(--accent2) !important;
    color: var(--on-accent2);
    font-weight: 700;
}

.octaves-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.octaves-interval {
    margin: 0.6rem 0 1rem;
    font-weight: 700;
    color: var(--accent2);
}

/* EVO-078 : accords compatibles — legende de degre sous chaque diagramme genere. */
.chord-family-degree {
    text-align: center;
    color: var(--ink-faint);
    font-style: italic;
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

/* EVO-080 : hub /theorie, une tuile cliquable par outil. */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.2rem;
    margin: 1.5rem 0;
}

.tool-tile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.2rem;
    background: var(--card-bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tool-tile:hover, .tool-tile:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-glow), 0 0 18px var(--accent-glow);
}

.tool-tile h2 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 1.15rem;
}

.tool-tile p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--ink-mute);
}

/* EVO-088 : outil CAGED — formulaire GET simple (2 selects + bouton), pas de JS. */
.caged-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.2rem;
    margin: 1rem 0 1.5rem;
}

.caged-placeholder .chord-diagram-missing {
    text-align: center;
    font-size: 0.85rem;
}

/* EVO-072 : comparateur d'accords, 2 diagrammes cote a cote. */
.comparateur-accords-result {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 1.5rem 0;
}

/* EVO-071 : trouveur de gamme, 12 cases a cocher (notes chromatiques). */
.trouveur-gamme-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    border: none;
    padding: 0;
    margin: 1rem 0;
}

.trouveur-gamme-notes legend {
    width: 100%;
    padding: 0;
    margin-bottom: 0.4rem;
    color: var(--ink-mute);
    font-size: 0.85rem;
}

.trouveur-gamme-notes .filter-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    background: var(--card-bg);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0.4rem 0.8rem 0.4rem 0.6rem;
}

.trouveur-gamme-notes .filter-checkbox input {
    width: auto;
    accent-color: var(--accent);
}

.trouveur-gamme-liste {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.trouveur-gamme-liste li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Module pedales d'effets : ordre de reference (statique) + constructeur (interactif). */
.pedales-chain-reference {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 1rem 0 1.8rem;
}

.pedales-chain-step {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    background: var(--card-bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
}

.pedales-chain-step-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    font-size: 0.9rem;
}

.pedales-chain-step p {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-mute);
}

.pedales-chain-step-exemples {
    font-size: 0.82rem !important;
    color: var(--ink-faint) !important;
    font-style: italic;
}

.pedales-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0;
}

.pedales-chip {
    background: var(--card-bg);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pedales-chip:hover, .pedales-chip:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-glow);
}

.pedales-chain-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.pedales-chain-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
}

.pedales-chain-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.pedales-chain-actions button:disabled {
    opacity: 0.35;
    cursor: default;
}

.pedales-reset {
    margin-top: 0.4rem;
}

.pedales-feedback {
    margin-top: 1.5rem;
}

.pedales-avertissement {
    background: var(--card-bg);
    border-left: 3px solid var(--accent2);
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    margin: 0.6rem 0;
    font-size: 0.9rem;
}

.pedales-avertissement span {
    color: var(--ink-mute);
}

.pedales-ok {
    color: var(--accent);
    font-weight: 600;
}

/* EVO-060 : transpositeur de grille. */
.transpose-select-label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--ink-mute);
    max-width: 12rem;
    margin: 0.6rem 0;
}

.transpose-select-label select {
    background: var(--card-bg);
    color: var(--ink-strong);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 0.45rem 0.6rem;
}

/* EVO-058 : visite guidee du carnet. */
.carnet-tour-reopen {
    margin-left: 0.6rem;
    font-size: 0.75rem;
    vertical-align: middle;
}

.carnet-tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 100;
}

.carnet-tour-modal {
    background: var(--card-bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 24rem;
}

.carnet-tour-progress {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.carnet-tour-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 1.2rem;
}

.index-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0.5rem 0 1.4rem;
    font-size: 0.85rem;
}

.index-links a {
    color: var(--ink-mute);
}

.index-links a:hover {
    color: var(--accent);
}

/* EVO-043 : fil d'Ariane, reflete exactement le JSON-LD BreadcrumbList. */
.breadcrumb {
    margin: 0.6rem 0 1rem;
    font-size: 0.8rem;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--ink-faint);
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--ink-faint);
}

.breadcrumb a {
    color: var(--ink-mute);
}

.breadcrumb a:hover {
    color: var(--accent);
}

.breadcrumb [aria-current="page"] {
    color: var(--ink-mute);
}

/* EVO-025/026/030/033 : blocs additionnels de la page carnet. */
.carnet-thematiques {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0 1.4rem;
}

.carnet-shared-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    background: var(--card-bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    margin: 0 0 1.2rem;
}

.carnet-shared-banner p {
    margin: 0;
}

.carnet-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.carnet-item-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.carnet-item-actions button:disabled {
    opacity: 0.35;
    cursor: default;
}

.carnet-share {
    margin: 1.2rem 0;
}

.carnet-share label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--ink-mute);
    font-weight: 600;
    max-width: 32rem;
}

.carnet-share input {
    background: var(--card-bg);
    color: var(--ink-strong);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 0.5rem 0.7rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
}

.carnet-export-all {
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}