@font-face {
    font-family: "LibreBaskerville";
    src: url("/style/Specific/font/LibreBaskerville-Bold.ttf");
    font-weight: bold;
}

/*** COMMONS ***/
:root {
    --primary-color: #41746E;
    --secondary-color: #CEE1DA;

    --white-color: #ffffff;
    --red-color:  rgb(201,0,9);
    --dark-color: #414141;
    --black-color: #000000;
    --grey-color: #707070;
    /* --dark-grey-color: #6f6f6f; */
    --light-grey-color: #EEEEEE;
    --green-color: #8BABA6;
    --light-green-color: #DBE5E4;
    --btn-grey:rgb(238, 238, 238);

    --navbar-height: 56px;
    --filter-button-height: 40px;


    --indicator-color: var(--grey-color);

    --carousel-indicator-size: 40px;
    --carousel-indicator-offset: .5rem;
    --carousel-caption-height: 180px;

    --nav-color: #B4B4B4;
    --nav-color-active: var(--grey-color);

    --border-radius: 11px;

    --shadow-color: rgba(0, 0, 0, .2);
    --shadow-dark-color: rgba(0, 0, 0, .6);
    --box-shadow: 0 2px 4px 0 var(--shadow-color);

    --btn-help-offset: 1.5rem;
    --btn-bookmark-size: 8rem;

    --size-btn-icon: 45px;
}

body {
    font-weight: 300;
    color: var(--dark-color);
}

.bg-primary {
    background-color: var(--primary-color) !important;
}
.bg-secondary {
    background-color: var(--secondary-color) !important;
}
.bg-cream {
    background-color: #F7E9DC;
}
.bg-light {
    background-color: #FFF !important;
}
.bg-grey {
    background-color: var(--grey-color);
}
.text-primary {
    color: var(--primary-color) !important;
}
.bg-primary .text-primary {
    color: var(--secondary-color) !important;
}
.text-black {
    color: #000 !important;
}
.text-dark {
    color: var(--dark-color) !important;
}
.text-grey {
    color: var(--grey-color) !important;
}
.text-description {
    font-weight: 200;
    line-height: 1.1rem;
}
.rounded-3 {
    border-radius: var(--border-radius) !important;
}
.rounded-4 {
    border-radius: calc(var(--border-radius) * 2) !important;
}
.rounded-5 {
    border-radius: calc(var(--border-radius) * 3) !important;
}

:focus {
    box-shadow: none !important;
    border-color: inherit;
}

a {
    text-decoration: none;
}

hr {
    background-color: var(--primary-color);
}

#login-col {
    height: 100vh;
    background: url(/transverse/asset/image/background-login.jpg) top no-repeat;
    background-size: cover;
}
/*** END COMMONS ***/

/*** NAV ***/
nav.navbar {
    height: var(--navbar-height);
    box-shadow: var(--box-shadow);
    z-index: 1030;
}
nav.navbar .navbar-brand img {
    max-height: 35px;
}
nav.navbar .navbar-collapse {
    z-index: 999;
    margin-top: .5rem;
    box-shadow: var(--box-shadow);
}
.navbar-light .navbar-nav .nav-link {
    color: var(--nav-color);
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--nav-color-active);
}
/*** END NAV ***/

/*** BUTTONS ***/
.btn {
    font-weight: 200;
    border-radius: var(--border-radius);
    line-height: 1.05 !important;
}
.btn.btn-primary {
    color: #fff;
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
.btn.btn-secondary {
    color: var(--primary-color);
    border-color: var(--secondary-color);
    background-color: var(--secondary-color);
}
.btn-white {
    color: var(--primary-color);
    background-color: #fff;
}
.btn-ordinary {
    color: var(--black-color);
    background-color: var(--light-grey-color);
}
.btn-white:hover,
.btn-white:focus,
.btn-white.active {
    color: #fff;
    background-color: var(--primary-color);
}
.btn.btn-link {
    color: var(--primary-color);
    text-decoration: none !important;
}
.btn.btn-tag {
    color: var(--primary-color);
    background-color: var(--light-grey-color);
}
.btn.btn-tag:hover,
.btn.btn-tag:focus {
    border-color: transparent;
}
.btn-icon-round {
    width: var(--size-btn-icon);
    height: var(--size-btn-icon);
    border-radius: 50%;
    box-shadow: var(--box-shadow);
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.btn-icon-round.btn-sm {
    --size-btn-icon: 35px;
}
.btn-icon-round.btn-lg {
    --size-btn-icon: 50px;
}
.btn-icon-round:hover,
.btn-icon-round:focus {
    border-color: transparent;
    box-shadow: var(--box-shadow) !important;
}
.btn-primary.btn-icon-round:hover,
.btn-primary.btn-icon-round:focus {
    color: var(--primary-color);
    background-color: #fff;
    border-color: var(--primary-color);
}
.btn-bookmark,
.btn-bookmark:hover {
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: .8rem;
    display: inline-block;
    color: var(--dark-color);
}
.btn-bookmark img {
    width: var(--btn-bookmark-size);
    height: var(--btn-bookmark-size);
    object-fit: cover;
    border-radius: calc(var(--border-radius) * 3);
    background-color: var(--secondary-color);
}
.btn-bookmark .border-dotted {
    width: var(--btn-bookmark-size);
    height: var(--btn-bookmark-size);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.btn.btn-material-add {
    color: var(--dark-color);
    border-radius: 0;
    border: 2px dotted var(--dark-color);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.btn.btn-help {
    position: fixed;
    bottom: var(--btn-help-offset);
    right: var(--btn-help-offset);
    z-index: 9;
}

.btn.position-fixed {
    z-index: 9;
}
.btn.border-dotted {
    border: 1px dotted var(--dark-color);
}
.btn.btn-addList {
    background-color: var(--white-color)!important;
    border-color: var(--primary-color)!important;
    color: var(--primary-color)!important;
}
.btn.btn-read {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}
.btn.btn-write {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}


.btn.btn-delete {
    background-color: var(--red-color);
    color: var(--white-color);
    border: none;
}
.btn.border-dotted.rounded-4 {
    /* background-color: var(--btn-grey);
    color: var(--grey-color); */
}
.btn-bookmark > .img-fluid {
    background-color: #EEEEEE;
}
/*** BUTTONS ***/

/*** INPUT ***/
.form-control,
.form-control:focus,
.form-select,
.input-group .btn {
    min-height: 27px;
    font-weight: 200;
    font-size: .9rem;
    line-height: .9;
    color: var(--green-color);
    border-color: var(--light-green-color);
    background-color: var(--light-green-color);
    border-radius: var(--border-radius);
    padding: .25rem .75rem;
}
.form-control::placeholder {
    font-weight: 200;
    font-style: italic;
    color: var(--green-color);
}
.form-control:focus {
    border-color: var(--green-color);
}
.form-select {
    color: #fff;
    background-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")
}
.form-check:not(.form-switch) .form-check-input[type="checkbox"],
.form-check:not(.form-switch) .form-check-input[type="checkbox"]:focus {
    border-radius: 0;
    border-color: var(--grey-color);
}
.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
#selfActivityOnly:checked {
    background-color: var(--primary-color);
}
.form-check input:checked{
    background-color: var(--primary-color);
}

textarea.form-control {
    border-color: var(--primary-color);
}
/*** END INPUT ***/

/*** MODAL ***/
.modal .modal-content {
    border-radius: var(--border-radius);
}
.modal .modal-header {
    align-items: flex-start;
}
.modal .form-control {
    padding: .5rem .75rem;
    background-color: #fff;
    color: var(--dark-color);
}
.modal .form-control::placeholder {
    font-style: normal;
    color: var(--primary-color);
}

#help-modal .modal-dialog {
    position: absolute;
    right: var(--btn-help-offset);
    bottom: 5rem;
    left:0;
}
/*** END MODAL ***/

/*** CAROUSEL ***/
.carousel [data-bs-slide] {
    width: var(--carousel-indicator-size);
    height: var(--carousel-indicator-size);
    border-radius: 50%;
    background-color: #fff;
    color: var(--indicator-color);
    font-size: 1.5rem;

    top: auto;
    bottom: calc(var(--carousel-caption-height) + var(--carousel-indicator-offset));
    right: var(--carousel-indicator-offset);
}.carousel [data-bs-slide="prev"] {
    left: auto;
    right: calc(var(--carousel-indicator-size) + calc(2 * var(--carousel-indicator-offset)));
}
.carousel .carousel-caption {
    color: var(--dark-color);
    height: var(--carousel-caption-height);
}
.carousel .carousel-indicators [data-bs-target] {
    z-index: 999;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid var(--indicator-color);
}
.carousel .carousel-indicators [data-bs-target].active {
    background-color: var(--indicator-color);
}
.carousel .carousel-indicators [data-bs-target].bg-white {
    opacity: 1;
    border-color: var(--primary-color);
}
.carousel .carousel-indicators [data-bs-target].bg-white.active {
    background-color: var(--primary-color) !important;
}

#recipeCarousel .carousel-inner {
    display: flex;
}
#recipeCarousel .carousel-inner .carousel-item {
    margin-right: 0;
    flex: 0 0 calc(100% / 6);
    display: block;
    padding: 0 .25rem;
}
/*** END CAROUSEL ***/

/*** CARD MATERIAL ***/
.card.card-material,
.card.card-home a {
    color: var(--dark-color);
}
.card.card-material img {
    border-radius: calc(var(--border-radius) * 2);
    background-color: var(--secondary-color);
    object-fit: contain;
    box-shadow: var(--box-shadow);
}
.card.card-material .bookmark-overlay {
    border-radius: calc(var(--border-radius) * 2);
}

.card.card-home img {
    object-fit: cover;
}
/*** END CARD MATERIAL ***/

/*** CARD HOW-TO ***/
.card.card-how-to {
    --height: 250px;
    border: 0;
    height: var(--height);
}
.card.card-how-to.card-sm {
    --height: 120px;
}
.card.card-how-to.card-md {
    --height: 190px;
}
.card.card-how-to.card-lg {
    --height: 400px;
}
.card.card-how-to img {
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--border-radius) * 2);
}
.card.card-how-to .card-img-overlay {
    border-radius: calc(var(--border-radius) * 2);
    background-color: rgba(0, 0, 0, .4);
}
/*** END CARD HOW-TO ***/

/*** BREADCRUMB ***/
.breadcrumb .breadcrumb-item a,
.breadcrumb .breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
    font-weight: 300;
    color: var(--primary-color);
}
.breadcrumb-item+.breadcrumb-item::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f105";
}
/*** END BREADCRUMB ***/

/*** TABS ***/
.nav-tabs .nav-link {
    border: 0;
    font-weight: 300;
    color: var(--dark-color);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    border: 0;
    position: relative;
}
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-link:hover::after {
    --width: 3rem;
    content: "";
    width: var(--width);
    height: 2px;
    background-color: var(--primary-color);
    position: absolute;
    bottom: .4rem;
    right: calc(50% - calc(var(--width) / 2));
}
.nav-tabs .nav-link.nav-link-sm {
    color: var(--grey-color);
}
.nav-tabs .nav-link.nav-link-sm.active {
    color: var(--primary-color);
    font-weight: bold;
}
.nav-tabs .nav-link.nav-link-sm.disabled {
    color: var(--light-grey-color);
}
.nav-tabs .nav-link.nav-link-sm.active::after,
.nav-tabs .nav-link.nav-link-sm:hover::after {
    --width: 1rem;
}
/*** END TABS ***/

/*** ACCORDION ***/
.accordion-button,
.accordion-button:not(.collapsed) {
    color: var(--dark-color);
    border: 0 !important;
    background-color: transparent;
    box-shadow: none;
}
.accordion-button::after {
    background-image: none;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f054";
    margin-left: .5rem;
}
.accordion-button:not(.collapsed)::after {
    background-image: none;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078";
    transform: none;
}
/*** END ACCORDION ***/

/*** DROPDOWN ***/
.dropend .dropdown-menu {
    top: inherit !important;
    bottom: -3rem !important;
    left: -2rem !important;
    border-color: var(--light-grey-color);
    border-radius: var(--border-radius);
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    background-color: var(--primary-color);
}
.dropdown-item {
    padding-right: 1.5rem;
    color: var(--dark-color);
}
.dropdown-item::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f105";
    position: absolute;
    right: .5rem;
}
/*** END DROPDOWN ***/
/*** TEXT-AREA ***/
textarea::-webkit-input-placeholder {
    color:var(--primary-color);
}

textarea:-moz-placeholder { /* Firefox 18- */
    color:var(--primary-color);
}

textarea::-moz-placeholder {  /* Firefox 19+ */
    color:var(--primary-color);
}

textarea:-ms-input-placeholder {
    color:var(--primary-color);
}

textarea::placeholder {
    color:var(--primary-color);
}
/*** TEXT-AREA ***/

/*** tooltip ***/
.tooltip > div {
    background-color: var(--primary-color) !important;
    color: #fff;
    border-color: white;
}
.tooltip .tooltip-arrow { display: none; }
/*** tooltip ***/

/*** HELP ***/
#help-container {
    --size-btn: 50px;
    --offset: 8px;

    position: fixed;
    bottom: 0;
    width: calc(100vw - calc(2 * var(--btn-help-offset)));
    margin: var(--btn-help-offset);
    z-index: 1060;
}

#help-container .content {
    --half-size: calc(calc(var(--size-btn) + var(--offset)) / 2);

    width: calc(100% - var(--size-btn));
    height: var(--size-btn);
    font-size: .9rem;
    font-weight: bold;
    color: var(--primary-color);
    padding-right: calc(var(--size-btn) / 2) !important;
    background: radial-gradient(circle at calc(100% + calc(var(--half-size) / 1.75)) 50%, transparent var(--half-size), #fff calc(var(--half-size) + 1px));
    box-shadow: 0 0 4px 2px var(--shadow-color);
    overflow-y: auto;
}
#help-container .button-container {
    position: relative;
    width: var(--size-btn);
    height: var(--size-btn);
    border-radius: 50%;
    background-color: #fff;
}
#help-container .button-container .btn {
    width: calc(100% -  var(--offset));
    height: calc(100% -  var(--offset));

    position: absolute;
    top: calc(var(--offset) / 2);
    left: calc(var(--offset) / 2);
    box-shadow: none;
    background-color: #fff;
}
#help-container .button-container .btn:hover {
    box-shadow: none !important;
}
#help-container .button-container.step::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    transition: background-color 0.2s ease-in-out;
    background: var(--primary-color);
}
#help-container .button-container.step-1::before {
    top: 0;
    left: 0;
    border-radius: 100% 0 0 0;
}
#help-container .button-container.step-2::before {
    top: 0;
    right: 0;
    border-radius: 0 100% 0 0;
}
#help-container .button-container.step-3::before {
    bottom: 0;
    right: 0;
    border-radius: 0 0 100% 0;
}
#help-container .button-container.step-4::before {
    bottom: 0;
    left: 0;
    border-radius: 0 0 0 100%;
}

.over-overlay {
    z-index: 1060 !important;
    position: relative;
    outline: 5px solid #fff;
    background-color: #fff;
    /* outline: 9999px solid rgba(0,0,0,.5); */
}
.over-overlay-flex {
    outline: 9999px solid rgba(0,0,0,0.5);
    outline-offset: 5px;
}
.modal-backdrop.overlay-light {
    opacity: 0;
}
/*** END HELP ***/



/* < SM */
@media screen and (max-width: 575px) {
    #carouselCol {
    visibility: hidden;
    display: none;
    }
}

/* < MD */
@media (max-width: 767px) {
    :root {
        --btn-help-offset: .75rem;
    }
    .modal-backdrop.overlay-light {
        opacity: .5;
    }

    #recipeCarousel .carousel-inner .carousel-item > div {
        display: none;
    }
    #recipeCarousel .carousel-inner .carousel-item > div:first-child {
        display: block;
    }

    #filter-button {
        z-index: 10;
        height: var(--filter-button-height);
        box-shadow: 0 -2px 4px 0 var(--shadow-color);
    }

    #filter-container {
        display:none;
        z-index: 11;
        width: 100vw;
        height: calc(calc(100vh - var(--filter-button-height)) - var(--navbar-height));
        box-shadow: none;
        overflow-y: auto;
        background-color: #fff;
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        padding-top: var(--navbar-height);
    }
    #filter-container nav {
        margin-top: var(--navbar-height);
        z-index: 12;
    }
}

/* >= MD */
@media (min-width: 768px) {
    nav.navbar .navbar-collapse {
        margin-top: 0;
        box-shadow: none;
    }

    .page .btn.btn-help {
        right:35%;
    }

    #recipeCarousel .carousel-inner .carousel-item-end.active,
    #recipeCarousel .carousel-inner .carousel-item-next {
        transform: translateX(30%);
    }

    #recipeCarousel .carousel-inner .carousel-item-start.active,
    #recipeCarousel .carousel-inner .carousel-item-prev {
        transform: translateX(-30%);
    }

    .card.card-material .bookmark-overlay {
        display: none;
        background-color:rgba(0, 0, 0, .4);
    }
    .card.card-material:hover .bookmark-overlay {
        display: block;
    }

    .shadow-left {
        z-index: 2;
        box-shadow: -2px 0px 4px var(--shadow-color);
    }

    .full-height {
        min-height: calc(100vh - var(--navbar-height));
    }
    .full-height-strict {
        height: calc(100vh - var(--navbar-height));
    }
}

/* >= LG */
@media (min-width: 992px) {
    nav.navbar {
        position: relative;
    }
}

/* modification fichier pdf 50 pages lvmh */
.small, small {
    font-size: 1em;
}
/* END */