*, :after, :before {
  box-sizing: border-box;
}


body #cdawrap {
  justify-self: start;
}



.js .loading:before, .js .loading:after {
  content: "";
  z-index: 1000;
  position: fixed;
}

.js .loading:before {
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  top: 0;
  left: 0;
}

.js .loading:after {
  width: 60px;
  height: 60px;
  opacity: .4;
  background: var(--color-link);
  border-radius: 50%;
  margin: -30px 0 0 -30px;
  animation: .7s linear infinite alternate forwards loaderAnim;
  top: 50%;
  left: 50%;
}

@keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(.5, .5, 1);
  }
}

a {
  color: var(--color-link);
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

a:hover {
  color: var(--color-link);
  outline: none;
}

a:focus {
  background: #d3d3d3;
  outline: none;
}

a:focus:not(:focus-visible) {
  background: none;
}
.shop_products__container a:focus:not(:focus-visible) {
  background: #f0c68e;
}
a:focus-visible {
  background: none;
  outline: 2px solid red;
}

.unbutton {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.unbutton:focus {
  outline: none;
}

.oh {
  position: relative;
  overflow: hidden;
}

.oh__inner {
  will-change: transform;
  display: inline-block;
}

.line {
  transform-origin: 0;
  white-space: nowrap;
  will-change: transform;
}

main {
  width: 100%;
  height: 100vh;
  grid-template-rows: auto auto;
  grid-template-columns: 100%;
  display: grid;
}

.frame {
  color: var(--color-title);
  padding: var(--page-padding);
  grid-gap: .5rem;
  z-index: 2;
  pointer-events: none;
  width: 100%;
  grid-template: "title"
                 "prev"
                 "sponsor"
                 "nav"
                 / 100%;
  grid-area: 1 / 1 / 2 / 2;
  justify-content: start;
  justify-items: start;
  font-size: .75rem;
  display: grid;
  position: relative;
}

.frame a {
  pointer-events: auto;
}

.frame a:not(.frame__title-back) {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.frame a:not(.frame__title-back):before {
  content: "";
  height: 1px;
  width: 100%;
  transform-origin: 0%;
  background: currentColor;
  transition: transform .3s;
  position: absolute;
  top: 90%;
}

.frame a:not(.frame__title-back):hover:before {
  transform-origin: 100%;
  transform: scaleX(0);
}

.frame__title {
  grid-area: title;
  display: flex;
}

.frame__title-main {
  margin: 0;
  font-size: .75rem;
  font-weight: 300;
}

.frame__title-back {
  align-items: flex-end;
  display: flex;
  position: relative;
}

.frame__title-back span {
  display: none;
}

.frame__title-back svg {
  fill: currentColor;
}

.frame__prev {
  grid-area: prev;
}

.frame__demos {
  flex-wrap: wrap;
  grid-area: nav;
  justify-self: stretch;
  gap: 1.5rem;
  display: flex;
}

.content {
  z-index: 1;
  grid-row: 2;
  line-height: 1;
  position: relative;
}

.preview-open .content {
  pointer-events: none;
}

.demo-3.preview-open .content {
  z-index: 3;
}

.content__item {
  width: 100%;
  max-width: 500px;
  margin: 0;
  padding: calc(3rem + 5vh) 2rem 4rem;
}

.content__item:nth-child(2n) {
  padding-top: calc(3rem + 15vh);
}

.content__item-img-wrap {
  width: 100%;
  aspect-ratio: .75;
  cursor: pointer;
  will-change: transform;
  position: relative;
  overflow: hidden;
  margin-bottom: -350px;
}

.demo-3 .preview__item .content__item-img-wrap {
  width: auto;
  height: 100%;
  aspect-ratio: auto;
}

.content__item-img {
  width: 100%;
  height: 100%;
  will-change: transform;
  background-position: 50%;
  background-size: cover;
  transition: all 0.2s ease-in-out;
}
.content__item-img:hover{
  width: 110%;
  height: 110%;
  will-change: transform;
  background-position: 50%;
  background-size: cover;
}

.content__item-title {
  margin: 0 0 .5rem;
  font-family: kudryashev-d-excontrast-sans, sans-serif;
  font-size: clamp(2rem, 3.25vw, 1.85rem);
  font-weight: 300;
}

.content__item-title .oh__inner {
  padding-top: .75vw;
  line-height: 1.2;
}

.content__item-caption {
  margin-top: .75rem;
}

.content__overlay {
  background: var(--color-bg-overlay);
  width: 150vmax;
  height: 150vmax;
  pointer-events: none;
  will-change: transform;
  z-index: 3;
  position: fixed;
  top: calc(50% - 75vmax);
  left: calc(50% - 75vmax);
}

.overlay__inner {
  background: var(--color-bg-overlay);
  width: 100%;
  height: 100%;
  position: relative;
}

.demo-1 .content__overlay {
  background: none;
  transform: rotate(45deg);
}

.demo-2 .content__overlay {
  border-radius: 50%;
  transform: scale(0);
}

.demo-3 .content__overlay {
  width: 100vw;
  height: 100%;
  top: 0;
  left: 0;
  transform: scaleY(0);
}

.preview {
  height: 100vh;
  width: 100%;
  pointer-events: none;
  z-index: 4;
  color: var(--color-text-preview);
  display: grid;
  position: fixed;
  top: 0;
  left: 0;
}

.preview__item {
  opacity: 0;
  pointer-events: none;
  grid-gap: 1rem;
  will-change: clip-path;
  grid-template: "title"
                 "subtitle"
                 "meta"
                 "box-left"
                 "box-right"
                 "." 1fr
                 / 100%;
  grid-area: 1 / 1 / -1 / -1;
  padding-top: 2rem;
  display: grid;
}

.preview__item--current {
  opacity: 1;
  pointer-events: auto;
}

.preview__item-img-outer {
  width: 60vw;
  max-width: 800px;
  grid-area: 1 / 1 / -1 / -1;
  place-self: center;
}

.demo-1 .preview__item-img-outer {
  aspect-ratio: .7;
  width: 33vw;
  transform: rotate(45deg);
}

.demo-2 .preview__item-img-outer, .demo-3 .preview__item-img-outer {
  height: 100%;
  width: 36vw;
}

.preview__item-img-wrap {
  width: 100%;
  height: 100%;
  will-change: transform;
  position: relative;
  overflow: hidden;
}

.preview__item-img {
  width: 100%;
  height: 100%;
  will-change: transform;
  background-position: 50%;
  background-size: cover;
}

.preview__item-title {
  will-change: transform;
  grid-area: title;
  place-self: center;
  margin: 0;
  padding-top: 1vw;
  font-family: kudryashev-d-excontrast-sans, sans-serif;
  font-size: clamp(3rem, 24vw, 17rem);
  font-weight: 300;
  line-height: 1;
}

.preview__item-subtitle {
  color: var(--color-title-preview);
  grid-area: subtitle;
  justify-self: center;
  margin: 0;
  font-weight: 300;
  position: relative;
}

.preview__item-meta {
  grid-area: meta;
  justify-self: center;
  position: relative;
}

.preview__item-box {
  padding: var(--preview-padding);
  max-width: 450px;
  will-change: transform;
  text-align: center;
  justify-self: center;
  position: relative;
}

.preview__item-box--right {
  grid-area: box-right;
}

.preview__item-box--left {
  grid-area: box-left;
}

.preview__item-box-title {
  color: var(--color-title-preview);
  margin: 0;
  font-weight: 400;
}

.preview__item-box-desc {
  will-change: transform, opacity;
}

.preview__back {
  cursor: pointer;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.preview-open .preview__back {
  pointer-events: auto;
}

.preview__back svg {
  pointer-events: none;
  stroke: var(--color-text-preview);
  stroke-width: 1px;
  transition: stroke .3s;
}

@media screen and (min-width: 53em) {


  .frame {
    height: 100vh;
    grid-gap: 2rem;
    grid-template: "title prev sponsor"
                   "nav nav nav"
                   / auto auto 1fr;
    grid-area: 1 / 1 / -1 / -1;
    align-content: space-between;
  }

  .content {
    height: 100vh;
    grid-area: 1 / 1 / -1 / -1;
    align-content: center;
    align-items: center;
    display: flex;
  }

  .content__item {
    height: 100%;
    width: 25%;
  }

  .preview__item {
    grid-template: "title title title" 1fr
                   "box-left subtitle box-right"
                   "box-left meta box-right"
                   "box-left . box-right"
                   / 30% 1fr 30%;
    padding-top: 0;
  }

  .preview__item-title {
    grid-row: 1 / span 4;
  }

  .preview__item-box--right {
    text-align: right;
    justify-self: end;
  }

  .preview__item-box--left {
    text-align: left;
    justify-self: start;
  }

  body #cdawrap {
    justify-self: end;
  }
}

/*# sourceMappingURL=index.d046a61c.css.map */

.titre-div{
	font-family:kudryashevheadline-s;
	color: var(--third-color); 
	text-align: center;
}
.para-div{
	font-family:kudryashevheadline-s;
	max-height: 70vh; 
	overflow-y: auto;
	padding-right:50px	
}	
.text-div{
	margin-left:30px;
	margin-right:30px;
	margin-top:30px;
	margin-bottom:50px	
}	
.img-boucle{
	width: 70vh;
    height: 100vh;
}
	#pc{
		display:block;
	}
	#mobile{
		display:none;
	}

.slider {
  width: 100%;
  overflow: hidden;
}
.slider-items {
  display: flex;
  width: 300%;
}
.item {
  flex: 1 0 100%;
}
.item img {
  width: 100%;
  height: auto;
}
.prev, .next {
  position: absolute;
  top: 50%;
  z-index: 1;
  font-size: 30px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  transition: 0.6s ease;
  border-radius: 50%;
  padding: 10px;
  background-color: rgba(0,0,0,0.5);
  text-align: center;
}
.prev {
  left: 0;
}
.next {
  right: 0;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

.unbutton {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
}

.unbutton:focus {
	outline: none;
}

.oh {
	position: relative;
	overflow: hidden;
}

.oh__inner {
	will-change: transform;
	display: inline-block;
	font-size: 30px;
	color:#b3ac99;
}

.line {
	transform-origin: 0;
	white-space: nowrap;
	will-change: transform;
}

main {
	display: grid;
	width: 100%;
	height: 100vh;
	grid-template-rows: auto auto;
	grid-template-columns: 100%;
}

.frame {
	color: red;
	padding: 1rem 2rem;;
	position: relative;
	grid-gap: 0.5rem;
	z-index: 2;
	font-size: 0.75rem;
	pointer-events: none;
	grid-template-columns: 100%;
	grid-template-rows: auto auto auto auto;
	display: grid;
	grid-template-areas: 'title' 'prev' 'sponsor' 'nav';
	justify-content: start;
	justify-items: start;
	grid-area: 1 / 1 / 2 / 2;
	width: 100%;
}

.frame a {
	pointer-events: auto;
}

.frame a:not(.frame__title-back) {
	white-space: nowrap;
	overflow: hidden;
	position: relative;
}

.frame a:not(.frame__title-back)::before {
	content: '';
	height: 1px;
	width: 100%;
	background: currentColor;
	position: absolute;
	top: 90%;
	transition: transform 0.3s;
	transform-origin: 0% 50%;
}

.frame a:not(.frame__title-back):hover::before {
	transform: scaleX(0);
	transform-origin: 100% 50%;
}

.frame__title {
	grid-area: title;
	display: flex;
}

.frame__title-main {
	font-size: 0.75rem;
	margin: 0;
	font-weight: 300;
}

.frame__title-back {
	position: relative;
	display: flex;
	align-items: flex-end;
}

.frame__title-back span {
	display: none;
}

.frame__title-back svg {
	fill: currentColor;
}

.frame__prev {
	grid-area: prev;
}

.frame__demos {
	grid-area: nav;
	display: flex;
	flex-wrap: wrap;
	justify-self: stretch;
	gap: 1.5rem;
}

.content {
	font-family: kudryashev-d-excontrast-sans;
	line-height: 1;
	position: relative;
	z-index: 1;
	grid-row: 2;
	background-color:none;
}

.preview-open .content {
	pointer-events: none;
}

.content__item-img-wrap {
	overflow: hidden;
	position: relative;
	width: 100%;
	aspect-ratio: 0.50;
	cursor: pointer;
	will-change: transform;
}


.content__item-img {
	background-size: cover;
	background-position: 50% 50%;
	width: 100%;
	height: 100%;
	will-change: transform;
}

.content__item-title {
	font-size: clamp(2rem, 3.25vw, 1.85rem);
	font-family:kudryashevheadline-s;;
	font-weight: 300;
	margin: 0 0 0.5rem;
	text-align:center;
}

.content__item-title .oh__inner {
	padding-top: 0.75vw;
	line-height: 1.0;
    font-family: kudryashevheadline-s;
}

.content__item-caption {
	margin-top: 0.75rem;
	color:#b3ac99;
	font-size:20px;
	font-family: kudryashevheadline-s;
}

.content__overlay {
	background:none;
	position: fixed;
	top: calc(50% - 75vmax);
	left: calc(50% - 75vmax);
	width: 150vmax;
	height: 150vmax;
	pointer-events: none;
	will-change: transform;
	z-index: 3;
}

.overlay__inner {
	background: none;
	width: 100%;
	height: 100%;
	position: relative;
}

.demo-1 .content__overlay {
	transform: rotate(45deg);
	background: transparent;
}

.preview {
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: grid;
	pointer-events: none;
	z-index: 4;
	color: #b3ac99;
}

.preview__item {
	grid-area: 1 / 1 / -1 / -1;
	opacity: 0;
	pointer-events: none;
	display: grid;
	grid-gap: 1rem;
	padding-top: 2rem;
	grid-template-columns: 100%;
	grid-template-rows: auto auto auto auto auto 1fr;
	grid-template-areas: 'title' 'subtitle' 'meta' 'box-left' 'box-right' '...';
	will-change: clip-path;
}

.preview__item--current {
	opacity: 1;
	pointer-events: auto;
}

.preview__item-img-outer {
	align-self: center;
	justify-self: center;
	width: 60vw;
	max-width: 800px;
	justify-self: center;
	grid-area: 1 / 1 / -1 / -1;
}

.demo-1 .preview__item-img-outer {
	transform: rotate(45deg);
	aspect-ratio: 0.7;
	width: 33vw;
}

.preview__item-img-wrap {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	will-change: transform;
}

.preview__item-img {
	background-size: cover;
	background-position: 50% 50%;
	width: 100%;
	height: 100%;
	will-change: transform;
}
.preview__item-title {
	justify-self: center;
	grid-area: title;
	font-size: clamp(3rem, 24vw, 17rem);
	font-family: kudryashevheadline-s;;
	font-weight: 300;
	margin: 0;
	line-height: 1;
	will-change: transform;
	padding-top: 1vw;
	background-color:#131312;
}

.preview__item-subtitle {
	justify-self: center;
	position: relative;
	grid-area: subtitle;
	font-weight: 300;
	margin: 0;
	color: #923538;
}

.preview__item-meta {
	justify-self: center;
	position: relative;
	grid-area: meta;
}

.preview__item-box {
	padding: 0 2rem 1rem;;
	position: relative;
	max-width: 450px;
	will-change: transform;
	justify-self: center;
	text-align: center;
}

.preview__item-box--right {
	grid-area: box-right;
}

.preview__item-box--left {
	grid-area: box-left;
}

.preview__item-box-title {
	margin: 0;
	font-weight: 400;
	color: #923538;
}

.preview__item-box-desc {
	will-change: transform, opacity;
}

.preview__back {
	cursor: pointer;
	position: absolute;
	left: 97%;
    top: 100px;
	z-index: 300;
	bottom:87%;
	will-change: transform, opacity;
	background-color: #f0c68e;
    border-radius: 900%;
    height: 35px;
    width: 35px;
}

.preview-open .preview__back {
	pointer-events: auto;
}

.preview__back svg {
	pointer-events: none;
	stroke: black;
	stroke-width: 2px;
	transition: stroke .3s;
    border-radius: 999px;
    padding: 4px;
}

.hauteur-1{
  margin-top:30vh;
}
.div-histoire{
  display:block;
  z-index: -1;
  background-color: black;
  color: white;
  position: absolute;
  opacity: 0;
}
.fade-up {
  opacity: 0;
  transform: translateY(50px);
  animation: fadeUp 2s ease-in-out forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(150px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}