:root {
      --rougeSilans: #9e2d0f;
      --noir: #000000;
      --orangeSilans: #dc8e63;
      --orangeSilansOpacité: rgba(220, 142, 99, 0.2);
      --vert1Silans: #365d5c;
      --bleuSilans: #00579b;
      --blanc: #FFFFFF;
      --tWhite: rgba(255, 255, 255, 0.2);
/* pour formulaire */
      --page-background: #d8d8d8;
      --form-background: #FFF;
      --dark-grey: #2e2e2e;
      --title-color: #9f0d0d;
      --default-space: 30px;  
    }
    form fieldset {
      background: var(--form-background);
      padding: var(--default-space);
      border: 1px solid var(--dark-grey);
      border-radius: 5px;
      margin: auto;
      margin-bottom: var(--default-space);
      margin-top: var(--default-space);
      width: 50vw;
    }
    form fieldset legend {
      font-size: 1em;
      color: var(--vert1Silans);
      padding: 0 var(--default-space);
      background: var(--form-background);
      border: 1px solid var(--dark-grey);
      border-radius: 5px;
    }
    form fieldset > div {
/* espace entre chaque rubrique (chaque rubrique est dans une div particulière) */
      margin-bottom: var(--default-space);
    }
    input, button, select {
/* les caractères de chacune de ces balises auront la taille du "parent" */ 
      font-size: inherit;
    }
    form input {
      padding: 5px;
      width: 100%;
      border: 1px solid var(--dark-grey);
      border-radius: 5px;
      color: var(--dark-grey);  /* couleur du texte */
    }
    form input[type=submit] {
      color: var(--orangeSilans);
    }
    form input[type=radio], form input[type=checkbox] {
      width: auto; /* pour les boutons radios et les boites à cocher largeur minimale et non pas 100% */
    }
/* fin css formulaires */
    h1 {
      text-align: center;
      font-size: 2em;
      color: var(--vert1Silans);
    }
    h2 {
      text-align: center;
      margin-top: 0px;
      margin-bottom: 15px;
      font-size: 1.3em;
      color: var(--bleuSilans);
    }
    h3 {
      padding: 0;
      margin: 0;
      font-size: 1.2em;
      color: var(--bleuSilans);
    }
    a {
      text-decoration: none;
      color: black;
    }     
    a.gridContainerBulletinsItem {
    color: black;
    }
    a:hover {
      background-color: var(--bleuSilans);
    }
    body {
      margin: 5px;
      box-sizing: border-box;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      font-size: 1rem;
    }
    .navFlex {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      list-style: none;
    }
    ul.navFlex {
      padding: 0px;
      margin: 0px;
      border-style: solid;
      border-width: 2px;
      border-color: var(--rougeSilans);
      background-color: var(--noir);
    }
    .navFlex > li > a {
      color:  var(--orangeSilans);
    }
    #texteMichel > a {
      color:  var(--orangeSilans);
    }     
    .container {
      margin-top: 3rem;
      display: flex;
    }
    .president {
      width: 33%;
      border-style: solid;
      border-width: 2px;
      border-color: var(--noir);
      padding: 5px;
    }
    .presentation {
      width: 42%;
    }
    .seyssel {
      width: 100%;
    }
    #arbreGenea {
      margin-top: 10px;
    }
    .imgGenealogie {
      display: block;
      margin: 15px auto;
      width: 95%;
      border: solid;
      border-width: 1px;
      border-color: var(--orangeSilans);        
    }
    #presentation {
      padding: 0px;
      margin: 0px;
      text-align: center;
    }
    .cousins {
      width: 25%;
      border-style: solid;
      border-width: 2px;
      border-color: var(--noir);
      padding: 5px;
    }
    #aDocAnciens {
      color: var(--orangeSilans);
    }
    .titreDG {
      margin-top: 40px;
      margin-bottom: 10px;
      margin-right: 150px;
      margin-left: 180px;
    }
    .gridContainerDG {
      display: grid ;
      grid-template-columns: repeat(5, 200px);
      grid-template-rows: auto auto;
      justify-content: space-around;
      margin-left: 150px;
      margin-right: 150px;
      margin-top: 40px;
    }
    .gridContainerDG > div {
      border: .5px solid var(--orangeSilans); 
      text-align: center;border-radius: 5px;
      padding: 2px;
      margin-bottom: 20px;
    }
    .gridContainerDG > div > p {
      margin-top: 2px;
      margin-bottom: 2px;
      font-size: 0.8rem;
      /* font-family: ; */
    }
    /*
    .moyenage {
       font-family: ;
    }
    */
    .gridContainerBulletins {
      display: grid ;
      grid-template-columns: repeat(6, 150px);
      grid-template-rows: auto auto auto auto auto auto auto auto;
      grid-gap: 2px;
      justify-content: space-between;
      margin-left: 200px;
      margin-right: 200px;
      padding: 10px;
      margin-top: 20px;
    }
    .gridContainerBulletins > div {
      background-color: var(--orangeSilansOpacité);
      border: 1px solid var(--orangeSilans);
      text-align: center;border-radius: 2px;
      padding: 5px;
      margin-bottom: 10px;
    }
    div.gridContainerBulletinsItem > a {
      color: var(--bleuSilans);
    }
    #ctGeneral{
      margin-top: 3.5em;
      display: flex;
      padding-left: 20px;
      padding-right: 20px;
    }
    #statuts {
      width: 60%;
      border: solid;
      border-width: 1px;
      border-radius: 5px;
      border-color: var(--vert1Silans);
      margin-right: 5px;
      padding: 5px;
    }
    #contacts {
      width: 40%;
      border: solid;
      border-width: 1px;
      border-radius: 5px;
      border-color: var(--vert1Silans);
      margin-left: 5px;
      padding: 5px;
    }

    .ac {
      text-decoration-color: #00579b;
      text-align: center;
      }
    
   
    .legende   {
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      font-style: italic;
      font-family: 'Lucida Handwriting';
      font-size: .8em;
      text-align: center;
      padding: 0px;
      margin: 0px;
    }

   
    
    .imgDocAncien {
      border: solid;
      border-width: 1px;
      border-color: var(--orangeSilans);
    }
    .carte1 {
      width: 70%;
      padding: 10px;
      margin-left: auto;
      margin-right: auto;
    }
    .legendeCarte1 {
      width: 30%;
      padding: 10px;
    }
    .beGeneral {
      display: flex;
      flex-direction: row;
    }
    .genealogie {
      display: flex;
    }
    .arbreGenea {
      width: 70%;
    }
    .genealogieMichel {
     /* display: flex; */
      margin-top: 80px;
      width: 30%;
      min-height: 30em;
      vertical-align: middle;
    }

    #texteMichel { 
      padding: 10px;
      margin: auto;
    }
    /* #genealogieTitreArbre {

    } */

    .container2Colonnes {
        display: flex;
        padding: 10px 50px;
        }

    .chacuneDes2Colonnes {
        width: 40%;
        border-radius: 5px;
        }

  
  
    .pied {
      position: absolute;
      width: 100%;
      height: 25px;
      bottom: 0px;
    }