/***************************************************************************************************************************************************************/
/* Attention : Les selecteurs uniques (id) sont composés à partir des paramètres nom du shortcode jr_galerie ex: nom=toto => id = toto */

/*
Dans les grilles normales les variables suivantes sont autorisées
image image_supp_1 image_supp_2 image_supp_3 vues commentaires editer supprimer titre qualite legende auteur date bouton_lien difficulte jaime espace_vert_3 espace_hori_3 trait_vert_3 trait_hori_3 sortir nouveaute
*/
/***************************************************************************************************************************************************************/

/* Les grilles ci-dessous sont à personnaliser avec des noms uniques */
/************* JR_GALERIE ESPACE PUBLIC ***************/

@media (min-width: 450px) {#news_public .carte .jr_articles{grid-template-columns: repeat(1, 1fr);}}
@media (min-width: 750px){#news_public .carte .jr_articles{grid-template-columns: repeat(2, 1fr); }}
@media (min-width: 1024px){#news_public .carte .jr_articles{grid-template-columns: repeat(2, 1fr); }}
@media (min-width: 1280px){#news_public .carte .jr_articles{grid-template-columns: repeat(3, 1fr); }}
@media (min-width: 1800px){#news_public .carte .jr_articles{grid-template-columns: repeat(3, 1fr); }}
#news_public .carte .jr_articles .galerie_item {grid-template-columns: 1fr;  grid-template-areas: 
"image" 
"titre"
"legende"
;}
#nos_dernieres_photos .mur.carte .jr_articles .galerie_item{grid-template-areas: "image";}

#nos_expos .banniere.ban_gauche .jr_articles .galerie_item { grid-template-columns: 100px auto 5px; grid-template-areas: 
"image		  nouveaute		."
"image		  titre			."
"image		  trait_hori_3	."
"image		  legende		."
"image		  bouton		."
"image		  .				."
;}
#nos_expos_photos .carte .jr_articles .galerie_item {grid-template-columns: auto auto auto;  grid-template-areas: 
".	image	." 
".	titre	." 
;}

/* Gestion du mode d'affichage : #adherents mur carte */
@media (min-width: 450px) {#adherents .mur.carte .jr_articles{columns: 4;}}
@media (min-width: 750px){#adherents .mur.carte .jr_articles{columns: 6; }}
@media (min-width: 1024px){#adherents .mur.carte .jr_articles{columns: 8; }}
@media (min-width: 1280px){#adherents .mur.carte .jr_articles{columns: 10; }}
@media (min-width: 1800px){#adherents .mur.carte .jr_articles{columns: 12; }}
/* Fin Gestion du mode d'affichage : #adherents mur carte */

/* Gestion du mode d'affichage : #adherents carte */
@media (min-width: 450px) {#adherents .carte .jr_articles{grid-template-columns: repeat(4, 1fr);}}
@media (min-width: 750px){#adherents .carte .jr_articles{grid-template-columns: repeat(6, 1fr); }}
@media (min-width: 1024px){#adherents .carte .jr_articles{grid-template-columns: repeat(8, 1fr); }}
@media (min-width: 1280px){#adherents .carte .jr_articles{grid-template-columns: repeat(10, 1fr); }}
@media (min-width: 1800px){#adherents .carte .jr_articles{grid-template-columns: repeat(12, 1fr); }}
#adherents .carte .jr_articles .galerie_item { grid-gap: 0px; grid-template-areas:
        "image"
        "auteur";
}
#adherents{cursor:pointer;}
#adherents .carte .jr_articles .galerie_item .auteur { margin-left: 5px; margin-right: 5px; overflow: hidden;}
#adherents .carte .jr_articles .galerie_item .auteur h4 {margin-bottom: 0;}
/* Gestion du mode d'affichage : #adherents carte */

/* Gestion du mode d'affichage : #adherents mur carte_centree */
@media (min-width: 450px) {#adherents .mur.carte_centree .jr_articles{columns: 4;}}
@media (min-width: 750px){#adherents .mur.carte_centree .jr_articles{columns: 6; }}
@media (min-width: 1024px){#adherents .mur.carte_centree .jr_articles{columns: 8; }}
@media (min-width: 1280px){#adherents .carte_centree .jr_articles.mur{columns: 10; }}
@media (min-width: 1800px){#adherents .mur.carte_centree .jr_articles{columns: 12; }}
/* Fin Gestion du mode d'affichage : #adherents mur carte_centree */

/* Gestion du mode d'affichage : #adherents carte_centree */
#adherents .carte_centree .jr_articles .galerie_item img {width: 130px; height: 130px;}
@media (min-width: 450px) {#adherents .carte_centree .jr_articles{grid-template-columns: repeat(4, 1fr);}}
@media (min-width: 750px){#adherents .carte_centree .jr_articles{grid-template-columns: repeat(6, 1fr); }}
@media (min-width: 1024px){#adherents .carte_centree .jr_articles{grid-template-columns: repeat(8, 1fr); }}
@media (min-width: 1280px){#adherents .carte_centree .jr_articles{grid-template-columns: repeat(10, 1fr); }}
@media (min-width: 1800px){#adherents .carte_centree .jr_articles{grid-template-columns: repeat(12, 1fr); }}
/* Fin Gestion du mode d'affichage : #adherents carte_centree */
#adherents_photos .carte .jr_articles .galerie_item {grid-template-columns: auto;  grid-template-areas: "image";}



/************* FIN JR_GALERIE ESPACE PUBLIC ***************/

/************* JR_GALERIE ESPACE ADHERENTS ***************/
@media (min-width: 450px) {#news_adherents .carte .jr_articles{grid-template-columns: repeat(1, 1fr);}}
@media (min-width: 750px){#news_adherents .carte .jr_articles{grid-template-columns: repeat(2, 1fr); }}
@media (min-width: 1024px){#news_adherents .carte .jr_articles{grid-template-columns: repeat(3, 1fr); }}
@media (min-width: 1280px){#news_adherents .carte .jr_articles{grid-template-columns: repeat(4, 1fr); }}
@media (min-width: 1800px){#news_adherents .carte .jr_articles{grid-template-columns: repeat(4, 1fr); }}
#news_adherents .carte .jr_articles .galerie_item {grid-template-columns: 1fr;  grid-template-areas: 
"image" 
"titre"
"legende"
;}
#rubriques .banniere.ban_gauche .jr_articles .galerie_item { grid-template-columns: 100px auto 5px; grid-template-areas: 
"image		  nouveaute		."
"image		  titre			."
"image		  trait_hori_3	."
"image		  legende		."
"image		  bouton		."
"image		  .				."
;}

#forum .carte .jr_articles .galerie_item { grid-template-columns: auto auto auto auto; grid-template-areas: 
"image       image        image      image" 
".			 auteur      auteur      ."
;}

#concours_du_mois_participation .carte .jr_articles .galerie_item { grid-template-columns: auto auto auto; grid-template-areas: 
"image       image      image" 
".			 supprimer	."
".      	 titre      ."
".		     legende    ."
;}
#concours_du_mois_participation .jr_articles_colonne.justifie.incrustation .jr_articles .grille{grid-template-areas:"supprimer";}

#concours_du_mois_vote .carte .jr_articles .galerie_item { grid-template-columns: auto auto auto; grid-template-areas:"image""etoiles";}
#concours_du_mois_vote .mur.carte .jr_articles .galerie_item { grid-template-columns: auto auto auto; grid-template-areas:"image" ;}
#concours_du_mois_vote .jr_articles_colonne.incrustation .jr_articles .grille{align-items: center; grid-template-areas: "etoiles";}

#concours_du_mois_resultats .carte .jr_articles .galerie_item { grid-template-columns: auto auto auto; grid-template-areas: 
"image  image   image" 
".		titre		."
".		espace_hori_3	."
".		points_texte    ."
".		auteur      ."
;}

#ateliers .banniere.ban_gauche .jr_articles .galerie_item { grid-template-columns: 100px auto 5px; grid-template-areas: 
"image		  nouveaute		."
"image		  titre			."
"image		  trait_hori_3	."
"image		  legende		."
"image		  bouton		."
"image		  .				."
;}

#atelier_studio .banniere.ban_gauche .jr_articles .galerie_item { grid-template-columns: 100px auto 5px; grid-template-areas: 
"image		  nouveaute		."
"image		  titre			."
"image		  trait_hori_3	."
"image		  legende		."
"image		  bouton		."
"image		  .				."
;}
#atelier_studio_photos .jr_articles .galerie_item { grid-template-areas: "image vues commentaires titre legende auteur date";}

#atelier_mini_studio .banniere.ban_gauche .jr_articles .galerie_item { grid-template-columns: 100px auto 5px; grid-template-areas: 
"image		  nouveaute		."
"image		  titre			."
"image		  trait_hori_3	."
"image		  legende		."
"image		  bouton		."
"image		  .				."
;}
#atelier_mini_studio_photos .jr_articles .galerie_item { grid-template-areas: "image vues commentaires titre legende auteur date";}
#atelier_technique .banniere.ban_gauche .jr_articles .galerie_item { grid-template-columns: 100px auto 5px; grid-template-areas: 
"image		  nouveaute		."
"image		  titre			."
"image		  trait_hori_3	."
"image		  legende		."
"image		  bouton		."
"image		  .				."
;}
#atelier_technique_photos .jr_articles .galerie_item { grid-template-areas: "image vues commentaires titre legende auteur date";}

#sorties .banniere.ban_gauche .jr_articles .galerie_item { grid-template-columns: 100px auto 5px; grid-template-areas: 
"image		  nouveaute		."
"image		  titre			."
"image		  trait_hori_3	."
"image		  legende		."
"image		  bouton		."
"image		  .				."
;}
#sorties_photos .jr_articles .galerie_item { grid-template-areas: "image vues commentaires titre legende auteur date";}

#anciens_concours_du_mois .carte .jr_articles .galerie_item { grid-template-columns: auto auto auto; grid-template-areas: 
"image  image   image" 
".		titre		."
".		espace_hori_3	."
".		points_texte    ."
".		auteur      ."
;}

#photos_fpf .carte .jr_articles .galerie_item { grid-template-columns: auto auto auto auto; grid-template-areas: 
"image       image        image      image" 
".			 auteur      auteur      ."
;}

#telechargement .carte .jr_articles .galerie_item { grid-template-columns: auto auto auto auto auto auto auto; grid-template-areas: 
"image		image		image		image			image		image		image" 
".			.			vues        commentaires 	.		    supprimer	."
".			titre       titre       titre       	titre       titre		."
".			auteur      auteur      auteur      	date        date		.";}

/* Necessaire pour lire la grille area avant que le premier galerie_item soit créé */
/*#telechargement_photos .jr_articles.incrustation, #telechargement_photos .jr_articles.incrustation .grille*/
#telechargement_photos .jr_articles_colonne.incrustation .jr_articles .grille{
	grid-template-columns: 75px auto 70px;
    grid-template-rows: 20px 20px 20px;
    grid-template-areas:
        "date date date"
        "editer . supprimer"
        "vues . commentaires";
}

/************* FIN JR_GALERIE ESPACE ADHERENTS ***************/

/************* JR_GALERIE NOTIFICATIONS ***************/
.jr_notifications p{margin : 5px;}
.jr_notifications h3{font-size : 20px;}
/************* FIN JR_GALERIE NOTIFICATIONS ***************/