/* =============================================================
   UP2TECH - Hero « Cartes qui gravitent »
   - Grosses cartes qui TOMBENT vers le bas au scroll
   - Rotation douce sur l'AXE VERTICAL (droite ↔ gauche), effet
     « carte Pokémon holo » : la brillance balaie la carte en
     synchro avec l'inclinaison 3D
   - Flottement doux + parallaxe à la souris
   Visuels fournis plus tard : <img class="up2-card__img"> dans
   .up2-card__inner (le placeholder disparaît alors tout seul).
   Chargé APRÈS styles.css.
   Keyframes préfixés « up2Card* » pour NE PAS écraser ceux du
   template (ex. up2Shine du titre .up2-slogan).
   ============================================================= */

/* Le contenu du hero passe au-dessus des cartes */
.section-hero .container { position: relative; z-index: 5; }

/* Hero en trois zones : média gauche, contenu central, média droit.
   La troisième zone reste volontairement libre jusqu'à l'arrivée du mobile. */
.section-hero .up2-hero-grid {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) minmax(600px, 760px) minmax(250px, 1fr);
    align-items: center;
    width: min(100%, 1680px);
    max-width: 1680px;
    min-height: 100%;
    margin-inline: auto;
    padding-inline: 28px;
}

.section-hero .up2-hero-grid > .content-wrap {
    grid-column: 2;
    min-width: 0;
}

.up2-hero-grid__media {
    position: relative;
    min-width: 0;
    pointer-events: none;
}

.up2-hero-grid__media--left {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    height: clamp(360px, 34vw, 560px);
    animation: up2HeroLaptopEnter .82s cubic-bezier(.16, 1, .3, 1) .08s both;
}

.up2-hero-grid__media--right {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    height: clamp(360px, 34vw, 560px);
    animation: up2HeroPhoneEnter .88s cubic-bezier(.16, 1, .3, 1) .18s both;
}

@keyframes up2HeroLaptopEnter {
    from {
        opacity: 0;
        transform: translate3d(-150px, 42px, 0) rotate(-5deg) scale(.9);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0) scale(1);
    }
}

@keyframes up2HeroPhoneEnter {
    from {
        opacity: 0;
        transform: translate3d(150px, -28px, 0) rotate(5deg) scale(.9);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .up2-hero-grid__media--left,
    .up2-hero-grid__media--right {
        animation: none;
    }
}

.up2-hero-device-video {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 28px 32px rgba(9, 18, 73, .22));
}

.up2-hero-device-scroll {
    position: absolute;
    inset: 0;
    opacity: 1;
    will-change: transform, opacity;
}

.up2-laptop-alerts {
    position: absolute;
    top: 7%;
    left: 43%;
    display: flex;
    align-items: center;
    gap: 12px;
    width: clamp(252px, calc(11.5vw + 62px), 272px);
    margin-left: calc(clamp(252px, calc(11.5vw + 62px), 272px) / -2);
    pointer-events: none;
}

.up2-laptop-notification {
    position: relative;
    z-index: 0;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 50px;
    padding: 8px 10px;
    border: 1px solid rgba(40, 38, 90, .1);
    border-radius: 11px;
    background: #fff;
    color: #28265a;
    box-shadow: 0 9px 22px rgba(15, 24, 74, .14);
    opacity: 0;
    transform-origin: 50% 100%;
    will-change: transform, opacity;
}

.up2-laptop-notification.is-active {
    animation: up2LaptopNotification var(--up2-notification-duration, 3600ms) linear both;
}

.up2-laptop-counter {
    position: relative;
    z-index: 3;
    display: flex;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    background: #ff2e7e;
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 24, 74, .18);
    opacity: 0;
    transform: scale(.72);
}

.up2-laptop-counter.has-value {
    opacity: 1;
    transform: scale(1);
}

.up2-laptop-counter.is-active {
    animation: up2LaptopCounterCycle var(--up2-notification-duration, 3600ms) linear both;
}

@keyframes up2LaptopCounterCycle {
    0%, 20% {
        opacity: 0;
        transform: scale(.72);
    }
    22% {
        opacity: 1;
        transform: scale(1.16);
    }
    28%, 72% {
        opacity: 1;
        transform: scale(1);
    }
    80%, 100% {
        opacity: 0;
        transform: scale(.88);
    }
}

.up2-laptop-notification__icon {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 8px;
    background: #ff2e7e;
    color: #fff;
}

.up2-laptop-notification__icon svg {
    width: 18px;
    height: 18px;
}

.up2-laptop-notification__copy {
    display: grid;
    min-width: 0;
    line-height: 1.1;
}

.up2-laptop-notification__copy strong {
    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;
}

@keyframes up2LaptopNotification {
    0%, 12% {
        z-index: 0;
        opacity: 0;
        transform: translate3d(-8px, 210px, 0) rotate(-8deg) scale(.8);
    }
    13% {
        z-index: 0;
        opacity: .2;
        transform: translate3d(-8px, 200px, 0) rotate(-8deg) scale(.82);
        animation-timing-function: cubic-bezier(.12, .78, .2, 1);
    }
    20% {
        z-index: 0;
    }
    20.01% {
        z-index: 2;
    }
    22% {
        z-index: 2;
        opacity: 1;
        transform: translate3d(3px, -14px, 0) rotate(2deg) scale(1.03);
    }
    28%, 72% {
        z-index: 2;
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0) scale(1);
    }
    80%, 100% {
        z-index: 2;
        opacity: 0;
        transform: translate3d(0, -18px, 0) rotate(0) scale(.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .up2-laptop-notification {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .up2-laptop-counter,
    .up2-laptop-counter.is-active {
        animation: none;
    }
}

.up2-phone-reviews {
    position: absolute;
    top: 8%;
    left: 54%;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 226px;
    margin-left: -113px;
    pointer-events: none;
}

.up2-phone-rating {
    position: relative;
    z-index: 0;
    display: flex;
    flex: 1 1 auto;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 12px;
    border: 1px solid rgba(40, 38, 90, .1);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 9px 22px rgba(15, 24, 74, .14);
    opacity: 0;
    transform-origin: 50% 100%;
    will-change: transform, opacity;
}

.up2-phone-rating.is-active {
    animation: up2PhoneRating var(--up2-review-duration, 3600ms) linear both;
}

.up2-phone-rating span {
    display: block;
    color: #ffc928;
    font-size: 21px;
    line-height: 1;
    opacity: 0;
    transform: translateY(5px) scale(.45);
}

.up2-phone-rating.is-active span {
    animation: up2PhoneStarPop .34s cubic-bezier(.16, 1, .3, 1) both;
}

.up2-phone-rating.is-active span:nth-child(1) { animation-delay: 790ms; }
.up2-phone-rating.is-active span:nth-child(2) { animation-delay: 855ms; }
.up2-phone-rating.is-active span:nth-child(3) { animation-delay: 920ms; }
.up2-phone-rating.is-active span:nth-child(4) { animation-delay: 985ms; }
.up2-phone-rating.is-active span:nth-child(5) { animation-delay: 1050ms; }

@keyframes up2PhoneStarPop {
    0% { opacity: 0; transform: translateY(5px) scale(.45); }
    65% { opacity: 1; transform: translateY(-2px) scale(1.2); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.up2-phone-counter {
    position: relative;
    z-index: 3;
    display: flex;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    background: #22b964;
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 24, 74, .18);
    opacity: 0;
    transform: scale(.72);
}

.up2-phone-counter svg {
    width: 23px;
    height: 23px;
}

.up2-phone-counter.has-value {
    opacity: 1;
    transform: scale(1);
}

.up2-phone-counter.is-active {
    animation: up2PhoneCounterCycle var(--up2-review-duration, 3600ms) linear both;
}

@keyframes up2PhoneRating {
    0%, 12% {
        z-index: 0;
        opacity: 0;
        transform: translate3d(8px, 210px, 0) rotate(8deg) scale(.8);
    }
    13% {
        z-index: 0;
        opacity: .2;
        transform: translate3d(8px, 200px, 0) rotate(8deg) scale(.82);
        animation-timing-function: cubic-bezier(.12, .78, .2, 1);
    }
    20% { z-index: 0; }
    20.01% { z-index: 2; }
    22% {
        z-index: 2;
        opacity: 1;
        transform: translate3d(-3px, -14px, 0) rotate(-2deg) scale(1.03);
    }
    28%, 72% {
        z-index: 2;
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0) scale(1);
    }
    80%, 100% {
        z-index: 2;
        opacity: 0;
        transform: translate3d(0, -18px, 0) rotate(0) scale(.98);
    }
}

@keyframes up2PhoneCounterCycle {
    0%, 20% { opacity: 0; transform: scale(.72); }
    22% { opacity: 1; transform: scale(1.16); }
    28%, 72% { opacity: 1; transform: scale(1); }
    80%, 100% { opacity: 0; transform: scale(.88); }
}

@media (prefers-reduced-motion: reduce) {
    .up2-phone-rating {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .up2-phone-rating span {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .up2-phone-counter,
    .up2-phone-counter.is-active {
        animation: none;
    }
}

.up2-hero-device-video--laptop {
    z-index: 1;
    width: clamp(660px, 48vw, 900px);
    transform: translate(-51%, -50%);
}

.up2-hero-device-video--phone {
    z-index: 1;
    width: clamp(760px, 50vw, 960px);
    transform: translate(-47%, -49%);
    filter: drop-shadow(0 24px 28px rgba(9, 18, 73, .24));
}

/* Couche des cartes */
.up2-cards {
    display: none;
    position: absolute;
    inset: 16px 16px 0 16px;
    border-radius: 40px;
    overflow: hidden;      /* AU REPOS : cartes croppées par le cadre arrondi */
    pointer-events: none;
    z-index: 2;
}

/* AU SCROLL : on lève le clip -> les cartes sortent du cadre du hero */
.up2-cards.is-exiting { overflow: visible; }
/* Pendant la sortie, les cartes ne captent plus le survol / les clics */
.up2-cards.is-exiting .up2-card { pointer-events: none; }

/* Le hero passe AU-DESSUS des sections suivantes le temps que les cartes
   glissent dehors et se dissolvent (z-index > sections suivantes).
   PAS d'overflow:clip ici -> les cartes doivent pouvoir déborder sur la
   section suivante. Le scroll infini est évité en bornant la chute en JS
   (applyScroll : translateY plafonné à ~1 écran). */
.section-hero { position: relative; z-index: 2; }

/* Pendant la sortie des appareils, seul leur contenu déborde au-dessus de la
   section suivante. Le bouton placé entre les deux sections reste prioritaire. */
.section-hero.is-device-exiting {
    z-index: 4;
    overflow: visible;
}

.section-hero.is-device-exiting .up2-hero-grid,
.section-hero.is-device-exiting .up2-hero-grid__media {
    overflow: visible;
}

/* Pluie lente de pictogrammes 3D : les gouttières restent animées tandis que
   le centre du hero demeure dégagé pour préserver la lecture et les CTA. */
.up2-picto-rain {
    display: none;
    position: absolute;
    inset: 16px 16px 0;
    z-index: 3;
    overflow: hidden;
    border-radius: 40px;
    pointer-events: none;
    transition: opacity .12s linear;
}
.up2-picto-rain.is-exiting { overflow: visible; }

.up2-picto-rain__item {
    position: absolute;
    top: 0;
    left: var(--x);
    width: var(--size);
    height: var(--size);
    margin-left: calc(var(--size) / -2);
    opacity: 0;
    will-change: transform, opacity;
    animation: up2PictoFall var(--dur) linear var(--delay) infinite;
}

.up2-picto-rain__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 16px 18px rgba(16, 13, 55, .28));
    transition: opacity .12s linear;
    animation: up2PictoBob 5.8s ease-in-out var(--delay) infinite alternate;
}

@keyframes up2PictoFall {
    0% {
        opacity: 0;
        transform: translate3d(0, -180px, 0) rotate(var(--rot));
    }
    8% { opacity: var(--picto-alpha, .88); }
    88% { opacity: var(--picto-alpha, .88); }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift), calc(100vh + 320px), 0) rotate(calc(0deg - var(--rot)));
    }
}

.up2-picto-rain__item:nth-child(3n + 1) { --picto-alpha: 1; z-index: 3; }
.up2-picto-rain__item:nth-child(3n + 2) { --picto-alpha: .96; z-index: 1; }
.up2-picto-rain__item:nth-child(3n) { --picto-alpha: .98; z-index: 2; }

@keyframes up2PictoBob {
    from { transform: translate3d(-7px, -8px, 0) rotate(-4deg) scale(.96); }
    to { transform: translate3d(8px, 10px, 0) rotate(5deg) scale(1.04); }
}

/* Deux cartes recto-verso qui alternent de part et d'autre du contenu. */
.up2-hero-flips {
    display: none !important;
    position: absolute;
    inset: 16px 16px 0;
    z-index: 4;
    overflow: hidden;
    border-radius: 40px;
    pointer-events: none;
    perspective: 1200px;
}

.up2-hero-flip {
    position: absolute;
    top: 50%;
    width: 270px;
    aspect-ratio: 242 / 336;
    margin-top: -168px;
    pointer-events: auto;
    cursor: pointer;
}

.up2-hero-flip--left {
    left: 9%;
    transform: rotate(-7deg);
}

.up2-hero-flip--right {
    right: 8%;
    transform: rotate(7deg);
}

.up2-hero-flip__float {
    width: 100%;
    height: 100%;
    animation: up2FlipFloat 6.5s ease-in-out infinite alternate;
}

.up2-hero-flip--right .up2-hero-flip__float {
    animation-delay: -3.25s;
}

.up2-hero-flip__rotor {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    animation: up2CardSwitch 6s cubic-bezier(.7, 0, .3, 1) infinite;
}

.up2-hero-flip--right .up2-hero-flip__rotor {
    animation-delay: -3s;
}

.up2-hero-flip:hover .up2-hero-flip__rotor {
    animation: up2CardHoverSwitch .6s cubic-bezier(.2,.75,.2,1) forwards;
}

.up2-hero-flip__face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 34px 62px rgba(9,12,55,.42),0 8px 24px rgba(255,46,126,.2);
}

.up2-hero-flip__face--back {
    transform: rotateY(180deg);
}

.up2-hero-flip__face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes up2CardSwitch {
    0%, 40% { transform: rotateY(0deg); }
    50%, 90% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes up2CardHoverSwitch {
    from { transform: rotateY(0deg) scale(1); }
    to { transform: rotateY(180deg) scale(1.035); }
}

@keyframes up2FlipFloat {
    from { transform: translateY(-9px); }
    to { transform: translateY(10px); }
}

/*
   Un écran large n'est pas forcément haut (portable, barre d'onglets,
   favoris, outils développeur, etc.). Le contenu du hero dépasse alors
   100vh et son centrage vertical le faisait remonter sous la navbar.
   On conserve donc le plein écran, avec une hauteur plancher correspondant
   à la hauteur réelle du contenu. La page défile simplement sur les écrans
   bas au lieu de compresser visuellement le premier écran.
*/
@media (min-width: 992px) {
    .section-hero {
        min-height: 800px;
        align-items: flex-start;
    }

    .section-hero .content-wrap {
        padding-top: 142px;
        padding-bottom: 54px;
    }

    .section-hero .content-wrap .sub {
        margin-bottom: 20px;
    }

    .section-hero .up2-hero-swap {
        margin-bottom: 24px;
    }

    .section-hero .content-wrap .text {
        max-width: 1040px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 24px;
        line-height: 1.55;
    }

    .section-hero .up2-ai-search {
        margin-top: 44px;
    }
}

/* Wrapper positionné + parallaxe souris (--px/--py) + fondu d'entrée */
.up2-card {
    position: absolute;
    left: var(--x);
    top: var(--y);
    /* Taille = base (pilotée par le responsive) × échelle propre à la carte */
    --base-w: 200px;
    --base-h: 278px;
    --w: calc(var(--base-w) * var(--scale, 1));
    --h: calc(var(--base-h) * var(--scale, 1));
    width: var(--w);
    height: var(--h);
    margin-left: calc(var(--w) / -2);
    margin-top: calc(var(--h) / -2);
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
    pointer-events: auto;
    z-index: 3;
    opacity: 0;
    animation: up2CardIn .9s ease var(--in, .1s) forwards;
}

/* Couche « chute au scroll » (JS pilote translateY, vers le bas) */
.up2-card__drop {
    width: 100%;
    height: 100%;
    will-change: transform;
}

/* Couche « flottement » continu */
.up2-card__float {
    width: 100%;
    height: 100%;
    animation: up2CardFloat var(--floatDur, 7s) ease-in-out var(--floatDelay, 0s) infinite;
}

/* Couche « tilt 3D » : légère rotation sur l'axe vertical (droite ↔ gauche) */
.up2-card__tilt {
    width: 100%;
    height: 100%;
    animation: up2CardTilt var(--tiltDur, 6s) ease-in-out var(--tiltDelay, 0s) infinite;
    transform-origin: 50% 50%;
}

/* La carte visible */
.up2-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.55),
        0 8px 26px rgba(224, 30, 104, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(120% 80% at 20% 8%, rgba(255, 77, 145, 0.38) 0%, rgba(255, 77, 145, 0) 55%),
        linear-gradient(155deg, #201a2b 0%, #171420 45%, #2a1330 100%);
    transition: box-shadow .35s ease, transform .35s ease;
}

/* Image de la carte (si fournie) */
.up2-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder (masqué dès qu'une image est présente) */
.up2-card__img ~ .up2-card__ph { display: none; }
.up2-card__ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
    padding: 16px;
}
.up2-card__ph .ic {
    font-size: 38px;
    color: #ff4d91;
    filter: drop-shadow(0 4px 16px rgba(255, 77, 145, 0.6));
}
.up2-card__ph .lb {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .8;
}

/* Brillance holographique : glare qui balaie en SYNCHRO avec le tilt */
.up2-card__inner::after {
    content: "";
    position: absolute;
    inset: -25%;
    background: linear-gradient(
        108deg,
        transparent 26%,
        rgba(255, 255, 255, 0.12) 40%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 77, 145, 0.35) 56%,
        rgba(255, 255, 255, 0.12) 64%,
        transparent 76%
    );
    transform: translateX(0);
    animation: up2CardHolo var(--tiltDur, 6s) ease-in-out var(--tiltDelay, 0s) infinite;
    pointer-events: none;
}

/* Liseré brillant sur le bord */
.up2-card__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 40%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .6;
    z-index: 1;
}

/* Survol : la carte se redresse et brille plus fort */
.up2-card:hover { z-index: 9; }
.up2-card:hover .up2-card__inner {
    transform: translateY(-6px) scale(1.04);
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.6),
        0 12px 38px rgba(224, 30, 104, 0.45);
}

/* ---- Keyframes (préfixés up2Card*) ---- */
@keyframes up2CardIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes up2CardFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
/* Tilt 3D droite ↔ gauche autour de l'axe vertical (perspective incluse).
   rotate(--rot) conserve l'inclinaison « éparpillée » de repos de chaque carte.
   --tiltAmp = amplitude du pivot (plus grand = effet plus prononcé). */
@keyframes up2CardTilt {
    0%, 100% { transform: rotate(var(--rot, 0deg)) perspective(800px) rotateY(var(--tiltAmp, 30deg)); }
    50%      { transform: rotate(var(--rot, 0deg)) perspective(800px) rotateY(calc(var(--tiltAmp, 30deg) * -1)); }
}
/* La brillance suit l'inclinaison (balaie de gauche à droite en synchro) */
@keyframes up2CardHolo {
    0%, 100% { transform: translateX(58%);  opacity: .5; }
    50%      { transform: translateX(-58%); opacity: 1; }
}

/* Responsive : on ajuste la taille de BASE (le facteur --scale de chaque carte reste appliqué) */
/* Rétrécissement progressif : évite l'effet « tassé » sur écrans portables / Mac mis à l'échelle.
   Le très grand écran (>1750px) garde la grande taille ; en dessous les cartes rapetissent. */
@media (max-width: 1750px) { .up2-card { --base-w: 184px; --base-h: 256px; } }
@media (max-width: 1550px) { .up2-card { --base-w: 172px; --base-h: 239px; } }
@media (max-width: 1350px) {
    .up2-card { --base-w: 158px; --base-h: 220px; }
    /* 3e carte (Loïc, data-sm-hide) masquée dès le format portable pour aérer le côté droit */
    .up2-card[data-sm-hide] { display: none; }
}
@media (max-width: 1150px) { .up2-card { --base-w: 150px; --base-h: 208px; } }
@media (max-width: 991px)  { .up2-card { --base-w: 138px; --base-h: 192px; } }
@media (max-width: 575px)  { .up2-cards { display: none; } }

@media (max-width: 991px) {
    .section-hero .up2-hero-grid {
        display: block;
        width: 100%;
        min-height: 0;
        padding-inline: 16px;
    }
    .up2-hero-grid__media { display: none; }
    .up2-hero-flip { width: 180px; margin-top: -112px; }
    .up2-hero-flip--left { left: 4%; }
    .up2-hero-flip--right { right: 4%; }
    .up2-picto-rain__item {
        width: calc(var(--size) * .72);
        height: calc(var(--size) * .72);
    }
    .up2-picto-rain__item:nth-child(3n) { display: none; }
}

@media (max-width: 575px) {
    .up2-hero-flips { display: none; }
    .up2-picto-rain { inset: 8px 8px 0; border-radius: 24px; }
    .up2-picto-rain__item {
        width: calc(var(--size) * .55);
        height: calc(var(--size) * .55);
        opacity: .68;
    }
    .up2-picto-rain__item:nth-child(even) { display: none; }
}

/* Titre fluide : mêmes proportions sur Chrome/Safari/Firefox, sans saut brutal
   d'une taille à l'autre aux seuils des media queries. */
@media (min-width: 992px) {
    .section-hero .up2-hero-swap {
        font-size: clamp(64px, 4.6vw, 82px);
        line-height: 1.04;
    }
}

/* Mouvement réduit : pas de tilt/flottement/brillance/parallaxe */
@media (prefers-reduced-motion: reduce) {
    .up2-hero-flip__float,
    .up2-hero-flip__rotor { animation: none; }
    .up2-picto-rain__item {
        top: var(--rest-y);
        opacity: .62;
        transform: rotate(var(--rot));
        animation: none;
    }
    .up2-picto-rain__item img { animation: none; }
    .up2-card__float,
    .up2-card__tilt { animation: none; }
    .up2-card__inner::after { animation: none; opacity: 0; }
    .up2-card { transition: none; }
}