@charset "UTF-8";
/* CSS Document */

body {
  margin: 0;
  font-family: 'Poppins', 'Arial Rounded MT Bold', sans-serif;
  background: linear-gradient(180deg, #3aa0ff 0%, #b4e5ff 100%);
  color: #222;
}

button {
  border: none;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  margin: 0px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.15s ease, background 0.3s;
}

button:hover {
  transform: translateY(-2px);
}
/* Couleurs par usage */
.btn-jaune {
  background: linear-gradient(180deg, #ffd54f, #ffca28);
}
.btn-rose {
  background: linear-gradient(180deg, #ff8a80, #ff5252);
  color: white;
}
.btn-vert {
  background: linear-gradient(180deg, #a5d6a7, #81c784);
}
.btn_black_clean {
	border: none;
	color: #FFF;
}
.btn_black {
	background: linear-gradient(180deg, #333, #666);
	border: none;
	color: #FFF;
}
.btn_black:hover {
	background: linear-gradient(180deg, #000, #000);
	color: #FFF;
}
.btn-bleu {
  background: linear-gradient(180deg, #90caf9, #64b5f6);
}

.btn_green {
	background: linear-gradient(180deg, #a6feaa, #53ad57);
	border: none;
}

.btn_darkgreen {
	background-color: darkgreen;
	border: none;
}

/* ==== FICHE PATIENT ==== */
.patient-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffe9e6;
  border-radius: 22px;
  width: 80%;
  margin: 30px auto;
  padding: 20px 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.patient-info {
  text-align: left;
}

.patient-info h2 {
  margin: 5px 0;
  font-size: 20px;
}

/* ==== SECTION ENTRAÎNEMENT ==== */
.training-card {
  width: 80%;
  margin: 0 auto;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffe082, #ffca28);
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.training-card h3 {
  margin-top: 0;
}

/* ==== TABLEAU ==== */
.table-container {
  background: linear-gradient(180deg, #e3f2fd, #bbdefb);
  border-radius: 20px;
  margin: 20px auto;
  padding: 15px;
  width: 80%;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 20px;
  overflow: hidden;
}

th, td {
  padding: 10px;
  text-align: center;
}

th {
  background: #64b5f6;
  color: white;
}

tr:nth-child(even) {
  background: #e3f2fd;
}

tr:nth-child(odd) {
  background: #f8fbff;
}

/* ==== BAS DE PAGE ==== */
footer {
  margin-top: 30px;
  padding-bottom: 40px;
  font-size: 14px;
  color: rgba(0,0,0,0.6);
}










.window_full_box {
	width: 100%; display: inline-block; float: left; box-sizing: border-box;
}
.window_full {
	width: 100%; display: inline-block; float: left; box-sizing: border-box;
}

.wh_40 {
	width: 40px;
	height: 40px;
}
.box_200_center {
	width: 200px; max-height: 140px; min-height: 120px; margin: auto; box-sizing: border-box;
}

.box_200 {
	width: 200px; height: 60px; display: inline-block; float: left; box-sizing: border-box; margin-top:1%; text-align: center;
}

.box{
	width: 100%;
	display: inline-block;
	float: left;
	box-sizing: border-box;
	padding: 4px;
	
	font-family: helvetica;
	font-size: 12px;
	cursor: default;
}

.box_e{
	width: 100%;
	display: inline-block;
	box-sizing: border-box;
	padding: 0px;
}

.box_b_b{
	width: 100%;
	display: inline-block;
	float: left;
	box-sizing: border-box;
	padding: 4px;
	border-bottom:1px solid #000;
}

.white_link {
	font-family: 'Helvetica';
	color:#FFF;
	text-decoration: none;
	padding: 5px; border:1px solid #FFF; border-radius: 5px;
	transform: scale(1);
}

.white_link:hover {
	font-family: 'Helvetica';
	color:#000;
	text-decoration: none;background-color: #FFF;
	transform: scale(1.2);
}

.btn_grey_off {
	background-color: #CCC;
	padding: 10px;
	border-radius: 30px;
	border: 1px solid #CCC;
}

.btn_grey {
	background-color: #CCC;
	padding: 10px;
	border-radius: 30px;
	cursor: pointer;
}
.btn_grey:hover {
	background-color: #999;
	color: #FFF;
}

.btn_yellow {
	background: linear-gradient(180deg, #ffd54f, #ffca28);
	padding: 10px;
	border-radius: 30px;
	cursor: pointer;
}
.btn_yellow:hover {
	/*background-color: #000;*/
	
	color: #FFF;
}

.btn_green {
	padding: 10px;
	border-radius: 30px;
	/*border: 1px solid #9AF8B3;*/
	cursor: pointer;
}
.btn_green:hover {
	background: linear-gradient(0deg, #85b787, #51a154);
	/*border: 1px solid #21833b;*/
	color: #FFF;
}

.btn_orange {
	background-color: #eea43b;
	padding: 10px;
	border-radius: 30px;
	border: 1px solid #eea43b;
	cursor: pointer;
}
.btn_orange:hover {
	background-color: #bd8330;
	border: 1px solid #bd8330;
	color: #FFF;
}

.btn_red {
	background: linear-gradient(180deg, #ff8a80, #ff5252);
	padding: 10px;
	border-radius: 30px;
	cursor: pointer;
}
.btn_red:hover {
	background-color: #b66263;
	color: #FFF;
}


.btn_blue {
	background: linear-gradient(180deg, #90caf9, #64b5f6);
	padding: 10px;
	border-radius: 30px;
	cursor: pointer;
}
.btn_blue:hover {
	background-color: #bd8330;
	color: #FFF;
}


.btn_red_2 {
	background-color: #b66263;
	padding: 10px;
	border-radius: 30px;
	border: 2px solid #b66263;
	cursor: pointer;
	color: #FFF;
	animation-duration: 500ms;
	transition-duration: 500ms;
	transform: scale(1);
}
.btn_red_2:hover {
	background-color: #ED2E32;
	border: 2px solid #ED2E32;
	color: #FFF;
	transform: scale(1.2);
	animation-duration: 500ms;
	transition-duration: 500ms;
}



.btn_red_top {
	background-color: #ED2E32;
	padding: 10px;
	border-radius: 10px;
	border: 4px solid #FFF;
	cursor: pointer;
	animation-duration: 500ms;
	
	color: #FFF;
	width: 60px;
	height: 60px;
	vertical-align: middle;
	text-align: center;
	
	font-family:"Helvetica"; font-size:20px; border-radius: 20px; box-shadow: 0px 0px 7px -3px #000000;
}
.btn_red_top:hover {
	background-color: #A90002;
	border: 4px solid #FFF;
	color: #FFF;
	animation-duration: 500ms;
	
	width: 55px;
	height: 55px;
}

/*
#quitter:hover .btn_red_text_box{
	visibility: visible;
}
*/


.btn_red_text{
	font-family: Helvetica; font-size: 10px; color: #fff; font-weight: bold;
	
}

.btn_red_text_box {
	visibility:hidden;
}
.btn_red_text:hover .btn_red_text{
	background-color: #b66263;
	border: 1px solid #b66263;
	color: #b66263;
}


.btn_small_red {
	background-color: #EBB3B4;
	padding: 4px;
	border-radius: 5px;
	border: 1px solid #EBB3B4;
	cursor: pointer;
}
.btn_small_red:hover {
	background-color: #b66263;
	border: 1px solid #b66263;
	color: #FFF;
}

.btn_small_grey {
	background-color: #CCC;
	padding: 4px;
	border-radius: 15px;
	border: 1px solid #CCC;
	cursor: pointer;
}
.btn_small_grey:hover {
	background-color: #999;
	border: 1px solid #999;
	color: #FFF;
}


.hide{
	display: none;
}


.form_under_titre {
	font-family: 'Helvetica';
	font-size: 16px;
}
.form_titre {
	font-family: 'Helvetica';
	font-size: 16px;
}
.main_form {
	border: 1px solid #CCC;
	padding: 5px;
	border-radius: 5px;
	min-height: 26px;
}

.menu_settings {
	
	width: 60px; height: auto; border-radius: 20px; padding: 8px; box-sizing: border-box;  background-color: #666; text-align: center; padding-top: 14px; border:none;
	
	cursor: pointer;
}
.menu_settings:hover {
	background-color: #BBB;
}
/*
.menu_settings:hover .btn_pause_1{
	background-color: #AAA;
}
.menu_settings:hover .btn_pause_2{
	background-color: #AAA;
}
*/
.test{
	top:550px;
	animation-duration: 9s;
}

.rond_pastille {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	/*background-color: #ADEDEA;*/
}

.carre_pastille {
	width: 30px;
	height: 30px;
	border-radius: 2px;
	background-color: #ADEDEA;
	border: 1px solid #999;
}

.past_vert{
	background-color: '#2EA240';
}
.past_bleu{
	background-color: '#0f3f87';
}
.past_bleu_turquoise{
	background-color: '#15b7e6';
}
.past_violet{
	background-color: '#914f99';
}
.past_orange{
	background-color: '#ca5b24';
}
.past_jaune{
	background-color: '#cab124';
}
.past_rouge{
	background-color: '#ca243b';
}

#balle {
	animation-timing-function: linear;
	top: -50px;
}

.input_form_box {
	width: 100%;
	padding: 4px;
	box-sizing: border-box;
}
.form_full_box {
	width: 100%;
	display: inline-block;
	float: left;
	box-sizing: border-box;
	text-align: left;
}
.form_full_w30 {
	width: 30%;
	min-height: 40px;
	display: inline-block;
	float: left;
	box-sizing: border-box;
}
.form_full_w40 {
	width: 40%;
	min-height: 40px;
	display: inline-block;
	float: left;
	box-sizing: border-box;
}
.form_full_w50 {
	width: 50%;
	min-height: 40px;
	display: inline-block;
	float: left;
	box-sizing: border-box;
}
.form_full_w60 {
	width: 60%;
	min-height: 40px;
	display: inline-block;
	float: left;
	box-sizing: border-box;
}
.form_full_w70 {
	width: 70%;
	min-height: 40px;
	display: inline-block;
	float: left;
	box-sizing: border-box;
}
.form_full_w80 {
	width: 80%;
	min-height: 40px;
	display: inline-block;
	float: left;
	box-sizing: border-box;
}
.form_full_w90 {
	width: 90%;
	min-height: 40px;
	display: inline-block;
	float: left;
	box-sizing: border-box;
}
.form_full_w100 {
	width: 100%;
	/*min-height: 40px;*/
	display: inline-block;
	float: left;
	box-sizing: border-box;
}


.return_red_box {
	width: 100%;
	position: fixed;
	bottom: 0px;
	z-index: 2;
	display: none;
}
.return_red_box_container {
	width: 100%;
	display: inline-block;
	float: left;
	box-sizing: border-box;
	background-color: #F21549;
	padding: 10px;
	text-align: center;
}


.return_green_box {
	width: 100%;
	position: fixed;
	bottom: 0px;
	z-index: 20;
	display: none;
}
.return_green_box_container {
	width: 100%;
	display: inline-block;
	float: left;
	box-sizing: border-box;
	background-color: #12A848;
	padding: 10px;
	text-align: center;
}
.small_link {
	font-family: Helvetica;
	font-size: 11px;
	color: #000;
}


.complete_list_box {
	width: 100%;
	display: inline-block;
	float: left;
	box-sizing: border-box;
	padding: 3px;
	border-bottom: 1px solid #AAA;
}
.complete_list_main{
	max-width: 300px;
	position: absolute;
	z-index: 999;
	border:1px solid #F00;
}



.choc_bloc_full{
	width: 30px; height: 31px; display: inline-block; float: left; box-sizing: border-box; background-color: #4A361C; border: 1px solid #2b1e0d;
}

.choc_bloc_empty{
	width: 30px; height: 31px; display: inline-block; float: left; box-sizing: border-box;
}





.w_100{
	width: 100%;
	display: inline-block;
	float: left;
	box-sizing: border-box;
}

.input_border_box {
	width: 100%; display: inline-block; float: left; box-sizing: border-box; padding: 4px;
}
.input_border_text {
	width: 100%;
	padding: 4px;
	box-sizing: border-box;
	border: none;
}
.input_space {
	width:100%; display: inline-block; float: left; box-sizing: border-box; padding: 5px;
}


.process_order_box {
	width:800px;
	margin:auto;
}

.top_box{
	width: 20%;
	min-width: 100px; 
	display: inline-block; 
	float: left; 
	box-sizing: border-box; 
	border: 1px solid #FFF; 
	padding: 10px; 
	background-color: #cde8f9; 
	border-top-left-radius: 15px; 
	border-top-right-radius: 15px; 
	margin:0px 1px 0px 1px; 
	cursor: pointer; 
	font-weight: normal; 
	border-bottom: none;
	animation-duration: 500ms;
}

.top_box_hover{
	width: 20%;
	min-width: 100px; 
	display: inline-block; 
	float: left; 
	box-sizing: border-box; 
	border: 1px solid #FFF; 
	padding: 10px; 
	background-color: #fff; 
	border-top-left-radius: 15px; 
	border-top-right-radius: 15px; 
	margin:0px 1px 0px 1px; 
	cursor: pointer; 
	font-weight: normal; 
	border-bottom: none;
	animation-duration: 500ms;
}

.top_box:hover {
	transform: scale(1.0);
	animation-duration: 500ms;
	background-color: #FFF;
}

/*--------------------------------------*/
/* PROC ACHAT				START +		*/
/*--------------------------------------*/
.proc_achat_full {
	width:auto;
	height:auto;
	display:inline-block;
	padding:0px;
	margin:auto;
	box-sizing:border-box;
}
.proc_achat_box {
	width:200px;
	height:auto;
	min-height:50px;
	display:inline-block;
	float:left;
	box-sizing:border-box;
	/*border:1px solid #F00;*/
}
.proc_achat_bloc {
	width:100%;
	height:30px;
	display:inline-block;
	float:left;
	box-sizing:border-box;
	font-family:Helvetica;
	font-size:11px;
	text-align:center;
}
.proc_achat_bloc_off {
	width:100%;
	height:30px;
	display:inline-block;
	float:left;
	box-sizing:border-box;
	font-family:Helvetica;
	font-size:11px;
	color:#000;
	text-align:center;
}
.proc_achat_arrow {
	width:15px;
	height:auto;
	display:inline-block;
	float:left;
	padding:3px;
	padding-right:8px;
	box-sizing:border-box;
	text-align:left;
	
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}
.proc_achat_circle_valid {
	width:28px;
	height:28px;
	border:1px solid #C03;
	border-radius: 50%;
	margin:auto;
}
.proc_achat_circle_no_valid {
	width:28px;
	height:28px;
	border:1px solid #666;
	border-radius: 50%;
	margin:auto;
}

.proc_achat_valid {
	width:20px;
	height:20px;
	margin:auto;
	margin-top:5px;
	padding:0;
	
	background-image:url(../images/case_coche_red.png);
	
	/*
	-webkit-clip-path: polygon(36% 86%, 91% 33%, 99% 42%, 37% 100%, 0 72%, 6% 64%);
	-moz-clip-path: polygon(36% 86%, 91% 33%, 99% 42%, 37% 100%, 0 72%, 6% 64%);
	-ms-clip-path: polygon(36% 86%, 91% 33%, 99% 42%, 37% 100%, 0 72%, 6% 64%);
	-o-clip-path: polygon(36% 86%, 91% 33%, 99% 42%, 37% 100%, 0 72%, 6% 64%);
	clip-path: polygon(36% 86%, 91% 33%, 99% 42%, 37% 100%, 0 72%, 6% 64%);
	*/
}
.proc_achat_circle_number {
	width:28px;
	height:28px;
	margin:auto;
	padding:0;
	box-sizing:border-box;
	
	font-family:Helvetica;
	font-size:13px;
	text-align:center;
	line-height:28px;
}
.proc_achat_barre {
	width:200px;
	height:1px;
	background-color:#C03;
	margin-left:50%;
	margin-top:-15px;
	position:relative;
	z-index:-1;
}


.bgcolor_pink {
	background-color:#C03;
}
.bgcolor_grey {
	background-color:#666;
}
.bgcolor_light_grey {
	background-color:#CCC;
}
.bgcolor_black {
	background-color:#000;
}
.bgcolor_white {
	background-color:#FFF;
}
.bgcolor_eee {
	background-color:#e8e8e8;
	/*
	border-top-right-radius:15px;
	border-bottom-left-radius:15px;
	*/
}



.texte_pink {
	color:#C03;
}
.texte_grey {
	color:#666;
}
.texte_black {
	color:#000;
}
.texte_white {
	color:#FFF;
}
/*--------------------------------------*/
/* PROC ACHAT				END -		*/
/*--------------------------------------*/

.pat_inv_titre {
	font-family: "Verdana";
	font-size: 24px;
}

.h_space_50{
	width: 100%;
	height: 50px;
	display: inline-block;
	float: left;
	box-sizing: border-box;
}

.alphabet_btn {
	width: 20px;
	height: 20px;
	display: inline-block;
	border-radius: 5px;
	border:1px solid #AAA;
	background-color: #AAA;
	text-align: center;
	padding-top: 7px;
	cursor: pointer;
}
.alphabet_btn:hover {
	background-color: #FFF;
}

.paire_pro_container {
	width: 33%; border-radius: 10px; background-color: #FFFFFF; display: inline-block; box-sizing: border-box; padding: 3px; cursor:pointer;
}
.paire_pro_box {
	width: 100%; height: 30px; border-radius: 10px; background-color: #DDD; display: inline-block; box-sizing: border-box; padding-top: 8px; cursor:pointer;
}



#animation_pause_btn {
	transform: scale(1);
}
#animation_pause_btn:hover {
	transform: scale(0.8);
}


.btn_top_play {
	width: 40px; height: 40px; border-radius: 10px; background-color: #066E2B; cursor:pointer;  font-family:Helvetica; font-size:20px; color:#FFF; border:none;
	transition-duration: 500ms;
	
}
.btn_top_play:hover {
	width: 30px; height: 30px;
	transition-duration: 500ms;
}


.btn_top_play:hover .btn_triangle_right{
	border-width: 0 7.5px 12px 7.5px;
	transition-duration: 500ms;
	margin-left:4px; margin-top:9px;
}


.animation_balle{
	margin-top:100%;
	animation-duration: 4s;
}
	
.arrow-right {
    width: 14px;
    height: 21px;
    background-color: #fff;

    clip-path: polygon(0 0, 0 100%, 100% 50%);
	
	margin-top: 8px;
	margin-left: 14px;
	cursor:pointer;
}

.arrow-down {
    width: 21px;
    height: 14px;
    background-color: #fff;

    clip-path: polygon(100% 0, 0 0, 50% 100%);
	
	margin-top: 13px;
	margin-left: 9px;
	cursor:pointer;
}

.arrow-left {
    width: 14px;
    height: 21px;
    background-color: #FFF;

    clip-path: polygon(100% 100%, 100% 0, 0 50%);
	
	margin-top: 8px;
	margin-left: 10px;
	cursor:pointer;
}


	
.arrow-right2 {
	margin-left: 5px; 
	margin-top:-2px;
	color:#000;
	font-size: 25px;
	
	cursor:pointer;
}

.arrow-down2 {
	margin-left:2px;
	color:#000;
	font-size: 25px;
	background-color: #FFF;
	
	cursor:pointer;
}

.arrow-left2 {
	margin-left: 1px;
	margin-top: -2px;
	color:#000;
	font-size: 25px;
	
	cursor:pointer;
}

#btn_arrow_l {
	cursor:pointer;
}
#btn_arrow_r {
	cursor:pointer;
}
#btn_arrow_b {
	cursor:pointer;
}


#btn_arrow_l:hover {
	/*background-color: rgb(202, 84, 67);*/
	src: url("../images/basket/boutons_bas_rouge_over.png");
	color: #FFF;
}
#btn_arrow_l:hover .arrow-left2 {
	/*background-color: rgb(202, 84, 67);*/
	src: url("../images/basket/boutons_bas_rouge_over.png");
	color: #FFF;
}
#btn_arrow_r:hover {
	/*background-color: rgb(54, 162, 235);*/
	src: url("../images/basket/boutons_bas_bleu_over.png");
	color: #FFF;
}
#btn_arrow_r:hover .arrow-right2 {
	/*background-color: rgb(54, 162, 235);*/
	src: url("../images/basket/boutons_bas_bleu_over.png");
	color: #FFF;
}
#btn_arrow_b:hover {
	/*background-color: #000;*/
	src: url("../images/basket/boutons_bas_gris_over.png");
	color: #FFF;
}
#btn_arrow_b:hover .arrow-down2 {
	/*background-color: #000;*/
	src: url("../images/basket/boutons_bas_gris_over.png");
	color: #FFF;
}

.cursive_aff {
	font-family: 'Dancing Script', cursive; font-size:30px; line-height:25px;
}

.capitale_aff {
	font-family: 'Roboto', sans-serif; font-weight:bold; font-size:25px;
}

.script_aff {
	font-family: 'Roboto', sans-serif; font-weight:bold; font-size:25px;
}

.script_aff_big {
	font-family: 'Helvetica', sans-serif; font-weight:bold; font-size:25px;
}

.btn_ear_audio {
	width: 100%;
	height: 100%;
	display: inline-block;
	float: left;
	box-sizing: border-box;
	background-color: #E0E0E0;
	text-decoration: none;
	color: #000000;
	font-family: 'Helevtica';
	font-size: 12px;
	padding: 5px;
	border-radius:4px;
	padding-top:8px;
}


.btn_ear_audio:hover {
	background-color: #BBB;
	color: #000000;
	font-family: 'Helevtica';
	font-size: 12px;
}

.btn_ear_audio:hover .circle{
	background-color: green;
}
.btn_ear_audio:hover .triangle{
	background-color: #000;
	border-color: green;
	border-left:green;
}


.title_session {
	font-weight: bold;
}

.basket_result_1_1 {
	width: 60px; height: 60px; display: inline-block; box-sizing: border-box;
}
.basket_result_1_2 {
	width: 60px; height: 60px; display: inline-block; box-sizing: border-box; margin-left: -40px;
}
.basket_result_2_1 {
	width: 60px; height: 60px; display: inline-block; box-sizing: border-box;
}
.basket_result_2_2 {
	width: 60px; height: 60px; display: inline-block; box-sizing: border-box; margin-left: -40px;
}

.loader_jouer_small {
  	width: 50px;
  	height: 50px;
  	/*border: 2px solid #FFF;*/
  	border-radius: 25px; 
	color: #FFF;
  	display: inline-block;
  	box-sizing: border-box;
  	position: relative;
	z-index: 1;
  	animation: pulse 1s linear infinite;
	/*background-color: green;
	border-color: darkgreen;*/
	border: 1px solid #9ed094;
	background: linear-gradient(180deg,#9ed094,#68a95b);
	cursor: pointer;
	font-family:'Dancing Script', cursive;
	font-size: 17px;
	font-weight: normal;
}
.loader_jouer_small:after {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  border: 5px solid #FFF;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: scaleUp 1s linear infinite;
}



.loader_jouer {
	position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: var(--jouer-pad-y) var(--jouer-pad-x);
  border: 0;
  border-radius: var(--jouer-radius);
  font-family: var(--jouer-font);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .3px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  /* corps du bouton (dégradé bonbon) */
  background:
    radial-gradient(120% 160% at 50% 0%,
      hsla(var(--jouer-h), var(--jouer-s), 78%, .95) 0%,
      hsla(var(--jouer-h), var(--jouer-s), 58%, 1) 35%,
      hsla(var(--jouer-h), var(--jouer-s), 46%, 1) 60%,
      hsla(var(--jouer-h), var(--jouer-s), 38%, 1) 100%);
  box-shadow:
    inset 0 -6px 10px hsla(var(--jouer-h), 60%, 26%, .35),   /* ombre interne pour le bombé */
    inset 0 8px 10px hsla(0,0%,100%, .35),                   /* lumière interne haut */
    0 6px 0 hsla(var(--jouer-h), 70%, 24%, 1),               /* petit “socle” cartoon */
    0 10px 18px hsla(var(--jouer-h), 60%, 20%, .35);         /* ombre portée douce */
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
	
	/*
  	width: 100px;
  	height: 100px;
  	border: 5px solid #FFF;
  	border-radius: 50px; color: #FFF;
  	display: none;
  	box-sizing: border-box;
  	position: relative;
  	animation: pulse 1s linear infinite;
	background-color: green;
	border-color: darkgreen;
	cursor: pointer;
	font-family:'Dancing Script', cursive;
	font-size: 34px;
	font-weight: normal;
	*/
}
/* Effet de survol */
.loader_jouer:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #1b6d2a, 0 14px 20px rgba(0,0,0,0.3);
}

/* Effet au clic */
.loader_jouer:active {
  transform: translateY(0);
  box-shadow: 0 4px 0 #1b6d2a, 0 8px 12px rgba(0,0,0,0.25);
}

/* Reflet brillant sur le bouton */
.loader_jouer::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 8%;
  right: 8%;
  height: 40%;
  border-radius: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0));
  pointer-events: none;
}

/* ⭐ Étoile scintillante animée */
.loader_jouer::after {
  content: "✦";
  position: absolute;
  top: 10px;
  right: 18px;
  font-size: 16px;
  color: #fffacd; /* jaune pâle */
  text-shadow: 0 0 8px #fff7a0, 0 0 12px #ffd700;
  animation: scintille 1.5s infinite ease-in-out;
  pointer-events: none;
}

/* Animation scintillante */
@keyframes scintille {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.8) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(10deg);
  }
}


/*
.loader_jouer:after {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  border: 5px solid #FFF;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: scaleUp 1s linear infinite;
}
*/




.loader_jouer_off {
  	width: 100px;
  	height: 100px;
  	border: 5px solid #FFF;
  	border-radius: 50px; color: #FFF;
  	display: inline-block;
  	box-sizing: border-box;
  	position: relative;
	background-color: grey;
	border-color: darkgrey;
	cursor: pointer;
	font-family:'Dancing Script', cursive;
	font-size: 34px;
	font-weight: normal;
}



@keyframes scaleUp {
  0% { transform: translate(-50%, -50%) scale(0) }
  60% , 100% { transform: translate(-50%, -50%)  scale(1)}
}
@keyframes pulse {
  0% , 60% , 100%{ transform:  scale(1) }
  80% { transform:  scale(1.2)}
}




#top_menu_back{
	width:100%; height: 100%; position:fixed; box-sizing:border-box; z-index:98; background-color: #000; opacity: 0.3; display: none;
}
#btn_play_back{
	width:100%; height: 100%; position:fixed; box-sizing:border-box; z-index:97; background-color: #000; opacity: 0.3; display: none;
}

#top_menu {
	
	transition: ease-out 500ms;
}
#top_menu:hover .menu_settings{

}



.resultat_box1 {
	max-width: 300px; height: 300px; border-radius:150px; margin: auto; border: 2px solid #AAA; background-color: #FFF; box-shadow: rgba(100, 100, 111, 1.2) 0px 7px 29px 0px;
}

.game_box_zone{
	width: 100%;
    display: inline-block;
    text-align: center;
    background-color: #E8DDDD;
    border-radius: 30px;
    overflow: hidden;
    /*border: 2px dashed #786161;*/
    box-shadow: rgba(100, 100, 111, 0.3) 0px 7px 29px 0px;
}

.left_round_box {
	width: 120px; height: 80px; display: inline-block; background-color: rgb(202, 84, 67); border-radius:60px; color: #000;
	/*box-shadow: rgba(100, 100, 111, 1.2) 0px 7px 29px 0px;*/
}
.right_round_box {
	width: 120px; height: 80px; display: inline-block; background-color: rgb(54, 162, 235); border-radius:60px; color: #000;
	/*box-shadow: rgba(100, 100, 111, 1.2) 0px 7px 29px 0px;*/
}


#game_word_center {
	 /*box-shadow: rgba(100, 100, 111, 0.8) 0px 7px 29px 0px;*/
}

#resultat_box1{
	width: 280px;
	height: 280px;
	border-radius: 140px;
}

.refleft_bille_css{
	width: 100px; height: 120px;
	margin-left:10px;
	margin-top: -90px; box-sizing: border-box; font-family: Helvetica; font-size: 22px; font-weight: bold;
}

#resultat_box1 {
	max-width: 280px;
	max-height: 280px;
	margin: auto;
	border: 0px solid #000;
	border-radius: 140px;
	background-color: #FFF;
	margin-bottom:10px;
	box-shadow: rgba(100, 100, 111, 1.2) 0px 7px 29px 0px;
}

#btn_arrow_l {
	width: 60px;
	height: 60px;
	border-radius:30px;
	/*background-color: rgb(202, 84, 67);*/
	border: 0px solid #000;
}

#btn_arrow_b {
	width: 60px;
	height: 60px;
	border-radius:30px;
	/*background-color: #FFF;*/
	border: 0px solid #000;
}
#btn_arrow_r {
	width: 60px;
	height: 60px;
	border-radius:30px;
	/*background-color: rgb(54, 162, 235);*/
	border: 0px solid #000;
}
#game_texte_1_texte {
	width: 100%; height:50px; margin-top: 29px; box-sizing: border-box; font-family: Helvetica; font-size: 22px; font-weight: bold;
}
#game_texte_2_texte {
	width: 100%; height:50px; margin-top: 29px; box-sizing: border-box; font-family: Helvetica; font-size: 22px; font-weight: bold;
}

.main_window_list {
	max-width:1000px; margin: auto; box-sizing: border-box;
}

.mid_window_list {
	max-width:900px; margin: auto; box-sizing: border-box;
}

.FondBasketL_box {
	width: auto; bottom: -10px; position:absolute; left:10%;
}
.FondBasketR_box {
	width: auto; bottom: -10px; position:absolute; right:10%;
}

.FondBasketL_box_seul {
	width: auto; bottom: -10px; position:fixed; left:10%; z-index: 9;
}
.FondBasketR_box_seul {
	width: auto; bottom: -10px; position:fixed; right:10%; z-index: 9;
}




.gg-export {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 18px;
    height: 14px;
    border: 2px solid;
    border-top: 0;
    box-shadow:
        -6px -8px 0 -6px,
        6px -8px 0 -6px
}
.gg-export::after,
.gg-export::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute
}
.gg-export::before {
    background: currentColor;
    width: 2px;
    height: 14px;
    right: 6px;
    bottom: 5px
}
.gg-export::after {
    width: 6px;
    height: 6px;
    border-left: 2px solid;
    border-top: 2px solid;
    right: 4px;
    bottom: 14px;
    transform: rotate(45deg)
}

.add_shadow {
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.remove_shadow {
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
}


.box_800 {
	text-align: center; padding: 40px; overflow: hidden; max-width: 800px; margin: auto;
}
.box_1000 {
	text-align: center; padding: 40px; overflow: hidden; max-width: 1000px; margin: auto;
}
.box_1200 {
	text-align: center; padding: 40px; overflow: hidden; max-width: 1200px; margin: auto;
}
.patient_game_box {
	width: 20%; min-height: 317px; display: inline-block; float: left; box-sizing: border-box; padding:10px; max-width: 150px;
	transform: scale(1);
	transition-duration: 500ms;
}
.patient_game_box:hover {
	transform: scale(1.05);
	transition-duration: 500ms;
}

.patient_game_box_ended {
	width: 20%; height: 317px; display: inline-block; float: left; box-sizing: border-box; padding:10px; max-width: 150px; opacity:0.5;
	
	transform: scale(1);
	transition-duration: 500ms;
}
.patient_game_box_ended:hover {
	opacity: 1;
	transform: scale(1.05);
	animation-duration: 500ms;
	transition-duration: 500ms;
}

.add_ball_red {
	width: 60px; height: 60px; display: inline-block; float:left; box-sizing: border-box;
}


.add_ball_red_0 {
	width: 60px; height: 60px; display: inline-block; float:left; box-sizing: border-box;
}
.add_ball_red_1 {
	width: 60px; height: 60px; display: inline-block; float:left; box-sizing: border-box; margin-left: -35px;
}
.add_ball_red_2 {
	width:60px; height:60px; display: inline-block; box-sizing: border-box; float:left; margin-left:-35px; margin-top:0px; padding-top:15px; color:#FFF; font-family:Helvetica; font-size:22px; font-weight:bold;
}
.add_ball_red_0_img {
	width: 60px;
}


.add_ball_grey_b_0 {
	width: 60px; height: 60px; display: inline-block; float:right; box-sizing: border-box;
}
.add_ball_grey_b_1 {
	width: 60px; height: 60px; display: inline-block; float:right; box-sizing: border-box; margin-right: -35px;
}
.add_ball_grey_b_2 {
	width:60px; height:60px; display: inline-block; box-sizing: border-box; float:right; margin-right:-35px; margin-top:0px; padding-top:15px; color:#FFF; font-family:Helvetica; font-size:22px; font-weight:bold;
}
.add_ball_grey_0_img {
	width: 60px;
}


.add_ball_grey_r_0 {
	width: 60px; height: 60px; display: inline-block; float:left; box-sizing: border-box;
}
.add_ball_grey_r_1 {
	width: 60px; height: 60px; display: inline-block; float:left; box-sizing: border-box; margin-left: -35px;
}
.add_ball_grey_r_2 {
	width:60px; height:60px; display: inline-block; box-sizing: border-box; float:left; margin-left:-35px; margin-top:0px; padding-top:15px; color:#FFF; font-family:Helvetica; font-size:22px; font-weight:bold;
}


.add_ball_blue_0 {
	width: 60px; height: 60px; display: inline-block; float:right; box-sizing: border-box;
}
.add_ball_blue_1 {
	width: 60px; height: 60px; display: inline-block; float:right; box-sizing: border-box; margin-right: -35px;
}
.add_ball_blue_2 {
	width:60px; height:60px; display: inline-block; box-sizing: border-box; float:right; margin-right:-35px; margin-top:0px; padding-top:15px; color:#FFF; font-family:Helvetica; font-size:22px; font-weight:bold;
}
.add_ball_blue_0_img {
	width: 60px;
}

.btn_triangle_down {
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 9.5px 15px 9.5px;
   border-color: transparent transparent #000000 transparent;
   transform: rotate(270deg);
}


.btn_triangle_right {
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 9.5px 15px 9.5px;
   border-color: transparent transparent #FFF transparent;
   transform: rotate(90deg);
	margin-left:4px; margin-top:12px; display: inline-block;
	animation-duration: 500ms;
}


#triangle-code{
 display : inline-block;
 height : 0;
 width : 0;
 border-top : 21px solid transparent;
 border-bottom : 21px solid transparent;
 border-left : 30px solid white;
}

.btn_quit_container {
	width: 70px; height: 70px; float: right; right: -45px; margin-top: 110px; position: relative; text-align: center;
}

.btn_big_play {
	width:100px; height: 100px; border-radius: 10px; background-color: #066E2B; cursor: pointer; border: none;
	transition-duration: 500ms;
}
.btn_big_play:hover {
	width:80px; height: 80px; border-radius: 10px; background-color: #34C367; cursor: pointer; border: none; margin-top: 10px;
}


a.btn_big_play_link:hover .btn_big_play_text{
	display: inline-block;
}

.btn_big_play_text {
	width: 100%; display: inline-block; box-sizing: border-box;
	transition-duration: 500ms;
	/*color:#066E2B;*/
	color:#FFF;
}

#arrow_d{
	transform: rotate(0deg);
}

#menu_btn_down {
	width: 100%; position: relative;  box-sizing: border-box; padding: 0px; margin-top:-25px; z-index:-1; display: none; margin:auto;
}

.full_box_slide {
	max-width: 1240px;
}

.btn_second {
	/*background-color: #FFF;*/
	padding: 10px;
	border-radius: 0px;
	border: none;
	/*border-right: 1px solid #000;*/
	cursor: pointer;
	font-family: 'Helvetica';
	font-size: 13px;
	cursor:pointer;
}
.btn_second:hover {
	/*border-right: 3px solid #000;*/
	/*text-decoration: underline;*/
	font-weight: bold;
}

#mon_compte_menu {
	 height: 40px;
}

#mon_compte_menu:hover {
	height: 100px;
}



.loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
    border-width: 3px 2px 3px 2px;
    border-style: solid dotted solid dotted;
    border-color: #de3500 rgba(255, 255, 255,0.3) #fff rgba(151, 107, 93, 0.3);
    border-radius: 50%;
    box-sizing: border-box;
    animation: 1s rotate linear infinite;
 }
 .loader:before , .loader:after{
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    border: 10px solid transparent;
    border-bottom-color:#fff;
    transform: translate(-10px, 19px) rotate(-35deg);
  }
 .loader:after {
    border-color: #de3500 #0000 #0000 #0000 ;
    transform: translate(32px, 3px) rotate(-35deg);
  }
   @keyframes rotate {
    100%{    transform: rotate(360deg)}
  }


.user_box_hover {
	width:100%; display: inline-block; float: left; box-sizing: border-box; border-radius:10px; border:1px solid #90caf9;
	background: linear-gradient(180deg, #90caf9, #64b5f6);
}
.user_box_hover:hover {
	background: linear-gradient(180deg, #64b5f6, #90caf9);
	border:1px solid #FFF;
}
.user_box_selected {
	width:100%; display: inline-block; float: left; box-sizing: border-box; border-radius:10px;
	/*background-color: #FFF;*/
	background: linear-gradient(180deg, #FFF, #EEE);
	border:1px solid #FFF;
}

.menu_top_white_box_off {
	width: 100%; right:0px; position: absolute; display: inline-block; text-align: right; padding:10px; background-color:inherit; 
}
.menu_top_white_box_on {
	width: 100%; right:0px; position: absolute; display: inline-block; text-align: right; padding:10px; background-color: #FFF; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
#menu_top_logo {
	display: none;
}




.user_box_green_hover {
	width:100%; display: inline-block; float: left; box-sizing: border-box; border-radius:10px; border:1px solid #90caf9;
	background: linear-gradient(180deg, #d7fdde, #80cf8d);
}
.user_box_green_hover:hover {
	background: linear-gradient(180deg, #d7fdde, #80cf8d);
	border:1px solid #FFF;
}




.result_ball_red {
	width: 16px;
	height: 16px;
	background-color: #F00;
	border-radius: 8px;
	margin: 2px;
	display: inline-block;
}
.result_ball_green {
	width: 16px;
	height: 16px;
	background-color: green;
	border-radius: 8px;
	margin: 2px;
	display: inline-block;
}
.result_ball_grey {
	width: 16px;
	height: 16px;
	background-color: grey;
	border-radius: 8px;
	margin: 2px;
	display: inline-block;
}
#header_top {
	width: 100%; height: 80px; display: inline-block; box-sizing: border-box; text-align: center; margin-top: 40px;
}
#open_box_btn {
	width: 300px; box-sizing: border-box; text-align: center; margin: auto; margin-top: 100px;
}
.btn_pause_1 {
	width: 6px; height: 20px; display: inline-block; box-sizing: border-box; background-color: #666;
}
.btn_pause_2 {
	width: 6px; height: 20px; display: inline-block; box-sizing: border-box; background-color: #666;
}

#btn_play_center_box {
	width: 100%; position:fixed; top: 150px; left:0px; z-index: 98; display: none;
}
#balle_in {
	width: 50px; height: 50px; border-radius: 25px;
}

#game_mobile_btn {
	width: 560px; height: 100%; margin: auto; box-sizing: border-box; text-align: center; margin-bottom:60px;
}

#btn_rouge_container {
	width:180px; height: 100%; display: inline-block; box-sizing: border-box; text-align: left;
}
#btn_gris_container {
	width:180px; height: 100%; display: inline-block; box-sizing: border-box;
}
#btn_bleu_container {
	width:180px; height: 100%; display: inline-block; box-sizing: border-box; text-align: right;
}

#open_btn_box {
	display: inline-block; cursor: pointer; width: 100px; height: 100px; border-radius:50px; padding: 0px; padding-top: 0px;
	width: 260px;
	/*box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;*/
}
#open_btn_box_text {
	width: 100%; display: inline-block; margin-top: 42px; color: #000;
}

#btn_demonstration {
	width: auto; display: inline-block; box-sizing: border-box; text-align: center; margin-top: 50px; border:1px dashed #000;border-radius: 10px; padding-top: 4px; padding-left: 6px;
}

#big_btn_jouer {
	width: 100%; display: inline-block; box-sizing: border-box; margin-top: 40px;
}

#balle_img {
	width: 50px;
}

#form_add_container {
	background-color: #fff; border-radius: 10px; padding: 40px;
}



#troncation_off {
	padding:5px; background-color: #EEE; border-top: 1px solid #aaa; border-left: 1px solid #aaa; border-right: 1px solid #aaa; border-bottom: solid #EEE; border-top-left-radius: 5px; border-top-right-radius: 5px; cursor:pointer;
}
#discrimination_off {
	padding:5px; background-color: #EEE; border-top: 1px solid #aaa; border-left: 1px solid #aaa; border-right: 1px solid #aaa; border-bottom: solid #EEE; border-top-left-radius: 5px; border-top-right-radius: 5px; cursor:pointer;
}
#expert_off {
	padding:5px; background-color: #EEE; border-top: 1px solid #aaa; border-left: 1px solid #aaa; border-right: 1px solid #aaa; border-bottom: solid #EEE;  border-top-left-radius: 5px; border-top-right-radius: 5px; cursor:pointer;
}
#troncation_off:hover {
	background-color: rgb(153, 153, 153);
	color: #FFF;
	border-bottom: solid rgb(153, 153, 153);
}
#discrimination_off:hover {
	background-color: rgb(153, 153, 153);
	color: #FFF;
	border-bottom: solid rgb(153, 153, 153);
}
#expert_off:hover {
	background-color: rgb(153, 153, 153);
	color: #FFF;
	border-bottom: solid rgb(153, 153, 153);
}


#add_discrimination_add_off {
	padding:5px; background-color: #EEE; border-top: 1px solid #aaa; border-left: 1px solid #aaa; border-right: 1px solid #aaa; border-bottom: solid #EEE; border-top-left-radius: 5px; border-top-right-radius: 5px; cursor:pointer;
}
#add_discrimination_add_off:hover {
	background-color: rgb(153, 153, 153);
	color: #FFF;
	border-bottom: solid rgb(153, 153, 153);
}
#add_troncation_add_off {
	padding:5px; background-color: #EEE; border-top: 1px solid #aaa; border-left: 1px solid #aaa; border-right: 1px solid #aaa; border-bottom: solid #EEE; border-top-left-radius: 5px; border-top-right-radius: 5px; cursor:pointer;
}
#add_troncation_add_off:hover {
	background-color: rgb(153, 153, 153);
	color: #FFF;
	border-bottom: solid rgb(153, 153, 153);
}

#add_expert_add_off {
	padding:5px; background-color: #EEE; border-top: 1px solid #aaa; border-left: 1px solid #aaa; border-right: 1px solid #aaa; border-bottom: solid #EEE; border-top-left-radius: 5px; border-top-right-radius: 5px; cursor:pointer;
}
#add_expert_add_off:hover {
	background-color: rgb(153, 153, 153);
	color: #FFF;
	border-bottom: solid rgb(153, 153, 153);
}


.congrat_left_img_box {
	display: none; box-sizing: border-box; width: auto; bottom: -15px; position:absolute; left:14%;
}
.congrat_right_img_box{
	display: none; box-sizing: border-box; width: auto; bottom: -15px; position:absolute; right:14%;
}
.congrat_left_img {
	width: 360px;
}
.congrat_right_img {
	width: 360px;
}
.congrat_final_img {
	width: 160px;
}


#btn_create_patient {
	width: 100%; display: none; float: left; box-sizing: border-box; text-align: center; padding-top: 10px;
}


#btn_eport_exercice_over {
	display: none;
}

.btn_red_cancel {
	padding: 5px; border-radius: 5px; border: 1px solid #F3A2A3; background-color: #F3A2A3; min-width: 150px; cursor: pointer;
}
.btn_green_ok {
	padding: 5px; border-radius: 5px; border: 1px solid #5CE67E; background-color: #5CE67E; min-width: 150px; cursor: pointer;
}
.btn_green_ok_off {
	padding: 5px; border-radius: 5px; border: 1px solid #ccc; background-color: #ccc; min-width: 150px; cursor:pointer; display: none;
}

#masque_enfants_basket {
	max-width: 800px;
}
#btn_rouge_off{
	display: none;
}
#after_demonstration {
	display: none;
}
#aff_demonstration {
	display: none;
}

a.btn_play_saw_a {
	display: inline-block;
}
.btn_play_saw_back {
	width: 18px; height: 18px; border-radius: 9px; background-color: #000;
}
.btn_play_saw {
	display : inline-block; height : 0; width : 0; border-top : 5px solid transparent; border-bottom : 5px solid transparent; border-left : 8px solid white; margin-top:4px; margin-left: 2px;
}
a.btn_play_saw_a:hover .btn_play_saw_back{
	background-color: #fff;
}
a.btn_play_saw_a:hover .btn_play_saw{
	border-left : 8px solid black;
}
.grey_box_1 {
	width: 95%; display: inline-block; float: right; box-sizing: border-box; border-radius: 10px; padding: 10px; border: 1px solid #DDD; background-color: #DDD; cursor: pointer;
}
.grey_box_2 {
	width: 95%; display: inline-block; float: right; box-sizing: border-box; border-radius: 10px; padding: 10px; padding-bottom: 100px; cursor: pointer;
}
.grey_box_1:hover {
	border: 1px solid #DDD; background-color: #BBB;
}


.btn_manuel_clean {
	width: 20px; height: 20px; border-radius: 20px; border: 1px solid #000; display: inline-block; background-color: red;
}
.btn_manuel_clean :hover{
	width: 25px; height: 25px; border-radius: 20px; border: 1px solid #000; display: inline-block; background-color: #000; color: #FFF;
}

.url_manuel_btn {
	display: inline-block; width: 24px; height: 24px; border-radius: 24px; border: 2px solid #000; background-color: #000; color: #FFF; font-family: 'Helvetica'; font-size: 12px;
}
.url_manuel_btn:hover {
	 border: 2px solid #000; background-color: #FFF; color: #000;
}
.menu_second_data{
	width: 250px; display: inline-block; height: 0px; overflow: hidden;
}

#menu_maison {
	width:40px;
	border:2px solid #000;
}
#menu_maison:hover{
	border:2px solid #54b0ff;
	transform: scale("1.1");
}




/* ===== Bouton "Jouer" – style enfantin ===== */
:root{
  /* Couleurs principales (vert bonbon) */
  --jouer-h: 130;          /* teinte (0–360) : 130=vert, 200=turquoise, 35=orange, 350=rose */
  --jouer-s: 65%;
  --jouer-l: 48%;
  /* Taille générale */
  --jouer-pad-y: 14px;
  --jouer-pad-x: 34px;
  --jouer-radius: 999px;   /* pastille bien arrondie */
  --jouer-font: "Baloo 2", "Fredoka", "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.btn-jouer{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: var(--jouer-pad-y) var(--jouer-pad-x);
  border: 0;
  border-radius: var(--jouer-radius);
  font-family: var(--jouer-font);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .3px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  /* corps du bouton (dégradé bonbon) */
  background:
    radial-gradient(120% 160% at 50% 0%,
      hsla(var(--jouer-h), var(--jouer-s), 78%, .95) 0%,
      hsla(var(--jouer-h), var(--jouer-s), 58%, 1) 35%,
      hsla(var(--jouer-h), var(--jouer-s), 46%, 1) 60%,
      hsla(var(--jouer-h), var(--jouer-s), 38%, 1) 100%);
  box-shadow:
    inset 0 -6px 10px hsla(var(--jouer-h), 60%, 26%, .35),   /* ombre interne pour le bombé */
    inset 0 8px 10px hsla(0,0%,100%, .35),                   /* lumière interne haut */
    0 6px 0 hsla(var(--jouer-h), 70%, 24%, 1),               /* petit “socle” cartoon */
    0 10px 18px hsla(var(--jouer-h), 60%, 20%, .35);         /* ombre portée douce */
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* reflet brillant (style jouet) */
.btn-jouer::before{
  content:"";
  position:absolute;
  inset: 6% 8% auto 8%;
  height: 42%;
  border-radius: calc(var(--jouer-radius) * 1.2);
  background: linear-gradient(to bottom,
              hsla(0,0%,100%, .55),
              hsla(0,0%,100%, .15) 70%,
              transparent 100%);
  pointer-events:none;
  filter: blur(.2px);
}

/* petite étoile scintillante pour un côté ludique */
.btn-jouer::after{
  content:"✦";
  position:absolute;
  right: 16px;
  top: 10px;
  font-size: 14px;
  opacity:.75;
  transform: rotate(-10deg);
}

/* texte avec léger contour pour lisibilité */
.btn-jouer__text{
  text-shadow:
    0 1px 0 hsla(var(--jouer-h), 80%, 20%, .55),
    0 2px 6px rgba(0,0,0,.25);
}

/* Survol / focus */
.btn-jouer:hover{ transform: translateY(-2px); }
.btn-jouer:focus-visible{
  outline: 3px solid hsl(210 100% 92%);
  outline-offset: 3px;
  box-shadow:
    inset 0 -6px 10px hsla(var(--jouer-h), 60%, 26%, .35),
    inset 0 8px 10px hsla(0,0%,100%, .35),
    0 8px 0 hsla(var(--jouer-h), 70%, 24%, 1),
    0 14px 22px hsla(var(--jouer-h), 60%, 20%, .45);
}

/* Clic */
.btn-jouer:active{
  transform: translateY(0);
  box-shadow:
    inset 0 -2px 8px hsla(var(--jouer-h), 60%, 26%, .45),
    inset 0 6px 8px hsla(0,0%,100%, .25),
    0 4px 0 hsla(var(--jouer-h), 70%, 24%, 1),
    0 6px 12px hsla(var(--jouer-h), 60%, 20%, .35);
  filter: brightness(.98);
}

.box_btn_retour {
	width:30%; display:inline-block; float: left; box-sizing: border-box; padding-top: 10px;
}

.big_box_yellow {
	idth: 100%; display: inline-block; float: left; box-sizing: border-box; padding: 10px; margin-top:30px; background: linear-gradient(180deg, #ffe082, #ffca28); border-top-left-radius:20px; border-top-right-radius:20px; border:1px solid #FFF;
}


/* Respecte la réduction d’animations */
@media (prefers-reduced-motion: reduce){
  .btn-jouer{ transition: none; }
}

#small_logout{
	display: none;
}
#small_account{
	display: none;
}
#small_logout_off{
	width: 36px; height: 36px; display: inline-block; float: left; box-sizing: border-box; background: url('../images/icon_logout.png'); background-size: cover; border-radius: 50px; z-index: 1; position: relative;
}
#small_logout_off:hover{
	background: url('../images/icon_logout_hover.png'); background-size: cover; 
}