@charset "utf-8";

/* variables ============================================================  */

:root {
	/* 	--logo_background: url(https://media-pi.fr/wp-content/uploads/2020/04/logo-mediapi-300.png); */
	--logo_background: url(
	../img/Logo_Media_Pi_512_fd_transparent_txtGris.png);
	--transition_very_slowslow: all 1.2s ease;
	--transition_slow: all .8s ease;
	--transition_medium: all .6s ease;
	--transition_quick: all .4s ease;
	--mobile-breakpoint: 450px;
	--tablet-breakpoint: 900px;
	--padding_bt: 0.3em 0.9em;
	--header_height: 3em;
	--footer_height: 3em;
	--basic_fade: all .8s ease-in-out;
	--quick_fade: all .4s ease-in-out;
	--border_radius: 1.4rem;
/*}

.bright_mode {*/
	--main_color: #a9bbac;
	--main_color_bright: #c4d3d4;
	--main_color_dark: #396768;
	--theme_color_soft_black: #343434;
	--theme_color_light_gray: #E5E5E5;
	--text_color: #757575;
	--text_color_bright: #888888;
	--background_color: #dfdfdf;
	--background_color_header: #f5f5f5b8;
	--background_color_content: #e5e5e5;
	--background_color_transparent: #e2e1e1eb;
	--background_video: #b9b5b1;
	--form_bg_color: #ffffff;
	--background_gradient:
	linear-gradient(-312deg, #c0c0c0 35%, #ffffff 67%);
	--modal_overlay:
	hsl(176deg 52% 32% / 72%);
	--error_text: #c6243e;
	--error_background: #c6243e;
	--ok_text: #137656;
	--ok_background: #3d8740;
	--box_shadow: #00000040 0 1em 1em;
	--text_shadow: 0 0.1em 0.3em #000000b0;
}

.dark_mode {
	--main_color: #3e958f;
	--main_color_bright: #3bbbb2;
	--main_color_dark: #006762;
	
	--theme_color_soft_black: #343434;
	--theme_color_light_gray: #4c4c4c;
	
	--text_color: #dddddd;
	--text_color_bright: #888888;
	
	--background_color:
	hsl(0deg 0% 22%);
	--background_color_header: #242424cf;
	--background_color_content: #3a3a3a;
	--background_color_transparent: #2e2e2eeb;
	--background_video: #0c0c0c;
	--form_bg_color: #444444;
	--background_gradient:
	linear-gradient(-60deg, #4d4e4e -5%, hsl(0deg 0% 0%) 170%);
	
	--modal_overlay:
	hsl(176deg 44% 17% / 87%);
	
	--error_text: #ff5d77;
	--error_background: #c6243e;
	--ok_text: #137656;
	--ok_background: #3d8740;
	
	--box_shadow: #00000059 0 1em 1em;
	--text_shadow: 0 0.1em 0.3em #000000b0;
}

/* variables ============================================================  */

/* RESETER ==========================================================================================*/

* 
{
	margin: 0;
	padding: 0;
	font-family: 'Raleway', sans-serif;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	box-sizing: border-box;
	-webkit-appearance: none;
	border-radius: 0;
	scroll-behavior: smooth;
}

html, body
{
	min-height:100vh;
	background-color: var(--background_color);
	color: var(--text_color);
	font-size: 0.94rem;
	line-height: 1.6em;
	transition: color .6s ease, background-color .6s ease;
	height: 100svh;
	min-width: 100vw;
	max-height: 100%;
/*	height: min(100svh, 100%);*/
}

.background_page {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--background_gradient);
    opacity: .5;
    transform: rotate(367deg) scaleY(1.5);
    /* mix-blend-mode: multiply; */
    transition: background-color .6s ease, color .6s ease;
}

@media screen and ( min-width:  1900px ) 
{
	html, body 
	{
		font-size: calc( 100vw / 120 );
	}

}


/* RESETER ==========================================================================================*/


/* GLOBAL ==========================================================================================*/
/* scrollbars-----------------------------------------------------------*/
::-webkit-scrollbar {
	width: 12px;
	background-color: var(--background-color-moderate);
	background-color: var(--background-color);
	height: 8px
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

::-webkit-scrollbar-thumb {
	background-color: var(--main_color);
	outline: 1px solid var(--background-color-moderate);
	-webkit-box-shadow: 0 0 6px var(--background-color-moderate);
	border-left: var(--background-color) 1px solid;
		border-radius:8px;

}
/* scrollbars-----------------------------------------------------------*/

/* links ===========================================================*/
h1
{
	color:
	var(--main_color);
	line-height: 1.1em;
	font-size: 1.4rem;
	margin: 1em 0;
}
h2{
    color: var(--text_color_bright);
    line-height: 1.2em;
    padding: .4em 1em;
}
h3{}
h4{}
h5{}
h6{}

blockquote {
    font-style: italic;
}

blockquote::before {
    content: '« ';
    margin-right: 0.2em;
}
blockquote::after {
    content: ' »';
    margin-left: .2em;
}
blockquote::before ,
blockquote::after {
    font-size: 2em;
    display: inline-block;
    vertical-align: middle;
    /* color: var(--main_color); */
}

.bt 
{
	display: inline-block !important;
	cursor:
	pointer;
	padding: var(--padding_bt);
	margin: .4em .4em !important;
	background-color: var(--main_color);
	color: white !important;
	border: none;
	border-radius: var(--border_radius);
	transition: var(--transition_medium);
}

.bt_outline {
    background-color: transparent;
    border: 1px solid var(--main_color);
    color: var(--main_color) !important;
}

.bt.bt_outline.bt_edit_presentation.show_form_bt:hover {
    border: 1px solid var(--main_color) !important;
}

.bt.del_bt {
    background-color: var(--error_background);
}

.bt.del_bt:before {
    content: "\e9ac";
    font-family: 'icomoon' !important;
    margin-right: .4em;
}

.bt.dead_bt {
    filter: saturate(0);
    opacity: 0.5;
    box-shadow: none;
    border: var(--main_color) 1px solid;
    background-color: transparent;
    color: var(--main_color) !important;
}

.bt.logIn_sucribe_bt {}

.bt.logIn_sucribe_bt span {
    margin-right: .4em;
}

.disconnect_bt.bt {
    background-color: var(--error_background);
}

.bt:hover {
    transform: scale(1.1);
    box-shadow: var(--box_shadow);
    border: none !important;
    background-color: var(--main_color);
    color: white !important;
}
a,
a:hover,
a:visited 
{
	color: var(--main_color);
	display: inline;
	margin: 0 .2em;
	transition: var(--transition_medium);
	cursor: pointer;
}

.content a:hover 
{
	/*     text-decoration: underline; */
	border-bottom: var(--main_color) 2px solid;
}

a,
a:visited 
{
	text-decoration: none;
	border-bottom: var(--main_color) 0px solid;
}

.tag:first-letter {
    text-transform: uppercase;
}

.usher a.tag {
    background-color: yellow;
    color: black !important;
    font-weight: bold;
}


.tag:hover {
	transform: scale(1.1);
	z-index: 2;
	box-shadow: var(--box_shadow);
	background-color: var(--main_color);
	color: white;
}



/* links ===========================================================*/
/* Forms ===========================================================*/

.input_wrapper
{
	margin:.4em;
	position: relative;
	height: auto;
	vertical-align: bottom;
	display:inline-block;
}



input::placeholder, textarea::placeholder, select option.placeholder
{
	font-style: italic !important;
}



input, textarea, select
{
	padding: .4em;
	border-radius: var(--border_radius);
	outline: #88888857 1px solid;
	transition:
	var(--transition_medium);
	border: none;
	margin: .4em;
	background-color: var(--background_color_transparent);
	color: var(--text_color);
}

input:not([type=checkbox]):not([type=color]):not([type=radio]), textarea, select {
    border: none;
    outline: none;
    border-radius: 0;
    border-radius: var(--border_radius);
    border-bottom: #8d8d8d42 1px solid;
    background-color: #8585850a;
    max-width: 100%;
    padding-bottom: 0.3em;
    width: 100%;
    background-color: var(--background_color);
    background-color: var(--background_color_transparent);
    padding: 0.5em 1em;
}

textarea {
    min-height: 10em;
}

select {
    position: relative;
    background-image: url(icons/select_arrow.png);
    background-position: right 0.3em center;
    background-size: 1em;
    padding-right: 1.7em;
    text-align: center;
}

select option {
    background-color: var(--background_color);
    color: var(--text_color);

}

option.disabled {
    cursor: not-allowed;
}
select option::first-letter {
  text-transform: uppercase !important; /* change first letter to uppercase */
};
select option:checked 
{
	background-color:var(--main_color)
}

select option:hover 
{
	box-shadow: var(--main_color) 0 0 6em 9em inset !important;
}

.input_wrapper.text.type_text.youtube_link input {/*     display: inline-block; *//*     width: calc(100% - 5em); */background-image: url(socials_icons/youtube.svg);background-size: 1.8em;background-position: left 0.7em center;padding-left: 2.8em;width: 100%;}

.input_wrapper.type_text.youtube_link:after {
/*     content: ''; */
    display: inline-block;
    display: inline-block;
    background-image: url(socials_icons/youtube.svg);
    height: 1.7em;
    width: 2em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* background-color: red; */
    vertical-align: baseline;
    position: relative;
    top: .4em;
}


.input_wrapper.type_number.CB_number {
    width: 17em;
}

.input_wrapper.type_number.CB_number input {
    width: 100%;
}

.input_wrapper.exp_year.type_number.number {
    width: 8em;
}

.input_wrapper.CCV.type_number.number {
    width: 4em;
}

.input_wrapper.exp_mounth.type_number.number {
    width: 4em;
}



input.trap {
    opacity: 0;
    display: none;
    height: 0;
}

input:focus {
    outline: var(--main_color) 1px solid;
    box-shadow: hsl(176deg 52% 32% / 55%) 0 .2em 0.4em inset;
    /* text-shadow: var(--text_shadow); */
}

input['type'= 'text']
{}


input[type=checkbox] {
    /* background-color: red; */
    display: inline-block;
    vertical-align: middle;
    margin-right: 1em;
    cursor: pointer;
    transform: rotateY(-180deg);
}

input[type=checkbox]:checked {
    /* background-color: var(--main_color); */
	border-radius:.1em;
    background-image: url(icons/ok_check.png);
    background-size:
    contain;
    transform: scale(2);
    filter: sepia(1) hue-rotate(124deg) saturate(2);
}

input[type="color"] {
	-webkit-appearance: none;
	border: none;
	width: 32px;
	height: 32px;
	padding: 0 !important;
	border-radius: var(--border_radius);
	overflow: hidden;
	width: 3em !important;
	height: 3em !important;
	/* float: left; */
	display: inline-block;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
}


/* Forms ===========================================================*/
/* Design ===========================================================*/
body {
  background-color: #f4ece1; /* Couleur de base */
  /* background-image: radial-gradient(circle, rgb(246 246 246 / 9%) 1px, rgb(92 92 92 / 27%) 1px); */
  /* background-size: 3px 3px; */ /* Taille du grain */
  /* background-blend-mode: soft-light; */ /* Effet subtil */
  /* filter: contrast(105%); */
  /* background-repeat: repeat; */
}

.page {
    text-align: center;
    position: relative;
    height:100vh;
}

.TR_deco {
    top: 0;
    right: 0;
    height: 50vh;
    width: 50vh;
    background-position: top right;
}

.BL_deco 
{
    bottom: 0;
    left: 0;
    height: 50vh;
    width: 50vh;
    background-position: bottom left;
}

.BL_deco,.TR_deco {
    position: fixed;
    z-index: 1;
    background-size: contain;
}
.centerer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 23em;
    width: 90%;
    z-index: 2;
}

.intro_txt {
    text-align: justify;
    margin-bottom: 1em;
}

.logo {
    height: 10em;
}


/* Design ===========================================================*/