* {box-sizing: border-box;}
body { 
  min-height: 100vh; width: auto; 
  display: flex; flex-direction: column; flex-wrap: wrap;
  font-size: 18px; margin: 0; padding: 0; 
  background-image: url('../images/texture.gif');
}


a {text-decoration: none;}
a:link {color:#4499FF;}
a:visited {font-family:"verdana"; font-size:14pt; color:#4499FF;} 
a:hover {color:#b70000; text-decoration:none;} /* B70000 = rouge */


/*  1/3 <<<<<<<  NAV   >>>>>>>>  */
  nav{
    display: flex; flex-wrap: wrap; justify-content: flex-end;
    text-align: center; font-size: 1.3rem; 
    font-family: "verdana"; 
    min-height: 5%; padding: 10px;
  }
  nav span, nav a{display: inline-block; width: 120px; color:#4499FF;}
  nav span:hover{cursor: pointer; color: #b70000;}

/*  2/3 <<<<<<<  MAIN   >>>>>>>>  */
  main {display: flex; flex-direction: column; justify-content: center; flex-wrap: wrap;}
  .ecran {position: relative;  min-height: 80vh; padding: 1rem; color: #333; margin: auto;}
  #histoire, #liens, #projet, #photos{
    display: none; flex-flow: wrap;
    margin: auto; color:#303030;}  /* 303030 = maron clair*/ 
  #histoire, #liens, #projet {padding: 8px; font-family: "verdana"; font-size: 1.2rem;}
  
  /* ----  Histoire  ----- */
    #histoire {
      max-width: 972px; font-size: 1rem; text-align:justify; color: #606060}
    .histoireDiv{column-count: 2;
      -webkit-hyphens:auto; hyphens: auto;
      column-gap: 40px; line-height: 1.4rem;}
    #blason {float: left;}
    #histoire img{width: 90px; height: 100px; margin-right: 10px;}
  /* ----  Jumelage  ----- */
    #jumelage {display: flex; flex-direction: column;
      display: none; margin: auto; padding: 8px; 
      font-family: verdana; font-size: 1.2rem; color:#606060;
    }
    #jumelage div {padding-top: 6px; padding-bottom: 6px;}
    #jumelage div a{color: #0580FF;}
    .pays{display: flex; flex-flow: row wrap;}
    .pays div{margin-right: 20px; width: 100px; align-self: center;}
    .wikipedia{color: darkcyan; font-style: italic;}
  
  /* ----  Photos    ----- */
    #photos {
      display : flex; flex-direction: column; 
      justify-content: center; align-items: center; 
      flex-wrap: wrap; display: none;
    }
    
    .galery{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
      gap: 8px;
    }
    @media screen and (max-width: 600px){
      .galery{grid-template-columns: 50% 50%;}
    }
    @media screen and (max-width: 400px){
      .galery{grid-template-columns: 100%;}
    }

    #photos img{
      width: 180px; height: 160px;      
      max-width: 100%; /* evite le debordement */ 
      object-fit: cover;
      aspect-ratio: 1;
      border-radius: 10px;
    }

    /*
    .overlay {
      position: absolute; bottom: 100%; left: 0; right: 0;
      background-color: #008CBA;
      overflow: hidden; width: 100%; height:0;
      transition: .5s ease;}
    .container:hover .overlay {bottom: 0; height: 20%;}
    .text {
      white-space: nowrap; 
      color: white; font-size: 1.1rem;
      position: absolute; overflow: hidden;
      top: 50%; left: 50%; text-align: center; 
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);}
    */
    
  /* ----  Elections ----- */ 
    #elections {
      display: none;
      margin: auto; padding: 8px; 
      max-width: 80vw;
      font-family: "verdana";
    }

    /* ------------ MENU elections------------- */
    #menuCategorieElection{ /* nav1 */
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      background-color: rgb(248, 248, 248);
      font-family: verdana; 
      /* color:#4499FF; */
      color: lightgrey;
      cursor: pointer;
      padding: 10px; /* donne de la hauteur au menu */
      gap: 40px;
    }

    #menuCategorieElection span{
      display: inline-block;
      text-align: center;
    }

    #menuCategorieElection span:hover{
      color: rgb(78, 138, 208);
    }

/*  ------------ #ecranPolitique  ----------- */ 
  #ecranPolitique{  /* ecran1 */
    font-size: 1rem;
    background-color: #fefef0;
    flex-grow: 1;
    display: block;
    min-height: 500px;
  }

  #ecran2{
    min-height: 60vh;
    margin-top: 40px;
  }

  .menuAnnees{
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    color: #0080C0;
    background-color: rgb(253, 253, 94);
    cursor: pointer;
    display: none;
  }

  .component{
    padding-top: 30px;
    display: flex; 
    justify-content: space-around;
    display: none; /*  repassera en flex par le JS */
  }
  
  #ecranPolitique h1{
    text-align: center; margin-top: -5px; 
    font-size: 1rem;
  }


  table {
      position:relative;
      margin: auto;   /* equivaut à <table align=center> */
      color:#000000;
  }
  
  th{color: darkgrey; font-size: 0.7rem;}

  .superSmall {font-size: 0.6rem;}
 
  .bas_de_table_1er, .bas_de_table_2eme{
    font-size: .8rem; text-align: center;
    color:#0080C0; /* bleu turquoise */
  }

  .smallGrey{color: darkgrey; font-weight: normal; font-size: 10pt;}

  td{padding: 5px; width: 100px;}
  td:nth-of-type(2), td:nth-of-type(3){text-align: right; width: 100px;}
  
  .unSeulTour { /* pour europe uniquemeùent */
    font-style: oblique; font-size: 0.6rem; 
    text-align: center; margin: 5px 0 5px 0;
    color: rgb(7, 161, 20);
  }
  .small {font-size: 14px;}
  .small2{font-size: 12px;}
  .center {text-align: center;}

  .result
    { margin-top: 20px; margin-bottom: 20px;
      font-size: 0.8rem; color: red; 
      text-align: center;}
  .resultNational{font-size: 0.7rem; text-align:center; margin-bottom: 15px;}
  ul.resultatsNationaux{font-size: 0.8rem;}
  /*  ------------------------------------------------------- */
  .g{background-color:#FFEAEA;}
  .d{background-color:#F2FFFF;}
  .autre{background-color:#F4F4F4; text-align:center;}
  .g,.d,.autre{text-align: left; padding-left: 20px;} 
  .legende{width:350px; text-align:center; 
    background-color: rgb(233, 25, 222);}
  .elu{color:red;}
  /* -----------------------------------------------------------*/
  
  ul.principal {list-style-type: none;}
  li.principal {
     margin-left: 4px;
     float:left; /*pour IE*/
     display:block;
     width: 50px;
     border-style:solid;
     border-width:1px;
     text-align:center;
     border-color:#DCDCDC #898989 #898989 #950000;
            /*   # haut, droite, bas, gauche   */ }
  .resultatsNationaux{font-size: 1rem; color: darkgrey; margin-top: 20px; text-align: center;}

  .europeRefOUI{background-color: rgb(147, 211, 19); color: white; font-weight: bold;} 
  .europeRefNON{background-color: rgb(255, 37, 37); color: white; font-weight: bold;}
#europe nav{display: flex;}
.sousTitre{text-align: center; font-size: 0.6rem; margin-top: 6px; margin-bottom: 10px; color: cadetblue;}

/* ----------------------------------------------------------- */


/* ----- MEDIA QUERY  ----- */

/* mobile */
@media (max-width: 600px) {
  #menuCategorieElection .li{display: inline-block;}
  .navTitre{
    margin: 0 10px 0 10px; 
    /* width: 150px; */
    text-align: center; color:silver;}
  .navspan2{cursor: pointer;}
  
  /*
  div.component{
    flex-direction: column;
    width: 100%;
  }
  */
  .deuxieme_tour{margin-top: 20px;}

  td:first-child{font-size: 0.8rem; padding-left: 5px;}
  td:nth-of-type(2), td:nth-of-type(4){font-size: 0.9rem;}
  
}


@media screen AND (min-width: 1200px) {
  .electionsDiv{width: 1000px;}
}

    

      /* ----  Liens  -------- */
    
    #liens{
      display: flex; flex-direction: column;
      justify-content: center; align-items: center;
      flex-wrap: wrap;
    }

    #liens section{ /* parent de .h1 et de p */
      display: flex; flex-direction: column;
      justify-content: center; align-items: center; 
    }

    #liens section:last-child{margin-top: 30px;}

    #liens section p{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: -10px;
    }
    
    #liens section p.last_p{
      display: grid;
      grid-template-columns: 1fr;
      justify-content: center;
    }

    #liens section .h1{
      display: flex; flex-direction: column;
      justify-content: center; align-items: center;
      font-family: verdana; color:#808080; font-size: 1.2rem;
      font-weight: bold;
    }
      .h2Title{
      background-color: #FFA; padding: 2px 6px; 
      border-radius: 6px;
      }
      .h3Soustitre{font-size: 0.8rem; color:#cdcaca; margin-top: 8px;}
    
    .ahrefLien{
      display: block; 
      font-size: 1rem; text-align: center; 
      margin: 10px;
    }

  
/*  3/3 <<<<<<<<  FOOTER  >>>>>>  */ 
footer {margin-top: auto; text-align:center; font-size: 0.7rem; color: #A9A9A9; font-family: arial;}
#m{position: absolute; left:0; bottom: 0;}


/*  -----------------------------  */
@media screen AND (width < 700px){
    nav{justify-content: center;flex-wrap: wrap;}
    nav span{padding: 4px 0;}
}

@media screen AND (width < 500px){
  .histoireDiv{
    column-count: 1;
    -webkit-hyphens:auto; hyphens: auto;
    line-height: 1.4em;
  }
  #blason {float: left;}
  #jumelage{margin-left: 60px;}
  #liens section p{
    display: flex;
    flex-direction: column;
    margin-top: -10px;
  }
}

@media screen and (min-width: 1200px){
  .electionsDiv{width: 1000px;}
}