/* ================================================================== */
/* HERBIER : le carnet de naturaliste                                   */
/*                                                                      */
/* Parti pris : l'appli est une planche d'herbier. Papier de            */
/* conservation légèrement vergé, encres végétales (vert de sève,       */
/* sépia, laiton terni), filets fins, hachures de bois gravé sur les    */
/* aplats d'encre. Sobre de loin, riche de près : aucun aplat criard,   */
/* le détail se lit quand on approche l'écran.                          */
/*                                                                      */
/* Règles tenues :                                                      */
/*  - palette dans la famille verte / dorée / parchemin ;               */
/*  - 100 % CSS : aucune image, aucune police externe (pile serif       */
/*    système pour les titres, la sans du socle pour le corps) ;        */
/*  - cibles tactiles portées ou maintenues à 48px, texte jamais réduit */
/*    (les puces de filtre passent même de 33px à 48px de haut) ;       */
/*  - le thème se pose en classe sur .phone-frame : .theme-herbier ;    */
/*  - aucun fichier existant n'est modifié.                             */
/*                                                                      */
/* Pour l'essayer (à faire par l'équipe, non fait ici) : ajouter        */
/* @import './theme-herbier.css'; dans app.css, puis l'entrée           */
/* { key: 'herbier', ... } dans ThemePicker.vue.                        */
/* ================================================================== */

.phone-frame.theme-herbier {
    /* Trois encres sur un papier chaud. Le vert tire sur l'olive : c'est
       la couleur d'une feuille séchée, pas celle d'un feuillage frais.
       Contraste du blanc sur --ygg-primary : environ 7,7:1 (AA partout). */
    --ygg-primary: #35563e;
    --ygg-accent: #b5883c;
    --ygg-bg: #f0ead8;

    /* Variables internes au thème, pour ne pas répéter les valeurs. */
    --herb-papier: #fdfaef;                        /* papier des cartes */
    --herb-encre: #2f3a2e;                         /* encre du texte */
    --herb-encre-claire: rgba(53, 86, 62, 0.30);   /* filets, bordures */
    --herb-filet: rgba(53, 86, 62, 0.55);          /* traits de règle */
    --herb-sepia: #7b6130;                         /* étiquettes, légendes */
    --herb-ombre: rgba(52, 44, 22, 0.55);          /* ombres teintées terre */
    --herb-sombre: #24402f;                        /* creux de l'encre */
    --herb-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino,
        'Book Antiqua', Georgia, 'Times New Roman', serif;

    color: var(--herb-encre);

    /* Le papier : vergeures verticales fines, pontuseaux horizontaux plus
       espacés, quelques fibres, une lumière au centre et des bords un peu
       plus sombres (papier manipulé). Tout est très peu contrasté : la
       texture doit se deviner, jamais gêner la lecture. */
    background-color: var(--ygg-bg);
    background-image:
        radial-gradient(ellipse 130% 100% at 50% 42%, transparent 56%, rgba(96, 78, 44, 0.13) 100%),
        radial-gradient(circle at 18% 26%, rgba(92, 76, 44, 0.055) 0 1.1px, transparent 1.9px),
        radial-gradient(circle at 72% 63%, rgba(92, 76, 44, 0.045) 0 1.3px, transparent 2.1px),
        repeating-linear-gradient(90deg, rgba(53, 86, 62, 0.035) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(0deg, rgba(53, 86, 62, 0.04) 0 1px, transparent 1px 64px),
        radial-gradient(ellipse 120% 95% at 50% 34%, rgba(255, 253, 244, 0.55) 0%, transparent 58%);
    background-size:
        100% 100%,
        41px 37px,
        59px 53px,
        auto,
        auto,
        100% 100%;
}

/* ------------------------------------------------------------------ */
/* Titres : une serif système pour tout ce qui nomme, la sans du socle */
/* reste sur le corps de texte (lisibilité mobile avant tout).         */
/* ------------------------------------------------------------------ */

.theme-herbier h1,
.theme-herbier h2,
.theme-herbier .font-display {
    font-family: var(--herb-serif);
    letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------ */
/* En-tête : bandeau d'encre hachuré, terminé par un bord frangé       */
/* (la lisière d'une feuille de papier déchirée à la main).            */
/* ------------------------------------------------------------------ */

.theme-herbier .app-header {
    position: relative;
    padding-bottom: 20px; /* dégagement pour le bord frangé */
    background-color: var(--ygg-primary);
    background-image:
        /* hachures obliques : le grain du bois gravé */
        repeating-linear-gradient(46deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 6px),
        linear-gradient(180deg, #3f6749 0%, var(--ygg-primary) 62%, #2c4a35 100%);
    box-shadow: 0 3px 10px -6px rgba(40, 50, 30, 0.75);
}

.theme-herbier .app-header .font-display {
    font-size: 17px;
    letter-spacing: 0.03em;
}

/* Le bord déchiré : deux rangées de petites morsures de parchemin dont
   les pas ne tombent pas juste (11px contre 7px). Le décalage permanent
   entre les deux fréquences casse la régularité : l'oeil y lit une
   déchirure à la main, pas un feston. */
.theme-herbier .app-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 9px;
    background:
        radial-gradient(circle 5px at 5px 9px, var(--ygg-bg) 99%, transparent 100%) 0 0 / 11px 9px repeat-x,
        radial-gradient(circle 4px at 4px 9px, var(--ygg-bg) 99%, transparent 100%) 3px 0 / 7px 9px repeat-x;
}

/* ------------------------------------------------------------------ */
/* Cartes blanches : des feuilles posées sur la page                    */
/* ------------------------------------------------------------------ */

/* Papier chaud plutôt que blanc pur, filet d'encre au trait fin, angles
   presque droits (une feuille se coupe droit), ombre teintée de terre
   au lieu du gris neutre. */
.theme-herbier main .bg-white {
    background-color: var(--herb-papier) !important;
    border: 1px solid var(--herb-encre-claire) !important;
    border-radius: 8px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.75),
        0 1px 2px rgba(74, 62, 34, 0.09),
        0 12px 20px -16px rgba(40, 34, 16, 0.9);
}

/* Les blocs arrondis du socle suivent le même angle de coupe. */
.theme-herbier main .rounded-xl,
.theme-herbier main .rounded-2xl {
    border-radius: 8px !important;
}

/* ------------------------------------------------------------------ */
/* Titres de section : l'étiquette d'une planche                        */
/* ------------------------------------------------------------------ */

.theme-herbier .section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--herb-serif);
    font-size: 16px; /* le socle était à 13px : on ne descend jamais sous 16 */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--herb-sepia);
}

/* Petite feuille dessinée au border-radius, en guise de puce. */
.theme-herbier .section-title::before {
    content: '';
    flex-shrink: 0;
    width: 11px;
    height: 15px;
    background: var(--ygg-primary);
    border-radius: 12px 0 12px 0;
    transform: rotate(-12deg);
}

/* Sur un écran étroit (320px), on resserre l'interlettrage plutôt que de
   rapetisser le texte : le corps reste à 16px, la ligne tient. */
@media (max-width: 380px) {
    .theme-herbier .section-title {
        gap: 7px;
        letter-spacing: 0.05em;
    }
}

/* Double filet qui s'efface vers la droite : la ligne de légende. */
.theme-herbier .section-title::after {
    content: '';
    flex: 1;
    height: 3px;
    background:
        linear-gradient(90deg, var(--herb-filet), transparent) 0 0 / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(181, 136, 60, 0.65), transparent) 0 2px / 100% 1px no-repeat;
}

/* ------------------------------------------------------------------ */
/* Puces de filtre : les étiquettes collées sur la planche              */
/* ------------------------------------------------------------------ */

/* Coins à peine adoucis (papier collé), et surtout : 48px de haut, là où
   le socle plafonnait à environ 33px. Le confort du pouce prime sur le
   dessin. */
.theme-herbier .chip {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 5px;
    border: 1px solid var(--herb-encre-claire);
    background-color: var(--herb-papier);
    font-family: var(--herb-serif);
    font-size: 16px;
    font-weight: 600;
    color: #3b4a37;
    box-shadow: 0 1px 0 rgba(74, 62, 34, 0.10);
}

.theme-herbier .chip-active {
    background-color: var(--ygg-primary);
    border-color: var(--herb-sombre);
    color: var(--herb-papier);
    /* fin liseré de laiton, comme une étiquette encadrée à la plume */
    box-shadow: inset 0 0 0 1px rgba(224, 198, 140, 0.45);
}

/* ------------------------------------------------------------------ */
/* Bouton principal : un bloc d'encre pressé dans le papier             */
/* ------------------------------------------------------------------ */

.theme-herbier .btn-primary {
    min-height: 52px;
    border-radius: 8px;
    font-size: 16px;
    letter-spacing: 0.01em;
    background-color: var(--ygg-primary);
    background-image:
        repeating-linear-gradient(46deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 6px),
        linear-gradient(180deg, #3f6749, #2d4b36);
    box-shadow:
        inset 0 0 0 1px rgba(224, 198, 140, 0.35),
        0 2px 0 var(--herb-sombre),
        0 8px 14px -10px rgba(40, 50, 30, 0.9);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* À l'appui, le bloc s'enfonce dans la page. */
.theme-herbier .btn-primary:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 0 0 1px rgba(224, 198, 140, 0.35),
        0 0 0 var(--herb-sombre);
}

/* ------------------------------------------------------------------ */
/* Barre du bas : le bas de page du carnet                              */
/* ------------------------------------------------------------------ */

.theme-herbier .bottom-nav {
    background-color: var(--herb-papier);
    border-top: 1px solid var(--herb-filet);
    /* second filet de laiton, 2px sous le premier */
    box-shadow:
        inset 0 3px 0 -2px rgba(181, 136, 60, 0.6),
        0 -10px 18px -16px rgba(52, 44, 22, 0.8);
}

.theme-herbier .nav-tab {
    position: relative;
    font-family: var(--herb-serif);
    color: #8b8674;
}

.theme-herbier .nav-tab span {
    /* le socle est à 11px : on remonte un peu sans casser la grille à
       5 onglets, qui interdit d'aller jusqu'à 16px sur cette barre */
    font-size: 12px;
    letter-spacing: 0.02em;
}

.theme-herbier .nav-tab-active {
    color: var(--ygg-primary);
}

/* Onglet courant marqué comme un signet glissé en haut de page. */
.theme-herbier .nav-tab-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24%;
    right: 24%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--ygg-accent);
}

/* ------------------------------------------------------------------ */
/* Bouton SCAN : la loupe de terrain, laiton et encre hachurée          */
/* ------------------------------------------------------------------ */

.theme-herbier .scan-button {
    background-color: var(--ygg-primary);
    background-image:
        repeating-linear-gradient(42deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 5px),
        radial-gradient(circle at 34% 26%, #4c7458 0%, var(--ygg-primary) 58%, var(--herb-sombre) 100%);
    /* cerne de papier puis anneau de laiton : le geste unique du
       rassemblement mérite d'être serti */
    border: 3px solid var(--herb-papier);
    box-shadow:
        0 0 0 2px var(--ygg-accent),
        0 7px 14px -5px rgba(46, 56, 32, 0.6);
}

/* ------------------------------------------------------------------ */
/* Feuille montante : une page qu'on relève                             */
/* ------------------------------------------------------------------ */

/* Le filet doré et la poignée sont dessinés en fond : ils restent en
   place même quand la feuille défile (les sheets sont scrollables). */
.theme-herbier .sheet {
    padding-top: 28px;
    border-radius: 10px 10px 0 0;
    background-color: var(--herb-papier);
    background-image:
        radial-gradient(ellipse 20px 3px at 50% 13px, var(--herb-encre-claire) 0 99%, transparent 100%),
        linear-gradient(90deg, transparent, rgba(181, 136, 60, 0.7) 12%, rgba(181, 136, 60, 0.7) 88%, transparent);
    background-size: 100% 100%, 100% 2px;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0 -14px 30px -16px rgba(30, 36, 22, 0.8);
    color: var(--herb-encre);
}

/* Voile d'encre plutôt que noir pur derrière la feuille. */
.theme-herbier .sheet-backdrop {
    background: rgba(36, 44, 28, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

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

/* L'affiche : montée sous passe-partout, filet d'encre au bord de la
   plaque. */
.theme-herbier .poster-frame {
    border: 7px solid var(--herb-papier);
    border-radius: 3px;
    outline: 1px solid var(--herb-encre-claire);
    outline-offset: -7px;
    box-shadow:
        0 1px 0 rgba(74, 62, 34, 0.15),
        0 16px 26px -20px rgba(40, 34, 16, 0.95);
}

/* La collection : chaque carte est un spécimen monté sur la page, tenu
   par quatre coins de montage en papier sombre. L'arrondi n'est pas
   touché : il vient de --carte-radius, qui garde le même galbe qu'une
   vraie carte à jouer, de la vignette au plein écran. */
.theme-herbier .collection-card {
    box-shadow:
        0 1px 0 rgba(74, 62, 34, 0.25),
        0 10px 16px -12px rgba(40, 34, 16, 0.9);
}

.theme-herbier .collection-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(48, 40, 22, 0.5) 0 9px, transparent 9px) left top / 13px 13px no-repeat,
        linear-gradient(225deg, rgba(48, 40, 22, 0.5) 0 9px, transparent 9px) right top / 13px 13px no-repeat,
        linear-gradient(45deg, rgba(48, 40, 22, 0.5) 0 9px, transparent 9px) left bottom / 13px 13px no-repeat,
        linear-gradient(315deg, rgba(48, 40, 22, 0.5) 0 9px, transparent 9px) right bottom / 13px 13px no-repeat;
}

/* Carte manquante : un spécimen fané, viré sépia, qui appelle sa
   place. Le grand ? doré du socle reste parfaitement lisible. */
.theme-herbier .collection-card-locked img {
    filter: brightness(0.82) sepia(0.4) saturate(0.7);
}

/* Épingles d'entomologiste sur le plan : tête laquée, ombre courte. */
.theme-herbier .map-pin {
    border-color: var(--herb-papier);
    box-shadow:
        0 2px 5px rgba(40, 34, 16, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.45);
}

/* Fenêtre de visée du scanner : cadre de loupe, repère de laiton. */
.theme-herbier .scan-window {
    border-radius: 8px;
    border-color: rgba(253, 250, 239, 0.85);
    outline: 2px solid rgba(181, 136, 60, 0.9);
    outline-offset: 6px;
    box-shadow: 0 0 0 9999px rgba(28, 34, 20, 0.55);
}

/* Didacticiel : la même page de papier, pour ne pas rompre le récit. */
.theme-herbier .onboarding {
    background-color: var(--ygg-bg);
    background-image:
        repeating-linear-gradient(90deg, rgba(53, 86, 62, 0.03) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(0deg, rgba(53, 86, 62, 0.045) 0 1px, transparent 1px 38px),
        radial-gradient(ellipse 120% 95% at 50% 30%, rgba(255, 253, 244, 0.6) 0%, transparent 60%);
}

.theme-herbier .onboarding-skip {
    color: var(--herb-sepia);
}

/* Médaillon d'encre serti de laiton, comme un cachet de collection. */
.theme-herbier .onboarding-icon {
    background-color: var(--ygg-primary);
    background-image:
        repeating-linear-gradient(42deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 5px),
        radial-gradient(circle at 34% 26%, #4c7458 0%, var(--ygg-primary) 60%, var(--herb-sombre) 100%);
    box-shadow:
        0 0 0 3px var(--herb-papier),
        0 0 0 4px rgba(181, 136, 60, 0.8),
        0 10px 20px -12px rgba(40, 34, 16, 0.9);
}