/* ==========================================================================
   BioPHP - socle commun : variables, fond, coquille, tuiles, badges, boutons
   Chargé par la page d'index ET par les pages d'exemples.
   ========================================================================== */

:root {
    --bp-ink:        #0a0520;
    --bp-ink-deep:   #06031a;
    --bp-text:       #ece9ff;
    --bp-muted:      #a79fd4;
    --bp-muted-soft: #8d84bd;

    --bp-violet:      #8b5cf6;
    --bp-violet-dark: #6d28d9;
    --bp-violet-soft: rgba(139, 92, 246, 0.14);
    --bp-violet-line: rgba(139, 92, 246, 0.26);

    --bp-blue:      #3b82f6;
    --bp-blue-dark: #1d4ed8;
    --bp-blue-soft: rgba(59, 130, 246, 0.14);
    --bp-blue-line: rgba(59, 130, 246, 0.28);

    --bp-card-bg: rgba(21, 12, 51, 0.66);
    --bp-radius:  20px;

    /* accent par défaut (violet) ; les cartes/sections bleues le redéfinissent */
    --bp-accent:      var(--bp-violet);
    --bp-accent-dark: var(--bp-violet-dark);
    --bp-accent-soft: var(--bp-violet-soft);
    --bp-accent-line: var(--bp-violet-line);
}

/* variante bleue, réutilisable partout */
.bp-blue {
    --bp-accent:      var(--bp-blue);
    --bp-accent-dark: var(--bp-blue-dark);
    --bp-accent-soft: var(--bp-blue-soft);
    --bp-accent-line: var(--bp-blue-line);
}

/* --- reset local + fond global ------------------------------------------ */

html,
body {
    background-color: var(--bp-ink);
}

body {
    color: var(--bp-text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* --- barres de défilement ------------------------------------------------ */

/* la barre native, claire et large, jure sur le fond sombre */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.4) transparent;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: rgba(6, 3, 26, 0.5);
}

::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.4);
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.7);
    background-clip: content-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* base.html.twig ne pose plus de .container : la page occupe déjà toute la
   largeur, sans width:100vw (qui compte la barre de défilement et déborde) ni
   overflow:hidden (qui empêcherait la nav et la barre latérale de rester
   collées, `position: sticky` ne fonctionnant pas sous un ancêtre à overflow
   masqué). */
.bp-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 56px 24px 40px;
}

.bp-page__bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--bp-ink);
    background-image: url("../img/biophp-bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* voile de lisibilité : assombrit la zone centrale où vivent les cartes */
.bp-page__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 900px at 42% 55%, rgba(6, 3, 26, 0.55), transparent 78%),
        linear-gradient(180deg, rgba(6, 3, 26, 0.12) 0%, rgba(6, 3, 26, 0.38) 100%);
}

.bp-shell {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
}

.bp-tile {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, var(--bp-accent), var(--bp-accent-dark));
    box-shadow: 0 8px 24px -6px var(--bp-accent);
}

.bp-tile--lg {
    width: 60px;
    height: 60px;
    border-radius: 18px;
}

.bp-tile--lg svg {
    width: 30px;
    height: 30px;
}

.bp-tile--sm {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--bp-accent-soft);
    border: 1px solid var(--bp-accent-line);
    color: #c9bdff;
    box-shadow: none;
}

.bp-card--blue .bp-tile--sm {
    color: #b6d0ff;
}

.bp-tile--sm svg {
    width: 22px;
    height: 22px;
}

.bp-badge {
    flex: 0 0 auto;
    padding: 5px 11px;
    border: 1px solid var(--bp-accent-line);
    border-radius: 8px;
    background: var(--bp-accent-soft);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #cfe0ff;
    white-space: nowrap;
}

.bp-card:not(.bp-card--blue) .bp-badge {
    color: #d8ccff;
}

.bp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 280px;
    padding: 14px 26px;
    border-radius: 11px;
    background: linear-gradient(145deg, var(--bp-accent), var(--bp-accent-dark));
    color: #fff;
    font-size: 0.98rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 14px 30px -12px var(--bp-accent);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.bp-btn:hover,
.bp-btn:focus-visible {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 18px 36px -12px var(--bp-accent);
}

.bp-btn svg {
    width: 17px;
    height: 17px;
}

@media (prefers-reduced-motion: reduce) {
    .bp-btn { transition: none; }
}