/* jfm.css la (nouvelle mi-2024) allure de mon site principal */

/* header  : contient la navbar, barre de navigation en haut
   centre  : contient "section main" ou "div maxlargeur" ou  "div bloctitre"
   footer  : bas de page
*/

/* toutes les valeurs sont pour des écrans larges. après on trouve les paramètres lors de la réduction */

@font-face { font-family: 'OpenSans-Regular';  		src: url(jfm/com/OpenSans-Regular.ttf) 	 format('truetype'); }
@font-face { font-family: 'OpenSans-Bold';  		src: url(jfm/com/OpenSans-Bold.ttf) 	 format('truetype'); }
@font-face { font-family: 'Montserrat-thin';  		src: url(jfm/com/Montserrat-thin.ttf)    format('truetype'); }
@font-face { font-family: 'Montserrat-Regular';  	src: url(jfm/com/Montserrat-Regular.ttf) format('truetype'); }
@font-face { font-family: 'Space';  				src: url(jfm/com/tt1254m.ttf)          	 format('truetype'); }

:root { --monfonce: #1C130B; --monclair: #573F3F;}

body { margin: 0px; padding: 0px; background: repeat url(jfm/com/back_body.jpg); } /* background: var(--monclair); */

.main		{ max-width: 500px; margin: auto; background: repeat url(jfm/com/back_main.jpg); } /* le texte principal au centre, de largeur limitée */
.maxlargeur { display: flex; flex-flow: row wrap; justify-content: space-around; align-items: flex-start; background: repeat url(jfm/com/back_maxlargeur.jpg); }
.flexrow 	{ display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }

/* les séparateurs en montserrat, toujours de largeur max */
.blocTitre { font-family: 'Montserrat-thin', sans-serif; font-size: 1.5em; color: #2c3e50; background: white;);
			 display: flex; align-items: center; text-align: center; width: 100%; padding: 10px 0 10px 0;}
.blocTitre span {padding: 0 10px; }		 
.blocTitre::before, .blocTitre::after { content: ""; height: 1px; background: #7b8792; flex: 1; }

/* le wrapper peut avoir aside droite et gauche, et gérer un article central de 500px */
.wrapper      { display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: flex-start; }
.aside-gauche { order: 1;  }
.main		  { order: 2; width: 500px; flex: 0 0 500px;} /* ce sera la section principale, avec une largeur fixe à 500px, réductible avec petit écran */
.aside-droite { order: 3;  }

.makelarge	      { opacity: 0;}
.makelarge::after { content: "abcdefghijklmnopqrstuvwxyzabcdefgh"; }

/* ********************************* aside-gauche : le sommaire local ********************* */
.aside-gauche 			{ opacity: 0; background: black;  position: sticky; top: 50px; 
						  font-family: 'Montserrat-Regular'; font-size: 14px;
						  max-width: 320px; min-width: 200px; 
				          margin: 0 10px 0 0; padding: 0 10px 0 10px; transition: all 0.5s ease; }
.aside-gauche div 		  { font-size: 20px; margin: 0 0 10px 0; color: white;}
.aside-gauche.compact div { font-size: 15px; margin: 0 0  0   3px; }
.aside-gauche.current   { opacity: 1; transition: all 0.5s ease; }
.aside-gauche a  		{ color: white; text-decoration: none; color: white; }
.aside-gauche a.current { color: var(--monrouge); font-weight: bold; }
.aside-gauche ul 	    { list-style: none; border-left: 1px solid #fff; padding: 0; margin: 0; }
.aside-gauche ul li     { margin: -0px 0px 5px 20px; position: static;}
.aside-gauche ul li::before { content: '\2B24'; color: white; position: absolute; left: 0px; width: 21px; text-align: center; }
.aside-gauche .pages a   { color: yellow; }
.aside-gauche.compact a   { font-size: 12px; }

/* plus assez de place en largeur pour tout mettre : les liens vers d'autres articles descendent après l'article principal */
/* limite à 250 + 10 + 500 + 10 + 250 = 1020 */
@media screen and (max-width: 1000px) {
  .wrapper      			{ flex-flow: row wrap; justify-content: center; }
  .aside-gauche 			{ left: 0px; flex: 1 1 150px;}
  .aside-droite 			{ max-width: 700px; margin: 50px 0 0 0; padding: 0 ;}
  .aside-droite .blocAA 	{ opacity: 1; }
  .blocAccueil 				{ margin: 0; }
  .blocAccueil .bloctxt 	{ padding: 10px 0 0 0; }
  .blocAccueil .catdat  	{ padding: 5px; }
  .blocAccueil .bloccom 	{ padding: 0 0 5px 5px; }
  .blocArticle 			 	{ max-width: 900px; padding: 0; } 
  .blocArticle .toclick 	{ display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding: 0; margin: 0;} 
  .blocArticle .blocim1  	{ display: block; width: 280px; }
  .blocArticle .blocim2  	{ display: none; }
  .blocArticle .bloctxt  	{ max-width: 320px; margin: 0 0 0 10px; } 
}
/* l'écran est vraiment petit en largeur, il ne reste que la section principale */
/* limite à 250 + 10 + 500 = 760 */
@media screen and (max-width: 760px) {
  .main 					{ flex: 0 1 510px; width: 0; }
  .aside-gauche 			{ display: none; }
}
/* moins de 500 px : on réduit les blocs articles à 320px de large */
@media screen and (max-width: 520px) {
  .blocArticle .toclick { flex-flow: column;}
  .blocArticle .blocim1 { display: none; }
  .blocArticle .blocim2 { display: block; width: 320px; }
  .blocArticle .bloctxt { display: block; width: 320px; padding: 0; margin: 0; }
  .blocArLarge .toclick { margin: auto; }
  .blocArLarge .blocim1 { display: none; }
  .blocArLarge .blocim2 { display: block; width: 320px; }
  .blocArLarge .bloctxt { display: block; width: 320px; padding: 0; margin: 0; }
  .blocAr320px .bloccom { height: auto; }
  .blocAr320px .blocim2 { height: auto; }
  .blocAr320px .bloctit { display: inline; }
}

/* ********************************* section principale centrale  ***************************** */
section { font-family: OpenSans-Regular, Arial, Helvetica, sans-serif; }

section P, section LI, section UL, section OL, 
section H1, section H2, section H3, section H4, section H5 	{ margin-left: 3px; margin-right: 3px; } 	/* marges gauche et droite */
section P, section LI, section UL, section OL 				{ text-align: justify; }					/* alignement */
section H1  { font-family: OpenSans-Bold; }																/* polices */
section H1 	{font-size:28px; }																			/* taille des polices */
section H2 	{font-size:24px; }
section H3 	{font-size:18px; }
section H4 	{font-size:16px; }
section P, 
section LI	{font-size:13px; line-height: 1.1em;}
.smiley		{font-size: 24px;}

section P,  section UL, section OL, 
section H1, section H2, section H3, section H4, section H5	{ margin-top: 4px; margin-bottom: 4px; }	/* marges top bottom */
section LI 													{ margin-top: 0px; margin-bottom: 0px; }

/* pour remplacer les codes obsoletes, en particulier sur les fonts */
.strike   		{ text-decoration: line-through; }
.font_red 		{ color: red; }
.font_green 	{ color: green; }
.font_white 	{ color: white; }
.font_vert	 	{ color: #80FF80; }
.font_blue	 	{ color: blue; }
.center 		{ text-align: center; }
.justify 		{ text-align: justify; }
.compacte	li	{ font-size: 12px; }

section img { max-width: 100%; margin-right: auto; margin-left: auto; display: block; }
.groupe { display: flex; flex-flow: row wrap; }

/* pour la navigation avec les flèches  back/next */
.bn   { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin-top: 0px; }
.bnh  { margin-bottom: 20px; }
.bn_f { flex-basis:  58px; flex-shrink: 0; width: 58px; height: 40px; } /* flèches */
.bn_c {	flex-basis: 500px; /* largeur min titre au milieu */ }
.bn_back { background: url(jfm/com/tour_back.gif); margin-right: 3px; }
.bn_next { background: url(jfm/com/tour_next.gif); margin-left:  3px; }
.bn_c.subtitle { text-align: center;  margin: 0;}
.bn2  { font-family:'Montserrat-Regular',sans-serif; font-size:15px; line-height:1em; background-color:#ffccff; text-decoration: none;
		width:50%; margin:2px; display:flex; flex-flow:row nowrap; align-items:center; }
.bn2b { justify-content: flex-start; }
.bn2n { justify-content: flex-end; text-align: right;}

.separ      { font-family: OpenSans-Regular, Arial, Helvetica, sans-serif; text-align: center; }

.maintitle  { padding: 20px 0 10px 0; margin: 0; text-shadow: grey 0px 0px 20px; border-bottom: 6px solid var(--monclair); color: black;}
a div.maintitle>h1  { text-decoration: underline blue solid 1; }
.subtitle   { margin: 30px 0 10px 0; padding: 0 0 0px 0; border: 3px solid var(--monclair); border-radius: 3px; text-align: center; }
.subsection { margin: 30px 0 10px 0; padding: 0 0 5px 0; border-bottom: 3px solid var(--monclair); }
.subtitle3  { margin: 30px 0  0   0; padding: 0 0 5px 0; color: var(--monclair); }

.liens 		{ border-radius:	4px; background-color: silver; margin-top: 3px;	margin-bottom: 3px;	padding: 6px; }
.liens P  	{text-indent:0;}
.screenshot img { padding-top: 5px; }


/* les textos */
.textoL { width: 60%; padding: 8px; margin-top: 8px; margin-bottom: 8px; border-radius: 8px;	
		  color: black; font-family: "OpenSans-Regular"; font-size:14px; line-height: 1em; 
		  background-color: #50FFE0;  }
.textoR { width: 60%; padding: 8px;	margin-top: 8px; margin-bottom: 8px; border-radius:	8px;
		  color: black; font-family: "OpenSans-Regular"; font-size:14px; line-height: 1em; 
		  background-color: #50FF50; margin-left: auto; margin-right: 0;}

.intro { border-radius: 3px; background-color: silver; padding: 3px; }
.intro p,
.intro li { font-size:16px; }

/* un bloc d'info supplémentaire, qu'on peut généralement sauter */
.acote { background-color: #ffffaa;	border-radius: 3px; padding-top: 5px; padding-bottom: 5px; margin-top: 15px; margin-bottom: 15px;}
.acote p 	{font-size:12px; margin-right:5px; margin-left:50px;}
.acote li 	{font-size:12px; margin-right:5px;}
.acote > ul 				{margin-left:50px;}
.acote > ol 				{margin-left:50px;}

/* exergue avec une barre sur le coté */
.exergue { margin: 10px 0px 10px 0px; padding: 5px 5px 5px 30px; border-left: 10px solid #00137f;	background-color: #DEDEFF; }
.exergue P,
.exergue LI {font-size:13px;}
.exergue .subtitle3  { margin: 0 0 0 0; }
/* une emphase encadrée */
.enfaz { border-radius: 3px; background-color: #ffe8e8;	padding: 10px; margin-top: 20px; margin-bottom: 20px; }
.enfaz P,
.enfaz LI {font-size:13px;}
/* une citation */
.cite { border-radius: 3px;	background-color: #aaeeff;	padding: 10px 0 10px 0; margin-top: 10px; margin-bottom: 10px; }
.cite P   {font-size:12px; font-style: italic; margin-right:5px; margin-left:50px;}
.cite LI  {font-size:12px; font-style: italic; margin-right:5px; margin-left:70px;}

/* légende sous une image ou un schéma */
.legende { font-style: italic; font-size: 11px; line-height: 1em; margin-bottom:10px; text-align: center; font-family: OpenSans-Regular; line-height: 1em; margin-top: 0; margin-bottom:10px; }

/* date en haut de page */
.date { font-size: 11px; color:	grey; line-height: 1em;	margin-top: 4px; margin-bottom: 4px; }

/* pour ces saloperies de video youtube qui s'affiche mal en changeant la largeur de la fenêtre */
.objectyoutube        { position: relative; height: 0; padding-bottom: 56.25%; /* 16:9 */ }
.objectyoutube object { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

iframe { width: 90%; }

/****** bloc articles jeux et sciences ******/
.blocjeu  { width: 320px; font-size: 13px; }
.blocjeu .bloclic { font-family: OpenSans-Regular; text-align: center; color: black;  background-color: #bbffff;
					border: 1px solid; border-radius: 3px;	padding: 3px; margin-top: 3px; margin-bottom: 3px; }
.blocjeu a 		  { text-decoration: none; }
.blocjeu a			div.bloclic {border-color: blue;}
.blocjeu a:visited 	div.bloclic {border-color: purple;}
.blocjeu a          div.bloclic:hover { background-color: #E4FF00; }
.blocjeu .bloctit { font-family: OpenSans-Bold;  font-size: 18px; font-weight: bold; padding-top: 3px; padding-bottom: 1px;}
.blocjeu .blocres { display: flex; height: 26px; font-size: 12px; font-weight: bold; line-height: 1em; }
.blocjeu .blocres .bloceto { width: 140px; }
.blocjeu .blocres .blocdat { width:  44px; }
.blocjeu .blocres .blocgen { width:  80px; }
.blocjeu .blocres .blocmac img { height: 24px; padding-left: 5px; padding-right: 5px; }
.blocjeu .blocima { padding-top: 5px; }
.blocjeu .blocima img { max-width: 100%; height: 170px; }
.blocjeu .bloccom { position: relative; font-size: 13px;  text-align: justify; line-height: 1.2em; height: 47px; overflow: hidden;} /* ça laisse 3 lignes de texte */
.bloccos { position: relative; font-size: 13px;  text-align: justify; line-height: 1.2em;}                                 /* pour la science, texte en entier */
.jeux { background-color: #aeffa8; }

.gradient {	width: 150px; height: 15px; /* la hauteur d'une ligne de texte! */
			background-color: transparent;
			background-image: linear-gradient(to right, rgba(187, 255, 255, 0.1), rgba(187, 255, 255, 0.8), rgba(187, 255, 255, 1));
			position: absolute;	bottom: -2px; right: -5px; }
			
/****** introduction aux sites / large ******/
.blocsit  { width: 320px; }
.blocsit .bloclic { font-family: OpenSans-Regular; text-align: center; color: black;  background-color: #D0D7E5; border: 6px double; padding: 4px; margin: 8px; }
.blocsit a 		  { text-decoration: none; }
.blocsit a			div.bloclic {border-color: blue;}
.blocsit a:visited 	div.bloclic {border-color: purple;}
.blocsit a          div.bloclic:hover { background-color: #E4FF00; }
.blocsit .bloctit { font-family: Space;  font-size: 30px; font-weight: bold; line-height: 0.8em; padding-top: 1px; padding-bottom: 10px;}
.blocsit .blocima img { max-width: 100%; }
.blocsit .bloccom { position: relative; font-size: 13px; line-height: 1.2em;} /* ça laisse 3 lignes de texte */

/****** shortcuts aux sites ******/
.bc  			{ width: 244px; }
.bc .bclic 		{ background-color: #D0D7E5; padding: 5px; margin: 4px 2px; display: flex; flex-flow: row; justify-content: flex-start; }
.bc a 		  	{ text-decoration: none; }
.bc a div.bclic:hover { background-color: #E4FF00; }
.bc .bcimg img 	{ width: 230px; height: 90px; }
.bc .bctit 		{ font-family: OpenSans-Regular; text-align: center; color: black; font-size: 20px; font-weight: bold; margin: auto; }

/* ********************************************  EN-TETE  ******************************* */
header 			{ background: url(jfm/com/back_header.webp);  }
header .logotop { display: flex; justify-content: center; }
header  img   	{ max-width: 100%; max-height: 260px; margin: auto; } 

/* *********************************      NAVIGATION #topmenu      ******************************
  deux niveaux, le principal et des sous-menus
  grand écran : une ligne de menus
                sous-menus affichés au survol, en colonne avec une hauteur max
  petit écran : idem mais affiché en colonne 
*/
#topmenu {	width: 100%; position: sticky; position: -webkit-sticky; /* Safari */ top: 0px; z-index: 1; box-sizing: border-box;
			display: flex; flex-direction: row; justify-content: space-between; align-items: center; background: var(--monfonce);
			margin-bottom: 10px; padding: 0; margin: 0;  font-family:OpenSans-Regular;  line-height: 30px;}
#topmenu .burger { order: 3; }
#topmenu .gauche { order: 1; }
#topmenu .navbar { order: 2; }
/* ce qui est à gauche */
#topmenu .gauche    { height:50px; z-index: 3;  display: flex; flex-direction: row; justify-content: flex-start; }
#topmenu a          { height:50px; text-decoration: none; }
#topmenu .logo img 	{ max-height: 50px; }
#topmenu .tobo img 	{ max-height: 50px; }
#topmenu .tobo      { position: relative; width: 50px; }
#topmenu .tobohelp  { display: none; position: absolute; z-index: 2; text-align: center; line-height: 1em; font-family:OpenSans-Regular;
					  padding: 5px 5px; width: max-content; font-size: 20px; color: black; background: chartreuse; top:0px; }
#topmenu .tobodebut { left:-25px; }
#topmenu .tobofin   { left:  0px; }
#topmenu .tobohome  { left:  0px; padding: 15px 5px;}
#topmenu a.tobo:hover >div { display: block; }
/* navbar contient une liste horizontale de menus (verticale si petit écran) */
/* si beaucoup de menus, alors on wrappe */
#topmenu .navbar       { display: flex; flex-flow: row-reverse wrap; justify-content: flex-end; padding: 0; }
#topmenu .navbar .item { height: 50px;   
						 border-left:1px solid rgba(255,255,255,.5); 
					     border-top: 1px solid rgba(255,255,255,.5); }
#topmenu .navbar a     { padding: 0px 10px; margin: 0; height: 49px; display: inline-block; line-height: 47px; 
					     background: var(--monfonce); color: white; font-size: 18px; text-decoration: none;  
					     transition: color 0.3s ease; }
#topmenu .navbar a:hover { background: #606060; color: chartreuse;} 
#topmenu .navbar .current { color: yellow; }
#topmenu .dropdown:after { content: "\25BC"; margin-left: 5px;} /* triangle ajouté en fin de texte */
/* hamburger : une ruse à trois bandes, input sert de déclencheur, invisible */
/* chaque bande est la boite avec une couleur en background, qui sera tournée ou rendue invisible */
#topmenu .burger { display: none; } /* pas de hamburger en écran large */
#topmenu input   { display: none; }
#topmenu span    { display: none; } 
#topmenu input   { position: absolute; right: 0px; cursor: pointer; opacity: 0; z-index: 2;
				   width: 35px; height: 50px; margin: 0; }
#topmenu span    { width: 33px; height: 4px; border-radius: 3px; background: #cdcdcd;
				   position: relative; margin-bottom: 5px; z-index: 1;
				   transition: transform  0.5s cubic-bezier(0.77,0.2,0.05,1.0),  opacity 0.55s ease; }
#topmenu span#top { transform-origin: 4px 0px;}
#topmenu span#mid { transform-origin: 0% 100%;} 
#topmenu input:checked ~ div span#top { opacity: 1; transform: rotate( 45deg) translate( 3px,-1px); }
#topmenu input:checked ~ div span#mid { opacity: 1; transform: rotate(-45deg) translate(-5px,11px); }
#topmenu input:checked ~ div span#bot { opacity: 0; }
/* les sous-menus apparaissent en-dessous, quand on survole le menu correspondant */
/* position: absolute : ils sont séparés de topmenu */
#topmenu .navbar .item:hover .subnav { display: flex; } 
#topmenu .subnav 	{ display:none; flex-flow: row wrap; justify-content: flex-end; align-items: center;
					  position: absolute; right: 0; width: 100%; 
					  padding: 0px; background: #606060; }
#topmenu .subnav a  { font-size: 16px; color: white; 
					  border-left:1px solid rgba(255,255,255,.5); 
					  border-top: 1px solid chartreuse; box-shadow: -0px 4px 4px 0px rgba(127,255,0,0.5);}
#topmenu .subnav a:hover { background: #606060; } 

/* pour les petits écrans, on passe en vertical, à la demande en cliquant le hamburger */
@media screen and (max-width: 1030px) { 
	#topmenu .burger { display: block; } /* activation du burger */
	#topmenu input   { display: block; } 
	#topmenu span    { display: block; } 
	#topmenu .navbar { position: absolute; right: 0px; top: 50px;
					   flex-flow: column wrap; 	text-align: right; 				 
					   display: none; }
	#topmenu .navbar .item { border: 0; }			   
	#topmenu input:checked ~ .navbar {  display: flex;}
	/* les sous-menus apparaissent en vertical à coté */
	#topmenu .subnav { display: none; transform: translateY(-10px); list-style: none;  width: 320px; right: 30px; background: transparent; }
	#topmenu .navbar li:hover .subnav { display: list-item; } 
}

/* bas de page */
footer 		{ font-family: "Times New Roman"; font-size:12px; background: white; }
footer P 	{ text-align:center; margin:0; }
footer hr   { margin:0; padding: 4px 0 8px 0; border-width: 0 0 1px 0;}


/* pour rappel :
	top   selector2 : tous les selector2 descendants de top
	top > selector2 : uniquement les selector2 enfants directs (pas les petits-enfants)
	top + selector2 : l'élément suivant, mais ce n'est pas un enfant
	top ~ selector2 : tous les selector2 directement suivants (pas un enfant non plus)
---
    position: static;		flot normal, rien de spécial,  non  affecté par top, right, left, bottom
    position: relative;		position comme le flot normal, mais affecté par top, right, left, bottom
    position: fixed;		position fixe par rapport à l'écran = reste coincé en place
    position: absolute;		position relative à son ancêtre, retiré du flot normal = peuvent aller par-dessus les autres
    position: sticky;		dépend de la position du scroll dans la fenêtre, requiert un des top, right, left, bottom + webkit pour safari
*/