html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #e3bf11;
}


/*début gestion des polices*/

@font-face {
    font-family: 'Garamond';
    src: url('/lib/garamond-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    src: url('/lib/open-sans/OpenSans-Regular.ttf') format('truetype');
}

/* Utilisation de la police Garamond pour les titres H1, H2 et H3 */
h1, h2, h3, h4, h5 {
    font-family: 'Garamond', serif;
}


/* Utilisation de la police Open Sans pour les paragraphes */
p {
    font-family: 'Open Sans', sans-serif;
}
/*fin gestion des polices*/

.container {
    max-width: 1200px; /* Définit une largeur maximale pour le conteneur */
    margin: 0 auto; /* Centre le conteneur horizontalement */
    padding: 0 15px; /* Ajoute un peu de padding pour éviter que le contenu touche les bords */
}
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f4f4f4;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
}
.top-bar-left .logo {
    font-size: 1.5em;
    color: #333;
}
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.75em;
}
.top-bar-right ul {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
}

.top-bar-right li {
    flex-grow: 1; /* Permet aux éléments de croître pour occuper l'espace disponible */
    text-align: center; /* Centre le texte dans chaque élément */
    white-space: nowrap; /* Empêche le retour à la ligne */
}

.top-bar-right ul li a {
    color: #333;
    text-decoration: none;
}
.top-bar-right ul li a:hover {
    text-decoration: underline;
}


.top-bar-left img:first-of-type {
    width: 35%; /* Ajuste la largeur selon vos besoins */
    height: auto; /* Maintient le ratio d'aspect de l'image */
}


.submit-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
}
.submit-button:hover {
    background-color: #0056b3;
}

/*classe flexbox permettant de placer à droite le "submit" boutton*/
.button-container {
    display: flex;
    justify-content: flex-end;
}



/*  */
/*  */
/*  Gestion Menu */
header {
    display: flex;
    /*justify-content: space-between;*/
    /*align-items: center;*/
    background-color: #333;
    /*color: #0056b3;*/
    padding: 10px 20px;
}

/* Début CSS - Jeu 15 Aout 2024 - Affichage Menu Ordinateur et Tablette */

.menu {
    color: white; /* Affiche le texte en blanc */
    text-align: center; /* Centre le menu sur la page */
}

.menu nav {
    list-style: none; /* Suppression des puces */
    padding: 0;
    display: inline-block; /* Centre le menu */
}

.menu nav a {
    color: white; /* Affiche les liens en blanc */
    text-decoration: none; /* Supprime la couleur bleue des liens */
    margin: 0 10px; /* Ajout d'espace entre les liens */
}

#hamburger, #hamburger-logo {
    display: none; /* Cache le symbole Hamburger et la case de la checkbox sur les écrans d'ordinateur ou de tablette */
}


/* Fin CSS - Jeu 15 Aout 2024 - Affichage Menu Ordinateur et Tablette */


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

/* Début : Les deux lignes  avant les articles*/
.sub-header {
    width: 100%;
    border-bottom: 1px solid lightgray; /* Trait en gris léger */
}

.top-line {
    text-align: left;
    padding: 10px 0;
    background-color: #f8f8f8;

}

/*  */
.top-line {
    display: flex;
    align-items: center;
}

.top-line span {
    display: flex;
    align-items: center;
}

.top-line span:first-child {
    margin-right: 0.9%; /* Ajuste cette valeur pour l'espace souhaité */
}

.top-line span:nth-child(2){
    margin-right: 0.9%; /* Ajuste cette valeur pour l'espace souhaité */
}

.top-line span:-child {
    margin-right: 0.9%; /* Ajuste cette valeur pour l'espace souhaité */
}

.top-line p {
    margin: 0;
}
/*  */

.top-line p {
    margin: 0;
    font-weight: bold;
}




.bottom-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f0f0f0;
}

.left-content {
    flex: 1;
}

.headline {
    color: gray;
    text-transform: uppercase;
    margin: 0;
}

.links {
    margin: 5px 0 0 0;
}

.links a {
    color: black; /* Liens non bleus */
    text-decoration: none;
    margin-right: 10px;
}

.links a:hover {
    text-decoration: underline; /* Trait sous le lien au survol */
}

.right-content {
    text-align: right;
}

.social-icons a {
    margin-left: 10px;
}

.social-icons img {
    width: 20px;
    height: 20px;
}

.social-icons a:hover img {
    filter: brightness(0.8); /* Transformation de l'icône au survol */
}

/* Fin : Les deux lignes avant les articles*/

main {
    display: flex;
    padding: 20px;
}
.articles {
    flex: 3;
}
.sidebar {
    flex: 2;
    background-color: #fff;
    padding: 20px;
    margin-left: 20px;
}
article {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
}

/* Début Articles principaux */

.article-container {
    overflow: hidden; /* Pour contenir les flottants */
}

.article-image {
    float: left;
    margin: 0 20px 20px 0; /* Ajout espace autour de l'image */
    width: 150px; /* Permet de regler la largeur de l'image */
    height: auto; /* Permet de régler la hauteur automatique pour conserver les proportions */
}

.article-content {
    overflow: hidden; /* Pour contenir les flottants */
}

.article-content h2 {
    margin-top: 0;
}

.article-content .source {
    clear: both; /* Pour s'assurer que la section "Source" soit sous l'image */
    margin-top: 20px; /* Espace au-dessus de la section "Source" */
}

/* Fin Articles principaux */

/* Début articles "side bar - Situés à coté, à droite*/
article img {
    max-width: 100%;
    height: auto;
}
.sidebar article {
    margin-bottom: 20px;
}
.sidebar article img {
    max-width: 100%;
    height: auto;
}
.sidebar article p {
    margin: 5px 0;
}
.sidebar article h3 {
    margin: 10px 0;
}
.sidebar article h3 a {
    color: #007bff;
    text-decoration: none;
}
.sidebar article h3 a:hover {
    text-decoration: underline;
}

/* Fin articles "side bar" - situés à coté*/

/*Début Centrer image dans page Article + Mettre en italique le résumé de l'article*/
.image-article-dough-jamaica {
    text-align: center;
}

.image-article-dough-jamaica img {
    display: block;
    margin: 0 auto;
}

.image-article-dough-jamaica figcaption {
    color: gray;
}
.resume-article-dough {
    font-style: italic;
}
/*Fin centrer image dans page Article + Mise en italique du résumé de l'article*/


/* Début Footer */
.footer {
    background-color: #6a6262; /* Couleur de fond sombre */
    color: #fff; /* Couleur du texte claire */
    padding: 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centre les éléments horizontalement */
}

.footer-section {
    flex: 1;
    min-width: 200px;
    margin: 0 2%; /* Réduit l'espace entre les colonnes et l'exprime en pourcentage */
}

.footer-section h3 {
    margin-top: 0;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #ffffff;
    text-decoration: none;
}

.footer-section ul li a:hover {
    text-decoration: underline;
}

.social-media {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.social-media a {
    margin-right: 10px;
}

.social-media img {
    width: 24px;
    height: 24px;
}

hr {
    border: 0;
    border-top: 1px solid #444; /* Couleur de la ligne horizontale */
    width: 100%;
    margin: 20px 0;
}

.footer-copyright {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    width: 100%; /* Fait que le texte de copyright occupe toute la largeur */
}

.footer-copyright a {
    color: #ffffff;
    text-decoration: underline;
}

/* Fin Footer */




/* DEBUT MEDIAS QUERIES */


/* Responsive styling */
@media (max-width: 768px) {

    /* Applique les styles ci-dessous pour les écrans de largeur maximale de 768px */

    /* .container: Utilise un conteneur flexible avec une direction de colonne et centre les éléments */
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* .top-bar: Barre supérieure flexible avec une direction de colonne, centrée et pleine largeur */
    .top-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* .top-bar-left .logo: Taille de police de 1.75rem pour le logo, équivalent à la taille H3 */
    .top-bar-left .logo {
        font-size: 1.75rem; /* Equivalent to H3 size */
    }



    /* .button-container: Marge supérieure de 10px pour le conteneur de boutons */
    .button-container {
        margin-top: 10px;
    }

    /* header: En-tête flexible avec une direction de colonne, centrée, padding de 10px et fond de couleur #333 */
    header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        background-color: #333;
    }



    /* .header-right: Conteneur droit de l'en-tête flexible, centré, pleine largeur et marge supérieure de 10px */
    .header-right {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 10px;
    }

    /* .search-bar: Barre de recherche avec marge à gauche automatique */
    .search-bar {
        margin-left: auto;
    }

    /* .search-bar input: Champ de saisie avec padding de 10px et taille de police de 16px */
    .search-bar input {
        padding: 10px;
        font-size: 16px;
    }

    /* #hamburger, #hamburger-logo: Taille de police de 1.75rem pour le hamburger et son logo, équivalent à la taille H3 */
    #hamburger,
    #hamburger-logo {
        font-size: 1.75rem; /* Permet d'avoir l'aspect de la balise H3 */
    }

    /* .top-bar-left img:first-of-type: Largeur de 15% pour la première image de .top-bar-left, hauteur automatique pour maintenir le ratio */
    .top-bar-left img:first-of-type {
        width: 25%; /* Permet d'ajuster la largeur */
        height: auto; /* Maintient le ratio d'aspect de l'image */
    }


    /* .menu: Menu fixe pour rester en place lors du défilement, largeur de 0px pour ne pas chevaucher le texte */
    .menu {
        position: fixed;
        width: 0px;
    }

    /* main: Texte avec marge à gauche de 50px pour éviter le chevauchement avec le menu, largeur de 500px et texte justifié */
    main {
        margin-left: 50px;
        width: 500px;
        text-align: justify;
    }

    /* #hamburger: Cache la checkbox du hamburger */
    #hamburger {
        display: none;
    }

    /* #hamburger-logo: Curseur pointeur, fond noir, largeur de 200px, affichage en bloc, texte blanc, aligné à droite, rangé par défaut avec translation, padding de 10px */
    #hamburger-logo {
        cursor: pointer;
        background: black;
        width: 200px;
        display: block;
        color: white;
        text-align: right;
        transform: translateX(-168px);
        padding: 10px;
    }



    #hamburger-menu {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Aligne les liens à gauche */
    }

    /* nav: Navigation flexible avec une direction de colonne, fond noir, débordement caché, largeur de 200px, liens rangés par défaut avec translation */
    nav {
        display: flex;
        flex-direction: column;
        background: black;
        overflow: hidden;
        width: 300px;
        transform: translateX(-168px);
    }



    /* #hamburger-logo, nav: Transition de 0.7s pour les animations */
    #hamburger-logo,
    nav {
        transition: 0.7s;
    }

    /* #hamburger:checked ~ #hamburger-logo, #hamburger:checked ~ nav: Affiche les menus en changeant la position lors du clic sur le hamburger */
    #hamburger:checked ~ #hamburger-logo,
    #hamburger:checked ~ nav {
        transform: translate(0);
    }

    /* nav a: Liens de navigation en blanc, sans soulignement, padding de 10px */
    nav a {
        color: white;
        text-decoration: none;
        padding: 10px;
        display: block; /* Chaque lien occupe une ligne entière */
    }

    /* nav a:hover: Fond gris foncé pour les liens au survol */
    nav a:hover {
        background: #444;
    }

    /* main: Direction de colonne pour les articles sous l'image */
    main {
        flex-direction: column;
    }

    /* .article-image: Image d'article centrée, sans flottement, marge automatique en bas de 20px, affichage en bloc */
    .article-image {
        float: none;
        margin: 0 auto 20px;
        display: block;
    }

    /* .article-content: Contenu de l'article centré */
    .article-content {
        text-align: center;
    }
}


@media (min-width: 769px) and (max-width: 1024px) {


    .article-image {
        float: none;
        margin: 0 auto 20px;
        display: block;
    }

    .article-content {
        text-align: center;
    }


}

@media (min-width: 1025px) {

    header {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        background-color: #333;
    }

    .menu {
        display: flex;
        align-items: center;
    }

    nav {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    nav a {
        color: white;
        text-decoration: none;
        padding: 10px;
    }

    .header-right {
        display: flex;
        align-items: center;
    }

    .search-bar {
        margin-left: 20px;
    }

    .search-bar input {
        padding: 10px;
        font-size: 16px;
    }

    #hamburger,
    #hamburger-logo {
        display: none;
    }
}


/* FIN MEDIAS QUERIES*/









/*Début CSS - Page Recherche*/

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    justify-content: space-between; /* Ajoute cet alignement */
}

.form-group {
    display: inline-block;
    margin-bottom: 10px;
    width: calc(50% - 10px); /* Ajuste la largeur des groupes de formulaires */
}

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

.form-group input,
.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.button-group {
    display: flex;
    justify-content: flex-end; /* Aligne le bouton à droite */
    width: 100%; /* Fait que le bouton occupe toute la largeur disponible */
}

button[type="submit"] {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #0056b3;
}


/*Fin CSS - Page Recherche*/