/* 
my_xoops.css
-=== Hack GG - Ajouts	===-
*/

:root {
	--Tonalité: #005180 ; /* #0068A4; */
	--FondJaune: #FFE9AF;
	--JauneLite: #FFF1D1 ;
	--BleuClairIntense: #0999F1;
	--BleuClair: #007FD0;
	--BleuLite: #B1D0E3 ; 
	--GrisLite: #e8e8e8 ;
	--BlancCiel: #E5F5FF ;
	--btnForum: #3B7CC3;
}

.bg-primary {
	background-color: var(--Tonalité) !important; 
}

body{background-color: var(--FondJaune); }

.container {
	background-color: #EEE;
	padding-top : 0;
	margin-top : 0;
	}

/* Couleur des liens */
a {
  color: #1F8EBE; /* Bleu cerulean foncé */
}

/* Couleur des liens au survol */
a:hover, a:focus {
  color: #2FA4E7; /* Bleu cerulean */
}
	
/****************	Header Barre-Horizontale	***********************/
.container2 {
	color : white;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background-color: var(--Tonalité) ; 
	display: flex; /* Utilise Flexbox pour aligner les enfants horizontalement */
	align-items: center; /* Aligne le titre verticalement au centre de l'image */
	gap: 8px; /* Espace entre l'image et le titre, ajustez selon vos besoins */	 
	justify-content: space-between; /* Espace entre le logo, le titre et le menu de navigation */
	gap: 6px; /* Espacement entre le logo et le titre */
	padding: 0 20px 0 20px; /* Ajouter du padding pour éviter que le contenu soit collé aux bords */
}

@media (min-width: 576px) {
	.container2 {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container2 {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container2 {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.container2 {
		max-width: 1140px;
	}
}

.container2 a {
	font-size: 0.9em ; 
	color: white; /* Couleur du texte du lien */
	text-decoration: none; /* Supprime le soulignement */
	/* font-weight: bold; Rend le texte en gras */
}

.container2 a:hover {
	color: var(--BleuLite); /* Change la couleur lors du survol */
	text-decoration: underline; /* Ajoute un soulignement lors du survol */
}
/*********** fin clonage ***********/

#Site-Titre {	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;	
	font-size: 2.10em;
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); /* Ombre grise */
	vertical-align: middle; 
	text-decoration-line: underline;
	text-decoration-color: #FF0000;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;        	
}

.Site-Titre a {
	color: white ;
}

.Site-Titre a:hover {
	color: var(--BleuLite);); /* Change la couleur lors du survol */
	  text-decoration-line: none;
}






.menuH-nav-item {
	display: flex;
	flex-direction: column; /* Aligne les éléments verticalement (icône au-dessus, lien en dessous) */
	align-items: center; /* Centre les éléments horizontalement */
	justify-content: flex-end; /* Aligne le texte par le bas */
	height: 3.25em ; /* Définissez une hauteur suffisante pour l'alignement. Vous pouvez l'ajuster selon vos besoins. */
	margin: 0 1.2em; /* Espacement horizontal entre les items du menu */
}

.menuH-icon {
	margin-bottom: auto; /* Pousse l'icône vers le haut */
	width: 24px; /* Ajustez la taille de l'icône selon vos besoins */
	height: auto; /* Conserve le ratio de l'image */
}

.menuH-nav-link {
	margin-top: auto; /* Pousse le lien vers le bas */
	font-size: 0.9em; /* Ajustez la taille de la police selon vos besoins */
}


.navbar-brand.xlogo {
	display: flex;
	align-items: center;
}

.navbar-collapse {
	flex-grow: 1; /* Permet à la barre de navigation d'utiliser l'espace disponible */
	margin-left:6%;
}

.navbar-toggler {
	margin-left: auto; /* Place le bouton de basculement à l'extrémité droite */
}

.jumbotron2 {
	padding: 0.25rem 0.5rem;
	margin: 0 auto 0.2rem auto;
	border-radius: .3rem;
}

@media (min-width: 576px) {
	.jumbotron2 {
		padding: 0.5rem 0.5rem;
	}
}

.jumbotron2-fluid {
	padding-right: 0;
	padding-left: 0;
	border-radius: 0;
}

/*********** Double-Bloc entête Homepage	***********/
.homepage-header {
	/* border: 2px solid white ;  */
	margin: 0.2em 1.2em 0.5em 1.2em ;
	max-height: 34rem;
	display: flex; 
	flex-direction: row; /* Disposition des colonnes côte à côte */
	border-radius: 0.5em;
}

.colonne {
	flex: 1; /* Chaque colonne prend la moitié de l'espace disponible */
	padding: 1.5rem ; /* Ajout d'un espacement interne pour un meilleur visuel */
	box-sizing: border-box; /* Pour inclure le padding dans la largeur totale */
}

.colonne-gauche {
	background-color: #eee; /* Couleur de fond pour la colonne gauche */
	border-right: 1px solid #bbb; 
}

.colonne-droite {
	background-color: #eee; /* Couleur de fond pour la colonne droite */
}

/*********** titres & texte | bloc-gauche ***********/
.titre-header {
	font-size: 1.9em !important; 
	font-weight: 500;
	text-align: center; 
	margin: 0px auto 10px auto;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); /* Ombre grise */
	color : var(--Tonalité) ;
}

.titre-header a{
	color : var(--Tonalité) ;
}

.titre-header a:hover{
	color : var(--BleuClair) ;
}

.text-header{ font-size: 1.1em;text-align: justify;}

/*********** Menu graphique Cat bloc-droite ***********/
.Menu-Header {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* Divise le conteneur en trois colonnes égales */
	gap: 0.6em; /* Espace entre les éléments */
	padding: 0.9em; /* Espacement interne */
	box-sizing: border-box;
	text-align: center; /* Centrer le texte dans les colonnes */
}

.mheader {
	grid-column: span 3; /* Étend l'en-tête sur les trois colonnes */
	text-align: center;
}

.mcategorie {
	vertical-align: top;
	font-size: 1.15em; /* Taille du texte des catégories */
}

.mcategorie a {
	display: inline-block;
	text-align: center;
	transition: transform 0.3s ease;
}

.mcategorie img {
	transition: transform 0.3s ease, filter 0.3s ease; /* Transition douce pour l'effet sur l'image */
}

.mcategorie img:hover {
	transform: scale(1.1); /* Agrandit légèrement l'image au survol */
	filter: brightness(1.2); /* Augmente la luminosité de l'image pour la faire ressortir */
	cursor: pointer; /* Change le curseur en pointeur pour indiquer qu'il s'agit d'un lien */
}

.mfooter {
	grid-column: span 3; /* Étend le pied de page sur les trois colonnes */
	height: 6.2em;
	vertical-align: middle;
	text-align: center;
	padding: 0 1.0em 0.5em 1.0em ;
}

.dropdown-menu{
	position:absolute;
	top:100%;
	left:0;
	z-index:1000;
	display:none;
	float:left;
	min-width:10rem;
	padding:.5rem 0;
	margin:.125rem 0 0;
	font-size:1rem;
	color:white;
	text-align:left;
	list-style:none;
	background-color: var(--BleuClair);
	background-clip:padding-box;
	border:1px solid rgba(0,0,0,.15);
	border-radius:.25rem;

    opacity: 0; /* Invisible par défaut */
    transition: opacity 0.15s ease-in-out; /* Transition pour plus de fluidité */
}

.dropdown-menu.show {
    display: block; /* Affiché lorsqu'il est déroulé */
    opacity: 1; /* Complètement visible */
}


.dropdown-item {
	display: block;
	width: 100%;
	padding: 0.25rem 1.5rem;
	clear: both;
	/*font-weight: 400; */
	color: #212529;
	text-align: inherit;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
}

.dropdown-item:focus, .dropdown-item:hover {
	color: white;
	text-decoration: none;
	background-color: #2fa4e7;
}

.dropdown-item.active, .dropdown-item:active {
	color: white;
	text-decoration: none;
	background-color: #2fa4e7;
}

.dropdown-item.disabled, .dropdown-item:disabled {
	color: #adb5bd;
	pointer-events: none;
	background-color: transparent;
}

.dropdown-toggle {
	white-space: nowrap;
}

.dropdown-toggle::after {
	display: inline-block;
	margin-left: .255em;
	vertical-align: .255em;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-bottom: 0;
	border-left: .3em solid transparent;
}

.dropdown-toggle:empty::after {
	margin-left: 0;
}

.nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#495057;background-color:white;border-color:#dee2e6 #dee2e6 #fff}


/*********** Content *********************/
.Bloc-Central .Header {
	background-color: var(--Tonalité);
	font-size: 1.4em; 
	font-weight: bold;
	text-align : center;
	color: white;
	padding: 10px;
	margin: 0; 
	border-radius: 5px; /* Coins arrondis */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre pour un effet de relief */
}


/*********** Gestion Blocs G. *********************/
.freewares-bloc-gauche{
	padding: 0.8em;
}

.item-info-sup{
	font-size:0.7em;
	color: #999; 
}

.nav-item {
	font-size: 1.08em; 
	line-height: 1.4em;	
}

.nav-link {
	font-size: 1.08em;
	line-height: 1.0em;		
	/* color: #333;	*/
}

.effet-icon {
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition pour effet doux */
	margin-bottom: auto; /* Pousse l'icône vers le haut */
	height: auto; /* Conserve le ratio de l'image */
}

.effet-icon:hover {
	transform: scale(1.2); /* Agrandit légèrement l'icône au survol */
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6); /* Ajoute une ombre */
	cursor: pointer; /* Change le curseur en pointeur pour indiquer qu'il s'agit d'un lien */
}

/***** Menu Graphique du module Logiciel-Gratuit *****/

 .ModCat-grid {
	display: grid;
	width : 85% ;
	grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
	gap: 0.9em; /* Espacement entre les éléments */
	padding : 3.4em; /* Espacement interne pour l'ensemble de la grille */
	background-color: var(--GrisLite);
	border-top: 1px solid #ffffff; /* Bord blanc fin sur le haut */
	border-left: 1px solid #ffffff; /* Bord blanc fin sur la gauche */
	box-shadow: 0.25em 0.25em 0.625em rgba(0, 0, 0, 0.4);
	margin: 1.0rem auto 3.0rem auto ;
}

 .ModCat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	/* border: 1px solid var(--BleuLite);	/* Optionnel : Ajouter une bordure pour délimiter chaque élément */
	padding: 0.6em; /* Espacement interne pour chaque élément */
	background-color: transparent;
}

 .ModCat-content {
	margin-top: 0.7em; /* Espacement entre l'image et le texte */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size : 1.1em ;
	/* font-weight: bold; */
}

.IconCat img {
	transition: transform 0.3s ease, filter 0.3s ease; /* Transition douce pour l'effet sur l'image */
}

.IconCat img:hover {
	transform: scale(1.1); /* Agrandit légèrement l'image au survol */
	filter: brightness(1.2); /* Augmente la luminosité de l'image pour la faire ressortir */
	cursor: pointer; /* Change le curseur en pointeur pour indiquer qu'il s'agit d'un lien */
}

.reserved-pub {
	grid-column: 2 / 4; /* Fait en sorte que l'élément occupe les deux dernières colonnes de la grille, se plaçant ainsi à droite de la première colonne (fusionne les deux dernières cellules). */
	text-align: center;
	background-color: transparent; /* Optionnel : ajouter un fond pour mettre en évidence la section publicitaire */
	padding: 0.5em;
	/* border: 1px solid var(--BleuLite); /* Optionnel : ajouter une bordure différente pour la section publicitaire */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; /* Centre le contenu verticalement */
}

.pub-content {
	display: flex;
	align-items: center; /* Aligne l'image et le bloc Adsense verticalement au centre */
	padding-top: 0.5em;
	justify-content: center;
	gap: 3.0em; /* Espacement entre l'icône et le bloc publicitaire */
	max-height: 3.0em; /* Hauteur maximale pour limiter l'espace utilisé */
}

.adsense-block {
	display: inline-block;
}

.smallInfo{
	color: #999;
	font-size: 0.8em;
	font-style: italic;
}


/************** Le Catalogue ************/

.category-section {
	width: 97%;
	margin: 0 auto;
	padding: 1em;
}

.category-path {
	text-align: left;
	font-weight: bold;
	margin-bottom: 1em;
}

.subcategories-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: space-between;
}

.subcategory-item {
	flex: 1 1 calc(25% - 1em); /* 4 colonnes */
	box-sizing: border-box;
	font-size: 1.1em;
	font-weight: bold;
}

.infercategories {
	font-size: 0.9em;
	color: #666;
	font-weight: normal;
}

.clear-row {
	flex-basis: 100%;
	height: 0;
}

.sorting-options {
	margin-bottom: 1em;
	text-align: center;
}

.links-section {
	padding: 1em 0;
}

.pagination {
	text-align: center;
	margin-top: 1em;
}


/************** Fiche Freeware ************/


.ModuleTitre {
	display: flex;
	margin-top: 2.0rem ;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.4em;
	gap: 1em;
}


.itemSoft{
	text-align: center ;	
	padding : 1.5em auto 1.5em auto ;
	background-color: transparent;
}

/******** Grille Fiche ********/

.grid-container {
	margin-top: 4rem ;
	display: grid;
	gap: 0px;
	background-color: var(--GrisLite);
}

.grid-header {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
}

.grid-row {
	display: grid;
	grid-template-columns: 1fr;
}

.fiche-cell {

	border: 1px solid #ccc;
	background-color: var(--GrisLite);
}

.head {
	font-size : 1.1em ;
	text-align : left ;
	padding : 0.9em ;
}

.Titre {
	text-align : center ;
	padding : 0.8em ;
	background-color: #f9f9f9 ;	
}


.TitreBleu {
	color : var(--BleuClair);
	text-align : center ;
	padding : 0.8em ;
	background-color: transparent ;	
	display: flex; /* Active Flexbox */
	align-items: center; 
	justify-content: center; 
	gap: 10px; 
}
.
TitreBleu img {
    max-height: 75px; /* Optionnel : Limite la hauteur de l'image si nécessaire */
}

.TitreBleu h2 {
    margin: 0; /* Supprime les marges par défaut du titre */
}

#custom-Titre {	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: 500;	
	font-size: 2.2em;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Ombre grise */
	vertical-align: middle; 
}

.Desc {
	text-align : left ;
	font-size : 1.1em ;
	padding: 0 1.0em 0 1.0em ;
}

/*********** Grille Détails *******************/
.grid-details {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0px;
}

.grid-cell {
	font-size : 0.9em ;
	padding: 0 ;
	/* border: 1px solid #ccc; */
	background-color: #f9f9f9;
}

.grid-details .detail-cell {
	padding: 0.1em 0.3em 0.1em 0.8em; /* Haut, droite, bas, gauche */
	text-align: left; /* Assure que le texte est bien aligné à gauche */
	border: 1px solid #ccc; /* Garde une bordure si nécessaire */
	background-color: #f9f9f9; /* Couleur de fond optionnelle */
	vertical-align: middle; 
}

.grid-details .RS-cell {
	padding: 0.3em 0.3em 0 0.8em; /* Haut, droite, bas, gauche */
	text-align: center; /* Assure que le texte est bien aligné à gauche */
	border: 1px solid #ccc; /* Garde une bordure si nécessaire */
	background-color: #f9f9f9; /* Couleur de fond optionnelle */
	vertical-align: middle; 
}

.Pub-single {
  display: inline-block;     /* indispensable pour le centrage */
  margin: 0 auto;            /* optionnel si parent est en text-align: center */
}

/**************** Commentaires ********************/


.xoops-comment-body {
	margin-top: 2.4em;
	border: 2px solid grey;
}

.xoops-comment-template {
	border: 2px solid #ccc; 
}

div.row#bordComment{
	padding: 1.4em 0.9em 0.8em 0.9em ;	
}


.modal-content {
	color : grey ;
	border-radius: 5px;
	border: 3px solid white;
	background-color: grey ;
	padding 0.6em ;
}

.modal-body{
	background-color: #e8e8e8;
	font-weight: bold;
}

#commentOptionModalLong {
	color : #333 ;
}

p.comment-contenu{
	background-color: transparent ;

}

.comment-option{
	text-align: center; 
	padding: 1.0em ; 
	margin: 0.58em; 
	border: 2px solid white;
}

.comment-notice{
	color : grey ;
	font-size : 0.7em ;
	font-style: italic;
}


/********** Formulaire ***************/

.form-group{
	border: 1px solid grey ;
	background-color: transparent ;
	margin: 0.6em	;
}


button.form-group .row{
	background-color: grey ;
	margin: 1.0em ;
}

.commentform,.searchform{
	@extend .custom-border-NB ;
	margin: 1.0em auto 1.0em auto ;
	padding : 1.0em ; 
	width : 66% ;
	background-color: transparent ;
	border-top: 2px solid white;
	border-left: 2px solid white; 
	border-right: 3px solid #888;
	border-bottom: 3px solid #888; 
}

.col-form-label {
	padding-top: calc(.375rem + 1px);
	padding-bottom: calc(.375rem + 1px);
	margin-bottom: 0;
	font-size: 1.1em;
	line-height: 1.5;
}

.form-control {
	display: block;
	width: 100%;
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	background-color: transparent;
	background-clip: padding-box;
	/* border: 1px solid #ced4da; */
	border-radius: .25rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus {
	color: #495057;
	background-color: white;
	border-color: #a1d6f4;
	outline: 0;
	box-shadow: 0 0 0 .2rem rgba(47, 164, 231, .25);
}

.form-control::placeholder {
	color: #868e96;
	opacity: 1;
}

.form-control:disabled, .form-control[readonly] {
	background-color: transparent;
	opacity: 1;
}

#notation{
	width: 15%;
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	background-color: white;
	
}

.styled-input { /* zone de saisie texte */
    width: 100%; /* Utilisation optimale de l'espace */
    max-width: 100%; /* Limite la largeur maximale */
    padding: 10px; /* Espacement interne pour le texte */
    font-size: 1rem; /* Taille de la police */
    border: 1px solid #ccc; /* Bordure grise douce */
    border-radius: 5px; /* Coins arrondis */
    background-color: white; /* Fond blanc */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre douce */
    outline: none; /* Supprime le contour bleu par défaut */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transition fluide */
}

.styled-input:focus {
    border-color: #007bff; /* Bordure bleue au focus */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Ombre bleue au focus */
}

.styled-input:hover {
    border-color: #0056b3; /* Bordure bleue foncée au survol */
}



/***************** Boutons ********************/

.btn {
	display: inline-block;
	font-weight: 400;
	color: #495057;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0.25rem;
	text-transform: none; /* Désactive la transformation en majuscule */	
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 
	border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:hover {
	color: #495057;
	text-decoration: none;
}

.btn:focus,
.btn.focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(47, 164, 231, 0.25);
}

.btn.disabled,
.btn:disabled {
	opacity: 0.65;
}

.btn:not(:disabled):not(.disabled) {
	cursor: pointer;
}

a.btn.disabled,
fieldset:disabled a.btn {
	pointer-events: none;
}

.btn-smaller {
	padding: 0.25rem 0.5rem; /* Ajuste la hauteur en réduisant le padding */
	font-size: 0.875em;	 /* Diminue légèrement la taille de la police */
	line-height: 1.2;		/* Ajuste la hauteur du contenu */
	border-radius: 0.2rem;	 /* Optionnel : Ajuste la bordure arrondie */
}

.btn-primary {
	color: white;
	background-color: #2fa4e7;
	border-color: #2fa4e7;
}

.btn-primary:hover {
	color: white;
	background-color: #1992d7;
	border-color: #178acc;
}

.btn-primary.focus,
.btn-primary:focus {
	color: white;
	background-color: #1992d7;
	border-color: #178acc;
	box-shadow: 0 0 0 0.2rem rgba(78, 178, 235, 0.5);
}

.btn-primary.disabled,
.btn-primary:disabled {
	color: white;
	background-color: #2fa4e7;
	border-color: #2fa4e7;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
	color: white;
	background-color: #178acc;
	border-color: #1682c0;
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(78, 178, 235, 0.5);
}

.btn-secondary {
	color: #777 ;
	font-size : 1.1em ;
	font-weight: bold;
	background-color: transparent  ;
	border-color: black ;
	margin : 0.5em;
	/* padding-bottom : 0.5em ; */
	max-height : 2.4em ;
}

.btn-secondary:hover {
	color: black ;
	background-color: #f8f8f8 ;
	border-color: black ;
}

.btn-secondary.focus,
.btn-secondary:focus {
	color: white ;
	background-color: grey ;
	border-color: black;
	box-shadow: 0 0 0 0.2rem rgba(203, 206, 209, 0.5);
}


#blue-small {
	padding: .25rem .5rem;
	font-size: .90rem;
	font-weight: bold;
	line-height: 1.2;
	border-radius: .2rem;
  	background-color: blue ;
}


/******************** xmNews **********************/

/* carte ADS à hauteur homogène */
.xmnews-ad-card{
  height: 410px !important;
  min-height: 410px !important;
  max-height: 410px !important;
  overflow: hidden;
}

.xmnews-ad-card .card-body{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xmnews-ad-card ins.adsbygoogle{
  width:100% !important;
  max-width:100% !important;   /* empêche les "fluid" / calculs larges */
}
/********************  fin  ********************/

.Block-Central Header,
.card-header {
	background-color: var(--BleuClair) ;
}

.card-header{ 
	font-size: 1.2em ;
	font-weight: bold;
}

.card-header h5{ /*** utilisé dans Search page ***/
	color : white ; 
	font-weight: bold;
}

.card-header .x-small a {
	color: var(--BleuLite) ;
}

.Entete-News{ /* Ligne horizontale */
	  border-top: 2px solid  var(--BleuClair);
	  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
}

h3.Titre-Actu{ /* home Actualités & Search */
	color: white ;
	font-size: 1.2em ;
	font-weight: bold;
}

.header-News {
	color: var(--BleuClair) ;
	font-size: 2.4em !important; 
	font-weight: 500;
	margin: 0;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); /* Ombre grise */
}

.breadcrumb-header {
    text-align: center; 
    margin: 2rem auto; 
    padding-right: 4.0em ;
}

.breadcrumb-wrapper {
    display: inline-flex; /* Aligne l'icône et le titre sur la même ligne */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement les éléments dans le wrapper */
}

.list-group-item-action { /* item bloc Actu gauche */
	padding-left : 0.8em !important;
	font-size: 1.1em  ;
}

.list-group-item-action:hover a{

}

.list-group-item-action:focus a{

}

card xmnews-border{
}

text-decoration-none{
}

.xoops-blocks{ /**** Bloc central Freewares ****/
	font-size : 1.8em ;
	padding : 1.0em ;
	background-color: #f9f9f9 ; 
	border: 1px solid #888;
	border-radius: 0.3em ;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); 
}

.xoops-blocks h4{
	color: var(--Tonalité) ;
	margin : 0 0 0.5em 0;
	padding: 0.2em 0.2em 0.2em 0.6em ;
	font-size : 1.4em !important ;
	text-align: left;
	text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); /* Ombre grise */
	background-color: #ddd ;
}

.Center-blocks h3{ /**** bloc central xmNews ****/
	font-size : 2.2em ;
	text-align: center;
	color: var(--Tonalité) ;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Ombre grise */
	margin: 0 auto 1.0rem 0 ;
}

.Center-blocks{ 
	margin-top: 0;
	width : 99.2% ;  
}

.card-col {
    /* margin-right: 1.4rem; /* Espace entre colonnes */
   /*  margin-left: 1rem; */ /* Facultatif pour équilibrer */
}

.uniform-height {
    height: calc(16 * 2.1rem); /* Approximativement 16 lignes */
    overflow: hidden;         /* Coupe le contenu qui dépasse */
    display: flex;            /* Assure un alignement des enfants */
    flex-direction: column;   /* Aligne les éléments verticalement */
    justify-content: space-between; /* Uniformise l'espace entre les enfants */
}

div.HomeList {
	margin: 1.0em auto 1.0em auto ;
	padding: 1.5em;
	border: 1px solid #999;
	border-radius: 0.10em ;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); 
}

/****************** Top-Ten *****************/

.ad-container { /*** Adsense ***/
    width: 100%;
    text-align: center;
}

.ad-header {
    background-color: #666;
    height: 20px;
    vertical-align: bottom;
}

.ad-content {
    background-color: #ccc;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ranking { 
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

.ranking-header { /*** Classement ***/
    background-color: #f5f5f5;
    text-align: center;
    padding: 1rem;
}

.ranking-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
}

.ranking-rows {
    display: grid;
    grid-template-columns: 7% 40% 28% 8% 9% 8%;
    text-align: center;
}

.ranking-row {
    display: contents; /* Permet de garder les colonnes */
}

.ranking-head {
    background-color: #eee;
    font-weight: bold;
}

.ranking-cell {
    padding: 0.5rem;
    border-bottom: 1px solid #ccc;
}

.ranking-cell.rank {
    text-align: center;
}

.ranking-cell.title a {
    text-decoration: none;
    font-weight: bold;
}

.ranking-cell.title a:hover {
    font-weight: bold;
}

.ranking-cell.hits,
.ranking-cell.rating,
.ranking-cell.votes {
    text-align: right;
}

.even {
    background-color: #f9f9f9;
}

.odd {
    background-color: #ffffff;
}

/********************** xmDoc **************************/

.fiches-classiques {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Espacement entre les fiches */
}

.fiche-classique {
    width: 100%; /* Fiche pleine largeur */
}

.fiche-classique .card {
    margin: auto;
}

.btn-modal-custom {
    background-color: #6c757d; /* Gris Bootstrap */
    color: white;
    border: none; /* Pas de bordure */
    font-size: 0.8em; /* Réduit la taille du texte */
    padding: 5px 10px; /* Ajuste l'espacement interne */
    border-radius: 3px; /* Ajuste les coins arrondis */    
}
.btn-modal-custom:hover {
    color: white;
    background-color: #5a6268; /* Gris légèrement plus sombre au survol */
}


.Cat-Doc { 
	margin: 2.0em 6.0em 2.0em 6.0em;
	text-align : center ;
	background-color: transparent ; 
	border: 1px solid #888;
	border-radius: 0.3em ;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); 
}

.custom-cell {
    max-width: 150px; /* Limite la largeur des cellules */
    margin: 0 auto; /* Centrer les cellules */
    font-size: 0.9em
}

.Doc-nav-menu {
    text-align: center !important; /* Force le centrage */
    font-size: 1.5rem !important; /* Force la taille de la police */
    padding-bottom: 10px !important;
    padding-top: 5px !important;
}


/******************** Divers **********************/

.custom-border-NB {
	border-top: 2px solid white;
	border-left: 2px solid white;
	border-right: 3px solid #888;
	border-bottom: 3px solid #888;
}

.card-text{

}

.card-body{
	font-size: 1.18em ; 
	padding : 0.3em 0.8em 0.5em 0.5em ;
}

.custom-card {
    background-color: transparent;
    border: none !important; 
    text-align: center ;
}


.row .text-left{
	font-size: 1.0em ; 
}

.LG-center-bloc{

}

.TitrePage{ 
	margin : 1.0rem auto 1.0rem auto ;
	text-align: center;
}

.TitrePage h3{ 
	font-size : 2.2em ;
	color: var(--Tonalité) ;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Ombre grise */
}

.myalert-primary {
    background-color: #007bff !important; /* Fond bleu */
    color: #ffffff !important;           /* Texte blanc */
}

.myalert-secondary {
    background-color: #6c757d !important; /* Fond gris */
    color: #ffffff !important;            /* Texte blanc */
}

/* Assurez un bon contraste pour les liens */
.myalert-primary a, .myalert-secondary a {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Liens dans alert-secondary */
.myalert-mysecondary a {
    color: #212529 !important; /* Couleur foncée pour contraste */
    text-decoration: underline;
}

/* Optionnel : Survol des liens */
.myalert-myprimary a:hover,
.myalert-mysecondary a:hover {
    color: #000000 !important; /* Assombrissement au survol */
    text-decoration: none;
}

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

#xswatch-toolbar .nav-link {
    color: #212529 !important; /* Couleur noire ou gris très foncé */
}


/********** Effets spéciaux *************/

.sparkling-title {
  display: inline-block; /* pour maîtriser l'alignement */
  position: relative;    /* si besoin de positionner la spark plus finement */
}

.sparkle {
  display: inline-block;
  animation: sparkle 2s infinite; /* lance l’animation en boucle */
}

/* Définition de l’animation */
@keyframes sparkle {
  0%   { opacity: 0; transform: scale(0.5) rotate(0deg); }
  5%   { opacity: 1; transform: scale(1)   rotate(20deg); }
  10%  { opacity: 0; transform: scale(0.5) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
}

/* Effey Glow  */
.glow-text {
  color: #fff;
  display: inline-block;
  padding: 0.2em 0.5em;
  animation: glow 5s infinite;
}

@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 0px #fff;
  }
  40%, 60% {
    text-shadow:
      0 0 5px   #fff,
      0 0 10px  #ff0,
      0 0 20px  #ff0;
  }
}

/* Barre Lumineuse */

.shining-text {
  position: relative;         /* Nécessaire pour positionner le pseudo-élément */
  display: inline-block;      /* Pour que l'effet se cale sur la taille du texte */
  color: #fff;                /* Couleur du texte */
  padding: 0.2em 0.3em;       /* Pour avoir un peu d'espace autour du texte */
  overflow: hidden;           /* Éviter que l'effet ne déborde du conteneur */
}

/* Le pseudo-élément qui servira de "barre lumineuse" */
.shining-text::after {
  content: "";
  position: absolute;
  top: 0; 
  left: -50%;                  /* Point de départ hors de l'élément */
  width: 50%;                  /* Largeur de la barre (ajustez selon vos besoins) */
  height: 100%;               /* Hauteur = la hauteur du conteneur */
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 30%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: skewX(-20deg);   /* Légère inclinaison pour un effet diagonal */
  animation: shining 3s infinite; /* Lance l’animation en boucle (3s) */
}

/* Animation : la barre traverse le texte de la gauche vers la droite */
@keyframes shining {
  0% {
    left: -50%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

/* Effet Shimmer*/

.shimmer-text {
  font-size: 3rem;
  background: linear-gradient(
    to right,
    #ff0 20%,
    #fff 40%,
    #ff0 60%,
    #fff 80%
  );
  background-size: 200% auto;     /* Permet d’avoir un grand "ruban" de gradient */
  color: transparent;             /* On va afficher le gradient à la place de la couleur */
  -webkit-background-clip: text;  /* Pour Chrome/Safari (clip le background au niveau du texte) */
  background-clip: text;          /* Standard (souvent préfixé) */
  animation: shimmer 10s linear infinite;
}

/* Animation de déplacement du gradient */
@keyframes shimmer {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: -200% center;
  }
}

/*  Modif Classe Youtube dans sanitizer  */
.youtube-responsive {
    max-width: 400px;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.youtube-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.youtube-responsive br {
    display: none;
}

.youtube-responsive-4x3 {
    max-width: 400px;
    position: relative;
    padding-bottom: 75%; /* Ratio 4:3 */
    height: 0;
    overflow: hidden;
}

.youtube-responsive-4x3 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.embed-responsive-16by9 {
    padding-bottom: 56.25%; /* Ratio 16:9 */
}

.embed-responsive-4by3 {
    padding-bottom: 75%; /* Ratio 4:3 */
}

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    overflow: hidden;
}

.embed-responsive-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/******************** FIN **********************/