@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@import "admin_settings";
@import "foundation";

@import "admin_bloc_article";

// Or selectively include components
// @import
//   "foundation/components/accordion",
//   "foundation/components/alert-boxes",
//   "foundation/components/block-grid",
//   "foundation/components/breadcrumbs",
//   "foundation/components/button-groups",
//   "foundation/components/buttons",
//   "foundation/components/clearing",
//   "foundation/components/dropdown",
//   "foundation/components/dropdown-buttons",
//   "foundation/components/flex-video",
//   "foundation/components/forms",
//   "foundation/components/grid",
//   "foundation/components/inline-lists",
//   "foundation/components/joyride",
//   "foundation/components/keystrokes",
//   "foundation/components/labels",
//   "foundation/components/magellan",
//   "foundation/components/orbit",
//   "foundation/components/pagination",
//   "foundation/components/panels",
//   "foundation/components/pricing-tables",
//   "foundation/components/progress-bars",
//   "foundation/components/reveal",
//   "foundation/components/side-nav",
//   "foundation/components/split-buttons",
//   "foundation/components/sub-nav",
//   "foundation/components/switches",
//   "foundation/components/tables",
//   "foundation/components/tabs",
//   "foundation/components/thumbs",
//   "foundation/components/tooltips",
//   "foundation/components/top-bar",
//   "foundation/components/type",
//   "foundation/components/offcanvas",
//   "foundation/components/visibility";



/**
* LES VARIABLES
**/
$breakpoint-sidenav: 61.3125em;//Breakpoint à partir duquel le menu s'affiche à gauche
$largeur-sidenav: rem-calc(250);//Pour les medium
$bg-sidenav: hsl(204, 14.7%, 13.3%);//hsl(214.6,30%,17);


textarea{
	height: auto;//Pour que le height des textareas dépende de l'attribut rows
}

form .required label:after {//Affiche l'astérisque pour les champs .required
	color: $alert-color;
	content: '*';
	display:inline;
}


// Page de connexion
.wrapper-login{

	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

	height: 100%;
	width: 100%;

	.inner-login{
		
		#login{
			@include panel($smoke);
			border: none;
			margin-bottom: 0;
		}
	}
}


//Supprime le outline lorsqu'il y a eu focus avec la souris (cf what-input.js)
[data-whatinput="mouse"] :focus {
	outline: none;
}
//Supprime le outline lorsqu'il y a eu focus avec touch sur un écran tactile (cf what-input.js)
[data-whatinput="touch"] :focus {
	outline: none;
}


html, body{
	width: 100%;
	height: 100%;
}

.wrapper{

	width: 100%;
	height: 100%;
	
	position: relative;

	.sidenav{
		position: fixed;
		z-index: 99;

		width: 100%;
		//height: 100vh;
		max-height: 100vh;

		overflow: hidden;

		.menu{ //Masque le menu (height 0, visibility et opacity plutôt que display car on utilise une transition)
			height: 0;
			visibility: hidden;
			opacity: 0;
			-webkit-transition: visibility 0s, opacity 0.5s linear;
			-moz-transition: visibility 0s, opacity 0.5s linear;
			transition: visibility 0s, opacity 0.5s linear;
		}
	}
	.main-content{
		padding-top: rem-calc(60);//Descent le contenu de main-content pour laisser de la place pour le menu
		padding-bottom: rem-calc(60);

		&:not(.tabs-content) > .content{
			min-height: 75vh;
		}
	}

	//QUAND LE MENU EST OUVERT
	&.with-menu-open{//Le .wrapper a aussi la classe .with-menu-open quand le menu est est ouvert (ajout de cette classe en JS)
		.sidenav{

			height: 100vh;
			overflow: auto;
			-webkit-overflow-scrolling: touch; // mobile safari

			.menu{ //Réaffiche le menu
				height: auto;
				visibility: visible;
				opacity: 1;

				padding-bottom: rem-calc(20);
			}
		}
		.entete{
			background-color: darken($bg-sidenav, 5%);
		}
	}

	// BREAKPOINT
	@media only screen and (min-width: $breakpoint-sidenav){
		.sidenav{
			width: $largeur-sidenav;
			height: 100vh;
			overflow: auto;
			-webkit-overflow-scrolling: touch; // mobile safari
			
			.menu-icon{
				display: none;
			}

			.menu{
				//menu toujours visible à partir du breakpoint-sidenav
				height: auto;
				visibility: visible;
				opacity: 1;
				padding-bottom: rem-calc(5);
			}
		}
		.entete{
			background-color: transparent!important;
		}
		.main-content{
			margin-left: $largeur-sidenav;
		}
	}

}

.sidenav{
	$pad-left-S: rem-calc(20);//L'espace de gauche sur l'entete et sur les li pour les smalls
	$pad-left-M: rem-calc(15);//L'espace de gauche sur l'entete et sur les li pour les mediums (à partir du $breakpoint-sidenav)

	//font-family: 'Ubuntu', sans-serif;

	background-color: $bg-sidenav;
	color: white;

	.entete{
		padding: rem-calc(10) $pad-left-S;
		margin: 0;

		a{
			color: white;
		}

		.titre-site{
			text-transform: uppercase;
		}
	}

	.utilisateur{
		background-color: darken($bg-sidenav, 5%);
		
		.avatar{
			text-align: center;
			font-size: rem-calc(60);
			img{
				border-radius: 50%;
				width: rem-calc(100);

				background-color: lighten($bg-sidenav, 10%);
			}
		}
		.pseudo{
			text-align: center;
		}
		.deconnexion{
			text-align: center;
			padding-bottom: rem-calc(12);
			a{
				color: lighten($primary-color,32%);
				&:hover{
					color: $primary-color;
				}
			}
		}
	}

	.menu{
		font-size: rem-calc(16);
		
		.button{
			font-size: inherit;
			padding: rem-calc(7 20)!important;
			margin: 0 $pad-left-S rem-calc(2);
			text-align: center;
		}

		a{
			color: inherit;
			display: block;
		}
		ul{ //Les listes d'une manière générale dans le .menu
			list-style: none;
			font-size: inherit;
			margin-bottom: 0;
			margin-left: $pad-left-S;
			
			& > li{

				& > a{
					padding-left: $pad-left-S;
					position: relative;
					
					.count{
						position: absolute;
						right: rem-calc(16+12+12 + 10);//Correspond à la largeur de la flèche + un petit espace
						background-color: mix(#fff, $bg-sidenav, 20%);
						border-radius: rem-calc(3);
						font-size: rem-calc(12);
						line-height: rem-calc(12);
						padding: rem-calc(4);
						color: white!important;
						font-weight: bold;

						//centrage vertical
						top: 50%;
					    bottom: auto;
					    -ms-transform: translateY(-50%); /* IE 9 */
						-webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
					    transform: translateY(-50%);

					    &.alert{
					    	background-color: $alert-color;
					    }
					    &.warning{
					    	background-color: $warning-color;
					    }
					    &.success{
					    	background-color: $success-color;
					    }
					}
				}

				&.has-children{

					position: relative;

					& > .arrow{ //Le + qui permet de dérouler la liste
						position: absolute;
						z-index: 999;
						height: rem-calc(16 + 12 + 12);//i.e le font-size + padding-top + padding-bottom
						width: rem-calc(16 + 12 + 12);//Même chose que le height (carré)
						right: 0;
						top: 0;
					    content: '';
						background: url(/img/arrow.svg) darken($bg-sidenav, 5%) no-repeat center center;//rem-calc(10) rem-calc(10);//La moitié du padding

						-ms-transform: rotate(90deg); /* IE 9 */
					    -ms-transform-origin: 50% 50%; /* IE 9 */
					    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
					    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
					    transform: rotate(90deg);
					    transform-origin: 50% 50%;
					}

					&.open{
						& > .arrow{
							-ms-transform: rotate(0deg); /* IE 9 */
						    -ms-transform-origin: 50% 50%; /* IE 9 */
						    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
						    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
						    transform: rotate(0deg);
						    transform-origin: 50% 50%;
						}
					}

					&:not(.open){
						& > ul{
							display: none;
						}
					}
				}
			}
		}

		li:not(.titre-label){//Les li d'une manière générale dans le .menu qui ne sont pas des labels
			line-height: rem-calc(16);
			& > a{
				padding-top: rem-calc(12);
				padding-bottom: rem-calc(12);
			}
		}

		& > ul{ //Les listes racines de .menu
			margin-left: 0;
			padding: rem-calc(10) 0;
			//border-top: 1px solid darken($bg-sidenav, 5%);

			& > li{//Une rubrique directe d'une liste racine du menu

				&:not(.titre-label){
					//border-bottom: 1px solid mix(#fff, $bg-sidenav, 10);
					border-bottom: 2px solid transparent;
				}

				& > ul{//Les listes de second niveau uniquement
					background-color: darken($bg-sidenav, 5%);
					margin-left: 0;

					a:hover{
						color: $primary-color;
					}
				}

				&.active{
					& > a{
						box-shadow: inset 5px 0 0 $primary-color;
						background-color: mix(#fff, $bg-sidenav, 5%);
					}
				}

				&.open{
					& > a{
						background-color: mix(#fff, $bg-sidenav, 5%);
					}
				}

				& > a[class^="fi-"]{//Classe commençant par fi- (i.e une icône de foundation dans un lien à la racine du menu)

					$icon-size: rem-calc(26);//définit la taille de l'icône

					padding-left: $pad-left-S + $icon-size;//l'espace de gauche (existant) + la largeur de l'icone
					&:before{//L'icône en elle-même
						color: mix(#fff, $bg-sidenav, 20%);
						position: absolute;
						font-size: $icon-size;
						width: $icon-size;
						text-align: center;
						left: $pad-left-S - rem-calc(3);//l'espace de gauche (existant) -3px car les icones sont centrées et on enleve le petit décalage que cela peut engendrer
						//centrage vertical
						top: 50%;
					    bottom: auto;
					    -ms-transform: translateY(-50%); /* IE 9 */
						-webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
					    transform: translateY(-50%);
					}
				}
			}

			ul{ //Les listes du second niveau et plus
				li.active > a{
					color: lighten($primary-color,20%);
				}
			}
		}

		.titre-label{
			font-size: rem-calc(12);
			text-transform: uppercase;
			color: mix(#fff, $bg-sidenav, 20%);
			font-weight: bold;
			letter-spacing: rem-calc(1);
			padding-left: $pad-left-S;
		}

	}

	.divider{
		display: block;
		height: 0.1px;
		border-top: 1px solid darken($bg-sidenav,2%);
	}
		
	// BREAKPOINT
	@media only screen and (min-width: $breakpoint-sidenav){

		.entete{
			margin: 0;
			padding-left: $pad-left-S;
			padding-right: $pad-left-S;
			background-color: darken($bg-sidenav, 5%)!important;

			.titre-site{
				text-align: center;
			}
		}
		.utilisateur{
			.avatar{
				line-height: 1rem;//Corrige pb décalage
				img{
					width: rem-calc(60);
				}
			}
		}
		.menu{
			font-size: rem-calc(14);

			.button{
				padding: rem-calc(5 20)!important;
				margin: 0 $pad-left-M rem-calc(2);
			}

			ul{ //Les listes d'une manière générale dans le .menu
				margin-left: $pad-left-M;
				& > li{
					& > a{
						padding-left: $pad-left-M;
						.count{
							right: rem-calc(12+9+9 + 5);//Correspond à la largeur de la flèche + un petit espace
							padding: rem-calc(4 7 6);
							font-size: rem-calc(14);
							line-height: rem-calc(10);
							font-weight: bold;
						}
					}

					&.has-children{
						& > .arrow{//le +
							cursor: pointer;
							height: rem-calc(12 + 9 + 9);//i.e le font-size + padding-top + padding-bottom
							width: rem-calc(12 + 9 + 9);//Même chose que le height (carré)
							background-color: transparent;
							&:hover{
								background-color: darken($bg-sidenav, 5%);
							}
						}
						&.open{
							& > .arrow{
								background-color: darken($bg-sidenav, 5%);
							}
						}
					}
				}
			}

			li:not(.titre-label){//Les li d'une manière générale dans le .menu qui ne sont pas des labels
				line-height: rem-calc(12);
				& > a{
					padding-top: rem-calc(9);
					padding-bottom: rem-calc(9);
				}
			}

			& > ul{ //Les listes racines de .menu

				padding: rem-calc(10) 0 0;
				margin-left: 0;
				margin-bottom: rem-calc(10);
				& > li:not(.titre-label){
					& > a:hover{
						background-color: mix(#fff, $bg-sidenav, 5%);
					}
				}

				& > li > a[class^="fi-"]{//Une icone (classe .fi-***) de foundation dans un lien à la racine

					$icon-size: rem-calc(22);//définit la taille de l'icône

					padding-left: $pad-left-M + $icon-size;//l'espace de gauche (existant) + la largeur de l'icone
					&:before{//L'icône en elle-même
						font-size: $icon-size;
						width: $icon-size;
						text-align: center;
						left: $pad-left-M - rem-calc(3);////l'espace de gauche (existant) -3px car les icones sont centrées et on enleve le petit décalage que cela peut engendrer
					}
				}
			}

			.titre-label{
				font-size: rem-calc(10);
				padding: rem-calc(5) 0 rem-calc(5) $pad-left-M;
			}

		}

	}
}


.menu-icon{
	float: right;
	position: relative;
	display: block;
	width: rem-calc(34);
	height: rem-calc(25);
	margin-right: 0;
	/* hide text */
	overflow: hidden;
	white-space: nowrap;
	color: transparent;

	span, span::before, span::after {
		/* hamburger icon in CSS */
		position: absolute;
		display: inline-block;
		height: rem-calc(3);
		width: rem-calc(24);
		background: white;
	}

	span {
		/* line in the center */
		position: absolute;
		top: 50%;
		right: rem-calc(5);
		margin-top: rem-calc(-2);
		-webkit-transition: background .2s;
		-moz-transition: background .2s;
		transition: background .2s;
	}

	span::before, span::after {
		/* other 2 lines */
		content: '';
		right: 0;
		/* Force Hardware Acceleration in WebKit */
		-ms-transform: translateZ(0); /* IE 9 */
		-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
	    transform: translateZ(0);
		
		-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
    	backface-visibility: hidden;
		
		-ms-transform-origin: 0% 50%; /* IE 9 */
	    -webkit-transform-origin: 0% 50%; /* Chrome, Safari, Opera */
	    transform-origin: 0% 50%;

		-webkit-transition: transform .2s;
		-moz-transition: transform .2s;
		transition: transform .2s;
	}

	span::before {
		/* menu icon top line */
		top: rem-calc(-6);
	}

	span::after {
		/* menu icon bottom line */
		top: rem-calc(6);
	}
}
.wrapper.with-menu-open{
	.menu-icon{
		span {
			/* hide line in the center */
			background: rgba(white, 0);
		}

		span::before, span::after {
			/* keep visible other 2 lines */
			background: rgba(white, 1);
		}

		span::before {
			-ms-transform: translateX(4px) translateY(-3px) rotate(45deg); /* IE 9 */
			-webkit-transform: translateX(4px) translateY(-3px) rotate(45deg); /* Chrome, Safari, Opera */
		    transform: translateX(4px) translateY(-3px) rotate(45deg);
		}

		span::after {
			-ms-transform: translateX(4px) translateY(2px) rotate(-45deg); /* IE 9 */
			-webkit-transform: translateX(4px) translateY(2px) rotate(-45deg); /* Chrome, Safari, Opera */
		    transform: translateX(4px) translateY(2px) rotate(-45deg);
		}
	}
}


// Le chemin (breadcrumbs)

ul.chemin{
	@include crumb-container;
	
	border-bottom: 1px solid $crumb-slash-color;
	font-weight: bold;

	li{
		@include crumbs;
	}
}



//Le pied de page
footer{
	font-size: rem-calc(12);
	font-weight: bold;
	//border-top: 1px solid $gainsboro;
	//margin-top: rem-calc(20)!important;
	padding-top: rem-calc(10);
	text-align: center;
	color: $steel;
	ul, p{
		font-size: inherit;
		font-weight: inherit;
	}

	@media only screen and (min-width: $breakpoint-sidenav){
		text-align: right;
	}
}

// Cake erreurs dans les formulaires
.input.error{
	border-left: 5px solid $alert-color;
	padding-left: rem-calc(7);

	& > input {
		border-color: $alert-color;
	}
}

// Cake Messages d'erreur dans les formulaires
.error-message{
	background: $alert-color;
	color: white;
	font-size: rem-calc(12);
	font-weight: bold;
	padding: rem-calc(2 7);
	margin-bottom: $form-spacing;
	ul{//Quand il y a une liste d'erreurs pour un même champ
		list-style:none;
		margin:0;
		font-size:rem-calc(12);
	}
}


//Aide

.aide{
	@include panel($smoke);
	border: none;
	color: #666;
	font-style:italic;
	font-size:rem-calc(14);
	line-height: rem-calc(18);

	h1,h2,h3,h4,h5,h6,li{
		color:inherit;
	}
	p, ul{
		font-size: inherit;
		font-style: inherit;
		line-height: inherit;
		color: inherit;
		margin-bottom: rem-calc(7);
	}
	ul{
		margin-bottom: 0;
		li{
			margin-bottom: rem-calc(7);
		}
	}
}

// Item-box

ul.liste-items{
	list-style:none;
}

.item-box{
	position: relative;
	padding-bottom:rem-calc(10)!important;

	& > .contenu{
		padding:rem-calc(10 20 0);
		font-size:rem-calc(14);
		border: 2px solid $smoke;//$price-table-border;
		//@include single-transition();
	}


	& > .action{

		$button-pip: rem-calc(6);
		$button-font-size:rem-calc(20);

	    position: absolute;
	    opacity: 0.5;
	    top: rem-calc(4);
	    right: rem-calc(14);//Alignement à droite par défaut (i.e pour un item-box de type block grid)
	    line-height: rem-calc(16);

	    .button{
	    	padding: $button-pip $button-pip;
	    	margin-bottom:0;
	    	font-size:$button-font-size;
	    	border:$price-table-border;
	    }

	    .dropdown{
	    	$dropdown-button-padding: $button-pip * 4 !default;//Distance du contenu du bouton par rapport au bord droit
			$dropdown-button-pip-size: $button-pip !default;//taille du triangle
			$dropdown-button-pip-opposite: $button-pip !default;//distance du triangle par rapport au bord droit du bouton
			$dropdown-button-pip-top: -$button-pip / 2 !default;//Distance du triangle par rapport au bord supérieur

	    	@extend .button;//utilise le style de .button (cf juste au dessus de .dropdown)
	    	/*padding:0 $button-pip;
			margin-bottom:0;
	    	font-size:$button-font-size;*/

	    	padding-#{$opposite-direction}: $dropdown-button-padding;
	    	
	    	&:after {
		      border-width: $dropdown-button-pip-size;//taille du triangle
		      #{$opposite-direction}: $dropdown-button-pip-opposite;//distance du triangle par rapport au bord droit du bouton
		      margin-top: $dropdown-button-pip-top;
		    }
	    }
	}

	&.rubrique-nav{ // Le panel pour administrer les rubriques
		font-size: rem-calc(12);

		ul, p{
			font-size: inherit;
		}

		ul.liste-sousrubriques{
			a{
				color: white;
			}
			li[class^="fi-"]{//Classe commençant par fi- (i.e une icône de foundation)
				margin-left: rem-calc(10);
				&:before{//L'icône en elle-même
					color: mix(#fff, $bg-sidenav, 20%);
					margin-right: rem-calc(5);
				}
			}
		}

		.contenu{
			background: mix(#fff, $bg-sidenav, 5%);
			color: white;

			h1,h2,h3,h4,h5,h6{
				color: white;
			}
		}

		.action{
			right: rem-calc(4);
		}
	}
}
.item-box.radius > .contenu {
	border-radius:$global-radius;
}
.item-box:hover{
	& > .contenu{
		border-color: $body-font-color;
	}
	& > .action{
		opacity:1;
	}
}
html.touch .item-box .action{ //Pour les écrans tactiles (html.touch de modernizr.js) les boutons d'actions sont toujours
	opacity: 1!important;
}


.bloc-article{
	@include bloc-article();
}


// Elément fantôme (i.e où l'élément va être déplacé)

li.fantome
{
	color:darken($secondary-color,20%);
	font-style:italic;
	//background:$primary-color;
	border:2px dashed $primary-color;
	list-style: none;
	//-webkit-border-radius: 10px;
	//border-radius: 10px;
	margin-bottom: 1.25em;
	padding: 0.6875em 1.3125em 0.75em 0.6875em;

	&:before{
		content:"déplacer ici ?";
	}
}

//Liste des sous-rubriques
ul.liste-sousrubriques, ul.liste-rubriques, ol.liste-sousrubriques, ol.liste-rubriques{
	li.movable{
		border: 1px dashed #ddd;
		padding-left: rem-calc(10);
		cursor: move;
		margin-bottom: rem-calc(5);
	}
	li.fantome{
		margin-bottom: rem-calc(5);
		padding: 0;
	}
}

//Super-rubriques
ul.super-liste-rubriques, ol.super-liste-rubriques{
	li{
		margin-bottom: rem-calc(15);

		&.movable{
			padding-left: 0;
			background: rgba(255,255,255,0.5);
		}

		.titre{
			background: white;
			padding-left: rem-calc(10);
		}

		.actions{
			padding-left: rem-calc(10);
			border-left: 1px solid #ccc;
			span{
				margin-left: rem-calc(5);
				margin-right: rem-calc(5);
			}
		}

		.types{
			padding-right: rem-calc(10);
			i{
				margin-left: rem-calc(5);
				margin-right: rem-calc(5);
			}
		}

		.admin-config{
			background: white;
			padding-left: rem-calc(10);
			padding-bottom: rem-calc(7);
		}

		ul, ol{
			margin-top: rem-calc(15);
			margin-bottom: rem-calc(15);
		}

		&:hover{
			> .titre, > .admin-config{
				background: #ddd;
			}
		}
	}
}


// CSS POUR LE PLUGIN FILEMANAGER

ul.files-container{
	list-style: none;
	margin-left: 0;
	margin-bottom: 0;
}
ul.files-container li.file-item{
	position: relative;
	margin-bottom: rem-calc(10);

	.contenu{
		padding: rem-calc(15);
		font-size: rem-calc(14);
		background-color: lighten($info-color, 15%);
	}

	.action{
		$button-pip: rem-calc(4);
		$button-font-size:rem-calc(14);

		position: absolute;
	    top: rem-calc(4);
	    right: rem-calc(4);
	    line-height:rem-calc(16);

	    .button{
	    	padding:0 $button-pip;
	    	margin-bottom:0;
	    	font-size:$button-font-size;
	    	border:$price-table-border;
	    }
	}
}

input.file-legend {
	margin-bottom: rem-calc(3);
}

.item-box .thumbnail-file { // Preview d'un fichier (déjà uploadé) dans un fileupload
	display: flex;
	justify-content: center;
	align-items: center;
	background: $base;
	//overflow: hidden;
	img, video {
		max-width: 100%;
		max-height: 100%;
		//object-fit: cover; // L'image (ou la video) couvre tout le slide en gardant le ratio
	}
}

.depot-fichiers/*Zone de drag and drop*/
{
	@include panel(lighten($panel-bg, 1%), rem-calc(30 20 20 20));
	@include single-transition();
	margin-bottom: $form-spacing;
	border: 3px dashed $input-border-color;
	text-align: center;
	color: $input-border-color;
	h1,h2,h3,h4,h5,h6,p,ul {
		color: inherit;
	}
	&.dropping{//Lorsqu'on tient un fichier au dessus du dépôt de fichiers
		border-color: $primary-color;
		background-color: lighten($info-color,15%);
		color: $primary-color;
	}

	i{
		font-size: rem-calc(22);
		margin-bottom: rem-calc(10);
	}

	label{//Le label (de l'input file) utilisé pour déclencher la sélection de fichier
		//On donne au label l'apparence d'un bouton
		@include button($button-tny, $secondary-color);
	}

	input[type=file]{//Le champ de fichier en lui-même ne doit pas être visible
		//au lieu de le mettre en hidden on le rend visible au niveau du navigateur mais invisible au niveau de l'utilisateur
		width: 0.1px;
		height: 0.1px;
		opacity: 0;
		overflow: hidden;
		position: absolute;
		z-index: -1;
	}
}

.error .depot-fichiers{
	margin-bottom:0;
}

// Checkbox et son label (dans un .action d'item box) pour supprimer un fichier lors de la soumission du formulaire
.action .input.delete-file-checkbox {
	display: inline-block;
	position: relative;
	input[type="checkbox"] {
		display: none; // Cachée par défaut si pas cochée
		
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
		margin-bottom: 0; // Annule le margin-bottom
		cursor: pointer;

		&:checked {
			display: initial;
		}
	}
	label {
		@include button(0, $secondary-color);

		// Cf .item-box .action .button 
		padding: rem-calc(6) rem-calc(6);
		margin-bottom: 0;
		font-size: rem-calc(20);
		border: $price-table-border;
	}
}
.fileupload .item-box:has(.input.delete-file-checkbox input[type="checkbox"]:checked) { // Rend transparent le .contenu et .content d'une item-box qui contient un .delete-file-checkbox dont l'input checkbox est cochée
	.content, .contenu {
		opacity: .1;
	}
}



//CSS POUR LE SCEDITOR

.sceditor-container{
	border-color: $input-border-color!important;
	border-width: $input-border-width!important;
	margin-bottom: $form-spacing!important;
	iframe{
		width: 98%!important;//pour que la zone de texte épouse mieux la largeur du .sceditor-container
	}

	//Les boutons youtube et vimeo dans le sceditor
	.sceditor-button-youtube div { background: url('/img/sceditor/youtube-16x16.png')!important; }
	.sceditor-button-vimeo div { background: url('/img/sceditor/vimeo-16x16.png')!important; }
	.sceditor-button-dailymotion div { background: url('/img/sceditor/dailymotion-16x16.png')!important; }
}
.error .sceditor-container{//En cas d'erreur de validation de l'éditor
	margin-bottom:0!important;
	border-color: $alert-color!important;
}
.sceditor-toolbar{
	background: $white-smoke!important;
	.sceditor-group{
		background: transparent!important;
	}
}