:root
	{
	--couleur-fond:#FFFFFF;
	--couleur-texte:#000000;
	--couleur-lien:#336699;
	--couleur-spe:#336699;
	--couleur-plus:GhostWhite;
	--hauteur-ligne: 20px;
	--police-tout:Arial, sans serif;
	--couleur-fondtrans:rgba(255,255,255,0.9);
	--couleur-gloss:brown;
	
	}
html{
  background-color: #EEE;
}
body {
  position:absolute;
  
  margin:10px ;
   border: solid 1px silver;
  border-radius: 5px;
}
.search{

    margin: 0 auto;
 margin-top: 20px;
  text-transform: uppercase;

  font-weight:bold;
  width: 90%;
  
}

.search label{
      border: 1px solid silver;
    background-color: #f9f9f9;
  
}
.overflow-scroll {
   
background-color:var(--couleur-fond);
}

.overflow-scroll > .scroll{
     overflow:hidden;
color:var(--couleur-lien);
  display: flex;
            flex-direction: column;
    }
.result{
 margin-top: 2px;
  margin-left: 12px;
height:100%;
 overflow:auto;  
flex-grow: 1;
}
.result ul{

}
.result li{
  list-style-type: none;
  margin-top: 8px;
  background-color:var(--couleur-fond);
  width:80%;
  border: solid 1px silver;
  padding: 8px;
  border-radius: 3px 3px 10px 3px;
}

.result li {
  color: grey;
}
.result li span {
margin-bottom: 2px;
  display:block;
}
.result li span:first-child {
  color: black;
margin-bottom:10px;
 text-transform:uppercase;
}
.result li div.lien {
text-align:center;
margin:10px auto;
  /*text-transform:uppercase;*/
}
.result li div.lien a{
display:inline;
}

.result li a{
display:block;
  font-weight: normal;
  color:var(--couleur-lien);
  text-decoration: none;
  width:100%;
  cursor:pointer;
}

.result li:hover {
  
  background-color:var(--couleur-lien);
}

.result li:hover a{
  font-weight: bold;
  color:var(--couleur-fond);
  text-decoration: none;
}

.result.dir li:hover {
  font-weight: normal;
  background-color:#EEE;
  text-decoration: none;
}
.result.dir li:hover a{
  font-weight: normal;
  text-decoration: none;
  color:var(--couleur-lien);
}

.result.dir li:hover a:hover{

  text-decoration: underline;

}

.result li span{
  margin-left: 10px;
}

a.download:hover{
  cursor:pointer; 
}
.item { border-bottom-style: none }
.authentification .auth{
  background-color:#00A3EE;
  color: #fff;

}

.auth{
  padding:25px;
  min-height: 70px;
  border:0px;
}
.auth h1{
  color: #fff;
  font-size:1.5em;
}
.auth .button-positive{
  color: #1da1f2;
    background-color: #fff;
    border-color: #1da1f2;
    font-weight: bold;
}
.auth .button-positive:hover{
  color: #fff;
  border:1px solid #fff !important;
background-color:#0956a3;
  
  font-weight: bold
}
.authentification input[type="text"]{
  border:0px!important;
  font-size: 1.2em!important;
}
.authentification{
  margin: 0 auto;
    width: 300px;
    margin-top: 100px;

}
.intro h3{
  margin-top:20px;
  font-size:1em;
}

@media print {
.onglets.right{
  display: none;
}
body {
overflow: initial;
background-color: #fff;
}
ion-nav {
overflow: initial !important;
}
.scroll-content {
position: relative;
overflow:visible!important;
}
ion-header {
display: none !important;
}
header nav, footer {
display: none;
}

ion-fab {
display: none;
}
.pane {
position: initial;
}
p a {
word-wrap: break-word;
}
ion-side-menu{
display: none;
}
input{
  border:1px solid #000!important;
}
}

/*.item h2 {
font-size: 1.3em!important;
    margin-top: 20px;
}*/

.tab{

   width: 400px;
    display: grid;
    grid-template-columns: 4fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px;

}

a.button-positive:hover{
  background-color:#fff;
  border-color: #387ef5;
  color:#387ef5!important;
}
ion-item.intro p{
  margin-top:20px;
}
.txtintro{
max-width: 800px;
    margin: 0 auto;
  }
.txtintro.intro1{
font-size:1.1em;
line-height:1.2em;
color:#0000;
}
.onglets{
    display:flex;
    grid-gap: 20px;
    justify-content:center;
}

.onglets.right{
  justify-content:right;
  width: 75%;
}
.onglets.left{
  justify-content:left;
  width: 25%;
}

.button.ion-printer.icon-left:before,.button.ion-android-download.icon-left:before{
font-size: 35px;
    line-height: 60px;
}
.button.ion-printer.icon-left,.button.ion-android-download.icon-left{
  font-size: 1.4em;
    line-height: 2.8em;
}

.button.ion-android-download.icon-left{
  color:#ccc;
}

.help:hover{
  background-color:dodgerblue;
  color:#fff!important;
}


h2.label{
  margin-top:20px;
  font-size:1.1em;
}

a.actif{
background-color:#fff!important;
color:#000!important;
font-size: 1.3em;
font-weight: 600
display:none;

}

.toggle-calm{
  border:0px solid #fff!important;
}
.item-toggle .toggle {
  left: 0px!important;
  right:inherit;
}

.item-toggle span{
  margin-left : 50px;
}

.input-label{
  float: left;
  width:auto;
  max-width: 400px;
  
}
label input{
  background-color:#f2eded;
  padding-left:5px!important;
  margin:5px;
}

textarea{
  border:1px #888 solid ;
  background-color: #f1f2f1;
  padding:5px;
  display: inline-block;
  height: 100px;
  font-size:1em;
  width:100%;
}

.mailtoinscrits:before{
  color:#d7cbf2;
  font-size: 20px!important;
}



a.help{
    color:dodgerblue!important;
    background-color:#fff;
    border: 2px solid dodgerblue;
    padding: 5px 10px 5px 10px;
    border-radius: 60%;
    /*position: absolute;*/
    right: 20px;
    margin-top: -20px;
    display: inline-block;
    /* height: 40px; */
    margin: 2px;
    cursor:pointer;

}

}
a.help:hover{

background-color:dodgerblue!important;
color:#fff!important;
}

.desc h3{
margin-top: 10px;
}
.desc ul{
  list-style: disc;
    margin-left: 20px;
    margin-bottom: 5px;
}
.desc a{
  color: #3F51B5!important;
}
.desc a:hover{
  color:dodgerblue!important;
}

.grid{
  gap:15px;
}

.grid div.left{
  align-self: stretch;
  place-self: end;
}
.grid div.right{
  place-self: start;
}






/*update offre*/
.alerte{
  min-height: 1em;
    max-height: 1em;
    font-size: 0.8em;
    padding: 0px;
    margin: 0px;
    /* max-height: 0.4em; */
    line-height: 0.4em;

}
.info{
  color:green;
}
.alerte .green{
color:green;
}
.alerte .red{
  color:red;
}

.spinner svg{
background: transparent;
  border-radius: 50%;
}

.programme h3{
font-weight:500!important;
margin-top:10px;
}

.programme ol,ul {
  list-style: disc!important;
  list-style-position: inside!important;
  margin-left:20px!important;
}
.programme li{
  margin-left: 0px;
  margin-top: 10px;
}
.spinner.spinner-energized {
    stroke: #fff;
    fill: #fff;
}

.pie {
  width: 60px;
  height: 60px;
  display: inline-block;
  margin: 10px;
  transform: rotate(-90deg);
  margin-top:-5px;
}
.disque {
  width: 60px;
  height: 60px;
  display: inline-block;
  margin: 0px;
  transform: rotate(-90deg);
  margin-top:-5px;
}
.pie.svg{
  position:absolute;
  margin-left:-90px;
}


svg {
  background: yellowgreen;
  border-radius: 50%;
}

circle {
 fill: #d7cbf2;
    stroke: #5a4980;
  stroke-width: 32;
}


.zoom{
  position: absolute;
  z-index:100;
  top:10px;
  left:10px;
  width:20px;
  
}

.gauche{
  background-color:#4CAF50;
  display: flex;
  justify-content:center;
  align-items: center;
  color: #fff;
  font-size:1.5em;
}
.droite{
  display: flex;
   flex-direction: column; 
  align-items: center;
  margin-top: 20%;
  
  

}
.gauche div{
  margin-bottom: 10px
}




.droite{
display: flex;
    flex-direction: column;
    margin-top: 20%;}


.item h1{
  font-size:1.5em!important;
  font-weight:normal!important;
}
.item-divider h2{
  font-size: 1.2em;
}
.question,.input-label{
  font-weight:500;
  font-size: 1.1em;
}
.input-label{
 margin-left: 25px;
  }
.bool{
  margin-left:20px;
}

.item p{
font-size:1em!important;
}

.bar-stable .violet,.violet{
  background-color:#5a4980;
padding-bottom:15px;
height:50px;

}
.popup-buttons{


justify-content:flex-end!important;

}

.popup-buttons .button{
max-width:200px;

}
.button-incomplet{
  background-color:#8c4e6f87!important;
  color:#2c3e50;
  font-weight:bold;
}
.button-assertive{
  background-color:#5a4980!important;
  font-weight:bold;
}
.bar-stable.violet .button.button-dark.button-clear,.violet .button.button-dark.button-clear{
 color:#fff; 
}
.reservation{
  border:1px solid #5a4980;
  padding:5px;
  margin-top: 5px;
  background-color: #e0c7d9

}
.reservation .titre.item, .materiel .titre.item{
  color:#5a4980;
  font-weight:bold;
  }

.reservation .item{
border:0px solid;
 background-color: #e0c7d9;
 padding-bottom:0px;
}

.field{
  height:43px;
}
.fieldMessage{
  height:23px;
margin:0px;
padding:0px;
}

.message{
  height:25px;

  font-size:12px;
}
.field i,.fieldMessage i{
  position: absolute!important;
    bottom: 3px!important;
    padding-left: 5px!important;
}

.field input{
  border:1px solid #5a4980!important;
}



/*.ion-alert{
  font-size: 10px!important;
   vertical-align: -5px;
   color:#fff;

}*/



.accueil{
  background-color:#5a4980;
}
.accueil .scroll{
  height:100%;
}
.node  input[type="text"]{
  border:1px #888 solid ;
  background-color: #f1f2f1;
  padding:5px;
  display: inline-block;
  height:24px;
  font-size:1em;
  margin-bottom: 5px;
}
.node input.date {
  padding: 1px;
  height: 26px;
  border: 1px solid #5a4980;
  display:block!important;
}

.node input.datebutton {
  padding: 1px;
  height: 26px;
  border: 1px solid #5a4980;
  display:block!important;
  width:100px;
}

.node input.nomchef {
    width: 220px;
}

.node span.text-form {
  padding-left: 1rem;
  display: inline-block;
}

.node  textarea{
  border:1px #888 solid ;
  background-color: #f1f2f1;
  padding:5px;
  display: inline-block;
  height: 100px;
  font-size:1em;
  width:100%;
}

.node a{
  color:black;
}

.button.small{
  display: inline;
  padding:0px;
}

.item-content .item-thumbnail-left img{
  min-width:40px!important;
  min-height:40px!important;
}

img.logo{
	max-width:100px;
}

.button.ion-navicon{
  color:#fff!important;
}
ion-modal-view .item{
border:0px solid!important;
}

@media (min-width: 680px ) {
  ion-modal-view{
    width: 90%!important; 
    height: 90%!important; 
    top: 5%!important; 
    left: 5%!important; 
    right: 5%!important; 
    bottom: 5%!important;
  }
}

@media (min-width: 799px ) {

  
  .popup-ajoutpanier .popup { 
  width: 90%; 
  }

   .no-open{
    display:none!important;
  }

  .formRow{
    display:flex;
    flex-direction: row ;
  }

  
  ion-side-menus.pane.view{
    position: initial;
  }

/*  ion-content.overflow-scroll.catalogue{
    margin-right:270px;
  }*/
 

 
  /*.panier-menu-open {
    padding-right:270px;
  }*/

/*  .menu-content-open {
     -webkit-transform: translate3d(270px, 0px, 0px) !important;
     width: ~"calc(100% - 270px)" !important;

  }*/

/*  .menu-open {
      z-index: 2 !important;
      box-shadow: -1px 0 2px rgba(0,0,0,.2),1px 0 2px rgba(0,0,0,.2);
   }*/
   
 .tuiles { 
  flex: auto;
  display: inline-block;
  width: 250px;
  min-height: 400px;
  margin : 25px;
  background-color: #e3cadf; /*rose pâle fond*/
  /*border-color: #bb78ab; /*rose bordures*/
  border-color: #e3cadf; /*rose pâle fond*/
  border-width: 2px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;

}
.tuiles a.item-content {
  padding: 0;
  background-color: #e3cadf; /*rose pâle fond*/
  /*position:absolute;*/
  width:100%;
}
.tuiles .item-image {
  min-height: 230px;
  background-color: white;
  /*#bb78ab; /* rose bordures*/
  vertical-align: middle;
  line-height:230px;
  margin:0;
  padding:10px;
}
.tuiles img {
  max-width: 230px;
  height: auto;
  max-height: 230px;
}
.tuiles .logo_panier {
  position:absolute;
  margin:auto;
  top: 102px;
  /*bottom:10px;*/
  right:13px;
  width: 40px;
  height: 40px;
  /*z-index: 10000;*/
}
.tuiles .item-text {
  white-space:normal;
  font-weight: normal;
  margin : 10px;
}
.tuiles h2 {
  color: #901d78; /*pourpre titres */
  font-weight: bold;
  font-size:1.2em !important;
  min-height: 40px;

}
.tuiles p.resume {
  color: black;
  height: 105px;
}
.tuiles p.cycles {
  text-align: right;
  color: #666; /*gris*/
  vertical-align: baseline;
  position:absolute;
  margin:auto;
  right:10px;
}
   .texteAccueil{
    margin-left:300px
   }

   .pat{
  display:block;
position: absolute;
bottom: -15px;
 z-index:100;
 margin-left:45px;margin-bottom:15px;width:200px;
  }

}

/*.pat{
  display:none;
  }*/

.select{
	padding-bottom: 10px;
}

/* Styles de la fiche descriptive des matériels */
.item.fiche { overflow: auto; }
.item.fiche * { 
    white-space: normal;
    /* non supporté par chrome/safari...
    text-align:justify;
    hyphens:auto;*/
 }

.item.fiche h2, .item.fiche h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000;
    font-weight: 500;
    font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
    line-height: 1.2;
}
.item.fiche h2 { font-size: 24px; }
.item.fiche h3 { font-size: 20px; }

.item.fiche p {
  margin: inherit; 
  color : inherit;
  font-size:15px;
  white-space: normal;
}
.item.fiche a { color: #387ef5; }

.item.fiche ul, .item.fiche ol {
  list-style-type: inherit; 
  padding:inherit; 
  margin:inherit;
  font-size:15px;
}
.item.fiche ol { list-style-type: decimal; }

.item.fiche img {
  max-width:100%;
  height:auto;
  margin: 0.5em 0;
}

.popup-ajoutpanier .popup { 
  width: 50%; 
}

.item.description ul{
margin-left: 5px;
}
.item.description p{
  font-size:1em;
  color: #444
  }
.item.description li{
  /*display: list-item;*/
    padding-bottom: 1em;
    list-style-type: square;
    list-style-position: inside;
    color: #444
}
.item.description li {list-style-type: none;}

.item.description li:before {
  content: "- "; 
  
  
}


@media (max-width: 799px ) {
  .tuiles { /*styles standard copiés de item-thumbnail-left*/
    padding-top: 8px;
    padding-left: 106px;
    min-height: 100px; 
  }

  .tuiles > img:first-child,
  .tuiles .item-image,
  .tuiles .item-content > img:first-child,
  .tuiles .item-content .item-image {
    position: absolute;
    top: 0px;
    left: -90px;
    max-width: 80px;
    max-height: 80px;
    width: 100%;
    height: 100%;
  }
  .tuiles .item-complex {
    padding-top: 0;
    padding-left: 0;
  }
  .tuiles a.item-content {
    padding-top: 2px;
  }
  .tuiles .item-image {
      height: 80px;
      vertical-align: middle;
      line-height:80px;
  }
  .tuiles .logo_panier { display: none; }

  .pat {
  display: none;
}

}

/* STYLES POUR LA PAGE D'ACCUEIL */

.pageaccueil {
  background-color:#901d78; /*pourpre titres */
}
.pageaccueil p ,.pageaccueil li{

  color: white; /*pourpre titres */
  font-size: 1.3em;
  line-height:1.3em;
}
.pageaccueil ul{
   list-style-type: inherit; 
  padding:inherit; 
  margin:inherit;
   list-style-position: inside;
   margin-left: 20px;
   margin-bottom:20px;

}

.pageaccueil .laius {
/*  float: right;*/
  min-width: 300px;
} 

.pageaccueil .laius a{
  color:white;
} 
.pageaccueil .laius .logoaccueil  {
  text-align:center;
}  
.pageaccueil .laius .logoaccueil img {
  max-width:80%;
}  
.pageaccueil .laius p{
  text-align:justify;
}  

.glup:before {
  content: url('../img/panier.svg') !important;
 
} 
.loupe:before {
  content: url('../img/loupe.svg') !important;
 margin-top: 6px;
}

.materiel .titre.item{
  font-size:1.5em;
  font-weight:normal;
}
.materiel h1{
  color:#5a4980;
  font-size:2em;
  font-weight:bold;
}
.materiel h3{
  font-size:1em;
  font-weight:normal;
}

.materiel .item{
  border:0px solid;
}

.materiel .caracteristiques{
  border:1px solid #5a4980;
  padding:20px;
  height:100%;
  font-size:1.2em;
}
.materiel .caracteristiques .label,.materiel .caracteristiques .contenu{
display: inline-block;
}
.materiel .caracteristiques .label{

font-weight:bold;
}

.materiel .image{
  
  padding:20px;
}

.materiel .caracteristiques h2{
  
  border-bottom:1px solid #5a4980;
}

.materiel  h2{
  color:#5a4980;
  font-size:1.5em;
  font-weight:normal;
  }

.materiel .item.description{
padding-bottom:0px;
padding-top:0px;
}

.materiel .description h2{
margin-bottom:20px;

margin-top:20px;
}


@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {


    


 /* .panier-menu-open {

    padding-right:270px;
  }*/

 /* .menu-content-open {
     -webkit-transform: translate3d(270px, 0px, 0px) !important;
     width: ~"calc(100% - 270px)" !important;

  }*/

 /*  ion-content.catalogue{
    margin-right:270px;
  }*/


}

.overflow-scroll{overflow:auto;}