/**
 * Main container
 */
 #addToHomeScreen {
    z-index: 9999;
    -webkit-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    touch-callout: none;
    width: 240px;
    font-size: 15px;
    padding: 20px;
    text-align: left;
    font-family: helvetica;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fff), color-stop(0.02, #eee), color-stop(0.98, #ccc), color-stop(1, #a3a3a3));
    border: 1px solid #505050;
    -webkit-border-radius: 8px;
    -webkit-background-clip: padding-box;
    color: #333;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
    line-height: 1.6em;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

#addToHomeScreen.addToHomeIOS7 {
    background: #f2f2f2 !important;
    -webkit-border-radius: 1px !important;
    border: 1px solid #ccc;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

#addToHomeScreen.addToHomeIpad,
#addToHomeScreen.addToHomeAndroid {
    width: 268px;
    font-size: 18px;
    padding: 14px;
    position: fixed !important;
}

/**
 * The 'wide' class is added when the popup contains the touch icon
 */
#addToHomeScreen.addToHomeWide {
    width: 296px;
}

#addToHomeScreen.addToHomeIpad.addToHomeWide,
#addToHomeScreen.addToHomeAndroid.addToHomeWide {
    width: 320px;
    font-size: 18px;
    padding: 14px;
}

/**
 * The balloon arrow
 */
#addToHomeScreen .addToHomeArrow {
    position: absolute;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0, rgba(204, 204, 204, 0)), color-stop(0.4, rgba(204, 204, 204, 0)), color-stop(0.4, #ccc));
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #505050;
    width: 16px;
    height: 16px;
    -webkit-transform: rotateZ(45deg);
    bottom: -9px;
    left: 50%;
    margin-left: -8px;
    -webkit-box-shadow: inset -1px -1px 0 #a9a9a9;
    -webkit-border-bottom-right-radius: 2px;
}

#addToHomeScreen.addToHomeIOS7 .addToHomeArrow {
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0, rgba(204, 204, 204, 0)), color-stop(0.4, rgba(204, 204, 204, 0)), color-stop(0.4, #f2f2f2)) !important;
    -webkit-box-shadow: inset -1px -1px 0 #fff !important;
    border-color: #ccc !important;
}

/**
 * The balloon arrow for iPad and Android
 */
#addToHomeScreen.addToHomeIpad .addToHomeArrow,
#addToHomeScreen.addToHomeAndroid .addToHomeArrow {
    -webkit-transform: rotateZ(-135deg);
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0, rgba(238, 238, 238, 0)), color-stop(0.4, rgba(238, 238, 238, 0)), color-stop(0.4, #eee));
    -webkit-box-shadow: inset -1px -1px 0 #fff;
    top: -9px;
    bottom: auto;
    left: 50%;
}

/**
 * Close button
 */
#addToHomeScreen .addToHomeClose {
    -webkit-box-sizing: border-box;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 18px;
    height: 18px;
    line-height: 14px;
    text-align: center;
    text-indent: 1px;
    -webkit-border-radius: 9px;
    background: rgba(0, 0, 0, 0.12);
    color: #888;
    -webkit-box-shadow: 0 1px 0 #fff;
    font-size: 16px;
}

#addToHomeScreen.addToHomeIOS7 .addToHomeClose {
    line-height: 12px;
    padding-right: 1px;
    background: transparent;
    border: 1px solid #888;
    -webkit-box-shadow: none;
}

/**
 * The '+' icon, displayed only on iOS < 4.2 or Android
 */
#addToHomeScreen .addToHomePlus {
    font-weight: bold;
    font-size: 1.3em;
}

/**
 * Intro line (first line of the balloon message)
 */
#addToHomeScreen .addToHomeIntro {
    display: block;
    font-size: 1.1em;
    margin-bottom: 4px;
}

/**
 * Common base for all inline iOS-style action icons
 */
#addToHomeScreen .addToHomeShare,
#addToHomeScreen .addToHomeadd,
#addToHomeScreen .addToHomeEllipsis,
#addToHomeScreen .addToHomeChevron {
    display: inline-block;
    vertical-align: -4px;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999em;
    overflow: hidden;
}

/**
 * The 'share' icon (box with up-arrow) — step 2: Partager
 */
#addToHomeScreen .addToHomeShare {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHJ4PSI0IiBmaWxsPSIjZTVlNWVhIi8+PHBhdGggZD0iTTEwIDMuNXY3IiBzdHJva2U9IiMzYzNjNDMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNNy41IDZMMTAgMy41IDEyLjUgNiIgc3Ryb2tlPSIjM2MzYzQzIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTcuNSA4LjVINmExIDEgMCAwMC0xIDF2NWExIDEgMCAwMDEgMWg4YTEgMSAwIDAwMS0xdi01YTEgMSAwIDAwLTEtMWgtMS41IiBzdHJva2U9IiMzYzNjNDMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiLz48L3N2Zz4=");
}

/**
 * The '+ in square' icon — step 4: Add to Home Screen
 */
#addToHomeScreen .addToHomeadd {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHJ4PSI0IiBmaWxsPSIjZTVlNWVhIi8+PHBhdGggZD0iTTEwIDZ2OE02IDEwaDgiIHN0cm9rZT0iIzNjM2M0MyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiLz48L3N2Zz4=");
}

/**
 * The touch icon (if available)
 */
#addToHomeScreen .addToHomeTouchIcon {
    display: block;
    float: left;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 2px rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 2px rgba(255, 255, 255, 0.9);
    background-repeat: no-repeat;
    width: 57px;
    height: 57px;
    -webkit-background-size: 57px 57px;
    background-size: 57px 57px;
    margin: 0 12px 3px 0;
    border: 0px solid #c2c2c2;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

/* Ajustement de la croix de fermeture sur Android */
#addToHomeScreen.addToHomeAndroid .addToHomeClose {
    line-height: 16px; /* Ajuste la hauteur de ligne pour centrer verticalement */
    display: flex; /* Utilise flexbox pour un centrage précis */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    text-indent: 0; /* Supprime le décalage horizontal */
}

/**
 * The '•••' (More Options) icon — step 1: Safari bottom bar
 */
#addToHomeScreen .addToHomeEllipsis {
    width: 30px;
    height: 20px;
    background-size: 30px 20px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDMwIDIwIj48cmVjdCB3aWR0aD0iMzAiIGhlaWdodD0iMjAiIHJ4PSI0IiBmaWxsPSIjZTVlNWVhIi8+PGNpcmNsZSBjeD0iOCIgY3k9IjEwIiByPSIyLjIiIGZpbGw9IiMzYzNjNDMiLz48Y2lyY2xlIGN4PSIxNSIgY3k9IjEwIiByPSIyLjIiIGZpbGw9IiMzYzNjNDMiLz48Y2lyY2xlIGN4PSIyMiIgY3k9IjEwIiByPSIyLjIiIGZpbGw9IiMzYzNjNDMiLz48L3N2Zz4=");
}

/**
 * The '∨' chevron icon — step 3: "En voir plus / See More" in share sheet
 */
#addToHomeScreen .addToHomeChevron {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSIxMCIgZmlsbD0iI2U1ZTVlYSIvPjxwYXRoIGQ9Ik02LjUgOC41bDMuNSAzLjUgMy41LTMuNSIgc3Ryb2tlPSIjM2MzYzQzIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIi8+PC9zdmc+");
}

/* Prevent balloon from stretching to full screen height on Chrome Android/iOS */
#addToHomeScreen.addToHomeChrome {
    bottom: auto !important;
    height: auto !important;
    max-height: 200px !important; /* Adjust as needed based on content */
}