/*
*
* Theme Name: Lacaf
*	Version: 1.0
*	Description:
*	Author: Arnaud
*	Author URI: https://www.adnprog.fr


/* Custom settings
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Header styles */
header {
  background-color: rgb(0, 161, 241);
  color: #fff;
  padding: 20px;
  font-size: 18px;
  text-align:center;
  height:100%;
}
header a { color: #fff; text-decoration: none; }
nav { display:inline-block;}
/* navigation bar settings */
nav ul {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
  display:inline-block;
}

nav li { padding: 2rem 1rem 1rem 1rem;}
/* Hide all the dropdowns (submenus) */
.has-children ul { display: none; }

.has-children:hover ul {
     	display: inline-block;
	position:absolute;
  background-color: rgb(0, 161, 241);
/*   right:80px; */
	list-style:none;
	margin:0;
	padding: 25px 25px 0px 15px;
	font-weight: normal;
	text-align:center;
}

.article-item a{
  text-decoration: none; 
  font-size: 30px;
  line-height: auto;

}

 .article-item p{
  text-decoration: none; 
  font-size: 15px;
  line-height: auto;

}
div#ez-toc-container ul li {
    display: block;
}
nav li { display: inline-block; }

#content[role='main'] { padding: 20px; min-height:100%; }

/* Footer styles */
footer{
background-color: #000000;
line-height: 1.4rem;
padding:20px;
color: #535353;
font-size: 1.2rem;
text-align: center;
min-height: 4rem;
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

.container,.archive .wrapper h1 {
    width: 100%;
    max-width: 80%!important;
    margin: 0 auto;
}



/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}]



/* Style de base pour la liste des articles */
.article-list {
    list-style: none; /* Supprime les puces */
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.article-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none; /* Enlève les puces */
}

.article-item {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 20px;
    flex: 0 1 calc(33.333% - 40px); /* Ajustement pour l'espacement */
    margin: 20px; /* Espace entre les éléments */
    box-sizing: border-box; 
        min-height: 350px;
}
.article-item::before {
  border-radius: 20px;
    content: ""; /* Nécessaire pour générer le pseudo-élément */
    position: absolute; /* Position absolue par rapport à son parent .article-item */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5); /* Couleur de fond noire avec une opacité de 0.5 */
    z-index: 0; /* Place le pseudo-élément sous le contenu textuel */
}
.article-item a,.article-item p {
  color:#fff;
}
.article-teaser {
    bottom: 0;
    position: absolute;
    z-index: 1; /* Plus élevé que le z-index du ::before pour qu'il apparaisse au-dessus */
}

.article-content img,.article-content iframe {
  max-width: 100%;
}


.article-content iframe {
  margin-left: 25%;
  margin-right: 25%;
}





.article-image{
  width:100%;      background-size: cover!important;
    aspect-ratio: 1.618 / 1;
}
table{
  width: 100%
}
iframe{
      aspect-ratio: 1.618 / 1;

}

@media (max-width: 768px) {
    .article-item {
        flex-basis: 100%; /* Prend toute la largeur sur les petits écrans */
        margin: 10px 0; /* Ajuste la marge pour le layout vertical */
    }
}

.hamburger-btn {
    display: none; /* Cache le bouton par défaut */
    font-size: 24px; /* Ajuste la taille du hamburger */
    cursor: pointer;
}

.main-nav {
    display: flex; /* Assure que le menu est affiché horizontalement sur les desktops */
}


.tagsc {
  background-color: #f2f2f2;
  margin: 5px;
  display: inline-block;
  padding: 5px;
}

.tagsc a {
  text-decoration: none;
  color: #333;
}




@media (max-width: 768px) {
    .hamburger-btn {
        display: block; /* Affiche le bouton sur les mobiles */
    }

    .main-nav {
        display: none; /* Cache le menu sur les mobiles */
        flex-direction: column; /* Alignement vertical des éléments du menu */
    }

    .main-nav.open {
        display: flex; /* Réaffiche le menu quand il est ouvert */
    }

  .container, .archive .wrapper h1 {
      width: 100%;
      max-width: 100% !important;
          margin: 0 auto;
  }

.article-content iframe {
    margin-left: 0;
    margin-right: 0;
}


}