@layer page {
    /* =========================
       BACKGROUND BULLES
    ========================= */
    .hub-pulse {
        --hub-pulse-gradient: no-repeat linear-gradient(var(--local-color-identity-action) 0 0);
    }

    .bubbles {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: -2;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
    }

    .bubbles-item {
        position: absolute;
        width: 40vw;
        height: 40vw;
    }

    /* =========================
       VUES HUB / SECTION
       ========================= */
    .hub {
        align-items: center;
        gap: 0;
        width: 100vw;
        max-width: none;
        padding: 0;
    }

    /* =========================
       STYLE DES SECTIONS
       ========================= */
    .main {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 200vh;
    }

    .hub-section {
        display: block;
        width: 90vw;
        max-width: 1200px;
        margin-top: 10vh;
        margin-bottom: 10vh;
    }

    .hub-grid--cards {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .hub-group--frame {
        display: block;
        padding: 1.5rem;
    }

    :where(.hub-group) h3 {
        margin-block: 1em;
    }

    :where(.hub-group) p:not(.notice p) {
        margin-block: 1em;
    }

    .hub-content {
        width: 100%;
        max-width: 72ch;
        margin: 0 auto;
    }

    .hub-content p:not(.notice p), .essays-item-content p:not(.notice p), .essays-item-content p:not(.notice p) ul {
        margin: 0 0 1rem 0;
    }

    .hub-views-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    /* =========================
       PRESENTATION FRAGMENT
       ========================= */
    .intro-title {
        margin: 3rem 0;
    }

    .career-lead {
        width: 100%;
        max-width: 72ch;
        margin: 0 auto;
    }

    :where(.career-lead) h2 {
        margin-block: 0.83em;
    }

    .hub-content .career-kicker {
        margin: 3rem 0 1.25rem;
    }

    .career-primary {
        margin-bottom: 4.5rem;
    }

    .career-primary h3 {
        margin: 0 0 1.25rem;
    }

    .career-secondary-items {
        display: grid;
        gap: 3rem;
        margin-bottom: 5rem;
    }

    .career-secondary h3 {
        margin: 0 0 1rem;
    }

    .career-foot {
        margin-top: 0;
    }

    .career-foot .divider {
        margin-bottom: 2rem;
    }

    .career-foot h3 {
        margin: 0 0 1.5rem;
    }

    .career-projects {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 2rem;
        margin: 0;
        padding: 0;
    }

    .career-foot .career-examples {
        display: block;
        padding: 0;
    }

    .hub-section h2 img {
        width: 6rem;
        height: 6rem;
        margin-right: 8px;
    }

    :where(.panel) h2 {
        margin-block: 0.83em;
    }

    :where(.panel) p:not(.notice p) {
        margin-block: 1em;
    }

    .hub-views {
        align-self: center;
        width: 100%;
        max-width: 900px;
        padding: 10px;
    }

    .hub-pulse {
        display: block;
        height: 2px;
        width: 100%;
    }

    .hub-section-reveal {
        margin-bottom: 40vh;
    }
    .hub-section-reveal > .hub-section {
        margin-bottom: 0;
    }

    /* =========================
       INLINE ACCORDION
       ========================= */

    .career-examples {
        display: inline;
        padding: 0 5px;
    }

    .career-examples img {
        display: inline-block;
        height: 0.9rem;
    }

    .career-examples a {
        padding: 0 2px;
    }

    /* =========================
       PHILOSOPHIE ACCORDION (3 niveaux)
       ========================= */
    .essays {
        width: 100%;
        margin-top: 2rem;
    }

    /* NIVEAU 1 - Premiers titres */

    /* Flèche niveau 1 - sobre et moderne */

    /* État ouvert niveau 1 */

    /* Contenu niveau 1 */

    /* NIVEAU 2 - Seconds titres */

    /* Effet de surlignage par balayage */

    /* Puce disque niveau 2 */

    /* Contenu niveau 2 */

    /* Paragraphes dans le contenu */
    .essays-item-content h3 {
        margin: 1.5rem 0 0.75rem 0;
    }

    .essays-item-content h2 {
        margin: 1.5rem 0 0.75rem 0;
    }

    .essays-item-content p:not(.notice p):last-child {
        margin-bottom: 0;
    }

    :where(.career-year) h3 {
        margin-block: 1em;
    }

    .hub-lead {
        margin-block: 1em;
    }
    @media (width > 800px) {
        .hub-section {
            width: 80vw;
        }
    }

    @media (max-width: 800px) {
        .hub-section {
            margin-top: 6vh;
        }
    }

    @media (max-width: 800px) {
        .hub-section h2 img {
            width: 4rem;
            height: 4rem;

        }
        .hub-views {
            padding: 5px;

        }
        .career-projects {
            grid-template-columns: 1fr;
            gap: 0.85rem;

        }
        .career-primary {
            margin-bottom: 3.5rem;

        }
        .career-secondary-items {
            gap: 2.5rem;
            margin-bottom: 4rem;

        }
    }

    /* RESPONSIVE */

    @media (max-width: 600px) {
        .essays-item-content p:not(.notice p), .hub-content p:not(.notice p) {
            padding-left: 0;
            margin-left: 0;

        }
    }

    .bubbles {
        background-color: var(--local-color-decor-link-career-bubbles-surface);
        background-blend-mode: lighten;
        filter: hue-rotate(0deg);
    }

    .bubbles-item {
        border-radius: var(--local-radius-link-career-bubbles-item);
        filter: blur(90px);
    }

    .bubbles-item--3 {
        background-color: var(--local-color-decor-link-career-bubbles-item-surface-3);
    }

    .bubbles-item--2 {
        background-color: var(--local-color-decor-link-career-bubbles-item-surface-2);
    }

    .bubbles-item--1 {
        background-color: var(--local-color-decor-link-career-bubbles-item-surface);
        backdrop-filter: saturate(3);
    }

    .bubbles-item--4 {
        background-color: var(--local-color-decor-link-career-bubbles-item-surface-4);
    }

    .career-foot .career-examples {
        background: transparent;
    }

    .hub-section h2 img {
        border: 2px solid var(--local-color-decor-link-career-image-line);
        border-radius: var(--local-radius-link-career-image);
        box-shadow: var(--local-shadow-link-career-image);
        filter: sepia(0.1);
    }

    .hub-views {
        background-color: var(--local-color-decor-link-career-hub-views-surface);
        backdrop-filter: saturate(3) brightness(1.03);
        border: 1px solid var(--raw-color-white-90);
        border-radius: var(--local-radius-link-career-image);
    }

    .hub-pulse {
        background: var(--hub-pulse-gradient),var(--hub-pulse-gradient),var(--raw-color-pearl-2);
        background-size: 60% 100%;
    }

    .career-examples {
        background-color: var(--local-color-decor-link-career-examples-surface);
    }

    .career-examples a {
        background-color: var(--local-color-decor-link-career-surface);
    }

    .career-examples a:hover {
        background-color: var(--local-color-decor-link-career-hover-surface);
    }

    @media (max-width: 800px) {
        .hub-views {
            border-radius: var(--local-radius-link-career-hub-views);

        }
    }

    .hub-content p:not(.notice p), .essays-item-content p:not(.notice p), .essays-item-content p:not(.notice p) ul {
        font-size: var(--canon-size-body);
        font-weight: 400;
        line-height: var(--canon-leading-body);
        color: var(--raw-color-black-80);
        text-align: left;
    }

    .hub-content p:not(.notice p) strong, .essays-item-content p:not(.notice p) strong {
        font-weight: 620;
    }

    .intro-title {
        font-size: var(--canon-size-body);
        font-weight: 600;
        text-align: center;
    }

    .hub-content .career-kicker {
        font-size: var(--canon-size-note);
        font-weight: 600;
        letter-spacing: var(--canon-tracking-capitals);
        line-height: var(--canon-leading-body);
        text-align: left;
        text-transform: uppercase;
    }

    .career-primary h3 {
        font-weight: 700;
        font-size: var(--canon-size-title);
        line-height: var(--canon-leading-title);
        text-align: left;
    }

    .hub-content.career p {
        text-align: left;
    }

    .hub-content .career-primary p {
        font-size: var(--canon-size-body);
    }

    .career-secondary h3 {
        font-weight: 700;
        font-size: var(--canon-size-subtitle);
        line-height: var(--canon-leading-title);
        text-align: left;
    }

    .career-foot h3 {
        font-size: var(--canon-size-note);
        font-weight: 600;
        letter-spacing: var(--canon-tracking-capitals);
        text-align: left;
        text-transform: uppercase;
    }

    .career-foot .career-examples {
        font-size: var(--canon-size-body);
        line-height: var(--canon-leading-body);
        text-align: left;
    }

    .hub-lead {
        text-align: left;
    }

    .essays-group-title {
        font-family: var(--canon-font-figura);
        font-size: var(--canon-size-title);
        font-weight: 700;
        color: var(--raw-color-black-90);
    }

    .essays-item-title {
        font-family: var(--canon-font-figura);
        font-size: var(--canon-size-subtitle);
        font-weight: 700;
        color: var(--raw-color-black-85);
    }

    .essays-item-content h3 {
        font-size: var(--canon-size-body);
        font-weight: 700;
        color: var(--raw-color-black-85);
    }

    .essays-item-content h2 {
        font-size: var(--canon-size-subtitle);
        font-weight: 700;
        color: var(--raw-color-black-85);
    }

    :where(.career-lead) h2 {
        font-weight: 700;
    }

    :where(.career-year) h3 {
        font-weight: 700;
    }

    :where(.panel) h2 {
        font-weight: 700;
    }

    :where(.hub-group) h3 {
        font-weight: 700;
    }

    @media (max-width: 800px) {
        .hub-lead {
            text-align: left;

        }
    }

    @media (max-width: 800px) {
        .essays-group-title {
            font-size: var(--canon-size-subtitle);

        }
        .essays-item-title {
            font-size: var(--canon-size-body);
        }
    }

    @media (max-width: 600px) {
        .essays-item-content p:not(.notice p), .hub-content p:not(.notice p) {
            text-align: left;

        }
    }

    .bubbles {
        transition: filter 0.6s ease;
    }

    .bubbles-item--3 {
        animation: ani-bulle-1 12s infinite;
    }

    .bubbles-item--2 {
        animation: ani-bulle-2 16s infinite;
    }

    .bubbles-item--1 {
        animation: ani-bulle-3 22s infinite;
    }

    .bubbles-item--4 {
        animation: ani-bulle-4 14s infinite;
    }

    .hub-pulse {
        animation: mark-interaction 3s infinite ease-out;
    }

    /* Animations des bulles */
    @keyframes ani-bulle-1 {
        0% {
            transform: translate(0, 0) scale(2);
        }
        10% {
            transform: translate(50px, -50px) scale(0.4);
        }
        50% {
            transform: translate(100px, 0) scale(1);
        }
        60% {
            transform: translate(50px, 50px) scale(1.2);
        }
        100% {
            transform: translate(0, 0) scale(2);
        }
    }

    @keyframes ani-bulle-2 {
        0% {
            transform: translate(150px, 150px) scale(0.4);
        }
        10% {
            transform: translate(200px, 100px) scale(1);
        }
        50% {
            transform: translate(250px, 150px) scale(1.2);
        }
        60% {
            transform: translate(200px, 200px) scale(2);
        }
        100% {
            transform: translate(150px, 150px) scale(0.4);
        }
    }

    @keyframes ani-bulle-3 {
        0% {
            transform: translate(-150px, -150px) scale(0.4);
        }
        10% {
            transform: translate(-100px, -200px) scale(2.4);
        }
        50% {
            transform: translate(-50px, -150px) scale(1.4);
        }
        90% {
            transform: translate(-100px, -100px) scale(1.5);
        }
        100% {
            transform: translate(-150px, -150px) scale(0.4);
        }
    }

    @keyframes ani-bulle-4 {
        0% {
            transform: translate(0, 0) scale(2);
        }
        10% {
            transform: translate(50px, -50px) scale(0.4);
        }
        50% {
            transform: translate(100px, 0) scale(1);
        }
        60% {
            transform: translate(50px, 50px) scale(1.2);
        }
        100% {
            transform: translate(0, 0) scale(2);
        }
    }

    @keyframes mark-interaction {
        0% {
            background-position: -150% 0,-150% 0;
        }
        66% {
            background-position: 250% 0,-150% 0;
        }
        100% {
            background-position: 250% 0, 250% 0;
        }
    }
}