/*---------------------------------------
      Éléments généraux
  ---------------------------------------*/
body
{
  margin: 0px;
}

h1, h2, h3, h4, h5, h6 { max-width: 100vw; }

@media screen and (max-width: 700px){ 
  ul { padding-left: 0px;}
}

/*---------------------------------------
 *  Bandeau
 * --------------------------------------*/
#Bandeau
{
  padding-top: 1em;
  width: 80%;
  margin: auto;
}
@media screen and (max-width: 700px){ #Bandeau{ width: auto; } }
  
#BandeauMobile { display: none; }  

@media screen and (max-width: 500px){
  #BandeauDesktop { display: none }
  #BandeauMobile { display: block; }  
}

/*---------------------------------------
      boite login
  ---------------------------------------*/

#boiteLogin
{
  width: 40em;
  text-align: center;
  margin: auto;
  border: none;
  padding: 0px;
}

#boiteLogin ul.ui-widget-header
{
  background: transparent;
  border: none;
}

@media screen and (max-width: 700px){ 
  #boiteLogin { width: auto; }
}

/*---------------------------------------
     boutons tabs
  ---------------------------------------*/

#ConteneurBoutonsTabs {}

#ConteneurBoutonsTabs .ui-buttonset
{ 
  margin: 0em; 
}

#ConteneurBoutonsTabs .ui-button
{
  margin-left: 0.1em;
  margin-top: 5px;
  margin-right: 1em;
  border-radius: 0px;
  border-top-left-radius: 15px 20px;
  border-top-right-radius: 15px 20px;
  width:150px;
  border: 0px;
  height: 30px;
}

#ConteneurBoutonsTabs .ui-state-active
{
background: #efce94;
}

#ConteneurBoutonsTabs .ui-button img
{
  float: left;
  padding-left: 10px;
  padding-top: 2px;
}

#ConteneurBoutonsTabs .ui-button-text
{
padding: 0px;
padding-top: 2px;
}


/*-------------------------------------------
 *  Elements JQuery
 *-------------------------------------------*/

#ui-datepicker-div{ font-size: 12px; } 


/*
 * 
 */
option.archive { color: grey; }

/*---------------------------------------------
 *  Menus
 *---------------------------------------------*/
.ui-widget.WpMenu
{
  font-size: 0.85em;
}

/*----------------------------------------------
 *  Formulaires
 * ---------------------------------------------*/

.avecExemple.vide { color: gray; text-align: center; }

.cadreInfo {
    font-size: 0.75em;
}

.cadreInfo ul {
    list-style-type: disc;
    list-style-image: url('../images/pucev.png');
    list-style-position: inside;
}

.boutonRefObjFrm { display: none; }

.frmNouvDem .cadreInfo {
    border: 1px gray solid;
    padding: 0.5em;
    margin-top: 0.75em;
    text-align: justify;
    max-width: 88vw;
}

/****************/
/* Fil d'ariane */
/****************/

.frmFilArianeListePages { margin-top: -6px; margin-bottom: 4px; }

.frmFilArianeListePages .frmContLienPage {
    white-space: nowrap;
}

.frmFilArianeListePages .frmContLienPage a.frmLienPage 
{
  text-decoration: none;
  background: #e1e1e1;
  color: white;
  padding: 6px;
  display: inline-block;
  margin-right: 22px;
  height: 32px;    
}

.frmFilArianeListePages .frmContLienPage:after { 
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 20px solid #e1e1e1;
  display: inline-block;
  content: "";
  position: absolute;
  margin-left: -22px;
  border-top-width: 22px;
  border-bottom-width: 22px;
}

.frmFilArianeListePages .frmContLienPage:before { 
  border-top: 16px solid #e1e1e1;
  border-bottom: 16px solid #e1e1e1;
  border-left: 20px solid transparent;
  display: inline-block;
  content: "";
  position: absolute;
  margin-left: -20px;
  border-top-width: 22px;
  border-bottom-width: 22px;
}
.frmFilArianeListePages .frmContLienPage:first-child:before { display: none; }
/*.frmFilArianeListePages a:last-child:after { display: none; }*/

.frmFilArianeListePages .frmContLienPage.etapeActive a.frmLienPage, .frmFilArianeListePages .frmContLienPage.etapeFaite a.frmLienPage { background: gray; }
.frmFilArianeListePages .frmContLienPage.etapeActive:after, .frmFilArianeListePages .frmContLienPage.etapeFaite:after	{ border-left-color: gray; }
.frmFilArianeListePages .frmContLienPage.etapeActive:before, .frmFilArianeListePages .frmContLienPage.etapeFaite:before	{ border-top-color: gray; border-bottom-color: gray; }

/* Hack petits écrans: n'affiche que le lien actif */
@media (max-width: 639px)
{
  .frmFilArianeListePages .frmContLienPage:before { display: none; }
  .frmFilArianeListePages .frmContLienPage:after { display: none; }
  .frmFilArianeListePages .frmContLienPage:not(.etapeActive) { display: none; }
  
  .frmFilArianeListePages .frmContLienPage { background: none; color: gray; }
  .frmFilArianeListePages .frmContLienPage .etape { display: inline-block; font-size: 1.25em; }
  .frmFilArianeListePages .frmContLienPage .titre { display: inline-block; font-size: 1.25em; }
  
  .frmFilArianeListePages .frmContLienPage.etapeActive a.frmLienPage { width: 90vw; height: auto; background: #adadad; display: block; }
  .frmFilArianeListePages .frmContLienPage.etapeActive a.frmLienPage span.etape { display: inline; }
}

.frmFilArianeListePages a.frmLienPage .etape
{
    display: block;
    font-size: 0.9em;
    font-weight: bold;
}

.frmFilArianeListePages a.frmLienPage .titre
{
  font-size: 0.8em;
}

/***********************
 * (mettre titre ici)
 * *********************/


.frmPage { position: relative; display: inline-block }

.frmNouvDem .contChampsBlocChamps li { 
  display: inline-block;
}

.frmNouvDem ul ul.contChampsBlocChamps { vertical-align: top; }

.frmNouvDem ul li { max-width: 95vw; }

.frmNouvDem ul li textarea { max-width: 90vw; }

.frmNouvDem ul.etape1 ul.contChampsBlocChamps .titre:after { content: '\a' ; white-space: pre; }
.frmNouvDem ul.etape2 ul.contChampsBlocChamps .titre:after { content: '' }
.frmNouvDem ul.etape2 li.blocChamps ul li { margin-left: 1.5em; }
.frmNouvDem ul.etape2 li.blocChamps ul { padding-left: 1em; }

.frmNouvDem ul.etape1 ul.contChampsChampRepet li .titre { display: none; }

.frmNouvDem ul.etape1 ul.contChampsChampRepet ul {
  display: inline-block;
  padding-left: 0px;
}

.frmNouvDem ul.etape1 ul.contChampsChampRepet li li .titre { display: inline; }



/*----------------------------------------------
 *  Formulaires: copie mail
 * ---------------------------------------------*/



.frmNouvDem.versionMail .versionTexte {
    background: #e2ffca;
    border: 3px dashed green;
    border-radius: 25px;
    text-align: left;
    padding: 20px;
}

.frmNouvDem.versionMail ul
{
    list-style-type: square;
}

/*****************************/
/* Intégration des videos!!! */
/*****************************/

#conteneurVideos .videoDescPage {
    max-width: 100%;
    max-height: 35vh;
}

@media (orientation: landscape) and (min-width: 900px) { #conteneurVideos .videoDescPage { max-width: 42vw; max-height: 42vh; } }

#gardeEspaceVideo { display: none; width: 100%;  height: 35vh; }

#conteneurVideos {
  max-width: 100%;
  max-height: 35vh;
  text-align: center;
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 5;
  background: white;
  height: auto;
}
  

#conteneurVideos.reduit { position: fixed; } 
#conteneurVideos.reduitAnim 
{ 
  width: 100px; 
  height: 100px; 
  bottom: 0px; 
  left: 0px;
}

#conteneurVideos.reduitAnim:after {
    content: "";
    width: 55px;
    height: 64px;
    background: url("../images/clicAgrandir.png") no-repeat;
    top: -5px;
    right: -21px;
    position: absolute;
    display: inline-block;
}

#conteneurVideos .conteneurIconePlay {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  background-image: url('../images/icone_play.png');
  background-repeat: no-repeat;
  background-position: center;
}

#conteneurVideos .masqueCharge {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  background-image: url('../images/chargeVideo.png');
  background-color: rgba(255, 255, 255, 0.5);
  background-repeat: no-repeat;
  background-position: center;
}



@media (orientation: landscape) and (min-width: 900px)
{
	#conteneurVideos
	{
		max-height: 50%;
		max-width: 30%;
		position: fixed;
		bottom: 0px;
		right: 0px;
		left: unset;
		width: unset;
	}
}

@media (orientation: landscape) and (min-width: 1600px)
{
	#conteneurVideos
	{
		right: 5%;
		bottom: 10%;
	}
}


@media (orientation: landscape) and (min-height: 1000px)
{
  #conteneurVideos { bottom: 32%; }
}

@media (max-height: 300px)
{
  #conteneurVideos { display: none; }
}