@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-v32-latin-regular.woff2') format('woff2');    
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-v32-latin-italic.woff2') format('woff2');    
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-v32-latin-700.woff2') format('woff2');    
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-v32-latin-800.woff2') format('woff2');    
    font-weight: 800;
    font-style: normal;
}
body
{
    width :100% ;
	margin:auto;
	text-align:center;	
	font-family: 'Nunito', sans-serif;
    font-weight: 400;
	background: #f4f8fc;
}
#global
{
    width :100% ;
    margin :auto ;
    padding :0px ;
}

h1{
font-size:22px;
text-align:left;
}
h2{
font-size:20px;
text-align:center;
text-decoration:underline;
}


header
{
    width :100% ;
}

.soustitre
{
   font-weight:bold;
   font-size: 1.4vw;
   text-align:center;
}

.preheader
{
    width :100% ;
  background-color:#f4f8fc;
}
.pub
{
    width :100% ;
}

a {
    color: #1976d2;
}

.header {
	width :100% ;
  overflow: hidden;
  padding: 0px 0px;
}

.header-right a {
  float: left;
  color: black;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 16px; 
  line-height: 25px;
  border-radius: 4px;
}

.logo {
  float: left;
  width:30%;
}

.log {
  width:70%;
  float: right;
}
.champsconnect {
  width:100%;
  float: right;
  text-align: right;
}

.nompseudo
{   float: left;
	display:inline-block;
	width:30%;
	vertical-align:top;
   font-size: 2.8vw;
}
.params
{   float: left;
	display:inline-block;
	width:60%;
  color:#000088;
 vertical-align:top;
   font-size: 1.5vw;
}
.imgavat {
  float: left;
  width:5%;
 display:inline-block;
	 vertical-align:top;
  padding:0px;
  border:0px solid grey;
}
.log a{
  color: black;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  font-size: 12px; 
  line-height: 12px;
  border-radius: 4px;
}
.log a:hover {
  background-color: #ddd;
  color: black;
}
.header-right a:hover {
  background-color: #ddd;
  color: black;
}

.header-right a.active {
  background-color: dodgerblue;
  color: white;
}

.header-right {
  text-align: center;
  width:100%;
}


.pdf {float:left;
  width:16%;  
   font-size: 1.4vw;
}

#titre
{
   width :100%;
   font-size: 4vw;
}
 

.titremenuintro {	font-size:2vw;
font-weight:bold;text-decoration:none;color:blue;text-shadow: 1px 2px 3px rgba(0,0,0, 0.5);
}
.soustitremenuintro {	font-size:15px; line-height:18px;text-decoration:none;
}
.soustitremenuintro0 {	font-size:20px; line-height:20px;text-decoration:none;
}
.cadrebas { text-align:justify;font-size:16px;width:100%;
}
.enbas { background-color:#ffffff; text-align:justify;font-size:16px;width:95%;margin:auto; padding:10px;
border-radius: 16px; 
border: 1px solid #dde7f2;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.imintro {	vertical-align:top;
background-repeat:no-repeat;
    background-position: center;
	display: inline-block;  width:31%; 	

background: white;
border-radius: 16px; 
border: 1px solid #dde7f2;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	
	}
.imintro:hover{
      -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
}
#basdepage
{
	display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}
.boutonniveau
{
	background: white;
	width:7.5%;	
	Line-Height:1.4;
	font-size:18px;
	border-radius:16px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.boutonniveauc
{
background: white;
	width:12%;
	Line-Height:1.4;
	border-radius:10px;
	font-size:18px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.boutonniveauf
{
	width:12%;
	font-size:18px;
	padding:8px;

}

	
@media(min-width: 601px) and (max-width: 1000px)
{ 


.boutonniveau
{
	width:15%;
}

.boutonniveauc
{
	width:30%;
}
.boutonniveauf
{
	width:30%;
}

.titremenuintro {	font-size:2vw;}
}

@media(max-width: 600px)
{
	
.boutonniveau
{
	width:22%;
}
.boutonniveauc
{
	width:30%;
}
.boutonniveauf
{
	width:30%;
}
.logo {
  float: left;
  width:30%;
}
  
.log {
  float: right;
  width:70%;
}
.nompseudo
{  
	width:30%;
	font-size: 4vw;
}
  
  
.nompseudo input
{   
   font-size: 2.2vw;
}
  
.params
{  
	
   font-size: 3vw;
}
	
.titremenuintro {	font-size:3vw;}

.imintro {	 width:29%; }
}