/* ==========================================================================
   Styling and layout for all media
   ========================================================================== */
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in older browsers.
 * Correct `block` display not defined for `details` or `summary` in IE 11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
section,
summary {
  display: block;
}

  html {
    /* 1 */
    overflow-y: scroll;
    /* 2 */
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
  }

  /**
 * Establish baseline.
 */
  html {
    font-size: 16px;
    line-height: 1.5em;
  }

  body {
    /* 1 */
    position: relative;
    /* 2 */
    margin: 0 auto;
    background-color: #f7f6ca;
  }
 
  body {
    color: #333333;
    width: 100%;
    max-width: 1000px;
    font-family: "PT Serif", Georgia, serif;
  }

 /**
*Contenaires principaux.
*/

 /**  en-tete : header **/

  .site-header {
         width: 100%;
         max-width: 1000px;
         background-color: transparent;
         height: 300px;
         padding: 0px;
         text-align: center;
  }

  .site-header div {
         display: block;
  }  

  .entete {
         height: 250px;
         width: 1000px;
  }

  .banniere {
         box-shadow: 2px 2px 10px #61837a;
         border-radius: 10px;
         padding: 0;
         height: 200px;
         width: 920px;
         margin-top: 25px;
         margin-left: auto;
         margin-right: auto;
  }

/** naviguation principale **/
  .nav-sup {
         height: 50px;
         padding: 0px;
         margin: 0px;
  }      box-shadow: 2px 2px 10px #61837a;

  .nav-sup a { 
	display:block; 
	color: #808; 
	text-decoration: none;
  }

  .nav-sup li a {
	text-decoration: none;
  }

  .nav-sup li {
	position: relative;
        vertical-align: middle;
	display:inline-block;
	padding: 6px 15px;
        margin-right: 8px;
        margin-left: 8px;
        margin-top: 5px;
        background-color: #f9f29f;
        border: none;
        border-radius: 10px;
        box-shadow: 1px 1px 4px #61837a;
  }

  .nav-sup li:hover {
	background-color: #e0ff10;
  }

  .nav-sup ul {
	position: absolute;
	top: 2em; left: 0;
	max-height:0em;
        padding: 0;
        margin: 0;
	background-color: transparent;
	overflow: hidden;
	transition: 0.5s max-height 0.15s;
  }

  .nav-sup li:hover ul {
	max-height: 13em;
  }
          

 /**.nav-sup li a:hover { background-color: #e0ff10; } **/

/** indique la page active **/

 .nav-sup .actif {
         background-color: #e0ff10;
         border: #dbeaf3 solid 0.2em;
  }

 .nav-pied .actif a {
         background-color: #e0ff10;
         border: #dbeaf3 solid 0.2em;
  }

/** corps principal **/

  .container {
       width: 100%;
       max-width: 1000px;
       min-height: 100px;
       padding: 0;
       margin-top: 20px;
       background: transparent;
  }

  .container div {
       display: block;
  }
      
  .principal {
       max-width: 920px;
       padding: 10px 0px;
       margin: auto;
       border-radius: 10px;
       background-color: #dbeaf3;
       box-shadow: 1px 1px 4px #61837a;
  }

  .principal div {
        display: block;
        overflow: hidden;
  }

  .article div {
       text-align: center;
       padding-bottom: 5px;
  }
  .article div a {
       text-decoration: none;
  }

  .align_g {
        text-align: left;
         margin: 2% 4%;
         padding: 2% 2%;
         border-radius: 5px;
         box-shadow: 2px 2px 10px #61837a;
  }
  .align_g p { text-align: left;}
  .align_g b { text-align: left;}
  .align_g a {
         text-decoration: none;
         padding: 8px;
         background-color: #c6d0d6;
         border: none;
         border-radius: 10px;
         box-shadow: 1px 1px 4px #61837a;
  }
/** photos article modifications **/

 .photo_modifications {
         margin: 2% 4%;
         padding: 0;
         border-radius: 5px;
         box-shadow: 2px 2px 10px #61837a;
         height: auto;
         max-width: 23%;
  }

/** photos article sav **/

 .photo_sav {
         margin: 2% 4%;
         padding: 2% 2%;
         border-radius: 5px;
         box-shadow: 2px 2px 10px #61837a;
         height: auto;
         max-width: 15%;
         background-color: white;
  }

/** photos article partenaires **/

 .photo_partenaires {
         margin: 2% 4%;
         padding: 0;
         border-radius: 5px;
         box-shadow: 2px 2px 10px #61837a;
         height: auto;
         max-width: 15%;
  }

/** photo article contact **/

 .photo_contact {
    margin: auto;
    border-radius: 5px;
    box-shadow: 2px 2px 10px #61837a;
    width: 90%;
    height: auto;
  }

/** lien messagerie dans article contact **/

  .lien_ext {
         padding: 3px;
         background-color: #c6d0d6;
         border: none;
         border-radius: 10px;
         box-shadow: 1px 1px 4px #61837a;
  }
  .lien_ext a {
         text-decoration: none;
  }

/** article version module **/

  .accueil {
         height: auto;
         min-height: 50px;
         position: relative;
  }

  .accueil div {
         max-width: 38%;
         margin: 2% 4%;
         padding: 2% 2%;
         border-radius: 5px;
         box-shadow: 2px 2px 10px #61837a;
  }

  .accueil_layrac {
         float: left;
         text-align: left;      
  }

  .accueil_layrac a {
         text-decoration: none;
  }

  .accueil_toulouse {
         float: right;
         text-align: left;         
  }

  .accueil_toulouse a {
         text-decoration: none;
  }

  .titre {
        text-shadow: 1px 1px 2px yellow, 0 0 1em yellow, 0 0 0.2em yellow;
        text-align: center;
    }

/** gestion affichage annonces occasions **/

  .annonces div a {
         text-decoration: none;
  }

  .articlelist a {
         text-decoration: none;
  }

  .articlelist li {
        text-decoration: none;
        padding: 3px;
        background-color: #c6d0d6;
        border: none;
        border-radius: 10px;
        box-shadow: 1px 1px 4px #61837a;
        max-width: 92%;
        margin: 2% 4%;       
}

  .bandeau_annonce {
         max-width: 92%;
         height: auto;
         margin: 2% 4%;
         padding: 1% 2% 0 2%;
         border-radius: 5px;
         box-shadow: 2px 2px 10px #61837a;
         text-align: left;
  }

  .bandeau_annonce img {
         float: left;
         text-align: left;      
  }

  .bandeau_annonce p {
         float: right;
         text-align: left;
         height: 50%;
         text-decoration: none;     
  }

  .retour_annonces {
        text-decoration: none;
        padding: 3px;
        background-color: #c6d0d6;
        border: none;
        border-radius: 10px;
        box-shadow: 1px 1px 4px #61837a;
        max-width: 92%;
        margin: 2% 4%;
    }

  .photo_icone_annonce {
         margin: 0;
         padding: 0;
         border-radius: 5px;
         box-shadow: 2px 2px 10px #61837a;
         max-height: 10%;
         max-width: 10%;
  }

  .photo_annonce {
         margin: 2% 4%;
         padding: 0;
         border-radius: 5px;
         box-shadow: 2px 2px 10px #61837a;
         height: auto;
         max-width: 40%;
  }

/** liens dans conteneurs principaux (dessous article) **/

  .contacts {
         min-height: 80px;
         height: auto;
         position: relative;
  }  
  .contacts div {
         display: inline;
         margin: 2% 4%;
         padding: 2% 2%;
         border-radius: 5px;
         box-shadow: 2px 2px 10px #61837a;
  }

  .contact_gauche {
         text-shadow: 1px 1px 2px yellow, 0 0 1em yellow, 0 0 0.2em yellow;
         float: left;
         text-align: center;
  }

  .contact_gauche a {
         text-decoration: none;
  }

  .contact_droit {
         text-shadow: 1px 1px 2px yellow, 0 0 1em yellow, 0 0 0.2em yellow;
         float: right;
         text-align: center;
  }

  .contact_droit a {
         text-decoration: none;
  }

/** pied de page **/

  .site-footer {
       width: 100%;
       max-width: 1000px;
       margin-top: 30px;
       text-align: center;
  }
  
  .barre-pied {
        max-width: 920px;
        margin: auto;
  
  }

  .nav-pied {
         height: 42px;
         background-color: #dbeaf3;
         box-shadow: 1px 1px 4px #61837a;
         border-radius: 5px;
  }

  .nav-pied li {
	 display: inline;
         position: relative;
         top: 8px;
  }

  .nav-pied li a {
         list-style: none; 
         text-decoration: none;
         color: #808;
         background-color: #f9f29f;
         padding: 5px;
         margin: 5px;
         border: none;
         border-radius: 10px;
         box-shadow: 1px 1px 4px #61837a; 
         font-size: 14px;
  }

  .nav-pied li a:hover {
         background-color: #e0ff10;
  }

/** sous pied de page **/

  .prop a {
	text-decoration:none;
  }
         
//** adaptative design **/

@media (max-width: 480px) {
  
  .entete {
          display: none !important;
          } 
  }


@media (max-width: 767px) {
  
  .entete {
          display: none !important;
          }
  .site-header {
          height: 150px;
          padding-top: 25px;
          } 
 
  }

  /**
 * Styling for articles.
 *
 * 1. Prevent really, really long words in article from breaking layout.
 */

  .article {
    margin-bottom: 2em;
    /* 1 */
    word-wrap: break-word;
  }

  /**
 * Search field in navigation.
 */
  .search {
    padding: 1em 6% 0.5em;
    background: transparent;
  }
  .search input[type="search"] {
    width: 16em;
    height: 2.125em;
    padding-right: 0.1875em;
    padding-left: 2em;
    border-radius: 0.5em;
    background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMnB4JyBoZWlnaHQ9JzMycHgnIHZpZXdCb3g9JzAgMCAzMiAzMic+PGcgZmlsbD0nJTIzMzMzJz48cGF0aCBkPSdNNCwxM2MwLTUsNC05LDktOWM1LDAsOSw0LDksOWMwLDUtNCw5LTksOUM4LDIyLDQsMTgsNCwxM3ogTTEzLDE5YzMuMywwLDYtMi43LDYtNnMtMi43LTYtNi02cy02LDIuNy02LDZTOS43LDE5LDEzLDE5eicvPjxwYXRoIGQ9J00xNy41LDE5bDEuNS0xLjVsNC41LDNMMjgsMjVjMCwwLDAsMS41LTAuNzUsMi4yNVMyNSwyOCwyNSwyOGwtNC41LTQuNUwxNy41LDE5eicvPjwvZz48L3N2Zz4=") no-repeat left center;
    background-size: 2em 2em;
  }

  /* Typography
   ========================================================================== */


  /**
 * Harmonize size, style and vertical margin of headings.
 */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    clear: both;
    font-family: sans-serif;
  }
  h1 {
    margin: 0.6315789em 0;
    font-size: 2.375em;
    line-height: 1.1842105em;
  }
  h2 {
    margin: 0.8em 0;
    font-size: 1.875em;
    line-height: 1.2666667em;
  }
  h3 {
    margin: 1em 0;
    font-size: 1.5em;
    line-height: 1.3333333em;
  }
  h4 {
    margin: 1em 0;
    font-size: 1.25em;
    line-height: 1.4em;
  }
  h5 {
    margin: 1em 0;
    font-size: 1.125em;
    line-height: 1.4444444em;
  }
  h6 {
    margin: 1em 0;
    font-size: 1em;
    line-height: 1.5em;
  }