/* ==========================================================================
   CSB PODCAST — PUBLIC CMS PAGE
   PREMIUM EDITORIAL EXPERIENCE 2030
   FULL IMAGE / NO CROPPING
   ========================================================================== */

.public-cms-page {
    --cms-bg:#07070A;
    --cms-bg-soft:#0B0A0F;
    --cms-panel:#111017;
    --cms-panel-soft:#15121B;

    --cms-white:#F7F7FB;
    --cms-text:#DCD8E3;
    --cms-muted:#928C9D;
    --cms-muted-soft:#686270;

    --cms-violet:#8B43A8;
    --cms-cyan:#12B4D6;
    --cms-pink:#EA5B78;
    --cms-red:#FF3B30;

    --cms-line:rgba(255,255,255,.075);
    --cms-line-strong:rgba(255,255,255,.13);

    --cms-gradient:
        linear-gradient(
            115deg,
            #8B43A8 0%,
            #EA5B78 48%,
            #12B4D6 100%
        );

    --cms-pointer-x:75%;
    --cms-pointer-y:10%;

    position:relative;
    isolation:isolate;

    width:
        min(
            1460px,
            calc(100% - 64px)
        );

    margin:0 auto;

    padding:
        clamp(36px,5vw,70px)
        0
        clamp(80px,9vw,135px);

    color:var(--cms-white);
}

.public-cms-page *,
.public-cms-page *::before,
.public-cms-page *::after {
    box-sizing:border-box;
}

/* ==========================================================================
   BACKGROUND
   ========================================================================== */

.public-cms-page::before {
    content:"";

    position:fixed;
    z-index:-4;

    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at
            var(--cms-pointer-x)
            var(--cms-pointer-y),
            rgba(139,67,168,.09),
            transparent 27%
        ),
        radial-gradient(
            circle at 94% 20%,
            rgba(234,91,120,.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 4% 72%,
            rgba(18,180,214,.03),
            transparent 27%
        ),
        #07070A;
}

.public-cms-page::after {
    content:"";

    position:fixed;
    z-index:-3;

    inset:0;

    opacity:.17;

    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.012) 1px,
            transparent 1px
        );

    background-size:88px 88px;

    mask-image:
        linear-gradient(
            #000 0%,
            transparent 86%
        );
}

/* ==========================================================================
   READING PROGRESS
   ========================================================================== */

.public-cms-reading-progress {
    position:fixed;
    z-index:99999;

    top:0;
    right:0;
    left:0;

    height:2px;

    pointer-events:none;

    background:
        rgba(255,255,255,.025);
}

.public-cms-reading-progress > span {
    display:block;

    width:0;
    height:100%;

    background:var(--cms-gradient);

    box-shadow:
        0 0 20px
        rgba(18,180,214,.28);

    transition:
        width .08s linear;
}

/* ==========================================================================
   COVER — NO CROPPING
   ========================================================================== */

.public-cms-cover {
    --cover-x:50%;
    --cover-y:50%;

    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    /*
     * Largeur contrôlée sur desktop.
     */
    width:
        min(
            1080px,
            100%
        );

    /*
     * IMPORTANT :
     * aucune hauteur imposée.
     */
    height:auto;

    max-height:none;

    aspect-ratio:auto;

    margin:
        0 auto
        clamp(
            46px,
            6vw,
            74px
        );

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:30px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(139,67,168,.06),
            #0B0A0F 72%
        );

    box-shadow:
        0 42px 115px
        rgba(0,0,0,.32);

    transform:translateZ(0);
}

/*
|--------------------------------------------------------------------------
| LIGHT INTERACTION
|--------------------------------------------------------------------------
*/

.public-cms-cover::before {
    content:"";

    position:absolute;
    z-index:3;

    inset:0;

    pointer-events:none;

    opacity:.20;

    background:
        radial-gradient(
            circle at
            var(--cover-x)
            var(--cover-y),
            rgba(255,255,255,.18),
            transparent 28%
        );
}

.public-cms-cover::after {
    content:"";

    position:absolute;
    z-index:2;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(7,7,10,.015),
            transparent 58%,
            rgba(7,7,10,.08)
        );
}

/* ==========================================================================
   IMAGE — AFFICHÉE ENTIÈREMENT
   ========================================================================== */

.public-cms-cover img {
    position:relative;
    z-index:1;

    display:block;

    /*
     * IMPORTANT :
     * aucune largeur/hauteur forcée simultanément.
     */
    width:auto;
    height:auto;

    max-width:100%;

    /*
     * Taille maximale maîtrisée desktop.
     */
    max-height:520px;

    /*
     * La totalité de l'image reste visible.
     */
    object-fit:contain;

    object-position:center center;

    border-radius:29px;

    transition:
        transform .7s
        cubic-bezier(.2,.8,.2,1),
        filter .5s ease;
}

.public-cms-cover:hover img {
    transform:scale(1.012);

    filter:
        saturate(1.04)
        contrast(1.01);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.public-cms-hero {
    position:relative;

    width:
        min(
            1020px,
            100%
        );

    margin:
        0 auto
        clamp(
            50px,
            7vw,
            85px
        );

    text-align:center;
}

.public-cms-hero > span {
    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--cms-cyan);

    font-size:.55rem;

    font-weight:900;

    letter-spacing:.21em;
}

.public-cms-hero > span::before,
.public-cms-hero > span::after {
    content:"";

    width:26px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cms-cyan)
        );
}

.public-cms-hero > span::after {
    transform:scaleX(-1);
}

/* ==========================================================================
   TITLE
   ========================================================================== */

.public-cms-hero h1 {
    margin:
        18px 0
        0;

    color:var(--cms-white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            3.6rem,
            6.2vw,
            6.8rem
        );

    font-weight:700;

    line-height:.86;

    letter-spacing:-.07em;

    text-wrap:balance;
}

.public-cms-hero h1::after {
    content:"";

    display:block;

    width:
        clamp(
            100px,
            15vw,
            220px
        );

    height:2px;

    margin:
        26px auto
        0;

    transform-origin:center;

    background:var(--cms-gradient);

    animation:
        cmsHeroLine
        1s
        cubic-bezier(.2,.8,.2,1)
        both;
}

/* ==========================================================================
   EXCERPT
   ========================================================================== */

.public-cms-hero > p {
    max-width:760px;

    margin:
        25px auto
        0;

    color:
        rgba(247,247,251,.53);

    font-size:
        clamp(
            .92rem,
            1.15vw,
            1.06rem
        );

    line-height:1.78;

    text-wrap:balance;
}

/* ==========================================================================
   META
   ========================================================================== */

.public-cms-meta {
    display:flex;

    flex-wrap:wrap;

    align-items:center;
    justify-content:center;

    gap:6px;

    margin-top:25px;
}

.public-cms-meta > span {
    display:inline-flex;

    align-items:center;

    min-height:30px;

    padding:
        0
        10px;

    border:
        1px solid
        var(--cms-line);

    border-radius:999px;

    background:
        rgba(255,255,255,.012);

    color:
        rgba(247,247,251,.42);

    font-size:.50rem;

    font-weight:750;

    backdrop-filter:
        blur(10px);
}

.public-cms-meta
.public-cms-reading-time {
    color:var(--cms-cyan);

    border-color:
        rgba(18,180,214,.12);

    background:
        rgba(18,180,214,.025);
}

/* ==========================================================================
   CONTENT
   ========================================================================== */

.public-cms-body {
    position:relative;

    width:
        min(
            900px,
            100%
        );

    margin:0 auto;

    color:
        rgba(247,247,251,.70);

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size:
        clamp(
            .94rem,
            1vw,
            1.03rem
        );

    line-height:1.90;

    letter-spacing:-.004em;

    overflow-wrap:anywhere;
}

/* ==========================================================================
   FIRST PARAGRAPH
   ========================================================================== */

.public-cms-body > p:first-child {
    color:
        rgba(247,247,251,.82);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            1.12rem,
            1.55vw,
            1.35rem
        );

    line-height:1.70;
}

/* ==========================================================================
   PARAGRAPHS
   ========================================================================== */

.public-cms-body p {
    margin:
        0 0
        1.5em;

    text-align:left;

    word-spacing:normal;

    letter-spacing:normal;
}

.public-cms-body
p:last-child {
    margin-bottom:0;
}

/* ==========================================================================
   HEADINGS
   ========================================================================== */

.public-cms-body h2,
.public-cms-body h3,
.public-cms-body h4,
.public-cms-body h5,
.public-cms-body h6 {
    position:relative;

    color:var(--cms-white);

    scroll-margin-top:125px;

    text-wrap:balance;
}

.public-cms-body h2 {
    margin:
        clamp(
            58px,
            7vw,
            90px
        )
        0
        25px;

    padding-top:17px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            2.35rem,
            3.8vw,
            3.8rem
        );

    line-height:.97;

    letter-spacing:-.052em;
}

.public-cms-body h2::before {
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:62px;
    height:2px;

    background:var(--cms-gradient);
}

.public-cms-body h3 {
    margin:
        45px 0
        18px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            1.65rem,
            2.6vw,
            2.4rem
        );

    line-height:1;

    letter-spacing:-.04em;
}

.public-cms-body h4 {
    margin:
        32px 0
        14px;

    color:var(--cms-cyan);

    font-size:.98rem;

    font-weight:850;
}

/* ==========================================================================
   LINKS
   ========================================================================== */

.public-cms-body a {
    position:relative;

    color:var(--cms-cyan);

    font-weight:700;

    text-decoration:none;

    transition:
        color .2s ease;
}

.public-cms-body a::after {
    content:"";

    position:absolute;

    right:0;
    bottom:-2px;
    left:0;

    height:1px;

    transform:scaleX(.22);

    transform-origin:left;

    background:
        linear-gradient(
            90deg,
            var(--cms-cyan),
            var(--cms-violet)
        );

    opacity:.6;

    transition:
        transform .25s ease;
}

.public-cms-body a:hover {
    color:#79DEF1;
}

.public-cms-body a:hover::after {
    transform:scaleX(1);
}

/* ==========================================================================
   EMPHASIS
   ========================================================================== */

.public-cms-body strong,
.public-cms-body b {
    color:var(--cms-white);

    font-weight:800;
}

.public-cms-body em {
    color:
        rgba(247,247,251,.76);
}

/* ==========================================================================
   LISTS
   ========================================================================== */

.public-cms-body ul,
.public-cms-body ol {
    display:grid;

    gap:9px;

    margin:
        24px 0
        30px;

    padding-left:0;

    list-style:none;
}

.public-cms-body li {
    position:relative;

    padding-left:27px;

    color:
        rgba(247,247,251,.66);
}

.public-cms-body
ul > li::before {
    content:"";

    position:absolute;

    top:.75em;
    left:4px;

    width:7px;
    height:7px;

    border-radius:2px;

    transform:rotate(45deg);

    background:
        linear-gradient(
            135deg,
            var(--cms-violet),
            var(--cms-cyan)
        );
}

.public-cms-body ol {
    counter-reset:cms-list;
}

.public-cms-body
ol > li {
    counter-increment:cms-list;

    padding-left:38px;
}

.public-cms-body
ol > li::before {
    content:
        counter(cms-list);

    position:absolute;

    top:.25em;
    left:0;

    display:grid;

    place-items:center;

    width:25px;
    height:25px;

    border:
        1px solid
        rgba(18,180,214,.15);

    border-radius:8px;

    background:
        rgba(18,180,214,.025);

    color:var(--cms-cyan);

    font-size:.57rem;

    font-weight:900;
}

/* ==========================================================================
   BLOCKQUOTE
   ========================================================================== */

.public-cms-body blockquote {
    position:relative;

    margin:
        clamp(
            40px,
            5vw,
            65px
        )
        0;

    padding:
        clamp(
            25px,
            4vw,
            40px
        );

    overflow:hidden;

    border:
        1px solid
        rgba(139,67,168,.14);

    border-radius:22px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(139,67,168,.09),
            transparent 35%
        ),
        rgba(255,255,255,.011);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.10);
}

.public-cms-body
blockquote::before {
    content:"“";

    position:absolute;

    top:-18px;
    right:20px;

    color:
        rgba(139,67,168,.14);

    font-family:
        Georgia,
        serif;

    font-size:9rem;

    line-height:1;
}

.public-cms-body
blockquote p {
    position:relative;

    margin:0;

    color:
        rgba(247,247,251,.80);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            1.15rem,
            1.8vw,
            1.48rem
        );

    line-height:1.62;
}

/* ==========================================================================
   IMAGES DANS LE CONTENU
   ========================================================================== */

.public-cms-body img {
    display:block;

    width:auto;
    height:auto;

    max-width:
        min(
            760px,
            100%
        );

    margin:
        clamp(
            32px,
            4vw,
            52px
        )
        auto;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        clamp(
            15px,
            2vw,
            22px
        );

    box-shadow:
        0 28px 75px
        rgba(0,0,0,.22);
}

/* ==========================================================================
   FIGURES
   ========================================================================== */

.public-cms-body figure {
    margin:
        40px 0;
}

.public-cms-body
figure img {
    margin:0 auto;
}

.public-cms-body figcaption {
    margin-top:10px;

    color:var(--cms-muted);

    font-size:.57rem;

    text-align:center;
}

/* ==========================================================================
   HR
   ========================================================================== */

.public-cms-body hr {
    width:100%;
    height:1px;

    margin:
        62px 0;

    border:0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(139,67,168,.32),
            rgba(18,180,214,.25),
            transparent
        );
}

/* ==========================================================================
   TABLE
   ========================================================================== */

.public-cms-body
.table-scroll {
    width:100%;

    margin:
        32px 0;

    overflow-x:auto;

    border:
        1px solid
        var(--cms-line);

    border-radius:15px;

    background:
        rgba(255,255,255,.01);
}

.public-cms-body table {
    width:100%;

    border-collapse:collapse;

    background:
        rgba(255,255,255,.008);

    font-size:.74rem;
}

.public-cms-body th,
.public-cms-body td {
    padding:
        12px
        14px;

    border-bottom:
        1px solid
        rgba(255,255,255,.05);

    text-align:left;
}

.public-cms-body th {
    background:
        rgba(139,67,168,.04);

    color:var(--cms-white);

    font-size:.54rem;

    font-weight:900;

    text-transform:uppercase;
}

.public-cms-body td {
    color:
        rgba(247,247,251,.62);
}

/* ==========================================================================
   CODE
   ========================================================================== */

.public-cms-body code {
    padding:
        3px
        6px;

    border:
        1px solid
        rgba(18,180,214,.10);

    border-radius:6px;

    background:
        rgba(18,180,214,.035);

    color:#7BDFF1;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size:.86em;
}

.public-cms-body pre {
    margin:
        32px 0;

    padding:19px;

    overflow:auto;

    border:
        1px solid
        var(--cms-line);

    border-radius:15px;

    background:#0B0A0F;
}

.public-cms-body
pre code {
    padding:0;

    border:0;

    background:transparent;
}

/* ==========================================================================
   TOC
   ========================================================================== */

.public-cms-toc {
    position:fixed;
    z-index:500;

    top:50%;
    right:22px;

    width:205px;

    max-height:58vh;

    padding:11px;

    overflow:auto;

    transform:
        translateY(-50%)
        translateX(15px);

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius:14px;

    background:
        rgba(10,9,14,.72);

    backdrop-filter:
        blur(20px)
        saturate(130%);

    opacity:0;

    pointer-events:none;

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.public-cms-toc.is-visible {
    opacity:1;

    pointer-events:auto;

    transform:
        translateY(-50%)
        translateX(0);
}

.public-cms-toc > span {
    display:block;

    margin:
        2px
        5px
        9px;

    color:var(--cms-cyan);

    font-size:.39rem;

    font-weight:900;

    letter-spacing:.14em;
}

.public-cms-toc nav {
    display:grid;

    gap:3px;
}

.public-cms-toc a {
    display:block;

    padding:
        7px
        8px;

    border-radius:8px;

    color:
        rgba(247,247,251,.39);

    font-size:.47rem;

    line-height:1.4;

    text-decoration:none;

    transition:
        color .2s ease,
        background .2s ease;
}

.public-cms-toc a:hover,
.public-cms-toc a.is-active {
    background:
        rgba(139,67,168,.055);

    color:var(--cms-white);
}

.public-cms-toc
a.is-active {
    color:var(--cms-cyan);
}

/* ==========================================================================
   REVEAL
   ========================================================================== */

.public-cms-page.cms-enhanced
.cms-reveal {
    opacity:0;

    transform:
        translateY(25px)
        scale(.992);

    transition:
        opacity .68s
        cubic-bezier(.2,.8,.2,1),
        transform .68s
        cubic-bezier(.2,.8,.2,1);
}

.public-cms-page.cms-enhanced
.cms-reveal.is-visible {
    opacity:1;

    transform:none;
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

.public-cms-page ::selection {
    background:
        rgba(139,67,168,.38);

    color:white;
}

/* ==========================================================================
   ANIMATION
   ========================================================================== */

@keyframes cmsHeroLine {

    from {
        opacity:0;

        transform:
            scaleX(0);
    }

    to {
        opacity:1;

        transform:
            scaleX(1);
    }
}

/* ==========================================================================
   LARGE DESKTOP
   ========================================================================== */

@media(min-width:1500px) {

    .public-cms-cover {
        width:1080px;
    }

    .public-cms-cover img {
        max-height:500px;
    }
}

/* ==========================================================================
   DESKTOP
   ========================================================================== */

@media(
    min-width:1101px
)
and
(
    max-width:1499px
) {

    .public-cms-cover {
        width:
            min(
                1000px,
                88%
            );
    }

    .public-cms-cover img {
        max-height:470px;
    }
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media(max-width:1100px) {

    .public-cms-toc {
        display:none;
    }

    .public-cms-cover {
        width:
            min(
                900px,
                100%
            );

        height:auto;

        max-height:none;

        aspect-ratio:auto;
    }

    .public-cms-cover img {
        width:auto;
        height:auto;

        max-width:100%;
        max-height:520px;

        object-fit:contain;
    }
}

/* ==========================================================================
   TABLET SMALL
   ========================================================================== */

@media(max-width:900px) {

    .public-cms-page {
        width:
            calc(100% - 34px);

        padding-top:30px;
    }

    .public-cms-cover {
        width:100%;

        margin-bottom:50px;

        border-radius:24px;
    }

    .public-cms-cover img {
        max-height:none;

        border-radius:23px;
    }

    .public-cms-hero {
        margin-bottom:56px;
    }

    .public-cms-body {
        width:
            min(
                760px,
                100%
            );
    }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media(max-width:600px) {

    .public-cms-page {
        width:
            calc(100% - 22px);

        padding:
            22px 0
            70px;
    }

    /*
     * Toujours aucune découpe mobile.
     */
    .public-cms-cover {
        display:flex;

        width:100%;

        height:auto;

        max-height:none;

        aspect-ratio:auto;

        margin-bottom:38px;

        border-radius:19px;
    }

    .public-cms-cover img {
        width:auto;
        height:auto;

        max-width:100%;
        max-height:none;

        object-fit:contain;

        object-position:center;

        border-radius:18px;
    }

    .public-cms-hero {
        margin-bottom:43px;

        text-align:left;
    }

    .public-cms-hero > span {
        font-size:.48rem;
    }

    .public-cms-hero
    > span::before,
    .public-cms-hero
    > span::after {
        display:none;
    }

    .public-cms-hero h1 {
        font-size:
            clamp(
                3rem,
                15vw,
                4.8rem
            );

        line-height:.88;

        letter-spacing:-.062em;
    }

    .public-cms-hero
    h1::after {
        width:110px;

        margin:
            21px 0
            0;
    }

    .public-cms-hero > p {
        margin-left:0;

        font-size:.88rem;

        line-height:1.70;
    }

    .public-cms-meta {
        justify-content:flex-start;

        margin-top:20px;
    }

    .public-cms-body {
        font-size:.90rem;

        line-height:1.80;
    }

    .public-cms-body
    > p:first-child {
        font-size:1.06rem;
    }

    .public-cms-body h2 {
        margin-top:52px;

        font-size:
            clamp(
                2.15rem,
                10vw,
                3.25rem
            );
    }

    .public-cms-body h3 {
        margin-top:38px;

        font-size:
            clamp(
                1.6rem,
                7.5vw,
                2.2rem
            );
    }

    .public-cms-body blockquote {
        margin:
            32px 0;

        padding:
            21px
            17px;

        border-radius:17px;
    }

    .public-cms-body
    blockquote p {
        font-size:1.06rem;
    }

    .public-cms-body img {
        max-width:100%;

        margin:
            28px auto;

        border-radius:15px;
    }
}

/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media(max-width:420px) {

    .public-cms-page {
        width:
            calc(100% - 18px);
    }

    .public-cms-cover {
        border-radius:16px;
    }

    .public-cms-cover img {
        border-radius:15px;
    }

    .public-cms-hero h1 {
        font-size:
            clamp(
                2.7rem,
                14vw,
                4rem
            );
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media(prefers-reduced-motion:reduce) {

    .public-cms-page *,
    .public-cms-page *::before,
    .public-cms-page *::after {
        animation:none !important;

        transition-duration:.001ms !important;

        scroll-behavior:auto !important;
    }

    .public-cms-page.cms-enhanced
    .cms-reveal {
        opacity:1;

        transform:none;
    }
}