
/* -- Lorsque l'écran est petit, arrêter Safari mobile de forcer la surdimension du texte -- */

  @media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
    html {
      -webkit-text-size-adjust: 100%;
    }
  }



/* -- Lorsque l'écran est plus petit que 1500px -- */

  @media screen and (max-width: 1400px) {
      
    body.couleurs a.logo {
      background-color:orange; /* -- Orange -- */
    }

    /* -- Header -- */

      header {
        padding-bottom:100px;
      }

      header .logo {
        max-width:300px;
      }

      header .infos {
        font-size:1.4rem;
      }

      header .infos h2 {
        margin-top:100px;
        font-size:2.8rem;
      }

    /* -- Footer -- */

      footer div.interne {
        margin-left:40px;
      }


    /* -- Services -- */

      section.icones ul {
        text-align:center;
      }

      section.icones ul li:first-child,
      section.icones ul li {
        margin:0 25px;
        width:12%;
      }

    /* -- Partenaires -- */

      section.partenaires ul li {
        max-width:18%;
      }
    
  }
      

/* -- Lorsque l'écran est plus petit que 1000px -- */

  @media screen and (max-width: 1000px) {
    
    body.couleurs a.logo {
      background-color:yellow;  /* -- Jaune -- */
    }

    /* -- Footer -- */

      footer {
        background-size:auto 80%;
      }

      footer div.interne {
        margin-right:170px;
        padding-top:30px;
      }

      footer a.telephone,
      a[href^="tel"],
      footer a.telephone:link,
      footer a.telephone:visited {
        font-size:1.4rem;
        padding:15px 0;
        top:38px;
      }

      footer a.telephone span,
      footer a.telephone:link span,
      footer a.telephone:visited span {
        font-size:1.4rem;
      }

      footer p.droits {
        text-align:left;
      }

    /* -- Contenu -- */

      div.contenu img {
        float:none;
        max-width:100%;
        width:100%;
      }

  }

/* -- Lorsque l'écran est plus petit que 768px -- */
  
  @media screen and (max-width: 767px) {

    body.couleurs a.logo {
      background-color:green; /* -- Vert -- */
    }

    a.bouton:link, a.bouton:visited {
      font-size:1.2rem;
      padding:15px 35px;
    }


    /* -- Header -- */

      header {
        padding-top:20px;
        padding-bottom:60px;
      }

      header .menu-principal {
        clear:both;
      }

      header .reseaux {
        margin-top:10px;
      }

      header .infos {
        font-size:0.9rem;
      }

      header .logo {
        max-width:150px;
      }

      header .infos h2 {
        margin-top:50px;
        font-size:2rem;
        margin-bottom:35px;
      }

      header .infos p {
        margin-bottom:40px;
      }


    /* -- Footer -- */

      footer {
        background-image:none;
        text-align:center;
      }

      footer .reseaux {
        text-align:center;
      }

      footer .reseaux li {
        margin:0 10px;
      }

      footer div.interne {
        margin:0 20px;
      }

      footer p.droits {
        text-align:center;
        margin-top:20px;
      }

      footer a.telephone, 
      a[href^="tel"], 
      footer a.telephone:link, 
      footer a.telephone:visited {
        position:relative;
        top:0;
        display:block;
        transform:none;
        margin-top:20px;
      }

      footer a.email {
        font-size:0.9rem;
      }

      footer a.realisation:link, footer a.realisation:visited {
        display:block;
        margin-left:0;
      }


    /* -- Services -- */

      section.icones {
        padding:35px 0;
      }

      section.icones ul li:first-child, section.icones ul li {
        margin:0 10px;
        width:15%;
      }

    /* -- Contenu -- */

      div.contenu div.sur-texte {
        padding:40px;
      }

    /* -- Partenaires -- */

      section.partenaires ul li {
        max-width:24%;
      }
   
  }
  

/* -- Lorsque l'écran est plus petit que 524px -- */
  
  @media screen and (max-width: 523px) {

    body.couleurs a.logo {
      background-color:blue; /* -- Bleu -- */
    }

    a.bouton:link, a.bouton:visited {
      font-size:1rem;
    }


    /* -- Header -- */

      header {
        padding-bottom:40px;
      }

      header .menu-principal {
        float:none;
      }

      header .reseaux {
        margin-bottom:40px;
      }

      header .menu-principal ul {
        text-align:center;
      }

      header .menu-principal li {
        margin:0 15px;
      }

      header .infos {
        font-size:0.8rem;
      }

      header .infos h2 {
        font-size:1.6rem;
      }

      header .infos .separateur {
        margin:0 6px;
      }

      header .infos p {
        margin:0 auto 40px;
        max-width:210px;
        line-height:1.5em;
      }

      header .infos p span.separateur:nth-of-type(1) {
        margin-left:11px;
      }

      header .infos p span.separateur:nth-of-type(2) {
        display:none;
      }

      header .logo {
        max-width:120px;
      }

      .reseaux li.facebook a::before, .reseaux li.facebook a:link::before, .reseaux li.facebook a:visited::before {
        top: 0px;
        text-indent: 0;
        width: 0;
        height: 0;
        display: none;
      }
      .reseaux li {
        display: inline-block;
        position: relative;
        width: auto;
        height: auto;
      }
      .reseaux li a, .reseaux li a:link, .reseaux li a:visited {
        width: auto;
        height: auto;
        text-indent: 0px;
      }


    /* -- Services -- */

      section.icones ul li:first-child, section.icones ul li {
        width:22%;
      }

      /* section.icones ul li:first-child {
        margin-bottom:20px;
      } */

    /* -- Contenu -- */

      div.contenu div.sur-texte {
        padding:30px;
      }

    /* -- Partenaires -- */

      section.partenaires ul li {
        max-width:32%;
      }
    
  }

  
  @media screen and (-webkit-min-device-pixel-ratio: 1.5) { 

      /*footer a.realisation:link span, footer a.realisation:visited span {
        background-image: url("../images/absolu@2x.png");
        background-size:85px 28px;
      }*/
    
  }