:root{
    --largeur: 100%;
    --orange: rgb(255,103,31);
    --bleu: rgb(46,68,134);
}
html {
    box-sizing: border-box;
}
body {
    background-color: rgb(247, 244, 228);
}

/* Menu fixe */
.main{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.main-header{
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-nav{
    position: relative;
    z-index: 100;
}

.liste-liens{
    position: static;
}

.liste-liens ul{
    display: flex;
    padding: 0.5rem 1rem;
    gap: 1rem;
}

.liste-liens ul li{
    display: inline-block;
    list-style: none;
    background-color: rgb(247, 244, 228);
    border:  1px solid rgb(250, 220, 162);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    text-align: center;
}

.liste-liens ul li a {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-decoration: none;
}

/*****************************/

.main-header, .container {
    width: 100%;
    background-color: white;
    border: 1px solid rgb(250, 220, 162);
    padding: 0.5rem 1rem;

}

.main-header h1{
    margin: 0.7rem 1rem;
    color: var(--orange);
}

.container{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: baseline;
    /*gap: 1.5rem;*/
}

/* CCFD */
.contenu{
   margin-left: 1rem; 
   margin-bottom: 1rem;
   background-color: rgb(241, 253, 249);
   padding: 1rem;
}
.contenu ul{
    padding: 0;
}

.ccfd li{
    list-style: none;
}
.redac{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.ref{
    font-style: italic;
    font-size: 1.2rem;
    margin-right: 1.5rem;
}
.presentation{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.05rem;
}
span.presentation-strong{
    font-style: italic;
    color: brown;
}
.info{
    font-size: 1.1rem;
}
.bouton-connaitre{
    display: inline-block;
    background-color: rgb(247, 244, 228);
    /*
    border:  1px solid rgb(250, 220, 162);
    border-radius: 0.3rem;
    */
    padding: 0.2rem 0.8rem;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.1rem;
    font-style: italic;
    color: darkblue;
}
.message{
    font-size: 1.1rem;
    display: inline-block;
    background-color: white;
    padding: .6rem 1rem;
    margin: 0;
    border: 1px solid rgb(230, 230, 230);
}
.lien-encyclique{
    margin-left: 3rem;;
}
.lien-encyclique a{
    font-style: italic;
    font-weight: bold;
    color: darkgreen;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
}
.para{
    color:rgb(60, 16, 16);
    font-weight: bold;
    display: inline-block;
    background-color: rgb(178, 178, 251);
    padding: 0.2rem .7rem;
    cursor: pointer;
    border-radius: 0.3rem;
}
.citation {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: white;
    padding: 1rem;
    margin: 0 3rem;
}
/* Encyclique */
.encyclique h1{
    max-width: 80%;
    margin: 0 auto;
    text-align: center;
}
.content, .content-ld{
    margin-right: 2rem;
}
.cadre-titre{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 1rem;
}

.cadre-titre > h2, .cadre-titre > h3, .cadre-titre > h4{
    max-width: 65%;
}

.chapitre{
    max-width: var(--largeur);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.7rem;
    color: rgb(255,103,31)
}
.sous-chapitre{
    max-width: var(--largeur);
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.4rem;
    color: rgb(46,68,134)
}
.titre{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
}
.paragraphe, .paragraphe-ld{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.1rem;
}
.priere{
    color: darkgreen;
    margin-left: 1rem;
    font-size: 1.1rem;

}
.pied{
    font-style: italic;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    font-size: 1.1rem;
}
.auteur{
    text-align: center;
    font-size: 1.2rem;
}
.note{
    font-style: italic;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

/* Plan */
.plan{
    background-color: rgb(245, 253, 255);
    border: 1px solid rgb(206, 246, 232);;
    margin-left: 1rem;
    margin-top: 1rem;;
    padding: 1.5rem;
    width: 70%;
}
.menu-titre{
    font-size: 0.9rem;
    margin: 0;
    padding-bottom: 0.4rem;
    padding-left: 1.4rem;
    font-weight: normal;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: italic;
}
.menu-chapitre{
    font-size: 1.2rem;
}
.menu-souschapitre{
    font-size: 1.0rem;
    margin: 0 0 0.2rem 0.5rem;
    font-weight: normal;
}
.retour,.btn-affiche,.btn-top {
    display: inline-block;
    background-color: rgb(252, 246, 237);
    border:1px solid rgb(255, 218, 162);
    border-radius: 4px;
    text-align: center;
    padding: 0.2rem 0.3rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 1rem;
    min-width: 6rem;
    height: 1.5rem;
    cursor: pointer;
}

.retour::after{
    content: "Plan";
}

.btn-affiche, .btn-top{
    color: blue;
}

.btn-top::after{
    content: "CCFD";
}
.plan a h2{
    color: darkred;
}
.plan a h4{
    color: darkgreen;
}

/* Résumé */

.resume{
    color: rgb(11, 2, 137);
    background-color: rgb(205, 237, 255);
}

.commentaire{
    background-color: rgb(253, 250, 203); 
}
.affiche_resume{
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(17, 1, 99);
}
.ong{
    color: darkgreen;
    font-weight: bold;
    display: inline-block;
}

.encyclique, .laudate{
    display: none;
} 

.extrait{
    color: rgb(223, 124, 26)
}
.plan{
    margin-left: 0.5rem;
  }

  /* LAUDATE DEUM */
.titre-deum{
    font-size: 1.2rem;
    text-align: center;
    color: darkred;
}
.titre-deum p{
    margin: 0.7rem 0;
}

.h2-ld{
    text-align: center;
    color: rgb(80, 0, 0);
}
.h3-ld{
    color: var(--bleu);
    font-size: 1.3rem;
}
.paragraphe-ld{

}
.auteur{
    text-align: center;
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    .contenu {
        margin-left: 0;
        padding: 0.5rem;
    }
    .citation {
        margin: 0;
    }
    .ccfd h1 {
        margin: 0.7rem 0; 
    }
    .ccfd h1, .encyclique h1{
        color: var(--bleu);
    }
    .ref{
        font-size: 1rem;
    }
    .main-header h1{
        margin: 0.5rem;
        font-size: 1.5rem;
    }
    .liste-liens ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0.2rem 0;
        padding: 0.5rem;
        gap: 0.5rem;
    }
    .message{
        padding: .2rem 1rem;
    }
  }