body{
    margin:0px;
    padding:0px;
    width: 100vw;
    height: 100vh;
    position:static;
    background-color: ivory;
}̆

.ordinateur{
    display:block;
    visibility: visible;
}

span{
    margin: 0;
    padding: 0;
}

h2{
    padding: 0 0 0 0;
    margin: 0x 0 0 0;
    font-size: 18px;
    line-height: 1.5;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

h3{
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

p{
    margin: 0;
    padding: 0;
}

nav{
    position:sticky;
    top:0px;
    display:flex;
    justify-content: space-between;
    padding:10px 20px 10px 20px;
    margin :0;
    background-color: ivory;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 2px;
    border-style: solid;
    border-color: black;
}


h2.navigation {
    display: inline;
    padding:0;
    margin:0;
    padding: 0px!important;
    margin: 0px!important;
    width: fit-content;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
}

h2.navigation_date {
    display: inline-block;
    padding:0;
    margin:0;
    padding: 0px!important;;
    margin: 0px!important;;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
}

input{
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    margin-left:10px;
}

.nasa {
    margin:0px;
    padding: 0;
    display: inline;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-decoration: none;
}

.nasa:hover{
    text-decoration: underline;
    cursor: pointer;
}

.date-jour{
    left:0px;
    display: inline;
    margin:0px;
    padding:2px 0px 0px 0px;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    float:right;
}

section{
    margin:0px;
    padding:0px;
    display:flex;
    
}

#infos{
    display: flex;
    flex: 1;
    flex-direction: column;
    max-width: auto;
    margin: 0;
    padding: 0;
}

#concept,#concept_tel {
height: min-content;
background-color:black;
max-width:30vw;
margin-left: 10px;
margin-right: 20px;
margin-top: 20px;
padding: 15px;
border-radius: 8px;
}

#h2_concept {
    padding: 0;
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: white!important;
}

#concept a{
    font-size: 15px;
    line-height: 1.25;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: ivory!important;
    text-decoration: underline;
    cursor: pointer;
}

#concept_tel a{
    font-size: 15px;
    line-height: 1.25;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: ivory!important;
    text-decoration: underline;
    cursor: pointer;
}

#concept .p_concept {
    font-size: 15px;
    line-height: 1.25;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    color: ivory!important;
}

#concept_tel{
    font-size: 15px;
    line-height: 1.25;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    color: ivory!important;  
}

section.portable{
    display: none;
    visibility: hidden;
}

#description {
    height: min-content;
    border: 2px solid;
    border-color: black;
    background-color:ivory;
    max-width:30vw;
    margin-left: 10px;
    margin-right: 20px;
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    }

#nom_auteur{
    font-size:13px;
    color:black;
    font-family: Arial, Helvetica, sans-serif;
}

#image-titre {
    padding: 5px 0px 0px 0px;
    margin: 0;
    font-size: 45px;
    line-height: 1em;
    font-weight: normal;
    font-family: Times New Roman, Times, serif, Helvetica, sans-serif;
}

h2#expl{
    margin-top: 15px!important;
    padding:0px;
    margin-bottom:0;
}

#image-description{
    font-size: 15px;
    line-height: 1.25;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
}


img{
    border-radius: 30px 30px;
    width: 65vw;
    margin:0;
    padding:20px 10px 20px 20px;
}

#editeurs {
    height: min-content;
    border: 2px solid;
    border-color: black;
    background-color:ivory;
    max-width:30vw;
    margin-left: 10px;
    margin-right: 20px;
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    }

#editeurs p{
    line-height: 1.25em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: black;
}

#editeurs a{
    line-height: 1.25em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
}

#editeurs a:hover{
    text-decoration: underline;
}

footer {
    position:sticky;
    bottom:0px;
    padding:10px 20px 10px 20px;
    margin :0;
    background-color: ivory;
    border-top:2px;
    border-bottom:0px;
    border-left:0px;
    border-right:0px;
    border-style: solid;
    border-color: black;
    display: flex;
    justify-content: space-between;
  }

  footer a{
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    color:black;
    text-decoration: none;
    display: inline-block;
  }

  footer a:hover{
    text-decoration: underline;
  }

  h2.tel_navigation{
    display: none;
    visibility: hidden;
}

  @media (min-width : 100px)   /* selon la taille de l'onglet entre 100 et 800 */
  and (max-width : 900px){

    *{
        box-sizing: border-box;
    }

    section.portable{
        display: block;
        visibility: visible;
    }

    #infos{
        margin-bottom: 60px;
    }

    body {
        display: block; /* Chaque élément sera empilé verticalement */
        margin: 0;
        padding: 0;
        width: 100%; 
        box-sizing: border-box;
    }

    input, .navigation_date {
        display: none;
        visibility: hidden;
    }

    .ordinateur{
        display:block;
        visibility: visible;
        margin-top: 0px;
        margin-bottom: 65px;
    }

    h2.navigation{
        display: none;
        visibility: hidden;
    }

    h2.tel_navigation {
        display: inline-block; /* Utilise flexbox pour centrer le texte */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        width: 100%; /* Occupe 100% de la largeur du parent */
        height: 100%; /* Si tu veux que le texte soit centré dans un bloc de hauteur définie */
        padding: 0 0 0 0;
        margin: 0;
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 600;
        text-align: center; /* Centre le texte horizontalement */
    }
    

    section {
        display: block; /* Les sections passent en mode bloc */
        width: auto; /* Les sections occupent toute la largeur */
        margin: 15px;
        padding: 0;
        box-sizing: border-box;
    }

    .portable{
        width: auto;
        margin:10px 30px 10px 30px;
        box-sizing: border-box;
    }

    #concept{
        visibility: hidden;
        display: none;
    }

 #description, #editeurs {
        display: block; /* Chaque bloc est en mode bloc */
        min-width: 100%; /* Les blocs occupent toute la largeur */
        max-width: 100%; /* Empêche les marges additionnelles */
        margin: 10px 0px; /* Espacement vertical entre les blocs */
        padding: 15px; /* Conserve un espace intérieur pour le contenu */
        box-sizing: border-box; /* Inclut les bordures et padding dans la largeur */
    }

    #concept_tel{
        display: block; /* Chaque bloc est en mode bloc */
        min-width: 100%; /* Les blocs occupent toute la largeur */
        max-width: 100%; /* Empêche les marges additionnelles */
        margin: 25px 0px 0px 0px; /* Espacement vertical entre les blocs */
        padding: 15px; /* Conserve un espace intérieur pour le contenu */
        box-sizing: border-box; /* Inclut les bordures et padding dans la largeur */
    }

    img, #img_round {
        width: 100%; /* Les images occupent toute la largeur */
        margin: 0px 0; /* Espacement vertical */
        padding: 0px!important;
        border-radius: 15px 15px;

    }

    footer {
        display: none }
    
    footer a {
        padding: 10px;
        display: inline-block; /* Les liens restent sur la même ligne */
    }
    
    footer h3 {
        padding: 10px;
        display: inline-block; /* Les titres restent sur la même ligne */
    }
    

    nav {
        position: fixed;
        top: auto !important;
        bottom:0px!important;
        display: inline-flex; /* Utilise flexbox pour centrer les éléments */
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
        height: min-content; /* Laisse la hauteur s'ajuster au contenu */
        width: 100%; /* Occupe toute la largeur de l'écran */
        padding: 15px;
        margin: 0;
        background-color: ivory;
        border-top: 2px solid black;
        border-left: 0;
        border-right: 0;
        border-bottom: 0px;
        
    }

    nav div {
        display: none;
        visibility: hidden;
    }

    body {
        display: flex;
        flex-direction: column; /* Force les éléments à s'empiler verticalement */
        align-items: stretch; /* S'assure que chaque élément prend toute la largeur */
        margin: 0;
        padding: 0;
        width: 100%;
        height: fit-content;
        box-sizing: border-box;
    }
    
    div {
        display: block; /* Assure que chaque div est en mode bloc */
        width: 100%; /* Occupe toute la largeur du parent */
        margin: 10px 0; /* Ajoute un espace entre les divs */
        padding: 15px;
        box-sizing: border-box;
    }
    
}