@charset "UTF-8"; 

/* créé par Gabriel-le le 4 avril 2022 pour joomla3
import le 13/04/2022 pour joomla4 */

:root {
  --couleur_titre: #F02C16; /* variable pour le rouge issus du bulletin dans les Hn - cb2c16 - changé pour améliorer le contraste et l'accéssibilité sur le noir https://color.review/*/
  /* modification des variables de cassiopeia */
  --cassiopeia-color-primary: #111;
  --cassiopeia-color-link: #111;
  --cassiopeia-color-hover: #111;
}

/* pour que tous les textes soient en helvetica */
*{
  font-family: helvetica; 
}

/* ---------------------------------------------------------------------------------------
reseaux sociaux dans la top barre, pour aligner la liste, couleur */
div.container-topbar lu {
	overflow:hidden;
}

div.container-topbar li{
	display:inline-block;
	color: var(--couleur_titre);
  font-weight:bold;
  margin-right: 2em;  
}

.facebook:before{
  content:url(/images/habillage_site/32px-Facebook_icon_black.svg.png);
  filter: invert(18%) sepia(86%) saturate(2661%) hue-rotate(354deg) brightness(104%) contrast(93%);
  }


.twitter:before{
  content:url(/images/habillage_site/Twitter_font_awesome.svg.png);
  filter: invert(18%) sepia(86%) saturate(2661%) hue-rotate(354deg) brightness(104%) contrast(93%);
  }
  
.bluesky:before{
  content:url(/images/habillage_site/Bluesky_logo32.svg.png);
  filter: invert(18%) sepia(86%) saturate(2661%) hue-rotate(354deg) brightness(104%) contrast(93%);
  }

.youtube:before{
  content:url(/images/habillage_site/Youtube-logo-black.png);
  filter: invert(18%) sepia(86%) saturate(2661%) hue-rotate(354deg) brightness(104%) contrast(93%);
  }
  
 .instagram:before{
  content:url(/images/habillage_site/Instagram_32.png);
  filter: invert(18%) sepia(86%) saturate(2661%) hue-rotate(354deg) brightness(104%) contrast(93%);
  }

.mastodon:before{
  content:url(/images/habillage_site/Mastodon32.png);
  filter: invert(18%) sepia(86%) saturate(2661%) hue-rotate(354deg) brightness(104%) contrast(93%);
  size:25px;
  }

.spotify:before{
  content:url(/images/habillage_site/Spotify_icon.png);
  filter: invert(18%) sepia(86%) saturate(2661%) hue-rotate(354deg) brightness(104%) contrast(93%);
  size:25px;
  }

/*------------------------------------------------------------------------------------------------------
bannière. Dans template base, 2em de chaque côté. mise à 0 pour tout couvrir */

body.wrapper-fluid header > .grid-child {
  padding-left: 0em;
  padding-right: 0em;
}

/*image banniere toute la page */
.grid-child {
  max-width: none;
}


/*--------------------------------------------------------------------------------------------------------*/
/* menu */

.container-header .container-nav{
  padding-bottom: 0em; /*1 par défaut, mais prend de la place pour rien */
}

div[class="collapse navbar-collapse"] *{
  color: var(--couleur_titre);
}

div[class="collapse navbar-collapse"] ul{
  border-radius: 7px;
} 

div[class="collapse navbar-collapse"] li{
  border-top: 1px solid var(--couleur_titre);
  border-bottom: : 1px solid var(--couleur_titre);
  border-radius: 7px;
  background-color: var(--cassiopeia-color-primary);
} 

div[class="collapse navbar-collapse"] a:hover {
  background-color: #f4cccc;
  padding: 0.75em;
  border-top: : 1px solid var(--couleur_titre);
  border-bottom: : 1px solid var(--couleur_titre);
  border-radius: 5px;}

/*taille du triangle */
.metismenu.mod-menu .mm-toggler::after{
  margin-inline-start: 1.5em;
  border-left: 0.9em solid transparent;
  border-right: 0.9em solid transparent; 
}

div[class="collapse navbar-collapse"] li:hover ul ul {
  display:none;} /* hides sub-sublists */
div[class="collapse navbar-collapse"] li:hover ul {
  display:block;} /* shows sublist on hover */
div[class="collapse navbar-collapse"] li li:hover ul {
  display:outside; /* shows sub-sublist on hover */
  margin-left:200px; /* this should be the same width as the parent list item */
  margin-top:-35px; /* aligns top of sub menu with top of list item */
}

/*rechercher-----------*/

[type="search"]{
  border-radius: 0.75rem;
}

.btn {
  padding: 0.5rem;
  margin: 0.5rem;
  border-radius: 0.75rem;
}

.btn-primary {
  background-color: var(--couleur_titre);
  border-color: var(--couleur_titre);
}

/* recherche avancée */
.input-group {
  align-items: center;
}

/*----------------- */
/* bouton lire plus */
p.readmore a.btn-secondary{
  border-color: var(--couleur_titre);
  background-color: var(--couleur_titre);
  border-radius: 2.25rem;
  color: #fff;
}

/* les tag */
.btn-info {
  background-color: var(--cassiopeia-color-primary);
  border-color: var(--cassiopeia-color-primary);
  border-radius: 2.25rem;
  font-size: 0.7rem;
  line-height: 0.9;
}

/* bouton article précédent */
.page-item:first-child .page-link {
  border-color: var(--couleur_titre);
  background-color: var(--couleur_titre);
  border-radius: 2.25rem;
  color: #fff;
}

/* bouton article suivant */
.page-item:last-child .page-link{
  border-color: var(--couleur_titre);
  background-color: var(--couleur_titre);
  border-radius: 2.25rem;
  color: #fff;
}

/*------------------------------------------------------------------------------------ */
/* Gestions des titres en rouge, gras et de taille décroissante */

h1, h2, h3, h4 {
  font-weight:bold;
  color: var(--couleur_titre);
  line-height: 1.2; /*inter-ligne  */
}

h1{
  font-size: 2.5rem;
} 

h2{
  font-size: 1.9rem;
  margin-top: 1.9rem;
} 

h3{
  font-size: 1.5em;
  margin-top: 1.5rem;
} 

h4{
  font-size: 1.3em;
  margin-top: 1.3rem;
} 

/* pour les liens (dont ceux des titres) */
a {
  color: var(--couleur_titre);
}



/* pour les paragraphes */
p{
  font-size: 1rem; 
  line-height: 1.5; /*inter-ligne */
}

/* décallage pour les liste de puce de l'article (et ne pas impacter le menu) */
div[itemprop="articleBody"] li {
   margin-left: 5rem;
  
}

/* met en italique et décallage les citations */
blockquote{
  font-style:italic;
  font-weight: normal;
  margin-left: 5rem;
  padding-left: 1rem;
  border-left: 0.5rem solid #e0e0e5;
}

/* -----------------------------------------------------------
pour faire les signature des articles, en gras avec le logo */
p.signature_article{
    font-weight:bold;
  	margin-top: 2rem;
}
p.signature_article:before{
  content: url(/images/habillage_site/Drapeaux_signature.gif);
}


/* --------------------------------------------------------------
--------------- Colonne de gauche--------------------------------*/

/* pour faire un encadré sur les éléments de la colonne de droite dans v3
.colonnedroite{
  border: solid;
  border-color:#dddddd;
  background-color:white;
  border-radius: 15px;
  padding: 0 0.1em 0.7em 0.1em; 
} */

/*pour faire un encadré sur les éléments de la colonne de droite dans v4 
réécriture sur le code du template de base*/
div.sidebar-right {
  border: solid;
  border-color:#dddddd;
  background-color:white;
  border-radius: 15px;
  padding: 0 0.1em 0.7em 0.1em; 
}

/* titre */
h4.titrecolonnedroite{
  font-size: 1.2rem;
  color: var(--couleur_titre);
}

/*---------------------------------------------------------------------
pour les sources, notes
la classes notes existe dans l'import de spip */

.notes{
  border: solid;
  border-color:#dddddd;
  border-radius: 15px;
  padding: 0em 0em 0em 1em;
  margin-top: 2em;
}

div.notes a, div.notes p, div.notes li{
  font-size: 0.8rem;  
}


div.notes h2{
  font-size: 1.2rem;
}

/* pour la classe encart */

div.encart_fac_simile{
  border: solid;
  width: 90%;
  margin-left: 5%;
  border-width : 0.1em;
  border-color:#000000;
  padding: 1em 1em 1em 1em;
  background-color: #f3f6f4;
}

/*---------------------------------------------------------------------
pour le bulletin, flexbox */
.conteneur_bulletin {
  display:flex;
}

.conteneur_bulletin h2{
  font-size: 1.2em;
}

div.conteneur_bulletin ul ul {
  /* proposition en 2 colonne non retenue
  column-count: 2;
  column-gap: 2em;*/
}

div.conteneur_bulletin li {
  margin-left: 0em;
  line-height:1.07;
}

@media screen and (max-width:700px) {
.conteneur_bulletin {
 display:flex;
  flex-direction: column;
}
}

td li {
  margin-left: 0em;
  line-height:1.07;
}

/* pour les pages catégories, retirer le flex box et retrouver l'equivalent de j3 */
.blog-item {
  /*display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 .5em 1em;*/
  display:block;
}

.left.item-image {
  float: left;
  padding-right: 15px;
}

.ic_rounded.iccalendar {
  border: none !important;
  /*display: block;
  margin: auto;
  padding: 3px;
  border: 3px solid #ddd;
  border-radius: 10px;
  min-width: 150px; */
}

/*figure, img, figcaption */


figure.gauche {
  float: left;
  padding-right: 2rem;
  padding-top: 0.2rem;
}

figure.droite {
  float: right;
  padding-left: 2rem;
  padding-top: 0.2rem;
}

figcaption{
    text-align: center;
    font-style: italic;
}

.gauche figcaption{
  padding-right: 2rem; 
  }

.droite figcaption{
  padding-left: 2rem;
  }


/* taille des miniatures pour les images d'intro pour tag, catégorie... */
.list-group-item img {
  max-height: 220px;
  max-width: 350px;
}

.blog-item img {
  max-height: 220px;
  max-width: 350px;
}