/******************************************************
 *
 * Personnalisation de la page de résultat du Car Configurateur
 *
 ******************************************************/


 /* Personnalisation du Hero */
 #hero h1.cfg-results-title-vehicule .value {
    color: var(--wp--preset--color--lsf-principale-vert);
 }
 .colonnes-avantages .colonne-avantages-background {
    padding: var(--wp--preset--spacing--10);
    border-radius: 5px;
    backdrop-filter: blur(10px);
    background-color: #ffffff33;
 }
 
 .stage-table-results::-webkit-scrollbar {
    display: none;
 }
 .stage-table-results table {
    table-layout: auto!important;
    border-collapse: collapse;
    margin-bottom: 0em;
    min-width: 365px;
}
.wp-block-table td, .wp-block-table th {
    padding:5px 10px;
}
.stage-table-results th:first-child {
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
}
.stage-table-results td:last-child, .stage-table-results th:last-child {
    color: var(--wp--preset--color--lsf-principale-vert);
    font-weight: bold;
}
.stage-table-results th, .stage-table-results td, .stage-table-results thead {
    border: unset!important;
    text-align: left;
}
.stage-table-results tbody tr {
    border-top: 1px solid var(--wp--preset--color--lsf-principale-vert); 
    border-bottom: 1px solid var(--wp--preset--color--lsf-principale-vert);
}

.stage-table-results-container, .stage-table-results-container > *, .stage-table-results-container figure, .stage-table-results-container table {
    flex: 1;
    width: 100%;
}
.results-pricing p {
    line-height:1;
}


@media screen and (max-width:1000px) {
    .flex-container>div, .stage1-container>div, .flex1-container>div, .stage2-container>div, .stage3-container>div, .boite-container>div {
        justify-content: center;
        flex-direction: column;
    }
    .stage-table-results::-webkit-scrollbar {
        display: block;
    }
    .stage-table-results {
        scrollbar-color:var(--wp--preset--color--lsf-principale-vert) transparent;
        overflow-x: auto;
    }
    .stage-table-results::-webkit-scrollbar-track {
        color:transparent;
    }
    .stage-table-results::-webkit-scrollbar-thumb {
        color:var(--wp--preset--color--lsf-principale-vert);
        border-radius: 5px;
    }
    #hero .wp-block-coblocks-shape-divider__svg-wrapper {
        height:30px!important;
    }
    #hero .maj-userdata {
        text-align: center!important;
        margin-right: 0px!important;
    }
}


.stage-see-more {
    margin: top 15px, important !important;;
}


@media screen and (min-width:981px) {
    .stage-see-more summary {
        /*text-align: right;*/
        margin-top: -15px;
        margin-block-start: -15px;
    }
}
@media screen and (max-width:980px) {
    .stage-see-more summary {
        text-align: center;
    }
}


/** En développement **/
.is-style-dev {
    color: var(--wp--preset--color--lsf-principale-vert);
    border-radius: 5px;
    padding: 8px 16px;
    width: fit-content;
    margin-block-start: 0x!important;
    margin-block-end: 10px!important;
}


/** Personnalisation des Options **/
#options-diesel, #options-essence, #hero {
    padding: 0px!important;
}
#options-diesel .wp-block-cover__inner-container > *:where(:not(.wp-block-coblocks-shape-divider)), #options-essence .wp-block-cover__inner-container > *:where(:not(.wp-block-coblocks-shape-divider)), #hero .wp-block-cover__inner-container > *:where(:not(.wp-block-coblocks-shape-divider)) {
    padding: 1em!important;
}

#options-diesel details summary, #options-esence details summary {
    font-weight: bold;
}

#options-diesel details, #options-essence details {
    margin-block-end: 15px;
}

#options-diesel details p, #options-essence details p {
    padding-left: 19px;
}

#options-diesel details summary::marker, #options-essence details summary::marker {
    color: var(--wp--preset--color--lsf-principale-vert);
}



/** Personnalisation des Références **/
#resultats #realisations ul.cfg-realisations {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1em;
}
#resultats #realisations ul.cfg-realisations > li {
    max-width: 300px;
}


.btn-cta-inactif {
    opacity: 0.5;
    cursor: not-allowed;
}



/** Personnalisation des promotions **/
.wp-block-mfb-meta-field-block .value:has(.prix-promo) {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}

.wp-block-mfb-meta-field-block .value:has(.prix-promo) .prix-barre {

}
.wp-block-mfb-meta-field-block .value:has(.prix-promo) .prix-promo {
    font-size: var(--wp--preset--font-size--large) !important;
    font-weight: bold;
    line-height: 1!important;
}
.wp-block-mfb-meta-field-block .value:has(.prix-promo) .promo-value {
    position: absolute;
    font-size: var(--wp--preset--font-size--small);
    padding: 2px 4px;
    border-radius: 5px;
    top: 0px;
    left: -20px;
    background-color: var(--wp--preset--color--lsf-principale-vert);
    color: var(--wp--preset--color--lsf-secondaire-noir);
    font-weight: bold;
    transform: rotate(-5deg);


    background: linear-gradient(280deg, #F1FFEB 0%, #4FE802 25%, #4FE802 75%, #F1FFEB 100%);
    background-size: 200% 100%;
    animation: gradientShift 1s linear infinite, wiggle 2s linear infinite;
}






/** Responsive **/
@media screen and (max-width:700px) {
    #hero .wp-block-spacer {
        display: none!important;
    }
    #hero .wp-block-coblocks-shape-divider__alt-wrapper {
        height: 10px!important;
    }
    .wp-block-table td {
        padding: 2px 5px;
    }
    .stage-table-results table {
        min-width: 315px;
    }
 }


/** Personnalisation Scroll Résultats sur Mobile **/
@media screen and (max-width:700px) {
    #resultats>.wp-block-group:has(div[class*=-container]) {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 1vw;
        overflow-x: auto;
        overflow-anchor: visible;
        padding-bottom: 15px;
        justify-content: space-between;
    }
    #resultats>*>div[class*=-container] {
        min-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        max-width: 90vw;
        min-width: 335px;
        margin-block-start: 0 !important;
    }
    #resultats .wp-block-group:has(> h3.wp-block-heading) {
        min-height: 55px;
    }
}





/* Keyframes */
@keyframes wiggle {
    0%, 7% {
      transform: rotateZ(-5deg);
    }
    15% {
      transform: rotateZ(-15deg);
    }
    20% {
      transform: rotateZ(10deg);
    }
    25% {
      transform: rotateZ(-10deg);
    }
    30% {
      transform: rotateZ(6deg);
    }
    35% {
      transform: rotateZ(-4deg);
    }
    40%, 100% {
      transform: rotateZ(-5deg);
    }
  }