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

/******************************* Un article **********************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) {
 article  {
  background:none;
  /* border:darkgreen 1px solid; */
  color:#003789;
  font-size:11px;
  margin-left:32px;
  padding:12px;
  text-align:left
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 article  {
  font-size:11px;
  margin-left:48px;
  padding:12px;
  text-align:left;
  width:480px
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 article  {
  font-size:11px;
  margin-left:48px;
  padding:12px;
  text-align:left;
  width:500px
 }
}
/********************************** Actualités ********************************/
#Actualites {
 /*background:#E5F0F2; */
 /* border:red 1px solid; */
 color:#003F79;
 content: ""; /* Important, sinon l'élément n'est pas généré. */
 margin-left:24px
}
  
#Actualites h2 {
 background:#B5F2EF;
 border:#003F79 1px solid;
 border-radius:4px;
 color:#003F79;
 font-size:14px;
 margin-left:14px;
 padding:4px;
 text-align:center;
 width:100%
}
  
 #Actualites  p {
  background:#CEE6EA;
  font-size:14px;
  font-weight:bold;
  padding:5px;
  text-align:left
 }
 
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #Actualites {
  clear: both;
  margin-left:24px;
  margin-top:0;
  padding:0;
  text-align:center;
  width:800px
 }
 
 #Actualites p {
  font-size:14px;
  padding:5px;
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Actualites  {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {   
 #Actualites  {display:none}
}

/***************************** Lien vers le clône *****************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) {
 /* Aller à l'autre site */
 #Clone a {
  color:#525462;
  margin-left:12px;
  text-align:left
 }
 
 #Clone a:hover {
  background:#525462;
  color:#EAEAEA;
  text-align:center;
  text-decoration:none
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Clone  {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) { 
 #Clone a {
  color:#525462;
  margin-left:12px;
  text-align:left
 }
 
 #Clone a:hover {
  background:#525462;
  color:#EAEAEA;
  text-align:center;
  text-decoration:none
 }
}

/********************************* Bonjour ************************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #Bonjour {
  color:#004599;
  font-size:14px;
  font-weight:bold;
  margin:12px 0 0 48;
  text-align:left
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {  
 #Bonjour {
  color:#004599;
  font-size:14px;
  font-weight:bold;
  margin:180px 0 0 12px;
  text-align:left
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) { 
 #Bonjour {
  color:#004599;
  font-size:14px;
  font-weight:bold;
  margin:12px 0 0 48;
  text-align:left
 }
}

/********************************* Actualités *********************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #Actu { 
  background:#ECFFFE;
  color:green;
  font-size:14px;
  font-weight:bold;
  margin:12px 0 12px 0;
  text-align:left;
  width:500px
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) { 
 #Actu {
  color:green;
  font-size:14px;
  font-weight:bold;
  text-align:left;
  width:300px
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #Actu {
  color:green;
  font-size:14px;
  font-weight:bold;
  text-align:left;
  width:500px
 }
}

/********************************* Annonce ***********************************/

/* Tronc commun */
#Annonce a       {color:#00193F;font-size:11px}
#Annonce a:hover {background:#00193F;color:#F3FFFD;font-size:11px}
 
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
  #Annonce {
  margin:12px 0 12px 0;
  text-align:left
 }
 
 #Annonce div {
  background-color:#ECFAF7;
  border-radius:4px;
  box-shadow: 1px 2px 5px #7E999B;
  color:#003789;
  font-size:11px;
  margin:12px 0 12px 0;
  padding:5px;
  text-align:left;
  width:auto
 }
 #Annonce h4 {color:#002320;font-size:12px;font-weight:bold} 
 #Annonce h5 {color:#004D60;font-size:12px;font-weight:normal;padding-left:12px} 
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {   
 #Annonce {
  margin:12px 0 12px 0;
  text-align:left;
 }
 
 #Annonce div {
  background-color:#ECFAF7;
  border:#FFFFFF 1px solid;
  border-radius:4px;
  box-shadow: 1px 2px 5px #7E999B;
  color:#003789;
  font-size:11px;
  height:32px;
  margin:12px 0 12px 0;
  padding:5px;
  text-align:left;
  width:250px
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) { 
 #Annonce {
  margin:12px 0 12px 0;
  text-align:left;
 }
 
 #Annonce div {
  background-color:#ECFAF7;
  border:#FFFFFF 1px solid;
  border-radius:4px;
  box-shadow: 1px 2px 5px #7E999B;
  color:#003789;
  font-size:11px;
  height:32px;
  margin:12px 0 12px 0;
  padding:5px;
  text-align:left;
  width:250px
 }
}

/**************************** Dernières mises à jour *************************/
/* Tronc commun */
#DerMaJ {
 color:#007912;
}

#DerMaJ div {
 color:#006100;
 margin-top:8px;
 text-align:left;
}

#DerMaJ a {
 color:#002D79;
}

#DerMaJ a:hover {
 background:#002D79;
 color:#E1F8FF;
 text-decoration:none
}
  
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
  #DerMaJ {
  margin-left:12px;
  text-align:left
 }
 
 #DerMaJ a {
  font-size:12px;
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {  
 #DerMaJ {
  font-size:12px;
  margin-left:12px;
  margin-top:12px;
  text-align:left;
  width:195px
 }
   
 #DerMaJ a {
  font-size:12px;
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px)  {  
 #DerMaJ {
  margin-left:12px;
  text-align:left
 }
   
 #DerMaJ a {
  font-size:12px;
 }
}

/*********************** Annonce d'une nouveauté  ****************************/
/* Tronc commun */
#Nouveau {
 color:#008900;
 font-weight:bold;
 text-align:left
}

#Nouveau span {  
 color:#008900;
 font-size:48px;
 vertical-align:-12px
}

#Nouveau a {background:none;color:#004900;font-size:11px;text-align:left;padding-left:4px}
#Nouveau a:hover {background:#78ADAC;color:#F3FEF1;text-decoration:none}
  
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #Nouveau {
  font-size:12px;
  margin-left:64px;
  width:auto
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {  
 #Nouveau {
  font-size:9px;
  margin-left:8px;
  width:300px
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px)  {  
 #Nouveau {
  font-size:11px;
  margin-left:64px;
  width:650px
 }
}

/*********************** Chercher par mots-clé et n° YT **********************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
  #Chercher {
   margin-left:48px;
   margin-top:60px;
   text-align:left;
   width:720px
  }
}
/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) { 
  #Chercher {
   margin-left:36px;
   margin-top:0px;
   text-align:left;
   width:400px
  }
}
/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) { 
 #Chercher {
  margin-left:12px;
  margin-top:60px;
 text-align:left;
 width:600px
 }
}


/*********************** Recherches par mots-clé *****************************/

/* Tronc commun */
#Recherches input.ChampTexte {
 background:#F3FFF5;
}

#Recherches select {
 color:#000000;
}  
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) {  
  #Recherches {
   background:#E2E6EA;
   border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
   border-radius:8px;
   box-shadow: 5px 5px 5px #85899B;
   border-style:solid;
   border-width:1px;
   color:#00286A;
   float:top left;
   margin-left:0;
   padding:2px;
   text-align:center;
   width:440px
  }
 
  #Recherches form {
   height:50px;
   vertical-align:top;
  }
 
 #Recherches legend {
  background:#DADADA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-width:1px;
  border-style:solid;
  border-radius:4px;
  font-size:12px;
  font-weight:bold;
  line-height:12px;
  margin-left:12px;
  padding:4px
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {  
  #Recherches {
  background:#E2E6EA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-radius:8px;
  box-shadow: 5px 5px 5px #85899B;
  border-style:solid;
  border-width:1px;
  color:#00286A;
  float:left;
  font-size:12px;
  height:90px;
  margin-left:0;
  margin-top:12px;
  padding:2px 2px 12px 2px;
  text-align:center;
  width:280px
 }
 
 #Recherches form {
  height:60px;
  vertical-align:top
 }
 
 #Recherches legend {
  background:#DADADA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-width:1px;
  border-style:solid;
  border-radius:4px;  
  font-size:12px;
  font-weight:bold;
  line-height:12px;
  margin-left:12px;
  padding:4px;
 }
}


/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #Recherches {
  background:#E2E6EA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-radius:8px;
  box-shadow: 5px 5px 5px #85899B;
  border-style:solid;
  border-width:1px;
  color:#00286A;
  float:top left;
  margin-left:24px;
  padding:2px;
  text-align:center;
  width:420px
 }
 
 #Recherches form {
  height:50px;
  vertical-align:top
 }
 
 #Recherches legend {
  background:#DADADA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-width:1px;
  border-style:solid;
  border-radius:4px;  
  font-size:12px;
  font-weight:bold;
  line-height:12px;
  margin-left:12px;
  padding:4px;
 }
}

/*********************** Recherches par N0 Y&T *******************************/
/* Tronc commun */

#YT input.ChampTexte {
 background:#F5FFF8;
}  

#YT.Envoi {
 border-radius:6px;
 cursor:pointer;
 font-size:10px
}
 
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #YT {
  background:#E2E6EA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-radius:6px;
  box-shadow: 5px 5px 5px #85899B;
  border-style:none;
  border-width:0;
  color:#00286A;
  float:right;
  margin-left:-72px;
  margin-top:-44px;
  padding:3px 8px 2px 8px;
  text-align:left;
  width:auto
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) { 
 #YT {
  background:#E2E6EA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-radius:8px;
  border-style:none;
  border-width:0;
  box-shadow: 5px 5px 5px #85899B;
  color:#00286A;
  float:left;
  height:24px;
  margin-left:0px;
  margin-top:12px;
  padding:3px 8px 2px 8px;
  text-align:center;
  width:250px
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) { 
 #YT {
  background:#E2E6EA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-radius:8px;
  border-style:none;
  border-width:0;
  box-shadow: 5px 5px 5px #85899B;
  color:#00286A;  /*float:right; */
  margin-left:24px;
  margin-top:12px;
  padding:3px 8px 2px 8px;
  text-align:center;
  width:300px;
 }
}

/*********************** Recherches par pays *********************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #RechPays {
  background:none
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #RechPays         {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #RechPays         {display:none}
}

/************************* Timbres de ce jour ********************************/
/* Tronc commun */
#CeJour {
 content:""; /* Important, sinon l'élément n'est pas généré. */
 clear: both;
}
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #CeJour {
  margin:0 0 0 12px
 }
  
 #CeJour table.Vente {
  background:#E5F2F0;
  border-color:#FFFFFF #D5D5D5 #D5D5D5 #FFFFFF;
  border-width:2px;
  border-style:solid;
  color:#000077;
  margin:6px 0 12px 0px
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #CeJour {
  display:none
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #CeJour {
  margin:0;
  width:700px;
 }
 
 #CeJour .Table {
  background:#E5F2F0;
  border-color:#FFFFFF #D5D5D5 #D5D5D5 #FFFFFF;
  border-width:2px;
  border-style:solid;
  margin:6px 0 12px 0
 }
}

/************************* Evènements de ce jour *****************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 

 #Calend { 
  color:#012C86;
  width:680px
 } 
 
 #Calend a {
  background-position:left center; 
  background-repeat:no-repeat; 
  color:#012C86;
  font-size:11px;
  font-weight:bold;
  margin:0;
  text-align:left;
  z-index:33
 }
 
 #Calend a.timbre {
  background-position:left center; 
  background-repeat:no-repeat;
  color:#012C86;
  font-size:11px;
  font-weight:bold;
  padding:4px;
  text-align:left; 
  z-index:33
 }
 #Calend a:hover {color:#CE0062;text-decoration:none}
 #Calend a.an {color:#012C86;text-decoration:none}
 #Calend a.an:hover {color:#CE0062}
 #Calend a.ad {color:#4B4B4B;text-decoration:none}
 #Calend a.ad:hover {color:#A3A3A3}
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Calend {
  display:none
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {

 #Calend { 
  color:#012C86;
  width:680px
 } 
 
 #Calend a {
  background-position:left center; 
  background-repeat:no-repeat; 
  color:#012C86;
  font-size:11px;
  font-weight:bold;
  margin:0;
  text-align:left;
  z-index:33
 }
 
 #Calend a.timbre {
  background-position:left center; 
  background-repeat:no-repeat;
  color:#012C86;
  font-size:11px;
  font-weight:bold;
  padding:4px;
  text-align:left; 
  z-index:33
 }
 #Calend a:hover {color:#CE0062;text-decoration:none}
 #Calend a.an {color:#012C86;text-decoration:none}
 #Calend a.an:hover {color:#CE0062}
 #Calend a.ad {color:#4B4B4B;text-decoration:none}
 #Calend a.ad:hover {color:#A3A3A3}
}
 
/*********************** Recherche avancée ***********************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #RechercheAvancee  {
  text-align:center
 }
 #RechercheAvancee a {
  background:none;
  color:#005321;
  font-size:12px;
  font-weight:bold
 }
 
 #RechercheAvancee a:hover {
  background:#D2FF00;
  text-decoration:none
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #RechercheAvancee {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) { 
 #RechercheAvancee {display:none}
}

/*********************** Nombre de visiteurs en ligne ************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) {
 #Visiteurs {
  margin:8px;
  text-align:left
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Visiteurs  {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #Visiteurs {display:none}
}

/***************************** La carte de France *****************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #Carte {
  clear:both;
  margin:12px 0 0 0
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Carte  {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) { 
 #Carte {
  margin-top:-900px;
  margin-left:0
 }
}

/*********************** Boutons réseau sociaux ******************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #ResoSocio{background:none}
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #ResoSocio {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #ResoSocio {display:none}
}


/*********************** Textes de bas de page *******************************/
/* Tronc commun */
#Textes {
 background:none;
 color:#003A56;
}

/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #Textes {
  /* border:brown 2px solid; */
  /* width:auto;  */
  z-index:255
 }

 #Textes div table {
  z-index:255
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Textes  {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #Textes {display:none}
}


/******************* Cartouche d'annonce du responsive ************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #Responsive {
  position:absolute;
  left:1300px;
  top:34px;
  
  background:#F0F7F8;
  color:#5D5595;
  padding:12px;
  text-align:justify;
  width:275px
 }
 
 #Responsive a {
  color:#543E72
 }
 
 #Responsive a:hover {
  background:#6D699A;
  color:#F8EAFF
 }

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Responsive  {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #Responsive {display:none}
}

/************ Les css responsive pour le corps principal de la page **********/

 
/******************************* Un article **********************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) {
 article  {
  background:none;
  /* border:darkgreen 1px solid; */
  color:#003789;
  font-size:11px;
  margin-left:32px;
  padding:12px;
  text-align:left
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 article  {
  font-size:11px;
  margin-left:48px;
  padding:12px;
  text-align:left;
  width:480px
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 article  {
  font-size:11px;
  margin-left:48px;
  padding:12px;
  text-align:left;
  width:500px
 }
}

/***************************** Lien vers le clône *****************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) {
 /* Aller à l'autre site */
 #Clone a {
  color:#525462;
  margin-left:12px;
  text-align:left
 }
 
 #Clone a:hover {
  background:#525462;
  color:#EAEAEA;
  text-align:center;
  text-decoration:none
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Clone  {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) { 
 #Clone a {
  color:#525462;
  margin-left:12px;
  text-align:left
 }
 
 #Clone a:hover {
  background:#525462;
  color:#EAEAEA;
  text-align:center;
  text-decoration:none
 }
}

/********************************* Bonjour ************************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #Bonjour {
  color:#004599;
  font-size:11px;
  font-weight:bold;
  margin:12px 0 0 48px;
  text-align:left
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {  
 #Bonjour {
  color:#004599;
  font-size:11px;
  font-weight:bold;
  margin:180px 0 0 12px;
  text-align:left
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) { 
 #Bonjour {
  color:#004599;
  font-size:11px;
  font-weight:bold;
  margin:12px 0 0 48;
  text-align:left
 }
}

/********************************* Actualités *********************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #Actu {
  color:green;
  font-size:14px;
  font-weight:bold;
  text-align:left;
  width:600px
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) { 
 #Actu {
  color:green;
  font-size:14px;
  font-weight:bold;
  text-align:left;
  width:300px
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #Actu {
  color:green;
  font-size:14px;
  font-weight:bold;
  text-align:left;
  width:500px
 }
}

/********************************* Annonce ***********************************/

/* Tronc commun */
#Annonce a       {color:#00193F;font-size:11px}
#Annonce a:hover {background:#00193F;color:#F3FFFD;font-size:11px}
 
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
  #Annonce {
  margin:12px 0 12px 0;
  text-align:left
 }
 
 #Annonce div {
  background-color:#ECFAF7;
  border-radius:4px;
  box-shadow: 1px 2px 5px #7E999B;
  color:#003789;
  font-size:11px;
  margin:12px 0 12px 0;
  padding:5px;
  text-align:left;
  width:auto
 }
 #Annonce h4 {color:#002320;font-size:12px;font-weight:bold} 
 #Annonce h5 {color:#004D60;font-size:12px;font-weight:normal;padding-left:12px} 
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {   
 #Annonce {
  margin:12px 0 12px 0;
  text-align:left;
 }
 
 #Annonce div {
  background-color:#ECFAF7;
  border:#FFFFFF 1px solid;
  border-radius:4px;
  box-shadow: 1px 2px 5px #7E999B;
  color:#003789;
  font-size:11px;
  height:32px;
  margin:12px 0 12px 0;
  padding:5px;
  text-align:left;
  width:250px
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) { 
 #Annonce {
  margin:12px 0 12px 0;
  text-align:left;
 }
 
 #Annonce div {
  background-color:#ECFAF7;
  border:#FFFFFF 1px solid;
  border-radius:4px;
  box-shadow: 1px 2px 5px #7E999B;
  color:#003789;
  font-size:11px;
  height:32px;
  margin:12px 0 12px 0;
  padding:5px;
  text-align:left;
  width:250px
 }
}

/**************************** Dernières mises à jour *************************/
/* Tronc commun */
#DerMaJ {
 color:#007912;
}

#DerMaJ div {
 color:#006100;
 margin-top:8px;
 text-align:left;
}

#DerMaJ a {
 color:#002D79;
}

#DerMaJ a:hover {
 background:#002D79;
 color:#E1F8FF;
 text-decoration:none
}
  
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
  #DerMaJ {
  margin-left:12px;
  text-align:left
 }
 
 #DerMaJ a {
  font-size:12px;
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {  
 #DerMaJ {
  font-size:12px;
  margin-left:12px;
  margin-top:12px;
  text-align:left;
  width:195px
 }
   
 #DerMaJ a {
  font-size:12px;
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px)  {  
 #DerMaJ {
  margin-left:12px;
  text-align:left
 }
   
 #DerMaJ a {
  font-size:12px;
 }
}

/*********************** Annonce d'une nouveauté  ****************************/
/* Tronc commun */
#Nouveau {
 color:#008900;
 font-weight:bold;
 text-align:left
}

#Nouveau span {  
 color:#008900;
 font-size:48px;
 vertical-align:-12px
}

#Nouveau a {background:none;color:#004900;font-size:11px;text-align:left;padding-left:4px}
#Nouveau a:hover {background:#78ADAC;color:#F3FEF1;text-decoration:none}
  
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #Nouveau {
  font-size:12px;
  margin-left:64px;
  width:auto
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {  
 #Nouveau {
  font-size:9px;
  margin-left:8px;
  width:300px
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px)  {  
 #Nouveau {
  font-size:11px;
  margin-left:64px;
  width:650px
 }
}

/*********************** Chercher par mots-clé et n° YT **********************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
  #Chercher {
   margin-left:48px;
   margin-top:60px;
   text-align:left;
   width:720px
  }
}
/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) { 
  #Chercher {
   margin-left:36px;
   margin-top:0px;
   text-align:left;
   width:400px
  }
}
/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) { 
 #Chercher {
  margin-left:12px;
  margin-top:60px;
 text-align:left;
 width:600px
 }
}


/*********************** Recherches par mots-clé *****************************/

/* Tronc commun */
#Recherches input.ChampTexte {
 background:#F3FFF5;
}

#Recherches select {
 color:#000000;
}  
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) {  
  #Recherches {
   background:#E2E6EA;
   border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
   border-radius:8px;
   box-shadow: 5px 5px 5px #85899B;
   border-style:solid;
   border-width:1px;
   color:#00286A;
   float:top left;
   margin-left:0;
   padding:2px;
   text-align:center;
   width:440px
  }
 
  #Recherches form {
   height:50px;
   vertical-align:top;
  }
 
 #Recherches legend {
  background:#DADADA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-width:1px;
  border-style:solid;
  border-radius:4px;
  font-size:12px;
  font-weight:bold;
  line-height:12px;
  margin-left:12px;
  padding:4px
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {  
  #Recherches {
  background:#E2E6EA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-radius:8px;
  box-shadow: 5px 5px 5px #85899B;
  border-style:solid;
  border-width:1px;
  color:#00286A;
  float:left;
  font-size:12px;
  height:90px;
  margin-left:0;
  margin-top:12px;
  padding:2px 2px 12px 2px;
  text-align:center;
  width:280px
 }
 
 #Recherches form {
  height:60px;
  vertical-align:top
 }
 
 #Recherches legend {
  background:#DADADA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-width:1px;
  border-style:solid;
  border-radius:4px;  
  font-size:12px;
  font-weight:bold;
  line-height:12px;
  margin-left:12px;
  padding:4px;
 }
}


/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #Recherches {
  background:#E2E6EA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-radius:8px;
  box-shadow: 5px 5px 5px #85899B;
  border-style:solid;
  border-width:1px;
  color:#00286A;
  float:top left;
  margin-left:24px;
  padding:2px;
  text-align:center;
  width:420px
 }
 
 #Recherches form {
  height:50px;
  vertical-align:top
 }
 
 #Recherches legend {
  background:#DADADA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-width:1px;
  border-style:solid;
  border-radius:4px;  
  font-size:12px;
  font-weight:bold;
  line-height:12px;
  margin-left:12px;
  padding:4px;
 }
}

/*********************** Recherches par N0 Y&T *******************************/
/* Tronc commun */

#YT input.ChampTexte {
 background:#F5FFF8;
}  

#YT.Envoi {
 border-radius:6px;
 cursor:pointer;
 font-size:10px
}
 
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #YT {
  background:#E2E6EA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-radius:6px;
  box-shadow: 5px 5px 5px #85899B;
  border-style:none;
  border-width:0;
  color:#00286A;
  float:right;
  margin-left:-72px;
  margin-top:-44px;
  padding:3px 8px 2px 8px;
  text-align:left;
  width:auto
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) { 
 #YT {
  background:#E2E6EA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-radius:8px;
  border-style:none;
  border-width:0;
  box-shadow: 5px 5px 5px #85899B;
  color:#00286A;
  float:left;
  height:24px;
  margin-left:0px;
  margin-top:12px;
  padding:3px 8px 2px 8px;
  text-align:center;
  width:250px
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) { 
 #YT {
  background:#E2E6EA;
  border-color:#FFFFFF #FFFFFF #CBD0FF #CBD0FF;
  border-radius:8px;
  border-style:none;
  border-width:0;
  box-shadow: 5px 5px 5px #85899B;
  color:#00286A;  /*float:right; */
  margin-left:24px;
  margin-top:12px;
  padding:3px 8px 2px 8px;
  text-align:center;
  width:300px;
 }
}

/*********************** Recherches par pays *********************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #RechPays {
  background:none
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #RechPays         {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #RechPays         {display:none}
}


/************************* Evènements de ce jour *****************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 

 #Calend { 
  color:#012C86;
  width:680px
 } 
 
 #Calend a {
  background-position:left center; 
  background-repeat:no-repeat; 
  color:#012C86;
  font-size:11px;
  font-weight:bold;
  margin:0;
  text-align:left;
  z-index:33
 }
 
 #Calend a.timbre {
  background-position:left center; 
  background-repeat:no-repeat;
  color:#012C86;
  font-size:11px;
  font-weight:bold;
  padding:4px;
  text-align:left; 
  z-index:33
 }
 #Calend a:hover {color:#CE0062;text-decoration:none}
 #Calend a.an {color:#012C86;text-decoration:none}
 #Calend a.an:hover {color:#CE0062}
 #Calend a.ad {color:#4B4B4B;text-decoration:none}
 #Calend a.ad:hover {color:#A3A3A3}
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Calend {
  display:none
 }
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {

 #Calend { 
  color:#012C86;
  width:680px
 } 
 
 #Calend a {
  background-position:left center; 
  background-repeat:no-repeat; 
  color:#012C86;
  font-size:11px;
  font-weight:bold;
  margin:0;
  text-align:left;
  z-index:33
 }
 
 #Calend a.timbre {
  background-position:left center; 
  background-repeat:no-repeat;
  color:#012C86;
  font-size:11px;
  font-weight:bold;
  padding:4px;
  text-align:left; 
  z-index:33
 }
 #Calend a:hover {color:#CE0062;text-decoration:none}
 #Calend a.an {color:#012C86;text-decoration:none}
 #Calend a.an:hover {color:#CE0062}
 #Calend a.ad {color:#4B4B4B;text-decoration:none}
 #Calend a.ad:hover {color:#A3A3A3}
}
 
/*********************** Recherche avancée ***********************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #RechercheAvancee  {
  text-align:center
 }
 #RechercheAvancee a {
  background:none;
  color:#005321;
  font-size:12px;
  font-weight:bold
 }
 
 #RechercheAvancee a:hover {
  background:#D2FF00;
  text-decoration:none
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #RechercheAvancee {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) { 
 #RechercheAvancee {display:none}
}

/*********************** Nombre de visiteurs en ligne ************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) {
 #Visiteurs {
  margin:8px;
  text-align:left
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Visiteurs  {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #Visiteurs {display:none}
}

/***************************** La carte de France *****************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #Carte {
  clear:both;
  margin:12px 0 0 0
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Carte  {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) { 
 #Carte {
  margin-top:-900px;
  margin-left:0
 }
}

/*********************** Boutons réseau sociaux ******************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #ResoSocio{background:none}
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #ResoSocio {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #ResoSocio {display:none}
}


/*********************** Textes de bas de page *******************************/
/* Tronc commun */
#Textes {
 background:none;
 color:#003A56;
}

/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #Textes {
  /* border:brown 2px solid; */
  /* width:auto;  */
  z-index:255
 }

 #Textes div table {
  z-index:255
 }
}

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Textes  {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #Textes {display:none}
}


/******************* Cartouche d'annonce du responsive ************************/
/* 1 * Mise en page pour les grands écrans par défaut ***/
@media screen  and  (min-width:768px) { 
 #Responsive {
  position:absolute;
  left:1160px;
  top:34px;
  
  background:#F0F7F8;
  color:#5D5595;
  padding:12px;
  text-align:justify;
  width:275px
 }
 
 #Responsive a {
  color:#543E72
 }
 
 #Responsive a:hover {
  background:#6D699A;
  color:#F8EAFF
 }

/* 2 * Mise en page pour smartphones ***/
@media screen and  (max-width:480px) {
 #Responsive  {display:none}
}

/* 3 * Mise en page pour tablettes ***/
@media screen and (min-width:481px) and (max-width:767px) {
 #Responsive {display:none}
}
