body{
    background-image: url(../images/PAGE_AVERTISSEMENT/jinxavertissement.webp);
    background-size: 135vw, auto;
    margin : 0;
    padding : 0 ;
    color : white ;
    cursor: url(../images/PAGE_AVERTISSEMENT/curseur1.png) 32 32,auto;
    background-repeat: no-repeat;
	background-position: center;
}

.logo-arcane {
    display: block;
    margin : 5vw auto 5vw auto ;
    padding-top: 2vw;
    padding-bottom: 6vw;
    width: 50vw;
	height: auto;
}

.paragraphe_accueil {
    color: rgb(255, 255, 255);
    font-size : 2vw;
    padding :  0.1vw 5vw 4vw 5vw;
    margin : 0 4vw 15vw 4vw ;
    background-color: rgba(100, 100, 100, 0.45);
    border-radius: 2vw;
    text-align: center;
    font-size: 3vw;
}

.paragraphe_accueil h2 {
    font-size: 6vw;
	font-family: Noto Sans, sans-serif	;
}

.b{
    justify-content: center;
    display: flex;
}
.b .btn{
	transform: translateY(20%);
	box-sizing: border-box;
	margin-right: 1vw;
}

.btn {
    width: 60vw;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	background: none;
	padding: 0;
	color: var(--button-text-color);
	cursor: pointer;
	
	--button-text-color: var(--background-color);
	--button-text-color-hover: var(--button-background-color);
	--border-color: #7D8082;
	--button-background-color: #1d1d1d;
	--highlight-color: #ffffff;
	--button-inner-border-color: transparent;
	--button-bits-color: var(--background-color);
	--button-bits-color-hover: var(--button-background-color);
	
	padding: 0.8vw;
	text-transform: uppercase;
	font-size: 7vw;
	transition: all .15s ease;
}
  
.btn::before,
.btn::after {
	content: '';
	display: block;
	position: absolute;
	right: 0; left: 0;
	height: calc(50% - 2vw);
	border: 0.3vw solid var(--border-color);
	transition: all .15s ease;
}
  
.btn::before {
	top: 0;
	border-bottom-width: 0;
}
  
.btn::after {
	bottom: 0;
	border-top-width: 0;
}
.btn:active,
.btn:focus {
	outline: none;
}
.btn:active::before,
.btn:active::after {
	right: 0.09em;
	left: 0.09em;
}
  
.btn:active::before {
	top: 0.09em;
}
  
.btn:active::after {
	bottom: 0.09em;
}
.btn__inner {
	position: relative;
	display: block;
	padding: 3vw 3vw;
	background-color: var(--button-background-color);
	overflow: hidden;
	box-shadow: inset 0 0 0 1vw var(--button-inner-border-color);
  }
.btn__inner::before {
	content: '';
	display: block;
	position: absolute;
	top: 0; left: 0;
	width: 0.05em;
	height: 0.05em;
	background-color: var(--button-bits-color);
}  
.btn__inner::after {
	content: '';
	display: block;
	position: absolute;
	right: 0; bottom: 0;
	width: 0.1em;
	height: 0.1em;
	background-color: var(--button-bits-color);
	transition: all .2s ease;
}  
.btn__slide {
	display: block;
	position: absolute;
	top: 0; bottom: -1vw; left: -1vw;
	width: 0;
	background-color: var(--highlight-color);
	transform: skew(-15deg);
	transition: all .2s ease;
  } 
.btn__content {
	position: relative;
}
.btn:hover {
	color: var(--button-text-color-hover);
    cursor: url(../images/PAGE_AVERTISSEMENT/curseur2.png) 32 32, auto;
}

.btn:hover .btn__slide {
	width: calc(100% + 1.7vw);
    
}
.btn:hover .btn__inner::after {
	background-color: var(--button-bits-color-hover);
}

.btn:hover a{
    cursor: url(../images/PAGE_AVERTISSEMENT/curseur2.png) 32 32, auto;
    color: black;
	
}
.btn--light {
	--button-background-color: var(--background-color);
	--button-text-color: var(--highlight-color);
	--button-inner-border-color: var(--highlight-color);
	--button-text-color-hover: #ece8e1;
	--button-bits-color-hover: #ece8e1;
}
button a{
	position: relative;
	text-decoration: none;
	color: #ece8e1;
	text-transform: uppercase;
	z-index: 8;
}

.space{
    display: flex;
    margin-top: 40%;
}