/* themes/bootswatch_quartz/css/style.css — Glassmorphism tailored for the
   Bootswatch "Quartz" skin (Bootstrap 5.3.7). Vivid pink→purple→blue gradient
   background, frosted translucent panels, floating glass hero card. The skin
   provides colors/typo via --bs-* vars; this file owns the glass language. */

/* ---- Glass design tokens -------------------------------------------------- */
:root {
    --glass-bg: rgba(255, 255, 255, 0.12);
    --glass-bg-strong: rgba(255, 255, 255, 0.18);
    --glass-border: rgba(255, 255, 255, 0.28);
    --glass-shadow: 0 1.5rem 3.5rem rgba(31, 18, 53, 0.28);
    --glass-blur: 18px;
    --glass-radius: 1.5rem;
}

/* ---- Full-page iridescent gradient ---------------------------------------- */
body {
    min-height: 100vh;
    background-color: #6d4ad0; /* solid fallback before the gradient paints */
    background-image:
        radial-gradient(ellipse 80% 60% at 15% 0%, rgba(255, 92, 168, 0.55), transparent 60%),
        radial-gradient(ellipse 70% 70% at 85% 10%, rgba(120, 96, 255, 0.50), transparent 60%),
        radial-gradient(ellipse 90% 80% at 50% 100%, rgba(72, 162, 255, 0.45), transparent 65%),
        linear-gradient(160deg, #ff5ca8 0%, #8a5cff 45%, #4aa2ff 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ---- Reusable frosted-glass surface --------------------------------------- */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}

/* Opaque-ish fallback where backdrop-filter is unsupported (keeps text legible) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass,
    .bsw-hero__card,
    .bsw-hero__chip,
    .services .card,
    .glass-card,
    .bsw-faq .accordion-item,
    .bsw-faq .accordion-button {
        background: rgba(76, 51, 128, 0.82);
    }
}

/* ---- Hero (off-center, stacked floating glass panels) --------------------- */
.bsw-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 11vw, 8rem) 0;
}

/* Asymmetric stage: main panel left, staggered chips right (CSS grid overlap) */
.bsw-hero__stage {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 55%) minmax(0, 45%);
    align-items: center;
    gap: clamp(1rem, 4vw, 2.5rem);
}

.bsw-hero__card {
    padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
    border-radius: clamp(1.25rem, 3vw, 2rem);
    position: relative;
    z-index: 3;
}

.bsw-hero__eyebrow {
    display: inline-block;
    margin-bottom: 1.25rem;
    padding: 0.35rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bs-body-color);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.bsw-hero__title {
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    line-height: 1.08;
    text-shadow: 0 2px 20px rgba(31, 18, 53, 0.35);
}

.bsw-hero__lead {
    max-width: 44ch;
    color: var(--bs-body-color);
    opacity: 0.92;
}

/* Staggered translucent chips on the opposite side, overlapping at offsets */
.bsw-hero__floats {
    position: relative;
    min-height: 16rem;
    z-index: 2;
}

.bsw-hero__chip {
    position: absolute;
    padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.25rem, 2.8vw, 1.9rem);
    background: var(--glass-bg-strong);
    border-radius: 1.25rem;
}

.bsw-hero__chip--stat {
    top: 0;
    right: 6%;
    width: clamp(11rem, 20vw, 14rem);
    transform: rotate(-3deg);
    z-index: 4;
}

.bsw-hero__chip--quote {
    bottom: 0;
    left: -8%;
    width: clamp(13rem, 24vw, 17rem);
    transform: rotate(2.5deg);
    z-index: 3;
}

.bsw-hero__chip-figure {
    display: block;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--bs-primary);
    text-shadow: 0 2px 16px rgba(31, 18, 53, 0.30);
}

.bsw-hero__chip-label {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--bs-body-color);
    opacity: 0.85;
}

.bsw-hero__chip--quote .bsw-hero__chip-mark {
    display: block;
    font-size: 2.6rem;
    line-height: 0.6;
    color: var(--bs-primary);
    opacity: 0.85;
}

.bsw-hero__chip-text {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    font-style: italic;
    color: var(--bs-body-color);
    opacity: 0.92;
}

/* Stack to a single column on narrow viewports */
@media (max-width: 991.98px) {
    .bsw-hero__stage {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .bsw-hero__floats {
        min-height: 0;
        height: 13rem;
        max-width: 24rem;
        margin-inline: auto;
    }
    .bsw-hero__chip--stat { right: 2%; }
    .bsw-hero__chip--quote { left: 2%; }
}

@media (prefers-reduced-motion: reduce) {
    .bsw-hero__chip { transform: none; }
}

/* Floating iridescent orbs behind the glass card */
.bsw-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
    animation: bsw-float 14s ease-in-out infinite;
}
.bsw-hero__orb--1 {
    width: clamp(12rem, 28vw, 22rem); height: clamp(12rem, 28vw, 22rem);
    top: -4rem; left: -3rem;
    background: radial-gradient(circle, rgba(255, 92, 168, 0.9), transparent 70%);
}
.bsw-hero__orb--2 {
    width: clamp(10rem, 24vw, 18rem); height: clamp(10rem, 24vw, 18rem);
    bottom: -3rem; right: -2rem;
    background: radial-gradient(circle, rgba(72, 162, 255, 0.9), transparent 70%);
    animation-delay: -5s;
}
.bsw-hero__orb--3 {
    width: clamp(9rem, 20vw, 15rem); height: clamp(9rem, 20vw, 15rem);
    top: 30%; right: 22%;
    background: radial-gradient(circle, rgba(138, 92, 255, 0.85), transparent 70%);
    animation-delay: -9s;
}

@keyframes bsw-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(0, -1.5rem, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .bsw-hero__orb { animation: none; }
}

/* ---- Section rhythm ------------------------------------------------------- */
.bsw-section { padding: clamp(3rem, 7vw, 5rem) 0; }
main > section { scroll-margin-top: 5rem; }

.section-title { text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-title h2 { font-weight: 700; }
.section-title p { color: var(--bs-body-color); opacity: 0.85; }

/* ---- Glass cards across generic sections ---------------------------------- */
.services .card,
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.services .card:hover,
.glass-card:hover {
    transform: translateY(-6px);
    background: var(--glass-bg-strong);
    box-shadow: 0 2rem 4rem rgba(31, 18, 53, 0.34);
}
.services .card .card-text { color: var(--bs-body-color); opacity: 0.85; }

/* ---- Contact -------------------------------------------------------------- */
#contact a { text-decoration: none; }
#contact a:hover { text-decoration: underline; }

/* ---- Footer --------------------------------------------------------------- */
.bsw-footer a { text-decoration: none; }
.bsw-footer a:hover { color: var(--bs-primary) !important; }

/* Quartz : en mode CLAIR, --bs-body-color est BLANC (pensé pour le body violet).
   Le footer utilise bg-body-tertiary (clair) -> texte blanc sur blanc. On force
   donc la palette claire dans le footer, UNIQUEMENT en mode clair. En mode nuit
   (bascule via theme-toggle.js) la règle ne s'applique plus et le footer garde
   sa palette sombre cohérente (texte clair sur fond sombre). */
[data-bs-theme="light"] .bsw-footer {
    --bs-body-color: #212529;
    --bs-secondary-color: rgba(33, 37, 41, .7);
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-border-color: rgba(0, 0, 0, .15);
    color: #212529;
}

/* ---- Bespoke glass sections: projects / team / testimonials / faq --------- */
/* Muted metadata that stays legible on the frosted panels (no Bootstrap grey) */
.glass-card .bsw-meta { color: var(--bs-body-color); opacity: 0.72; }
.glass-card .card-text { color: var(--bs-body-color); opacity: 0.85; }

/* Glass cards already carry the frosted look; just keep media flush to edges */
.glass-card .card-img-top { border-radius: 0; }

/* Team — photo-less avatar placeholder as a tinted glass panel */
.bsw-avatar-fallback {
    background: rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid var(--glass-border);
}
.bsw-team-social a {
    color: var(--bs-body-color);
    opacity: 0.7;
    font-size: 1.1rem;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.bsw-team-social a:hover,
.bsw-team-social a:focus-visible {
    opacity: 1;
    color: var(--bs-primary);
}

/* Testimonials — quote mark + attribution */
.testimonials .bsw-meta { color: var(--bs-body-color); opacity: 0.72; }

/* FAQ — translucent accordion that matches the glass language */
.bsw-faq .accordion-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
.bsw-faq .accordion-button {
    background: transparent;
    color: var(--bs-body-color);
    font-weight: 600;
    border-radius: var(--glass-radius);
}
.bsw-faq .accordion-button:not(.collapsed) {
    background: rgba(var(--bs-primary-rgb), 0.18);
    color: var(--bs-body-color);
    box-shadow: none;
}
.bsw-faq .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
}
.bsw-faq .accordion-body {
    color: var(--bs-body-color);
    opacity: 0.85;
}

/* ---- Bespoke glass sections: about / skills / stats / resume -------------- */
/* About — frosted panel image + readable body on glass */
.about .bsw-about-img {
    box-shadow: var(--glass-shadow);
    border: 1px solid var(--glass-border);
}
.about .bsw-about-lead { color: var(--bs-body-color); opacity: 0.92; }
.about .bsw-about-list li { color: var(--bs-body-color); opacity: 0.9; }
.about .bsw-about-list a { color: var(--bs-primary); text-decoration: none; }
.about .bsw-about-list a:hover,
.about .bsw-about-list a:focus-visible { text-decoration: underline; }

/* Skills — translucent track so the primary bar reads on the gradient */
.skills .bsw-skill-progress {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    overflow: hidden;
}
.skills .glass-card .bsw-meta { color: var(--bs-body-color); opacity: 0.72; }

/* Stats — emphatic figures floating inside one glass panel */
.stats .bsw-meta { color: var(--bs-body-color); opacity: 0.78; }

/* Resume — glass timeline rail tinted with the primary accent */
.resume .bsw-timeline {
    border-left: 3px solid rgba(var(--bs-primary-rgb), 0.55);
}
.resume .bsw-timeline-item { position: relative; }
.resume .bsw-timeline-item::before {
    content: "";
    position: absolute;
    left: calc(-1.5rem - 6px);
    top: 0.45rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.22);
}
.resume .glass-card .bsw-meta { color: var(--bs-body-color); opacity: 0.78; }

/* Opaque-ish fallback for the new translucent surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .skills .bsw-skill-progress { background: rgba(255, 255, 255, 0.28); }
}

@media (prefers-reduced-motion: reduce) {
    .glass-card { transition: none; }
    .glass-card:hover { transform: none; }
}

/* ---- Bespoke glass sections: publications / events / resources / blog ----- */
/* Tinted glass badge that matches the primary accent (no Bootstrap subtle grey) */
.bsw-badge {
    background: rgba(var(--bs-primary-rgb), 0.20);
    color: var(--bs-body-color);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.45);
    font-weight: 600;
}

/* Publications — single frosted panel with translucent dividers between items */
.bsw-pub-item + .bsw-pub-item {
    border-top: 1px solid var(--glass-border);
}
.bsw-pub-link {
    color: var(--bs-body-color);
    transition: color 0.2s ease;
}
.bsw-pub-link:hover,
.bsw-pub-link:focus-visible {
    color: var(--bs-primary);
}
.bsw-pub-item em { font-style: italic; }

/* Events / resources / blog reuse .glass-card; keep media flush to the edges */
.events .glass-card .card-img-top,
.blog .glass-card .card-img-top { border-radius: 0; }

/* Readable body + metadata on the frosted panels */
.events .glass-card .card-text,
.resources .glass-card .card-text,
.blog .glass-card .card-text { color: var(--bs-body-color); opacity: 0.85; }
.publications .bsw-meta,
.events .bsw-meta,
.resources .bsw-meta,
.blog .bsw-meta { color: var(--bs-body-color); opacity: 0.72; }

/* Opaque-ish fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bsw-pub-list { background: rgba(76, 51, 128, 0.82); }
    .bsw-badge { background: rgba(var(--bs-primary-rgb), 0.45); }
}

/* ---- Bespoke pages: blog list/detail + project list/detail ---------------- */
/* These pages reuse .glass-card; below adds page-only chrome that stays legible
   on the gradient (no Bootstrap grey / -subtle utilities). */

/* Breadcrumb on glass — translucent pill, primary links, readable separators */
.bsw-breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
.bsw-breadcrumb .breadcrumb-item a {
    color: var(--bs-primary);
    text-decoration: none;
}
.bsw-breadcrumb .breadcrumb-item a:hover,
.bsw-breadcrumb .breadcrumb-item a:focus-visible { text-decoration: underline; }
.bsw-breadcrumb .breadcrumb-item.active { color: var(--bs-body-color); opacity: 0.78; }
.bsw-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-body-color);
    opacity: 0.55;
}

/* Long-form content inside a glass panel — readable copy, accent headings/links */
.bsw-prose,
.bsw-prose p,
.bsw-prose li { color: var(--bs-body-color); }
.bsw-prose p,
.bsw-prose ul,
.bsw-prose ol { opacity: 0.9; }
.bsw-prose h1,
.bsw-prose h2,
.bsw-prose h3,
.bsw-prose h4,
.bsw-prose h5,
.bsw-prose h6 { color: var(--bs-body-color); }
.bsw-prose .lead { color: var(--bs-body-color); opacity: 0.95; }
.bsw-prose a { color: var(--bs-primary); }
.bsw-prose blockquote {
    border-left: 3px solid rgba(var(--bs-primary-rgb), 0.55);
    padding-left: 1rem;
    margin-left: 0;
    opacity: 0.92;
}
.bsw-prose img { max-width: 100%; height: auto; border-radius: 0.75rem; }
.bsw-prose pre,
.bsw-prose code {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 0.5rem;
}
.bsw-prose pre { padding: 1rem; overflow-x: auto; }
.bsw-prose code { padding: 0.1rem 0.35rem; }

/* Timeline list inside the prose glass panel — translucent rows + dividers */
.bsw-timeline-list { --bs-list-group-bg: transparent; }
.bsw-timeline-list .list-group-item {
    background: transparent;
    color: var(--bs-body-color);
    border-color: var(--glass-border);
}

/* Empty-state panel (replaces Bootstrap alert-info, which clashes with glass) */
.bsw-empty { color: var(--bs-body-color); opacity: 0.92; }

/* Pagination on glass — translucent controls, primary active page */
.bsw-pagination .page-link {
    color: var(--bs-body-color);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
.bsw-pagination .page-link:hover,
.bsw-pagination .page-link:focus-visible {
    color: var(--bs-body-color);
    background: var(--glass-bg-strong);
    border-color: var(--glass-border);
}
.bsw-pagination .page-item.active .page-link {
    color: #fff;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}
.bsw-pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
}

/* Readable metadata + body on the bespoke pages (no Bootstrap text-muted grey) */
.blog .bsw-meta,
.projects .bsw-meta { color: var(--bs-body-color); opacity: 0.72; }
.blog .glass-card .card-text,
.projects .glass-card .card-text { color: var(--bs-body-color); opacity: 0.85; }
.blog .glass-card .card-img-top,
.projects .glass-card .card-img-top { border-radius: 0; }

/* Opaque-ish fallback where backdrop-filter is unsupported (keeps text legible) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bsw-breadcrumb,
    .bsw-pagination .page-link { background: rgba(76, 51, 128, 0.82); }
    .bsw-prose pre,
    .bsw-prose code { background: rgba(255, 255, 255, 0.22); }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 575.98px) {
    :root { --glass-blur: 12px; }
    .bsw-hero { padding: 3.5rem 0; }
    .bsw-hero__orb--3 { display: none; }
    .resume .bsw-timeline-item::before { left: calc(-1.5rem - 5px); }
    .bsw-breadcrumb { font-size: 0.85rem; }
}

/* ===== Phase 7 — content pages ===== */
/* Bespoke content pages (events / jobs / services / resources / team / faq /
   publications, list + detail). They reuse the glass language already defined
   above (.glass-card, .bsw-section, .bsw-breadcrumb, .bsw-prose, .bsw-badge,
   .bsw-empty, .bsw-timeline-list, .bsw-avatar-fallback, .bsw-team-social).
   Below only adds the few page-only accents + readability scoping so muted
   text stays legible on the gradient (no Bootstrap grey / -subtle utilities). */

/* Readable metadata + body across every Phase 7 section wrapper */
.events .bsw-meta,
.jobs .bsw-meta,
.services .bsw-meta,
.resources .bsw-meta,
.team .bsw-meta,
.publications .bsw-meta { color: var(--bs-body-color); opacity: 0.72; }

.events .glass-card .card-text,
.jobs .glass-card .card-text,
.services .glass-card .card-text,
.resources .glass-card .card-text,
.team .glass-card .card-text { color: var(--bs-body-color); opacity: 0.85; }

/* Definition lists on the publication detail panel read as muted labels */
.publications .bsw-prose dt { font-weight: 600; }
.publications .bsw-prose dd { color: var(--bs-body-color); opacity: 0.9; }

/* Events list — accented date line above the title */
.bsw-event-date {
    color: var(--bs-primary);
    font-weight: 600;
    text-shadow: 0 1px 10px rgba(31, 18, 53, 0.25);
}

/* Services list — primary glyph badge for the optional icon */
.bsw-service-icon { color: var(--bs-primary); line-height: 1; }

/* Service "what's included" rows reuse the translucent timeline-list styling;
   keep the accent icons aligned with the frosted dividers */
.services .bsw-timeline-list .list-group-item { padding-left: 0; padding-right: 0; }

/* Team detail — frosted social bar sits flush under the photo panel */
.team .bsw-team-social { border-top: 1px solid var(--glass-border); }

/* Sticky aside on detail pages should not crowd the sticky navbar on desktop */
@media (min-width: 992px) {
    .events .sticky-lg-top,
    .jobs .sticky-lg-top,
    .services .sticky-lg-top { z-index: 1; }
}

/* Mobile-first: drop the sticky aside offset on small screens where it stacks */
@media (max-width: 991.98px) {
    .events .sticky-lg-top,
    .jobs .sticky-lg-top,
    .services .sticky-lg-top { position: static !important; top: auto !important; }
}

/* Icône du bascule jour/nuit : héritait du blanc -> invisible sur navbar claire.
   On la cale sur --bs-emphasis-color (sombre en jour, clair en nuit). */
.theme-toggle-btn { color: var(--bs-emphasis-color) !important; }

/* AUDIT AA : badge danger orange -> texte sombre (blanc échoue). */
.badge.bg-danger, .badge.text-bg-danger { color: #2a1300 !important; }