@media ( max-width : 640px ) {
  * {
    box-sizing: border-box;
  }
  body {
    width: auto;
    margin: 0px;
    padding: 0px;
  }
  img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
    max-width: 100%;
  }
  img {
    height: auto;
      width: auto;
      
  }
  textarea, table, td, th, code, pre, samp {
    -epub-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
  }
  code, pre, samp {
    white-space: pre-wrap;
  }
  .element1, .element2 {
    float: none;
    width: auto;
  }
  .titre {
    font-size: large;
    font-weight: bold;
    color: blue;
  }
  .hide_mobile {
    display: none !important;
  }
  body::before {
    content: "Version mobile du site";
    display: block;
    text-align: center;
    font-style: italic;
    color: #777777;
  }
    /*  ==== ajustement du texte page blog = classe de la section texte ====   */
    
    .text-bloc {
    color:blue;
    font-style:italic;
    font-size:medium;
    line-height:1.2em;
    max-width:480px;
    text-align: left ;
    margin-right: 5px;
    margin-left: 5px;
    background-color: #ffffcc; 
      
}
    /* === classe du TD de la table = le cadre =====  */
    .info-window  {
    background-color: #ffffcc; 
    align-content: left;
    font-size: small;
    margin-left: 5px;

}
    /* ==== REDUIT DIMENSION IMAGES DU BLOG  === */
    .blog-image {
        max-width:480px;
        height:auto;
        width: :auto;
        align-content:left;
    }
    /* ====== CLASSE DE LA TABLE ========  */
.infotable {
    width: 95%; 
    text-align: left; 
    margin-left: 5px; 
    margin-right: 5px; 
    border="1";
}
    /* ==== LIENS VERS PAGE PRINCIPALE =====  */
.lien-droit {
    text-align: left;
   }
.lien-gauche {
    text-align: left;
}
}
/* =====FIN CSS MOBILE================================  */

@media ( max-device-width : 768px ) and ( orientation : landscape ) {
  html {
  }
}
/* =====================================  */

body {
  background-color: azure;
}

* {
  font-family: Arial, "Arial Black", "Comic Sans MS", "Courier New", Georgia, "Times New Roman";
}

.titre {
  font-size: xx-large;
  font-weight: bold;
  color: blue;
}

table#liens {
  background-color: yellow;
  border: 2px solid black;
  padding: 0px;
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: x-large;
}

table#info {
  background-color: white;
  font-style: italic;
  font-size: large;
  border: 2px solid black;
  padding: 0px;
  width: 100%;
  text-align: center;
  border-radius: 10px;
}

table#info-footer {
  background-color: white;
  font-style: italic;
  font-size: medium;
  border: 2px solid black;
  padding: 0px;
  width: 100%;
  text-align: center;
  border-radius: 10px;
}

mark {
  font-weight: bold;
}

table#infom33effacer {
  background-color: white;
  width: 100%;
}

table#liste-articles {
  background-color: #ffffe2;
  border: 1px solid black;
  padding: 0px;
  width: 95%;
  border-collapse: collapse;
}

table#liste-articles-tech {
  background-color: #ffffe2;
  border: 1px solid black;
  padding: 0px;
  width: 70%;
  border-collapse: collapse;
  border-radius: 20px;
}

table#photos {
  background-color: white;
  border: 1px solid black;
  padding: 0px;
  width: 100%;
  border-collapse: collapse;
}

table#photostitre {
  background-color: white;
  border: 1px solid black;
  padding: 0px;
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  text-align: center;
  font-size: 1.5em;
  color: blue;
}

.separation {
  font-weight: bold;
  color: blue;
  background-color: #c7ecee;
}

tr, td {
  border: 1px solid black;
}

th {
  border: 1px solid black;
  background-color: aqua;
}

.numero-ag {
  width: 20%;
}

a {
  color: red;
}

a:hover {
  font-style: oblique;
  font-weight: bold;
}

a:visited {
  color: #e84393;
}

#info-window {
  font-size: smaller;
  text-align: left;
}

#info2 {
  font-style: italic;
}
/* ====== CLASSE DE LA TABLE ========  */
.infotable {
    width: 60%; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    border="1";
}
 /* === classe du TD de la table = le cadre =====  */
.info-window  {
    background-color: #ffffcc; 
    align-content: middle;
    

}
/*  ======   info-texte   non utilisé ====== */

.info-texte  { 
    color:blue;
    margin-right: 10px;
    margin-left: 30px;
    font-style:italic;
    line-height: 1.2em;
    font-size: medium;
    width: 20%;
    font-family: "Source Sans Pro",Helvetica,Arial,sans-serif;
    text-align: center;
    padding: 20px;
}
/* === section entete facebook =====  */
.facebook-post-header {
    background-color: white;
    text-align: center;
    font-size: small;
}
.date-facebook {
    color: black;
    text-align: center;
}
  /*  ==== ajustement du texte page blog = classe de la section texte ====   */
.text-bloc {
    color:blue;
    font-style:italic;
    font-size:medium;
    line-height:1.2em;
    width: 90%;
    text-align: left ;
    margin: 50px;
    font-family: "Source Sans Pro",Helvetica,Arial,sans-serif;
}
/* ==== LIENS VERS PAGE PRINCIPALE =====  */
.lien-droit {
    text-align: right;
      
}
.lien-gauche {
    text-align: left;
}

.colonne1  {
    column-width: 50%;
    }
.colonne2  {
    column-width: 50%;
    }
.tableprincipale  {
    width: 100%;
    border: 1;
    background-color: white;
    column-width: 50%;
    
}