/* =========================================================
   JKR Studio – global styles
   Standalone WASM copy. The JkrStudio.Web/wwwroot/app.css is
   the same file; keep them in sync until the Server host is retired.

   Convention: all sizes are expressed in rem (1rem = root font-size,
   16 by default). vh/vw/% and unitless ratios stay as-is — they serve
   a different purpose.
   ========================================================= */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 4.5rem;
}

body {
    background: #000;
    color: #fff;
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
}

/* FocusOnNavigate focuses h1 on every page change — hide the browser focus ring */
h1:focus,
h1:focus-visible,
[tabindex="-1"]:focus {
    outline: none;
}

/* ----- AppBar -----
   Semi-transparent black with a backdrop blur so the hero image shows through
   slightly behind the navigation. !important is required to defeat MudBlazor's
   default AppBar background. */
.jkr-appbar {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    border-bottom: 0.0625rem solid #1a1a1a;
}

.jkr-logo {
    height: 3rem;
    width: auto;
    cursor: pointer;
    display: block;
}

.jkr-footer-logo {
    height: 5rem;
    width: auto;
    display: block;
}

.jkr-nav-link {
    margin: 0 0.25rem;
    letter-spacing: 0.1em;
    transition: color 0.2s;
}

    .jkr-nav-link:hover {
        color: #D40000 !important;
    }

    .jkr-nav-link.active {
        color: #D40000 !important;
    }

/* ----- Spacer for pages without hero (offsets the fixed AppBar) -----
   The home hero touches the top of the viewport because the AppBar overlays it.
   Other pages need this spacer to push their first <h1> below the AppBar (AppbarHeight = 4.5rem). */
.jkr-page-spacer {
    height: 4.5rem;
}

/* ----- Sections ----- */
.jkr-section {
    padding: 6rem 0;
    background: #000;
}

.jkr-section-alt {
    background: #0A0A0A;
}

@media (max-width: 37.5rem) {
    .jkr-section {
        padding: 4rem 0;
    }
}

.jkr-section-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}

.jkr-section-sub {
    color: #b0b0b0 !important;
}

.jkr-section-divider {
    width: 5rem;
    height: 0.1875rem;
    background: #D40000;
    margin: 1.5rem auto 0;
}

    .jkr-section-divider.start {
        margin-left: 0;
        margin-right: auto;
    }

/* ----- Portfolio thumbnails -----
   Wrapper handles the hover border + focus outline; the inner <img> handles
   the zoom + grayscale transitions so the border stays put while the image scales. */
.portfolio-thumb-wrap {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 0.0625rem solid transparent;
    transition: border-color 0.3s;
}

    .portfolio-thumb-wrap:hover {
        border-color: #D40000;
    }

    .portfolio-thumb-wrap:focus-visible {
        outline: 0.125rem solid #D40000;
        outline-offset: 0.125rem;
    }

.portfolio-thumb {
    width: 100%;
    height: 20rem;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
    filter: grayscale(0.15) brightness(0.92);
}

/* -----------------------------------------------------------------
   Dissuasion contre le téléchargement des photos.
   NB : impossible d'empêcher totalement (cache navigateur, capture
   d'écran, onglet réseau). On bloque le glisser-déposer, la sélection
   et le menu contextuel (voir aussi js/no-download.js) — ce qui arrête
   la grande majorité des visiteurs non techniques.
   pointer-events non touché : le clic sur .portfolio-thumb-wrap doit
   toujours ouvrir le lightbox. */
.portfolio-thumb,
.jkr-lightbox-img,
.jkr-card-img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

    .portfolio-thumb-wrap:hover .portfolio-thumb {
        transform: scale(1.05);
        filter: grayscale(0) brightness(1);
    }

/* ----- Portfolio category & sub-category cards -----
   Cover image + dark gradient overlay revealing title at the bottom.
   Hover lifts the card and saturates the image; red border mirrors the
   thumbnail interaction so the whole portfolio feels coherent. */
.jkr-card-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 0.0625rem solid #1f1f1f;
    transition: border-color 0.3s, transform 0.3s;
    aspect-ratio: 4 / 3;
    background: #0A0A0A;
}

    .jkr-card-wrap:hover {
        border-color: #D40000;
        transform: translateY(-0.25rem);
    }

    .jkr-card-wrap:focus-visible {
        outline: 0.125rem solid #D40000;
        outline-offset: 0.125rem;
    }

.jkr-card-wrap--sub {
    aspect-ratio: 3 / 2;
}

.jkr-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease, filter 0.6s ease;
    filter: grayscale(0.2) brightness(0.85);
}

    .jkr-card-wrap:hover .jkr-card-img {
        transform: scale(1.05);
        filter: grayscale(0) brightness(1);
    }

.jkr-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 1.5rem;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0) 80%);
    pointer-events: none;
}

.jkr-card-title {
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}

.jkr-card-meta {
    color: #b0b0b0 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.jkr-card-lock {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(212, 0, 0, 0.9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* ----- Breadcrumbs ----- */
.jkr-breadcrumbs {
    color: #b0b0b0;
}

    .jkr-breadcrumbs a {
        color: #b0b0b0 !important;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.8rem;
        transition: color 0.2s;
    }

    .jkr-breadcrumbs a:hover {
        color: #D40000 !important;
    }

/* ----- Password gate ----- */
.jkr-gate {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.jkr-gate-card {
    background: #0A0A0A !important;
    border: 0.0625rem solid #2A2A2A !important;
    max-width: 30rem;
    width: 100%;
}

/* ----- Service cards -----
   Lift + red border on hover to mirror the portfolio thumbnail interaction. */
.jkr-service-card {
    background: #0A0A0A !important;
    border: 0.0625rem solid #2A2A2A !important;
    transition: border-color 0.3s, transform 0.3s;
}

    .jkr-service-card:hover {
        border-color: #D40000 !important;
        transform: translateY(-0.25rem);
    }

/* ----- About ----- */
.jkr-about-image-wrap {
    position: relative;
    overflow: hidden;
}

.jkr-about-image {
    width: 100%;
    height: auto;
    max-height: 37.5rem;
    object-fit: cover;
}

/* ----- Home intro image ----- */
.jkr-intro-image {
    width: 100%;
    max-height: 32.5rem;
    object-fit: cover;
}

/* ----- CTA band -----
   Subtle red gradient on the home page CTA section to draw the eye without
   competing with the hero. */
.jkr-cta-band {
    background: linear-gradient(135deg, #0A0A0A 0%, #1A0000 100%);
    border-top: 0.0625rem solid #2A2A2A;
    border-bottom: 0.0625rem solid #2A2A2A;
}

/* ----- Footer ----- */
.jkr-footer {
    background: #0A0A0A;
    padding: 4rem 0 2rem;
    border-top: 0.0625rem solid #2A2A2A;
}

.jkr-footer-title {
    color: #fff !important;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem !important;
}

/* Petit séparateur entre liens légaux et lien admin dans la barre du bas. */
.jkr-footer-sep {
    color: #444;
    user-select: none;
}

/* Lien admin discret : couleur atténuée par défaut, accent rouge au survol. */
.jkr-footer-admin {
    display: inline-flex;
    align-items: center;
    color: #888 !important;
    transition: color 0.2s;
}

    .jkr-footer-admin:hover {
        color: #D40000 !important;
    }

    .jkr-footer-admin:hover .jkr-footer-admin-icon {
        color: #D40000 !important;
    }

.jkr-footer-admin-icon {
    color: #666 !important;
    transition: color 0.2s;
}

/* ----- Lightbox ----- */
.jkr-lightbox {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    outline: none;
}

.jkr-lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

/* Flèches de navigation superposées (prev/next) — visibles sur le visuel. */
.jkr-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.jkr-lightbox-nav:hover {
    background: rgba(212, 0, 0, 0.85);
}

.jkr-lightbox-prev {
    left: 0.5rem;
}

.jkr-lightbox-next {
    right: 0.5rem;
}

/* Compteur « i / N ». */
.jkr-lightbox-counter {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.8rem;
}

/* ----- Utilities ----- */
.gap-2 {
    gap: 1rem;
}

.gap-3 {
    gap: 1.25rem;
}

/* =========================================================
   Admin console — styles partagés.
   Reprend la convention publique : ce qui sert dans plusieurs sections admin
   reste ici (page wrapper, head bar, card chrome, table, slug). Le reste est
   en scoped .razor.css à côté de chaque section.
   ========================================================= */
.jkr-admin-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 90rem;
    margin: 0 auto;
}

.jkr-admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
}

.jkr-admin-h {
    font-family: 'Montserrat', sans-serif !important;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.jkr-admin-sub {
    color: #888 !important;
    margin-top: 0.25rem;
}

/* Card chrome — repris par chaque section admin (dashboard, portfolio, messages, settings). */
.jkr-admin-card {
    background: #0F0F0F !important;
    border: 0.0625rem solid #1f1f1f !important;
    border-radius: 0.25rem;
    overflow: hidden;
}

.jkr-admin-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 0.0625rem solid #1f1f1f;
}

.jkr-admin-card-title {
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Slug + tableau — portfolio admin + paramètres. */
.jkr-admin-slug {
    background: #050505;
    padding: 0.125rem 0.5rem;
    border-radius: 0.125rem;
    border: 0.0625rem solid #1f1f1f;
    color: #b0b0b0;
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
    overflow-wrap: anywhere;
}

.jkr-admin-table .mud-table-cell {
    border-bottom: 0.0625rem solid #181818 !important;
}

.jkr-admin-table .mud-table-head .mud-table-cell {
    color: #888 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem !important;
    border-bottom: 0.0625rem solid #2A2A2A !important;
}

/* ----- Bannière de maintenance -----
   Bande sombre sur-marque (et non l'alerte jaune MudBlazor qui casse la charte
   noir/rouge) : fond noir, fin liseré rouge accent, icône rouge, texte centré.
   En `position: fixed` JUSTE SOUS le header (hauteur de l'AppBar) et HORS FLUX :
   elle se superpose au hero sans le décaler, et laisse les liens de nav cliquables. */
.jkr-maintenance {
    position: fixed;
    top: var(--mud-appbar-height, 4.5rem);
    left: 0;
    right: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: rgba(18, 18, 18, 0.97);
    border-bottom: 0.125rem solid #D40000;
    color: #e6e6e6;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-align: center;
}