/* generic */
:root {
    --color-vanta-green: #89964e;
    --hsl-vanta-h: 71;
    --hsl-vanta-s: 32%;
    --hsl-vanta-l: 45%;

    --color-darkblue: #424C55;
    --color-darkgreen: #002222;
    --color-darkgreen-ligther: #455f28;

    --color-sandybrown: #f7f0dd;
    --hsl-sandy-h: 44;
    --hsl-sandy-s: 62%;
    --hsl-sandy-l: 92%;
}
* {
    scroll-behavior: smooth;
}
h1, h3 {
    font-family: "Archivo Black", serif;
    text-transform: uppercase;
}
ol > li {
    list-style: none;
}

.page-content {
    --color-primary: var(--color-vanta-green);
    --color-primary-light: var(--color-darkgreen);
}
.page-content h1 {
    color: var(--color-darkgreen);
}

.page-content a {
    color: var(--color-vanta-green);
    text-decoration: none;
    border-bottom: 1px solid var(--color-vanta-green);
}
.page-content a.reset {
    color: white;
}
.page-content a.btn {
    color: var(--color-darkgreen);
}
.page-content a.btn:hover {
    color: white;
}

#back_to_top {
    display: none;
    position: fixed;
    bottom: 90px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    cursor: pointer;
}
#back_to_top svg {
    filter: drop-shadow(3px 2px 2px rgb(0 0 0 / 0.4));
}

/* --- fonts --------------------------------------------------------- */
.archivo-black-regular {
    font-family: "Archivo Black", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* class */
.sticky {
    position: fixed;
    top: 0;
}
.grayscale {
    filter: grayscale(100%);
}

@keyframes animate-grayscale-downed {
    from {
        filter: grayscale(100%);
    }
    to {
        filter: grayscale(0);
    }
}
.grayscale-down-animation {
    animation: 1s linear 0s 1 normal both running animate-grayscale-downed;
}


/* background color */
.bg-vanta {
    background-color: hsl(var(--hsl-vanta-h), var(--hsl-vanta-s), var(--hsl-vanta-l));
}
.bg-vanta-mid {
    background-color: hsla(var(--hsl-vanta-h), var(--hsl-vanta-s), var(--hsl-vanta-l), 60%);
}
.bg-vanta-light {
    background-color: hsla(var(--hsl-vanta-h), var(--hsl-vanta-s), var(--hsl-vanta-l), 40%);
}
.bg-vanta-lighter {
    background-color: hsla(var(--hsl-vanta-h), var(--hsl-vanta-s), var(--hsl-vanta-l), 20%);
}
.bg-vanta-10p {
    background-color: hsla(var(--hsl-vanta-h), var(--hsl-vanta-s), var(--hsl-vanta-l), 10%);
}
.bg-vanta-30p {
    background-color: hsla(var(--hsl-vanta-h), var(--hsl-vanta-s), var(--hsl-vanta-l), 10%);
}
/* bg sandy */
.bg-sandy {
    background-color: hsl(var(--hsl-sandy-h), var(--hsl-sandy-s), var(--hsl-sandy-l));
}

/* title-header */
.title-header {
    --color-accent: green;
}
.title-header h1, .title-header p {
    color: #ddd;
    min-width: 450px;
}
.title-header h1 {
    font-size: var(--text-xl);
    text-shadow: 2px 2px 2px #222222;
}
.title-header p {
    text-shadow: 2px 2px 2px #222222;
}

/* --- specific section ---------------------------------------------- */
#vanta {
    height: 225px;
    background-color: #222;
}

/*header */
header {
    --color-primary: #333;
    --color-bg: var(--color-vanta-green);
    box-shadow: rgba(0, 0, 0, 0.25) 0 3px 10px 0;
    background-color: var(--color-vanta-green);
}
header:not(.sticky) .f-header__nav-logo-wrapper img {
    opacity: 0;
}
header.sticky .f-header__logo {
    background-color: hsl(var(--hsl-vanta-h), var(--hsl-vanta-s), 35%);
    border-radius: 5px;
}

@media all and (min-width: 1005px) {
    .f-header__logo {
        width: 200px;
    }
    .f-header__dropdown {
        background-color: hsla(var(--hsl-vanta-h), var(--hsl-vanta-s), 80%, 95%);
    }
    .menu-main .f-header__item > a::before {
        content: "";
        position: absolute;
        top: auto;
        bottom: -1px;
        left: 0;
        right: 99%;
        height: 3px;
        display: inline-block;
        transition: right .25s ease-out;
    }

    .menu-main .f-header__item > a:hover::before {
        right: 0;
        background-color: hsl(var(--hsl-vanta-h), var(--hsl-vanta-s), 70%);
        opacity: 1;
    }
}
ul:not(.menu-main) .f-header__item a:hover svg {
    color: hsl(var(--hsl-vanta-h), var(--hsl-vanta-s), 70%);
}
header .icon {
    --size: 1.2em;
}

/* footer */
footer {
    background-color: hsl(var(--hsl-vanta-h), var(--hsl-vanta-s), 40%);
}
footer.dark {
    background-color: var(--color-darkgreen);
}
footer:not(.dark) > div > div:nth-child(2) {
    border-top-color: #333333;
    border-style: ridge;
}
footer a {
    text-decoration: none;
    color: var(--color-vanta-green);
}

/* slideshow */
.loop-slideshow {
    --color-primary: var(--color-vanta-green);
}

.rubrique {
    --color-primary: var(--color-vanta-green);
    color : #797979;
    background-color: #FFFFFF;
    background-repeat: repeat-x;
    border-radius: 8px;
    padding: 1em 8px;
    /*margin-right: 1em;*/
    /*box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;*/
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.rubrique h2 {
    font-family: "Archivo Black", sans-serif;
    text-align: center;
}
.rubrique p {
    font-size: .9em;
    margin-bottom: 10px;
    text-align: center;
}
.rubrique p:last-child {
    margin-bottom: 5px;
}
.rubrique a {
    border-bottom-width: 0;
}

.rubrique .button {
    padding: 0.7em 1.5em;
    text-decoration: none;
    color: white;
    background-color: var(--color-vanta-green);
    text-transform: uppercase;
    font-size: 0.7em;
    font-weight: bold;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    box-shadow: rgba(149, 157, 165, 0.2) 0 6px 10px;
}
.rubrique .button:hover {
    color: white;
    opacity: 1;
    box-shadow: none;
    background-color: var(--color-darkblue);
}
.rubrique .button span {
    display: inline-block;
    margin-top: 3px;
}
.rubrique .button i {
    position: relative;
    top: -3px;
    height: 0.8em;
    margin-left: 4px;
    margin-right: 4px;
    font-size: 1rem;
    vertical-align: middle;
    transition: margin ease-in-out 0.5s;
}
.rubrique .button:hover span + i {
    margin-left: 8px;
    margin-right: 0;
    opacity: 1;
}
.rubrique .icon {
    --size: 1.5em;
}
.rubrique .icon:hover {
    color: var(--color-darkblue);
}


/* how-it-works */
.hiw-list__counter,
.hiw-list__item:nth-child(2n+1)::after,
.hiw-list__item:nth-child(2n+1)::before,
.hiw-list__item:nth-child(2n)::after,
.hiw-list__item:nth-child(2n)::before,
.hiw-list__item::after,
.hiw-list__item::before {
    border-color: hsla(var(--hsl-vanta-h), var(--hsl-vanta-s), var(--hsl-vanta-l), 1);
    color: #333333;
}
.hiw-list__counter {
    background-color: white;
}
.hiw-list__item:not(:last-child) {
    margin-bottom: 0;
}
.hiw-list__item:not(:first-child) {
    padding-top: calc(var(--hiw-items-gap-y)/ 2);
}
.hiw-list__item .button,
.page-realisation .button {
    padding: 0.7em 1.5em;
    text-decoration: none;
    color: white;
    background-color: var(--color-vanta-green);
    text-transform: uppercase;
    font-size: 0.7em;
    font-weight: bold;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    box-shadow: rgba(149, 157, 165, 0.2) 0 6px 10px;
}
.hiw-list__item .button:hover,
.page-realisation .button:hover {
    color: white;
    opacity: 1;
    box-shadow: none;
    background-color: #333;
}

/* ticker */
.ticker ul {
    align-items: center;
    justify-content: center;
}
.ticker ul li {
    list-style: none;
}

.section-reptile a {
    border-bottom-width: 0;
}
@media not all and (max-width: 64rem) {
    /* issue with grid + col-3 */
    .section-reptile {
        flex-wrap: nowrap;
    }
}

/* feature-v11 */
.feature-v11 > .container + .container {
    margin-top: 50px;
}

/* filterable-product-gallery */
#catalogue .prod-card {
    background-color: white;
    border-radius: 15px;
    padding: 15px;
}
#catalogue .prod-card a {
    border-bottom-width: 0;
}

/* --------------------- contact ---- */
#contact {
    background: #F8F4EE;
    background: radial-gradient(circle, rgba(248, 244, 238, 1) 0%, rgba(243, 237, 227, 1) 50%, rgba(209, 199, 174, 1) 100%);
}
/* header */
#contact > .ctc-header {
    position: absolute;
    width: 100%;
    height: 400px;
    /*background-image: url('/media/img/ctc-header-lezard.png');*/
    background: linear-gradient(to bottom, transparent 50%, #eae3d5), url('../../media/img/ctc-header-lezard-flou.png');
    background-repeat: no-repeat;
    background-size: 30%;
    z-index: 1;
}
#contact > .ctc-header .ctc-header-carte {
    display: flex;
    justify-content: right;
    align-items: center;
}
#contact > .container {
    position: relative;
    z-index: 2;
}

@media (max-width: 80rem) {
    #contact > .ctc-header {
        display: none;
    }
}
@media (min-width: 1910px) {
    .ctc-header {
        left: calc((100vw - 1900px) / 2 - 10px);
        max-width: 1900px;
    }
}

/* bottom banner */
#banner-carte-cadeau {
    background: url('../../media/img/banniere_carte_cadeau.png');
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 50px;
    height: 327px;
    padding-top: 180px;
    padding-left: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 80rem) {
    #banner-carte-cadeau {
        height: 250px;
        padding-top: 180px;
        padding-left: 70px;
    }
}
@media (max-width: 64rem) {
    #banner-carte-cadeau {
        height: 200px;
        padding-top: 135px;
    }

    #banner-carte-cadeau a img {
        width: 200px;
    }
}
@media (max-width: 48rem) {
    #banner-carte-cadeau {
        height: 150px;
        padding-top: 100px;
        padding-left: 60px;
    }
}
@media (max-width: 32rem) {
    #banner-carte-cadeau {
        height: 100px;
        padding-top: 65px;
    }
    #banner-carte-cadeau a img {
        width: 150px;
    }
}

#banner-carte-cadeau a {
    border-bottom: 0;
}
#banner-carte-cadeau a img {
}

/* contact main content */
#contact-coord {
    padding: 30px;
    border-radius: 10px;
    background-color: #f5f1eb;
    box-shadow: rgba(0, 0, 0, 0.05) 3px 3px 5px;
}

#contact-form {
    padding: 10px 30px;
    background-color: #f5f1eb;
    box-shadow: rgba(0, 0, 0, 0.02) -3px 3px 5px;
}
#contact-form input,
#contact-form textarea {
    border-radius: 5px;
    background-color: #f5f1ed;
    border: 1px solid #dad9d6;
}

.ctc-sub-text {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ctc-sub-text div {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.ctc-sub-text div:nth-child(2) {
    border-left: 1px solid var(--color-darkgreen-ligther);
    border-right: 1px solid var(--color-darkgreen-ligther);
}

#contact-coord > h2 {
    font-weight: bold;
}

#contact-coord > h2,
#contact-coord > p {
    text-transform: uppercase;
}

#contact-coord > p {
    color: var(--color-darkgreen-ligther);
}

#contact-coord > hr {
    width: 65px;
    height: 2px;
    background-color: var(--color-darkgreen-ligther);
}

.details-list__item {
    display: flex;
}

.details-list__item:before {
    content: '';
    display: inline-block;
    width: 70px;
    height: 60px;
    background-image: url('/media/img/ctc-adr.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.details-list .details-list__item:nth-child(2):before {
    background-image: url('/media/img/ctc-mail.png');
}
.details-list .details-list__item:nth-child(3):before {
    background-image: url('/media/img/ctc-phone.png');
}
.details-list .details-list__item:nth-child(4):before {
    background-image: url('/media/img/ctc-hour.png');
}

#contact-form button.btn--primary {
    border-radius: 5px;
    width: 320px;
    height: 65px;
    background: #54682F;
    background: linear-gradient(90deg,rgba(84, 104, 47, 1) 0%, rgba(62, 85, 36, 1) 100%);
    font-weight: bold;
}

#contact-form button.btn--primary:hover {
    background: #54682F;
    background: linear-gradient(255deg,rgba(84, 104, 47, 1) 0%, rgba(62, 85, 36, 1) 100%);
}

.ticker hr {
    width: 20%;
    height: 1px;
    background-color: var(--color-darkgreen-ligther);
}

/* ----------------------- mentions ---- */
.mentions-legales h2 {
    text-transform: uppercase;
    color: var(--color-darkgreen-ligther);
}
.mentions-legales p + h2 {
    padding-top: 75px;
    margin-bottom: 15px;
}
.mentions-legales p {
    font-size: var(--text-sm);
}
.mentions-legales p + p {
    margin-top: 20px;
}

/* ----------------------- fiche ---- */
.page-content.fiche {
    background-color: #f6efdc;
}
.slideshow__content .reptile {
    background-size: contain;
}
.reseaux a {
    border-bottom: 0;
    display: block;
    margin-right: 20px;
}
.reseaux .icon {
    font-size: 2em;
}
.reseaux a:hover img {
    filter: grayscale(50%);
}
.pet-info {
    background: url('../../media/img/bg_papier_sb.png');

    background-size: 100% 100%;
    background-position-x: right;
    /*background-color: hsl(var(--hsl-sandy-h), 90%, var(--hsl-sandy-l));*/
}
.pet-info > div:first-child {
    background: url('../../media/img/pet_lezard.png') no-repeat;
    background-position-x: 20px;
    background-position-y: 20px;
}
.pet-info > div:nth-child(2) {
    background: url('../../media/img/pet-habitat.png') no-repeat;
    background-position-x: 17px;
    background-position-y: 20px;
}
.pet-info > div:nth-child(3) {
    background: url('../../media/img/pet-alimentation.png') no-repeat;
    background-position-x: 20px;
    background-position-y: 20px;
}
.pet-info > div {
    padding-left: 60px;
}

@media screen and (max-width: 64rem) {
    .pet-info > div {
        background-image: none;
    }

    .pet-info h4 {
        color: red;
    }
}

.pet-info h4,
.conseil h4 {
    color: #2d4f02;
    font-weight: bold;
    border-bottom: 1px solid #2d4f02;
}

.conseil > div:last-child {
    background: url('../../media/img/bg_plante.png') no-repeat;
    background-size: 100% 100%;
}
.conseil  > div:last-child h4,
.conseil  > div:last-child p,
.conseil  > div:last-child ul li {
    color: white;
    font-weight: bold;
}

.conseil  > div:last-child h4 {
    border-bottom: 1px solid white;
}
.conseil  > div:last-child ul li {
    line-height: 2em;
}