html{
  box-sizing: border-box;
 
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
    
    margin: 24px;
    padding: 24px;
    background: rgb(230, 229, 225);
    color: black;
    font-family: 'Sen', sans-serif;
  }
  svg{
    margin: 0;
    grid-area:1/1/-1/-1;
    border-radius:10px;
}

svg body{
    width:100vw;
    height:100vh;
    display:grid;
}
@media screen and (min-width: 1260px) {
  .index svg{
      display: block;
      width: auto;
      padding: 0;
      margin: 0;
      
  }}
  

  .index .peterhalley{
    color: black;
    text-decoration: none;
    font-family: 'Sen', sans-serif;
    font-size: 24px; 
    text-align: left;
    margin-left: 48px;
    margin-top: 48px;
    margin-bottom: 48px;
    padding: 48px;
  }

  .halley .peterhalley{
    color: black;
    text-decoration: none;
    font-family: 'Sen', sans-serif;
    font-size: 24px; 
    text-align: left;
    margin-left: 48px;
    margin-top: 48px;
    margin-bottom: 48px;
    padding: 48px;
  }
  
  
  p{
    color: black;
    text-align: justify;
    line-height: 1.3;
    font-family: 'Baskervville', serif;
    font-size: 16px;
      padding: 0px;
      margin-right: 0px;
      margin-left: 0px;
      align-items: baseline;
      -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word; 
    align-items: flex-start;
    display: flex;
  }

  

  a{
    color: black;
    text-decoration: none;
    font-family: 'Sen', sans-serif;
    font-size: 24px;
      padding: 0;
      margin: 0; 
  }

  .txta a{
    color: black;
    text-decoration: none;
    font-family: 'Sen', sans-serif;
    font-size: 12px;
      padding: 0;
      margin: 0;
      display: grid;
      grid-column: 1/3;
      grid-row: 4/5;
  }

  h2{
    color: black;
    text-decoration: none;
    font-family: 'Sen', sans-serif;
    font-size: 24px;
      padding: 0;
      margin: 0; 
  }


  button{
    color: black;
    text-decoration: none;
    font-family: 'Sen', sans-serif;
  }




@media screen and (min-width: 1260px) {
    .grid{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 100px 700px 1fr 1fr 1fr 1fr 50px ;
        grid-gap: 24px;
        gap:24px;
        grid-column-gap: 24px;
    }
    .projetrecode .grid{
      display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 100px 300px 1fr 1fr 1fr 1fr 50px ;
        grid-gap: 24px;
        gap:24px;
        grid-column-gap: 24px;
    }
   

     
  
  
  
  img{
    max-width: 100%; height: auto;
   
}


.projetrecode .article{
  grid-column: 5/10;
  grid-row: 2/4;
  align-items: flex-start;
  display: grid;
 }


 
    .article{
     grid-column: 5/9;
     grid-row: 2/4;
     align-items: flex-start;
     display: block;
    }

    .imga{
      grid-column: 1/5;
    grid-row: 2/3;
    margin-top: 25px;
    align-items: flex-start;
    display: flex;
    }

  .imga p{
    font-family: 'Sen', sans-serif;
    font-size: 16px;
    position : absolute; 
    
    margin-top : 490px;
    overflow : hidden; /* empêche le dépassement de texte */
    max-height:100%; 
  }


 figure{ position : relative; 
  display : inline-block; 
}
 figure:hover figcaption{ 
  display : block;
  opacity : 0.8;
  /* ou table-cell si vous avez besoin d'un alignement vertical */
}

 figure figcaption{
  display : none; 
  position : absolute;
  bottom : 0; /* la zone de texte s'agrandit de bas en haut */
  /* ou top : 0; la zone de texte s'agrandit de haut en bas */
  left : 0; right : 0; /* voir règles*/
  background-color : #fff;
  padding : 10px;
  overflow : hidden; /* empêche le dépassement de texte */
  max-height:100%;    /* limite la taille de la zone de texte */
}



    .qva{
      grid-column: 1/3;
    grid-row: 3/4;
    align-items: flex-end;
    display: flex;
    position: relative;
   
     }

    .qvb{
      grid-column: 3/5;
    grid-row: 3/4;
    align-items: flex-end;
    display: flex;
    position: relative;
    
    }

    .qvc{
      grid-column: 5/7;
    grid-row: 3/4;
    align-items: flex-end;
    display: flex;
    position: relative;
    }

    .qvd{
      grid-column: 7/9;
    grid-row: 3/4;
    align-items: flex-end;
    display: flex;
    position: relative;
    }

    .qvda{
      grid-column: 1/3;
    grid-row: 4/5;
    align-items: flex-end;
    display: flex;
    position: relative;
    }

    .qvdb{
      grid-column: 3/5;
    grid-row: 4/5;
    align-items: flex-end;
    display: flex;
    position: relative;
    }

    .qvdc{
      grid-column: 5/7;
    grid-row: 4/5;
    align-items: flex-end;
    display: flex;
    position: relative;
    }

    .qvdd{
      grid-column: 7/9;
    grid-row: 4/5;
    align-items: flex-end;
    display: flex;
    position: relative;
    }
    .dma{
      grid-column: 1/3;
    grid-row: 5/6;
    align-items: flex-end;
    display: flex;
    position: relative;
    }

    .dmb{
      grid-column: 3/5;
    grid-row: 5/6;
    align-items: flex-end;
    display: flex;
    position: relative;
    }

    .dmc{
      grid-column: 5/7;
    grid-row: 5/6;
    align-items: flex-end;
    display: flex;
    position: relative;
    }

    .dmd{
      grid-column: 7/9;
    grid-row: 5/6;
    align-items: flex-end;
    display: flex;
    position: relative;
    }

    .dmda{
      grid-column: 1/3;
    grid-row: 6/7;
    align-items: flex-end;
    display: flex;
    position: relative;
    }

    .dmdb{
      grid-column: 3/5;
    grid-row: 6/7;
    align-items: flex-end;
    display: flex;
    position: relative;
    }

    .dmdc{
      grid-column: 5/7;
    grid-row: 6/7;
    align-items: flex-end;
    display: flex;
    position: relative;
    }

    .dmdd{
      grid-column: 7/9;
    grid-row: 6/7;
    align-items: flex-end;
    display: flex;
    position: relative;
    }

    .croquis1{
      grid-column: 1/4;
    grid-row: 3/4;
    
    display: flex;
   }
     .croquis2{
      grid-column: 1/4;
    grid-row: 4/5;
    
    display: flex;
    
   
     }
     .croquis3{
      grid-column: 4/7;
    grid-row: 3/4;
    
    display: flex;
    
   
     }
     .croquis4{
      grid-column: 7/10;
    grid-row: 3/4;
    
    display: flex;
    
   
     }
     .croquis5{
      grid-column: 1/4;
    grid-row: 5/6;
    
    display: flex;
    
   
     }
     .croquis6{
      grid-column: 4/7;
    grid-row: 4/6;
    
    display: flex;
    
   
     }
     .croquis7{
      grid-column: 1/4;
    grid-row: 6/7;
    
    display: flex;
    
   
     }
     .croquis8{
      grid-column: 7/10;
    grid-row: 4/6;
    
    display: flex;
    
   
     }
     .site{
      grid-column: 1/5;
    grid-row: 2/3;
    
    display: flex;
    
   
     }

  }
        

    @media screen and (max-width: 1260px) {
      * {
        box-sizing: border-box;
      }
    
      body {
        width: auto;
        margin: 0;
        padding: 0;
        }
    
      img,
        textarea{
        max-width: 100%;
      }
      
      img {
        height: auto;
      }

      
      
      textarea {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
      }
       
      
      /* Passer à une seule colonne*/
      .halley{
        float: none;
        width: auto;
      }
      
      body:before {
        display: block;
            text-align: center;
            
        }
        .header-tittle{
            grid-column: 1/2;
            grid-row: 1/2;
            text-align: center;
            align-self: center;
            font-family: 'Raleway', sans-serif;
            font-size: 36px;
        }
        .indexrecode .header-tittle{
            grid-column: 1/2;
            grid-row: 1/2;
            text-align: center;
            align-self: center;
            font-family: 'Raleway', sans-serif;
            font-size: 36px;
        }

        
     
       figure{
        padding: 24px;
        margin: 24px;
    }
     
    .article{
      padding: 24px;
      margin:24px;
    }

    .imga p{
      font-family: 'Sen', sans-serif;
      font-size: 16px;
    }
     
     
  
        
    }

    
  
  /*@media screen and (max-device-width:768px) and (orientation: landscape) {
      html {
       -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%;
      }
    }*/