#fr-crepes-galettes {
    --crepe-ink: #243d4a;
    --crepe-blue: #2d5868;
    --crepe-paper: #fffaf0;
    --crepe-gold: #c78d32;
    --crepe-line: #d9c7a5;
    color: var(--crepe-ink);
}

#fr-crepes-galettes .crepe-lede,
#fr-crepes-galettes .crepe-note {
    background: var(--crepe-paper);
    border-left: 4px solid var(--crepe-gold);
    border-radius: 0 10px 10px 0;
    padding: 1rem 1.15rem;
}

#fr-crepes-galettes .crepe-board {
    background: linear-gradient(145deg, #fffdf8, #f5ead6);
    border: 1px solid var(--crepe-line);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(36, 61, 74, .1);
    margin: 2rem 0;
    overflow: hidden;
    padding: 1.25rem;
}

#fr-crepes-galettes .crepe-board-header {
    border-bottom: 1px solid var(--crepe-line);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

#fr-crepes-galettes .crepe-kicker {
    color: var(--crepe-blue);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0 0 .35rem;
    text-transform: uppercase;
}

#fr-crepes-galettes .crepe-board h2,
#fr-crepes-galettes .crepe-board h3 {
    color: var(--crepe-ink);
    margin: 0 0 .5rem;
}

#fr-crepes-galettes .crepe-options {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#fr-crepes-galettes .crepe-option {
    background: #fff;
    border: 1px solid var(--crepe-line);
    border-radius: 10px;
    color: var(--crepe-ink);
    cursor: pointer;
    font: inherit;
    padding: .9rem;
    text-align: left;
}

#fr-crepes-galettes .crepe-option:hover,
#fr-crepes-galettes .crepe-option[aria-pressed="true"] {
    border-color: var(--crepe-blue);
    box-shadow: inset 0 0 0 1px var(--crepe-blue);
}

#fr-crepes-galettes .crepe-option:focus-visible,
#fr-crepes-galettes .crepe-audio:focus-visible,
#fr-crepes-galettes .crepe-link:focus-visible {
    outline: 3px solid #d67d22;
    outline-offset: 3px;
}

#fr-crepes-galettes .crepe-option strong,
#fr-crepes-galettes .crepe-option span {
    display: block;
}

#fr-crepes-galettes .crepe-option span {
    font-size: .9rem;
    margin-top: .3rem;
}

#fr-crepes-galettes .crepe-result {
    background: var(--crepe-blue);
    border-radius: 10px;
    color: #fff;
    margin-top: 1rem;
    padding: 1.1rem;
}

#fr-crepes-galettes .crepe-result p {
    margin: .45rem 0;
}

#fr-crepes-galettes .crepe-result [lang="fr"] {
    font-family: Georgia, serif;
    font-size: 1.08rem;
}

#fr-crepes-galettes .crepe-audio {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 5px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    margin-top: .5rem;
    padding: .4rem .6rem;
}

#fr-crepes-galettes .crepe-dialogue {
    border-left: 3px solid var(--crepe-gold);
    margin: 1.25rem 0;
    padding-left: 1rem;
}

#fr-crepes-galettes .crepe-dialogue p {
    margin: .5rem 0;
}

#fr-crepes-galettes .crepe-vocab {
    columns: 2;
    padding-left: 1.25rem;
}

#fr-crepes-galettes .crepe-vocab li {
    break-inside: avoid;
    margin-bottom: .6rem;
}

#fr-crepes-galettes .crepe-source-list {
    padding-left: 1.25rem;
}

@media (max-width: 640px) {
    #fr-crepes-galettes .crepe-options {
        grid-template-columns: 1fr;
    }

    #fr-crepes-galettes .crepe-vocab {
        columns: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #fr-crepes-galettes *,
    #fr-crepes-galettes *::before,
    #fr-crepes-galettes *::after {
        scroll-behavior: auto;
        transition: none;
    }
}