@view-transition {
    navigation: auto;
}

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}a,button,input,select,textarea,label{-webkit-tap-highlight-color:transparent}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/titillium-web-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/titillium-web-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/titillium-web-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/titillium-web-700.woff2') format('woff2');
}

:root {
    --header-height: 4rem;

    --spacing-global-y: clamp(1.5rem, 1rem + 2vw, 3rem);
   
    --color-light: #f5f5f5;
    --color-dark: #313131;
    --color-main: #73c8df;
    
    --font-size-normal: clamp(1rem, 1rem + 0.5vw, 1.6rem);
    --font-size-small: clamp(0.85rem, 0.5rem + 0.5vw, 1.6rem);
    --h1-font-size: clamp(1.4rem, 1rem + 1vw, 2rem);
    --h2-font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem);
}

body {
    font-family: 'Titillium Web', sans-serif;
    color: var(--color-light);
    background-color: var(--color-dark);
}

header {
    height: var(--header-height);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;

    
    & .logo {
        display: flex;
        transform: translateY(6px);
        z-index: 10;
        

        & img {
            height: calc(var(--header-height) - 2 * 1rem);
            width: auto;

        }

        @media (pointer: fine) {
            &:hover {
                transform: translateY(6px) scale(1.05);
            }
        }
    }
}

#btn-menu {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    cursor: pointer;
    border-radius: 8px;
    padding: 0.5rem;
    width: calc(var(--header-height) - 2 * 1rem);
    height: calc(var(--header-height) - 2 * 1rem);
    
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--color-light);
    color: var(--color-dark);
    border: none;

    transform-origin: center;

    @media (pointer: fine) {
        &:hover {
            transform: scale(1.06);
        }
    }
}

nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    padding-top: var(--header-height);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 1rem;
    z-index: 1;

    background-color: var(--color-main);
    opacity: 1;

    transition: opacity 0.3s, visibility 0.3s, translate 0.3s;

    & a {
        font-size: clamp(1.5rem, 1rem + 1vw, 3rem);
        font-weight: 700;
        color: var(--color-light);
        text-decoration: none;
        
        @media (pointer: fine) {
            &:hover {
                transform: scaleX(1.05);

                &::before {
                    content: '~ '
                }
            }
        }
    }
}

nav[data-open="false"] {
    opacity: 0;
    visibility: hidden;
    translate: 0 -100%;
}

.bg {
    position: absolute;
    inset: 0;
    background-image: url('img/vache.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
    min-height: calc(100svh - var(--header-height));
}

main {
    min-height: calc( 100svh - var(--header-height));
}

section {
    width: min(100% - 3.2rem, 1200px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: var(--spacing-global-y);
}

.horaires {
    padding: 0.5rem 1rem;
    width: fit-content;
    font-size: var(--font-size-small);
    background-color: var(--color-dark);
    color: var(--color-light);
    border-radius: 4px;

    margin-bottom: var(--spacing-global-y);
}

.horaires-statut[data-ouvert="true"] {
    color: #a9c938;
    font-weight: 600;
}

.horaires-statut[data-ouvert="false"] {
    opacity: 0.8;
}

.horaires:has(.horaires-statut[data-ouvert="true"]) {
    border: 2px solid rgb(64, 128, 64);
}

.horaires:has(.horaires-statut[data-ouvert="false"]) {
    border: 2px solid rgb(255, 127, 127);
}

h1, h2 {
    font-size: var(--h1-font-size);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1em;
}

h1::before {
    content: '~ ';
    color: var(--color-main);
    font-weight: 700;
}

h1::after {
    content: ' ~';
    color: var(--color-main);
    font-weight: 700;
}

p {
    font-size: var(--font-size-small);
    margin-bottom: var(--spacing-global-y);

    max-width: 65ch;
}

dl {
    font-size: var(--font-size-small);
    margin-bottom: var(--spacing-global-y);
    text-align: center;

    & dt {
        text-decoration: underline;
        margin-bottom: 1em;
    }
}

.intro {
    padding: clamp(1rem, 1rem + 0.5vw, 2rem);
    border-radius: 8px;
    color: var(--color-dark);
    background-color: var(--color-light);
}

.home-link {
    font-size: var(--font-size-normal);
    padding: 0.6rem 1rem;
    font-weight: 700;
    text-decoration: none;
    background-color: var(--color-light);
    color: var(--color-dark);
    border-bottom: 4px solid var(--color-main) ;
    border-radius: 4px;
    margin-bottom: 1rem;

    @media (pointer: fine) {
        &:hover {
            transform: translateY(2px);
            border-bottom: 2px solid var(--color-main) ;
            margin-bottom: calc(1rem + 2px);
        }
    }

    &:active {
        transform: translateY(4px);
        border-bottom: 0px solid var(--color-main) ;
        margin-bottom: calc(1rem + 4px);
    }
}

.magasin {
    & .logo-ochamp {
        max-width: 32%;
        background-color: var(--color-light);
        padding: clamp(1rem, 2vw, 1.5rem);
        margin-bottom: 1rem;
        border-radius: 4px;
    }

    & a {
        color:var(--color-light);
        margin-bottom: clamp(1rem, 2vw, 1.5rem);
        font-size: var(--font-size-normal);
    }
}

.galerie-magasin {
    column-count: 2;
    column-gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: var(--spacing-global-y);
    
    & img {
        margin-bottom: clamp(1rem, 2vw, 1.5rem);
        border-radius: 4px;

    }
}


/* produits */
.produits {
    column-count: 1;
    column-gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: var(--spacing-global-y);

    & .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        break-inside: avoid;
        margin-bottom: clamp(1rem, 2vw, 1.5rem);
        border-radius: 0 0 4px 4px;
        background-color: var(--color-light);
        color: var(--color-dark);
        overflow: hidden;

        & .item-infos {
            padding: 1rem;
            text-align: center;

            & a {
                color:slateblue;
            }
        }
    }
}



/* histoire */
.story {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 70ch;
    margin-bottom: clamp(1rem, 3vw, 2rem);

    & img {
        width: 100%;
        margin-bottom: var(--spacing-global-y);
        border-radius: 4px;
    }

    & h2 {
        text-align: center;
    }
}

/* contact */
.contact-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin-inline: auto;
}

.contact-box {
    display: flex;
    width: fit-content;
    margin-bottom: var(--spacing-global-y);
    color: var(--color-dark);
    border-radius: 4px;
    font-size: var(--font-size-normal);
    & .contact-field {
        border: 1px solid black;
        padding: 1.5rem;
        background-color: var(--color-light);
        color: var(--color-dark);
        text-decoration: none;
        border-radius: 8px 0 0 8px;

        @media (pointer: fine) {
            &:hover {
                transform: scale(1.02);
            }
        }

        &:active {
            transform: scale(0.98);
        }

    }

    & .copy-btn {
        cursor: pointer;
        font-family: inherit;
        font-size: inherit;
        padding: 1.5rem;
        border: 1px solid black;
        border-left: none;
        border-radius: 0 8px 8px 0;
        background-color: var(--color-main);
        color: var(--color-dark);

        @media (pointer: fine) {
            &:hover {
                transform: scale(1.02);
            }
        }

        &:active {
            transform: scale(0.98);
        }
    }

}

.mentions-legales {
    display: block;
}

footer {
    font-size: var(--font-size-small);
    text-align: center;
    padding: 0.5rem 1.5rem;

    & a {
        display: inline-block;
        color: var(--color-light);
    }
}

@media (min-width: 768px) {
    .produits {
        column-count: 3;
    }

    :root {
        --header-height: 5rem;
    }

}