@charset "UTF-8";
/******************* Les css responsive de Idx_ligne01 ***********************/
/* Pour minifier le fichier : http://www.freeformatter.com/css-minifier.html */
/*********** Pour minifier le fichier : https://cssminifier.com/  ************/

/*************************** Les polices par défaut **************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) {
 * {color:#003377;font-family:Arial,Helvetica,sans-serif;font-size:11px}
}
/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 * {color:#003377;font-family:Arial,Helvetica,sans-serif;font-size:10px}
}
/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 * {color:#003377;font-family:Arial,Helvetica,sans-serif;font-size:10px}
}

/************************************* Le body *******************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) {
 body  {
  background-image: url('../Images/Fond_10x600.jpg');
  background-repeat: repeat-X;
  background-color: #E5E7F6;
  /*  background-image:linear-gradient(darkblue, lightcyan);  */
  /* background-position: top left; */
  /* background-repeat: repeat-x; */
  /*background-color:#F0F2FF; */
  color: #E4E7F6; 
  font-family: Arial,Helvetica,sans-serif; 
  font-size: 10px;
  margin: 0
 }
}
/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 body  {
  background-image: url('../Images/Fond_10x600.jpg');
  background-repeat: repeat-X;
  background-color: #E5E7F6;
  color: #E4E7F6; 
  font-family: Arial,Helvetica,sans-serif; 
  font-size: 12px;
  margin: 0;
  width:480px
 }
}
/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 body  {
  background-image: url('../Images/Fond_10x600.jpg');
  background-repeat: repeat-X;
  background-color: #E5E7F6;
  color: #E4E7F6; 
  font-family: Arial,Helvetica,sans-serif; 
  font-size: 12px;
  margin: 0
 }
}

/************************ Les logos de haut de page ***************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) {
 #Logo1{ 
  Position:absolute;
  left:0;
  top:104px;
  padding-bottom:24px 
 }
 #Logo2 {display:none}
 #Logo3 {display:none}
}
/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Logo1 {display:none}
 #Logo2{
  Position:absolute;
  left:0;
  top:104px;

  padding-bottom:24px
 }
 #Logo3 {display:none}
}
/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #Logo1 {display:none}
 #Logo2 {display:none}
 #Logo3 {
  Position:absolute;
  left:0;
  top:104px;
 
  padding-bottom:24px
 }
}


/************************ Les pubs de haut de page ***************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) {
 #Pub1{
  position:absolute;
  left:0;
  top:0;
  margin:4px;
  text-align:left  
 }
 #Pub2 {display:none}
 #Pub3 {display:none}
}
/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Pub1 {display:none}
 #Pub2 {display:none}
 #Pub3 {display:none}
}
/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #Pub1 {display:none}
 #Pub2 {display:none}
 #Pub3 {
  position:absolute;
  left:0;
  top:0;
  margin:4px;
  text-align:left  
 }
}

/************************* La page principale ********************************/ 
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) {
 #Page {
  background:none;
  text-align:left;
  width:820px
 }
}
/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Page {text-align:left;width:100%}
}
/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #Page {text-align:left;width:100%}
}

/************************* Les publicités latérales **************************/ 
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) {
 #PubLaterale {
  position:absolute;
  left:850px;
  top:-88px;
  
  float:right;
  text-align:justify;
  z-index:10
 }
}
/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #PubLaterale  {display:none}
}
/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #PubLaterale  {display:none}
}
