/* Feuille de style pour le contenu des pages */	


/******************************************/
/* propriétés communes à tous les écrans  */
/******************************************/
body{padding:0; font-family:'Andika', sans-serif; background:#ccc; color:#111; text-decoration:none;}
a {font-size:small; color:#111; }
p {font-size:small;margin-top: 4;margin-bottom: 4;}
li {font-size:small; margin-left: 0px;margin-top: 4;margin-bottom: 4;}
ul {font-size:small; margin-left: 0px;margin-top: 4;margin-bottom: 4;}
h1 {font-size: medium; font-weight: bold; }  
h2 {font-size: medium; font-weight: bold;}
h3 {font-size: small;  font-weight: bold;}
h4 {font-size: small;  font-weight: normal;}

/* classes */
.TITRE  {font-size: large; display:block; color:#555; padding-top : 2px; padding-bottom : 3px; }
.styleA {font-size: medium; font-weight: bold; }  
.styleB {font-size: small; text-align:left;}  
.styleC {font-size: x-small;}  
.styleD {font-size: small; padding-bottom : 7px;}  
.styleE {font-size: 1px;  color:#fff;}  
.clr {clear: both;} 


/*****************************************************/
/* propriétés pour grand ecran - PC fixe ou portable */
/*****************************************************/
@media (min-width: 801px) 
{
/* zones des pages */
.container{position:relative; z-index: 0; margin:0 auto; background:#fff;} /* zone totale pour filet gris autour du site*/
.bandeau{position:relative; z-index: 2; width: 800px; margin: 0 auto; text-align:center; clear: both; }  /* dans container - entete */
.page{position:relative; z-index: 1; margin: 0 auto; clear: both; padding-left:50px; padding-right:50px; padding-top:10px;} /* dans container - zone principale */
.baratin{position:relative; z-index: 1; margin: 0 auto; clear: both; padding-left:120px; padding-right:120px; text-align:justify;} 
.footer{position:relative; z-index: 1; width: 800px; margin: 0 auto; text-align:center; clear: both; }  /* dans container - pied de page */
.logo{position:relative; float:left; width:140px; height:100px;} /* dans la zone entete - logo */
.menu{position:relative; float:left; } /* dans la zone entete - zone de menu */
.slogan{position:relative; float:center; } /* dans la zone entete - zone de slogan */
.bpied{position:relative; float:left; padding-left:10px; padding-right:10px;} /* dans la zone footer - zone de bloc */
.stagebox{margin: 10px auto;}
.stageimg{position:relative; float:left; width:300px;}
.stagetxt{margin-left:300px; margin-top:20px; margin-bottom:30px;}
.blogtexte{width:100%; padding-left:250px; padding-right:250px;}

.studbox{width:100%; padding: 10px auto; display: flex;}
.studimgleft{position:relative; flex:300px; float:left; width:300px; padding-left:20px; padding-right:20px; padding-top:10px; background-color: #fff;}
.studtxtright{float:left; flex: 2 1 0; padding-left:50px; padding-right:50px; padding-top:10px; text-align:left; background-color: #ddd;}
.studtxtleft{position:relative; float:right; flex: 2 1 0;  padding-left:50px; padding-right:50px; padding-top:10px; text-align:left; background-color: #ddd;}
.studimgright{position:relative; float:left; width:300px; padding-left:20px; padding-right:20px; padding-top:10px; background-color: #fff;}

.autobox{ margin: 0 auto;}
.autoimg{float:left; width:410px;}
.autotxtbox{float:left; padding:0px 30px 0px 30px;}
.imgstudio{float:left; width:460px; padding: 20px; margin: 0 auto;}

/* Menu et sous-menu */
.nav {list-style: none none;    margin: 0;    padding: 0;    line-height: 1;}
.nav a {display: block;    padding:1em;    color:#111;    background:#eee;    text-decoration: none; }
.nav a:focus, .nav a:hover {color:#111;    background: #999;    text-decoration: none; }
.nav-item { float: left; /* Pour que les liens s’affichent horizontalement */
    position: relative; /* Crée un contexte de positionnement pour les sous-listes */
    width:160px;}
.sub-nav {
    position: absolute; /* Evite que la dimension du conteneur ne change quand la sous-liste est affichée */
    left: 0; /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur */
    top: 2em; /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur, on le positionne explicitement en bas du conteneur */
    white-space: nowrap; /* Pour que le texte ne revienne pas à la ligne */
    background:#777; /* FIX IE7 : évite que la sous-liste ne disparaisse au moment où le curseur arrive au-dessus */
    margin-top: 12px; /* Pour que le sous-menu recouvre son parent, facilitant le passage de la souris de l’un à l’autre */
    /*width:160px;*/}
/* Réduit cette boîte à un carré d’1px de côté, dont le texte est déporté loin à gauche */
.sub-nav-item a {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    float: left; /* Fix WebKit : force la largeur des sous-navigations à s’adapter automatiquement, pour pouvoir l’atteindre à la souris */
}
.sub-nav-item a:focus,
.nav-item a:focus +.sub-nav a,
.nav-item:hover .sub-nav-item a {
    position: static;
    left: auto;
    width: 160px;
    height: auto;
    overflow: visible;
}



}

/*****************************/
/* propriétés pour tablettes */
/*****************************/
@media (min-width: 481px) and (max-width: 800px)
{
/* zones des pages */
.container{position:relative; z-index: 0; margin:0 auto; background:#fff;} /* zone totale pour filet gris autour du site*/
.bandeau{position:relative; width: 100%; margin: 0 auto; text-align:center; clear: both;}  /* dans container - entete */
.page{position:relative; margin: 0 auto; clear: both; padding-left:10px; padding-right:10px; padding-top:30px;} /* dans container - zone principale */
.baratin{position:relative; z-index: 1; margin: 0 auto; clear: both; padding-left:20px; padding-right:20px; text-align:justify;} 
.footer{position:relative; width: 100%; margin: 0 auto; text-align:center; clear: both;}  /* dans container - pied de page */
.logo{position:relative; float:none; width:150px; height:100px; margin: 0 auto;} /* dans la zone entete - logo */
.menu{position:relative; text-align:center; clear: both; margin: 0 auto;} /* dans la zone entete - zone de menu */
.slogan{position:relative; float:center;} /* dans la zone entete - zone de slogan */
.bpied{position:relative; float:left; padding-left:10px; padding-right:10px;} /* dans la zone footer - zone de bloc */
.stagebox{position:relative; float:left; margin: 10px auto;}
.stageimg{width:300px;}
.stagetxt{margin: 10px auto;}
.blogtexte{margin-left:100px; margin-right:100px;}

.studbox{width:100%; padding: 10px auto; display: flex;}
.studimgleft{width:100px; padding-left:20px; padding-right:20px; padding-top:10px; background-color: #fff;}
.studtxtright{clear:both; flex: 2 1 0; padding-left:10px; padding-right:10px; padding-top:10px; text-align:left; background-color: #eee;}
.studtxtleft{flex: 2 1 0;  padding-left:50px; padding-right:50px; padding-top:10px; text-align:left; background-color: #eee;}
.studimgright{clear:both; width:100px; padding-left:20px; padding-right:20px; padding-top:10px; background-color: #fff;}

.autobox{ margin: 10px auto;}
.autoimg{margin: 10px auto;}
.autotxtbox{position:relative; clear:both;}

/* Menu et sous-menu */
.nav {list-style: none none;    margin: 0;    padding: 0;    line-height: 1;}
.nav a {display: block;    padding:1em;    color:#111;    background:#eee;    text-decoration: none; }
.nav a:focus, .nav a:hover {color:#111;    background: #999;    text-decoration: none; }
.nav-item {  float: left; /* Remet les éléments les uns au-dessus des autres */
    position: relative; /* Crée un contexte de positionnement pour les sous-listes */
    width:25%;
}
.sub-nav {
    position: absolute; /* Evite que la dimension du conteneur ne change quand la sous-liste est affichée */
    left: 0; /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur */
    top: 2em; /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur, on le positionne explicitement en bas du conteneur */
    white-space: nowrap; /* Pour que le texte ne revienne pas à la ligne */
    background:#777; /* FIX IE7 : évite que la sous-liste ne disparaisse au moment où le curseur arrive au-dessus */
    margin-top: 10px; /* Pour que le sous-menu recouvre son parent, facilitant le passage de la souris de l’un à l’autre */
    z-index:2;
}
/* Réduit cette boîte à un carré d’1px de côté, dont le texte est déporté loin à gauche */
.sub-nav-item a {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    float: left; /* Fix WebKit : force la largeur des sous-navigations à s’adapter automatiquement, pour pouvoir l’atteindre à la souris */
}
.sub-nav-item a:focus,
.nav-item a:focus +.sub-nav a,
.nav-item:hover .sub-nav-item a {
    position: static;
    left: auto;
    width: 140px;
    height: auto;
    overflow: visible;
}

}  


/******************************/
/* propriétés pour smartphone */ 
/******************************/
@media all and (max-width: 480px)
{
/* zones des pages */
.container{position:relative; z-index: 0; margin:0 auto; background:#fff;} /* zone totale pour filet gris autour du site*/
.bandeau{position:relative; width: 100%; margin: 0 auto; text-align:center; clear: both;}  /* dans container - entete */
.page{position:relative; margin: 0 auto; clear: both; padding-left:5px; padding-right:5px; padding-top:10px;} /* dans container - zone principale */
.baratin{position:relative; z-index: 1; margin: 0 auto; clear: both; padding-left:2px; padding-right:2px; text-align:justify;} 
.footer{position:relative; width: 100%; margin: 0 auto; text-align:center; clear: both;}  /* dans container - pied de page */
.logo{position:relative; text-align:center; float:center; clear: both; } /* dans la zone entete - logo */
.menu{position:relative; clear: both; margin: 0 auto;} /* dans la zone entete - zone de menu */
.slogan{position:relative; float:center; } /* dans la zone entete - zone de slogan */
.bpied{position:relative; float:left; padding-left:5px; padding-right:5px;} /* dans la zone footer - zone de bloc */
.stagebox{position:relative; float:left; margin: 10px auto;}
.stageimg{width:300px;}
.stagetxt{margin: 10px auto;}
.blogtexte{margin-left:10px; margin-right:10px;}

/* Menu et sous-menu */
.nav {list-style: none none;    margin: 0;    padding: 0;    line-height: 1;}
.nav a {display: block;    padding:1em;    color:#111;    background:#eee;    text-decoration: none; }
.nav a:focus, .nav a:hover {color:#111;    background: #999;    text-decoration: none; }
.nav-item {  float: left; /* Remet les éléments les uns au-dessus des autres */
    position: relative; /* Crée un contexte de positionnement pour les sous-listes */
    width:25%;    
}
.sub-nav {
    position: absolute; /* Evite que la dimension du conteneur ne change quand la sous-liste est affichée */
    left: 0; /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur */
    top: 30px; /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur, on le positionne explicitement en bas du conteneur */
    white-space: nowrap; /* Pour que le texte ne revienne pas à la ligne */
    background:#777; /* FIX IE7 : évite que la sous-liste ne disparaisse au moment où le curseur arrive au-dessus */
    margin-top: 10px; /* Pour que le sous-menu recouvre son parent, facilitant le passage de la souris de l’un à l’autre */
    z-index:2;
}
/* Réduit cette boîte à un carré d’1px de côté, dont le texte est déporté loin à gauche */
.sub-nav-item a {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    float: left; /* Fix WebKit : force la largeur des sous-navigations à s’adapter automatiquement, pour pouvoir l’atteindre à la souris */
}
.sub-nav-item a:focus,
.nav-item a:focus +.sub-nav a,
.nav-item:hover .sub-nav-item a {
    position: static;
    left: auto;
    width: 140px;
    height: auto;
    overflow: visible;
}

}