/***********/
/* le site */
/***********/

/* Import de la police */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');


/* 1. Pour le corps du texte (paragraphes, listes, articles) */
body, 
.texte, 
.article, 
.chapo, 
p, 
li {
    font-size: 1.5rem !important; 
    line-height: 1.25 !important;
}

/* 2. Pour les titres (titres d'articles, titres de blocs, etc.) */
.titre, 
.titre-autres, 
h1, h2, h3 {
    font-size: 1.7rem !important;
    line-height: 1.2 !important;
}

body {
	font-family: 'EB Garamond';
}

strong {
	font-family: 'EB Garamond';
	font-weight: 800;
}

/***********************************************/
/* Cibler un iframe en lui ajoutant une classe */
/***********************************************/
.iframe-plein-ecran {
    width: 100%;
    height: calc(100vh - 420px);
    border: none; /* Supprime la bordure par défaut */
    display: block;
}

/**************/
/* le bandeau */
/**************/

#titrepage {
        float: left;
        width: max-content;
}
#nom-site-spip {
        margin-left: 2rem;
        float: left;
        width: max-content;
}
#slogan-site-spip {
        float: right;
        width: max-content;
}
#bandeau {position: relative}

/****************/
/* 1. On prépare le conteneur parent pour le positionnement absolu */
#bandeau {
    position: relative;
}

/* 2. On positionne le bloc titre par-dessus l'image */
#titrepage {
    position: absolute;
    top: 20px; /* Ajustez cette valeur pour descendre ou monter le texte */
    left: 20px; /* Ajustez cette valeur pour décaler horizontalement */
    z-index: 10; /* Assure que le texte est bien au-dessus de l'image */
    color: #ffffff; /* Changez la couleur si nécessaire pour le contraste */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Ajoute une ombre pour améliorer la lisibilité sur l'image */
    width: 90%; /* Évite que le texte ne dépasse du bandeau */
}

/* 3. Optionnel : S'assurer que l'image ne dépasse pas */
#bandeau .image_fluide img {
    display: block;
    width: 100%;
}
/*******************/
