@charset "UTF-8";
/* polices */
/*polices locales*/

/*  Crusoe */

@font-face {
    font-family: Crusoe;
    src: url(../polices/CrusoeText-Regular.woff);
    font-style: normal;
    /* graisse : normal */
    font-weight: 400;
}

/*  Higuen */

@font-face {
    font-family: Higuen;
    src: url(../polices/Higuen-Serif.woff);
    font-style: normal;
    /* /* font-weight: normal */
    font-weight: 400;
}

/*  DenkOne */

@font-face {
    font-family: DenkOne;
    src: url(../../assets/polices/DenkOne-Regular.ttf);
    font-style: normal;
    /* /* font-weight: normal */
    font-weight: 400;
}

/*  Segoe Fluent Icons */

@font-face {
    font-family: SegoeIcons;
    src: url(../../assets/polices/SegoeIcons.ttf);
    font-style: normal;
    /* /* font-weight: normal */
    font-weight: 400;
}


/* SUSE */

@font-face {
    font-family: SUSE;
    src: url(../../assets/polices/SUSE-ExtraLight.ttf);
    font-style: normal;
    /* font-weight: Extralight */
    font-weight: 200;
}


@font-face {
    font-family: SUSE;
    src: url(../../assets/polices/SUSE-Light.ttf);
    font-style: normal;
    /* font-weight: Light */
    font-weight: 300;
}


@font-face {
    font-family: SUSE;
    src: url(../../assets/polices/SUSE-Regular.ttf);
    font-style: normal;
    /* font-weight: Normal */
    font-weight: 400;
}

@font-face {
    font-family: SUSE;
    src: url(../../assets/polices/SUSE-Medium.ttf);
    font-style: normal;
    /* font-weight: Medium */
    font-weight: 500;
}



@font-face {
    font-family: SUSE;
    src: url(../../assets/polices/SUSE-SemiBold.ttf);
    font-style: normal;
    /* font-weight: Semibold */
    font-weight: 600;
}


@font-face {
    font-family: SUSE;
    src: url(../../assets/polices/SUSE-Bold.ttf);
    font-style: normal;
    /* font-weight: Bold */
    font-weight: 700;
}


@font-face {
    font-family: SUSE;
    src: url(../../assets/polices/SUSE-ExtraBold.ttf);
    font-style: normal;

    /* font-weight: ExtraBold */
    font-weight: 800;
}

/* fin polices */

/* palette */
:root {
    /*  Maison */
    --vert: #11241e;
    --vertT: #11241e33;
    --vert1: #144232;
    --vertT1: #14423233;
    --vertT2: #11241eaa;

    --vertC: #ced7d4;
    /* charte Comptoir */
    --jauneCB: #ffc666;
    --marronClairCB: #c16e47;
    --marronFonceCB: #95452a;
    --vertCB: #134B1C;
    /* utilisés souvent */

    --typo: var(--blancCasse);
    --typoSelect: var(--marronClairCB);
    --typoTitMenu: var(--jauneCB);

    --BgPop: var(--vertT2);
    --FgPop: var(--typo);

    --fondTit1: #fbfcfa11;

    --Tr: #00000000;
    --jauneMB: #ffec78;
    --moutarde: #f6ca81;
    --orange: #ea8f36;
    --bleuCiel: #B2ABF2;
    --orangeT: #ea9036d8;
    --orangeTT: #ea903688;
    --noir: #1e1e24;
    --rouge: #92140c;
    --blanc: #ffffff;
    --blancCasse: #dddddd;
    --grisClair: #b6b6b6;
    --decoLogo: #d45500b0;
    --bleuLogo: #00004c;
    --gris: rgb(185, 185, 185);
    --T: #00000000;
    --test: #072e01;
    --fond: var(--vert);

    --veganTagBg: #fbfcfa77;
    --veganTagTy: var(--vert);

    --alergTagBg: #e7bf8a11;
    --alergTagTy: #e7bf8a;

    --uniteTagBg: #fbfcfa80;
    --uniteTagTy: var(--vert);

    --quantitTagBg: #fbfcfa77;
    --quantitTagTy: var(--vert);

    --euroTagBg: #ffffff99;
    --euroTagTy: var(--vert);

    --prixTagBg: #fbfcfa77;
    --prixTagTy: var(--typo);

    --legendeTagBg: #fbfcfa22;
    --legendeTagTy: var(--typo);

    --produitTagBg: #fbfcfa11;
    --produitTagTy: var(--typo);

    --partenaireTagBg: #fbfcfa22;
    --partenaireTagTy: var(--typo);



    --bulma-primary-h: 159deg;
    --bulma-primary-s: 70%;
    --bulma-primary-l: 26%;
    --bulma-link-h: 38deg;
    --bulma-link-s: 100%;
    --bulma-link-l: 70%;
    --bulma-family-primary: SUSE, Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
    --bulma-family-secondary: SUSE, Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
    --bulma-body-family: SUSE, Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
    --bulma-subtitle-color: red;
    --bulma-text: var(--typo);
    --bulma-title-color: var(--typo);


    --width-bloccarte: 72vw;

}

/*pour l'usage : propriété: var(--orange); */

/* fin palette */

#test {
    display: none;
    width: 50px;
    height: 50px;
    background-color: red;
    position: fixed;
    bottom: 400px;
    left: 5px;
}

html {
    scroll-behavior: smooth;
    background: var(--fond);
}

.DEADBEEF {
    background-color: rebeccapurple !important;
}

.icon {
    --bulma-icon-dimensions-small: 2rem;
}


.exposant {
    font-variant-position: super;
}


.icone {
    font-family: SegoeIcons;
    font-weight: 400;
    font-size: 1.1em;
}

.is-typoSelect {
    color: var(--typoSelect);
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: inherit;
    text-decoration: none;
}

/* pour video de fond et logo */

/*#background-video {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    top: 0px;
    left: 0px;
    z-index: 0;
  }*/

/* div de superpostion des deux logos */

.respire {
    width: 76%;
    margin-left: calc(12%);
}


/* bouton page accueil */
#accueil button.est-distant {
    margin-top: calc(var(--bulma-button-padding-vertical) - var(--bulma-button-border-width));
    margin-bottom: calc(var(--bulma-button-padding-vertical) - var(--bulma-button-border-width));
}



/* logo page accueil */
#logoAccueil svg {
    width: 69%;
    opacity: 0.81;
    stroke-opacity: 1;
    stroke-width: 4;
    stroke: #fff;
}

#logoAccueil svg .fini {
    stroke-dashoffset: 0;
}

#logoMbRond {
    max-width: 128px;
    height: auto;
    animation: loading-spinner 1.82s linear 1
}

/* anim platine 33t */

#LogoMBRond:hover {
    animation: loading-spinner 1.82s linear 2
}


@keyframes loading-spinner {
    from {
        transform: rotate(0deg);
        transform-origin: center;
    }

    to {
        transform: rotate(360deg);
        transform-origin: center;
    }
}

/* fin anim Logo rond */

#baseline {
    color: whitesmoke;
    font-size: 1.25em;
    font-weight: 600;
    letter-spacing: 0.13em;
}


#sousbaseline {
    color: whitesmoke;
    font-size: 1em;
    font-weight: 300;
    letter-spacing: 0.1em;
}

#piedAccueil {
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
}

#piedAccueil .coteBas {
    width: 100px;
    margin: 9px;
}

#logoBro #traits {
    fill: black;
    stroke: black;
    stroke-width: 0.1px;
}

#logoBro #fond {
    fill: white;
    opacity: 0.8;
}

.bg-img {

    background-image: url(../images/fondAccueilPaysage2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: var(--fond);
    /* filter: grayscale(60%); */
}

/* fin logo page accueil */

/* message flash */
/* message flash */

article:has(#POP) {
    position: fixed;
    z-index: 69;
    width: 60vw;
    top: 10vh;
    left: 20vw;
    animation:
        fadein 1s ease-in-out forwards;
}

#POP {
    background-color: var(--BgPop);
    color: var(--FgPop);
    border-left: 16px solid var(--FgPop);
}

#POP.is-alerte {
    animation-delay: 4s;
    animation-name: BlinkAlerte;
    animation-duration: 3s;
    animation-timing-function: step-end;
    animation-iteration-count: infinite;
    /* add 'border-color: transparent' if you wish no border to show initially */
}

@keyframes fadein {
    from {
        top: -100px;
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes expand {
    from {
        min-width: 30px
    }

    to {
        min-width: 200px
    }
}

@keyframes stay {
    0% {
        min-width: 200px
    }

    100% {
        min-width: 170px
    }
}

@keyframes shrink {
    from {
        min-width: 170px;
    }

    to {
        min-width: 30px;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.4;
    }
}




@-webkit-keyframes BlinkAlerte {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: initial;
    }
}

@keyframes BlinkAlerte {

    from,
    to {
        border-color: transparent;
    }

    10% {
        border-color: initial;
    }
}

#flash article {
    position: fixed;
    left: 40vw;
    width: 20vw;
    visibility: visible;
    animation:
        fadein 1s ease-in-out forwards,
        fadeout 1s ease-in-out 4s forwards;
}





#POP>span:first-child {
    font-weight: 700;
}

/* NAVBAR elements persos*/

.navbar {
    position: absolute;
    width: 100%;
    background-color: #FFFFFF00;
    /*
    fmix-blend-mode: normal;
    fmix-blend-mode: multiply;
    fmix-blend-mode: screen;
    fmix-blend-mode: overlay;
    fmix-blend-mode: darken;
    fmix-blend-mode: lighten;
    fmix-blend-mode: color-dodge;
    fmix-blend-mode: color-burn;
    fmix-blend-mode: hard-light;
    fmix-blend-mode: soft-light;
    mix-blend-mode: difference; 
    fmix-blend-mode: exclusion;
    fmix-blend-mode: hue;
    fmix-blend-mode: saturation;
    fmix-blend-mode: color;
    fmix-blend-mode: luminosity;*/
}

a.navbar-item:hover,
a.navbar-item:active,
a.navbar-item:visited,
a.navbar-item {
    background-color: var(--Tr);
}

.navbar-brand {
    padding-left: 5vw;
}

.navbar-brand .navbar-item {
    min-width: 0;
    width: 20vw;
}

.js-pages-item:nth-child(n+3) {
    padding-top: 20px;
}

#logoNavbar.is-accueil {
    display: none;
}

#logoNavbar {
    fill: none;
    stroke: var(--typo);
    stroke-width: 3;
    max-height: unset;
    stroke-dasharray: none;
    stroke-linejoin: round;
    stroke-linecap: round;
}

#logoContact {
    fill: var(--typo);
    stroke: var(--typo);
    stroke-width: 3;
    max-height: unset;
}

#navbar .navbar-menu {
    padding: 60px 50px;
}


#navbar .navbar-item li a {
    text-align: right;
}

#navbar .navbar-item li.is-active a::before {
    content: "·";
    padding-right: 0.9em;
}

#navbar .navbar-item li.is-active a {
    font-weight: 500;
    color: var(--jauneCB);
}

/*
#navbar .navbar-item li.is-active a::before {
    content: "< ";
    font-weight: 500;
}

#navbar .navbar-item li.is-active a::after {
    content: " <";
    font-weight: 500;
}
*/

/*
#navbar .menu-list:not(.is-accueil) li:not(.is-active):not(#LVToggle) a {
    display: none;
}
*/

#LVToggle[Langue="FR"] .F {
    font-size: 1.1em;
}

#LVToggle[Langue="EN"] .E {
    font-size: 1.1em;
}



.menu {
    font-family: SUSE;
    font-weight: 500;
    font-size: 0.9em;
}

.menu,
.menu-label,
.menu-list,
.menu,
.menu-list a,
.menu a {
    background-color: var(--T);
    color: var(--typo);
    opacity: 1;
}

.menu-list,
.menu-list a {
    color: var(--blancCasse);
    opacity: 1;
}

.menu a:hover::before {
    content: "·";
    color: var(--jauneCB);
    padding-right: 1em;
}


/* NAVBAR burger elements persos*/

.navbar-burger span {
    background-color: var(--blancCasse);
    height: 0.1em;
    width: 1.75em;
}

#topBtn.is-active+.navbar-burger span {
    background-color: var(--vert1);
}




.navbar-burger span:nth-child(1),
.navbar-burger span:nth-child(2) {
    width: 1.5em;
}

.navbar-burger:hover {
    background-color: hsla(var(--bulma-burger-h), var(--bulma-burger-s), var(--bulma-burger-l), 0.1);
}

.navbar-burger:active {
    background-color: hsla(var(--bulma-burger-h), var(--bulma-burger-s), var(--bulma-burger-l), 0.2);
}

.navbar-burger.is-active span:nth-child(1) {
    transform: rotate(-30deg);
    width: 1.75em;
}

.navbar-burger.is-active span:nth-child(2) {
    transform: rotate(30deg);
    width: 1.75em;
}

.navbar-burger.is-active span:nth-child(3),
.navbar-burger.is-active span:nth-child(4) {
    opacity: 0;
}

/*fin NAVBAR burger */

.is-blur {
    filter: blur(2px) grayscale(60%);
}




/* fin NAVBAR elements persos*/

#contact .tags {
    justify-content: end;
    align-items: end;
}



#contact {
    background-color: var(--vert);
    /*background-image: url(../images/exterieur.jpg);*/
    background-size: cover;
    background-position: bottom;
    /*normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity*/
}



/* Pour Bascule LV */
/* bouton bascule LV */

.switch_box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    position: relative;
}

input[type="checkbox"].switch_3 {
    appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: alias;
    outline: 0;
    z-index: 1;
}

svg.checkbox .outer-ring {
    stroke-dasharray: 300;
    stroke-dashoffset: 400;
    animation: resetRing 2s ease-out forwards;
}

input[type="checkbox"].switch_3:checked+svg.checkbox .outer-ring {
    animation: animateRing 2s ease-out forwards;
}

input[type="checkbox"].switch_3:checked+svg.checkbox .is_checked {
    opacity: 1;
    transform: translateX(0);
    transition: all 1s;
}

input[type="checkbox"].switch_3:checked+svg.checkbox .is_unchecked {
    opacity: 0;
    transform: translateX(-20%);
    transition: all 1s;
}

svg.checkbox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;

    cursor: alias;
}

svg.checkbox .is_checked {
    opacity: 0;
    fill: var(--bleuCiel);
    transform: translateX(20%);
    transition: all 2s;
}

svg.checkbox .is_unchecked {
    opacity: 1;
    fill: var(--bleuCiel);
    transform: translateX(0%);
    transition: all 1s;
}

@keyframes animateRing {
    to {
        stroke-dashoffset: 0;
        stroke: var(--bleuCiel);
    }
}

@keyframes resetRing {
    to {
        stroke-dashoffset: 0;
        stroke: var(--bleuCiel);
    }
}

@keyframes flashRing {
    to {
        stroke: var(--rouge);
    }
}

/* fin bouton bascule LV */
/* notification bascule LV  */

#toast {
    font-family: DenkOne, Arial, Helvetica, sans-serif;
    visibility: hidden;
    max-width: 50px;
    height: 50px;
    /*margin-left: -125px;*/
    margin: auto;
    background-color: var(--decoLogo);
    color: #fff;
    text-align: center;
    border-radius: 20px 0px 20px 20px;
    position: fixed;
    z-index: 3;
    right: 150px;
    top: 120px;
    font-size: 1.5rem;
    white-space: nowrap;
    padding: 0%;
}

#toast #Accroche {
    width: 50px;
    height: 50px;
    padding-top: 7px;
    padding-bottom: 7px;
    float: left;
    box-sizing: border-box;
    border-radius: 20px 0px 20px 20px;
    background-color: #2e2e2e71;
    color: var(--bleuCiel);
}

#toast #desc {
    color: var(--bleuCiel);
    padding-top: 7px;
    padding-bottom: 7px;
    overflow: hidden;
    white-space: nowrap;
}

#toast.show {
    visibility: visible;
    animation: popFromTR 0.5s ease-out forwards,
        expand 1s ease-out 0.5s forwards,
        stay 3s linear 1.5s forwards,
        shrink 0.5s ease-in-out 4.5s forwards,
        fadeout 0.5s ease-in-out 5s forwards;
}

@keyframes popFromTR {
    0% {
        transform: translate(50%, -50%) scale(0.2, 0.2);
        opacity: 0;
    }

    100% {
        transform: translate(0%, -0%) scale(1, 1);
        opacity: 1;
    }
}



/* fin notification bascule LV  */
/* fin Pour Bascule LV */

/* To Top Bouton */
/*css par id pour TopBtn*/

#toTopBtn {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed/sticky position */
    bottom: 10px;
    /* Place the button at the bottom of the page */
    right: 20px;
    /* Place the button 30px from the right */
    z-index: 69;
    /* Make sure it does not overlap */
    width: 32px;
    height: 32px;
    border-right: 2px solid #219EBC;
    border-top: 2px solid #219EBC;
    border-left: 0px solid #023047;
    border-bottom: 0px solid #023047;
    border-radius: 3px;
    transform: rotate(-45deg);
    outline: none;
    /* Remove outline */
    background-color: #ffffff00;
    /* Set a background color */
    color: #ffffff00;
    /* Text color */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 1px;
    /* Some padding */
    font-size: 0.5rem;
    /* Increase font size */
}

#toTopBtn:hover {
    color: #219EBC;
    /* Text color */
}

@keyframes toTopBtnAnim {
    0% {
        transform: rotate(-45deg) translate(-10px, 10px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
    }
}

/* fin To Top Bouton */

/* pour NextBtn  (Invit scroll bouton)*/
#toNextBtn {
    display: inherit;
    z-index: 69;
    opacity: 0;
    padding-top: 2px;
    position: absolute;
    bottom: 10%;
    left: 50%;
    width: 48px;
    height: 48px;
    border-left: 3px solid var(--orangeT);
    border-bottom: 3px solid var(--orangeT);
    border-top: 0px solid #023047;
    border-right: 0px solid #023047;
    border-radius: 3px;
    transform: rotate(-45deg);
    animation: toNextBtnAnim 2s linear 1s infinite;
    box-sizing: border-box;
    background-color: #ffffff00;
    /* Set a background color */
    color: #ffffff00;
    /* Text color */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 1px;
    /* Some padding */
    font-size: 0.5rem;
    /* Increase font size */
}

@keyframes toNextBtnAnim {
    0% {
        transform: rotate(-45deg) translate(0, 0);
        border-left: 3px solid #ffdd87;
        border-bottom: 3px solid #ffdd87;
        opacity: 0;
    }

    60% {
        border-left: 3px solid var(--orangeT);
        border-bottom: 3px solid var(--orangeT);
        opacity: 1;
    }

    100% {
        transform: rotate(-45deg) translate(-20px, 20px);

        opacity: 0;
    }
}

/* fin pour NextBtn  (Invit scroll bouton)*/

/*   bouton anim sur hover par ex pour mail ou  tél */

button.AnimBouton {
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    background-color: var(--T);
    color: var(--typo);
    border: none;
    text-align: center;
    padding: 4px 30px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

button.AnimBouton span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

button.AnimBouton span:after {
    content: attr(after);
    position: absolute;
    opacity: 0;
    top: 0;
    right: -30px;
    transition: 0.8s;
}

button.AnimBouton:hover span {
    padding-right: 30px;
}

button.AnimBouton:hover span:after {
    opacity: 1;
    right: 0;
}

/*   fin bouton anim sur hover par ex pour mail ou  tél */

/* modal total pour mentions légales */

.modal-background {
    background-color: var(--fond);
}

.modal-content {
    color: white;
}

/* fin modal total pour mentions légales */

/* dropdown pour menu zenchef réservation */
.dropdown {
    width: 100%;
}

.dropdown.is-active .dropdown-menu,
.dropdown.is-hoverable:hover .dropdown-menu {
    width: 100%;
}

.dropdown-content {
    background-color: var(--fond);
    border-radius: 2px;

    padding: 1px;
}

.dropdown-item {
    padding: 0px;
}

.dropdown-content {
    background-color: #bbbbbb00;
    padding-bottom: 60px;
    box-shadow: none;
}


#zc {
    width: 1em;
    fill: var(--jauneCB);
    stroke: var(--Tr);
    stroke-opacity: 1;
    stroke-width: 0;
    stroke-dasharray: none"

}

#reservation .subtitle.is-3 {
    border: solid;
    border-color: var(--fond);
    border-width: 1px 0 0 0;
}

#reservation .column {
    padding-left: 25px;
    padding-right: 25px;
}

#reservation .subtitle.is-5 {
    line-height: 169%;
}


/* fin dropdown pour menu zenchef réservation */




.title {
    font-family: Higuen;
    text-align: center;
    padding-top: 6em;
    padding-bottom: 1em;
    color: var(--typo);
}


.subtitle {
    font-family: SUSE;
    padding-top: 1em;
}




.subtitle.is-4 {
    font-weight: 300;
    padding-top: 1em;
}

.separation {
    background-color: var(--Tr);
    border: none;
    display: block;
    height: 1px;
    margin-top: 0.2rem;
    margin-bottom: 0rem;
    margin-left: 6rem;
    margin-right: 6rem;
}

hr.fin {
    background-color: var(--typo);
    border: none;
    display: block;
    height: 1px;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    margin-left: 33%;
    margin-right: 33%;
}



button.is-primary:not(.is-light) {
    background-color: var(--vertT);
    color: var(--typo);
}


.svp::after {
    font-family: "Material Design Icons";
    font-size: 1.3rem;
    content: "\F1739";
    padding-left: 10px;
}


.comm {
    font-style: italic;
    font-size: 1rem;
    font-weight: 200;
}

.text {
    padding: 3% 1%;
}

/* bulma message */

.message {
    --bulma-message-s: 53%;
    --bulma-message-background-l: 100%;
    --bulma-message-border-width: 0.4em;
    --bulma-message-body-border-width: 0 0 0 2px;
    --bulma-message-body-radius: 0.15rem;
}


#vuentendu .message a:not(.button):not(.tag):not(.dropdown-item) {
    color: currentColor;
    text-decoration: none;
}


#vuentendu .message-header a {
    background-color: var(--fondTit1);
    font-size: 1.1rem;
    text-decoration: none;
}

#vuentendu .message-body span {
    color: var(--blancCasse);
}

#vuentendu .message .is-note {
    font-size: 1rem;
    font-weight: 300;
}


#vuentendu .cell {
    padding: 30px;

}


#vuentendu .cell:hover {
    border-inline-start-color: var(--typo);
}

#vuentendu .cell:hover .message-header {
    color: var(--typoSelect);
    filter: unset;
}


#vuentendu .cell:hover .message-body span {
    color: unset;
}



#vuentendu .message-body,
.message-header {
    color: var(--typo);
    /*background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;  si fond voir ci dessous*/
    height: 30vh;
    border-inline-start-color: var(--gris);
    border-inline-start-width: 1px;
}

#vuentendu .message-body {
    background-color: var(--Tr);
    height: 30vh;
    border-inline-start-style: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ffc66611 #22222200;
}



#vuentendu .message-header {
    background-color: var(--Tr);
    color: var(--typoTitMenu);
    text-align: center;
    height: 9vh;
    font-size: 1.5rem;
    font-weight: 300;
    justify-content: space-evenly;
}


.tag.is-produit {
    background-color: var(--produitTagBg);
    color: var(--produitTagTy);
    border-left-style: solid;
    border-left-color: var(--typo);
    border-width: 1px;
}

.tag.is-partenaire {
    background-color: var(--partenaireTagBg);
    color: var(--partenaireTagTy);
    border-right-style: solid;
    border-right-color: var(--typo);
    border-width: 1px;
}




#histoire .image {
    filter: grayscale(20%);
}

#histoire .rempli {
    font-size: 1.1rem;
}

#proposition {
    padding-bottom: 1em;
}


/* declencheurs pour rubriques de la carte*/

#declencheurs {
    background-color: var(--Tr);
    color: var(--typoTitMenu);
    border-radius: 2px;
    font-family: SUSE;
    font-weight: 300;
    font-size: 1.4em;
    border-radius: 4px 4px 0px 0px;
    padding-top: 2em;
}



#declencheurs a {
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 10px;
}

#declencheurs .column:hover {
    color: var(--typoSelect);
}

#declencheurs .js-tabs-nav.is-active {
    font-weight: 300;
}

#declencheurs .js-tabs-nav.is-active::before,
#declencheurs .js-tabs-nav.is-active::after {
    content: "·";
    padding-left: 0.4em;
    padding-right: 0.4em;
}

.page-is-off,
.is-off,
.obfusc {
    display: none;
}


#declencheurs .js-tabs-nav {
    padding: 3px 20px 3px 20px;
}


#declencheurBoissons {

    background-image: url("../img/boissons.png");
    background-position: 90% 50%;
    background-repeat: no-repeat;
    background-blend-mode: luminosity;
    background-size: 22%;
    /* ou contain ou cover */
}

#declencheurVins {

    background-image: url("../img/vins.png");
    background-position: 100% 45%;
    background-repeat: no-repeat;
    background-blend-mode: luminosity;
    background-size: 35%;
    /* ou contain ou cover */
}

#declencheurPlats {

    background-image: url("../img/plats.png");
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-blend-mode: luminosity;
    background-size: 35%;
    /* ou contain ou cover */

}

#declencheurBrunch {

    background-image: url("../img/brunch.png");
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-blend-mode: luminosity;
    background-size: 35%;
    /* ou contain ou cover */
}


.tag {
    color: var(--typo);
}

.tag.is-vegan,
.button.is-vegan {
    background-color: var(--veganTagBg);
    color: var(--veganTagTy);
}

.tag.is-alerg,
.button.is-alerg {
    background-color: var(--alergTagBg);
    color: var(--alergTagTy);
}

.tag.is-unite,
.button.is-unite {
    background-color: var(--uniteTagBg);
    color: var(--uniteTagTy);
}

.tag.is-quantit,
.button.is-quantit {
    background-color: var(--quantitTagBg);
    color: var(--quantitTagTy);
}

.tag.is-euro,
.button.is-euro {
    background-color: var(--euroTagBg);
    color: var(--euroTagTy);
}

.tag.is-prix,
.button.is-prix {
    background-color: var(--prixTagBg);
    color: var(--prixTagTy);
}


span.is-prix,
span.is-euro {
    color: var(--typo);
    font-weight: 300;
}

.tag.is-legende,
.button.is-legende {
    background-color: var(--legendeTagBg);
    color: var(--legendeTagTy);
    font-style: italic;
}


#bloccarte {
    width: var(--width-bloccarte);
    margin-left: calc((100% - var(--width-bloccarte)) / 2);
}

#carte {
    padding-left: 15px;
    padding-right: 15px;
}

#carte .tit {
    color: var(--typo);
    font-size: 1.4rem;
}

#carte .level {
    justify-content: space-around;
    align-items: center;
}



/* spécifique à l'affichage carte level-left */
#carte .level-left {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--typo);
    flex-basis: content;
    flex-grow: 0;
    flex-shrink: 1;
}

#carte .level-left .tag {
    padding: 3px;
    margin-left: 3px;
}

#carte .level-left .tit {
    font-weight: 100;
}

#carte .level-left .level-item {
    text-align: center;
}

#carte .level-left .level-item.tit1 {
    align-self: center;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--typoSelect);
    padding-top: 2rem;
}


#carte .level-left .level-item.tit2 {
    align-self: center;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--typoTitMenu);
    padding-top: 2rem;
}

#carte .level-left .level-item.tit3 {
    align-self: center;
    font-size: 1.2rem;
    font-weight: 300;
}



/* spécifique à l'affichage carte level-right */

#carte .level-right {
    padding-right: 1rem;
    width: 100%;
    flex-basis: content;
    flex-direction: row;
}

#carte .level-right .tag {
    padding: 15px;
}

#carte .level-right .tags {
    margin: 0;
}

#carte .level-right .tag {
    font-family: Crusoe;
    font-size: 0.9rem;
    padding-left: 0.1em;
    padding-right: 0.1em;
}

#carte .level-right .tag.is-primary:not(.is-light) {
    color: whitesmoke;

}



/* spécifique à l'affichage carte level-item */

#carte .level-item {
    flex-shrink: 1;
}


#carte .level-item.tit1::before,
.level-item.tit1::after {
    content: "/";
    padding-left: 0.7em;
    padding-right: 0.7em;
}

#carte .level-item.tit2::before,
.level-item.tit2::after {
    content: "\002013";
    padding-left: 0.7em;
    padding-right: 0.7em;
}


#carte .column.is-off {
    display: none;
}


#carte .level:not(:last-child) {
    margin: 9px;
}


#carte .column.button {
    display: none;
}

#carte .grid a {
    font-family: Crusoe;
    color: gray;
}

#carte .grid .cell a:hover {
    border-bottom-color: var(--typo);
}


#carte .grid .cell.is-active a {
    color: var(--typo);
    border-bottom-color: var(--typo);
}

#carte .is-white {
    background-color: #ececec;
}





.input,
.textarea {
    background-color: #ffffff44;
    color: var(--typo);
}

.label {
    color: var(--typo);
    font-weight: 300;
}


.tag.is-social {
    background-color: var(--legendeTagBg);
    color: var(--typo);
}

.tag.is-social:hover {
    color: var(--grisClair);
}


#piedDePage {
    margin-top: 21px;
    margin-bottom: 21px;
}

.carteGgl {
    filter: grayscale(89%);
}

.aereLR {
    padding-left: 11%;
    padding-right: 11%
}


#social {
    padding: 10px 60.8px;
    text-align: center;
}


#social .subtitle.is-6 {
    color: var(--typoAccueil);
    font-weight: 500;
    font-size: 1.2rem;
}


/* Définition du carousel */
.carousel {
    position: relative;
    height: 100%;
    /* Le carousel est positionné relativement à son parent */
}

/* Définition de l'élément contenant les diapositives */
.carousel-inner {
    display: flex;
    /* Affiche les éléments en ligne */
    overflow: hidden;
    /* Cache les éléments qui dépassent */
    height: 95vh;
    /* Hauteur égale à 95% de la hauteur de la vue */
    flex-wrap: nowrap;
    /* Empêche les éléments de se placer sur plusieurs lignes */
}

/* Définition des diapositives */
.slide {
    flex: 0 0 100%;
    /* Largeur de chaque diapositive est de 100% */
    height: 100%;
    /* Hauteur de chaque diapositive est de 100% */
    transition: .2s ease-in-out;
    /* Ajout d'une animation douce pour la transition entre les diapositives */
    overflow: scroll;
    text-align: center;
}

/* Définition de l'affichage de l'image de chaque diapositive */
.slide img {
    width: 98%;
    /* Largeur de l'image est de 100% */
    /*  height: 100%;
    Hauteur de l'image est de 100% */
    object-fit: contain;
    /* Couvre tout l'espace disponible */
}

/* Définition des boutons de contrôle du carousel */


.carousel-controls * {
    position: absolute;
    top: 10vh;
    color: var(--typo);
    padding: 20px;
}

.carousel-controls *:hover {
    color: var(--vertT);
}


.carousel-controls #prev {
    left: 10px;
    text-align: right;
}

.carousel-controls #next {
    right: 10px;
    text-align: left;
}



/* Définition des points de contrôle */
.carousel-dots {
    position: absolute;
    width: 90%;
    /* Les points sont absolument positionnés */
    z-index: 2;
    /* Ils sont placés au-dessus des autres éléments */
    right: 5%;
    /* La d10px;
    /* La distance à droite est de 50% */
    top: 0px;
    /*La distance du bas est de 10% */
    display: flex;
    /* Affiche les points en ligne */
    justify-content: space-between;
    /* Centrage des points */
}

/* Style des points de contrôle */
.carousel-dots .dot {
    width: 10%;
    height: content;
    border-radius: 1px;
    cursor: pointer;

    font-size: 1.1vw;
    /* Curseur en forme de main pour un meilleur contrôle */
}

/* Styles pour les points de navigation du carrousel */
.carousel-dots .active {
    /* Border de 10px pour le point actif */
    background-color: var(--vertC);
    /* !important permet de surcharger les autres styles éventuels */
}

.carousel-dots .inactive {
    /* Border de 10px pour les points inactifs */
    background-color: whitesmoke !important;
}

/* fin carousel   */



/* ////////////////////////////////////////////////////////////////////////////////////////////////  */
/* ////////////////////////////////         règles uniquement non petits écrans    ////////////////  */
/* ////////////////////////////////////////////////////////////////////////////////////////////////  */

@media screen and (min-width: 769px) {

    #declencheurs.colle {
        position: fixed;
        background-color: #11241eee;
        justify-content: space-around;
        padding-top: 0rem;
        margin-top: 0rem;
        top: 0;
        display: flex;
        width: var(--width-bloccarte);
    }
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////  */
/* ////////////////////////////////         règles lors passage sur petits écrans  ////////////////  */
/* ////////////////////////////////////////////////////////////////////////////////////////////////  */


@media screen and (max-width: 768px) {

    /* pour smartphones */

    /* test visu media */
    #test {
        background-color: blue;
    }


    .aereLR {
        padding-left: 3%;
        padding-right: 3%
    }

    #declencheurs {
        background-color: #2a9d8f22;
        padding-top: 0em;
    }



    #carte .level-left .level-item.tit2 {
        padding-top: 1.1rem;
    }

    #vuentendu .cell {
        padding: 2%;

    }

    /*  remise en forme bas de page */
    #social .subtitle {
        color: white;
    }

    #piedAccueil {
        display: inline-block;

    }

    #piedAccueil .coteBasD {
        display: none;
    }

    #piedAccueil .coteBasG {
        position: fixed;
        bottom: 2px;
        width: 20%;
    }


    #baseline {
        color: whitesmoke;
        font-size: 1em;
        font-weight: 500;
        letter-spacing: 0.1em;
    }

    #sousbaseline {
        color: whitesmoke;
        font-size: 0.69em;
        font-weight: 300;
        letter-spacing: 0.1em;
    }


    .respire {
        width: 96%;
        margin-left: calc(2%);
    }

    .subtitle.is-4 {
        font-size: 1.2rem;
    }


    #bloccarte {
        width: 92%;
        margin-left: 4%;

    }


    #navbar .menu-list:not(.is-accueil) li:not(.is-active):not(#LVToggle) a {
        display: inherit;
    }

    #logoAccueil svg {
        width: 99%;
    }



    .text {
        padding: 3% 7%;
    }

    .navbar {
        width: 100%;
        background-color: #FFFFFF00;
        mix-blend-mode: normal;
    }

    .js-pages-item:nth-child(n+3) {
        padding-top: 50px;
    }

    .navbar-menu {
        background-color: #14423288;
    }

    .menu,
    .menu-label,
    .menu-list,
    .menu,
    .menu-list a,
    .menu a {
        background-color: #FFFFFF00;
        color: #fff;
        opacity: 0.93;
        padding-top: 4vh;
    }

    #navbar .navbar-menu.is-active {
        padding: 30px 10px;
    }

    .navbar-brand .navbar-item {
        width: 33vw;
        padding-top: 20px;
        padding-left: 0px;
        padding-right: 0px;
    }

    #logoNavbar {
        fill: none;
        stroke: var(--typo);
        max-height: unset;
    }

    #carte {
        padding-left: 1px;
        padding-right: 1px;
    }

    #vuentendu .message-body span {
        display: initial;
        opacity: 69%;
    }


    #reservation .column {
        padding-left: 2px;
        padding-right: 2px;
    }


    #contact .tags {
        justify-content: center;
        align-items: center;
    }

    .title {
        padding-top: 1em;
        padding-bottom: 1em;
    }


}


@media screen and (min-width: 1408px) {

    /* pour fullhd */
    #test {
        background-color: purple;
    }


    #histoire .rempli {
        font-size: 1.3rem;
    }
}