/**
 * Fichier  : /pages/sport-business/consulting/assets/css/network.css
 * Fonction : connaissance de l'écosystème et réseau Punchtime
 */

/* ==================================================
   SECTION
================================================== */

.consulting .network {
    --network-gutter: var(--consulting-padding);
}

.consulting .network {
    position: relative;
}

.consulting .network {
    box-sizing: border-box;
}

.consulting .network {
    padding: clamp(6em, 9vw, 9em) var(--network-gutter) 0;
}

.consulting .network {
    overflow: hidden;
}

.consulting .network {
    background: #080808;
}

.consulting .network {
    color: #fff;
}

.consulting .network > .background {
    position: absolute;
    inset: -3%;
    z-index: 0;
}

.consulting .network > .background {
    background: var(--network-image) center 42% / cover no-repeat;
    filter: saturate(.4) contrast(1.12) brightness(.48);
}

.consulting .network > .background {
    transform: scale(1.03);
}

.consulting .network > .overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.consulting .network > .overlay {
    background:
        radial-gradient(circle at 50% 38%, rgba(170, 8, 8, .15), transparent 30%),
        linear-gradient(180deg, rgba(5, 5, 5, .58), rgba(5, 5, 5, .82) 62%, #080808 100%);
}

.consulting .network > .overlay {
    pointer-events: none;
}

.consulting .network::after {
    content: "";
}

.consulting .network::after {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.consulting .network::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 90%);
}

.consulting .network::after {
    pointer-events: none;
    opacity: .34;
}

.consulting .network > header,
.consulting .network > .ecosystem,
.consulting .network > .call-us,
.consulting .network > footer {
    position: relative;
    z-index: 3;
}

/* ==================================================
   HEADER
================================================== */

.consulting .network > header {
    margin-bottom: clamp(4.5em, 7vw, 7em);
}

.consulting .network > header {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    align-items: start;
    gap: clamp(3em, 8vw, 9em);
}

.consulting .network .eyebrow {
    margin-bottom: 1.4em;
}

.consulting .network .eyebrow {
    display: flex;
    gap: .45em;
}

.consulting .network .eyebrow {
    font: 400 8px/1 'bold-font';
    text-transform: uppercase;
    letter-spacing: .14em;
}

.consulting .network .eyebrow span:first-child {
    color: rgba(255, 255, 255, .58);
}
.consulting .network .eyebrow span:last-child {
    color: var(--color-primary);
}

.consulting .network h2 {
    margin: 0;
}

.consulting .network h2 {
    font: 400 clamp(46px, 5.4vw, 82px)/.86 'bold-font';
    text-transform: uppercase;
    letter-spacing: -.055em;
}

.consulting .network h2 span {
    display: block;
}

.consulting .network h2 span {
    color: var(--color-primary);
}

.consulting .network .intro {
    max-width: 500px;
}

.consulting .network .intro {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.consulting .network .intro p,
.consulting .network .statement p {
    margin: 0;
}

.consulting .network .intro p,
.consulting .network .statement p {
    font: 400 13px/1.75 'content-font';
    color: rgba(255, 255, 255, .62);
}


/* ==================================================
   MAP
================================================== */

.consulting .network .map {
    position: relative;
}

.consulting .network .map {
    overflow: hidden;
}

.consulting .network .map.spider {
    min-height: 0;
}

.consulting .network .map.spider {
    padding: clamp(3em, 6vw, 5em) clamp(2em, 5vw, 5em);
}

.consulting .network .map.spider {
    display: grid;
}

.consulting .network .map.spider {
    background:
        radial-gradient(circle at 50% 50%, rgba(196, 18, 18, .11), transparent 16%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .025), transparent 62%);
}

.consulting .network .rows {
    position: relative;
    z-index: 2;
}

.consulting .network .rows {
    grid-area: 1 / 1;
    display: grid;
    grid-template-rows: repeat(5, clamp(50px, 4.7vw, 58px));
}

.consulting .network .rows > .links {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.consulting .network .rows > .links {
    width: 100%;
    height: 100%;
}

.consulting .network .rows > .links {
    overflow: visible;
}

.consulting .network .rows > .links {
    pointer-events: none;
}

.consulting .network .links line {
    vector-effect: non-scaling-stroke;
    stroke: rgba(255, 255, 255, .15);
    stroke-width: 1;
    stroke-dasharray: 3 6;
}

.consulting .network .links line {
    transition: stroke .35s ease, stroke-width .35s ease, filter .35s ease;
}

.consulting .network .links line.is-current {
    stroke: var(--color-primary);
    stroke-width: 1.5;
    stroke-dasharray: 8 4;
    filter: drop-shadow(0 0 5px rgba(196, 18, 18, .8));
}

.consulting .network .links line.is-current {
    animation: network-flow .75s linear infinite;
}

.consulting .network .row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
}

/* ==================================================
   HUB
================================================== */

.consulting .network .hub {
    position: relative;
    z-index: 4;
}

.consulting .network .hub {
    width: clamp(92px, 10vw, 122px);
    aspect-ratio: 1;
}

.consulting .network .hub {
    grid-area: 1 / 1;
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.consulting .network .hub {
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 28%, #2c2c2c, #090909 72%);
    box-shadow:
        0 0 0 9px rgba(255, 255, 255, .025),
        0 0 0 22px rgba(196, 18, 18, .025),
        0 20px 55px rgba(0, 0, 0, .65),
        0 0 42px rgba(196, 18, 18, .16);
}

.consulting .network .hub img {
    width: 48%;
    height: 48%;
}

.consulting .network .hub img {
    display: block;
    object-fit: contain;
}

/* ==================================================
   ACTORS
================================================== */

.consulting .network .actor {
    position: relative;
    z-index: 5;
}

.consulting .network .actor {
    min-width: 0;
    width: min(100%, 230px);
}

.consulting .network .actor {
    padding: 0;
}

.consulting .network .actor {
    display: flex;
    align-items: center;
    gap: .75em;
}

.consulting .network .actor {
    outline: none;
    cursor: default;
}

.consulting .network .actor {
    opacity: 0;
}

.consulting .network .actor {
    transform: translateY(10px) scale(.97);
}

.consulting .network .actor {
    transition: opacity .55s ease var(--actor-delay), transform .55s cubic-bezier(.22, 1, .36, 1) var(--actor-delay);
}

.consulting .network .actor.left {
    grid-column: 1;
    justify-self: end;
    justify-content: flex-end;
}

.consulting .network .actor.left {
    text-align: right;
}

.consulting .network .actor.right {
    grid-column: 4;
    justify-self: start;
}

.consulting .network .actor.right {
    text-align: left;
}

.consulting .network .actor.is-revealed {
    opacity: 1;
}

.consulting .network .actor.is-revealed {
    transform: translateY(0) scale(1);
}

.consulting .network .actor strong {
    min-width: 0;
}

.consulting .network .actor strong {
    padding: 1.05em 1.2em;
}

.consulting .network .actor strong {
    flex: 1 1 auto;
}

.consulting .network .actor strong {
    border: 1px solid rgba(255, 255, 255, .11);
    background: rgba(11, 11, 11, .88);
    box-shadow: 0 9px 28px rgba(0, 0, 0, .25);
}

.consulting .network .actor strong {
    font-family: 'bold-font';
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .025em;
    color: rgba(255, 255, 255, .68);
}

.consulting .network .actor strong {
    transition: color .3s ease, border-color .3s ease, background .3s ease;
}

.consulting .network .actor.left strong {
    border-radius: 999px 9px 9px 999px;
}
.consulting .network .actor.right strong {
    border-radius: 9px 999px 999px 9px;
}

.consulting .network .actor > span {
    width: 30px;
    height: 30px;
}

.consulting .network .actor > span {
    box-sizing: border-box;
}

.consulting .network .actor > span {
    flex: 0 0 30px;
    display: grid;
    place-items: center;
}

.consulting .network .actor > span {
    border: 1px solid rgba(196, 18, 18, .75);
    border-radius: 50%;
    background: rgba(196, 18, 18, .1);
    box-shadow: 0 0 0 4px rgba(196, 18, 18, .045);
}

.consulting .network .actor > span {
    font: 400 7px/1 'bold-font';
    color: #fff;
}

.consulting .network .actor > span {
    transition: background .3s ease, box-shadow .3s ease;
}

.consulting .network .actor.is-current strong {
    border-color: rgba(196, 18, 18, .72);
    background: rgba(50, 8, 8, .94);
}

.consulting .network .actor.is-current strong {
    color: #fff;
}

.consulting .network .actor.is-current > span {
    background: var(--color-primary);
    box-shadow: 0 0 0 5px rgba(196, 18, 18, .1), 0 0 20px rgba(196, 18, 18, .5);
}

/* ==================================================
   CALL US
================================================== */

.consulting .network .call-us {
    position: relative;
}

.consulting .network .call-us {
    width: 100%;
    min-height: 100px;
}

.consulting .network .call-us {
    box-sizing: border-box;
}

.consulting .network .call-us {
    margin-top: 6em;
}

.consulting .network .call-us {
    padding: 1.5em clamp(1.5em, 3vw, 2.5em);
}

.consulting .network .call-us {
    display: flex;
    isolation: isolate;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2em, 5vw, 5em);
    overflow: hidden;
}

.consulting .network .call-us {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: linear-gradient(125deg, var(--color-primary), #a20d0d 58%, #760707);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .28), 0 10px 35px rgba(196, 18, 18, .16), inset 0 1px rgba(255, 255, 255, .16);
}

.consulting .network .call-us::before {
    content: "";
}

.consulting .network .call-us::before {
    position: absolute;
    top: 50%;
    right: clamp(1.5em, 5vw, 5em);
    z-index: -1;
}

.consulting .network .call-us::before {
    width: 180px;
    aspect-ratio: 1;
}

.consulting .network .call-us::before {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(255, 255, 255, .035), 0 0 0 58px rgba(255, 255, 255, .018);
}

.consulting .network .call-us::before {
    transform: translateY(-50%);
}

.consulting .network .call-us > span {
    font: 400 9px/1.4 'bold-font';
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .72);
}

.consulting .network .call-us strong {
    max-width: 440px;
}

.consulting .network .call-us strong {
    font: 400 clamp(18px, 2vw, 27px)/1.05 'bold-font';
    text-align: right;
    text-transform: uppercase;
    letter-spacing: -.025em;
    color: #fff;
}

/* ==================================================
   BRIDGE — UPPER HALF
================================================== */

.consulting .network > footer {
    position: relative;
}

.consulting .network > footer {
    box-sizing: border-box;
}

.consulting .network > footer {
    padding: clamp(3em, 5vw, 4.75em) clamp(2.5em, 5vw, 4.75em) clamp(2.5em, 4vw, 3.75em);
}

.consulting .network > footer {
    isolation: isolate;
    overflow: hidden;
}

.consulting .network > footer {
    border: 1px solid rgba(17, 17, 17, .06);
    border-bottom: 0;
    background: #fff;
    box-shadow: 0 -28px 70px rgba(0, 0, 0, .26);
}

.consulting .network > footer {
    color: #111;
}

.consulting .network > footer::before {
    content: "";
}

.consulting .network > footer::before {
    position: absolute;
    right: clamp(-90px, -5vw, -45px);
    bottom: 0;
    z-index: -1;
}

.consulting .network > footer::before {
    width: clamp(260px, 30vw, 380px);
    aspect-ratio: 1;
}

.consulting .network > footer::before {
    border: 1px solid rgba(196, 18, 18, .09);
    border-radius: 50%;
    box-shadow: 0 0 0 48px rgba(196, 18, 18, .025), 0 0 0 96px rgba(196, 18, 18, .012);
}

.consulting .network > footer::before {
    transform: translateY(50%);
}

.consulting .network .label {
    margin-bottom: clamp(2.5em, 4vw, 4em);
}

.consulting .network .label {
    display: flex;
    align-items: center;
    gap: .8em;
}

.consulting .network .label {
    font: 400 8px/1 'bold-font';
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(17, 17, 17, .4);
}

.consulting .network .label span:last-child {
    color: #111;
}
.consulting .network .label i {
    width: 20px;
    height: 1px;
}

.consulting .network .label i {
    background: var(--color-primary);
}

.consulting .network .statement {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    align-items: end;
    gap: clamp(3em, 8vw, 9em);
}

.consulting .network .statement h3 {
    margin: 0 0 .35em;
}

.consulting .network .statement h3 {
    font: 400 clamp(34px, 4vw, 60px)/.92 'bold-font';
    text-transform: uppercase;
    letter-spacing: -.045em;
    color: #111;
}

.consulting .network .statement p {
    max-width: 520px;
}

.consulting .network .statement p {
    color: rgba(17, 17, 17, .56);
}

.consulting .network .statement > strong {
    padding-left: 1.2em;
}

.consulting .network .statement > strong {
    display: block;
}

.consulting .network .statement > strong {
    border-left: 3px solid var(--color-primary);
}

.consulting .network .statement > strong {
    font: 400 clamp(17px, 1.8vw, 25px)/1.25 'content-font';
    color: #111;
}

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

@keyframes network-flow {

    to {
        stroke-dashoffset: -12;
    }

}

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

@media screen and (max-width: 750px) {
    .consulting .network {
        padding: 5em 20px 0 20px;
    }

    .consulting .network > .background {
        inset: 0;
    }

    .consulting .network > .background {
        background-image: var(--network-image-mobile);
        background-position: 52% center;
    }

    .consulting .network::after {
        background-size: 38px 38px;
    }

    .consulting .network > header {
        margin-bottom: 4em;
    }

    .consulting .network > header {
        grid-template-columns: 1fr;
        gap: 2em;
    }

    .consulting .network .eyebrow {
        flex-wrap: wrap;
    }

    .consulting .network .eyebrow {
        font-size: 7px;
    }
    .consulting .network h2 {
        font-size: clamp(42px, 12vw, 58px);
    }
    .consulting .network .intro p,
    .consulting .network .statement p {
        font-size: 12px;
    }
    .consulting .network .ecosystem {
        border-radius: clamp(18px, 6vw, var(--radius-xl));
    }

    .consulting .network .map.spider {
        padding: 2em 1.15em 2.25em;
    }

    .consulting .network .hub {
        width: 70px;
    }

    .consulting .network .rows {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(70px, 24vw, 90px);
    }

    .consulting .network .rows > .links {
        left: 20%;
    }

    .consulting .network .rows > .links {
        width: 60%;
    }

    .consulting .network .row {
        display: contents;
    }
    .consulting .network .actor {
        width: 100%;
        min-height: 48px;
    }

    .consulting .network .actor {
        padding: .62em;
    }

    .consulting .network .actor {
        gap: .5em;
    }
    .consulting .network .actor.left {
        grid-column: 1;
    }
    .consulting .network .actor.right {
        grid-column: 2;
    }
    .consulting .network .actor > span {
        width: 25px;
        height: 25px;
    }

    .consulting .network .actor > span {
        flex-basis: 25px;
    }
    .consulting .network .actor strong {
        font-size: 8px;
        white-space: normal;
    }

    .consulting .network .call-us {
        min-height: 118px;
    }

    .consulting .network .call-us {
        margin-top: 3em;
    }

    .consulting .network .call-us {
        padding: 1.6em;
    }

    .consulting .network .call-us {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: .8em;
    }

    .consulting .network .call-us::before {
        right: -45px;
    }

    .consulting .network .call-us::before {
        width: 140px;
    }
    .consulting .network .call-us > span {
        font-size: 7px;
    }
    .consulting .network .call-us strong {
        max-width: 260px;
    }

    .consulting .network .call-us strong {
        font-size: clamp(17px, 5.5vw, 22px);
        text-align: left;
    }

    .consulting .network > footer {
        padding: 2.75em 1.5em 2.25em;
    }

    .consulting .network .statement {
        grid-template-columns: 1fr;
        gap: 2.25em;
    }
    .consulting .network .statement h3 {
        font-size: clamp(34px, 10vw, 46px);
    }
    .consulting .network .statement > strong {
        font-size: clamp(16px, 5vw, 20px);
    }
}

/* ==================================================
   ACCESSIBILITÉ
================================================== */

@media (prefers-reduced-motion: reduce) {
    .consulting .network .links line {
        animation: none !important;
    }
    .consulting .network .actor {
        opacity: 1;
    }

    .consulting .network .actor {
        transition: none !important;
    }
}