/**
 * WORDPRESS
 */

.homeAtelier {
    background-color: #f2f4f7;
}

.post-type-archive-conseil .headCateg__top {
    margin-bottom: 0;
    padding-bottom: 40px;
}

.post-type-archive-conseil .headCateg__desc {
    margin-bottom: 0;
}

.post-type-archive-conseil .headCateg__ancres {
    margin-bottom: 70px;
}

.academyCat__roi {
    background: #ffffff;
    padding-bottom: 60px;
}

.academyCat__roi > .roi-calculator {
    margin-bottom: 0;
}

.conseilCat__title::after {
    content: "";
    width: 160px;
    height: 4px;
    background-color: #e43d30;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    display: block;
    margin-top: 10px;
}

.post-type-archive-conseil .academyCat__posts {
    padding-bottom: 0;
}

.post-type-archive-conseil .academyCat__posts .academyCat__search__padd__container form {
    margin-left: 0;
    margin-top: 30px;
}

.post-type-archive-conseil .academyCat__posts .academyCat__search__padd__container input[type="search"] {
    background: #ffffff;
}

/**
 * ROI CALCULATOR
 */

.roi-calculator {
    container-type: inline-size;
    container-name: roi-calculator-container;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    max-width: 890px;
    gap: 3.07692em;
    padding: 55px 15px 25px;
    border-bottom: 3px solid #EB352B;
    margin: 0 auto 60px;
    box-sizing: content-box;
}

.roi-calculator * {
    box-sizing: border-box;
}

.roi-calculator header {
    text-align: center;
}

.roi-calculator header img {
    margin: 0 auto;
}

.roi-calculator h2 {
    font-size: 30px;
    margin-top: 5px;
    border-bottom: 3px solid #E43D30;
    padding-bottom: 10px;
}

.roi-calculator .roi-calculator--current {
    max-width: 890px;
    width: 100%;
    display: flex;
    gap: 5.625em;
    flex-direction: column;
}

.roi-calculator .roi-calculator--current .calculator-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 55px;
}

.roi-calculator .roi-calculator--plans {
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
    background: #f2f4f7;
    padding: 25px;
}

.roi-calculator .wrapper-results {
    width: 100%;
}

.roi-calculator .wrapper-results .result-groups {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr;
    grid-row-gap: 15px;
    width: 100%;
    align-items: center;
    text-align: center;
    max-width: 890px;
    place-items: center;
}

.roi-calculator .wrapper-results .result-groups .result-group {
    display: flex;
    flex-direction: column;
    border: 1px solid #f2f4f7;
    border-radius: 5px;
    padding: 15px 13px;
    max-width: 210px;
    width: 210px;
}

.roi-calculator .wrapper-results .result-groups .result-group .result-group-title {
    font-weight: 600;
    text-align: left;
}

.roi-calculator .wrapper-results .result-groups .result-group .result-group-title.has-footnote::after {
    content: '*';
    display: inline;
    color: #EB352B;
}

.roi-calculator .wrapper-results .result-groups .result-group .result {
    font-family: "Bai Jamjuree",sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
    text-align: right;
    padding-right: 30px;
    background-position: right center;
    background-repeat: no-repeat;
}

.roi-calculator .wrapper-results .result-groups .result-group.net-gain .result {
    background-image: url("../images/calculateur-roi/eur.svg");
    background-size: 25px;
}

.roi-calculator .wrapper-results .result-groups .result-group.days-until-positive .result {
    background-image: url("../images/calculateur-roi/line_chart.svg");
}

.roi-calculator .wrapper-results .result-groups .result-group.year-roi .result {
    background-image: url("../images/calculateur-roi/percent.svg");
}

.roi-calculator .wrapper-results .result-groups .result-group.reached-trs .result {
    background-image: url("../images/calculateur-roi/curve_graph.svg");
}

.roi-calculator .wrapper-results .footnote {
    margin-top: 30px;
    color: #EB352B;
}

@container roi-calculator-container (min-width: 430px) {
    .roi-calculator .wrapper-results .result-groups {
        grid-template-columns: 1fr 1fr;
        grid-row-gap: 30px;
    }

    .roi-calculator .wrapper-results .result-groups .result-group .result {
        font-size: 30px;
    }
}

@container roi-calculator-container (min-width: 720px) {
    .roi-calculator .roi-calculator--current {
        flex-direction: row;
    }

    .roi-calculator .roi-calculator--current .calculator-column {
        width: 50%;
        display: flex;
        flex-direction: column;
        gap: 55px;
    }
}

@container roi-calculator-container (min-width: 890px) {
    .roi-calculator .wrapper-results .result-groups {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-row-gap: 0;
    }

    .roi-calculator .wrapper-results .result-groups .result-group .result {
        font-size: 30px;
    }

    .roi-calculator .wrapper-results .footnote {
        margin-top: 2px;
    }
}

@media (min-width: 890px) {
    .roi-calculator {
        padding: 55px 0 25px;
    }
}

/**
 * FORM
 */

.roi-calculator label {
    font-weight: 600;
}

/* Chrome, Safari, Edge, Opera */
.roi-calculator input::-webkit-outer-spin-button,
.roi-calculator input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
.roi-calculator input[type="number"], .roi-calculator input[type="text"] {
	-moz-appearance: textfield;
}

.roi-calculator input[type="range"] {
    -webkit-appearance: none;
    background: transparent;
    font: inherit;
    appearance: none;
    outline: none;
    border: unset;
    width: 100%;
    height: 4px;
    /*opacity: 0;*/
    z-index: 10;
    border-radius: 5px;
}

.roi-calculator input[type="range"]::-webkit-slider-runnable-track {
    transition: background-color 450ms ease-in;
    z-index: 1;
    height: 4px;
}


.roi-calculator input[type="range"]::-moz-range-track {
    background: transparent;
    height: 4px;
}

.roi-calculator input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    /* Centers thumb on the track */
    margin: -4px -6px 0 0;
    background-color: #EB352B;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    cursor: grab;
}

.roi-calculator input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.roi-calculator input[type="range"]::-moz-range-thumb {
    border: none;
    /*Removes extra border that FF applies*/
    border: 0;
    /*Removes default border-radius that FF applies*/
    background-color: #EB352B;
    height: 12px;
    width: 12px;
    border-radius: 50%;
}

.roi-calculator input[type="number"], .roi-calculator input[type="text"] {
    -webkit-appearance: textfield;
    font: inherit;
    appearance: textfield;
    outline: none;
    background: none;
    text-align: right;
}

.roi-calculator select {
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0 1em 0 0;
    margin: 0;

    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;

    background: url("../images/calculateur-roi/arrow_down.svg") no-repeat calc(100% - 5px) 85%;
}

.roi-calculator input[type="number"], .roi-calculator input[type="text"], .roi-calculator select {
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    width: 60px;
    text-align: center;
    /* noinspection CssReplaceWithShorthandSafely */
    border: unset;
    /* noinspection CssReplaceWithShorthandSafely */
    border-bottom: 2px solid #EB352B;
    padding: 2px 2px 0 5px;
    height: 30px;
}

.roi-calculator input[type="number"]:invalid, .roi-calculator input[type="text"]:invalid, .roi-calculator select:invalid {
    padding: 0 0 0 3px;
    border: 2px solid #EB352B;
}

.roi-calculator input.hourly-cost, .roi-calculator select.currency-select {
    text-align: left;
}

.roi-calculator .has-input-unit {
    position: relative;
    white-space: nowrap;
}

.roi-calculator .has-input-unit input {
    padding-right: 22px;
}

.roi-calculator .has-input-unit input:invalid {
    padding-right: 20px;
}

.roi-calculator .has-input-unit .input-unit {
    display: inline-block;
    position: absolute;
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    right: 8px;
    bottom: 6px;
}

.roi-calculator input.result {
    border: unset;
    width: 100%;
    max-width: max-content;
    font-size: 32px;
    font-weight: 600;
    color: #EB352B;
    text-align: center;
}

.roi-calculator .input-group.input-columns {
    display: flex;
    justify-content: space-between;
    gap: 35px;
}

.roi-calculator .input-group.input-columns .input-column:first-child {
    width: 50%;
}

.roi-calculator .input-group.input-columns .input-column:last-child {
    width: 50%;
}

.roi-calculator .input-group.input-columns input, .roi-calculator .input-group.input-columns select {
    width: 100%;
    margin-top: 15px;
}

.roi-calculator .input-group label {
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 0.5em 0 0;
}

.roi-calculator .input-group .range {
    margin-top: 15px;
    display: flex;
    width: 100%;
    justify-content: center;
    color: #95999C;
    font-size: 13px;
    align-items: center;
    gap: 20px;
}

.roi-calculator .input-group .range .range-bar {
    display: none;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.roi-calculator .input-group .range .range-bar .range-input {
    flex-grow: 1;
}

.roi-calculator .input-group .range .range-bar .edge-value {
    display: block;
    min-width: 22px;
}

.roi-calculator .input-select {
    display: flex;
    justify-content: space-between;
}

@container roi-calculator-container (min-width: 300px) {
    .roi-calculator .input-group label {
        text-align: left;
        justify-content: space-between;
    }

    .roi-calculator .input-group .range {
        justify-content: space-between;
    }

    .roi-calculator .input-group .range .range-bar {
        display: flex;
    }
}