/* ------------------------------------------------------------------ */
/* Thèmes à l'essai                                                     */
/*                                                                      */
/* Quatre habillages dans la même famille de couleurs (vert, or,        */
/* parchemin), du plus sobre au plus festif. Chacun se pose en classe   */
/* sur .phone-frame et ne touche qu'à l'habillage : structure, tailles  */
/* de cibles tactiles et lisibilité restent identiques.                 */
/*                                                                      */
/* Sans classe : thème d'origine, couleurs pilotées par l'édition.      */
/* ------------------------------------------------------------------ */

/* ================================================================== */
/* 1. PRAIRIE : pastoral et doux, collines et lumière de fin d'après-midi */
/* ================================================================== */

.phone-frame.theme-prairie {
    --ygg-primary: #4a7c59;
    --ygg-accent: #d9a441;
    --ygg-bg: #f6f0dd;
    background:
        radial-gradient(ellipse 120% 60% at 50% 0%, rgba(217, 164, 65, 0.13) 0%, transparent 60%),
        var(--ygg-bg);
}

/* En-tête aux courbes de collines */
.theme-prairie .app-header {
    background: linear-gradient(160deg, #5b9068 0%, var(--ygg-primary) 100%);
    border-radius: 0 0 26px 26px;
    padding-bottom: 18px;
}

.theme-prairie .card,
.theme-prairie .sheet,
.theme-prairie main > div > div,
.theme-prairie .rounded-xl,
.theme-prairie .rounded-2xl {
    border-radius: 18px;
}

.theme-prairie .chip {
    border-color: #cbbf9a;
    background: #fffdf5;
}

.theme-prairie .bottom-nav {
    background: #fffdf5;
    border-top: 1px solid #e3d9bd;
}

.theme-prairie .scan-button {
    background: linear-gradient(160deg, #5b9068, var(--ygg-primary));
    border-color: #fffdf5;
    box-shadow: 0 5px 16px rgba(74, 124, 89, 0.4);
}

.theme-prairie .section-title {
    color: #6b7a53;
}

/* ================================================================== */
/* 2. LANTERNE : franc et graphique, contours nets, ombres portées     */
/*    dures, esprit jeu d'aventure en pixels                           */
/* ================================================================== */

.phone-frame.theme-lanterne {
    --ygg-primary: #17643f;
    --ygg-accent: #f2c14e;
    --ygg-bg: #efe7cf;
    background: var(--ygg-bg);
    /* Trame régulière, comme un fond de carte quadrillé */
    background-image:
        linear-gradient(rgba(23, 100, 63, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 100, 63, 0.045) 1px, transparent 1px);
    background-size: 18px 18px;
}

.theme-lanterne .app-header {
    background: var(--ygg-primary);
    border-bottom: 3px solid #0d3b26;
}

/* Bordures franches et ombres sans flou : le trait fait le décor */
.theme-lanterne .chip,
.theme-lanterne .sheet,
.theme-lanterne .collection-card,
.theme-lanterne main .bg-white,
.theme-lanterne main .rounded-xl,
.theme-lanterne main .rounded-2xl {
    border: 2px solid #0d3b26 !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 rgba(13, 59, 38, 0.9);
}

.theme-lanterne .chip-active {
    background: var(--ygg-primary);
    box-shadow: 2px 2px 0 rgba(13, 59, 38, 0.9);
}

.theme-lanterne .btn-primary {
    border: 2px solid #0d3b26;
    border-radius: 8px;
    box-shadow: 3px 3px 0 rgba(13, 59, 38, 0.9);
}

.theme-lanterne .btn-primary:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 rgba(13, 59, 38, 0.9);
}

.theme-lanterne .bottom-nav {
    background: #fffdf3;
    border-top: 3px solid #0d3b26;
}

.theme-lanterne .scan-button {
    border: 3px solid #0d3b26;
    box-shadow: 0 4px 0 #0d3b26;
}

.theme-lanterne .section-title {
    letter-spacing: 0.1em;
}

/* ================================================================== */
/* 3. ENLUMINURE : page de grimoire, filets dorés et lettrines         */
/* ================================================================== */

.phone-frame.theme-enluminure {
    --ygg-primary: #1f5138;
    --ygg-accent: #c9a227;
    --ygg-bg: #f1e7cd;
    background:
        radial-gradient(ellipse at 50% 10%, rgba(255, 253, 245, 0.7) 0%, transparent 55%),
        var(--ygg-bg);
}

.theme-enluminure .app-header {
    background: var(--ygg-primary);
    border-bottom: 2px solid var(--ygg-accent);
    box-shadow: inset 0 -5px 0 rgba(201, 162, 39, 0.22);
}

.theme-enluminure h1,
.theme-enluminure h2,
.theme-enluminure .font-display,
.theme-enluminure .app-header span {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0.01em;
}

/* Double filet doré, comme un encadrement de page */
.theme-enluminure main .bg-white,
.theme-enluminure .sheet {
    border: 1px solid #d9c58a !important;
    box-shadow: inset 0 0 0 3px rgba(255, 253, 245, 0.9), 0 1px 3px rgba(80, 60, 20, 0.1);
}

/* Ornement de chapitre */
.theme-enluminure .section-title {
    font-family: Georgia, serif;
    color: #6b5a2a;
}

.theme-enluminure .section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--ygg-accent), transparent);
}

.theme-enluminure .chip {
    border-color: #d9c58a;
    background: #fffdf5;
}

.theme-enluminure .bottom-nav {
    background: #fffdf5;
    border-top: 2px solid var(--ygg-accent);
}

.theme-enluminure .scan-button {
    border-color: var(--ygg-accent);
    box-shadow: 0 0 0 3px var(--ygg-bg), 0 4px 12px rgba(80, 60, 20, 0.3);
}

/* ================================================================== */
/* 4. GUINGUETTE : jour de fête, fanions et guirlandes                 */
/* ================================================================== */

.phone-frame.theme-guinguette {
    --ygg-primary: #2f7d52;
    --ygg-accent: #e8973a;
    --ygg-bg: #fdf6e3;
    background: var(--ygg-bg);
}

.theme-guinguette .app-header {
    position: relative;
    background: linear-gradient(120deg, var(--ygg-primary) 0%, #3e9163 100%);
    padding-bottom: 20px;
}

/* Rangée de fanions sous l'en-tête */
.theme-guinguette .app-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 13px;
    background:
        linear-gradient(135deg, var(--ygg-accent) 50%, transparent 50%) 0 0 / 22px 13px repeat-x;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

.theme-guinguette main {
    padding-top: 8px;
}

.theme-guinguette main .bg-white,
.theme-guinguette .sheet {
    border-color: #f0e2c0 !important;
    box-shadow: 0 2px 10px rgba(180, 130, 50, 0.13);
}

.theme-guinguette .chip {
    border-color: #e9d9b4;
    background: #fffdf7;
}

.theme-guinguette .chip-active {
    background: var(--ygg-accent);
    border-color: var(--ygg-accent);
    color: #4a2f0c;
}

.theme-guinguette .section-title {
    color: #a86a20;
}

.theme-guinguette .bottom-nav {
    background: #fffdf7;
    border-top: 2px solid var(--ygg-accent);
}

.theme-guinguette .scan-button {
    background: linear-gradient(160deg, #3e9163, var(--ygg-primary));
    border: 3px solid var(--ygg-accent);
    box-shadow: 0 5px 14px rgba(232, 151, 58, 0.45);
}

.theme-guinguette .btn-primary {
    background: linear-gradient(120deg, var(--ygg-primary), #3e9163);
}