/* ================================================================== */
/* THÈME VITRAIL : lumière colorée                                     */
/*                                                                     */
/* Parti pris : l'appli se regarde comme une verrière. Des verres       */
/* colorés cernés de plomb sombre, une lumière qui les traverse et      */
/* vient poser des taches de couleur sur le parchemin de la page.       */
/* Graphique et contrasté, festif sans être criard.                     */
/*                                                                     */
/* Trois règles de conduite tenues d'un bout à l'autre :                */
/*  1. Le plomb (trait sombre) cerne tout ce qui se touche : cartes,    */
/*     pastilles, boutons. C'est lui qui donne la lisibilité, la        */
/*     couleur n'est que du remplissage.                                */
/*  2. Les verres colorés ne passent jamais derrière un texte de        */
/*     lecture : ils habillent l'en-tête, les bordures, les frises et   */
/*     les panneaux à texte blanc, jamais le corps des fiches.          */
/*  3. Le fond reste un parchemin clair pour rester lisible en plein    */
/*     soleil : les taches de lumière restent sous les 0,16 d'opacité.  */
/*                                                                     */
/* Uniquement du CSS : aucune image, aucune police externe.             */
/* Le thème se pose en classe sur .phone-frame, comme les autres.       */
/*                                                                     */
/* Pour l'activer : importer ce fichier depuis app.css et ajouter       */
/* { key: 'vitrail', ... } à la liste de ThemePicker.vue.               */
/* ================================================================== */

.theme-vitrail {
    /* Famille verte, dorée, parchemin : le trio de l'appli */
    --ygg-primary: #14603f; /* verre vert profond, blanc dessus à 7,5:1 */
    --ygg-accent: #dda520;  /* verre doré, la lumière du vitrail */
    --ygg-bg: #f5efdd;      /* parchemin éclairé */

    /* Le plomb : le trait sombre qui cerne chaque verre */
    --vit-plomb: #16241d;
    --vit-plomb-doux: rgba(22, 36, 29, 0.8);

    /* Éclats secondaires, en petite quantité : bleus et violets pour la
       profondeur, un rubis très discret pour la chaleur */
    --vit-bleu: #2d5fa6;
    --vit-azur: #4a8fc9;
    --vit-violet: #6b4a9e;
    --vit-rubis: #b34a35;

    /* Verre laiteux : un blanc chaud, moins clinique que le blanc pur */
    --vit-verre: #fffdf7;
    --vit-verre-ombre: #f7f1e0;
}

/* Le sol de la verrière : parchemin sur lequel se posent quatre taches
   de lumière colorée. Sélecteur doublé (.phone-frame.theme-vitrail) pour
   passer devant le fond uni de .phone-frame quel que soit l'ordre des
   imports. */
.phone-frame.theme-vitrail {
    background-color: var(--ygg-bg);
    background-image:
        radial-gradient(70% 40% at 6% 6%, rgba(74, 143, 201, 0.11) 0%, transparent 62%),
        radial-gradient(62% 38% at 97% 16%, rgba(221, 165, 32, 0.16) 0%, transparent 60%),
        radial-gradient(85% 45% at 52% 106%, rgba(107, 74, 158, 0.12) 0%, transparent 62%),
        radial-gradient(90% 50% at 28% 58%, rgba(20, 96, 63, 0.07) 0%, transparent 65%);
    background-attachment: scroll;
}

/* ------------------------------------------------------------------ */
/* En-tête : la verrière elle-même                                      */
/* ------------------------------------------------------------------ */

.theme-vitrail .app-header {
    position: relative;
    overflow: hidden;
    padding: 14px 16px;
    background-color: var(--ygg-primary);
    /* Le plomb qui ferme la verrière en bas */
    border-bottom: 3px solid var(--vit-plomb);
    box-shadow: 0 6px 18px -8px rgba(20, 96, 63, 0.65);
}

/* Les verres et leurs plombs, en couches superposées.
   L'éventail coloré est ancré sous le bord bas : le côté gauche, où vit
   le titre, reste sombre et le texte blanc garde son contraste. */
.theme-vitrail .app-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        /* 1. les plombs : deux réseaux croisés découpent des panneaux irréguliers */
        repeating-linear-gradient(66deg, rgba(22, 36, 29, 0.5) 0 2px, transparent 2px 58px),
        repeating-linear-gradient(-34deg, rgba(22, 36, 29, 0.34) 0 2px, transparent 2px 76px),
        /* 2. voile sombre côté titre : garantit la lisibilité du texte blanc */
        linear-gradient(100deg, rgba(9, 38, 25, 0.62) 0%, rgba(9, 38, 25, 0.2) 52%, transparent 78%),
        /* 3. la lumière derrière le verre, en bas à droite */
        radial-gradient(85% 130% at 86% 125%, rgba(255, 245, 214, 0.3) 0%, transparent 62%),
        /* 4. l'éventail de verres colorés */
        conic-gradient(
            from 196deg at 14% 138%,
            rgba(221, 165, 32, 0.34) 0deg 21deg,
            rgba(74, 143, 201, 0.3) 21deg 44deg,
            rgba(107, 74, 158, 0.28) 44deg 66deg,
            rgba(179, 74, 53, 0.2) 66deg 84deg,
            transparent 84deg 360deg
        );
}

/* La lumière qui traverse : un balayage très lent, presque imperceptible */
.theme-vitrail .app-header::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 247, 220, 0.2) 50%, transparent 100%);
    animation: vitrail-lumiere 16s ease-in-out infinite alternate;
}

@keyframes vitrail-lumiere {
    from { transform: translateX(0); }
    to { transform: translateX(190%); }
}

/* Le titre passe au-dessus des verres, avec une ombre portée courte qui
   le détache quelle que soit la couleur derrière */
.theme-vitrail .app-header > * {
    position: relative;
    z-index: 1;
}

.theme-vitrail .app-header .font-display {
    letter-spacing: 0.02em;
    text-shadow: 0 1px 3px rgba(6, 26, 17, 0.55);
}

.theme-vitrail .app-header svg {
    filter: drop-shadow(0 1px 2px rgba(6, 26, 17, 0.55));
}

/* La lumière du vitrail déborde en haut de la page, comme une tache
   projetée juste sous la verrière */
.theme-vitrail .app-main {
    background-image: linear-gradient(180deg, rgba(221, 165, 32, 0.14) 0%, transparent 110px);
}

/* Barre de filtres collante : un plomb la sépare du contenu */
.theme-vitrail main .sticky {
    border-bottom: 2px solid var(--vit-plomb) !important;
    box-shadow: 0 8px 14px -14px rgba(22, 36, 29, 0.9);
}

/* ------------------------------------------------------------------ */
/* Barre du bas : le bord inférieur de la verrière                      */
/* ------------------------------------------------------------------ */

.theme-vitrail .bottom-nav {
    position: relative;
    background: linear-gradient(180deg, var(--vit-verre) 0%, var(--vit-verre-ombre) 100%);
    border-top: 3px solid var(--vit-plomb);
}

/* Frise de verres colorés juste sous le plomb : la signature du thème,
   5px suffisent pour la lire sans manger de place utile */
.theme-vitrail .bottom-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        var(--ygg-primary) 0 32px, var(--vit-plomb) 32px 34px,
        var(--ygg-accent) 34px 58px, var(--vit-plomb) 58px 60px,
        var(--vit-bleu) 60px 82px, var(--vit-plomb) 82px 84px,
        var(--vit-violet) 84px 106px, var(--vit-plomb) 106px 108px,
        var(--vit-rubis) 108px 126px, var(--vit-plomb) 126px 128px
    );
}

/* Onglets : cible tactile inchangée (56px), mais gris plus sombre que
   l'original pour tenir en plein soleil */
.theme-vitrail .nav-tab {
    color: #6d6759;
    padding-top: 5px; /* laisse respirer la frise */
}

.theme-vitrail .nav-tab span {
    font-size: 12px;
    letter-spacing: 0.01em;
}

/* L'onglet actif : le panneau allumé, barre dorée en tête */
.theme-vitrail .nav-tab-active {
    color: var(--ygg-primary);
    background: linear-gradient(180deg, rgba(221, 165, 32, 0.2) 0%, transparent 72%);
    box-shadow: inset 0 3px 0 var(--ygg-accent);
}

.theme-vitrail .nav-tab-active svg {
    filter: drop-shadow(0 0 7px rgba(221, 165, 32, 0.55));
}

/* ------------------------------------------------------------------ */
/* Bouton SCAN : le cabochon, la pièce de verre bombée au centre        */
/* ------------------------------------------------------------------ */

.theme-vitrail .scan-button {
    background:
        radial-gradient(circle at 33% 25%, rgba(255, 255, 255, 0.5) 0%, transparent 44%),
        conic-gradient(from 140deg, #1c7d52, var(--ygg-primary) 34%, #0e492f 62%, #1c7d52 100%);
    /* Plomb épais, puis anneau doré : le verre est serti */
    border: 4px solid var(--vit-plomb);
    box-shadow:
        0 0 0 3px var(--ygg-accent),
        0 8px 20px -6px rgba(20, 96, 63, 0.75),
        inset 0 -6px 14px rgba(0, 0, 0, 0.3);
}

.theme-vitrail .scan-button:active {
    box-shadow:
        0 0 0 3px var(--ygg-accent),
        0 3px 10px -4px rgba(20, 96, 63, 0.8),
        inset 0 -4px 12px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------------ */
/* Pastilles de filtre : de petits verres taillés                       */
/* ------------------------------------------------------------------ */

.theme-vitrail .chip {
    display: inline-flex;
    align-items: center;
    /* Cible tactile portée à 48px et texte à 16px : on gagne en confort
       ce qu'on perd en compacité, la barre reste défilante */
    min-height: 48px;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 600;
    /* Facette anguleuse plutôt que pastille : le verre est taillé, pas fondu */
    border-radius: 11px;
    border: 2px solid var(--vit-plomb-doux);
    background: linear-gradient(155deg, var(--vit-verre) 0%, var(--vit-verre-ombre) 100%);
    color: #23372c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Le filtre actif : le verre s'allume, cerné de plomb et doublé d'or */
.theme-vitrail .chip-active {
    background: linear-gradient(155deg, #1c7d52 0%, #0e492f 100%);
    border-color: var(--vit-plomb);
    color: #fff;
    box-shadow:
        inset 0 0 0 1.5px rgba(221, 165, 32, 0.85),
        0 3px 10px -4px rgba(20, 96, 63, 0.8);
}

/* ------------------------------------------------------------------ */
/* Titres de section : un plomb serti de verres colorés prolonge le mot */
/* ------------------------------------------------------------------ */

.theme-vitrail .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Remonté à 16px : un intitulé de section se lit debout, au soleil */
    font-size: 16px;
    letter-spacing: 0.08em;
    color: #274435;
}

.theme-vitrail .section-title::after {
    content: '';
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--ygg-primary) 0 18px, var(--vit-plomb) 18px 20px,
        var(--ygg-accent) 20px 34px, var(--vit-plomb) 34px 36px,
        var(--vit-bleu) 36px 48px, var(--vit-plomb) 48px 50px,
        var(--vit-violet) 50px 62px, var(--vit-plomb) 62px 64px
    );
    opacity: 0.85;
}

/* ------------------------------------------------------------------ */
/* Bouton principal : un panneau de verre allumé par en dessous          */
/* ------------------------------------------------------------------ */

.theme-vitrail .btn-primary {
    min-height: 52px;
    padding: 15px 16px;
    font-size: 17px;
    letter-spacing: 0.01em;
    border: 2px solid var(--vit-plomb);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 46%),
        linear-gradient(135deg, #1c7d52 0%, var(--ygg-primary) 55%, #0e492f 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 247, 220, 0.32),
        0 6px 16px -8px rgba(20, 96, 63, 0.85);
}

.theme-vitrail .btn-primary:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 247, 220, 0.32),
        0 2px 8px -6px rgba(20, 96, 63, 0.85);
}

.theme-vitrail .btn-primary:disabled {
    opacity: 0.55;
    filter: saturate(0.55);
}

/* ------------------------------------------------------------------ */
/* Cartes blanches : des verres laiteux cernés de plomb                 */
/* ------------------------------------------------------------------ */

.theme-vitrail main .bg-white {
    /* Le plomb fin fait le cadre, l'ombre reste discrète */
    border: 1.5px solid var(--vit-plomb-doux) !important;
    border-radius: 12px !important;
    background-color: var(--vit-verre) !important;
    /* Deux reflets colorés très faibles : le verre attrape la lumière
       sans jamais passer sous le texte */
    background-image:
        linear-gradient(150deg, rgba(221, 165, 32, 0.1) 0%, transparent 40%),
        linear-gradient(320deg, rgba(74, 143, 201, 0.09) 0%, transparent 36%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 0 rgba(22, 36, 29, 0.07),
        0 10px 20px -14px rgba(22, 36, 29, 0.6);
}

/* Le champ de recherche est une carte blanche lui aussi : on lui rend
   sa hauteur de doigt */
.theme-vitrail main input[type='search'] {
    min-height: 48px;
    font-size: 16px;
}

/* Grands panneaux verts (compte à rebours, remerciement) : la verrière
   en grand format, avec plombs croisés et deux verres colorés */
.theme-vitrail main [class*="bg-[var(--ygg-primary)]"] {
    position: relative;
    border: 2px solid var(--vit-plomb);
    background-image:
        repeating-linear-gradient(64deg, rgba(22, 36, 29, 0.45) 0 2px, transparent 2px 62px),
        repeating-linear-gradient(-36deg, rgba(22, 36, 29, 0.3) 0 2px, transparent 2px 78px),
        radial-gradient(110% 130% at 10% 122%, rgba(221, 165, 32, 0.3) 0%, transparent 58%),
        radial-gradient(90% 120% at 94% -22%, rgba(74, 143, 201, 0.26) 0%, transparent 55%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 247, 220, 0.26),
        0 12px 24px -16px rgba(20, 96, 63, 0.9);
}

/* Panneau doré des Quêtes : un verre ambré, serti comme les autres */
.theme-vitrail main [class*="bg-[var(--ygg-accent)]"] {
    border: 2px solid var(--vit-plomb-doux);
    background-image:
        linear-gradient(150deg, rgba(255, 255, 255, 0.55) 0%, transparent 45%),
        radial-gradient(80% 120% at 92% 120%, rgba(179, 74, 53, 0.14) 0%, transparent 60%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ------------------------------------------------------------------ */
/* Feuille montante : une verrière qui remonte du bas                   */
/* ------------------------------------------------------------------ */

/* Nuit bleutée derrière le vitrail plutôt qu'un noir neutre */
.theme-vitrail .sheet-backdrop {
    background: rgba(15, 24, 42, 0.58);
}

.theme-vitrail .sheet {
    position: relative;
    background: var(--vit-verre);
    border-top: 3px solid var(--vit-plomb);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 30px -14px rgba(22, 36, 29, 0.6);
}

/* Frise colorée en tête de feuille : on retrouve le motif de la barre du
   bas, c'est le même vitrail vu d'un autre côté */
.theme-vitrail .sheet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 15px 15px 0 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        var(--ygg-primary) 0 32px, var(--vit-plomb) 32px 34px,
        var(--ygg-accent) 34px 58px, var(--vit-plomb) 58px 60px,
        var(--vit-bleu) 60px 82px, var(--vit-plomb) 82px 84px,
        var(--vit-violet) 84px 106px, var(--vit-plomb) 106px 108px
    );
}

/* ------------------------------------------------------------------ */
/* Touches propres à la direction                                       */
/* ------------------------------------------------------------------ */

/* L'affiche : sertie de plomb et doublée d'un filet doré */
.theme-vitrail .poster-frame {
    border: 3px solid var(--vit-plomb);
    border-radius: 10px;
    box-shadow:
        0 0 0 2px rgba(221, 165, 32, 0.55),
        0 14px 26px -16px rgba(22, 36, 29, 0.8);
}

/* Cartes à collectionner : chaque carte est un verre du vitrail */
.theme-vitrail .collection-card {
    border: 2px solid var(--vit-plomb);
    border-radius: 10px;
    box-shadow: 0 4px 10px -4px rgba(22, 36, 29, 0.6);
}

/* Les manquantes : verre dépoli, on devine la lumière sans la couleur */
.theme-vitrail .collection-card-locked img {
    filter: brightness(0.78) saturate(0.65);
}

/* Viseur du scanner : une lucarne cernée d'or.
   L'immense ombre portée est conservée, c'est elle qui assombrit tout
   ce qui entoure la fenêtre de visée. */
.theme-vitrail .scan-window {
    border: 3px solid rgba(255, 247, 220, 0.95);
    border-radius: 18px;
    box-shadow:
        0 0 0 9999px rgba(10, 16, 28, 0.55),
        inset 0 0 24px rgba(221, 165, 32, 0.35);
}

/* Points du plan : sertis de plomb, ils tiennent sur un fond clair */
.theme-vitrail .map-pin {
    box-shadow:
        0 0 0 1.5px var(--vit-plomb),
        0 2px 6px rgba(22, 36, 29, 0.5);
}

/* Didacticiel : même sol de lumière que le reste de l'appli */
.theme-vitrail .onboarding {
    background-color: var(--ygg-bg);
    background-image:
        radial-gradient(70% 40% at 8% 6%, rgba(74, 143, 201, 0.12) 0%, transparent 62%),
        radial-gradient(65% 38% at 95% 16%, rgba(221, 165, 32, 0.17) 0%, transparent 60%),
        radial-gradient(85% 45% at 50% 104%, rgba(107, 74, 158, 0.12) 0%, transparent 62%);
}

/* Médaillon du didacticiel : une rosace, plombs rayonnants et verres */
.theme-vitrail .onboarding-icon {
    border: 3px solid var(--vit-plomb);
    background:
        repeating-conic-gradient(from 0deg, rgba(22, 36, 29, 0.42) 0deg 2deg, transparent 2deg 45deg),
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.45) 0%, transparent 46%),
        conic-gradient(
            from 30deg,
            #1c7d52 0deg 72deg,
            #157a5f 72deg 144deg,
            #2d5fa6 144deg 216deg,
            #6b4a9e 216deg 288deg,
            #dda520 288deg 360deg
        );
    box-shadow:
        0 0 0 3px rgba(221, 165, 32, 0.6),
        0 10px 24px -10px rgba(22, 36, 29, 0.8);
}

.theme-vitrail .onboarding-skip {
    color: #4c5b50;
}

/* Liens et accents secondaires du corps de page */
.theme-vitrail .onboarding-icon svg {
    filter: drop-shadow(0 1px 3px rgba(6, 26, 17, 0.6));
}

/* ------------------------------------------------------------------ */
/* Confort et accessibilité                                             */
/* ------------------------------------------------------------------ */

/* Le balayage de lumière est un agrément, jamais une information :
   il disparaît dès que l'appareil demande moins d'animations */
@media (prefers-reduced-motion: reduce) {
    .theme-vitrail .app-header::after {
        animation: none;
        opacity: 0.5;
    }
}

/* Quand l'appareil demande plus de contraste (plein soleil, vision
   basse), on éteint les verres décoratifs et on ne garde que les
   plombs : le thème reste reconnaissable, la lecture passe devant */
@media (prefers-contrast: more) {
    .phone-frame.theme-vitrail {
        background-image: none;
    }

    .theme-vitrail .app-header::before,
    .theme-vitrail .app-header::after,
    .theme-vitrail .app-main {
        background-image: none;
    }

    .theme-vitrail main .bg-white {
        border-color: var(--vit-plomb) !important;
        background-image: none;
    }

    .theme-vitrail .chip {
        border-color: var(--vit-plomb);
        color: #16241d;
    }

    .theme-vitrail .nav-tab {
        color: #4a4639;
    }
}