/* themes/bootswatch_yeti/css/style.css — Yeti: friendly, flat, approachable.
   Full-bleed flat primary band hero (white text), flat bordered cards,
   minimal shadows. Builds on Bootswatch Yeti --bs-* variables. */

/* ---------- Hero: friendly band + floating action bar ----------
   A full-bleed flat primary band (white text, centered) with a large
   rounded white "action bar" panel that floats over the band's bottom edge. */
.bsw-hero {
    position: relative;
    /* room at the bottom for the action bar to overhang the band */
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* The colored band itself; extra bottom padding so its lower edge sits
   behind the floating bar, then the bar is pulled up over that edge. */
.bsw-hero__band {
    background-color: var(--bs-primary);
    color: #fff;
    text-align: center;
    padding-top: clamp(3.5rem, 10vw, 7rem);
    padding-bottom: clamp(4.5rem, 9vw, 7rem);
}

.bsw-hero__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.35rem 0.9rem;
    border-radius: 50rem;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: clamp(0.72rem, 1.4vw, 0.8rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bsw-hero__title {
    color: #fff;
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    line-height: 1.1;
    margin-bottom: 1rem;
}

.bsw-hero__lead {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    max-width: 44ch;
    margin-inline: auto;
}

/* Floating action bar: a big pill panel overhanging the band's bottom edge */
.bsw-hero__bar {
    position: relative;
    /* pull the bar up so it overlaps the colored band above */
    margin-top: clamp(-3.5rem, -6vw, -2.5rem);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.6rem 0.6rem 1.5rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 50rem;
    box-shadow: 0 1rem 2.5rem rgba(var(--bs-primary-rgb), 0.18);
}

/* Styled, NON-functional input-look placeholder (decorative only) */
.bsw-hero__bar-field {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.1rem;
    border-radius: 50rem;
    background-color: rgba(var(--bs-primary-rgb), 0.06);
    color: var(--bs-secondary-color);
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

.bsw-hero__bar-btn {
    flex: 0 0 auto;
    border-radius: 50rem;
    padding-inline: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 600;
    box-shadow: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bsw-hero__bar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.25rem rgba(var(--bs-primary-rgb), 0.25);
}

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

/* Alternating flat zebra bands for clear hierarchy */
main > section:nth-of-type(even) {
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}

/* Section titles: simple, centered, with a short flat accent rule */
.section-title,
main > section .section-title {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-title h2 {
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.section-title h2::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin: 0.85rem auto 0;
    background-color: var(--bs-primary);
    border-radius: 50rem;
}
.section-title p {
    color: var(--bs-secondary-color);
    max-width: 50ch;
    margin-inline: auto;
}

/* ---------- Flat cards: thin borders, minimal shadow ---------- */
.card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    box-shadow: none;
    background-color: var(--bs-body-bg);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
    transform: translateY(-3px);
    border-color: var(--bs-primary);
    box-shadow: 0 0.5rem 1.25rem rgba(var(--bs-primary-rgb), 0.1);
}
.card .card-title a {
    color: var(--bs-body-color);
    transition: color 0.12s ease;
}
.card:hover .card-title a {
    color: var(--bs-primary);
}

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

/* ---------- Responsive niceties ---------- */
@media (max-width: 575.98px) {
    /* Action bar stacks: round panel, field over full-width button */
    .bsw-hero__bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        padding: 0.85rem;
        border-radius: var(--bs-border-radius-lg, 0.5rem);
    }
    .bsw-hero__bar-field {
        justify-content: center;
        text-align: center;
    }
    .bsw-hero__bar-btn {
        width: 100%;
    }
}

/* =====================================================================
   Phase 3 — bespoke home section overrides (friendly flat / Yeti)
   Builds on --bs-primary, --bs-primary-rgb, --bs-body-bg, --bs-body-color.
   ===================================================================== */

/* Flat pill-ish buttons shared across sections */
.bsw-flat-btn {
    border-radius: 50rem;
    font-weight: 600;
    box-shadow: none;
    transition: transform 0.12s ease, background-color 0.12s ease,
                color 0.12s ease, border-color 0.12s ease;
}
.bsw-flat-btn:hover {
    transform: translateY(-2px);
}

/* Friendly flat badge */
.bsw-badge {
    background-color: var(--bs-primary);
    color: #fff;
    font-weight: 600;
    border-radius: 50rem;
    padding: 0.35em 0.7em;
}

/* Muted meta line (category, role) */
.bsw-meta {
    color: var(--bs-secondary-color);
}

/* ---------- Projects ---------- */
.bsw-project-card {
    overflow: hidden;
}
.bsw-project-card__img {
    height: 220px;
    object-fit: cover;
}

/* ---------- Team ---------- */
.bsw-team-card {
    overflow: hidden;
}
.bsw-team-card__img,
.bsw-team-card__placeholder {
    height: 240px;
}
.bsw-team-card__img {
    object-fit: cover;
}
.bsw-team-card__placeholder {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}
.bsw-team-card__social a {
    color: var(--bs-secondary-color);
    font-size: 1.05rem;
    text-decoration: none;
    transition: color 0.12s ease;
}
.bsw-team-card__social a:hover {
    color: var(--bs-primary);
}

/* ---------- Testimonials ---------- */
.bsw-quote-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    background-color: var(--bs-body-bg);
    box-shadow: none;
    /* friendly accent rule on the leading edge */
    border-inline-start: 3px solid var(--bs-primary);
    transition: transform 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease;
}
.bsw-quote-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1.25rem rgba(var(--bs-primary-rgb), 0.1);
}
.bsw-quote-card__mark {
    color: var(--bs-primary);
    font-size: 2.25rem;
}
.bsw-quote-card__text {
    color: var(--bs-body-color);
}
.bsw-quote-card__avatar {
    width: 56px;
    height: 56px;
    object-fit: cover;
    flex: 0 0 auto;
}

/* ---------- FAQ ---------- */
.bsw-faq__item {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius, 0.375rem);
    overflow: hidden;
    background-color: var(--bs-body-bg);
}
.bsw-faq__btn {
    font-weight: 600;
    box-shadow: none;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.bsw-faq__btn:not(.collapsed) {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.06);
    box-shadow: none;
}
.bsw-faq__btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}
.bsw-faq__btn::after {
    transition: transform 0.2s ease;
}

/* ---------- About ---------- */
.bsw-about__img {
    border: 1px solid var(--bs-border-color);
    box-shadow: none;
    width: 100%;
    object-fit: cover;
}
.bsw-about__facts a {
    color: var(--bs-primary);
    text-decoration: none;
}
.bsw-about__facts a:hover {
    text-decoration: underline;
}
.bsw-about__icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    margin-inline-end: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50rem;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

/* ---------- Skills ---------- */
.bsw-skill-card__icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    margin-inline-end: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    border-radius: 50rem;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}
.bsw-skill-card__bar {
    height: 6px;
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    border-radius: 50rem;
}

/* ---------- Stats ---------- */
.bsw-stats__item {
    padding: 1.5rem 0.75rem;
}
.bsw-stats__icon {
    display: block;
    font-size: 2.25rem;
    color: var(--bs-primary);
    margin-bottom: 0.5rem;
}
.bsw-stats__value {
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 2.75rem);
    line-height: 1.1;
    margin-bottom: 0.25rem;
    color: var(--bs-primary);
}
.bsw-stats__unit {
    font-size: 0.5em;
    font-weight: 600;
}

/* ---------- Resume (flat timeline) ---------- */
.bsw-timeline {
    border-inline-start: 2px solid rgba(var(--bs-primary-rgb), 0.25);
    padding-inline-start: 1.5rem;
}
.bsw-timeline__item {
    position: relative;
    padding-bottom: 1.5rem;
}
.bsw-timeline__item:last-child {
    padding-bottom: 0;
}
.bsw-timeline__item::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(-1.5rem - 6px);
    top: 0.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50rem;
    background-color: var(--bs-primary);
    border: 2px solid var(--bs-body-bg);
}

/* ---------- Services ---------- */
.bsw-service-card__icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: var(--bs-border-radius, 0.375rem);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}
.bsw-service-card__more {
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 600;
}
.bsw-service-card__more:hover {
    text-decoration: underline;
}

/* =====================================================================
   Phase 5 — list-section previews (publications / events / resources / blog)
   Friendly flat / Yeti. Builds on --bs-primary, --bs-primary-rgb,
   --bs-body-bg, --bs-body-color.
   ===================================================================== */

/* ---------- Publications (flat citation list, no cards) ---------- */
.bsw-pub-item {
    border-bottom: 1px solid var(--bs-border-color);
    border-inline-start: 3px solid transparent;
    padding-inline-start: 1rem;
    margin-inline-start: -1rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.bsw-pub-item:last-child {
    border-bottom: 0;
}
.bsw-pub-item:hover {
    border-inline-start-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}
.bsw-pub-item__title a {
    color: var(--bs-body-color);
    transition: color 0.12s ease;
}
.bsw-pub-item:hover .bsw-pub-item__title a,
.bsw-pub-item__title a:hover {
    color: var(--bs-primary);
}

/* ---------- Events ---------- */
.bsw-event-card {
    overflow: hidden;
}
.bsw-event-card__img {
    height: 180px;
    object-fit: cover;
}
.bsw-event-card__date {
    color: var(--bs-primary);
}

/* ---------- Resources ---------- */
.bsw-resource-card__icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    border-radius: var(--bs-border-radius, 0.375rem);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

/* ---------- Blog ---------- */
.bsw-blog-card {
    overflow: hidden;
}
.bsw-blog-card__img {
    height: 200px;
    object-fit: cover;
}

/* =====================================================================
   Phase 6 — bespoke list/detail pages (blog + projects)
   Friendly flat / Yeti. Builds on --bs-primary, --bs-primary-rgb,
   --bs-body-bg, --bs-body-color, --bs-border-color.
   ===================================================================== */

/* Flat thin-bordered media for detail heroes & galleries (no heavy shadow) */
.bsw-detail-img {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    box-shadow: none;
}

/* Flat pill tags / tech chips (subtle primary tint, no shadow) */
.bsw-tag {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    font-weight: 600;
    border-radius: 50rem;
    padding: 0.4em 0.8em;
    transition: background-color 0.12s ease, color 0.12s ease;
}
a.bsw-tag:hover {
    background-color: var(--bs-primary);
    color: #fff;
}

/* Friendly flat breadcrumb */
.bsw-breadcrumb {
    --bs-breadcrumb-divider-color: var(--bs-secondary-color);
    margin-bottom: 0;
    font-size: 0.9rem;
}
.bsw-breadcrumb a {
    color: var(--bs-primary);
    text-decoration: none;
}
.bsw-breadcrumb a:hover {
    text-decoration: underline;
}
.bsw-breadcrumb .breadcrumb-item.active {
    color: var(--bs-secondary-color);
}

/* Flat pagination: thin borders, primary active fill, no rounding clutter */
.bsw-pagination {
    --bs-pagination-color: var(--bs-body-color);
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-hover-color: var(--bs-primary);
    --bs-pagination-hover-bg: rgba(var(--bs-primary-rgb), 0.06);
    --bs-pagination-hover-border-color: var(--bs-primary);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}
.bsw-pagination .page-link {
    box-shadow: none;
}

/* Lead paragraph on blog detail keeps the muted, friendly tone */
.blog-detail .lead {
    color: var(--bs-secondary-color);
}

/* =====================================================================
   Phase 7 — content pages (events / jobs / publications / resources /
   services / team / faq detail + list pages). Friendly flat / Yeti.
   Reuses existing bsw- components (cards, badge, meta, breadcrumb,
   pagination, faq, tag, detail-img, team-card, event-card, pub-item,
   resource-card). Only the classes below are new. Mobile-first.
   ===================================================================== */

/* ---------- Sidebar / aside info cards (detail pages) ----------
   Flat bordered card that sticks below the navbar on large screens. */
.bsw-aside-card {
    top: 100px;
}
.bsw-aside-card .card-title {
    position: relative;
    padding-bottom: 0.6rem;
    margin-bottom: 0.85rem;
}
.bsw-aside-card .card-title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 2rem;
    height: 3px;
    border-radius: 50rem;
    background-color: var(--bs-primary);
}
.bsw-aside-card .card:hover,
.bsw-aside-card:hover {
    transform: none; /* sidebar shouldn't lift on hover */
}

/* ---------- Urgent badge variant (jobs) ----------
   Same friendly pill as .bsw-badge but a warm danger fill. */
.bsw-badge--urgent {
    background-color: var(--bs-danger);
}

/* ---------- Jobs (flat card, primary accent on the leading edge) ---------- */
.bsw-job-card {
    border-inline-start: 3px solid transparent;
}
.bsw-job-card:hover {
    border-inline-start-color: var(--bs-primary);
}

/* ---------- Services listing cards (image header, flat icon chip) ---------- */
.bsw-service-listing-card {
    overflow: hidden;
}
.bsw-service-listing-card__img {
    height: 200px;
    object-fit: cover;
}

/* ---------- Service detail: "what's included" flat checklist ---------- */
.bsw-included {
    margin: 0;
}
.bsw-included__item {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}
.bsw-included__item:last-child {
    border-bottom: 0;
}
.bsw-included__item i {
    font-size: 1.15rem;
    line-height: 1.4;
}

/* ---------- Publication detail: definition list meta ---------- */
.bsw-pub-meta dt {
    font-weight: 600;
}
.bsw-pub-meta dd {
    margin-bottom: 0.5rem;
}

/* ---------- Team / member placeholder (no photo) ----------
   Reuses .bsw-team-card__placeholder tint; .bsw-detail-img gives the
   member-detail placeholder a flat bordered square that fills its column. */
.bsw-member__placeholder {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    aspect-ratio: 1 / 1;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .bsw-flat-btn,
    .bsw-quote-card,
    .bsw-faq__btn::after,
    .bsw-pub-item,
    .bsw-tag {
        transition: none;
    }
    .bsw-flat-btn:hover,
    .bsw-quote-card:hover {
        transform: none;
    }
}

/* AUDIT AA : eyebrow cyan (blanc sur cyan) -> texte sombre. */
.bsw-hero__eyebrow { color: #06222b !important; }