/* general pages */

body#cms section#wrapper>div.container {
    padding: 0;
    margin: 0;
}

body#cms section#wrapper div.container>nav.breadcrumb {
    padding: 0 64px;
}

body#cms section#main>.page-header {
    display: none;
}




body#cms .page-cms {
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: 32px;

    padding: 0;
    margin: 0;

    text-align: center;
}

body#cms .page-cms .cms-card>h2,
body#cms .page-cms h3 {
    color: var(--color-primary);
}

body#cms .flex-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 24px;
    width: 100%;
}

body#cms .flex-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 32px 64px;
    gap: 32px;

    width: 100%;

}

body#cms .flex-row {
    display: flex;
    flex-direction: row;
    gap: 12px;

    justify-content: center;
    align-items: center;

    width: 100%;
}

@media (max-width: 767px) {

    body#cms .flex-section {
        padding: 24px;
    }
}

body#cms .cms-icon-check {
    width: 18px;
    height: 18px;

    flex-shrink: 0;
}

body#cms .flex-img {
    width: 100%;
    height: 100%;

    overflow: hidden;
    border-radius: 32px;
}

body#cms .flex-img>img {
    width: 100%;
    height: auto;

    object-fit: cover;
}

/* header */

body#cms .cms-header {
    background: url('../img/LPDY_CMS_header_image.png') center;

    object-fit: contain;

    padding: 60px 0;
    margin: 16px;

    text-align: center;
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 32px;
    border: 2px solid var(--color-primary);
    background-color: var(--color-white-light);
}

body#cms .cms-header>div {
    max-width: 600px;
}

/* header with image */

body#cms .cms-header-with-image {
    padding: 0 64px;
}

body#cms .cms-header-with-image .flex-row {
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 32px;
    border: 2px solid var(--color-primary);
    background-color: var(--color-white-light);

    overflow: hidden;

    max-height: 600px;
}

body#cms .cms-header-with-image .flex-column {
    padding: 0 5%;
    width: 100%;
}

body#cms .cms-header-with-image .flex-img {
    border-radius: 0;
    width: 100%;
}

@media (max-width:767px) {

    body#cms .cms-header-with-image+.flex-row,
    body#cms .flex-row.mobile-column-reverse {
        flex-direction: column-reverse;
    }
    
    body#cms .flex-row>.cms-card.guarantee,
    body#cms .cms-card .flex-row:has(.cms-icon-check) {
        flex-direction: row;
    }
    
   body#cms .flex-row {
       flex-direction: column;
   }

    body#cms .cms-header-with-image {
        padding: 12px;
    }

    body#cms .cms-header-with-image .flex-column {
        padding: 24px;
    }
}

/* Cards */


body#cms .cms-card {
    padding: 24px;
    gap: 24px;

    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='32' ry='32' stroke='%23A0AA10' stroke-width='4' stroke-dasharray='6%2c 20' stroke-dashoffset='50' stroke-linecap='round'/%3e%3c/svg%3e");
    background-color: var(--color-white-light);

    /* stroke-dasharray: 20px; */

    /* rx and ry needs to be equal to the border-radius */
    border-radius: 32px;

    text-align: center;
}

body#cms .cms-card .flex-column:has(.flex-row .cms-icon-check) {
    gap: 4px;
}

/* big icons on cards */
body#cms .cms-card>.cms-icon:not(.cms-icon-check) {
    padding: 12px;

    height: 128px;
    width: 128px;
}

body#cms .cms-card.guarantee {
    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: center;

    flex: 0 1 30%;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='32' ry='32' stroke='%23bc2421' stroke-width='4' stroke-dasharray='6%2c 20' stroke-dashoffset='50' stroke-linecap='round'/%3e%3c/svg%3e");


    padding: 16px;
    gap: 8px;
}

body#cms .cms-card.guarantee>p {
    font-size: 14px;
    font-weight: 600;

    color: var(--color-secondary);
    text-align: start;
    width: fit-content;
}

body#cms .cms-card.guarantee>.cms-icon-check {
    width: 24px;
    height: 24px;
}

body#cms .flex-row:has(.cms-card.guarantee) {
    flex-wrap: wrap;
    gap: 12px;
}

/* CTA */

body#cms .cta {
    background-color: var(--color-primary);
}

body#cms .cta>div {
    background-color: var(--color-white-light);
    border-radius: 32px;

    padding: 32px;
}


/* Small CTA */

body#cms .cta-small {
    background-color: var(--color-white-light);
}

body#cms .cta-small.flex-section {
    gap: 8px;
    padding: 32px 64px;
}

body#cms .cta-small>.flex-row {
    text-align: start;
}

/* anchor sections (all comment-ca-marche) */

body#cms #comment-ca-marche {
    scroll-margin-top: 250px;
}

@media (max-width: 767px) {
    body#cms .cms-header {
        padding: 24px;
    }

    body#cms .cms-card {
        padding: 12px 24px;
    }

    body#cms .flex-row:has(.cms-card.guarantee) {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    body#cms #comment-ca-marche {
        scroll-margin-top: 100px;
    }
}



/* 
* Rencontrez Yann
*/

body#cms .description>h2 {
    text-align: center;
}

body#cms .description .flex-row>.flex-column {
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;

    padding: 24px;
}

body#cms .description-quotes {
    font-weight: 600;
    color: var(--color-primary);
    padding: 0 32px;
    text-transform: none;
}

body#cms .description-quotes::before,
body#cms .description-quotes::after {
    content: ' " ';
}

body#cms .description .flex-row>.flex-img img {
    max-height: 350px;
}

body#cms .valeurs .cms-card .flex-row>.cms-icon-check {
    width: 32px;
    height: 32px;
}

body#cms .valeurs .cms-card.flex-column>p {
    text-align: center;
}


/* 
* page Livraison 
*/

body#cms #comment-ca-marche>.flex-row {
    flex-wrap: wrap;
}

body#cms #comment-ca-marche .flex-row>.cms-card {
    flex: 1 0 48%;
    width: 100%;

    gap: 24px;
}

/* comment ca marche cartes */

body#cms #comment-ca-marche .cms-card {
    padding: 32px 64px;
}

body#cms #comment-ca-marche .cms-card .flex-column {
    text-align: center;
}

/* Section livraison & point de collecte */

body#cms .flex-row:has(#delivery, #collect-points) {
    align-items: flex-start;
}

body#cms .flex-row #collect-points,
body#cms .flex-row>#delivery {
    width: 100%;

}

body#cms .flex-row #collect-points .cms-card,
body#cms .flex-row>#delivery.cms-card {
    display: flex;
    gap: 24px;
}

body#cms .flex-row #collect-points .flex-row>.cms-card {
    gap: 8px;
    height: 100%;
}

@media (max-width: 767px) {}


/* CTA offres Pro / Event */


@media (max-width: 767px) {
    body#cms #cta-offres-pro .flex-row {
        flex-direction: column-reverse;
    }
}

/* Icons 
*/

.cms-icon-check {
    content: " ";
    background-image: url('data:image/svg+xml, <svg viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 15.9858C8.2284 19.0915 9.47966 24.4337 12.6728 22.6407C14.6481 21.5316 20.3272 13.1021 26.5 8" stroke="%23BC2421" stroke-width="2" stroke-linecap="round" /></svg>');
    height: 100%;
    width: 100%;

    background-repeat: no-repeat;
    flex-shrink: 0;
}

.cms-icon-heart {
    background-image: url('data:image/svg+xml, <svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M64.6592 100.432C-6.35273 58.054 42.0602 7.48348 64.6599 49.4462C79.7233 7.48283 143.178 43.9669 64.6592 100.432Z" stroke="%23BC2421" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /></svg>');
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
}

.cms-icon-truck {
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.8909 78.6042C19.471 68.0862 13.6688 50.147 17.8909 39.6167C18.4413 38.2436 25.0664 37.8734 37.7662 38.505C56.6593 38.0081 71.1688 37.7598 81.2949 37.7598" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M81.1314 40.1343C80.9391 52.7903 81.5004 65.485 81.5004 78.1292" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M21.2158 80.0999C49.4757 78.1888 78.8578 77.889 107.179 80.5044" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M79.6279 44.9585C91.5751 44.5799 103.973 42.0286 102.826 58.1822" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M106.229 60.5566C112.098 63.0706 111.036 73.5323 110.645 80.0293" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M105.659 60.4194C96.7492 60.5362 87.9911 60.5417 79.0625 60.6569" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M91.4886 76.1859C94.2726 73.889 94.6975 73.7267 97.6402 73.832C101.234 73.9607 103.002 76.7226 103.229 78.3959C105.584 95.7677 79.4892 87.5699 90.3762 78.3959" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M30.0748 75.6961C43.0576 68.1 44.217 89.7102 33.073 90.4526C22.7366 91.1397 23.3464 77.3429 29.2766 72.9048" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /></svg>');
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;

}

.cms-icon-delivery {
    background-image: url('data:image/svg+xml, <svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M50.8223 27.7115C64.366 9.06347 89.0681 39.0897 71.71 51.3802C58.2217 60.9313 42.3858 46.0442 48.7186 33.0906" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M40.4683 73.9034C40.4683 73.9034 49.843 63.895 60.9671 63.6141C72.091 63.3331 83.283 70.8835 86.0631 72.7517" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M29.4668 74.5875C46.9073 74.3849 56.8497 74.2835 59.2945 74.2835C69.9233 74.2835 103.568 73.703 103.568 74.9801C103.568 76.2572 103.568 79.696 103.568 81.75C103.568 83.8044 103.568 103.003 103.568 104.52C103.568 106.038 101.562 106.038 96.4648 106.038C91.3678 106.038 30.8428 107.213 27.47 106.038C24.0971 104.862 24.909 86.0096 24.909 84.2992C24.909 82.5891 24.909 80.2892 24.909 79" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M103.497 85.5342C104.691 85.5342 108.274 86.2753 107.378 88.3652C106.781 89.7585 105.487 90.4551 103.497 90.4551" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M24.8229 86.5294C22.1408 86.2417 20.7998 86.5735 20.7998 87.5252C20.7998 88.9527 22.7185 90.4555 24.8229 90.4555" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /></svg>');
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;

}

.cms-icon-order {
    background-image: url('data:image/svg+xml, <svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M47.1685 100.161C12.7518 100.161 13.5358 100.161 27.8765 67.0483V88.1504" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M103.858 72.9427C97.4174 72.7015 62.5349 72.4048 60.0107 74.9296C56.3694 78.5719 47.3614 103.716 50.9678 108.526C75.4763 108.993 94.0098 109.492 97.6347 108.041C99.5054 107.293 101 105.141 101.833 103.196C102.493 101.655 109.422 78.1757 109.422 77.5139" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M49.785 108.309C44.6036 106.351 39.1706 104.63 34.1821 102.068" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M34.9711 39.9615C26.8783 66.5484 63.0853 77.8089 72.6738 51.0767C77.8716 36.5852 60.3836 15.2545 42.4578 31.2647" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M60.0645 50.4937C60.396 49.5977 60.6325 49.0722 60.8177 48.2031" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /><path d="M52.5835 50.338C52.9313 49.6238 52.9889 48.9835 53.1249 48.1758" stroke="%23645748" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /></svg>');
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
}