/* themes/bootswatch_superhero/css/style.css — bespoke "Superhero" polish.
   Concept : base navy ardoise + accent orange punchy, géométrie en biais
   (clip-path), énergie comic / action-movie. Bâti sur les variables --bs-*. */

:root {
    --bsw-edge: rgba(255, 255, 255, 0.08);
    --bsw-elev: rgba(0, 0, 0, 0.35);
}

/* ============================ HERO ============================
   Archétype ANGLED SPLIT BLADE : layout asymétrique 2 zones.
   Gauche = navy (titre énorme + lead + CTA), droite = lame orange
   en biais (clip-path) portant une initiale géante + traînées comic. */
.bsw-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(90% 80% at 0% 110%, rgba(var(--bs-primary-rgb), 0.10), transparent 60%),
        linear-gradient(160deg,
            color-mix(in srgb, var(--bs-body-bg) 100%, #000 0%) 0%,
            color-mix(in srgb, var(--bs-body-bg) 88%, #000 12%) 100%);
}

/* Grille asymétrique : la zone éditoriale est plus large que la lame. */
.bsw-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    width: min(1320px, 100%);
    margin-inline: auto;
    min-height: clamp(440px, 70vh, 720px);
}

/* ----- Zone navy (contenu) ----- */
.bsw-hero__content {
    position: relative;
    z-index: 2;
    padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 4vw, 3.5rem)
             clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 6vw, 5rem);
    max-width: 42rem;
}

/* ----- Lame orange en biais (signature dynamique du thème) ----- */
.bsw-hero__blade {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-left: clamp(-3rem, -6vw, -5rem);
    background:
        linear-gradient(145deg,
            var(--bs-primary),
            color-mix(in srgb, var(--bs-primary) 62%, #000 38%));
    /* Parallélogramme : tranche le côté droit en diagonale. */
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0% 100%);
    box-shadow: -18px 0 50px -20px rgba(var(--bs-primary-rgb), 0.55);
}

/* Initiale / numéro géant gravé dans la lame. */
.bsw-hero__initial {
    font-size: clamp(9rem, 26vw, 22rem);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: color-mix(in srgb, var(--bs-body-bg) 70%, #000 30%);
    text-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
    transform: skewX(-7deg) translateX(8%);
    user-select: none;
    mix-blend-mode: soft-light;
    opacity: 0.85;
}

/* Traînées de vitesse façon comic, par-dessus la lame. */
.bsw-hero__streak {
    position: absolute;
    height: 6px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85));
    border-radius: 99px;
    pointer-events: none;
    transform: rotate(-22deg);
}
.bsw-hero__streak--a { top: 24%; left: 14%; width: 46%; opacity: 0.55; }
.bsw-hero__streak--b { top: 40%; left:  8%; width: 62%; opacity: 0.32; height: 4px; }
.bsw-hero__streak--c { top: 70%; left: 22%; width: 40%; opacity: 0.22; height: 3px; }

.bsw-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.1rem;
    padding: 0.4rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--bs-primary) 45%, transparent);
    border-radius: 99px;
    background: rgba(var(--bs-primary-rgb), 0.10);
    color: var(--bs-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.bsw-hero__spark {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.25);
    animation: bsw-pulse 2.2s ease-in-out infinite;
}

.bsw-hero__title {
    position: relative;
    margin: 0 0 1.4rem;
    font-size: clamp(2.6rem, 6.5vw, 5.25rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
/* Liseré orange biseauté sous le titre — barre d'énergie. */
.bsw-hero__underline {
    display: block;
    width: clamp(90px, 16vw, 160px);
    height: 8px;
    margin-top: 1.35rem;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--bs-primary), transparent);
    transform: skewX(-24deg);
    transform-origin: left;
}

.bsw-hero__lead {
    max-width: 56ch;
    margin: 0 0 2rem;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.6;
    color: var(--bs-secondary-color);
}

.bsw-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

/* CTA principal — orange plein, biseau au survol. */
.bsw-btn-hero {
    position: relative;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding-inline: 1.6rem;
    box-shadow: 0 10px 26px -10px rgba(var(--bs-primary-rgb), 0.7);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bsw-btn-hero:hover,
.bsw-btn-hero:focus-visible {
    transform: translateY(-2px) skewX(-3deg);
    box-shadow: 0 16px 34px -10px rgba(var(--bs-primary-rgb), 0.8);
}
.bsw-btn-ghost {
    font-weight: 700;
    padding-inline: 1.6rem;
    border-width: 2px;
    transition: transform 0.18s ease, background-color 0.18s ease;
}
.bsw-btn-ghost:hover,
.bsw-btn-ghost:focus-visible { transform: translateY(-2px); }

@keyframes bsw-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.25); }
    50%      { box-shadow: 0 0 0 8px rgba(var(--bs-primary-rgb), 0.05); }
}

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

/* Rythme + titres de section homogènes avec l'accent diagonal. */
main > section .section-title h2,
.bsw-section h2 {
    font-weight: 800;
    letter-spacing: -0.01em;
}
main > section .section-title { margin-bottom: clamp(2rem, 5vw, 3rem); }
main > section .section-title h2 {
    position: relative;
    display: inline-block;
    padding-bottom: 0.65rem;
}
main > section .section-title h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 54px;
    height: 4px;
    border-radius: 99px;
    background: var(--bs-primary);
    transform: translateX(-50%) skewX(-22deg);
}
main > section .section-title p { color: var(--bs-secondary-color); }

/* Bandes alternées pour un rythme net entre sections. */
main > section:nth-of-type(even) {
    background: color-mix(in srgb, var(--bs-body-bg) 92%, #fff 8%);
}

/* ========================= CARTES ========================= */
.card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--bsw-edge);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--bs-body-bg) 88%, #fff 12%);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Coin orange en biais qui se révèle au survol. */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 38px 38px 0;
    border-color: transparent var(--bs-primary) transparent transparent;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.card:hover,
.card:focus-within {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--bs-primary) 55%, transparent);
    box-shadow: 0 22px 40px -22px var(--bsw-elev),
                0 0 0 1px rgba(var(--bs-primary-rgb), 0.18);
}
.card:hover::before,
.card:focus-within::before { opacity: 0.9; }

.card .card-title a { color: var(--bs-body-color); transition: color 0.15s ease; }
.card:hover .card-title a { color: var(--bs-primary); }

/* ========================= CONTACT / DIVERS ========================= */
#contact a[href^="mailto:"] {
    color: var(--bs-primary);
    font-weight: 700;
    text-decoration: none;
}
#contact a[href^="mailto:"]:hover { text-decoration: underline; }

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

/* ========================= A11Y / RESPONSIVE ========================= */
:where(a, .btn):focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb), 0.6);
    outline-offset: 2px;
}

/* La lame se simplifie puis le contenu s'empile sous le tablette. */
@media (max-width: 991.98px) {
    .bsw-hero__grid { grid-template-columns: 1fr; min-height: auto; }
    .bsw-hero__content {
        max-width: none;
        padding: clamp(3rem, 9vw, 4.5rem) clamp(1.25rem, 5vw, 2.5rem) 0;
    }
    /* La lame devient un bandeau bas, biseau horizontal. */
    .bsw-hero__blade {
        order: 2;
        margin-left: 0;
        min-height: clamp(160px, 32vw, 240px);
        clip-path: polygon(0 18%, 100% 0, 100% 100%, 0% 100%);
        box-shadow: 0 -16px 40px -22px rgba(var(--bs-primary-rgb), 0.55);
    }
    .bsw-hero__content { order: 1; }
    .bsw-hero__initial { transform: skewX(-7deg); }
}

@media (max-width: 575.98px) {
    .bsw-hero__actions .btn { width: 100%; }
    .bsw-hero__blade { clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%); }
    .bsw-hero__initial { font-size: clamp(7rem, 30vw, 11rem); }
}

@media (prefers-reduced-motion: reduce) {
    .bsw-hero__spark { animation: none; }
    .card,
    .bsw-btn-hero,
    .bsw-btn-ghost { transition: none; }
    .card:hover,
    .card:focus-within { transform: none; }
}

/* =================================================================
   PHASE 3 — overrides bespoke des 4 sections home (comic / biais).
   Tout sur dark bg via --bs-*, accent orange = --bs-primary.
   ================================================================= */

/* Badge orange anguleux réutilisable. */
.bsw-badge {
    background: var(--bs-primary);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.66rem;
    padding: 0.4rem 0.7rem;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
}

/* Lien fléché : la flèche fonce en avant au survol. */
.bsw-link-arrow .bi-arrow-right {
    transition: transform 0.18s ease;
}
.bsw-link-arrow:hover .bi-arrow-right,
.bsw-link-arrow:focus-visible .bi-arrow-right {
    transform: translateX(4px);
}

/* ----------------------------- PROJECTS ----------------------------- */
.bsw-project-card { border-radius: 0.85rem; }
.bsw-project-card__media {
    position: relative;
    overflow: hidden;
}
/* Lame orange en biais sur le visuel — signature du thème. */
.bsw-project-card__media::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--bs-primary), transparent 70%);
    transform: skewX(-22deg) scaleX(1.2);
    transform-origin: left;
}
.bsw-project-card__media .card-img-top {
    transition: transform 0.4s ease;
}
.bsw-project-card:hover .bsw-project-card__media .card-img-top {
    transform: scale(1.05);
}
.bsw-project-card__cat {
    color: var(--bs-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ------------------------------- TEAM ------------------------------- */
.bsw-team-card { border-radius: 0.85rem; }
.bsw-team-card__media {
    position: relative;
    overflow: hidden;
    /* Découpe en biais bas du portrait — énergie diagonale. */
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.bsw-team-card__media .card-img-top { transition: transform 0.4s ease; }
.bsw-team-card:hover .bsw-team-card__media .card-img-top { transform: scale(1.05); }
.bsw-team-card__placeholder {
    background: rgba(var(--bs-primary-rgb), 0.12);
}
.bsw-team-card__role {
    color: var(--bs-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bsw-team-card__social a {
    color: var(--bs-secondary-color);
    font-size: 1.05rem;
    transition: color 0.15s ease, transform 0.15s ease;
    display: inline-block;
}
.bsw-team-card__social a:hover,
.bsw-team-card__social a:focus-visible {
    color: var(--bs-primary);
    transform: translateY(-2px);
}

/* --------------------------- TESTIMONIALS --------------------------- */
.bsw-quote-card {
    border-radius: 0.85rem;
    border-left: 4px solid var(--bs-primary);
}
.bsw-quote-card .card-body { position: relative; }
.bsw-quote-card__mark {
    position: absolute;
    top: 0.4rem;
    right: 1rem;
    font-size: 3.4rem;
    line-height: 1;
    color: var(--bs-primary);
    opacity: 0.22;
    transform: skewX(-10deg);
    pointer-events: none;
}
.bsw-quote-card__text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--bs-body-color);
}
.bsw-quote-card__avatar {
    border: 2px solid var(--bs-primary);
}
.bsw-quote-card__name {
    color: var(--bs-body-color);
    letter-spacing: -0.01em;
}

/* ------------------------------- FAQ -------------------------------- */
.bsw-accordion__item {
    background: color-mix(in srgb, var(--bs-body-bg) 88%, #fff 12%);
    border: 1px solid var(--bsw-edge);
    border-radius: 0.65rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.bsw-accordion__item:has(.accordion-button:not(.collapsed)) {
    border-color: color-mix(in srgb, var(--bs-primary) 55%, transparent);
    box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.18);
}
.bsw-accordion .accordion-button {
    background: transparent;
    color: var(--bs-body-color);
    font-weight: 700;
    box-shadow: none;
}
/* Bouton ouvert : libellé orange + barre d'énergie en biais à gauche. */
.bsw-accordion .accordion-button:not(.collapsed) {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.08);
    position: relative;
}
.bsw-accordion .accordion-button:not(.collapsed)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 99px;
    background: var(--bs-primary);
    transform: skewX(-14deg);
}
.bsw-accordion .accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.45);
}
/* Chevron teinté orange (filtre dérivé du logo Bootstrap). */
.bsw-accordion .accordion-button::after {
    filter: invert(58%) sepia(72%) saturate(1100%) hue-rotate(345deg) brightness(101%);
}
.bsw-accordion .accordion-body {
    color: var(--bs-secondary-color);
    line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
    .bsw-project-card__media .card-img-top,
    .bsw-team-card__media .card-img-top,
    .bsw-link-arrow .bi-arrow-right,
    .bsw-team-card__social a,
    .bsw-accordion__item { transition: none; }
    .bsw-project-card:hover .bsw-project-card__media .card-img-top,
    .bsw-team-card:hover .bsw-team-card__media .card-img-top { transform: none; }
}

/* =================================================================
   PHASE 5 — overrides bespoke des 5 sections home restantes.
   Look navy + orange comic, géométrie en biais, sur dark bg via --bs-*.
   ================================================================= */

/* ------------------------------- ABOUT ------------------------------ */
/* Portrait découpé en biais — signature diagonale du thème. */
.bsw-about__media {
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    border-bottom: 5px solid var(--bs-primary);
}
.bsw-about__media img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}
.bsw-about:hover .bsw-about__media img { transform: scale(1.04); }
.bsw-about__title {
    position: relative;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
}
.bsw-about__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 4px;
    border-radius: 99px;
    background: var(--bs-primary);
    transform: skewX(-22deg);
    transform-origin: left;
}
.bsw-about__lead {
    color: var(--bs-secondary-color);
    font-size: 1.08rem;
    line-height: 1.6;
}
.bsw-about__facts { display: grid; gap: 0.65rem; margin-top: 1.25rem; }
.bsw-about__facts li {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    color: var(--bs-body-color);
}
.bsw-about__facts li i {
    color: var(--bs-primary);
    flex: 0 0 auto;
}
.bsw-about__facts a {
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 600;
}
.bsw-about__facts a:hover { text-decoration: underline; }

/* ------------------------------- SKILLS ----------------------------- */
.bsw-skill {
    height: 100%;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--bsw-edge);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--bs-body-bg) 88%, #fff 12%);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.bsw-skill:hover,
.bsw-skill:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--bs-primary) 55%, transparent);
    box-shadow: 0 18px 34px -22px var(--bsw-elev),
                0 0 0 1px rgba(var(--bs-primary-rgb), 0.18);
}
.bsw-skill__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-right: 0.9rem;
    flex: 0 0 auto;
    font-size: 1.2rem;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.12);
    /* Pastille anguleuse comic. */
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%);
}
.bsw-skill__name { font-weight: 700; letter-spacing: -0.01em; }
.bsw-skill__pct { color: var(--bs-primary); font-weight: 700; }
.bsw-skill__progress {
    background: rgba(var(--bs-primary-rgb), 0.12);
    border-radius: 99px;
    overflow: hidden;
    transform: skewX(-12deg);
}
.bsw-skill__progress .progress-bar { transform: skewX(12deg) scaleX(1.05); }

/* ------------------------------- STATS ------------------------------ */
.bsw-stat {
    position: relative;
    padding: 1.5rem 0.75rem;
}
/* Liseré orange en biais sous chaque chiffre clé. */
.bsw-stat::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.5rem;
    width: 42px;
    height: 4px;
    border-radius: 99px;
    background: var(--bs-primary);
    transform: translateX(-50%) skewX(-22deg);
    opacity: 0.85;
}
.bsw-stat__icon {
    display: block;
    font-size: 2.4rem;
    color: var(--bs-primary);
    margin-bottom: 0.5rem;
}
.bsw-stat__value {
    font-size: clamp(2.2rem, 5vw, 3.1rem);
    font-weight: 800;
    line-height: 1;
    color: var(--bs-primary);
    letter-spacing: -0.02em;
}
.bsw-stat__unit { font-size: 1.4rem; font-weight: 800; }
.bsw-stat__label {
    margin-top: 0.6rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ------------------------------- RESUME ----------------------------- */
.bsw-resume__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.bsw-resume__head i { color: var(--bs-primary); }
/* Timeline avec rail orange en biais. */
.bsw-resume__timeline {
    position: relative;
    padding-left: 1.5rem;
}
.bsw-resume__timeline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 4px;
    border-radius: 99px;
    background: linear-gradient(180deg,
        var(--bs-primary),
        color-mix(in srgb, var(--bs-primary) 35%, transparent));
    transform: skewX(-10deg);
}
.bsw-resume__item {
    position: relative;
    margin-bottom: 1.6rem;
}
.bsw-resume__item:last-child { margin-bottom: 0; }
/* Marqueur losange orange façon comic. */
.bsw-resume__item::before {
    content: "";
    position: absolute;
    left: -1.78rem;
    top: 0.4rem;
    width: 11px;
    height: 11px;
    background: var(--bs-primary);
    transform: rotate(45deg);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.18);
}
.bsw-resume__role { font-weight: 700; letter-spacing: -0.01em; }
.bsw-resume__meta { color: var(--bs-primary); font-weight: 600; }

/* ------------------------------ SERVICES ---------------------------- */
.bsw-service-card { border-radius: 0.85rem; }
.bsw-service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    font-size: 1.55rem;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.12);
    /* Tuile anguleuse cohérente avec le reste du thème. */
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}
.bsw-service-card .card-title a { color: var(--bs-body-color); transition: color 0.15s ease; }
.bsw-service-card:hover .card-title a { color: var(--bs-primary); }
.bsw-service-card .bsw-link-arrow {
    color: var(--bs-primary);
    font-weight: 700;
    text-decoration: none;
}
.bsw-service-card .bsw-link-arrow:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .bsw-about__media img,
    .bsw-skill { transition: none; }
    .bsw-about:hover .bsw-about__media img,
    .bsw-skill:hover,
    .bsw-skill:focus-within { transform: none; }
}

/* =================================================================
   PHASE 5 (list sections) — overrides bespoke des aperçus
   publications / events / resources / blog.
   Look navy + orange comic, géométrie en biais, sur dark bg via --bs-*.
   ================================================================= */

/* --------------------------- PUBLICATIONS --------------------------- */
/* Liste de citations académiques : rail orange en biais à gauche. */
.bsw-pub-item {
    position: relative;
    padding: 1rem 0 1rem 1.4rem;
    border-bottom: 1px solid var(--bsw-edge);
    transition: padding-left 0.2s ease;
}
.bsw-pub-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.15rem;
    bottom: 1.15rem;
    width: 4px;
    border-radius: 99px;
    background: linear-gradient(180deg,
        var(--bs-primary),
        color-mix(in srgb, var(--bs-primary) 30%, transparent));
    transform: skewX(-12deg);
    opacity: 0.45;
    transition: opacity 0.2s ease;
}
.bsw-pub-item:hover,
.bsw-pub-item:focus-within { padding-left: 1.75rem; }
.bsw-pub-item:hover::before,
.bsw-pub-item:focus-within::before { opacity: 1; }
.bsw-pub-item__title a {
    color: var(--bs-body-color);
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: color 0.15s ease;
}
.bsw-pub-item:hover .bsw-pub-item__title a,
.bsw-pub-item:focus-within .bsw-pub-item__title a { color: var(--bs-primary); }
.bsw-pub-item__meta { color: var(--bs-secondary-color); }
.bsw-pub-item__meta strong { color: var(--bs-body-color); }
.bsw-pub-item__cat {
    color: var(--bs-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.bsw-pub-item__abstract { color: var(--bs-secondary-color); line-height: 1.55; }

/* ------------------------------- EVENTS ----------------------------- */
.bsw-event-card { border-radius: 0.85rem; }
.bsw-event-card__media {
    position: relative;
    overflow: hidden;
}
/* Lame orange en biais sous le visuel — signature du thème. */
.bsw-event-card__media::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--bs-primary), transparent 70%);
    transform: skewX(-22deg) scaleX(1.2);
    transform-origin: left;
}
.bsw-event-card__media .card-img-top { transition: transform 0.4s ease; }
.bsw-event-card:hover .bsw-event-card__media .card-img-top { transform: scale(1.05); }
.bsw-event-card__date {
    color: var(--bs-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bsw-event-card__loc { color: var(--bs-secondary-color); }

/* ------------------------------ RESOURCES --------------------------- */
.bsw-resource-card { border-radius: 0.85rem; }
.bsw-resource-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.5rem;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.12);
    /* Tuile anguleuse comic cohérente avec le reste du thème. */
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}
.bsw-resource-card__size { color: var(--bs-secondary-color); }

/* -------------------------------- BLOG ------------------------------ */
.bsw-blog-card { border-radius: 0.85rem; }
.bsw-blog-card__media {
    position: relative;
    overflow: hidden;
}
/* Lame orange en biais sous le visuel — signature du thème. */
.bsw-blog-card__media::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--bs-primary), transparent 70%);
    transform: skewX(-22deg) scaleX(1.2);
    transform-origin: left;
}
.bsw-blog-card__media .card-img-top { transition: transform 0.4s ease; }
.bsw-blog-card:hover .bsw-blog-card__media .card-img-top { transform: scale(1.05); }
.bsw-blog-card__date {
    color: var(--bs-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.bsw-blog-card__cat {
    color: var(--bs-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
    .bsw-pub-item,
    .bsw-pub-item::before,
    .bsw-event-card__media .card-img-top,
    .bsw-blog-card__media .card-img-top { transition: none; }
    .bsw-pub-item:hover,
    .bsw-pub-item:focus-within { padding-left: 1.4rem; }
    .bsw-event-card:hover .bsw-event-card__media .card-img-top,
    .bsw-blog-card:hover .bsw-blog-card__media .card-img-top { transform: none; }
}

/* =================================================================
   PHASE 6 — pages bespoke (blog list/detail, project list/detail).
   Look navy + orange comic, géométrie en biais, sur dark bg via --bs-*.
   ================================================================= */

/* ----- Helper muted (sur fond sombre, lisible) ----- */
.bsw-muted { color: var(--bs-secondary-color); }

/* ---------------------- FILTRES (catégories) ----------------------- */
/* Pilules de filtre anguleuses cohérentes avec le thème. */
.bsw-filter {
    font-weight: 700;
    letter-spacing: 0.02em;
    border-width: 2px;
    transition: transform 0.16s ease, background-color 0.16s ease;
}
.bsw-filter:hover,
.bsw-filter:focus-visible { transform: translateY(-2px); }

/* --------------------------- PAGINATION ---------------------------- */
.bsw-pagination { gap: 0.35rem; }
.bsw-pagination .page-link {
    border: 1px solid var(--bsw-edge);
    background: color-mix(in srgb, var(--bs-body-bg) 88%, #fff 12%);
    color: var(--bs-body-color);
    font-weight: 700;
    border-radius: 0.5rem;
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.bsw-pagination .page-link:hover,
.bsw-pagination .page-link:focus-visible {
    color: var(--bs-primary);
    border-color: color-mix(in srgb, var(--bs-primary) 55%, transparent);
    transform: translateY(-2px);
}
.bsw-pagination .page-item.active .page-link {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 8px 20px -10px rgba(var(--bs-primary-rgb), 0.7);
}

/* ----------------------------- ALERTE ------------------------------ */
/* Remplace bg-light/alert-info clair par un encart sombre + accent. */
.bsw-alert {
    background: color-mix(in srgb, var(--bs-body-bg) 88%, #fff 12%);
    border: 1px solid var(--bsw-edge);
    border-left: 4px solid var(--bs-primary);
    border-radius: 0.65rem;
    color: var(--bs-secondary-color);
}
.bsw-alert .bi { color: var(--bs-primary); }

/* --------------------------- FIL D'ARIANE -------------------------- */
.bsw-breadcrumb { margin-bottom: 0; }
.bsw-breadcrumb .breadcrumb-item a {
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}
.bsw-breadcrumb .breadcrumb-item a:hover,
.bsw-breadcrumb .breadcrumb-item a:focus-visible { color: var(--bs-primary); }
.bsw-breadcrumb .breadcrumb-item.active { color: var(--bs-body-color); }
.bsw-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-primary);
    content: "›";
    font-weight: 800;
}

/* --------------------------- BADGES / TAGS ------------------------- */
/* Tag sur dark : remplace bg-light/text-dark & bg-*-subtle clairs. */
.bsw-tag {
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 35%, transparent);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background-color 0.15s ease, color 0.15s ease;
}
a.bsw-tag:hover,
a.bsw-tag:focus-visible {
    background: var(--bs-primary);
    color: #fff;
}

/* ----------------------- VISUEL EN-TÊTE (hero) --------------------- */
/* Image principale article/projet : découpe en biais bas + liseré. */
.bsw-article__hero {
    position: relative;
    overflow: hidden;
    border-radius: 0.85rem;
    clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
    border-bottom: 5px solid var(--bs-primary);
}
.bsw-article__hero img { width: 100%; display: block; }

/* ------------------------------ ARTICLE ---------------------------- */
.bsw-article__title {
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
    text-wrap: balance;
}
.bsw-article__meta { color: var(--bs-secondary-color); }
.bsw-article__meta .bi { color: var(--bs-primary); }
/* Lead avec barre d'énergie orange en biais à gauche. */
.bsw-article__lead {
    position: relative;
    padding-left: 1.1rem;
    color: var(--bs-body-color);
    font-weight: 500;
    line-height: 1.6;
}
.bsw-article__lead::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 4px;
    border-radius: 99px;
    background: var(--bs-primary);
    transform: skewX(-12deg);
}

/* Contenu riche : liens & titres orange, listes lisibles sur dark. */
.bsw-prose { color: var(--bs-secondary-color); line-height: 1.7; }
.bsw-prose :where(h1, h2, h3, h4, h5, h6) {
    color: var(--bs-body-color);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.bsw-prose a { color: var(--bs-primary); text-decoration: none; font-weight: 600; }
.bsw-prose a:hover,
.bsw-prose a:focus-visible { text-decoration: underline; }
.bsw-prose img { max-width: 100%; height: auto; border-radius: 0.65rem; }
.bsw-prose blockquote {
    margin: 1.25rem 0;
    padding: 0.75rem 1.1rem;
    border-left: 4px solid var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-body-color);
}
.bsw-prose code {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    padding: 0.1rem 0.35rem;
    border-radius: 0.3rem;
}

/* Titre de bloc/section interne avec icône orange. */
.bsw-block-head {
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--bs-body-color);
}
.bsw-block-head .bi { color: var(--bs-primary); }

/* Lien retour : la flèche recule au survol. */
.bsw-link-back .bi-arrow-left { transition: transform 0.18s ease; }
.bsw-link-back:hover .bi-arrow-left,
.bsw-link-back:focus-visible .bi-arrow-left { transform: translateX(-4px); }

/* ----------------------- CARTE LATÉRALE (aside) -------------------- */
/* Remplace les card border-0 shadow-sm claires par un encart sombre. */
.bsw-aside-card {
    border: 1px solid var(--bsw-edge);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--bs-body-bg) 88%, #fff 12%);
}
/* Coin orange permanent (signal d'info latérale). */
.bsw-aside-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 30px 0;
    border-color: transparent var(--bs-primary) transparent transparent;
    opacity: 0.85;
}
.bsw-aside-card .card-body { position: relative; }
.bsw-aside-card__title {
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--bs-body-color);
}
.bsw-aside-card__title .bi { color: var(--bs-primary); }
.bsw-aside-list li { color: var(--bs-secondary-color); }
.bsw-aside-list .bi { color: var(--bs-primary); }
.bsw-aside-list strong { color: var(--bs-body-color); }

/* ----------------------------- TIMELINE --------------------------- */
/* Reprend le rail orange en biais des sections (cohérence thème). */
.bsw-timeline {
    position: relative;
    padding-left: 1.5rem;
}
.bsw-timeline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 4px;
    border-radius: 99px;
    background: linear-gradient(180deg,
        var(--bs-primary),
        color-mix(in srgb, var(--bs-primary) 35%, transparent));
    transform: skewX(-10deg);
}
.bsw-timeline__item {
    position: relative;
    margin-bottom: 1.1rem;
}
.bsw-timeline__item:last-child { margin-bottom: 0; }
.bsw-timeline__item strong { color: var(--bs-body-color); }

/* ----------------------------- MÉTRIQUES -------------------------- */
.bsw-metric-card {
    border: 1px solid var(--bsw-edge);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--bs-body-bg) 88%, #fff 12%);
}
.bsw-metric-card__icon { color: var(--bs-primary); }
.bsw-metric-card__value {
    color: var(--bs-primary);
    letter-spacing: -0.02em;
}

/* ------------------------------ GALERIE --------------------------- */
.bsw-figure { margin-bottom: 0; }
.bsw-figure__media {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
}
/* Lame orange en biais sous le visuel — signature du thème. */
.bsw-figure__media::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--bs-primary), transparent 70%);
    transform: skewX(-22deg) scaleX(1.2);
    transform-origin: left;
}
.bsw-figure__media img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}
.bsw-figure:hover .bsw-figure__media img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
    .bsw-filter,
    .bsw-pagination .page-link,
    .bsw-tag,
    .bsw-link-back .bi-arrow-left,
    .bsw-figure__media img { transition: none; }
    .bsw-filter:hover,
    .bsw-filter:focus-visible,
    .bsw-pagination .page-link:hover,
    .bsw-pagination .page-link:focus-visible { transform: none; }
    .bsw-figure:hover .bsw-figure__media img { transform: none; }
}

/* =================================================================
   PHASE 7 — content pages (events, faq, jobs, publications,
   resources, services, team — list + detail).
   Réutilise au maximum les composants bsw-* existants (event-card,
   pub-item, resource-card, service-card, team-card, accordion,
   aside-card, prose, breadcrumb, badge, alert…). N'ajoute ici que
   les classes spécifiques aux nouvelles pages. Look navy + orange
   comic, géométrie en biais, sur dark bg via --bs-*.
   ================================================================= */

/* ----- Badge variante "urgent" (rouge danger, même géométrie) ----- */
.bsw-badge--urgent {
    background: var(--bs-danger);
}

/* ------------------------------- JOBS ------------------------------ */
/* Carte offre d'emploi : même base que les cartes du thème, accents. */
.bsw-job-card { border-radius: 0.85rem; }
.bsw-job-card__cat {
    color: var(--bs-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.bsw-job-card__meta { color: var(--bs-secondary-color); }
.bsw-job-card__meta .bi { color: var(--bs-primary); }

/* --------------------- PUBLICATION (detail dl) --------------------- */
/* Liste de définition lisible sur dark, libellés orange discrets. */
.bsw-deflist dt {
    color: var(--bs-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
}
.bsw-deflist dd { color: var(--bs-body-color); margin-bottom: 0.4rem; }

/* ---------------------- SERVICE (what's included) ------------------ */
/* Remplace list-group clair par des lignes sombres à puce en biais. */
.bsw-include-list { margin: 0; }
.bsw-include-list__item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bsw-edge);
    color: var(--bs-body-color);
}
.bsw-include-list__item:last-child { border-bottom: 0; }
.bsw-include-list__item strong { color: var(--bs-body-color); }
.bsw-include-list__icon {
    color: var(--bs-primary);
    font-size: 1.05rem;
    flex: 0 0 auto;
}

/* ----------------------- SERVICE (contact form) -------------------- */
/* Champs sombres cohérents avec le thème (override Bootswatch clair). */
.bsw-service-form .form-control {
    background: color-mix(in srgb, var(--bs-body-bg) 80%, #000 20%);
    border: 1px solid var(--bsw-edge);
    color: var(--bs-body-color);
}
.bsw-service-form .form-control::placeholder { color: var(--bs-secondary-color); }
.bsw-service-form .form-control:focus {
    background: color-mix(in srgb, var(--bs-body-bg) 80%, #000 20%);
    border-color: color-mix(in srgb, var(--bs-primary) 55%, transparent);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
    color: var(--bs-body-color);
}

/* ---------------------- TEAM (member detail) ----------------------- */
/* Portrait fiche membre : découpe en biais bas + liseré (signature). */
.bsw-team-detail__media {
    position: relative;
    overflow: hidden;
    border-radius: 0.85rem;
    clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
    border-bottom: 5px solid var(--bs-primary);
}
.bsw-team-detail__media img { width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
    .bsw-job-card,
    .bsw-include-list__item { transition: none; }
}