/* ==========================================================
   LOCATION LILO — STYLE GÉNÉRAL
   Aucun changement de structure sur ordinateur
========================================================== */

/* Respecte les majuscules et minuscules saisies dans le template */
body#product .product-variants .radio-label {
    text-transform: none !important;
}

/* Masque uniquement le groupe technique Type d’acquisition */
body#product
.product-variants-item.lilo-location-type-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================
   STYLE COMMUN DES BOUTONS
========================================================== */

body#product
.product-variants
.input-container
.radio-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 36px !important;
    padding: 8px 12px !important;

    background-color: #f1f1f1 !important;
    color: #333333 !important;

    border: 1px solid transparent !important;
    border-radius: 5px !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;

    text-transform: none !important;
    box-shadow: none !important;

    cursor: pointer !important;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease !important;
}

/* Survol */
body#product
.product-variants
.input-container
.radio-label:hover {
    border-color: #cf6d7c !important;
}

/* Sélection standard */
body#product
.product-variants
.input-radio:checked + .radio-label {
    background-color: #cf6d7c !important;
    color: #ffffff !important;
    border-color: #cf6d7c !important;
}

/* ==========================================================
   PAIEMENT — PAR MOIS
========================================================== */

body#product
.product-variants
.lilo-group-160
.radio-label {
    background-color: #686a95 !important;
    color: #ffffff !important;
    border-color: #686a95 !important;
    font-weight: 600 !important;
}

/* ==========================================================
   ENGAGEMENT
========================================================== */

/* Durées non sélectionnées */
body#product
.product-variants
.lilo-group-161
.radio-label {
    background-color: #f1f1f1 !important;
    color: #333333 !important;
    border-color: transparent !important;
}

/* Durée sélectionnée */
body#product
.product-variants
.lilo-group-161
.input-radio:checked + .radio-label,
body#product
.product-variants
.lilo-group-161
.input-container.lilo-selected
.radio-label {
    background-color: #cf6d7c !important;
    color: #ffffff !important;
    border-color: #cf6d7c !important;
}

/* ==========================================================
   PREMIER RÈGLEMENT
========================================================== */

body#product
.product-variants
.lilo-group-170
.radio-label {
    background-color: #cf6d7c !important;
    color: #ffffff !important;
    border-color: #cf6d7c !important;
    font-weight: 600 !important;
}

/* ==========================================================
   FORMULE LILO FLEX / EASY
========================================================== */

body#product
.product-variants
.lilo-group-169
.radio-label {
    background-color: #ffffff !important;
    color: #686a95 !important;
    border: 1px solid #686a95 !important;
    font-weight: 600 !important;
}

/* La formule reste en contour même lorsqu’elle est sélectionnée */
body#product
.product-variants
.lilo-group-169
.input-radio:checked + .radio-label {
    background-color: #ffffff !important;
    color: #686a95 !important;
    border-color: #686a95 !important;
}

/* ==========================================================
   MOBILE UNIQUEMENT — PRÉSENTATION COMPACTE
========================================================== */

@media (max-width: 767px) {

    /* Conteneur général */
    body#product .product-variants {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        gap: 12px !important;

        margin: 12px 0 !important;
        padding: 0 !important;
    }

    /* Une ligne par groupe */
    body#product
    .product-variants
    .product-variants-item {
        display: grid !important;
        grid-template-columns: 90px minmax(0, 1fr) !important;
        align-items: center !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
        clear: both !important;
    }

    /* Titre du groupe à gauche */
    body#product
    .product-variants
    .product-variants-item > .control-label {
        display: block !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #e5009d !important;

        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        text-transform: uppercase !important;

        float: none !important;
    }

    /* Choix à droite */
    body#product
    .product-variants
    .product-variants-item > ul {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;

        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
        clear: none !important;
    }

    body#product
    .product-variants
    .product-variants-item
    li.input-container {
        display: block !important;

        width: auto !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
    }

    /* Taille mobile des boutons */
    body#product
    .product-variants
    .radio-label {
        min-height: 34px !important;
        margin: 0 !important;
        padding: 7px 9px !important;

        font-size: 10.5px !important;
        line-height: 1.1 !important;
    }

    /* Les trois engagements sur une seule ligne */
    body#product
    .product-variants
    .lilo-group-161 > ul {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        width: 100% !important;
        gap: 5px !important;
    }

    body#product
    .product-variants
    .lilo-group-161
    li.input-container {
        width: 100% !important;
    }

    body#product
    .product-variants
    .lilo-group-161
    .radio-label {
        width: 100% !important;
        min-width: 0 !important;

        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}
/* ==========================================================
   TRÈS PETITS MOBILES
========================================================== */



@media (max-width: 390px) {

    body#product

    .product-variants

    .product-variants-item {

        grid-template-columns: 86px minmax(0, 1fr) !important;

        gap: 6px !important;

    }

    body#product

    .product-variants

    .product-variants-item > .control-label {

        font-size: 9.5px !important;

    }

    body#product

    .product-variants

    .radio-label {

        padding: 7px 7px !important;

        font-size: 10px !important;

    }

}
/* ==========================================================
   PAGE LILO'CATION — MISE EN PAGE GÉNÉRALE
========================================================== */

.lilo-location-page,
.lilo-location-page * {
    box-sizing: border-box !important;
}

.lilo-location-page {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 35px auto !important;
    padding: 0 15px 110px !important;
    color: #333333 !important;
    line-height: 1.6 !important;
}

/* ==========================================================
   ÉTAPES DE LA FORMULE
========================================================== */

.lilo-location-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
}

.lilo-location-step {
    flex: 1 1 210px !important;
    min-width: 0 !important;
    padding: 16px !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
}

/* ==========================================================
   COMPARATIF EASY / FLEX
========================================================== */

.lilo-location-formulas {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
}

.lilo-location-formula {
    width: 100% !important;
    min-width: 0 !important;
    padding: 24px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================================
   AVANTAGES LILO'CATION
========================================================== */

.lilo-location-benefits {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

.lilo-location-benefit {
    width: 100% !important;
    min-width: 0 !important;
    padding: 21px !important;
    background-color: #f6f6fa !important;
    border: 1px solid #eeeeF4 !important;
    border-radius: 10px !important;
}

.lilo-location-benefit-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 38px !important;
    height: 38px !important;
    margin-bottom: 12px !important;

    background-color: #686a95 !important;
    color: #ffffff !important;
    border-radius: 50% !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.lilo-location-benefit h3 {
    margin: 0 0 8px !important;
    color: #686a95 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.lilo-location-benefit p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* ==========================================================
   TABLETTE
========================================================== */

@media (max-width: 991px) {

    .lilo-location-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ==========================================================
   MOBILE — PAGE LILO'CATION
========================================================== */

@media (max-width: 767px) {

    .lilo-location-page {
        width: 100% !important;
        max-width: 100% !important;

        margin: 25px auto !important;
        padding: 0 14px 130px !important;

        overflow: visible !important;
    }

    /* Évite les blocs trop étroits */
    .lilo-location-page > div,
    .lilo-location-page > section {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Introduction */
    .lilo-location-page > div:first-child {
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto 26px !important;
        padding: 0 4px !important;
        text-align: center !important;
    }

    .lilo-location-page > div:first-child h2 {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }

    .lilo-location-page > div:first-child p {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    /* Bloc formule appliquée */
    .lilo-location-page > div:nth-child(2) {
        width: calc(100% - 4px) !important;
        max-width: 360px !important;

        margin: 0 auto 32px !important;
        padding: 21px 18px !important;

        border-radius: 12px !important;
    }

    .lilo-location-page > div:nth-child(2) > div:first-child {
        display: table !important;
        margin: 0 auto 14px !important;
        text-align: center !important;
    }

    .lilo-location-page > div:nth-child(2) h3 {
        margin-bottom: 14px !important;
        text-align: center !important;

        font-size: 21px !important;
        line-height: 1.3 !important;
    }

    .lilo-location-page > div:nth-child(2) > p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        text-align: left !important;
    }

    /* Étapes */
    .lilo-location-flex {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;
        gap: 10px !important;

        margin-top: 20px !important;
    }

    .lilo-location-step {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 16px !important;

        text-align: left !important;
    }

    /* Bloc Easy / Flex */
    .lilo-location-formulas {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;
        max-width: 360px !important;

        gap: 18px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .lilo-location-formula {
        width: 100% !important;
        max-width: 360px !important;
        min-width: 0 !important;

        margin: 0 auto !important;
        padding: 20px 18px !important;

        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .lilo-location-formula > div:first-child {
        display: table !important;
        margin: 0 auto 14px !important;
        text-align: center !important;
    }

    .lilo-location-formula h3 {
        width: 100% !important;
        margin: 0 0 13px !important;

        color: #686a95 !important;
        font-size: 20px !important;
        line-height: 1.3 !important;
        text-align: center !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    .lilo-location-formula > p {
        width: 100% !important;
        margin: 0 0 15px !important;

        font-size: 14px !important;
        line-height: 1.65 !important;
        text-align: left !important;
    }

    .lilo-location-formula > p:not(:first-of-type) {
        position: relative !important;
        margin: 9px 0 !important;
        padding-left: 0 !important;
    }

    /* En-têtes des sections */
    .lilo-location-page h2 {
        max-width: 100% !important;
    }

    /* Avantages */
    .lilo-location-benefits {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;
        max-width: 360px !important;

        gap: 14px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .lilo-location-benefit {
        width: 100% !important;
        max-width: 360px !important;
        min-width: 0 !important;

        margin: 0 auto !important;
        padding: 20px 18px !important;

        background-color: #f6f6fa !important;
        border: 1px solid #eeeeF4 !important;
        border-radius: 12px !important;
    }

    .lilo-location-benefit-number {
        display: flex !important;

        width: 36px !important;
        height: 36px !important;

        margin: 0 auto 12px !important;
    }

    .lilo-location-benefit h3 {
        margin: 0 0 10px !important;

        color: #686a95 !important;
        font-size: 19px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .lilo-location-benefit p {
        margin: 0 !important;

        font-size: 14px !important;
        line-height: 1.6 !important;
        text-align: left !important;
    }

    /* Réassurance finale */
    .lilo-location-page > div:last-child {
        width: 100% !important;
        max-width: 360px !important;

        margin: 34px auto 0 !important;
        padding: 22px 18px !important;
    }

    .lilo-location-page > div:last-child h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
}

/* ==========================================================
   TRÈS PETITS MOBILES — PAGE LILO'CATION
========================================================== */

@media (max-width: 390px) {

    .lilo-location-page {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .lilo-location-formula,
    .lilo-location-benefit,
    .lilo-location-page > div:nth-child(2) {
        width: 100% !important;
        max-width: none !important;
    }

    .lilo-location-formula h3 {
        font-size: 19px !important;
    }

    .lilo-location-benefit h3 {
        font-size: 18px !important;
    }
 }