@font-face{	
    font-family: 'Cicle';
    src: url('goodies/fonts/New_Cicle_Fina.eot');
    src: url('goodies/fonts/New_Cicle_Fina.eot'), url('fonts/New_Cicle_Fina.woff') format('woff'), url('fonts/New_Cicle_Fina.ttf') format('truetype'), url('fonts/New_Cicle_Fina.svg#New_Cicle_Fina.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
*::-webkit-scrollbar{
    width: 5px;
    height: 5px;
    background-color: transparent;
}
*::-webkit-scrollbar-thumb{
    background: silver;
}
.dev{
	display:none;
}
body{
	font-size: 1.5em;
	margin:auto;
	max-width: 800px !important;
	overflow: auto;
	
}
input{
	padding:0;
	border:none;
}
input::focus{
	border:2px solide chocolate;
}
fieldset{
	margin: 0;
	padding: 0;
	border: none;
}
.sous-liste{
	display: flex;
	flex-direction: column;
	padding: 0px;
	list-style: none;
	background-color: silver;
	position: absolute;
	top:5em;
	width: -webkit-fill-available;
	width: -moz-available;
	z-index: 99;
	left: 9999;
}
.sous-liste li{
	display: flex!important;
	justify-content:flex-start!important;
}
.sous-liste li a{
	padding: 0px!important;
}
.sous-liste img{
	width: 50px;
	height: 50px;
	margin: 0px;
	padding: 0px 5px!important;
}
.sous-liste span{
	float: right;
	padding-left: 10px; 
}
ul{
	list-style-type: none;
	padding: 0px;
	margin: 0px;	
}
a{
	display: block;
    color: black;
    text-decoration: none;
	cursor: pointer;
}
form{
	margin: 0;
}
footer{
    position: absolute;
    bottom: 3em;
    max-height: 0;
    display: block;
    max-width: inherit;
    width: 100%;    
}
i{
	cursor: pointer;
}
p{
	margin: 0;
}
table{
	font-size:80%;
}
table tr{
	background-color: whitesmoke;
    border: 3px solid white;
}

.menu{
    display: block;
    margin: 0;
    position: fixed;
    top: 0;
	width: 800px!important;
	z-index: 99;
}
.menu-info{
	color:black;margin-left:10px;
}
.menu ul{
	background-image:url(../goodies/entete.jpg);
	display: flex;
	position: relative;
	flex-direction: row;
	height: inherit;
	margin: 0px;
	-webkit-padding-start: 0px;
	-moz-padding-start: 0px;
	width: inherit;
	background-color: silver;
}
.menu ul li:first-child{
	width: -webkit-fill-available;
	width: -moz-available;
}
.menu ul li:nth-child(2){
	width: fit-content;
}
.menu ul li:last-child{
	width: fit-content;
}
.menu ul li{
	line-height: 2em;
	padding: 10px;
	max-height: fit-content;
}
.menu ul li a{
	height: -webkit-fill-available;
	height: -moz-available;  
	width: -webkit-fill-available;
	width: -moz-availablee;
}
.menu ul li a span{
	display: block;
	margin-right : 10px;
}

.ligne-menu svg{
	height: 50px;
}	
.ligne-menu a{
	cursor: pointer;
	padding: 10px;
}	
.ligne-menu label{
	max-width: 85%;
	width: 85%;
	line-height: 3;
}
.ligne-menu{
	display: flex;
}

.on-air>.hidden{
    display : none
}
.on-air::after{
    content: url("./dots.svg");
    display: block;
    margin: auto; 
}

.sous-menu{
	margin-top :5px;
	overflow-y: scroll;
    height: calc( 100% - 6.5em );	
}
.sous-menu li{
    display: flex;
/*    justify-content: space-between;	*/
}

nav{
	margin-top: calc( 3em + 5px );
}
nav:not(:has(.searchzone)) .scroll{
	overflow-y: scroll;
	overflow-x: hidden;
    height: calc( 99% - 3em );	
}
nav:has(.searchzone) .scroll{
/*	width: max-content;*/
	overflow-y: scroll;
    overflow-x: hidden;
    height: calc( 99% - 6.5em );	
}
nav table:nth-child(2){
	margin-top: 3px;
}
nav:not(:has(.login)) ul li{
	background-color: #f8f8f8; 
	line-height: 2;
	padding : 10px;
	border:2px solid white;
}

nav	li[data-filtre] label{
	max-width: 85%;
	width: 85%;
	cursor: pointer;
	margin-left: 10px;
}	
nav	li[data-filtre] a svg{
	height: 50px;
}	
nav	li[data-filtre] label svg{
	height: 25px;
}	
nav	li[data-filtre] a{
	cursor: pointer;
}

.alpha{
	text-align: left;
}
.sous-menu li .down,
.alpha .down{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;	
}
.num{
	text-align: right!important;
	font-variant-numeric: ordinal;
}

.close{
	width: 2em;
	padding: 5px;
	float: right;
}

.infos-hidden{
	display:none;
}

.landscape{
	color : gray;
}
.liste, .panier{
	height: max-content;
}
.liste svg, .panier svg{
	height: 50px;
}
.logout{
	height: 1.5em;
	padding: 25px;
}
.logout svg{
	height: 1.5em;
}

.modal{
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background: hsla(0,0%,0%,0.4);
	z-index: 999;
	opacity: 0;
	-webkit-transition: opacity5msease-in;
	-moz-transition: opacity5msease-in;
	pointer-events: none;
}
.modal>div{
	width: 800px;
    height: 100%;
    background-color: whitesmoke;
    margin: 0 auto;
    display: flex;
    flex-direction: column;	
}
.modal:has(div){
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background: hsla(0,0%,0%,0.4);
	z-index: 999;
	opacity: initial;
	-webkit-transition: opacity5msease-in;
	-moz-transition: opacity5msease-in;	
	pointer-events: auto;
}

.panier-plus[data-lignes="0"]{
	display: none!important;

}
.panier-plus[data-lignes]{
	display: block;
    position: relative;
    top: -2em;
    right: -2.5em;		
}

.searchzone{
    display: flex; 
    align-items: center;
    gap: 5px;
}
.searchzone input{
    min-width: calc(100% - 3em);
    line-height: 3em;
    padding: 0px 10px;
	font-size:inherit;
}
.block {
	border: 0;
	width: 796px;
	max-width: 800px;
	margin: auto;
}
.block thead {
	display: none;
}
.block tr {
	border-bottom: 2px solid black;
	display: block;
	margin-bottom: .625em;
	max-width: -webkit-fill-available;
	padding: 2px 5px;
}
.block td {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;		
	display: block;
	padding	: 5px;
	margin: auto;
}
.block tr>.alpha{
	text-align: right;
} 
.block td::before {
	content: attr(data-label);
	float: left;
	text-transform: uppercase;
	padding-right: 5%;
}
.block td:last-child {
	border-bottom: 0;
}

.deconnexion{
	display:flex;
	justify-content:center;
}
.deconnexion a{
	width:50px;
}
.pseudo-tableau{
	display: table;
	min-width: 100%;
	max-width: 100%;
}
.pseudo-tableau ul li{
	display: table-row;
	min-width: 100%;
	max-width: 100%;
	line-height : 2;
	background-color: whitesmoke;
	line-height:2em!important;
}	
.pseudo-tableau ul li div{
	display: table-cell;
	padding : 0 15;
	font-size: 70%;
	border-bottom: 3px solid white!important;	
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;			
}
.pseudo-tableau-head{
	display: table-header-group;
	font-weight: bold;
	text-align: center;
}
.pseudo-tableau-body{
	display: table-row-group;
}
.pseudo-tableau-body .infos-show{
	display:block;
	width: 90%;
	margin: auto;
	border : 3px solid grey;
}
.pseudo-tableau-body .infos-show li:not([class="statut"]) {
	display:flex;
	justify-content:space-between;
	background-color: silver;
	border : none;
}
.pseudo-tableau-body .infos-show .alpha{
	width: 15em;
	min-width: 12em;
}
.pseudo-tableau-body .infos-show .num{
	width: 3em;
	min-width: 3em;
}
.pseudo-tableau-body .infos-show{
	font-size: 1em;
	position: absolute;	
	width: fit-content!important;
	background-color: white;
}
.pseudo-tableau-body .infos-show tbody{
	max-height: calc( 5.5em + 36px );
	overflow: auto;
	display: block;
	width: fit-content;		
}		
.pseudo-tableau-body .infos-show td{
	padding: 5px;		
}	
.pseudo-tableau-foot{
	display: table-footer-group;
	font-weight: bold;
}

.sous-menu .infos-show{
	width: 80%;
	margin: auto;
}
.statut{
	display:flex;
	justify-content:space-between;
	background-color: gray!important;
	border : none!important;	
}

.tableau-fix,
.tableau{
	width: 796px;
	max-width: 800px;
	border-collapse: collapse;
}
.tableau-fix thead tr td,
.tableau thead tr td{
	font-weight: bold;
	text-align: center;
}
.tableau-fix tbody tr td:first-child i,
.tableau tbody tr td:first-child i{
	position: relative;
	left: -20px;
	bottom: -55px;
	height: fit-content;
}
.tableau-fix tbody tr td:first-child i svg,
.tableau tbody tr td:first-child i svg{
	width: 20px;
}	
.tableau-fix tbody tr td:has(.image),
.tableau tbody tr td:has(.image){
	text-align: center;
    max-width: 120px;
    white-space: normal;
    display: flex;
}
.tableau-fix tr,
.tableau tr{
	line-height : 2;
	background-color: whitesmoke;
    border: 3px solid white;
	width: 796px;
	max-width: 800px;
}
.tableau-fix tfoot tr td,
.tableau tfoot tr td{
	font-weight: bold;
}
.tableau-fix tr td,	
.tableau tr td{	
	padding : 0 15;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 250px
}
.tableau tr td[data-label="Livrable"]{
	text-align: center;
}
.up,.down{
	cursor: pointer;
}
.RED{
	border : 4px solid red!important;
}


@media only screen and (max-width: 425px){
	body {
		font-size: 1.5em;
		width: 100%;
	} 
	nav{
		margin-top : calc( 4em + 10px )!important;
		width: -moz-fill-available;
		width: -webkit-fill-available;
	}
	nav	li[data-filtre] label{
		line-height: 3;
	}
	nav li[data-filtre] a svg {
		height: 50px!important;
	}	
	nav:has(.searchzone) .scroll{
		width: 100%;		
	}
	nav:not(:has(.searchzone)){
		margin-top: calc(4em + 10px)!important;
		
	}
	nav:not(:has(.searchzone)) .scroll{
		height: calc( 99% - 4em );
	}
	.menu{
		width: 100%!important;
	}	
	.menu-info{
		font-size:70%;
	}
	.menu ul{
		max-height: 70px!important;
	}
	.menu ul li {
		line-height: 3;
	}	
	.liste svg, .panier svg {
		height: 50px!important;
	}
	.ligne-menu a{
		padding: 0px 10px;
	}		
	nav li[data-filtre] a svg,
	.ligne-menu svg{
		height: 50px;
	}
	.modal>div{
		width: 100%;
	}
	
	.block {
		width: 92%!important;
		max-width: 92%!important;
	}
	.block tr {
		width: 92%!important;
		max-width: 92%!important;
	}	
	.landscape{
		display : none!important;
	}	
	
	.tableau {
		border: 0;
		width: 96%;
		max-width: 425;
		margin: auto;
	}
	.tableau thead{
		display: none;
	}
	.tableau tr{
		border-bottom: 2px solid black;
		display: block;
		width: 100%;
		max-width: 425;
	}
	.tableau tr td{
		width: 96%;
		max-width:  425px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;		
		display: block;
		padding: 0px 5px 0px 2px;
		margin: auto;
	}
	.tableau tbody tr td:first-child i{
		left: -17px;
	}
	.tableau tbody tr td:first-child i svg{
		width: 15px;
	}		
	.tableau tr>.alpha{
		text-align: right;
	} 
	.tableau tr td::before{
		content: attr(data-label);
		float: left;
		text-transform: uppercase;
		padding-right: 5%;
	}
	.tableau tr td:last-child{
		border-bottom: 0;
	}
	.tableau tr td[data-label="Livrable"]{
		background-color: white;
		font-weight: bold;
		text-align: right;
	}
	.pseudo-tableau ul li div {
		padding: 0 2;
	}		
}
@media only screen and (max-width: 900px){
	body {
		font-size: 1em;
		width: 100%;
	}
	nav{
		margin-top : calc( 3em + 10px );
		width: -moz-fill-available;
		width: -webkit-fill-available;		
	}
	nav:has(.searchzone) .scroll{
		height: 100%;	
	}		
	nav:not(:has(.searchzone)) .scroll{
		height: 100%;	
	}
	nav:not(:has(.login)) ul li {
		padding: 5px;
	}		
	nav li[data-filtre] a svg {
		height: 30px;
	}	
	
	.landscape{
		display : initial;
	}
	.searchzone input {
    min-width: calc(100% - 3em) !important;
	}	
	.menu{
		width: 100%!important;
		max-width: 800px;
	}
	.menu ul{
		max-height: 50px;
	}	
	.deconnexion a{
		width:30px;
	}
	.liste svg, .panier svg {
		height: 30px;
	}
	.ligne-menu a{
		padding: 0px 10px;
	}	
	.modal>div{
		width: 100%;
	}	
	.block {
		width: 98%;
		max-width: 100%;
	}
	.block tr {
		width: 98%;
		max-width: 100%;
	}

	.pseudo-tableau ul li div {
		padding: 0 2;
	}
	.tableau-fix,
	.tableau{
		width: 100%;
		max-width: 100%;
	}
	.tableau-fix tr td,
	.tableau tr td{
    	padding: 0px 5px 0px 2px;
	}
	.tableau-fix tbody tr td:first-child i{
		bottom: -30px;
	}	
}