/* ===== Fonts ===== */
@font-face { 
  font-family: "title-font"; 
  src: url('fonts/Roboto/Roboto-Bold.ttf');
} 

@font-face { 
  font-family: "body-font"; 
  src: url('fonts/Roboto/Roboto-Regular.ttf');
} 

/* ===== Body ===== */
body { 
  font-family: "body-font", sans-serif;
  color:#17365c;
  background: #EEE url(images/im1.jpg);
  background-position: top;
  background-repeat: repeat;
  background-size: 100% auto;
  height: 100%;
  margin: 0;
}

/* ===== Main container ===== */
#main { 
  width: 950px;
  margin: 20px auto;
}

/* ===== Header ===== */
header {
  height: 140px;
  width: 870px;
  margin: 0 auto 20px auto;
  padding: 20px 40px 5px 40px;
  border-radius: 7px;
  background: rgba(255,255,255, 0.9);
  border: 1px solid #eee;
}

h7 { 
  font-size: 300%;
  font-family: "title-font";
  color: #17365c;
}

/* ===== Headings ===== */
h1 { 
  font-size: 200%;
  font-family: "title-font";
  margin: 0 0 10px 0;
  color: #17365c;
}

/* ===== Paragraphs ===== */
p { 
  margin: 0 0 20px 0;
  line-height: 1.7em;
}

/* ===== Images ===== */
img { 
  border: 0;
  max-width: 100%;
  height: auto;
}

/* ===== Lists ===== */
ul li { 
  list-style-type: square;
  margin: 0 0 5px 0; 
  line-height: 1.5em;
  display: list-item;
}

ol { 
  margin: 0 0 0 20px;
}

ol li { 
  margin: 0 0 10px 0;
}


/* ===== Site content ===== */
#site_content { 
  width: 870px;
  overflow: hidden;
  margin: 0 auto;
  padding: 30px 40px 5px 40px;
  border-radius: 7px;
  background: rgba(255,255,255, 0.9);
  border: 1px solid #eee; 
}

  /* ===== Home page layout ===== */

  #home {
  display: flex;                   /* met left et right content côte à côte */
  justify-content: space-between;  /* left_content à gauche, right_content à droite */
  align-items: flex-start;         /* alignement vertical en haut */
}

#home #left_content { 
  width: 65%; 
  text-align: left;                /* texte aligné à gauche */
}

#home #right_content {
  float: right;
  width: 23%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;     /* aligner le contenu en haut */
  align-items: flex-end;           /* aligner l’image à droite du bloc */
}

#home #right_content img {
  max-width: 100%;
  height: auto;                    /* conserve les proportions */
  display: block;                  
}


/* ===== Top navigation ===== */
.topnav a {
  font-family: "title-font";
  font-size: 150%;
  float: left;
  display: block;
  text-align: center;
  padding: 0 60px 0 0;
  text-decoration: none;
  color: #17365c;   /* <-- bleu foncé par défaut */
}

/* Onglet actif */
.topnav a.active {
  font-weight: bold;
  color: #4691cf; /* bleu clair actif */
}

.topnav a:hover,
.topnav a.selected {
  color: #4691cf;   /* <-- bleu clair au hover ou actif */
  font-weight: bold;
}

/* ===== Links inside content ===== */
#site_content a:link,
#site_content a:visited,
#site_content a:hover,
#site_content a:active {
    color: #4691cf;
  text-decoration: none;
}

/* ===== Clear floats ===== */
#site_content::after {
  content: "";
  display: table;
  clear: both;
}