/* Réinitialisation des marges et des paddings pour un design cohérent */
* {margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; /* Safari */ -khtml-tap-highlight-color: transparent; /* Konqueror HTML */ -moz-tap-highlight-color: transparent; /* Firefox */ -ms-tap-highlight-color: transparent; /* Internet Explorer/Edge */}
@font-face {font-display: block; font-family: 'Diatype Variable'; src: url("https://type.cargo.site/files/Cargo-DiatypePlusVariable.woff2") format("woff2-variations"), url("https://type.cargo.site/files/Cargo-DiatypePlusVariable.woff") format("woff"); font-style: normal; font-weight: 200 1000; unicode-range: U+0000-DFFF, U+F900-FFFD;}
@font-face {font-family: 'Outfit'; src: url('Outfit-VariableFont_wght.ttf');}

/* Définir une variable pour la couleur des liens */
:root {
    --link-color: #A33A1B;
    --link-color-hover: blue;
    --link-color-active: #444;
    --link-color-white: white;
}

html {scroll-behavior: smooth; user-select: none;}
body {font-family: 'Outfit'; font-size: 13px; font-weight: 300; color: var(--link-color);}

svg {fill: var(--link-color);}
h1 {font-size: 53px; font-weight: 800; letter-spacing: 0.4px; text-transform: lowercase;}
h2 {position: relative; top: auto; width: fit-content; font-size: 13px; font-weight: 500; line-height: 25px; letter-spacing: 0.5px; text-transform: uppercase; padding: 0; border-bottom: 2px solid; border-radius: 0; color: var(--link-color); background-color: transparent;}
h3 {font-size: 16px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase}
h4 {font-size: 26px; font-weight: 900; text-transform: uppercase}
p {margin-block-start: 20px; margin-block-end: 20px; width: 90%;}
b {font-weight: 500; letter-spacing: 0.4px;}
a {text-decoration: none;}
a:active {color: var(--link-color-active)}
a:visited {color: var(--link-color);}
ul {list-style-type: none;}

/* header */
.bandeau {display: none; position: fixed; width: 15vw; height: 100vh; padding: 30px; display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: flex-start; gap: 20px; box-shadow: none;}
.logo {width: 40px;}
.sidebar {display: flex; height: 100%; flex-direction: column; justify-content: space-between; font-weight: 500; text-transform: uppercase;}
.sidebar li {width: fit-content; padding-bottom: 10px; line-height: 10px; letter-spacing: 0.4px;}
.sidebar li:last-child {margin-top: auto; padding-bottom: 0; font-size: 11px; font-weight: 300; line-height: normal; letter-spacing: normal; text-transform: none;}
.sidebar a span {display: inline-block; width: 0px; border-bottom: 2px solid var(--link-color); text-align: center; transition: width .3s ease;}
.selected span {display: inline-block; width: 0px; border-bottom: 2px solid transparent; text-align: center; transition: width .3s ease;}
.sidebar a:hover > span {width: 100%;}
.menu {display: none; top: 0; right: 0; font-size: 27px; cursor: pointer;}
.navbar {display: none; position: relative; margin-bottom: 5px; top: 100%; left: 0; width: 100%; opacity: 0; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; row-gap: 5px; transition: opacity 0.3s ease, height 0.3s ease; height: 0; overflow: hidden;}
.navbar li {grid-column: 2; font-size: 16px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; text-align: right;}
.navbar li:first-child {grid-column: 1 / 1; grid-row: span 4; font-size: 11px; font-weight: 300; letter-spacing: normal; text-transform: none; align-content: end; text-align: left;}
.selected {opacity: 0.3;}
#mentions {text-decoration: underline;}

/* main */
#content {opacity: 0;}
main svg {scale: 0.8;}
.home-page, .atelier-page, .contact-page {margin-top: 0; margin-left: 15vw; padding: 30px 0px;}
.home-page {justify-items: center; text-align: center;}
.savoir-page {margin-top: 0; margin-left: 15vw; padding: 0px;}
.atelier-page {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;}
.flex-item:nth-child(1) {grid-column: 1;}
.flex-item:nth-child(2), .flex-item:nth-child(3) {grid-column: 2;}
.flex-item:last-child {position: sticky; top: 30px; grid-column: 3; height: fit-content;}

/* Home-page */
.background {position: relative; height: 100vh; width: 100%; background-size: cover; background-position: center; z-index: -1; transition: background-image 1s ease-in-out;}
.logo-container {display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: var(--link-color-white);}
.logo-container svg {width: 110px; fill: var(--link-color-white);}
.logo-container p {font-size: 14px; margin: 0px;}
.scroll-down {position: absolute; margin: 0 auto; bottom: 15%; left: 0; right: 0; width: 45px; height: 45px; font-family: 'Outfit'; font-size: 25px; font-weight: 200; box-shadow: 0 4px 8px rgba(141, 82, 25, .08); color: var(--link-color-white); background-color: transparent; border: none; cursor: pointer; border: 1px solid var(--link-color-white); border-radius: 50%; transition: background-color 0.3s ease; animation: bounceUpDown 1s ease-out forwards;}
.scroll-down:active {color: var(--link-color-active); background-color: var(--link-color-white);}
.text-section {position: relative; min-height: 100vh; margin-top: 0; padding: 0;}
@keyframes bounceUpDown {
    0% {transform: translateY(-15px);}
    100% {transform: translateY(0);}
}

/* Style du carrousel */
.carousel-container {position: relative; width: 100%; height: 100vh; overflow: hidden; z-index: 1;}
.carousel {display: flex; width: 100%; height: 100%; }
.carousel-item {position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease-in-out;}
.carousel-item.active {opacity: 1;}
.carousel-item img {width: 100%; height: 100%; object-fit: cover;}
.carousel-text {position: absolute; top: 0; margin-top: 10px; padding: 15px; color: var(--link-color-white);}
.carousel-button {position: absolute; top: 0; bottom: 0; width: 50vw; background-color: rgba(0, 0, 0, 0); z-index: 3; cursor: pointer;}
.carousel-button.left {left: 0;}
.carousel-button.right {right: 0;}
.carousel-indicators {position: absolute; bottom: 37px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 4;}
.carousel-indicator {width: 7px; height: 7px; background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; cursor: pointer; transition: background-color 0.3s;}
.carousel-indicator.active {background-color: var(--link-color-white); transform: scale(1.2);}
.fake-carousel-button {position: absolute; bottom: 20px; background-color: transparent; color: var(--link-color-white); border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-size: 25px; cursor: pointer; z-index: 1000; box-shadow: 0 4px 8px rgba(141, 82, 25, .08); transition: opacity 0.3s ease, background-color 0.3s;}
.fake-carousel-button.left {left: 20px;}
.fake-carousel-button.right {right: 20px;}
.fake-carousel-button:active {background-color: var(--link-color-active);}
#bg-img {height: 100%; width: 100%; background-color: var(--link-color);}

/* Mobile */
@media (max-width: 768px) {
    body {font-size: 16px;}
    main svg {scale: none;}

    h2 {position: sticky; top: 15px; padding: 2px 6px; font-size: 16px; line-height: normal; border-bottom: none; border-radius: 2px; color: var(--link-color-white); background-color: var(--link-color);}
    /* header */
    .bandeau {display: none; position: relative; width: auto; height: auto; padding: 15px 15px 8px; flex-wrap: wrap; flex-direction: row; justify-content: space-between; gap: 0; box-shadow: 0 .1rem 1rem .1rem rgba(141, 82, 25, .08);}
    .menu {display: block;}
    .sidebar {display: none;}

    /* main */
    .home-page, .atelier-page, .contact-page {margin-top: 10px; margin-left: 0; padding: 15px;}
    .savoir-page {margin-top: 0; margin-left: 0; padding: 0;}
    .atelier-page {display: block;}
    .flex-item:nth-child(3) {display: none;}
    .flex-item #scop {height: 95vh;}
    .carousel-container {height: calc(100vh - 65px);}

    /* Style du carrousel */
    #bg-img {height: calc(100vh - 65px);}
}

/* Style du bouton de retour en haut */
#scrollToTopBtn {position: fixed; bottom: 20px; right: 20px; color: var(--link-color); border: 2px solid var(--link-color); border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; z-index: 1000; box-shadow: 0 4px 8px rgba(141, 82, 25, .08); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s;}
#scrollToTopBtn.show {visibility: visible; opacity: 1; transition: opacity 0.3s ease, visibility 0s 0s;}
#scrollToTopBtn:active {color: var(--link-color-white);  background-color: var(--link-color);}