.team-avatar_container{
    transform-origin:top center;
    display: flex;
    justify-content: center;
}
.stage{
    position:relative;
    width:570px;
    height:780px;
    cursor:pointer;
    clip-path: url(#egg);
    transform : translateY(-100px);
}

/* ---------- FORME (cercle -> carte) ---------- */
.shape{
    /*position:absolute;
    left:95px; top:100px;*/
    width: 570px;
    height: 570px;
    position: absolute;
    bottom: 0;
    border-radius: 100%;
}
.stage.is-card .shape{
    /* left:40px; top:60px;
     width:600px; height:640px;*/
    border-radius:34px;
}

/* deux "peaux" superposées, on cross-fade pendant le Flip
   (un dégradé ne se tweene pas, donc on triche proprement) */
.skin{
    position:absolute;
    bottom:0 !important;
    height: 100%;
    width: 100%;
    inset:0;
    border-radius:inherit;
}
.skin--orange{
    background: radial-gradient(78.1% 78.1% at 6.37% 19.59%, #FF6B00 0%, #FFF 100%);
    /*background: radial-gradient(circle at 24% 30%, var(--orange) 0%, #ff7133 22%, #ffc4a6 48%, #ffece2 68%, #fff 84%);*/
}
.skin--orange::after,
.skin--grey::after{
    content:"";position:absolute;inset:0;border-radius:inherit;
    background-image:var(--noise);
    mix-blend-mode:multiply;
}
.skin--orange::after{opacity:.55;
    -webkit-mask-image:radial-gradient(circle at 24% 30%, #000 10%, #fff 80%);
    mask-image:radial-gradient(circle at 24% 30%, #000 10%, #fff 80%);}
.skin--grey{background:linear-gradient(103deg, #C2C2C2 4.16%, #696969 97.53%);opacity:0;}
.skin--grey::after{opacity:.5;}
.stage.is-card .skin--orange{opacity:0}
.stage.is-card .skin--grey{opacity:1}

/* ---------- PORTRAIT ---------- */
/* ratio IDENTIQUE dans les deux états (0.55) sinon l'image se déforme */
.portrait{
    display:none;               /* un portrait par personne : seul .is-active est visible */
    position:absolute;
    right:4%;
    top:50%;
    transform: translateY(-21%);
    width:65%;
    /*max-height:1000px;*/
    z-index:3;
    pointer-events:none;
}
.stage.is-card .portrait{
    right: 0;
    top: auto;
    transform: translateX(50%) translateY(10%);
    bottom: 0px;
    width: 385px;
    height: 700px;
}
.portrait img,.portrait svg{
    width:100%;height:100%;
    object-fit:contain;object-position:bottom center;
    display:block;
    z-index: 1;
    position: relative;
}

/* ---------- BLOC TEXTE ---------- */
.content{
    position:absolute;
    left:92px;
    top:50%;
    transform: translateY(-50%);
    width:240px;
    z-index:2;
    color: #FFF;
    display:none;              /* absent en mode cercle -> déclenche onEnter/onLeave */
}
.portrait.is-active{display:block}
.stage.is-card .content.is-active{display:block}   /* visible seulement en mode carte ET personne active */

.badge{width:44px;height:44px;margin-bottom:34px}
.content .role{
    color: #FFF;
    margin:0 0 22px;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 125% */
    text-transform: uppercase;
    font-family: 'Titillium Web',Helvetica,Arial,Lucida,sans-serif;
}
.content p{
    margin:0 0 22px;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 150% */
    letter-spacing: -0.2px;
    font-family: 'Inter',Helvetica,Arial,Lucida,sans-serif;
}
.content .quote{
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: 30px; /* 150% */
    letter-spacing: -0.2px;
    font-family: 'Inter',Helvetica,Arial,Lucida,sans-serif;
}

/* ---------- NOM VERTICAL ---------- */

.firstname,.lastname{
    display:none;
    position:absolute;
    left:20px;
    top: 50%;
    transform: translateY(-50%);
    height:560px;
    z-index:0;
    display:none;
    padding: 50px 0;
    font-family: 'Satoshi',Helvetica,Arial,Lucida,sans-serif;

    span{
        writing-mode:vertical-rl;
        transform:rotate(180deg);
        color: #FF6B00;
        font-size:74px;font-weight:800;letter-spacing:-.02em;line-height:.9;
        text-align: right;
    }
}

.lastname{
    z-index: 2;
    left: 94px;
    span{
        text-align: left;
    }
}

.stage.is-card {
    .firstname,.lastname{display:flex}
}

/* ---------- LE REEL ---------- */
.reel{
    position:relative;
    width:min(720px,100%);
    height:calc(150px * 5);
    overflow:hidden;
    touch-action:none;              /* Observer gère le drag tactile */
    cursor:grab;
    user-select:none;
    -webkit-mask-image: linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
    mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
.reel:active{cursor:grabbing}

/* wrapper Lenis : hauteur fixée par .reel, jamais par le spacer,
   sinon spacer et wrapper s'agrandissent mutuellement en boucle */
.reel__scroll{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;   /* les clics passent à la liste ; Lenis écoute sur .reel (eventsTarget) */
}
.reel:focus-visible{outline:3px solid #FF4D0D;outline-offset:6px;border-radius:4px}

.reel__list{margin:0;padding:0;list-style:none;position:absolute;inset:0}

.item{
    --t:0;                          /* 1 = pile au centre, 0 = à ≥1 cran */
    position:absolute;
    left:0;
    right:0;
    top:calc(50% - 150px / 2);
    height: 150px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    will-change:transform;
}
.item__name{
    font-size:clamp(40px,7.5vw,112.5px);
    font-weight:800;
    letter-spacing:-2.25px;
    line-height:1;
    filter: blur(calc((1 - var(--t)) * 4px));
    opacity:calc(.045 + .955 * var(--t));
    color: #1c1c1c;
}
.item__role{
    margin-top:10px;
    font-size:20px;
    text-transform:uppercase;
    filter: blur(calc((1 - var(--t)) * 4px));
    opacity:calc(var(--t) * var(--t));
    text-align:center;
    padding:0 16px;
    color: #1c1c1c;
}


.agence-project-carousel{
    overflow: visible;
    --parallax: 100px;
    .swiper-slide{
        overflow: hidden;
        position: relative;
        border-radius: 20px;
        & .thumbnail-projet-container {
            width: calc(100% + var(--parallax) * 2);
            max-width: none;
            margin-left: calc(-1 * var(--parallax));
            height: 560px;

            & .thumbnail-projet {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .logo-container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 200px;
            max-height: 200px;
            .logo{
                filter: invert(1);
            }
        }

    }
}

/*** Infinite band scroll ***/

.marquee {
    overflow: hidden;
    width: 100%;
    /* fondu sur les bords, optionnel */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    @media (prefers-reduced-motion: reduce) {
        overflow-x: auto;
    }
    .marquee__track {
        display: flex;
        width: max-content;
        animation: scroll-x 30s linear infinite;
        @media (prefers-reduced-motion: reduce) {
            animation: none;
        }
        .marquee__group {
            display: flex;
            gap: 3rem;
            padding-right: 3rem; /* même valeur que gap pour une jointure invisible */
            margin: 0;
            list-style: none;
            flex-shrink: 0;
            align-items: center;
            img{
                max-width: 200px;
                max-height: 200px;
            }

        }
    }
    &:hover{
        .marquee__track {
            animation-play-state: paused;
        }
    }
}

@keyframes scroll-x {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }  /* -50% = une copie exactement */
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
    .marquee { overflow-x: auto; }
}