p{
    color: black;
    font-family: "Fira Code", monospace; /*Consigne 19*/
}

h1{
    color: white;
    font-size: 25px;
    font-family: "Montserrat", sans-serif; /*Consigne 19*/
}

body {
    font-family: "Fira Code", monospace; /*Consigne 19*/
}

main{
    margin-top: 20px;
}

/*////////////////////////////Header////////////////////////////*/

header {
    height: 80px;
    background-color: cyan; /*Consigne 19*/
    display: flex;
    align-items: center;
    padding: 0 20px;
    justify-content: space-between;
}

header .site-title {
    color: white;
    font-size: 1.8rem;
    font-weight: bold;
}

/*///////////////Image article index.html///////////////////////*/

.card img {
    height: 200px;
    object-fit: cover;
}


.article-card-large img {
    height: 81%;
    object-fit: cover;
}

.card-body {
    font-family: "Montserrat", sans-serif; /*Consigne 19*/
}

.card-body p{
    font-family: "Montserrat", sans-serif; /*Consigne 19*/
}
.card-body h3{
    font-size: larger;
}

/*//////////////////////////Footer////////////////////////////////*/

footer {
    background-color: #222;
    color: white;
    padding-top: 2rem;
    padding-bottom: 1rem;
    margin-top: 3rem;
}

footer h5 {
    margin-bottom: 1rem;
}

footer a {
    text-decoration: none;
    color: white;
}

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

footer .bi {
    font-size: 1.25rem;
    margin-right: 0.5rem;
}

footer hr {
    background-color: white;
    border: 0;
    height: 1px;
}

footer p, footer .small {
    font-size: 0.875rem;
}

.btn-newsletter {
    background-color: cyan; /*Consigne 19*/
    color: black;
}

/*///////////////////////////custom.html////////////////////////////*/

.custom-layout {
    text-align: center;
    width: 100%;
}

.widget-1,
.article-center,
.widget-2 {
    display: inline-block; /*inline-block (Consigne 18)*/
    vertical-align: top;
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
}

.left-widget {
    width: 20%;
}

.article-center {
    width: 55%;
}

.right-widget {
    width: 20%;
}

.widget .option {
    display: block;
    margin-bottom: 15px;
}

.widget label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.widget select,
.widget input[type="color"],
.widget input[type="range"] {
    width: 100%;
}

/*//////////////////////////article.html/////////////////////////*/

.article-categorie{
    font-family: "Playfair Display", serif; /*Consigne 19*/
}

.article-titre{
    font-family: "Playfair Display", serif; /*Consigne 19*/
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.article-image{
    font-family: "Playfair Display", serif; /*Consigne 19*/
    margin-bottom: 1rem;
}

.article-date-auteur{
    font-family: "Playfair Display", serif; /*Consigne 19*/
    margin-bottom: 2rem;
    color: gray;
    font-size: 0.9rem;
}

.article-titre,
.article-image,
.article-date-auteur {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.article-intro{
    font-family: "Playfair Display", serif; /*Consigne 19*/
}

.article-texte h3 {
    font-family: "Playfair Display", serif; /*Consigne 19*/
}

.article-texte p {
    font-size: large;
    font-family: "Playfair Display", serif; /*Consigne 19*/
}


.article-container {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

/*///////////////////////////Calculatrice///////////////////////////*/

.sidebar-calc .calc-btn {
    width: 100%;
}

.sidebar-calc {
    width: 200px;
    flex-shrink: 0;
}

/* Grille de boutons */
.sidebar-calc .calc-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
}

.sidebar-calc .calc-buttons button {
    width: 100%;
    height: 50px;
    font-size: 1rem;
}