﻿








/***********************************************/
/* fullsite.css                                */
/* contient tous les styles du site            */
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/

#Table {
 width: ;
 padding: 0px;
 border-spacing: 2px;
/*border-width:1px; 
 border-style:solid; 
 border-color:black;*/
  
}
.tabcenter{
   margin-left:auto;
   margin-right:auto;
}





body{   
	margin: 0px;
	padding: 0px;
        text-justify: auto;
	font-family: Arial,sans-serif;
	font-weight: bold;
	color: #000000;
	line-height: 1.166;	
	background-color: #fee3d1;
	background-image:     url();
	
}

/*********** menu/sous menu ***********/

nav{
    top: 0;
    width: 100%;
    margin:0px auto 10px auto;
    padding:0px;
    background-image: url("images/bandeau cpf.jpg");		
    position: sticky;
    
    
}

nav ul{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
}

nav ul li{
    flex: 1 1 auto;
    text-align: center;
    position: relative;
}

nav a{
    display: block;
    text-decoration: none;
    color: black;
    border-bottom: 1px solid transparent;
    padding: 10px 0px;
    
}


nav a:hover{
    color: #D867F0;
   

}

.sous{
    display: none;    
    background-color: #FCFCE2;
    position: absolute;    
    width: auto;
    left:40px;
    z-index: 1000;                          /ordre chevauchement/
}
nav > ul li:hover .sous{
    display: flex;
    flex-flow: column wrap;
    padding-left:0;
}
.sous li{
    flex: relative;
    text-align: center;
    
}
.sous a{
    padding: 5px;
    border-bottom: none;
}
.sous a:hover{
    border-bottom: none;
    background-color: RGBa(200,200,200,0.1);
}
.deroulant > a::after{
    content:" ▼";
    font-size: 12px;
}

.menu {
    background-color: #9bdfee ;
    text-align: center
  } 
.menu li {
    display: inline-block ;
 }   
.menu a { 
    display: block ;    
    width: 140px ;    
    padding: 05px 0 ; 			/* Ajout de marges internes */    
    text-align: center ; 		/* Centrage du texte à l'intérieur des boutons */    
    border: 0px solid #ffe843 ; 	/* Ajout d'une bordure de couleur aux boutons */    
    background-color: #ed86bf ; 	/* Ajout d'une couleur d'arrière-plan */
    color: #ffe843 ; 			/* Modification de la couleur du texte */    
    text-decoration: none ; 		/* Suppression du soulignement des liens */    
    margin: 10px ; 			/* Espacements des boutons */    
    border-radius: 5px;    		/* Ajout d'arrondis pour les boutons */
}
.menu a:hover{
    color: orange;
    border-bottom: 0px solid gold;
}



.conteneur{
  margin: 0px 30px;
  height: 500px;
}
.conteneura{
  margin: 0px 30px;
  height: 500px;
  width: 800px ;  
}


/***********fin menu/sous menu***********/

/***********pied de page***********/
nava{
    width: 100%;
    margin:0px auto 0px auto;    
    background-color: #fee3d1;		
    position: sticky;
    top: 0px;
}

nava ul{
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    top: 0px;
}
footer {
    display: flex;
    justify-content: center;
    padding: 5px;
    background-color: #9bdfee;
    color: rgb(0, 95, 169);
    text-align: center
}

/******* hyperliens et éléments particuliers *******/

figure {
    border: ;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 520px;
    margin: auto;
}
/*
img {
    max-width: ;
    max-height: ;
} 
*/


figcaption {					/*titre sous image*/
    background-color: ;
    color: #000000;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
}


a:link, a:visited{
	color: #005FA9;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

.flotte {
float:left;
margin: 7px 0px ;
padding-right:20px;
padding-top: 0px;
}

.flotter {
float:right;
margin:0;
padding-left:20px;
padding-top: 0px;
}


.full:hover{   -webkit-transform:scale(1.01); /* Safari and Chrome */
    -moz-transform:scale(1.01); /* Firefox */
    -ms-transform:scale(1.01); /* IE 9 */
    -o-transform:scale(1.01); /* Opera */
     transform:scale(1.01);
}
img.bg {
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
}

/*ZOOM PASSAGE SUR IMAGE */

.zoom-hover .zoom {
    overflow: hidden;
    position: relative; 
}
.zoom-hover .zoom img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
    max-width: 100%;
-webkit-transition: all 0.8s; /* Safari et Chrome */
-moz-transition: all 0.8s; /* Firefox */
-ms-transition: all 0.8s; /* Internet Explorer 9 */
-o-transition: all 0.8s; /* Opera */
transition: all 0.8s;
}
.zoom-hover .zoom * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;               
-o-box-sizing: border-box;
box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.zoom-hover:hover .zoom img  {
/* L'image est grossie de 5% */
-webkit-transform:scale(1.02); /* Safari et Chrome */
-moz-transform:scale(1.02); /* Firefox */
-ms-transform:scale(1.02); /* Internet Explorer 9 */
-o-transform:scale(1.02); /* Opera */
transform:scale(1.02);
}



/*centrer image*/
iMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
}


/************** header tag styles **************/

h1{
 font: bold 250% Times New Roman;
}

h2{
 font: bold 180% Times New Roman;
 color: #005FA9;
}

h3{
 font: bold 150% Times New Roman;
 color: #005FA9;
 }

h4{
 font: 120% Arial,sans-serif;
 text-align: center;
}
				/*margin :Avec une valeur, celle-ci définira la marge pour les quatre côtés, Avec deux valeurs, la première s'appliquera aux 
 				côtés haut et bas et la seconde aux côtés gauche et droit
				Avec trois valeurs, la première = haut, la deuxième =gauche et droit et la troisième au côté bas(ex:margin: 0px  0px 7px ;)
				Avec quatre valeurs, la première = haut, la deuxième à droite, la troisième en bas et la quatrième à gauche */

h5{
 font: 120% Arial,sans-serif;
 color: #005FA9;
 margin:0px 0px 7px 0px ;		
}

h6{
 font: 100% Times New Roman;
 color: #005FA9;
}
h7{
 font: bold 150% Times New Roman;
 color: #F90505;
 }
h8{
 font: bold 150% Times New Roman;
 text-align: center;
 }

/********* psy *********/

.style31 {
	font-size: 18px;
}

/*********** contact-danse ***********/

.style60 {
	font-family:"Palatino Linotype";
	font-size: 24px;
}
.style61 {
	font-size: 18px;
}


/*************** list tag styles ***************/

ul{
 list-style-type: disc;
}

ulul{
 list-style-type: none;
}



embed, iframe, object
{
max-width: 100%;
}

.resp-container { 
  position: relative; 
  overflow: hidden; 
  padding-top: 56.25%;
   
}

.resp-iframe { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  border: 0; 
}
/********* code à l'essais ? (fond de texte couleur )reporté sur dscourstages pour ne pas impacter d'autres pages.
p{
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

#ex1{
    background-color: orange;
}
#ex2{
    background-color: #fbb021;
}
#ex3{
    background-color: rgb(0, 120, 240);
}
*********/


/********* code à l'essais ? (espace vertical horizontal)*********/

.spaceVH {
  border-spacing: 0px;
}


/********* form and related tag styles (formulaire) *********/

form {
	margin: 0;
	padding: 0;
}

label{
 font: bold 1em Arial,sans-serif;
 color: #334d55;
}

input{
font-family: Arial,sans-serif;
}

/************* globalNav styles 

a.glink, a.glink:visited{
  	font-size: 16px;
  	color: #000000;
	font-weight: bold;
	margin: 0px;
	padding: 2px 5px 4px 5px;
}

a.glink:hover{
	text-decoration: none;
	color: #0000ff;
}
****************/

/********* pages tag styles *********/Arial, Helvetica, sans-serif
/************************************/





