/* biometrics.css la (nouvelle mi-2024) allure de mon site sur la biométrie (à partir de la version FingerChip) */

/* header  : contient la navbar, barre de navigation en haut
   centre  : contient "section main"
   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(com/OpenSans-Regular.ttf) 	 format('truetype'); }
@font-face { font-family: 'OpenSans-Bold';  		src: url(com/OpenSans-Bold.ttf) 	 format('truetype'); }
@font-face { font-family: 'Montserrat-Regular';  	src: url(com/Montserrat-Regular.ttf) format('truetype'); }

:root { --monfonce: #280025; --monclair: #4F007A; --fondclair:#f0d1fa; --fondfonce:lightblue; --highlight:#E4FF00; --backclic:aliceblue; }

body { margin: 0px; padding: 0px; background: var(--fondclair); }

/* infâme ruse pour décaler la position d'une cible #anchor par rapport au haut de la page */
:target:before { content:""; display:block; height:50px; margin:-50px 0 0; }

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

.rscript { display: flex; flex-flow: row wrap; 	align-items: center; justify-content: space-around;}

/* ********************************* section principale centrale  ***************************** */
section { font-family: OpenSans-Regular, Arial, Helvetica, sans-serif; background: var(--fondclair);}

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; text-align: center;}																			/* 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; }

.maintitle  { padding: 20px 0 10px 0; margin: 0 0 15px 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; }
.main .maintitle  { text-align: left;}
.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; }

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

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

/* 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; 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;}
/* 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;}

iframe { width: 90%; }

/* cinema movies */
.movie { margin: 10px 0; background: var(--fondfonce); }
.movie .titre { text-align: center; font-family: OpenSans-Bold; font-size:18px; color: darkblue;}
.movie .flexrow { justify-content: space-evenly; }
.movie_item { width: 318px; display: flex; flex-direction: column; align-items: center; margin: 2px; padding: 3px; background-color: var(--backclic);
			  font-family: OpenSans-Regular; font-size: 12px; line-height: 12px; text-align: center; }
.movie_item div { margin: 3px 0; }

/****** bloc à cliquer ******/
/* sera dans bc, avec autres classes pour hauteur largeur si besoin */
/* ensuite un <a> qui contiendra un div bclic avec classe flex si besoin */
.bc 	{ font-family: OpenSans-Regular; font-size: 15px; font-weight: bold;  
		  background-color: var(--backclic); margin: 2px; padding: 0; } 
.bc1l   { margin: 4px 0; }	  
.w118	{ width: 118px; }
.w150	{ width: 150px; }
.w200	{ width: 200px; }
.windex	{ max-width: 300px; }
.h200 	{ height:200px; }
.h45 	{ height: 45px; }
.h01 	{ height: 24px; }
.bc a 			div.bclic 			{ border-color: blue; }
.bc a:visited 	div.bclic 			{ border-color: purple;}
.bc a          	div.bclic:hover 	{ background-color: var(--highlight); }
.bclic  	 { padding: 2px; text-align: center; } 
.bclic > div { display: grid; align-items: center; } /* pour center verticalement un seul texte de plusieurs lignes */
/* image + text en rangée */
.h50row .bclic 		{ display: flex; flex-flow: row; justify-content: center; }
.h50row .bclic img 	{ height: 50px; }
.h50row .bclic div  { height: 50px; padding: 2px;  }
.windex .bclic 		{ display: flex; flex-flow: row; justify-content: center; }
.windex .bclic img 	{ height: 65px; }
.windex .bclic div  { height: 65px; padding: 2px; font-size: 16px; line-height: 15px; }
.windex a 		  	{ text-decoration: none; }
/* pour la sélection des modalités */
.modal  a 		    { text-decoration: none; }
.modal  .bclic 		{ display: flex; flex-flow: row; justify-content: space-evenly; width: 150px; }
.modal  .bclic img 	{ max-width: 60px; max-height: 60px; }
.modal  .bclic div  { height: 60px; padding: 2px; color: black; }

/****** menu large qui contiendra des blocs à cliquer *****/
.subh2 			  { background-color: var(--fondfonce); margin: 20px 0; padding: 3px 0 10px 0; }
.subh2 .title 	  { text-align: center; }
.subh2 .title h2  { color: black; }
.subh2 a 		  { text-decoration: none; }
.subh2 a:hover h2 { background-color: var(--highlight); }

.largecenter h2 { text-align: center; }

/* 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; }
.bn_f 		{ flex-basis:  58px; flex-shrink: 0; width: 58px; height: 40px; } /* flèches */
.bn_back 	{ background: url(com/tour_back.gif); margin-right: 3px; }
.bn_next 	{ background: url(com/tour_next.gif); margin-left:  3px; }
.bn2  		{ font-family:'Montserrat-Regular',sans-serif; font-size:15px; line-height:1em; text-decoration: none;
			  width:50%; margin:2px; display:flex; flex-flow:row nowrap; align-items:center; }
.bn2:hover 	{ background-color: var(--highlight); }
.bn2b 		{ justify-content: flex-start; }
.bn2n 		{ justify-content: flex-end; text-align: right;}


/****** bloc articles jeux et sciences ******/
.blocjeu  { width: 320px; }
.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 { height: 47px; overflow: hidden;	position: relative; font-size: 13px;  text-align: justify; line-height: 1.2em;} /* ça laisse 3 lignes de texte */
.blocjeu .bloccos {                             	position: relative; font-size: 13px;  text-align: justify; line-height: 1.2em;} /* pour la science, texte en entier */
	
/* les tables, mais pas tres developpé */
table { border-collapse: collapse; font-size:12px; margin: auto; }
.local td  { border: 1px solid black; padding: 0px 5px 0px 5px; text-align:center;}
.local .tl { text-align :left;}

/* 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%; }

/* ********************************************  EN-TETE  ******************************* */
header 			{ background: url(com/back_header.webp);  }
header .logotop { display: flex; justify-content: space-between; }
header  img   	{ max-width: 100%; max-height: 260px; margin: auto; } 
/* on fixe la taille de base, on n'autorise pas de grossir mais on peut maigrir */
header .logo_gauche { flex: 0 1 150px; max-height: 150px;}
header .logo_milieu { flex: 0 1 650px; max-height: 260px; margin-bottom: -4px; /*cursor: pointer;*/}
header .logo_droite { flex: 0 1 150px; max-height: 150px;}
/* le menu des autres sites */
header .logo_gauche:hover .topnav { display: flex; }
header .topnav 			{ display:none; flex-flow: column nowrap; position: absolute; top: 60px; z-index: 10; padding: 5px; margin: 5px; 
						  font-size:20px; font-family:OpenSans-Bold; color: white; background: chartreuse; }
header .topsubnav 		{ background: #444444; padding: 10px; font-size: 16px; color: white; text-decoration: none; }
header .topsubnav:hover { background: #909090; } 

/* *********************************      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 .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: 1100px) { 
	#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; }
footer P 	{ text-align:center; margin:0; word-wrap: break-word;}
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
*/