/* iPad bloc premium */
.ipad-container{
    position: relative;
    max-width: 970px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-md);

}

/* le cadre "métal" */
.ipad-container::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    padding:5px; /* épaisseur du cadre */
    background: linear-gradient(
            to bottom,
            #E4CCB4 0%,
            #CCB8A8 25%,
            #B6ACA1 50%,
            #B4A89C 75%,
            #A49C94 100%
    );
    -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events:none;
}

/* le fond intérieur */
.ipad-container::after{
    content:"";
    position:absolute;
    inset:5px;
    border-radius: calc(var(--radius-lg) - 5px);
    border: 1px solid rgba(43,45,66,.08);
    pointer-events:none;
    background: black;
}

/* pour que ton contenu passe au-dessus */
.ipad-container > *{
    position: relative;
    z-index: 1;
}



/* zone image */
.img-content-ipad{
    position: relative;
    border-radius: calc(var(--radius-lg) - 8px);
    overflow: hidden;
}

.img-ipad {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 10;
    pointer-events: none;
}
/* animation */

.ipad-pitch--422{
    height: 100%;
    border-radius: calc(var(--radius-lg) - 10px);
    overflow: hidden;
    background:
            radial-gradient(760px 420px at 20% 10%, rgba(228,204,180,.16), transparent 60%),
            radial-gradient(620px 360px at 80% 80%, rgba(182,172,161,.10), transparent 55%),
            rgba(10,10,12,.92);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 20px;
}

.ipad-pitch__inner{
    width: min(640px, 100%);
    text-align: left;
    color: rgba(255,255,255,.92);
}

.ipad-pitch__badge{
    display:inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.20);
    font-size: 11.5px;
    opacity: 0;
    transform: translateY(10px);
}

.ipad-pitch__title{
    margin: 12px 0 6px;
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.07;
    font-weight: 850;
    letter-spacing: -.2px;
    opacity: 0;
    transform: translateY(12px);
}

.ipad-pitch__subtitle{
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.42;
    color: rgba(255,255,255,.78);
    max-width: 54ch;
    opacity: 0;
    transform: translateY(12px);
}

.ipad-pitch__rotator{
    display:flex;
    align-items:center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    width: fit-content;
    max-width: 100%;
    opacity: 0;
    transform: translateY(12px);
}

.rotator__label{
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display:grid;
    place-items:center;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.9);
    font-size: 12px;
}

.rotator__text{
    position: relative;
    display:block;
    height: 16px;
    overflow:hidden;
}

.rotator__item{
    position:absolute;
    left:0;
    top:0;
    white-space: nowrap;
    color: rgba(255,255,255,.86);
    font-size: 12.5px;
    opacity: 0;
    transform: translateY(12px);
}

.rotator__item.is-active{
    opacity: 1;
    transform: translateY(0);
}

.ipad-pitch__cta{
    margin-top: 14px;
    display:flex;
    gap: 10px;
    opacity: 0;
    transform: translateY(12px);
}

.ipad-pitch__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.20);
    color: rgba(255,255,255,.90);
    font-size: 12.5px;
    text-decoration:none;
}

.ipad-pitch__btn--primary{
    background: rgba(255,255,255,.14);
}

.ipad-pitch__marquee{
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,.10);
    padding-top: 10px;
    overflow:hidden;
    opacity: .7;
}

.marquee__track{
    display:flex;
    gap: 14px;
    width: max-content;
    transform: translateX(0);
}

.marquee__track span{
    font-size: 11.5px;
    color: rgba(255,255,255,.70);
    padding: 5px 9px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    background: rgba(0,0,0,.18);
}