/* =========================================================
   HERO ACCUEIL - IMAGE PORTABLE À DROITE
   Remplace le téléphone généré par l'image portable-appli.PNG
========================================================= */

/* On garde l'ancien téléphone caché */
.hero-phone,
.hero-phone *,
.phone-shell,
.phone-screen{
    display: none !important;
    visibility: hidden !important;
}

/* Carte d'accueil : texte à gauche, image à droite */
.hero.card{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 34px !important;

    height: 520px !important;
    max-height: 520px !important;
    min-height: 0 !important;

    padding: 46px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Texte à gauche */
.hero.card > div:first-child{
    max-width: 620px !important;
    width: 58% !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Nouvelle image portable */
.hero-phone-image{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 34% !important;
    max-width: 330px !important;
    max-height: 455px !important;
    height: auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin-left: auto !important;
    margin-right: 20px !important;

    position: relative !important;
    z-index: 3 !important;

    filter:
        drop-shadow(0 0 22px rgba(140, 80, 255, 0.55))
        drop-shadow(0 0 42px rgba(75, 190, 255, 0.22));
}

/* Mobile : image sous le texte */
@media (max-width: 900px){
    .hero.card{
        height: auto !important;
        max-height: none !important;
        flex-direction: column !important;
        padding: 32px 22px !important;
    }

    .hero.card > div:first-child{
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-phone-image{
        width: 78% !important;
        max-width: 280px !important;
        margin: 12px auto 0 !important;
    }
}

/* =========================================================
   AUGMENTER IMAGE PORTABLE APPLICATION
   Cible correcte : .hero-phone-image
========================================================= */

.hero-phone-image{
    width: 44% !important;
    max-width: 430px !important;
    max-height: 520px !important;
    transform: scale(1.18) !important;
    transform-origin: center center !important;
    margin-right: 10px !important;
}


/* =========================================================
   RÉDUCTION IMAGE PORTABLE APPLICATION
   Cible : .hero-phone-image
========================================================= */

.hero-phone-image{
    width: 36% !important;
    max-width: 350px !important;
    max-height: 455px !important;
    transform: scale(1.00) !important;
    transform-origin: center center !important;
    margin-right: 20px !important;
}


/* =========================================================
   AJUSTEMENT IMAGE PORTABLE
   Un peu plus grande + mieux centrée
========================================================= */

.hero.card{
    align-items: center !important;
}

.hero-phone-image{
    width: 39% !important;
    max-width: 380px !important;
    max-height: 485px !important;
    transform: scale(1.04) !important;
    transform-origin: center center !important;

    margin-left: auto !important;
    margin-right: 35px !important;

    object-fit: contain !important;
    object-position: center center !important;
}


/* =========================================================
   IMAGE PORTABLE - CENTRAGE VERTICAL DANS LE HERO
========================================================= */

.hero.card{
    position: relative !important;
}

/* Image du portable bien centrée entre haut et bas */
.hero-phone-image{
    position: absolute !important;
    right: 70px !important;
    top: 50% !important;

    width: 39% !important;
    max-width: 380px !important;
    max-height: 485px !important;

    transform: translateY(-50%) scale(1.04) !important;
    transform-origin: center center !important;

    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    z-index: 3 !important;
}

/* Mobile : on évite le positionnement absolu */
@media (max-width: 900px){
    .hero-phone-image{
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: scale(1.00) !important;
        width: 78% !important;
        max-width: 280px !important;
        margin: 12px auto 0 !important;
    }
}


/* =========================================================
   IMAGE PORTABLE - CORRECTION CENTRAGE VERTICAL
   On garde la taille, on corrige juste la position
========================================================= */

.hero-phone-image{
    position: absolute !important;
    right: 70px !important;
    top: 50% !important;

    width: 39% !important;
    max-width: 380px !important;
    max-height: 485px !important;

    /* on le baisse légèrement pour qu'il soit vraiment centré */
    transform: translateY(-42%) scale(1.04) !important;
    transform-origin: center center !important;

    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    z-index: 3 !important;
}

@media (max-width: 900px){
    .hero-phone-image{
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: scale(1.00) !important;
        width: 78% !important;
        max-width: 280px !important;
        margin: 12px auto 0 !important;
    }
}


/* =====================================================
   REDUCTION TAILLE TELEPHONE ACCUEIL
   ===================================================== */

.hero-phone-image{
    width: min(360px, 30vw) !important;
    max-width: 360px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Version mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(285px, 78vw) !important;
        max-width: 285px !important;
        height: auto !important;
    }
}

/* =====================================================
   TAILLE EXACTE TELEPHONE ACCUEIL : 331 x 485
   ===================================================== */

.hero-phone-image{
    width: 331px !important;
    height: 485px !important;
    max-width: 331px !important;
    max-height: 485px !important;
    object-fit: contain !important;
}

/* Sur mobile, on garde la même proportion mais on évite que ça dépasse l'écran */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(331px, 82vw) !important;
        height: auto !important;
        max-width: 331px !important;
        max-height: 485px !important;
        object-fit: contain !important;
    }
}

/* =====================================================
   REDUCTION TELEPHONE DE 5% — 331x485 -> 314x461
   ===================================================== */

.hero-phone-image{
    width: 314px !important;
    height: 461px !important;
    max-width: 314px !important;
    max-height: 461px !important;
    object-fit: contain !important;
}

/* Mobile : même proportion, sans dépasser l'écran */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(314px, 78vw) !important;
        height: auto !important;
        max-width: 314px !important;
        max-height: 461px !important;
        object-fit: contain !important;
    }
}

/* =====================================================
   REDUCTION TELEPHONE ENCORE 5% — 314x461 -> 298x438
   ===================================================== */

.hero-phone-image{
    width: 298px !important;
    height: 438px !important;
    max-width: 298px !important;
    max-height: 438px !important;
    object-fit: contain !important;
}

/* Mobile : même proportion, sans dépasser l'écran */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(298px, 74vw) !important;
        height: auto !important;
        max-width: 298px !important;
        max-height: 438px !important;
        object-fit: contain !important;
    }
}

/* =====================================================
   REMONTER LE TELEPHONE ACCUEIL
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: -20px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: -16px !important;
    }
}

/* =====================================================
   CORRECTION POSITION TELEPHONE
   Annule la remontée trop forte et remonte très légèrement
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: -6px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: -5px !important;
    }
}

/* =====================================================
   RETOUR POSITION TELEPHONE COMME AVANT
   Taille conservée, remontée annulée
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 0 !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 0 !important;
    }
}

/* =====================================================
   REMONTER LE TELEPHONE ACCUEIL
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: -20px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: -16px !important;
    }
}

/* =====================================================
   REDUCTION IMAGE TELEPHONE ENCORE 5%
   298x438 -> 283x416
   ===================================================== */

.hero-phone-image{
    width: 283px !important;
    height: 416px !important;
    max-width: 283px !important;
    max-height: 416px !important;
    object-fit: contain !important;
    position: relative !important;
    top: 0 !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(283px, 70vw) !important;
        height: auto !important;
        max-width: 283px !important;
        max-height: 416px !important;
        object-fit: contain !important;
        position: relative !important;
        top: 0 !important;
    }
}

/* =====================================================
   DESCENDRE LE TELEPHONE SANS CHANGER SA TAILLE
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 18px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 14px !important;
    }
}

/* =====================================================
   DESCENDRE LE TELEPHONE DE 50 PX
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 50px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 50px !important;
    }
}

/* =====================================================
   DESCENDRE LE TELEPHONE DE 100 PX
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 100px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 100px !important;
    }
}

/* =====================================================
   DESCENDRE LE TELEPHONE ENCORE DE 100 PX
   Total : 200px vers le bas
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 200px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 200px !important;
    }
}

/* =====================================================
   REMONTER LE TELEPHONE DE 10 PX
   Position finale : 190px vers le bas
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 190px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 190px !important;
    }
}

/* =====================================================
   REMONTER LE TELEPHONE ENCORE DE 10 PX
   Position finale : 180px vers le bas
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 180px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 180px !important;
    }
}

/* =====================================================
   REMONTER LE TELEPHONE ENCORE DE 10 PX
   Position finale : 180px vers le bas
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 180px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 180px !important;
    }
}

/* =====================================================
   REMONTER LE TELEPHONE DE 1 PX
   Position finale : 178px vers le bas
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 178px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 178px !important;
    }
}

/* =====================================================
   REMONTER LE TELEPHONE DE 1 PX
   Position finale : 178px vers le bas
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 178px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 178px !important;
    }
}

/* =====================================================
   REMONTER LE TELEPHONE DE 1 PX
   Position finale : 178px vers le bas
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 178px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 178px !important;
    }
}

/* =====================================================
   REMONTER LE TELEPHONE DE 2 PX
   Position finale : 176px vers le bas
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 176px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 176px !important;
    }
}

/* =====================================================
   REMONTER LE TELEPHONE ENCORE DE 2 PX
   Position finale : 174px vers le bas
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 174px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 174px !important;
    }
}

/* =====================================================
   DECALER LE TELEPHONE DE 15 PX VERS LA DROITE
   Position verticale conservée : 174px
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 174px !important;
    left: 15px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 174px !important;
        left: 15px !important;
    }
}

/* =====================================================
   DECALER LE TELEPHONE DE 5 PX VERS LA GAUCHE
   Position finale : left 10px
   Hauteur conservée : top 174px
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 174px !important;
    left: 10px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 174px !important;
        left: 10px !important;
    }
}

/* =====================================================
   DECALER LE TELEPHONE DE 2 PX VERS LA GAUCHE
   Position finale : left 8px
   Hauteur conservée : top 174px
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 174px !important;
    left: 8px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 174px !important;
        left: 8px !important;
    }
}

/* =====================================================
   DECALER LE TELEPHONE ENCORE DE 2 PX VERS LA GAUCHE
   Position finale : left 6px
   Hauteur conservée : top 174px
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 174px !important;
    left: 6px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 174px !important;
        left: 6px !important;
    }
}

/* =====================================================
   DECALER LE TELEPHONE DE 4 PX VERS LA GAUCHE
   Position finale : left 2px
   Hauteur conservée : top 174px
   ===================================================== */

.hero-phone-image{
    position: relative !important;
    top: 174px !important;
    left: 2px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        position: relative !important;
        top: 174px !important;
        left: 2px !important;
    }
}

/* =====================================================
   REDUIRE LA HAUTEUR DU TELEPHONE DE 5 PX
   Largeur conservée, position conservée
   ===================================================== */

.hero-phone-image{
    width: 283px !important;
    height: 411px !important;
    max-width: 283px !important;
    max-height: 411px !important;
    object-fit: contain !important;
    position: relative !important;
    top: 174px !important;
    left: 2px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(283px, 70vw) !important;
        height: auto !important;
        max-width: 283px !important;
        max-height: 411px !important;
        object-fit: contain !important;
        position: relative !important;
        top: 174px !important;
        left: 2px !important;
    }
}

/* =====================================================
   REDUIRE LA HAUTEUR DU TELEPHONE DE 10 PX
   Largeur conservée, position conservée
   ===================================================== */

.hero-phone-image{
    width: 283px !important;
    height: 401px !important;
    max-width: 283px !important;
    max-height: 401px !important;
    object-fit: contain !important;
    position: relative !important;
    top: 174px !important;
    left: 2px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(283px, 70vw) !important;
        height: auto !important;
        max-width: 283px !important;
        max-height: 401px !important;
        object-fit: contain !important;
        position: relative !important;
        top: 174px !important;
        left: 2px !important;
    }
}

/* =====================================================
   COUPER L'IMAGE DU TELEPHONE DE 20 PX PAR LE BAS
   Haut, largeur et position conservés
   ===================================================== */

.hero-phone-image{
    width: 283px !important;
    height: 401px !important;
    max-width: 283px !important;
    max-height: 401px !important;
    object-fit: contain !important;
    object-position: top center !important;
    position: relative !important;
    top: 174px !important;
    left: 2px !important;

    /* Coupe uniquement le bas de l'image */
    clip-path: inset(0 0 20px 0) !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(283px, 70vw) !important;
        height: auto !important;
        max-width: 283px !important;
        max-height: 401px !important;
        object-fit: contain !important;
        object-position: top center !important;
        position: relative !important;
        top: 174px !important;
        left: 2px !important;

        clip-path: inset(0 0 20px 0) !important;
    }
}

/* =====================================================
   ANNULATION DU MASQUAGE BAS DU TELEPHONE
   On ne coupe plus aucun pixel
   ===================================================== */

.hero-phone-image{
    clip-path: none !important;
    -webkit-clip-path: none !important;
    object-position: center center !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        clip-path: none !important;
        -webkit-clip-path: none !important;
        object-position: center center !important;
    }
}

/* =====================================================
   REDUCTION PROPRE HAUTEUR IMAGE DE 5 PX
   Sans masquer les pixels, sans clip-path
   Position conservée
   ===================================================== */

.hero-phone-image{
    width: 283px !important;
    height: 396px !important;
    max-width: 283px !important;
    max-height: 396px !important;
    object-fit: contain !important;
    object-position: center center !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    position: relative !important;
    top: 174px !important;
    left: 2px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(283px, 70vw) !important;
        height: auto !important;
        max-width: 283px !important;
        max-height: 396px !important;
        object-fit: contain !important;
        object-position: center center !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        position: relative !important;
        top: 174px !important;
        left: 2px !important;
    }
}

/* =====================================================
   REDUIRE LE TELEPHONE POUR LE FAIRE RENTRER
   DANS LE CADRE ROUGE
   ===================================================== */

.hero-phone-image{
    width: 270px !important;
    height: 378px !important;
    max-width: 270px !important;
    max-height: 378px !important;
    object-fit: contain !important;
    object-position: center center !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    position: relative !important;
    top: 174px !important;
    left: 2px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(270px, 68vw) !important;
        height: auto !important;
        max-width: 270px !important;
        max-height: 378px !important;
        object-fit: contain !important;
        object-position: center center !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        position: relative !important;
        top: 174px !important;
        left: 2px !important;
    }
}

/* =====================================================
   REDUCTION HAUTEUR TELEPHONE POUR RENTRER DANS LE CADRE
   Sans masquer, sans couper, sans clip-path
   ===================================================== */

.hero-phone-image{
    width: 270px !important;
    height: 360px !important;
    max-width: 270px !important;
    max-height: 360px !important;
    object-fit: contain !important;
    object-position: center center !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    position: relative !important;
    top: 174px !important;
    left: 2px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(270px, 68vw) !important;
        height: auto !important;
        max-width: 270px !important;
        max-height: 360px !important;
        object-fit: contain !important;
        object-position: center center !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        position: relative !important;
        top: 174px !important;
        left: 2px !important;
    }
}

/* =====================================================
   REDUCTION HAUTEUR TELEPHONE POUR RENTRER DANS LE CADRE
   Sans masquer, sans couper, sans clip-path
   ===================================================== */

.hero-phone-image{
    width: 270px !important;
    height: 360px !important;
    max-width: 270px !important;
    max-height: 360px !important;
    object-fit: contain !important;
    object-position: center center !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    position: relative !important;
    top: 174px !important;
    left: 2px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(270px, 68vw) !important;
        height: auto !important;
        max-width: 270px !important;
        max-height: 360px !important;
        object-fit: contain !important;
        object-position: center center !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        position: relative !important;
        top: 174px !important;
        left: 2px !important;
    }
}

/* =====================================================
   REDUCTION HAUTEUR TELEPHONE POUR RENTRER DANS LE CADRE
   Sans masquer, sans couper, sans clip-path
   ===================================================== */

.hero-phone-image{
    width: 270px !important;
    height: 360px !important;
    max-width: 270px !important;
    max-height: 360px !important;
    object-fit: contain !important;
    object-position: center center !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    position: relative !important;
    top: 174px !important;
    left: 2px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(270px, 68vw) !important;
        height: auto !important;
        max-width: 270px !important;
        max-height: 360px !important;
        object-fit: contain !important;
        object-position: center center !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        position: relative !important;
        top: 174px !important;
        left: 2px !important;
    }
}

/* =====================================================
   REMONTER LE TELEPHONE DE 10 PX
   Taille conservée : 270 x 360
   Position finale : top 164px
   ===================================================== */

.hero-phone-image{
    width: 270px !important;
    height: 360px !important;
    max-width: 270px !important;
    max-height: 360px !important;
    object-fit: contain !important;
    object-position: center center !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    position: relative !important;
    top: 164px !important;
    left: 2px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(270px, 68vw) !important;
        height: auto !important;
        max-width: 270px !important;
        max-height: 360px !important;
        object-fit: contain !important;
        object-position: center center !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        position: relative !important;
        top: 164px !important;
        left: 2px !important;
    }
}

/* =====================================================
   REMONTER LE TELEPHONE ENCORE DE 10 PX
   Taille conservée : 270 x 360
   Position finale : top 154px
   ===================================================== */

.hero-phone-image{
    width: 270px !important;
    height: 360px !important;
    max-width: 270px !important;
    max-height: 360px !important;
    object-fit: contain !important;
    object-position: center center !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    position: relative !important;
    top: 154px !important;
    left: 2px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(270px, 68vw) !important;
        height: auto !important;
        max-width: 270px !important;
        max-height: 360px !important;
        object-fit: contain !important;
        object-position: center center !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        position: relative !important;
        top: 154px !important;
        left: 2px !important;
    }
}

/* =====================================================
   REMONTER LE TELEPHONE DE 2 PX
   Taille conservée : 270 x 360
   Position finale : top 152px
   ===================================================== */

.hero-phone-image{
    width: 270px !important;
    height: 360px !important;
    max-width: 270px !important;
    max-height: 360px !important;
    object-fit: contain !important;
    object-position: center center !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    position: relative !important;
    top: 152px !important;
    left: 2px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(270px, 68vw) !important;
        height: auto !important;
        max-width: 270px !important;
        max-height: 360px !important;
        object-fit: contain !important;
        object-position: center center !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        position: relative !important;
        top: 152px !important;
        left: 2px !important;
    }
}

/* =====================================================
   TAILLE FINALE TELEPHONE : 280 x 360
   Position conservée : top 152px / left 2px
   ===================================================== */

.hero-phone-image{
    width: 280px !important;
    height: 360px !important;
    max-width: 280px !important;
    max-height: 360px !important;
    object-fit: contain !important;
    object-position: center center !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    position: relative !important;
    top: 152px !important;
    left: 2px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(280px, 70vw) !important;
        height: auto !important;
        max-width: 280px !important;
        max-height: 360px !important;
        object-fit: contain !important;
        object-position: center center !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        position: relative !important;
        top: 152px !important;
        left: 2px !important;
    }
}

/* =====================================================
   TAILLE FINALE TELEPHONE : 300 x 360
   Position conservée : top 152px / left 2px
   ===================================================== */

.hero-phone-image{
    width: 300px !important;
    height: 360px !important;
    max-width: 300px !important;
    max-height: 360px !important;
    object-fit: contain !important;
    object-position: center center !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    position: relative !important;
    top: 152px !important;
    left: 2px !important;
}

/* Mobile */
@media (max-width: 768px){
    .hero-phone-image{
        width: min(300px, 74vw) !important;
        height: auto !important;
        max-width: 300px !important;
        max-height: 360px !important;
        object-fit: contain !important;
        object-position: center center !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        position: relative !important;
        top: 152px !important;
        left: 2px !important;
    }
}