@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap');

@import url('/themes/frontoffice/bootstrap5/arbrecoccinelle/fonts/Avenir/stylesheet.css');
@import url('/themes/frontoffice/bootstrap5/arbrecoccinelle/fonts/DreamingOutloudScript/stylesheet.css');

:root {
    --sl-primary: #ff7865;
    --sl-primary-2: #ffc1b1;
    --sl-primary-3: #ffede9;
    --sl-secondary: #687a6c;
    --sl-secondary-2: #9ead9f;
    --sl-secondary-3: #daede0;
    --sl-tiertary: #492e2e;
    --sl-tiertary-2: #936454;
    --sl-tiertary-3: #fcede0;
    --sl-tiertary-4: #f4bb82;
    --sl-tiertary-5: #e2c6b7;
    --sl-tiertary-6: #fffaf8;
    --sl-light: #f7f8f2;
    --sl-dark: #272324;

    --sl-bg: #fcede0;

    --sl-font-primary: "DreamingOutloudScript", "Old Standard TT", serif;
    /*--sl-font-secondary: 'Great Vibes', cursive;*/
    --sl-font-secondary: "Avenir", "Old Standard TT", serif;
    --sl-font-logo: "Old Standard TT", serif;
}

body { width: 100vw; overflow-x: hidden; background-color: var(--sl-bg); font-family: var(--sl-font-secondary); }

img { max-width: 100%; }

.font-primary { font-family: var(--sl-font-primary); }
.font-secondary { font-family: var(--sl-font-secondary); }
.font-logo { font-family: var(--sl-font-logo); }

h1 { font-family: var(--sl-font-primary); }
h1 small { display: block; }
h2 { font-family: var(--sl-font-primary); }
h2 small { font-family: var(--sl-font-primary); display: block; color: var(--sl-primary); }
h3 { font-family: var(--sl-font-primary); }
h4 { font-family: var(--sl-font-secondary); }

strong { font-weight: bold !important; }
p strong { color: #4f2929; }
.text-light strong { color: var(--sl-light) !important; }

hr { border-top: 1px dashed #000; }

.bg-primary { background-color: var(--sl-primary) !important; }
.bg-primary-2 { background-color: var(--sl-primary-2) !important; }
.bg-primary-3 { background-color: var(--sl-primary-3) !important; }
.bg-secondary { background-color: var(--sl-secondary) !important; }
.bg-secondary-2 { background-color: var(--sl-secondary-2) !important; }
.bg-secondary-3 { background-color: var(--sl-secondary-3) !important; }
.bg-light { background-color: var(--sl-light) !important; }
.bg-tiertary { background-color: var(--sl-tiertary) !important; }
.bg-tiertary-2 { background-color: var(--sl-tiertary-2) !important; }
.bg-tiertary-3 { background-color: var(--sl-tiertary-3) !important; }
.bg-tiertary-4 { background-color: var(--sl-tiertary-4) !important; }
.bg-tiertary-5 { background-color: var(--sl-tiertary-5) !important; }
.bg-tiertary-6 { background-color: var(--sl-tiertary-6) !important; }
.bg-warning-light { background-color: #F8C7A0 !important; }

.text-primary { color: var(--sl-primary) !important; }
.text-primary-2 { color: var(--sl-primary-2) !important; }
.text-primary-3 { color: var(--sl-primary-3) !important; }
.text-secondary { color: var(--sl-secondary) !important; }
.text-secondary-2 { color: var(--sl-secondary-2) !important; }
.text-secondary-3 { color: var(--sl-secondary-3) !important; }
.text-tiertary { color: var(--sl-tiertary) !important; }
.text-tiertary-2 { color: var(--sl-tiertary-2) !important; }
.text-tiertary-3 { color: var(--sl-tiertary-3) !important; }
.text-tiertary-4 { color: var(--sl-tiertary-4) !important; }
.text-tiertary-5 { color: var(--sl-tiertary-5) !important; }
.text-tiertary-6 { color: var(--sl-tiertary-6) !important; }

.btn-primary { background-color: var(--sl-primary); border-color: var(--sl-primary); }
.btn-primary:hover { background-color: var(--sl-primary-light) !important; border-color: var(--sl-primary-light) !important; }
.btn-primary-light { background-color: var(--sl-primary-light); border-color: var(--sl-primary-light); color: var(--sl-light); }
.btn-primary-light:hover { background-color: var(--sl-primary) !important; border-color: var(--sl-primary) !important; color: var(--sl-light) !important; }
.btn-secondary { background-color: var(--sl-secondary); border-color: var(--sl-secondary); }
.btn-outline-primary { color: var(--sl-primary); border-color: var(--sl-primary); }
.btn-outline-secondary { color: var(--sl-secondary); border-color: var(--sl-secondary); }



/* FOOTER */
.sl-footer-nav-container { background-image: url('/d/9a42/65df/4/3/7/9/0/coccinelles.png'); background-size: contain; background-position: right; background-repeat: no-repeat; padding-top: 2rem; }
.sl-footer-nav .sl-footer-nav-title { font-weight: 600; color: var(--sl-light); background-color: var(--sl-secondary); border-radius: .5rem; font-style: italic; margin-bottom: 1rem; padding: .125rem; }
.sl-footer-nav-container .col > .sl-footer-nav-item:last-child { margin-bottom: 2rem; }
.sl-footer-nav-container .sl-footer-nav-item a { text-decoration: none; padding: .25rem; display: block; color: var(--sl-secondary); border-radius: .5rem; }
.sl-footer-nav-container .sl-footer-nav-item a:hover { background-color: var(--sl-primary); color: var(--sl-light); }
.sl-footer-nav-container .sl-footer-image { background-image: url('/d/9a42/65df/4/7/9/2/7/écureuil2x.png'); aspect-ratio: 21 / 17; background-size: 50%; background-repeat: no-repeat; background-position: bottom;; }

/* NAV */
#sl-main-menu .navbar { position: relative; }
#sl-main-menu .navbar-nav { }
#sl-main-menu .navbar-nav .nav-item { text-align: center; line-height: 1.2; padding: .25rem; font-size: .9rem; text-transform: uppercase; }
#sl-main-menu .navbar-nav .nav-item span { display: block; }
#sl-main-menu .navbar-nav .nav-item span:last-child { font-style: italic; }
#sl-main-menu .navbar-nav .nav-item.active { font-weight: 700; }
#sl-main-menu .navbar-brand img { height: 10rem !important; padding: 1rem 0; width: 100%; object-fit: contain; }
#sl-main-menu .navbar-nav .dropdown-menu { padding: 0; }
#sl-main-menu .navbar-nav .dropdown-menu .dropdown-item { padding: .75rem 1.5rem .5rem 1.5rem; line-height: 1; }

@media (max-width: 991px) {
    #sl-main-menu .navbar .navbar-collapse { position: absolute; top: 100%; left: 0; width: 100%; z-index: 995; background-color: var(--sl-light); }
}

#sl-main-menu.sl-fixed .navbar { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--sl-white); z-index: 999; padding: 0; }
#sl-main-menu.sl-fixed .navbar-brand img { height: 4rem !important; padding: 0; }
#sl-main-menu.sl-fixed .navbar-nav .nav-item { line-height: 1.2; padding: .5rem 1rem; font-size: .9rem; }

.navbar-toggler { box-shadow: none !important; }

/* SUBNAV */
#subnav { z-index: 100; }
#subnav .nav .nav-item .nav-link { background: var(--sl-secondary); opacity: .5; color: var(--sl-light); margin: 0 .5rem; font-weight: bold; }
#subnav .nav .nav-item .nav-link.active,
#subnav .nav .nav-item .nav-link:hover { opacity: 1; }

#subnav.sl-fixed .navbar { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--sl-secondary); z-index: 990; }

@media (max-width: 1199px) {
    #subnav .nav .nav-item .nav-link { margin: 0 .25rem; font-size: .9rem; padding: .25rem .5rem; }
}
@media (max-width: 991px) {
}

/* CAROUSEL */
.sl-carousel-indicators button { border: 3px solid var(--sl-light); background: var(--sl-light); text-align: left; margin-bottom: .5rem; border-radius: .5rem; padding: .25rem; }
.sl-carousel-indicators button.active,
.sl-carousel-indicators button:hover { border-color: var(--sl-secondary); }
.sl-carousel-indicators button img { aspect-ratio: 1; object-fit: cover; object-position: center; border-radius: .5rem; }
.carousel img { aspect-ratio: 1; object-fit: cover; object-position: center; border-radius: .5rem; }

.sl-iframe-meeko-form { width: 100%; height: 70vh; padding: 2rem 0; background: #fff; border: none; border-radius: 1rem; }
.sl-iframe-maps { width: 100%; height: 100%; min-height: 300px; border: 5px solid var(--sl-success); }

.sl-carousel-indicators button { border: 3px solid var(--sl-light); background: var(--sl-light); text-align: left; margin-bottom: .5rem; border-radius: .5rem; padding: .25rem; }
.sl-carousel-indicators button.active,
.sl-carousel-indicators button:hover { border-color: var(--sl-secondary); }
.sl-carousel-indicators button img { aspect-ratio: 1; object-fit: cover; object-position: center; border-radius: .5rem; }
.carousel img { aspect-ratio: 1; object-fit: cover; object-position: center; border-radius: .5rem; }

.sl-notation { width: 10rem; height: 10rem; border: 3px solid var(--sl-primary); border-radius: 50%; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.sl-notation-stars { color: var(--sl-warning); }

.sl-carousel-control { position: absolute; top: calc(50% - 2rem); font-size: 2.5rem; width: 4rem; height: 4rem; color: #fff; background-color: var(--sl-tiertary); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--sl-white); }
.sl-carousel-control.sl-carousel-control-left { left: -2rem; }
.sl-carousel-control.sl-carousel-control-right { right: -2rem; }



/* EFFECTS */
.sl-effect-zoom-on-hover:hover { transform: scale(1.1); }


/* ANIMATIONS */
.sl-anim { transition: all 0s ease-in-out; }
.sl-anim-fadein.visible { transition: all .75s ease-in-out; }

.sl-anim.sl-anim-fadein { opacity: 0; }
.sl-anim.sl-anim-fadein.visible { opacity: 1; }

.sl-anim.sl-anim-translate-left { transform: translateX(-2rem); }
.sl-anim.sl-anim-translate-left.visible { transform: translateX(0); }

.sl-anim.sl-anim-translate-right { transform: translateX(2rem); }
.sl-anim.sl-anim-translate-right.visible { transform: translateX(0); }

.sl-anim.sl-anim-translate-top { transform: translateY(-2rem); }
.sl-anim.sl-anim-translate-top.visible { transform: translateY(0); }

.sl-anim.sl-anim-translate-bottom { transform: translateY(2rem); }
.sl-anim.sl-anim-translate-bottom.visible { transform: translateY(0); }

.sl-anim-left-to-right { left: -20vw; animation-name: leftToRight; animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear; }

@keyframes leftToRight {
  0% { left: -10vw; }
  100% { left: 110vw; }
}






.sl-socials-right { position: fixed; top: 40%; right: 0; z-index: 980; }
#subNavbarSupportedContent.navbar-collapse.collapse.show, #subNavbarSupportedContent.navbar-collapse.collapsing { margin-top: .5rem; }


.btn.sl-icon-arrow { align-items: center; display: flex; justify-content: center; }
.btn.sl-icon-arrow i { background: url('/d/9a42/65df/6/5/6/3/2/arrow-white.png'); height: 1.25rem; aspect-ratio: 2; background-size: cover !important; }
.btn.sl-icon-arrow i::before { display: none; }
.btn.sl-icon-arrow.sl-icon-arrow-orange i { background: url('/d/9a42/65df/6/5/6/3/3/arrow-orange.png'); }


.sl-contact-newsletter form .form-label { display: none; }
.sl-contact-newsletter form .form-control { border: 2px solid var(--sl-secondary); border-radius: .75rem; padding: .75rem 1.5rem; }
.sl-contact-newsletter form .form-control::placeholder { color: #687a6c99; }

