body
{
	font: 8pt Lato, sans-serif;
	margin: 0;
	padding: 2em;
}

div
{
	border: 0px;
	margin: 0px;
}

a
{
	color: inherit;
	text-decoration-style: dotted;
}

/*- En-tête ------------------------------------------------------------------*/

div.enTete
{
	margin: 0 0 1em 0;
}

.titre
{
	color: #1F1F00;
	font-size: 200%;
}

.photo
{
	position: absolute;
	width: 6em;
	top: 0px; right: 0px;
}

/*--- Tri-colonnes en tête ---*/

/* .tripot (TRI-COlonnes de Tête) est une première tentative, en bidouilles à la sauce 2010.
 * .tripot (TRI-POsitions de Tête) est la version flex
 */

.tripot, .tripot .qui, .tripot .sousnom
{
	display: flex;
}
.tripot .qui { flex-direction: column; }

.tripot .photo
{
	position: static;
	order: 2;
}
.tripot .qui {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

/* clearfix */
.tricot .nom:after,
.tricot:after
{
	content: "";
	display: table;
	clear: both;
}

.tricot .contact
{
	float: left;
}

.tripot .coltitre
{
	flex-grow: 1;
}
.tricot .coltitre
{
	float: left;
	width: 70%; /* Valeur empirique qui laisse, même en grossissant, de la place pour le bloc contact à gauche et la photo à droite. */
	--largeur-contact: 15em;
	width: calc(100% - var(--largeur-contact) - 6em - 4em); /* 100% - largeur bloc contact - largeur photo - largeur marges gauche et droite */
}

.tricot .coltitre,
.tripot .coltitre
{
	margin: 3em 2em 0 2em;
	text-align: center;
}

.tripot div.audessus,
.tricot div.audessus
{
	border: none;
	font-style: italic;
	font-size: 120%;
	/*
	 color: #7F7F7F;
	 color: #007F00;
	 */
	color: #3F3F7F;
}

.tripot .court div.audessus:before,
.tricot .court div.audessus:before
{
	content: "« ";
}

.tripot .court div.audessus:after,
.tricot .court div.audessus:after
{
	content: " »";
}

div.nom
{
	color: #1F1F00;
	font-size: 200%;
}

/*- Corps --------------------------------------------------------------------*/

div.section
{
	margin: 1em 0;
	position: relative;
}

div.audessus
{
	border: 1px solid #1F1F00;
	border-bottom-left-radius: 1em;
	border-top-right-radius: 1em;
	padding: 8px;
	position: relative;
	overflow: hidden;
}

.titresection
{
	position: absolute;
	color: #BFBFFF;
	font-size: 400%;
	z-index: -1;
	text-align: center;
	left: 0px;
	right: 0px;
	width: 100%;
	top: 0px;
	
	margin: 0;
	font-weight: normal;
}

.titresection:after
{
	/* http://stackoverflow.com/questions/8005447/cross-browser-text-gradient-in-pure-css-without-using-background-image */
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	height: 50%;
	left: 0;
	width: 100%;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background:    -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background:     -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background:      -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background:         linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

.pdf .titresection
{
	/* En compensation du :after qui saute juste après. */
	color: #DFDFFF;
}

.pdf .titresection:after
{
	/* Le PDF a du mal à faire du dégradé par dessus une police (il nous fait un gros rectangle blanc). On lâche donc l'affaire. */
	display: none;
}

td.categorie
{
	padding-right: 24px;
}

/*- Lien entre une expérience et la ligne de temps la matérialisant ----------*/

.afftemps
{
	position: absolute;
	width: 0.5em;
	background: #DFDFFF;
	/*background: radial-gradient(rgba(255, 255, 255, .25), rgba(0, 0, 255, .25));*/
	border-top: 0.2em solid #FFFFFF;
	border-bottom: 0.2em solid #FFFFFF;
	/*border-radius: 0.5em;*/
}

.projet:hover .afftemps
{
	background: #BFBFDF;
}

.jonction
{
	fill: rgba(0, 0, 255, 0.125);
}

.projet:hover .jonction, .jonctionHover
{
	fill: #BFBFDF;
}

#annees
{
	pointer-events: none;
	color: rgba(255, 0, 127, .1);
}

.annee
{
	position: absolute;
	left: 0;
	right: 0;
	font-size: 300%; /* À FAIRE: une font-size pour que 4 chiffres prennent la largeur dispo */
	text-align: center;
	/*margin-top: -0.5em;*//* Ne marche pas trop, en grossissant la police on réalise que le line-height ne vaut pas exactement 1em, donc on perd notre centrage vertical. On va finalement reposer sur le calcul fait en JS et collé dans un <style>. */
}

/*- Classiques ---------------------------------------------------------------*/

.ml /* Mono-ligne. */
{
	white-space: nowrap;
}

.re /* respire */
{
	/* Encore une pourriture que nous ont produit le W3C. Le modèle ne permet tout simplement pas la fusion des marges horizontales. Les divers essais se sont révélés infructueux:
	 * - reposer sur la fusion des marges horizontales, pour tout simplement avoir des listes horizontales, dont les éléments sont séparés (entre eux) par un espace donné: ça, ça serait dans un monde idéal où les CSS n'aurait pas été élaboré par le W3C qui est sans doute le comité le moins pragmatique qui ait jamais été constitué.
	 * - mettre un .respire + .respire { margin-left }: le problème est que même si le second respire passe à la ligne, il récupère une margin-left, gros trou à sa gauche alors qu'il n'y a rien qui l'y oblige.
	 * - caser entre les <span> un espace surdimensionné pour reposer sur le comportement du HTML (espace = césure possible, et si pas césure ça crée un espace d'un espace entre les deux mots): oui mais voilà pour lui donner une taille de police 400% il lui faut un <span> dédié et du coup il n'est plus considéré comme espace de césure.
	 * - pre-wrap: dommage, l'espace ne peut pas être "fusionné si en fin de ligne, sinon préservé".
	 * - margin-right: c'est encore le plus seyant. Même si l'on perd du coup toute cette marge en fin de ligne (un texte qui, sans la marge, aurait pu tenir en bout de ligne, passe à la ligne avec ça).
	 */
	margin-right: 2em;
}

/*- Marqués et marqueurs -----------------------------------------------------*/

.replie #chemins, .replie .marqueurSecondaire
{
	display: none;
}

.marque
{
	position: relative;
	display: inline-block; /* Si plusieurs marques sont imbriquées, et qu'elles sont en inline, au 2014-12-16 WebKit / Blink merde sur le calcul de l'offsetLeft. Exemple avec: <div class="A">Blabla <span class="marque marque-B">Je fais <span class="marque marque-C">ceci</span></span></div>: B a pour offsetParent A, pour offetLeft 30; C a pour offsetParent B, *mais* pour offsetLeft 70 (= 40 + 30, 40 étant la valeur correcte que reporte d'ailleurs Firefox). */
	white-space: nowrap; /* Le marqueur étant placé "au centre" de la marque, si cette dernière est multiligne ça nous ennuie car le placement paraîtra curieux. */
	font-weight: bold;
}

.centre-marqueur
{
	position: absolute;
	display: inline-block;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	z-index: -1;
}

.marqueur
{
	position: absolute;
	display: inline-block;
	left: -1em;
	width: 2em;
	top: -1em;
	height: 2em;
	border-radius: 1em;
	background: rgba(0, 0, 255, 0.125);
}

.marqueurSecondaire
{
	left: -.5em;
	width: 1em;
	top: -.5em;
	height: 1em;
	border-radius: .5em;
}

/*- Le reste -----------------------------------------------------------------*/

div.dateexp
{
	font-size: 75%;
}

.titreexp h3
{
	display: inline;
	color: #7F7F7F;
}

.titreexp h3 .role
{
	color: #000;
}

.titreexp
{
	font-style: bold;
	margin: 0;
	border-bottom: 1px solid #7F7F7F;
}

.technos .niveau
{
	width: 3em;
	float: left;
	text-align: right;
}

.technos .techno
{
	margin-left: 3.5em;
}

.projet
{
	margin-top: 1em;
}

.projetPremier
{
	margin-top: 0;
}

.descrexp
{
	display: inline;
	font-style: italic;
}

.replie .projets .exp .t, .replie .projets .techno, .projets .replie .exp .t, .projets .replie .techno
{
	display: none;
}

.projets .exp, .projets .techno
{
	margin-left: 2em;
}

.roles
{
	display: none;
}

.replie .roles
{
	display: block;
}

.projets .techno
{
	font-style: italic;
	font-size: 80%;
}

div.soussection
{
	margin-top: 24px;
	margin-bottom: 12px;
	font-size: 150%;
}

div.paraindependant
{
	margin: 1em;
}

img
{
	border: none;
}