/**
 * This file is part of DeltaCMS.
 */

/*					Ecrans >= 800px					*/

@media (min-width: 800px) {
/* Barre de membre */
	#bar #barLeft {
	   float: left;
	}
	#bar #barRight {
	   float: right;
	   font-size: 12px;
	}
/* Bannière */
	header {
	  margin: 0;
	}
/* Items du menu */
	.smallScreenFlags {
	   display: none;
	}
	nav #menu {
	   display: block;
	}
	nav #menuSpace {
	  width: 20px;
	}
/* correction du padding pour les sous-menu */
	#menu .navSub a{
		padding-bottom: 5px;
	}
/* Barre de navigation fixe quand le menu est en-dehors du site et fixe*/
	#navfixedlogout {
		position: sticky;
		top: 0;
		z-index: 10;
	}
	#navfixedconnected {
		top: 45px;
		z-index: 10;
		position: sticky;
	}
	#navfixedconnected .navSub,
	#navfixedlogout .navSub {
		pointer-events: none;
	}
	nav .iconSubExistLargeScreen{
		display:inline;
		margin-left :5px;
	}
	nav .iconSubExistSmallScreen{
		display:none;
	}
/* ajout pour terminale mobile avec écran large */
	nav .div_mobile{
		display: flex;
		align-items: center;
	}
	nav .ico_mobile{
		cursor: pointer;
		margin-left: 10px;
		margin-right: 15px
	}
/* Menu superposé à la bannière */
	nav#superimposed {
		position: var(--nav-position,relative);
		top: var(--nav-top,0);
		margin-top: var(--nav-margintop,0);
		z-index: 10;
	}
	nav#superimposed .navSub{
		z-index: -1;
		pointer-events:none;
	}
/* Overlayscrollbars */
	.navSub .os-scrollbar-track {
		background: rgba(0,0,0,0) !important;
	}
	.navSub .os-scrollbar-handle {
		background: var(--navsub-scrollbar,blue) !important;
	}
	.navSub .os-scrollbar.os-scrollbar-vertical {
		width: 8px !important;
		right: 3px !important;
	}
	.navSub .os-content {
		margin-right: 3px;
	}
	.navSub {
		overflow-y: auto;
		max-height: var(--submenu-max,300px) !important;
	}

/* Corps */
	section {
	   padding: var(--section-paddingtop,20px) 20px 20px;
	}
/* Grille */
	.col1 {
	   width: 8.33333333%;
	}
	.col2 {
	   width: 16.66666667%;
	}
	.col3 {
	   width: 25%;
	}
	.col4 {
	   width: 33.33333333%;
	}
	.col5 {
	   width: 41.66666667%;
	}
	.col6 {
	   width: 50%;
	}
	.col7 {
	   width: 58.33333333%;
	}
	.col8 {
	   width: 66.66666667%;
	}
	.col9 {
	   width: 75%;
	}
	.col10 {
	   width: 83.33333333%;
	}
	.col11 {
	   width: 91.66666667%;
	}
	.col12 {
	   width: 100%;
	}
	.offset1 {
	   margin-left: 8.33333333%;
	}
	.offset2 {
	   margin-left: 16.66666667%;
	}
	.offset3 {
	   margin-left: 25%;
	}
	.offset4 {
	   margin-left: 33.33333333%;
	}
	.offset5 {
	   margin-left: 41.66666667%;
	}
	.offset6 {
	   margin-left: 50%;
	}
	.offset7 {
	   margin-left: 58.33333333%;
	}
	.offset8 {
	   margin-left: 66.66666667%;
	}
	.offset9 {
	   margin-left: 75%;
	}
	.offset10 {
	   margin-left: 83.33333333%;
	}
	.offset11 {
	   margin-left: 91.66666667%;
	}
	/* templates tinymce */
	.imageFullWidth {
		margin: 0 -20px;
	}
	.blockFullWidth {
		margin: 0 -20px;
		padding: 10px;
	}
	/* VideoFullWidth */
	.videoFullWidth {
		overflow: hidden;
		position: relative;
		margin: 0 -20px;
	}
	.videoFullWidth video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.socialIconSvg {
		margin: 0 5px -10px 5px;
	}
	#footerSocials {
		display: flex;
		flex-wrap: nowrap;
		font-size: 15px;
		padding-bottom: 3px;
	}	
}


/*					Ecrans < 800px					*/

@media (max-width: 799px) {
/* Suppression des marges */
	body {
	   margin: 0 auto !important ;
	}
	/*body > header {
	   margin: 0 auto !important ;
	}*/
	.tippy-tooltip {
	   font-size: 0.8rem !important ;
	}
	section {
	   padding-right: 10px !important ;
	   padding-left: 10px !important ;
	   padding-bottom: 10px !important ;
	}
	header {
	   margin: 0;
	}
/* siteContainer */
	.siteContainer {
	   display: flex;
	   flex-direction: column;
	}
	.siteContainer > #contentLeft {
	   order: 1;
	}
	.siteContainer > #contentRight {
	   order: 3;
	}
	.siteContainer > #contentSite {
	   order: 2;
	}
/* Suppression des arrondis du site */
	#site  {
		border-radius: 0;
	}
/* Colonnes */
	.col2:has(.button), .col2:has(button) {
		width: 50%;
	}
/* Tableaux */
	.table thead {
	   font-size: 0.8em;
	}
/* Barre de membre */
	#bar {
	   text-align: center;
	   margin: 0 auto !important ;
	}
	#bar ul {
	   height: auto;
	}
	#bar #barSelectPage {
	   width: 40%;
	   font-size: 1em;
	}
	#bar #barLeft {
	   font-size: 1.2em;
	   float: none;
	}
	#bar #barRight {
	   font-size: 1.4em;
	}
	#bar #displayUsername {
	   display: none;
	}
/* Items du menu */
	body > nav {
	   margin: 0 auto !important ;
	}
	nav{
		padding: 0;
	}
	nav .iconSubExistLargeScreen{
		display:none;
	}
	nav .iconSubExistSmallScreen{
		display:inline;
		margin: auto 30vw auto auto;
	}
	nav  .delta-ico-plus, nav .delta-ico-minus{
		cursor: pointer;
		padding: 8px;
	}
	a.disabled-link{
		font-style:italic;
	}
	/*bandeau flex*/
	nav #toggle {
	   display: flex;
	   align-items: center;
	   float: none;
	}
	nav #toggle #burgerIcon{
		flex-basis:20vw;
		text-align: right;
	}
	nav #toggle #burgerText{
		flex-basis:80%;
		text-align: left;
		margin-left: 10px;
	}
	nav #toggle #burgerIcon1, nav #toggle #burgerIcon2 {
		flex-basis:40vw;
		text-align: left;
		padding-left: 10px;
	}
	nav #menuLeft {
	   display: block;
	   float: none;
	}
	nav #menuLeft {
	   flex-direction: column;
	   float: none;
	}
	nav #menuRight {
	   font-size: 2em;
	}
	nav #menu {
	   display: none;
	   text-align: left;
	   width: 100%;
	   height: auto;
	   max-height: 80vh;
	   float: left;
	   overflow-x: hidden;
	   overflow-y: auto;
	}
	nav #menu a{
		padding:10px 10px;
	}
	nav li {
	   display: block;
	}
	.navfixedburgerconnected  {
		position: fixed;
		z-index: 11;
		/*top: dans core.js.php*/
		padding: 0px;
		width:100%;
	}
	.navfixedburgerlogout{
		position: fixed;
		z-index: 10;
		top: 0;
		padding: 0px;
		width:100%;
	}
	.navfixedburgerconnected  #menu, .navburgerconnected #menu{
		height: auto;
		max-height: 60vh;
	}
	.navfixedburgerconnected  #menu a, .navfixedburgerlogout #menu a{
		padding: 10px 10px;
	}
/* Taille du menu hamburger */
	nav .delta-ico-menu {
	   font-size: 1.5em;
	}
	nav .delta-ico-cancel {
	   font-size: 1.5em;
	}
	nav #menuSpace {
		height: 10px;
	}
	nav #menu .navSub a {
		padding-left: 30px;
	}
	
/* Icone animée pour le sous-menu burger */
	nav span.delta-ico-down.iconSubExistSmallScreen{
	  transition: transform 0.25s ease;
	  font-size: 1.5em;
	  cursor: pointer;		
	}
	nav span.delta-ico-down.iconSubExistSmallScreen:not(.iconUp){
		  transform: rotate(0deg);
	}
	nav span.delta-ico-down.iconSubExistSmallScreen.iconUp {
	  transform: rotate(-180deg);
	}

/* Position du bloc dans le site sur les petits écrans */
	.smallScreenFlags {
	   display: inline-block;
	   position: relative;
	}
	.smallScreenInline {
	   display: inline;
	   line-height : 2;
	}
	.i18nFlag {
	   width: 25px;
	   /*margin: 0 10px 0 -10px;*/
	}
	.i18nFlagSelected {
	   width: 30px;
	   /*margin: 0 10px 0 -10px;*/
	}
	.delta-ico-login {
	   margin-right: 20px;
	}
/* Menu latéral */
	li.menuSideChild {
		line-height: 2;
	}
/* Conserve le pied de page sur une ligne */
	body > footer {
	   margin: 0 auto !important ;
	}
	footer .col4 {
	   width: 100%;
	}
	#footerCopyright,
	#footerText,
	#footerSocials {
	   display: flex;
	   flex-wrap: wrap;
	   justify-content: center;
	}
	#footerSocials {
	   font-size: 15px;
	}
/* Message sur les cookies */
	#cookieConsent {
	   width: 90%;
	}
/* Bannière masquable en petit écran */
	.bannerDisplay {
	   display: none;
	}
/* Largeur du menu */
	.navBodyWidth {
		width: 100%;
	}
/* Pour les formulaires */
	.formOuter{
		width: 100%;
	}
/* templates tinymce */
	.imageFullWidth {
		margin: 0 -10px;
	}
	.blockFullWidth {
		margin: 0 -10px;
		padding: 10px;
	}
	.videoFullWidth {
		position: relative;
		width: 100vw;
		height: var(--height-small-screen, 400px);
		left: 50%;
		margin-left: -50vw;
		overflow: hidden;
	}
	.videoFullWidth video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: var(--position-small-screen, 50%) center;
		display: block;
	}
	.socialIconSvg {
		margin: 0 5px;
		max-width: none;
	}
/* bouton d'aide par ? cerclé */
	span .delta-ico-help {
		display: none;
	}
}

/*					Autres tailles d'écrans					*/

/* Tableau sur les écrans de petites tailles */
@media (max-width: 668px) {
	.table thead {
	   display: none;
	}
}

/* Tableau sur les écrans de très petites tailles */
@media (max-width: 480px) {
	.table tr {
	   display: block;
	   margin-bottom: 10px;
	}
	.table td {
	   display: block;
	   text-align: right;
	   width: auto;
	}
}

