/* Styles communs à toutes les pages (gabarit naturedex/blank.html). */

:root {
    /* Couleurs du site */
    --nd-ink-rgb: 15, 23, 42;      /* bordures et ombres légères : rgba(var(--nd-ink-rgb), alpha) */
    --nd-green: #198754;
    --nd-green-dark: #0f5132;
    --nd-green-tint: #eef7ef;
    --nd-text: #2f3b45;
    --nd-text-strong: #1f2a33;
    --nd-text-muted: #5b6672;     /* contraste ≥ 4,5:1 y compris sur les fonds teintés */
    --nd-gold: #ffe08a;
    --nd-focus-ring: #1d4ed8;     /* contour du focus clavier */

    /* Formes */
    --nd-radius-pill: 999px;
    --nd-border-soft: 1px solid rgba(var(--nd-ink-rgb), 0.08);
    --nd-shadow-soft: 0 0.5rem 1rem rgba(var(--nd-ink-rgb), 0.06);

    /* Bootstrap 5.3 : teintes « emphasis » gardées identiques à l'ancien thème. */
    --bs-success-text-emphasis: var(--nd-green-dark);
    --bs-primary-text-emphasis: #084298;

    /* Liens un ton plus foncés que ceux de Bootstrap (4,5:1 tout juste sur blanc,
       moins sur les fonds teintés des cartes). */
    --bs-link-color: #0a58ca;
    --bs-link-color-rgb: 10, 88, 202;
    --bs-link-hover-color: #084298;
    --bs-link-hover-color-rgb: 8, 66, 152;
}

/* Contrastes : texte des boutons « outline » et texte vert assombris (bordures et
   fonds au survol inchangés). Le cyan de Bootstrap (1,96:1 sur blanc) était illisible. */
.btn-outline-primary {
    --bs-btn-color: #0a58ca;
}

.btn-outline-secondary {
    --bs-btn-color: #5c636a;
}

.btn-outline-success {
    --bs-btn-color: #157347;
    --bs-btn-disabled-color: #157347;
}

.btn-outline-danger {
    --bs-btn-color: #b02a37;
}

.btn-outline-info {
    --bs-btn-color: #0a7287;
    --bs-btn-border-color: #0a7287;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0a7287;
    --bs-btn-hover-border-color: #0a7287;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #085e70;
    --bs-btn-active-border-color: #085e70;
}

.text-success {
    --bs-success-rgb: 21, 115, 71;
}

/* Focus clavier : contour franc partout. Bootstrap le remplace par un halo bleu pâle
   (~1,4:1 sur blanc) ou par rien du tout (liens de navigation, cartes). */
:focus-visible,
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.nav-link:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.list-group-item-action:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.btn-close:focus-visible,
.navbar-toggler:focus-visible {
    outline: 3px solid var(--nd-focus-ring);
    outline-offset: 2px;
}

/* Cartes entièrement cliquables (lien « stretched-link ») : le contour entoure la carte. */
@supports selector(:has(*)) {
    .card:has(.stretched-link:focus-visible) {
        outline: 3px solid var(--nd-focus-ring);
        outline-offset: 2px;
    }

    .card .stretched-link:focus-visible {
        outline: none;
    }
}

/* Lien d'évitement : premier élément de la page au clavier. */
.nd-skip-link:focus {
    position: fixed !important;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1100;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    background: #fff;
    color: var(--nd-text-strong);
    font-weight: 700;
    box-shadow: var(--nd-shadow-soft);
}

#contenu:focus {
    outline: none;
}

/* Écrans tactiles : cibles d'au moins 44 px (boutons, navigation, champs, pagination,
   cases à cocher). Rien ne change à la souris. */
@media (pointer: coarse) {
    .btn {
        --bs-btn-padding-y: 0.5625rem;
        min-width: 44px;
        min-height: 44px;
    }

    .btn-sm {
        --bs-btn-padding-y: 0.65625rem;
    }

    .btn-lg {
        --bs-btn-padding-y: 0.5rem;
    }

    .pagination {
        --bs-pagination-padding-y: 0.5625rem;
    }

    .page-link {
        min-width: 44px;
        text-align: center;
    }

    .form-control,
    .form-select,
    .navbar-toggler,
    .app-navbar .navbar-brand,
    .app-navbar .nav-link,
    .dropdown-item {
        min-height: 44px;
    }

    .app-navbar .navbar-brand,
    .dropdown-item {
        display: inline-flex;
        align-items: center;
    }

    .form-check {
        min-height: 44px;
    }

    .form-check-label {
        padding-block: 0.625rem;
    }

    .form-check-input {
        margin-top: calc(0.25em + 0.625rem);
    }

    .btn-close {
        min-width: 44px;
        min-height: 44px;
    }

    a.badge {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

.card img {
    max-width: 100%;
    max-height:100%;
    object-fit: contain;
}

.app-navbar {
    border-bottom: var(--nd-border-soft);
    box-shadow: 0 0.75rem 1.8rem rgba(var(--nd-ink-rgb), 0.05);
}

.app-navbar .navbar-brand {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0;
}

.app-navbar .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.03rem;
    font-weight: 650;
    color: var(--nd-text);
    border-radius: var(--nd-radius-pill);
    padding: 0.55rem 0.85rem;
}

.app-navbar .nav-link:hover {
    color: var(--nd-green-dark);
    background: var(--nd-green-tint);
}

.app-navbar .nav-link i {
    color: var(--nd-green);
}

.navbar-player-strip {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.nav-meta-pill,
.score-pill {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    border-radius: var(--nd-radius-pill);
    border: var(--nd-border-soft);
    box-shadow: var(--nd-shadow-soft);
}

.nav-meta-pill {
    gap: 0.55rem;
    padding: 0.35rem 0.72rem 0.35rem 0.4rem;
    color: #21313c;
    background: #ffffff;
    text-decoration: none;
}

.nav-meta-pill:hover {
    color: var(--nd-green-dark);
    background: #f6fbf7;
}

.nav-meta-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #17865b 0%, #49b86f 100%);
    box-shadow: inset 0 -0.18rem 0 rgba(var(--nd-ink-rgb), 0.16);
}

.nav-tribe-pill .nav-meta-icon {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
}

.nav-meta-label,
.score-breakdown {
    display: block;
    color: var(--nd-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
}

.nav-meta-value {
    display: block;
    max-width: 130px;
    overflow: hidden;
    color: var(--nd-text-strong);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score-pill {
    gap: 0.55rem;
    padding: 0.35rem 0.82rem 0.35rem 0.38rem;
    background: linear-gradient(135deg, #fff8df 0%, #ffffff 52%, #eef9f2 100%);
    border-color: rgba(255, 193, 7, 0.4);
}

.coin-pill {
    background: linear-gradient(135deg, #fff9e8 0%, #ffffff 54%, #eef6ff 100%);
}

.score-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #5b3a00;
    background: linear-gradient(180deg, #ffe38a 0%, #f8b516 100%);
    box-shadow:
        inset 0 -0.22rem 0 rgba(123, 80, 0, 0.18),
        0 0.35rem 0.75rem rgba(248, 181, 22, 0.24);
}

.coin-pill .score-icon {
    color: #4a3200;
    background: linear-gradient(180deg, #ffeba3 0%, #e5a70d 100%);
}

.score-main {
    display: flex;
    align-items: baseline;
    gap: 0.22rem;
    color: #26313b;
    font-weight: 900;
    line-height: 1;
}

.score-value {
    font-size: 1.35rem;
}

.score-unit {
    font-size: 0.82rem;
    text-transform: uppercase;
}

.score-breakdown {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none;
}

.nav-user-dropdown {
    margin-left: auto;
}

.nav-user-toggle {
    border: var(--nd-border-soft);
    box-shadow: var(--nd-shadow-soft);
}

.nav-user-toggle::after {
    margin-left: 0.2rem;
}

.nav-user-dropdown .dropdown-menu {
    border: 1px solid rgba(var(--nd-ink-rgb), 0.08);
    border-radius: 0.9rem;
    box-shadow: 0 1rem 2rem rgba(var(--nd-ink-rgb), 0.12);
}

.logout-menu-button {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--nd-text);
    text-align: left;
}

.logout-menu-button:hover {
    color: var(--nd-green-dark);
    background: var(--nd-green-tint);
}

/* Menu replié sous 1200 px. Au-dessus, la bande joueur (tribu, points, pièces, compte)
   passe sous les liens quand la place manque, au lieu de faire défiler la page. */
@media (max-width: 1199.98px) {
    .navbar-player-strip {
        justify-content: flex-start;
        margin-top: 0.75rem;
    }
}

@media (min-width: 1200px) {
    .app-navbar .navbar-collapse,
    .app-navbar .navbar-nav {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    /* À droite, sur la ligne des liens ou sous eux. */
    .navbar-player-strip {
        margin-left: auto;
        padding-left: 1rem;
    }

    /* Liens resserrés : ceux d'un superutilisateur (« À valider », « Wikipédia »)
       tiennent sur une ligne dès 1200 px, et toute la barre sur une ligne en 1920 px. */
    .app-navbar .nav-link {
        gap: 0.35rem;
        padding-inline: 0.5rem;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .app-navbar .nav-link {
        font-size: 0.98rem;
    }
}

/* Lien « Ajouter une observation » (icône seule) : cible de la taille des autres liens. */
.app-navbar .nav-add-link {
    justify-content: center;
    min-width: 2.75rem;
    padding-inline: 0.7rem;
}

@media (max-width: 575.98px) {
    .nav-meta-pill,
    .score-pill,
    .nav-user-dropdown {
        width: 100%;
    }

    .nav-meta-pill,
    .score-pill,
    .nav-user-toggle {
        justify-content: flex-start;
    }

    .score-breakdown {
        max-width: none;
    }
}

.achievement-modal .modal-content {
    overflow: hidden;
    border: none;
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at top, rgba(255, 213, 79, 0.35), transparent 40%),
        linear-gradient(145deg, #10243f 0%, #0e1726 48%, #1c0f35 100%);
    color: #fff;
    box-shadow: 0 2rem 4rem rgba(8, 14, 30, 0.45);
}

.achievement-modal .modal-header,
.achievement-modal .modal-footer {
    border: 0;
}

.achievement-modal .btn-close {
    filter: invert(1);
}

.achievement-slide {
    position: relative;
    min-height: 340px;
    padding: 2rem 2.25rem 2.5rem;
}

.achievement-glow {
    position: absolute;
    inset: auto auto 55% 50%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--badge-halo, rgba(255, 221, 87, 0.45)) 0%, rgba(255, 221, 87, 0.08) 45%, transparent 70%);
    transform: translateX(-50%);
    filter: blur(2px);
    animation: achievementPulse 2.2s ease-in-out infinite;
    pointer-events: none;
}

.achievement-badge {
    position: relative;
    width: 132px;
    height: 132px;
    margin: 0 auto 1.5rem;
    border-radius: 35% 35% 45% 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--badge-top, var(--nd-gold)) 0%, var(--badge-bottom, #ffb703) 100%);
    box-shadow:
        0 0 0 10px rgba(255, 255, 255, 0.08),
        0 1.5rem 3rem rgba(255, 183, 3, 0.25);
}

.achievement-badge::before,
.achievement-badge::after {
    content: "";
    position: absolute;
    bottom: -22px;
    width: 28px;
    height: 50px;
    background: linear-gradient(180deg, var(--badge-ribbon-left, #56ccf2) 0%, var(--badge-ribbon-right, #2f80ed) 100%);
    clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}

.achievement-badge::before {
    left: 24px;
}

.achievement-badge::after {
    right: 24px;
}

.achievement-badge i {
    color: var(--badge-icon, #6a4600);
    font-size: 3rem;
    text-shadow: 0 0.2rem 0 rgba(255, 255, 255, 0.3);
}

.achievement-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.8rem;
    border-radius: var(--nd-radius-pill);
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.achievement-points-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: var(--nd-radius-pill);
    background: rgba(255, 255, 255, 0.12);
    color: var(--nd-gold);
    font-weight: 700;
}

.achievement-spark {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 226, 123, 0.9);
    box-shadow: 0 0 0.8rem rgba(255, 226, 123, 0.7);
    animation: sparkleFloat 3s ease-in-out infinite;
}

.achievement-spark.spark-1 { top: 16%; left: 14%; animation-delay: 0s; }
.achievement-spark.spark-2 { top: 22%; right: 18%; animation-delay: 0.5s; }
.achievement-spark.spark-3 { bottom: 22%; left: 22%; animation-delay: 1s; }
.achievement-spark.spark-4 { bottom: 18%; right: 16%; animation-delay: 1.4s; }

.carousel-dark .carousel-indicators [data-bs-target] {
    background-color: rgba(255, 255, 255, 0.6);
}

@media (prefers-reduced-motion: reduce) {
    .achievement-glow,
    .achievement-spark {
        animation: none;
    }
}

/* Fonds sombres : contour de focus doré. */
.achievement-modal {
    --nd-focus-ring: var(--nd-gold);
}

@keyframes achievementPulse {
    0%, 100% { transform: translateX(-50%) scale(0.96); opacity: 0.75; }
    50% { transform: translateX(-50%) scale(1.06); opacity: 1; }
}

@keyframes sparkleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
    50% { transform: translateY(-10px) scale(1.3); opacity: 1; }
}

/* htmx : ses styles intégrés sont désactivés (CSP), ils sont repris ici. */
.htmx-indicator {
    opacity: 0;
    visibility: hidden;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in;
}

/* Zone remplacée par htmx (résultats de recherche…), estompée pendant la requête. */
.nd-live-region {
    transition: opacity 0.16s ease;
}

.nd-live-region.htmx-request {
    opacity: 0.55;
    pointer-events: none;
}

/* Messages après une requête htmx : en bas de l'écran, la page n'étant pas rechargée. */
.site-messages-floating {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    z-index: 1090;
    width: min(36rem, calc(100% - 2rem));
    transform: translateX(-50%);
}

.site-messages-floating .alert {
    margin-bottom: 0.5rem;
}

/* Largeurs de page (formulaires, pages courtes) */
.nd-page-sm {
    max-width: 600px;
}

.nd-page-md {
    max-width: 760px;
}

.nd-page-lg {
    max-width: 920px;
}

/* Couleurs des badges de succès (palette choisie par succès, voir achievements.BADGE_RANK_PALETTES). */
.nd-badge-palette-sprout {
    --badge-top: #dff6a0;
    --badge-bottom: #78c850;
    --badge-icon: #264d14;
    --badge-ribbon-left: #5bb270;
    --badge-ribbon-right: #3a7d44;
    --badge-halo: rgba(120, 200, 80, 0.28);
}

.nd-badge-palette-sky {
    --badge-top: #b9ecff;
    --badge-bottom: #42a5f5;
    --badge-icon: #113d73;
    --badge-ribbon-left: #5bc0eb;
    --badge-ribbon-right: #2563eb;
    --badge-halo: rgba(66, 165, 245, 0.28);
}

.nd-badge-palette-ember {
    --badge-top: #ffd0a8;
    --badge-bottom: #f97316;
    --badge-icon: #6b2100;
    --badge-ribbon-left: #fb923c;
    --badge-ribbon-right: #ea580c;
    --badge-halo: rgba(249, 115, 22, 0.28);
}

.nd-badge-palette-violet {
    --badge-top: #ead7ff;
    --badge-bottom: #8b5cf6;
    --badge-icon: #34145c;
    --badge-ribbon-left: #a855f7;
    --badge-ribbon-right: #7c3aed;
    --badge-halo: rgba(139, 92, 246, 0.28);
}

.nd-badge-palette-sun {
    --badge-top: #ffe08a;
    --badge-bottom: #ffb703;
    --badge-icon: #6a4600;
    --badge-ribbon-left: #56ccf2;
    --badge-ribbon-right: #2f80ed;
    --badge-halo: rgba(255, 183, 3, 0.28);
}

.nd-badge-palette-mythic {
    --badge-top: #ffd6f5;
    --badge-bottom: #ec4899;
    --badge-icon: #5f1238;
    --badge-ribbon-left: #f472b6;
    --badge-ribbon-right: #db2777;
    --badge-halo: rgba(236, 72, 153, 0.28);
}

.nd-badge-palette-stone {
    --badge-top: #e2e8f0;
    --badge-bottom: #94a3b8;
    --badge-icon: #334155;
    --badge-ribbon-left: #cbd5e1;
    --badge-ribbon-right: #94a3b8;
    --badge-halo: rgba(148, 163, 184, 0.22);
}

/* Champ piège des formulaires publics : hors écran pour les humains, rempli par les robots. */
.nd-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}