/* ==========================================================================
   CV Eric La Rocca — feuille unique (ecran, adaptatif, impression)

   Portage de la feuille du template « Bold CV » v1.2 (2011). L'identite
   visuelle est conservee : ambre #fc0, bloc blanc centre, filets noirs,
   titres Arial condenses par un letter-spacing negatif.

   Trois familles d'ecarts assumees par rapport a l'original, toutes
   documentees dans le README :
     - mise en page en grille au lieu de flottants, donc reellement adaptative
     - couleurs de la rampe ambre assombries : les valeurs d'origine
       plafonnaient a 1,3:1 de contraste sur blanc (quasi illisibles)
     - sprites GIF remplaces par du CSS (barres de competence, barre d'outils)
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Jetons
   -------------------------------------------------------------------------- */

:root {
	/* Ambre de fond : valeur exacte relevee dans img/background.png */
	--amber: #fc0;
	--amber-rule: #d90;

	/* Rampe des intitules de poste. Origine : #FFC400 / #FFD648 / #FFE27D,
	   soit 1,60 / 1,40 / 1,28 pour 1 sur blanc. Remplacee par une rampe de
	   meme famille mais lisible : 3,59 / 4,18 / 4,94 pour 1. */
	--role-1: #b37d00;
	--role-2: #a67200;
	--role-3: #996600;

	--ink: #444;
	--ink-strong: #000;
	--ink-soft: #666;

	/* Origine #d40 (4,28:1), sous le seuil de 4,5 pour du texte courant. */
	--link: #d23f00;
	--link-hover: #000;

	--rule: #000;
	--rule-soft: var(--amber);
	--frame: #ccc;

	/* Origine #aaa (2,32:1), sous le seuil de 3 pour un composant d'interface. */
	--track: #949494;
	--baseline: #444;

	--paper: #fff;

	--col-gap: 30px;
	--wrap-pad: 30px;
	--wrap-max: 900px;

	--font: Arial, Tahoma, Verdana, sans-serif;
}

/* --------------------------------------------------------------------------
   02. Reset minimal
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote {
	margin: 0;
	padding: 0;
}

ul { list-style: none; }

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* --------------------------------------------------------------------------
   03. Base
   -------------------------------------------------------------------------- */

body {
	margin: 0 auto;
	padding: 30px 0;
	background: var(--amber) url(../img/background.png);
	/* 12px correspond a la taille d'origine. En rem pour rester sensible aux
	   preferences de taille du navigateur. */
	font: normal normal 0.75rem/1.667 var(--font);
	color: var(--ink);
}

a {
	color: var(--link);
	text-decoration: underline;
}

a:hover,
a:focus-visible { color: var(--link-hover); }

:focus-visible {
	outline: 2px solid var(--ink-strong);
	outline-offset: 2px;
}

strong { font-weight: bold; }
em { font-style: italic; }

p + p { margin-top: 1em; }

/* Lien d'evitement : visible uniquement au clavier. */
.skiplink {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink-strong);
	color: var(--paper);
	padding: 10px 16px;
	z-index: 200;
}

.skiplink:focus {
	left: 0;
	color: var(--paper);
}

/* --------------------------------------------------------------------------
   04. Ossature
   -------------------------------------------------------------------------- */

#wrap {
	max-width: calc(var(--wrap-max) + 2 * var(--wrap-pad));
	margin: 0 auto;
	padding: var(--wrap-pad);
	background: var(--paper) url(../img/content-end.png) no-repeat bottom center;
	border-bottom: 5px solid var(--amber-rule);
	overflow-wrap: break-word;
}

.section {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--col-gap);
	border-top: 1px solid var(--rule);
	margin-top: 50px;
}

/* min-width:0 par precaution : neutralise le min-width:auto implicite des
   elements de grille, qui laisserait un contenu indivisible (URL longue,
   image large ajoutee plus tard) elargir sa piste et faire deborder la page. */
.section > * {
	padding-top: 30px;
	min-width: 0;
}

.topsection {
	margin-top: 0;
	border-top-width: 4px;
}

/* Filet double au-dessus de la colonne de titre : effet d'origine. */
.titlecolumn {
	border-top: 1px solid var(--rule);
	padding-top: 29px;
}

.topsection .titlecolumn { border-top-width: 2px; }

.largecolumn { grid-column: span 2; }

/* --------------------------------------------------------------------------
   05. Titres
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
	line-height: 1.1;
	color: var(--ink-strong);
	margin: 1em 0 0.5em;
	font-weight: bold;
}

h2 { font-size: 2em;   letter-spacing: -1px; }
h3 { font-size: 1.5em; letter-spacing: -1px; }
h4 { font-size: 1.167em; letter-spacing: -1px; color: var(--ink-soft); }

.myname {
	font-size: 5em;
	line-height: 0.933;
	letter-spacing: -4px;
	margin: 0;
}

.sectiontitle {
	font-size: 3em;
	line-height: 1;
	letter-spacing: -2px;
	color: var(--ink);
	margin: 0;
}

/* --------------------------------------------------------------------------
   06. En-tete : identite, citation, coordonnees
   -------------------------------------------------------------------------- */

.jobs {
	margin-top: 0.5em;
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: -1px;
}

.jobs li:nth-child(1) { font-size: 2em;    color: var(--role-1); }
.jobs li:nth-child(2) { font-size: 1.5em;  color: var(--role-2); }
.jobs li:nth-child(3) { font-size: 1.333em; color: var(--role-3); }

.citation {
	margin-top: 1.5em;
	/* Guillemet ouvrant decoratif, equivalent des anciens .bqstart/.bqend. */
	position: relative;
	padding-left: 0.9em;
}

.citation::before {
	content: "\201C";
	position: absolute;
	left: -0.15em;
	top: -0.1em;
	font-size: 5em;
	line-height: 1;
	color: #919191;
}

.citation blockquote p { font-style: italic; }

.citation figcaption {
	margin-top: 0.5em;
	text-align: right;
}

.citation cite { font-style: italic; }

.simplelist li { margin-bottom: 0.25em; }

.myphoto { margin: 5px 15px 0 0; }

/* Cadre photo caracteristique du gabarit d'origine. */
.photo {
	padding: 4px;
	background: var(--paper);
	border: 1px solid var(--frame);
}

/* --------------------------------------------------------------------------
   07. Competences
   -------------------------------------------------------------------------- */

.skill { margin-top: 30px; }

.skill:first-of-type { margin-top: 0; }

.skill h4 { margin: 0 0 0.4em; }

/* Reproduction du sprite skill-bar.gif : un filet de 4px, pose 6px sous le
   haut du bloc, souligne par un trait de 1px. */
.skillbar {
	position: relative;
	height: 12px;
	border-bottom: 1px solid var(--baseline);
}

.skillbar::before {
	content: "";
	position: absolute;
	inset: 6px 0 auto 0;
	height: 4px;
	background: var(--track);
}

.skillbarfill {
	position: absolute;
	inset: 6px auto auto 0;
	height: 4px;
	width: var(--skill-level, 0%);
	background: var(--amber);
}

/* Niveaux en classes plutot qu'en attribut style= : une CSP stricte
   (default-src 'self', sans 'unsafe-inline') bloque les styles en ligne.
   Le gabarit d'origine procedait deja ainsi. */
.skill-5   { --skill-level: 5%; }
.skill-10  { --skill-level: 10%; }
.skill-15  { --skill-level: 15%; }
.skill-20  { --skill-level: 20%; }
.skill-25  { --skill-level: 25%; }
.skill-30  { --skill-level: 30%; }
.skill-35  { --skill-level: 35%; }
.skill-40  { --skill-level: 40%; }
.skill-45  { --skill-level: 45%; }
.skill-50  { --skill-level: 50%; }
.skill-55  { --skill-level: 55%; }
.skill-60  { --skill-level: 60%; }
.skill-65  { --skill-level: 65%; }
.skill-70  { --skill-level: 70%; }
.skill-75  { --skill-level: 75%; }
.skill-80  { --skill-level: 80%; }
.skill-85  { --skill-level: 85%; }
.skill-90  { --skill-level: 90%; }
.skill-95  { --skill-level: 95%; }
.skill-100 { --skill-level: 100%; }

/* Le libelle reste dans le DOM pour les lecteurs d'ecran, et reapparait
   a l'impression ou la barre coloree ne porte plus l'information. */
.skillbarfill span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   08. Vignettes de logos
   -------------------------------------------------------------------------- */

.thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 1em;
}

.thumbs img { display: block; }

/* --------------------------------------------------------------------------
   09. Experiences et formation
   -------------------------------------------------------------------------- */

.studies h3 { margin-top: 1.5em; }
.studies h3:first-child { margin-top: 0; }

.job, .study { margin-top: 1em; }

.job + .job,
.study + .study {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid var(--rule-soft);
}

.job h4, .study h4 { margin: 0 0 0.3em; }

.job ul, .study ul, .largecolumn ul {
	margin: 1em 0 0 20px;
	list-style-type: square;
}

.job li, .study li, .largecolumn li { margin-bottom: 0.2em; }

.works ul { margin-top: 0; }
.works li { margin-bottom: 0.1em; }

/* --------------------------------------------------------------------------
   10. Barre d'actions flottante

   L'original empilait des sprites GIF de 23px avec text-indent:-9999px,
   sans libelle accessible. Remplace par des libelles textuels, meme
   emplacement et meme fond translucide.
   -------------------------------------------------------------------------- */

.cvoptions {
	position: fixed;
	left: 0;
	top: 40%;
	z-index: 100;
	background: rgba(0, 0, 0, 0.72);
	padding: 6px;
	border-radius: 0 4px 4px 0;
}

.cvoptions ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cvoptions a,
.cvoptions button {
	display: block;
	width: 100%;
	padding: 6px 10px;
	font: bold 1em var(--font);
	color: var(--paper);
	background: none;
	border: 0;
	border-radius: 2px;
	text-decoration: none;
	text-align: left;
	cursor: pointer;
}

.cvoptions a:hover,
.cvoptions a:focus-visible,
.cvoptions button:hover,
.cvoptions button:focus-visible {
	background: var(--amber);
	color: var(--ink-strong);
}

.cvoptions :focus-visible { outline-color: var(--paper); }

/* --------------------------------------------------------------------------
   11. Adaptatif
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.section { grid-template-columns: repeat(2, 1fr); }
	.largecolumn { grid-column: span 2; }
	.titlecolumn { grid-column: 1 / -1; }
	.myname { font-size: 4em; letter-spacing: -3px; }
}

@media (max-width: 599px) {
	body {
		padding: 0;
		/* Distance de lecture plus courte sur telephone : 14px au lieu de 12. */
		font-size: 0.875rem;
	}

	#wrap {
		padding: 20px;
		border-bottom-width: 3px;
	}

	.section {
		grid-template-columns: 1fr;
		margin-top: 30px;
	}

	.largecolumn, .titlecolumn { grid-column: auto; }

	.section > * { padding-top: 20px; }

	.myname { font-size: 3em; letter-spacing: -2px; }
	.sectiontitle { font-size: 2em; }

	.jobs li:nth-child(1) { font-size: 1.6em; }
	.jobs li:nth-child(2) { font-size: 1.3em; }
	.jobs li:nth-child(3) { font-size: 1.15em; }

	/* La barre flottante gene sur petit ecran : elle passe en bas, horizontale. */
	.cvoptions {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 0;
		padding: 4px;
	}

	.cvoptions ul {
		flex-direction: row;
		justify-content: center;
		gap: 8px;
	}

	.cvoptions a, .cvoptions button { width: auto; }

	#wrap { margin-bottom: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   12. Impression

   Remplace l'ancien schemes/print.css et rend inutile la dependance a
   pdfmyurl.com : l'export PDF passe par l'impression du navigateur.
   -------------------------------------------------------------------------- */

@media print {
	@page { margin: 15mm; }

	body {
		background: none;
		padding: 0;
		font-size: 10pt;
		line-height: 1.4;
		color: #000;
	}

	#wrap {
		max-width: none;
		padding: 0;
		background: none;
		border-bottom: 0;
	}

	.section {
		grid-template-columns: 1fr;
		margin-top: 18pt;
		break-inside: avoid;
	}

	.largecolumn, .titlecolumn { grid-column: auto; }

	.section > * { padding-top: 8pt; }

	.titlecolumn { border-top: 0; padding-top: 8pt; }

	.myname { font-size: 24pt; letter-spacing: -1px; }
	.sectiontitle { font-size: 16pt; letter-spacing: -0.5px; }

	/* La couleur ne survit pas forcement a l'impression : les intitules
	   repassent en noir plutot que de risquer un gris pale. */
	.jobs li { color: #000 !important; font-size: 11pt; }

	.myphoto, .thumbs, .cvoptions, .skiplink { display: none; }

	/* La barre coloree ne signifie plus rien sur papier : on affiche le libelle. */
	.skillbar { height: auto; border-bottom: 0; }
	.skillbar::before, .skillbarfill { position: static; background: none; width: auto; height: auto; }

	.skillbarfill span {
		position: static;
		width: auto;
		height: auto;
		clip-path: none;
		font-size: 9pt;
		font-style: italic;
	}

	.job, .study { break-inside: avoid; }

	a { color: #000; text-decoration: none; }

	/* Les URL utiles sont explicitees, sauf pour les ancres internes. */
	.simplelist a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
}