@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');

:root {
    --color-primary: #9c5c41;
    --color-primary-light: #e4a78b;
    --color-primary-dark: #6f3f2a;
    --color-woodland-red: #B72E44;
    --color-lemon-pear: #A7b539;
    --color-vanilla: #432421;
}

/* section .container {
    border: 2px solid red;
}
section .container .row {
    border: 2px solid blue;
} */


body {
    /* background-size: cover; */
    font-family: 'Atkinson Hyperlegible', sans-serif;
    color: var(--color-primary-dark);
    font-size: 1.1rem;
    line-height: 1.1rem;  
}

.bg {
    background: url(../img/background-mobile.jpg) center no-repeat;

    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: -1;
}

/* CSS specific to iOS devices */ 
@supports (-webkit-touch-callout: none) {
      @media (min-width: 576px) {
        .bg {
            background: url(../img/background-ordi.jpg) center no-repeat;
        }
      }
}

/* CSS for other than iOS devices */ 
@supports not (-webkit-touch-callout: none) {
    @media (min-width: 576px) {
        .bg {
            background: url(../img/background-ordi.jpg) center no-repeat;
            background-size: cover;
        }
      }
}





h1, h2, h3, h4, h5, h6 {
    font-family: 'Parisienne', cursive;
    font-size: 150%;
    line-height: 2.2rem;
    color: var(--color-primary);
    margin-bottom: 20px;
    /* border: 1px solid orange; */
}
h1 span {
    display: block;
}
.min-vh-50 {
    min-height: 50vh!important;
}

.fbsection-page h1,
.fbsection-page h2,
.fbsection-page h3,
.fbsection-6 h3,
.fbsection-page h4,
.fbsection-page h5,
.fbsection-page h6 {
    font-family: 'Atkinson Hyperlegible', sans-serif;
}
.fbsection-6 h3{
    margin-bottom: 8px;
}
.fbsection-page h1 {
    font-size: 250%;
    line-height: 2.8rem;
}
.fbsection-page h2,
.fbsection-page h3,
.fbsection-6 h3,
.fbsection-page h4,
.fbsection-page h5,
.fbsection-page h6 {
    font-size: 160%;
}

p {
    font-size: 80%;
}


a {
    color: var(--color-primary);
    text-decoration: none;
}
a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.border-top.border-primary{
    border: none;
    border-top: 1px solid var(--color-primary) !important;
}
.border-bottom.border-primary{
    border: none;
    border-bottom: 1px solid var(--color-primary) !important;
}

/* menu */
.offcanvas {
    color: white;
    background: rgb(153,93,67);
    background: url(../img/embleme-Beleven-menu.png) right center no-repeat, linear-gradient(270deg, rgba(153,93,67,1) 0%, rgba(122,80,58,1) 100%);
}


.offcanvas-header h5{
    font-family: 'Atkinson Hyperlegible', sans-serif;
    color: white;
    /* font-style: italic; */
    font-size: 135%;
}
.offcanvas-body p{
    font-size: 90%;
    color: white;
}
.offcanvas-body p a{
    color: white;
}
.offcanvas-end {
    width: 300px;
}

.navbar-nav .nav-item .nav-link {
    font-size: 125%;
    /* font-style: italic; */
    padding: 1.5rem 0rem;
    color: white;
}
.navbar-nav .nav-item .nav-link:hover {
    color: var(--color-primary-light);
    text-decoration: none;
}

/* modal */
/* .modal-content{
    background: url(../img/embleme-Beleven-encart-age.png) center no-repeat var(--color-primary-dark);
} */


/* header */
header .navbar-brand img {
    width: 82px;
}

.bg-dark {
    background-color: transparent!important;
}

/* BOUTONS */
.btn-primary {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-primary:hover {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-secondary {
    color: var(--color-primary);
    background-color: white;
    border-color: transparent;
}
.btn-secondary:hover {
    color: white;
    background-color: var(--color-primary);
    border-color: white;
}
.btn-check:focus + .btn-secondary, .btn-secondary:focus {
    color: var(--color-primary-dark);
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}
.btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}

.btn-outline-secondary {
    color: var(--color-primary);
    background-color: transparent;
    border-color: transparent;
}
.btn-outline-secondary:hover {
    color: var(--color-primary-dark);
    background-color: transparent;
    border-color: transparent;
}


/**************************
FORMAT PC
**************************/
@media (min-width: 992px) {
    body {
        background: url(../img/background-ordi.jpg) top fixed no-repeat;
        background-size: cover;
        /* background: red; */
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 240%;
    }
    h1 span {
        display: inline;
    }
    p {
        font-size: 100%;
    }

    header .navbar-brand img {
        width: 150px;
    }

}


/**************************
FORMULAIRE DE CONTACT
**************************/
form .form-control,
form .form-control:focus
{
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}
.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(153, 93, 67, 0.25);
  }

.form-control::placeholder {
    color: var(--color-primary);
    opacity: 1;
  }
form .bouton-envoyer {
    background: url(../img/embleme-Beleven-formulaire.png) center no-repeat;
    padding: 50px;
}

.btn-primary {
    color: #fff;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary);
  }
.btn-check:focus + .btn-primary, .btn-primary:focus {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgba(153, 93, 67, 0.25);
  }
  .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }
  .btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(153, 93, 67, 0.25);
  }
  .btn-primary:disabled, .btn-primary.disabled {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
  }