/* ##################################################################################################################### */
/*                             FEUILLE DE STYLE POUR LA BIBLI DE LIENS VERSION 3                                         */
/* ##################################################################################################################### */



/* --------------------------------------------------------------------------------------------------------------------- */
/*                                    H A U T   D E   P A G E   " R E S P O N S I V E "                                  */		
/* --------------------------------------------------------------------------------------------------------------------- */

/* Selon la largeur de fenêtre, adaptation de l'affichage du haut de la page index.html  */
	.large { display: block }
	@media screen and (max-width:699px) { .large { display: none } }
	.etroit { display: block }
	@media screen and (min-width:700px) { .etroit { display: none } }

	
/* --------------------------------------------------------------------------------------------------------------------- */
/*                    T I T R E S   D E   N I V E A U X :  1 , 2, 3    (arborescents, fond jaune)                        */		
/* --------------------------------------------------------------------------------------------------------------------- */
		
	.t1 { background-color: yellow ; margin: 0px; display : inline ; font-size: 28px; font-weight: bold; }
	.t2 { background-color: yellow ; margin: 0px; display : inline ; font-size: 22px; font-weight: bold; }
	.t3 { background-color: yellow ; margin: 0px; display : inline ; font-size: 16px; font-weight: bold; }


/* --------------------------------------------------------------------------------------------------------------------- */
/*                              P O S T - I T   M A I N T E N A N C E  (cadrés sur bord droit)                           */		
/* --------------------------------------------------------------------------------------------------------------------- */
		
.pull_right {                     /* cadrage droit */
    float: right;
}
.mypic {                          /* forme et dimensions pastilles */
    display: block;
	margin-top: 2px;              /* ajout G.A. */
    border-radius: 20%;           /* 50%: cercle,  25%: coins arrondis, 0%: carré */
	border: 1px solid gray;
    overflow: hidden;
}
.mypic .initials {                /* couleur, position et casse texte pastilles */
    display: block;
    color: #000;
    text-align: center;
    user-select: none;
	font-size: 70%;
	color: gray ;
	line-height: 8px;             /* ajout G.A. */
	padding-top: 3px;             /* ajout G.A. */
}
.mypic1,                          /* pastille incolore */
.media_live_location .fill {
    background-color: #fbffd1;    /* jaune paille */
	height: 14px;                 /* ajout G.A. */
	font-family: arial;           /* ajout G.A. */
}

/* --------------------------------------------------------------------------------------------------------------------- */
/*                     B A L I S E S   N U M E R O T E E S   (parcours balisés, adapté de Telegram)                      */		
/* --------------------------------------------------------------------------------------------------------------------- */
		
.pull_left {                      /* cadrage à gauche */
    float: left;
}
.userpic {                        /* forme et dimensions pastilles */
    display: block;
	margin-top: 2px;              /* ajout G.A. */
    border-radius: 20%;           /* 50%: cercle,  25%: coins arrondis, 0%: carré */
	border: 1px solid black;
    overflow: hidden;
}
.userpic .initials {              /* couleur, position et casse texte pastilles */
    display: block;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    user-select: none;
	line-height: 12px;            /* ajout G.A. */
	padding-top: 2px;             /* ajout G.A. */
}
.userpic1,                        /* pastille verte */
.media_live_location .fill {
    background-color: #00cc00;
	width: 24px;                  /* ajout G.A. */
	height: 16px;                 /* ajout G.A. */
	font-family: arial;           /* ajout G.A. */
}
.userpic2,                        /* pastille bleue */
.media_live_location .fill {
    background-color: #0099ff;
	width: 24px;                  /* ajout G.A. */
	height: 16px;                 /* ajout G.A. */
	font-family: arial;           /* ajout G.A. */
}
.userpic3,                        /* pastille rouge */
.media_live_location .fill {
    background-color: #ff0000;
	width: 24px;                  /* ajout G.A. */
	height: 16px;                 /* ajout G.A. */
	font-family: arial;           /* ajout G.A. */
}
.userpic4,                        /* pastille noire */
.media_live_location .fill {
    background-color: #000000;
	width: 24px;                  /* ajout G.A. */
	height: 16px;                 /* ajout G.A. */
	font-family: arial;           /* ajout G.A. */
}


/* --------------------------------------------------------------------------------------------------------------------- */
/*                 P O I N T S   C O U L E U R  (niv. difficulté, d'après W3schools "How To Circle")                     */		
/* --------------------------------------------------------------------------------------------------------------------- */

.pv { height: 8px; width: 8px; background-color: #00cc00; border-radius: 50%; display: inline-block; }   /* vert  (fac.) */
.pb { height: 8px; width: 8px; background-color: #0000ff; border-radius: 50%; display: inline-block; }   /* bleu  (a.f.) */
.pr { height: 8px; width: 8px; background-color: #ff0000; border-radius: 50%; display: inline-block; }   /* rouge (a.d.) */
.pn { height: 8px; width: 8px; background-color: #000000; border-radius: 50%; display: inline-block; }   /* noir  (dif.) */
.pg { height: 8px; width: 8px; background-color: #cccccc; border-radius: 50%; display: inline-block; }   /* gris  (tbd ) */


/* --------------------------------------------------------------------------------------------------------------------- */
/*                 I N D E N T A T I O N   E T   A R R I E R E - P L A N   D E S   L I E N S  (statut)                   */		
/* --------------------------------------------------------------------------------------------------------------------- */
		
/* Lignes à décalage croissant, fond blanc pour liens standard */
	.s0 { background-color: #ffffff ; margin-left:  3px; font-size:16px; }
	.s1-{ background-color: #ffffff ; margin-left:  3px; font-size:16px; }
	.s1 { background-color: #ffffff ; margin-left: 28px; font-size:16px; }
	.s2-{ background-color: #ffffff ; margin-left: 29px; font-size:16px; }
	.s2 { background-color: #ffffff ; margin-left: 53px; font-size:16px; }
	.s3-{ background-color: #ffffff ; margin-left: 54px; font-size:16px; }
	.s3 { background-color: #ffffff ; margin-left: 78px; font-size:16px; }

/* Lignes à décalage croissant, fond vert pâle pour ajouts approuvés */
	.v0 { background-color: #d8ffcc ; margin-left:  3px; font-size:16px; }
	.v1-{ background-color: #d8ffcc ; margin-left:  3px; font-size:16px; }
	.v1 { background-color: #d8ffcc ; margin-left: 28px; font-size:16px; }
	.v2-{ background-color: #d8ffcc ; margin-left: 29px; font-size:16px; }
	.v2 { background-color: #d8ffcc ; margin-left: 53px; font-size:16px; }
	.v3-{ background-color: #d8ffcc ; margin-left: 54px; font-size:16px; }
	.v3 { background-color: #d8ffcc ; margin-left: 78px; font-size:16px; }

/* Lignes à décalage croissant, fond bleu pâle pour propositions d'ajout */
	.b0 { background-color: #ccffff ; margin-left:  3px; font-size:16px; }
	.b1-{ background-color: #ccffff ; margin-left:  3px; font-size:16px; }
	.b1 { background-color: #ccffff ; margin-left: 28px; font-size:16px; }
	.b2-{ background-color: #ccffff ; margin-left: 29px; font-size:16px; }
	.b2 { background-color: #ccffff ; margin-left: 53px; font-size:16px; }
	.b3-{ background-color: #ccffff ; margin-left: 54px; font-size:16px; }
	.b3 { background-color: #ccffff ; margin-left: 78px; font-size:16px; }

/* Lignes à décalage croissant, fond rouge pâle pour propositions de suppression */
	.r0 { background-color: #ffd6cc ; margin-left:  3px; font-size:16px; }
	.r1-{ background-color: #ffd6cc ; margin-left:  3px; font-size:16px; }
	.r1 { background-color: #ffd6cc ; margin-left: 28px; font-size:16px; }
	.r2-{ background-color: #ffd6cc ; margin-left: 29px; font-size:16px; }
	.r2 { background-color: #ffd6cc ; margin-left: 53px; font-size:16px; }
	.r3-{ background-color: #ffd6cc ; margin-left: 54px; font-size:16px; }
	.r3 { background-color: #ffd6cc ; margin-left: 78px; font-size:16px; }

/* Lignes à décalage croissant, fond violet vif pour "réservé équipe Bibli" */
	.z0 { background-color: #ff00ff ; margin-left:  3px; font-size:16px; }
	.z1-{ background-color: #ff00ff ; margin-left:  3px; font-size:16px; }
	.z1 { background-color: #ff00ff ; margin-left: 28px; font-size:16px; }
	.z2-{ background-color: #ff00ff ; margin-left: 29px; font-size:16px; }
	.z2 { background-color: #ff00ff ; margin-left: 53px; font-size:16px; }
	.z3-{ background-color: #ff00ff ; margin-left: 54px; font-size:16px; }
	.z3 { background-color: #ff00ff ; margin-left: 78px; font-size:16px; }


/* --------------------------------------------------------------------------------------------------------------------- */
/*                    I N F O S   D E R R I E R E   L E   L I E N   (biblio, taille, avertissement)                      */		
/* --------------------------------------------------------------------------------------------------------------------- */

	.bib { font-size: 80%; color: gray ; }
	.dim { font-size: 80%; color: #33cc33; background-color: #e6ffe6; font-style: italic; }		
	.war { font-size: 80%; color: red; background-color: #ffe6e6; font-style: italic; }  				

			
/* --------------------------------------------------------------------------------------------------------------------- */
/*                         P O P - U P   O N  /  O F F    (à 2 clics, adapté du site W3schools)                          */		
/* --------------------------------------------------------------------------------------------------------------------- */
		
/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 330px;             /* valeur de compromis G.A.*/
  background-color: #ffffb3;
  color: #000;
  font-size: 80%;           /* modificateur ajouté G.A. */
  text-align: center;
  border: 1px solid black;  /* modificateur ajouté G.A. */
  border-radius: 6px;
  padding: 3px 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;             /* modificateur facultatif, sinon position comme inline ordinaire */
  left: 0%;                 /* modificateur facultatif, sinon position comme inline ordinaire */
  margin-left: 0px;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show { visibility: visible; }

/* --------------------------------------------------------------------------------------------------------------------- */
/*              I N F O - B U L L E  (fugitive sur PC: au survol souris - adapté du site W3schools)						 */  		
/*                NOTA: sur smartphone Androïd, comportement rémanent identique au pop-up ON/OFF                         */
/* --------------------------------------------------------------------------------------------------------------------- */

/* Tooltip container */
.tooltip {
  position: absolute;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 330px;
  background-color: #ffffb3;
  color: #000;
  text-align: center;
  font-size: 80%;           /* modificateur ajouté G.A. */
  border: 1px solid black;
  padding: 3px 6px;
  border-radius: 6px;

/* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: 0px;

 /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }


/* ##################################################################################################################### */
/*                                              D I V E R S   A   T R I E R                                              */
/* ##################################################################################################################### */

/* padding pour régler l'interligne entre les liens  */
div { margin-bottom:5px }

/* zone sensible "détail" (pop-up, info-bulle ou lien) en bleu souligné */
.zs { color: blue; text-decoration: underline; }   

/* terminaison de page centrée pour mail de contact et date de mise à jour */
.mailetdate { font-size: 80%; color: gray ; text-align: center; }

	a { line-height: 1rem; font-size: 1rem; }
/*	p { border-style: solid; border-width: 1px; border-color: red; margin: 0.5rem }  */  /* margin = intervalle entre blocs */
	p { margin: 0.5rem }    /* margin = intervalle entre blocs */

/* Titres BLOCS de niveau 1, 2 et 3 sur fond jaune (arborescence en principe stable) */	
	h1 { line-height: 3; background-color: yellow ; margin: 0px; display : inline ; }
	h2 { background-color: yellow ; margin: 0px; display : inline ; }
	h3 { background-color: yellow ; margin: 0px; display : inline ; }

	#pl { margin-left: 5%; }
	@media screen and (max-width:700px) { #pl { margin-left: 0%; } }
	.pl1 { margin-left: 10%; font-size: 1rem; }
	@media screen and (max-width:700px) { .pl1 { margin-left: 5%; } }
	.pl2 { margin-left: 15%; font-size: 1rem; }
	@media screen and (max-width:700px) { .pl2 { margin-left: 10%; } }
	.pl3 { margin-left: 20%; font-size: 1rem; }
	@media screen and (max-width:700px) { .pl3 { margin-left: 15%; } } 
	
   	#po { display : inline ; margin: 0px; margin-left: 0px; font-size:16px; line-height:0px; }
	#pb { background-color: rgb(200,245,255) ; display : inline ; color: blue; margin: 0px; margin-left: 0px; font-size:16px; }

	#pd1 { display : inline ; color: blue; margin: 0px; margin-left: 25px; font-size:16px; }
	#pd2 { display : inline ; color: blue; margin: 0px; margin-left: 50px; font-size:16px; }
	#pd3 { display : inline ; color: blue; margin: 0px; margin-left: 75px; font-size:16px; }

	#pd1b{ background-color: #ccffff ; display : inline ; color: blue; margin: 0; margin-left: 25px; font-size:16px; }
	#pd2b{ background-color: #ccffff ; display : inline ; color: blue; margin: 0; margin-left: 50px; font-size:16px; }
	#pd3b{ background-color: #ccffff ; display : inline ; color: blue; margin: 0; margin-left: 75px; font-size:16px; }

/* Ligne sans décalage, fond jaune, caractères italiques pour titres provisoires */
	#ld0j{ background-color: yellow ; margin-left:  0px; font-size:16px; font-style:italic}

	#p02 { display : inline ; margin-left: 0px; font-size: 14px; }
	@media screen and (max-width:700px) { #p02 { display : block ; margin: 0px; font-size: 14px; text-align: center; line-height: 12px;} }