/* ==================================================================== */
/* THEME "CARTE D'EXPLORATEUR"                                          */
/*                                                                      */
/* L'appli devient le carnet de route d'un explorateur : parchemin,     */
/* courbes de niveau, cordage, bois clair, tampons d'encre, et une      */
/* boussole au centre de la barre du bas. Chaleureux, ludique, tres     */
/* graphique, sans citer aucune oeuvre existante.                       */
/*                                                                      */
/* Regles suivies :                                                     */
/*  - palette verte / doree / parchemin, pilotee par --ygg-primary,     */
/*    --ygg-accent et --ygg-bg comme les autres habillages ;            */
/*  - 100 % CSS : aucun fichier image, aucune police distante. Tous     */
/*    les motifs (courbes de niveau, cordage, bois, rose des vents)     */
/*    sont des degrades. Les titres passent en serif systeme ;          */
/*  - cibles tactiles >= 48px, aucune taille de texte revue a la        */
/*    baisse (au contraire : chips 13 -> 15px, onglets 11 -> 12px,      */
/*    champs de saisie a 16px pour eviter le zoom automatique iOS) ;    */
/*  - habillage seulement : ni structure, ni positionnement modifies.   */
/*                                                                      */
/* Activation (aucun fichier existant n'a ete touche) :                 */
/*  1. dans app.css, ajouter apres l'import des themes :                */
/*        @import './theme-explorateur.css';                            */
/*  2. dans components/ThemePicker.vue, ajouter a la liste :            */
/*        { key: 'explorateur', name: 'Carte d\'explorateur',           */
/*          description: 'Carnet de route, cordage et boussole',        */
/*          colors: ['#1c5a41', '#c98a2e', '#eee0bf'] }                 */
/*                                                                      */
/* Note de cascade : le fond du cadre est pose sur                      */
/* ".phone-frame.theme-explorateur" et non sur la seule classe de       */
/* theme, car .phone-frame declare "background" plus bas dans app.css   */
/* a specificite egale : sans cela, le motif serait ecrase.             */
/* ==================================================================== */

.theme-explorateur {
    /* Les trois variables communes a tous les habillages */
    --ygg-primary: #1c5a41; /* vert encre, la couleur des traces */
    --ygg-accent: #c98a2e;  /* or brule, reserve aux filets et aux reperes */
    --ygg-bg: #eee0bf;      /* parchemin */

    /* Couleurs propres a la direction */
    --exp-encre: #3b3020;        /* texte principal, encre sepia */
    --exp-encre-douce: #6b5b40;  /* texte secondaire (contraste >= 4.5:1) */
    --exp-or: #d3a24a;
    --exp-laiton: #b98f3f;       /* cercle de la boussole */
    --exp-vert-fonce: #123f2e;
    --exp-page: #fdf8ea;         /* la page du carnet, jamais du blanc pur */
    --exp-trait: #d8c49a;        /* filets et bordures */
    --exp-corde: #c9a877;
    --exp-bois: #ecdcb5;         /* bois clair de la barre du bas */

    color: var(--exp-encre);
    /* Taille de base remontee : tout texte non force par une classe
       utilitaire est lu a 16px */
    font-size: 16px;
}

/* -------------------------------------------------------------------- */
/* 1. LE FOND : une carte posee sous l'appli                            */
/* Deux foyers de courbes de niveau (deux reliefs), un quadrillage de    */
/* report tres pale, et une lumiere chaude en haut de page.             */
/* -------------------------------------------------------------------- */

.phone-frame.theme-explorateur {
    background-color: var(--ygg-bg);
    background-image:
        /* halo de lumiere, la carte n'est jamais plate */
        radial-gradient(ellipse 130% 55% at 50% 0%, rgba(255, 252, 240, 0.75) 0%, transparent 65%),
        /* relief nord-ouest */
        repeating-radial-gradient(ellipse 150px 108px at 16% 12%,
            transparent 0 24px, rgba(59, 48, 32, 0.075) 24px 25.5px, transparent 25.5px 29px),
        /* relief sud-est, plus resserre */
        repeating-radial-gradient(ellipse 120px 150px at 88% 74%,
            transparent 0 19px, rgba(59, 48, 32, 0.065) 19px 20.5px, transparent 20.5px 24px),
        /* quadrillage de report du cartographe */
        linear-gradient(rgba(59, 48, 32, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 48, 32, 0.04) 1px, transparent 1px);
    background-size: auto, auto, auto, 48px 48px, 48px 48px;
}

/* Les deux cordages debordent sur la zone de lecture : celui de
   l'en-tete descend de 6px, celui de la barre du bas remonte de 5px.
   Sans degagement, le contenu qui defile passait dessous et la corde
   se lisait differemment selon la page et la position du defilement.
   Ces marges lui reservent le fond de carte, et rien d'autre. */
.theme-explorateur .app-main {
    padding-top: 12px;
    padding-bottom: 10px;
}

/* Titres en serif systeme : l'ecriture du carnet, sans police distante */
.theme-explorateur h1,
.theme-explorateur h2,
.theme-explorateur .font-display,
.theme-explorateur .section-title {
    font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
}

/* Repere de focus visible partout : accessibilite d'abord */
.theme-explorateur a:focus-visible,
.theme-explorateur button:focus-visible,
.theme-explorateur input:focus-visible,
.theme-explorateur select:focus-visible,
.theme-explorateur textarea:focus-visible {
    outline: 3px solid var(--exp-or);
    outline-offset: 2px;
    /* pas de border-radius ici : le contour epouse deja la forme de
       l'element, et l'imposer deformerait les boutons ronds */
}

/* -------------------------------------------------------------------- */
/* 2. L'EN-TETE : toile de tente vert sombre, sceau en filigrane,        */
/*    cordage tendu sous le bandeau                                     */
/* -------------------------------------------------------------------- */

.theme-explorateur .app-header {
    position: relative;
    padding-bottom: 16px; /* de la place pour le cordage */
    color: #fdf8ea;
    background-color: var(--ygg-primary);
    background-image:
        radial-gradient(ellipse at 88% 130%, rgba(211, 162, 74, 0.28), transparent 60%),
        /* trame tissee de la toile */
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 6px);
    box-shadow:
        inset 0 -2px 0 rgba(211, 162, 74, 0.55),
        0 3px 12px rgba(58, 40, 14, 0.28);
}

/* Rose des vents en filigrane : huit branches, deux degrades coniques */
.theme-explorateur .app-header::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 54px;
    width: 64px;
    height: 64px;
    margin-top: -32px;
    border-radius: 9999px;
    opacity: 0.16;
    pointer-events: none;
    background-image:
        /* cercle de la rose */
        radial-gradient(circle closest-side, transparent 0 64%, #fdf8ea 64% 67%, transparent 67%),
        /* quatre branches cardinales */
        repeating-conic-gradient(from -3deg, #fdf8ea 0deg 6deg, transparent 6deg 90deg),
        /* quatre branches intermediaires, plus fines */
        repeating-conic-gradient(from 43deg, rgba(253, 248, 234, 0.75) 0deg 4deg, transparent 4deg 90deg);
}

/* Le titre et le bouton infos repassent au-dessus du filigrane */
.theme-explorateur .app-header > * {
    position: relative;
}

/* Cordage tendu : hachures diagonales sur un cordon clair */
.theme-explorateur .app-header::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -6px;
    height: 12px;
    border-radius: 6px;
    background-image:
        repeating-linear-gradient(72deg,
            rgba(92, 64, 26, 0.38) 0 2px,
            rgba(255, 246, 224, 0.6) 2px 4px,
            transparent 4px 9px),
        linear-gradient(180deg, #eed6a9 0%, var(--exp-corde) 55%, #a1804f 100%);
    box-shadow: 0 2px 5px rgba(58, 40, 14, 0.3);
}

/* -------------------------------------------------------------------- */
/* 3. LES CARTES BLANCHES : des pages du carnet                         */
/* Papier chaud, fibres, filet fin, et un coin corne en bas a droite,    */
/* obtenu par un simple degrade a 45 degres (aucun pseudo-element, donc  */
/* aucun risque de bousculer les fiches en position absolue du plan).    */
/* -------------------------------------------------------------------- */

/* Le :not() ecarte le plan SVG, le bouton rond "ma position" et les
   champs de saisie, qui portent eux aussi la classe bg-white. */
.theme-explorateur main .bg-white:not(svg):not(.rounded-full):not(input):not(select):not(textarea) {
    background-color: var(--exp-page);
    background-image:
        /* coin corne */
        linear-gradient(315deg, rgba(190, 158, 106, 0.6) 0 13px, transparent 13.5px),
        /* fibres du papier, a la limite du visible */
        repeating-linear-gradient(48deg, rgba(120, 96, 52, 0.035) 0 1px, transparent 1px 5px);
    border-color: var(--exp-trait);
    box-shadow:
        0 2px 0 rgba(190, 158, 106, 0.32),
        0 6px 14px rgba(92, 68, 28, 0.1);
    color: var(--exp-encre);
}

/* Champs de saisie : 16px minimum, cible confortable, look papier */
.theme-explorateur input,
.theme-explorateur select,
.theme-explorateur textarea {
    min-height: 48px;
    font-size: 16px;
    border-radius: 10px;
    border-color: var(--exp-trait);
    background-color: var(--exp-page);
    color: var(--exp-encre);
}

/* -------------------------------------------------------------------- */
/* 4. LES TITRES DE SECTION : une legende de carte                      */
/* Un losange de report, puis un sentier en pointilles qui file jusqu'au */
/* bord, comme un itineraire trace a la regle.                          */
/* -------------------------------------------------------------------- */

.theme-explorateur .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--exp-encre-douce);
    text-transform: uppercase;
}

.theme-explorateur .section-title::before {
    content: '';
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    transform: rotate(45deg);
    background: var(--ygg-accent);
    box-shadow: 0 0 0 2px rgba(201, 138, 46, 0.22);
}

.theme-explorateur .section-title::after {
    content: '';
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background-image: repeating-linear-gradient(90deg,
        rgba(107, 91, 64, 0.55) 0 7px,
        transparent 7px 14px);
}

/* -------------------------------------------------------------------- */
/* 5. LES CHIPS : des tampons d'encre                                   */
/* Double filet, casse legere posee a la main (le tampon se redresse     */
/* quand il est actif), et 48px de haut pour le pouce.                  */
/* -------------------------------------------------------------------- */

.theme-explorateur .chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 16px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 10px;
    border: 1.5px solid rgba(59, 48, 32, 0.5);
    background: var(--exp-page);
    color: var(--exp-encre);
    /* double filet interieur, comme le cadre grave d'un tampon */
    box-shadow:
        inset 0 0 0 2px var(--exp-page),
        inset 0 0 0 3px rgba(59, 48, 32, 0.28);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Les rangees de chips defilent horizontalement, et un conteneur qui
   defile sur un axe rogne l'autre : le tampon penche debordait alors
   d'un cheveu et se retrouvait coupe en haut et en bas. Ces marges lui
   reservent la place que la bascule lui demande. */
.theme-explorateur .chip {
    margin-top: 3px;
    margin-bottom: 3px;
}

.theme-explorateur .chip:nth-child(odd) {
    transform: rotate(-0.7deg);
}

.theme-explorateur .chip:nth-child(even) {
    transform: rotate(0.7deg);
}

/* Le tampon retenu se pose bien droit, encre pleine et filet dore */
.theme-explorateur .chip.chip-active {
    transform: rotate(0deg);
    background: var(--ygg-primary);
    border-color: #0f3527;
    color: var(--exp-page);
    box-shadow:
        inset 0 0 0 2px var(--ygg-primary),
        inset 0 0 0 3px rgba(211, 162, 74, 0.8),
        0 2px 0 rgba(15, 53, 39, 0.35);
}

/* -------------------------------------------------------------------- */
/* 6. LE BOUTON PRINCIPAL : une pancarte clouee                         */
/* Planche vert sombre, quatre clous en laiton dans les coins, epaisseur */
/* visible qui s'enfonce a l'appui.                                     */
/* -------------------------------------------------------------------- */

.theme-explorateur .btn-primary {
    min-height: 52px;
    padding: 15px 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 10px;
    border: 2px solid rgba(15, 53, 39, 0.9);
    color: #fdf8ea;
    background-color: var(--ygg-primary);
    background-image:
        /* les quatre clous */
        radial-gradient(circle at 13px 13px, #f2dfb2 0 2px, rgba(140, 104, 40, 0.65) 2px 3.2px, transparent 3.4px),
        radial-gradient(circle at calc(100% - 13px) 13px, #f2dfb2 0 2px, rgba(140, 104, 40, 0.65) 2px 3.2px, transparent 3.4px),
        radial-gradient(circle at 13px calc(100% - 13px), #f2dfb2 0 2px, rgba(140, 104, 40, 0.65) 2px 3.2px, transparent 3.4px),
        radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #f2dfb2 0 2px, rgba(140, 104, 40, 0.65) 2px 3.2px, transparent 3.4px),
        /* fil du bois */
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #24714f 0%, #164a35 100%);
    box-shadow:
        0 3px 0 rgba(15, 53, 39, 0.85),
        0 7px 16px rgba(58, 40, 14, 0.28);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.theme-explorateur .btn-primary:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 0 0 rgba(15, 53, 39, 0.85), 0 3px 8px rgba(58, 40, 14, 0.25);
}

/* -------------------------------------------------------------------- */
/* 7. LES FEUILLES MONTANTES : une carte que l'on deroule               */
/* Le baton de parchemin sert de poignee. Il est dessine en fond (et non */
/* en pseudo-element) pour rester en place quand la feuille defile.      */
/* -------------------------------------------------------------------- */

.theme-explorateur .sheet {
    padding-top: 30px;
    border-radius: 18px 18px 0 0;
    border-top: 2px solid var(--ygg-accent);
    color: var(--exp-encre);
    background-color: var(--exp-page);
    background-image:
        /* hachures du cordage sur le baton */
        repeating-linear-gradient(66deg,
            rgba(92, 64, 26, 0.32) 0 2px,
            rgba(255, 246, 224, 0.55) 2px 4px,
            transparent 4px 8px),
        /* le baton lui-meme, cylindrique */
        linear-gradient(180deg, #f1dcb0 0%, #d3b585 45%, #a1804f 100%),
        /* la feuille est un morceau de carte : courbes de niveau tres pales */
        repeating-radial-gradient(ellipse 170px 120px at 22% -18%,
            transparent 0 20px, rgba(59, 48, 32, 0.05) 20px 21px, transparent 21px 25px);
    background-position: center 12px, center 12px, 0 0;
    background-size: 56px 8px, 56px 8px, auto;
    background-repeat: no-repeat, no-repeat, repeat;
    box-shadow: 0 -10px 28px rgba(58, 40, 14, 0.3);
}

/* -------------------------------------------------------------------- */
/* 8. LA BARRE DU BAS : une planche de bois clair, amarree par un cordage */
/* -------------------------------------------------------------------- */

.theme-explorateur .bottom-nav {
    position: relative;
    padding-top: 10px;
    border-top: none;
    background-color: var(--exp-bois);
    background-image:
        /* veines fines puis larges, deux periodes pour casser la regularite */
        repeating-linear-gradient(180deg, rgba(122, 92, 48, 0.075) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(180deg, rgba(122, 92, 48, 0.05) 0 1px, transparent 1px 13px),
        linear-gradient(180deg, #f4e7c9 0%, #e4d0a4 100%);
}

/* Le cordage d'amarrage passe derriere la boussole */
.theme-explorateur .bottom-nav::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 12px;
    right: 12px;
    height: 11px;
    border-radius: 6px;
    background-image:
        repeating-linear-gradient(72deg,
            rgba(92, 64, 26, 0.38) 0 2px,
            rgba(255, 246, 224, 0.6) 2px 4px,
            transparent 4px 9px),
        linear-gradient(180deg, #eed6a9 0%, var(--exp-corde) 55%, #a1804f 100%);
    box-shadow: 0 2px 5px rgba(58, 40, 14, 0.25);
}

.theme-explorateur .nav-tab {
    position: relative;
    color: var(--exp-encre-douce); /* contraste 4.5:1 sur le bois, contre du gris clair a l'origine */
}

.theme-explorateur .nav-tab span {
    font-size: 12px; /* 11px a l'origine */
    letter-spacing: 0.01em;
}

.theme-explorateur .nav-tab-active {
    color: var(--ygg-primary);
    font-weight: 700;
}

/* L'etape en cours est tamponnee a l'encre doree */
.theme-explorateur .nav-tab-active::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 38px;
    height: 38px;
    margin-left: -19px;
    border-radius: 9999px;
    background-image: radial-gradient(circle closest-side,
        rgba(211, 162, 74, 0.42) 0 56%,
        rgba(211, 162, 74, 0.16) 56% 80%,
        transparent 80%);
}

.theme-explorateur .nav-tab svg,
.theme-explorateur .nav-tab span {
    position: relative; /* au-dessus du tampon */
}

/* -------------------------------------------------------------------- */
/* 9. LE BOUTON SCAN : la boussole                                      */
/* Couronne de laiton graduee, cadran vert encre, aiguille qui cherche   */
/* le nord, et un repere en losange dore plante au sommet.               */
/* La couleur de repli est posee dans une regle separee : si un vieux    */
/* navigateur ignore les degrades coniques, le bouton reste plein.       */
/* -------------------------------------------------------------------- */

.theme-explorateur .scan-button {
    position: relative;
    width: 66px;
    height: 66px;
    margin-top: -33px; /* la moitie flotte toujours au-dessus de la barre */
    border: 3px solid var(--exp-laiton);
    color: #fdf8ea;
    background-color: var(--exp-vert-fonce);
    box-shadow:
        0 6px 16px rgba(58, 40, 14, 0.42),
        inset 0 0 0 1px rgba(253, 248, 234, 0.3);
}

.theme-explorateur .scan-button {
    background-image:
        /* cadran central, dessine en premier donc au-dessus */
        radial-gradient(circle closest-side at 50% 50%, var(--exp-vert-fonce) 0 66%, transparent 66.5%),
        /* graduations tous les 22,5 degres */
        repeating-conic-gradient(from 11.25deg at 50% 50%,
            rgba(59, 48, 32, 0.6) 0deg 1.6deg, transparent 1.6deg 22.5deg),
        /* couronne de laiton */
        radial-gradient(circle closest-side at 50% 32%, #f2dfb2 0%, var(--exp-laiton) 78%);
}

/* L'aiguille : pointe doree au nord, contrepoids clair au sud */
.theme-explorateur .scan-button::before {
    content: '';
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    border-radius: 2px;
    opacity: 0.9;
    pointer-events: none;
    background-image: linear-gradient(180deg,
        var(--exp-or) 0 50%,
        rgba(253, 248, 234, 0.6) 50% 100%);
    box-shadow: 0 0 7px rgba(211, 162, 74, 0.55);
    animation: exp-aiguille 7s ease-in-out infinite alternate;
}

/* Le repere du nord */
.theme-explorateur .scan-button::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 2px;
    transform: rotate(45deg);
    background-image: linear-gradient(135deg, #f6e6c0, var(--exp-or));
    box-shadow: 0 1px 3px rgba(58, 40, 14, 0.45);
}

/* Le pictogramme reste lisible au-dessus de l'aiguille */
.theme-explorateur .scan-button svg {
    position: relative;
    z-index: 1;
}

@keyframes exp-aiguille {
    from { transform: rotate(-14deg); }
    to { transform: rotate(14deg); }
}

/* -------------------------------------------------------------------- */
/* 10. TOUCHES PROPRES A LA DIRECTION                                   */
/* -------------------------------------------------------------------- */

/* Le plan : une carte glissee sous une plaque, avec son cadre parchemin */
.theme-explorateur .map-viewport {
    border-radius: 14px;
    border: 2px solid var(--exp-trait);
    background-color: var(--exp-page);
    box-shadow: inset 0 0 22px rgba(92, 68, 28, 0.16);
}

/* Les points d'interet : des tetes d'epingle enfoncees dans la carte */
.theme-explorateur .map-pin {
    border: 2.5px solid var(--exp-page);
    box-shadow:
        0 0 0 1.5px rgba(59, 48, 32, 0.55),
        0 3px 5px rgba(58, 40, 14, 0.4);
}

/* Le viseur du scanner : une lunette cerclee d'or */
.theme-explorateur .scan-window {
    border-color: rgba(211, 162, 74, 0.95);
    box-shadow:
        0 0 0 9999px rgba(24, 16, 6, 0.55),
        inset 0 0 34px rgba(211, 162, 74, 0.2);
}

/* Les cartes a collectionner : des planches d'herbier collees au carnet */
.theme-explorateur .collection-card {
    border-radius: 8px;
    box-shadow:
        0 0 0 3px var(--exp-page),
        0 3px 9px rgba(58, 40, 14, 0.3);
}

/* L'affiche : epinglee de travers dans le carnet */
.theme-explorateur .poster-frame {
    border: 3px solid var(--exp-page);
    border-radius: 4px;
    transform: rotate(-1.6deg);
    box-shadow: 0 4px 12px rgba(58, 40, 14, 0.35);
}

/* Le didacticiel garde le fond de carte, et son icone devient un sceau */
.theme-explorateur .onboarding {
    background-color: var(--ygg-bg);
    background-image:
        radial-gradient(ellipse 130% 55% at 50% 0%, rgba(255, 252, 240, 0.75) 0%, transparent 65%),
        repeating-radial-gradient(ellipse 150px 108px at 16% 12%,
            transparent 0 24px, rgba(59, 48, 32, 0.075) 24px 25.5px, transparent 25.5px 29px);
    color: var(--exp-encre);
}

.theme-explorateur .onboarding-icon {
    border: 3px solid var(--exp-laiton);
    background-color: var(--exp-vert-fonce);
    background-image:
        radial-gradient(circle closest-side at 50% 50%, var(--exp-vert-fonce) 0 70%, transparent 70.5%),
        repeating-conic-gradient(from 11.25deg at 50% 50%,
            rgba(59, 48, 32, 0.55) 0deg 2deg, transparent 2deg 22.5deg),
        radial-gradient(circle closest-side at 50% 32%, #f2dfb2 0%, var(--exp-laiton) 78%);
    box-shadow: 0 6px 18px rgba(58, 40, 14, 0.35);
}

.theme-explorateur .onboarding-skip {
    color: var(--exp-encre-douce);
    font-size: 16px;
    min-height: 48px; /* le lien "passer" devient une vraie cible */
    display: inline-flex;
    align-items: center;
}

/* -------------------------------------------------------------------- */
/* 11. MOUVEMENT REDUIT : l'aiguille se fige au nord                    */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .theme-explorateur .scan-button::before {
        animation: none;
        transform: none;
    }

    .theme-explorateur .chip,
    .theme-explorateur .btn-primary {
        transition: none;
    }
}