/* Concepteur : Josselin Fatah-Roux */
/* Thème Windows 98 */

@font-face {
	font-family: "Tahoma Fallback";
	src: local("Tahoma"), local("Segoe UI"), local("Verdana");
}

* {
	box-sizing: border-box;
}

html, body {
	min-height: 100%;
}

body{
	margin: 0;
	padding: 40px 20px 110px 20px;
	color: #000000;
	background-color: #008080;
	background-image:
		repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 4px);
	min-height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	font-family: "Tahoma", "MS Sans Serif", "Segoe UI", sans-serif;
}

a{
	color: #0000EE;
	text-decoration: underline;
}

a:visited{
	color: #551A8B;
}

li{
	margin-top: 10px;
}

li:first-child{
	margin-top: 0px;
}

.nopuce{
	list-style-type: none;
}

.linopucespace{
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.sublist{
	margin-top: 10px;
}

/* ===== Fenêtre Windows 98 ===== */

.win98-window{
	width: 970px;
	max-width: 100%;
	margin-bottom: -35px;
	background-color: #C0C0C0;
	border-radius: 0;
	padding: 3px;
	border: 2px solid;
	border-color: #ffffff #000000 #000000 #ffffff;
	box-shadow:
		inset -1px -1px 0 #808080,
		inset 1px 1px 0 #dfdfdf,
		4px 4px 0 rgba(0,0,0,0.35);
}

.win98-titlebar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 26px;
	padding: 2px 3px 2px 4px;
	background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
	color: #ffffff;
	font-family: "Tahoma", "MS Sans Serif", sans-serif;
	font-weight: bold;
	font-size: 13px;
	letter-spacing: 0.2px;
	user-select: none;
}

.win98-titlebar-left{
	display: flex;
	align-items: center;
	gap: 5px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.win98-icon{
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	background: #C0C0C0;
	border: 1px solid #000000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: #000080;
	font-weight: bold;
}

.win98-titlebar-buttons{
	display: flex;
	gap: 2px;
	flex: 0 0 auto;
}

.win98-btn{
	width: 18px;
	height: 16px;
	background-color: #C0C0C0;
	border: 1px solid;
	border-color: #ffffff #000000 #000000 #ffffff;
	box-shadow:
		inset -1px -1px 0 #808080,
		inset 1px 1px 0 #dfdfdf;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	line-height: 1;
	color: #000000;
	font-family: "Marlett", "Tahoma", sans-serif;
	font-weight: bold;
	padding-bottom: 2px;
}

.win98-menubar{
	display: flex;
	gap: 14px;
	padding: 3px 8px;
	background-color: #C0C0C0;
	font-size: 12px;
	border-bottom: 1px solid #808080;
}

.win98-menubar span{
	padding: 1px 2px;
}

.win98-menubar span:hover{
	background-color: #000080;
	color: #ffffff;
}

.win98-content{
	background-color: #ffffff;
	border: 2px solid;
	border-color: #808080 #ffffff #ffffff #808080;
	box-shadow:
		inset -1px -1px 0 #dfdfdf,
		inset 1px 1px 0 #000000;
	margin: 3px;
	padding: 0;
	overflow: hidden;
}

.win98-statusbar{
	display: flex;
	gap: 6px;
	padding: 3px 6px;
	font-size: 11px;
	background-color: #C0C0C0;
}

.win98-statusbar span{
	flex: 1;
	padding: 2px 6px;
	background-color: #C0C0C0;
	border: 1px solid;
	border-color: #808080 #ffffff #ffffff #808080;
	box-shadow:
		inset -1px -1px 0 #dfdfdf,
		inset 1px 1px 0 #000000;
}

.win98-statusbar span.grow{
	flex: 3;
}

/* ===== Contenu du CV ===== */

.page{
	width: 930px;
	max-width: 100%;
	margin: auto;
	padding: 14px 18px;
	font-size: 16px;
	font-family: "Times New Roman", serif;
	color: #000000;
	background-color: #ffffff;
}

.infoetphoto{
	height: 165px;
	margin-bottom: 3px;
	padding: 1px 0;
	overflow: hidden;
}

.info{
	float: left;
}

.photo{
	padding-top: 12px;
	float: right;
}

.photo img{
	border: 2px solid;
	border-color: #808080 #ffffff #ffffff #808080;
	box-shadow:
		inset -1px -1px 0 #dfdfdf,
		inset 1px 1px 0 #000000;
	padding: 3px;
	background: #C0C0C0;
}

.titre{
	width: 100%;
	text-align: center;
	margin-top: -13px;
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: bold;
	color: #000080;
}

.sect{
	background-color: #C0C0C0;
	margin-top: 12px;
	margin-bottom: 8px;
	padding: 3px 8px;
	font-size: 15px;
	font-family: "Tahoma", "MS Sans Serif", sans-serif;
	font-weight: bold;
	color: #000080;
	border: 1px solid;
	border-color: #ffffff #000000 #000000 #ffffff;
	box-shadow:
		inset -1px -1px 0 #808080,
		inset 1px 1px 0 #dfdfdf;
}

.sect p{
	margin: 3px 0;
}

.formatexte{
	text-align: justify;
	margin-top: 3px;
	margin-bottom: 3px;
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphenate-limit-chars: 6 3 3;
}

.formatexte ul{
	padding-left: 30px;
	margin-left: 0;
}

/* ===== Barre des tâches ===== */

.win98-taskbar{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 34px;
	background-color: #C0C0C0;
	border-top: 2px solid;
	border-color: #ffffff #000000 #000000 #ffffff;
	box-shadow: inset 1px 1px 0 #dfdfdf;
	display: flex;
	align-items: center;
	padding: 3px 4px;
	gap: 6px;
	font-family: "Tahoma", "MS Sans Serif", sans-serif;
	font-size: 12px;
	z-index: 10;
}

.win98-start{
	display: flex;
	align-items: center;
	gap: 4px;
	height: 26px;
	padding: 0 8px;
	background-color: #C0C0C0;
	border: 1px solid;
	border-color: #ffffff #000000 #000000 #ffffff;
	box-shadow:
		inset -1px -1px 0 #808080,
		inset 1px 1px 0 #dfdfdf;
	font-weight: bold;
}

.win98-start-logo{
	width: 16px;
	height: 16px;
	background: conic-gradient(#ff0000 0 90deg, #00aa00 90deg 180deg, #0000ff 180deg 270deg, #ffcc00 270deg 360deg);
	display: inline-block;
	border: 1px solid #000000;
}

.win98-taskbar-sep{
	width: 2px;
	height: 26px;
	border-left: 1px solid #808080;
	border-right: 1px solid #ffffff;
}

.win98-taskbar-item{
	height: 26px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 8px;
	background-color: #C0C0C0;
	border: 1px solid;
	border-color: #ffffff #808080 #808080 #ffffff;
	box-shadow:
		inset -1px -1px 0 #808080,
		inset 1px 1px 0 #dfdfdf;
	font-size: 11px;
	white-space: nowrap;
}

.win98-taskbar-item.active{
	border-color: #808080 #ffffff #ffffff #808080;
	box-shadow:
		inset -1px -1px 0 #dfdfdf,
		inset 1px 1px 0 #000000;
	font-weight: bold;
}

.win98-tray{
	margin-left: auto;
	height: 26px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 8px;
	background-color: #C0C0C0;
	border: 1px solid;
	border-color: #808080 #ffffff #ffffff #808080;
	box-shadow:
		inset -1px -1px 0 #dfdfdf,
		inset 1px 1px 0 #000000;
}

.win98-tray svg{
	width: 16px;
	height: 16px;
}

.win98-clock{
	height: 26px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	background-color: #C0C0C0;
	border: 1px solid;
	border-color: #808080 #ffffff #ffffff #808080;
	box-shadow:
		inset -1px -1px 0 #dfdfdf,
		inset 1px 1px 0 #000000;
}

@media (max-width: 960px){
	.win98-window{ width: 100%; }
	.infoetphoto{ height: auto; }
	.photo, .info{ float: none; }
	.photo{ margin-top: 10px; }
}

/* ===== Icônes de bureau ===== */

.desktop-icon{
	position: fixed;
	width: 74px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-family: "Tahoma", "MS Sans Serif", sans-serif;
	font-size: 11px;
	color: #ffffff;
	text-shadow: 1px 1px 1px #000000;
	text-align: center;
	user-select: none;
	z-index: 1;
}

.desktop-icon svg{
	width: 32px;
	height: 32px;
	filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
}

.desktop-icon span{
	line-height: 1.15;
}

.icon-1{ top: 60px; left: 140px; }
.icon-2{ top: 260px; left: 170px; }
.icon-3{ top: 440px; left: 130px; }
.icon-4{ top: 55px; right: 150px; }
.icon-5{ top: 230px; right: 190px; }
.icon-6{ top: 400px; right: 135px; }
.icon-7{ bottom: 130px; left: 220px; }
.icon-8{ bottom: 80px; right: 225px; }

/* ===== Mini fenêtre Téléchargement ===== */

.mini-download{
	position: fixed;
	top: 530px;
	left: 150px;
	width: 220px;
	z-index: 2;
	background-color: #C0C0C0;
	border: 2px solid;
	border-color: #ffffff #000000 #000000 #ffffff;
	box-shadow:
		inset -1px -1px 0 #808080,
		inset 1px 1px 0 #dfdfdf,
		4px 4px 0 rgba(0,0,0,0.3);
	padding: 3px;
	font-family: "Tahoma", "MS Sans Serif", sans-serif;
}

.mini-download-titlebar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 20px;
	padding: 2px 3px;
	background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
	color: #ffffff;
	font-size: 11px;
	font-weight: bold;
}

.mini-download-titlebar .win98-btn{
	width: 14px;
	height: 12px;
	font-size: 9px;
}

.mini-download-body{
	padding: 8px 8px 6px 8px;
}

.mini-download-row{
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

.mini-download-row svg{
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
}

.mini-download-filename{
	font-size: 11px;
	font-weight: bold;
}

.mini-download-sub{
	font-size: 10px;
	color: #333333;
}

.mini-progress{
	width: 100%;
	height: 14px;
	background-color: #ffffff;
	border: 1px solid;
	border-color: #808080 #ffffff #ffffff #808080;
	box-shadow:
		inset -1px -1px 0 #dfdfdf,
		inset 1px 1px 0 #000000;
	margin-bottom: 8px;
	overflow: hidden;
	display: flex;
	gap: 2px;
	padding: 1px;
}

.mini-progress-fill{
	height: 100%;
	background: repeating-linear-gradient(90deg, #0a3f8f 0 6px, #1560c4 6px 8px);
}

.mini-download-buttons{
	display: flex;
	justify-content: center;
}

.mini-btn{
	font-size: 11px;
	padding: 2px 14px;
	background-color: #C0C0C0;
	border: 1px solid;
	border-color: #ffffff #000000 #000000 #ffffff;
	box-shadow:
		inset -1px -1px 0 #808080,
		inset 1px 1px 0 #dfdfdf;
}

/* ===== Mini fenêtre Date et heure ===== */

.mini-clock{
	position: fixed;
	top: 220px;
	right: 300px;
	width: 165px;
	z-index: 2;
	background-color: #C0C0C0;
	border: 2px solid;
	border-color: #ffffff #000000 #000000 #ffffff;
	box-shadow:
		inset -1px -1px 0 #808080,
		inset 1px 1px 0 #dfdfdf,
		4px 4px 0 rgba(0,0,0,0.3);
	padding: 3px;
	font-family: "Tahoma", "MS Sans Serif", sans-serif;
}

.mini-clock-titlebar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 20px;
	padding: 2px 3px;
	background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
	color: #ffffff;
	font-size: 11px;
	font-weight: bold;
}

.mini-clock-titlebar .win98-btn{
	width: 14px;
	height: 12px;
	font-size: 9px;
}

.mini-clock-body{
	padding: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mini-clock-face{
	width: 70px;
	height: 70px;
	margin-bottom: 6px;
}

.mini-clock-date{
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}

.mini-clock-day{
	font-size: 10px;
	color: #333333;
	margin-bottom: 4px;
}

/* ===== Clippy ===== */

.clippy-wrap{
	position: fixed;
	top: 330px;
	left: 250px;
	width: 200px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-family: "Tahoma", "MS Sans Serif", sans-serif;
}

.clippy-bubble{
	position: relative;
	background-color: #ffffe1;
	border: 1px solid #000000;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 11px;
	color: #000000;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.35);
	margin-bottom: 6px;
	margin-left: 30px;
}

.clippy-bubble::after,
.clippy-bubble::before{
	content: "";
	position: absolute;
	bottom: -9px;
	left: 24px;
	border-style: solid;
	border-width: 9px 6px 0 0;
}

.clippy-bubble::before{
	border-color: #000000 transparent transparent transparent;
	bottom: -10px;
}

.clippy-bubble::after{
	border-color: #ffffe1 transparent transparent transparent;
}

.clippy-figure{
	width: 46px;
	height: 66px;
}

/* ===== Effet CRT ===== */

.crt-overlay{
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 40;
	background:
		repeating-linear-gradient(
			rgba(0,0,0,0) 0px,
			rgba(0,0,0,0) 1px,
			rgba(0,0,0,0.05) 2px,
			rgba(0,0,0,0) 3px
		),
		radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.22) 100%);
}

/* ===== Curseur figé ===== */

.frozen-cursor{
	position: fixed;
	z-index: 41;
	pointer-events: none;
	width: 20px;
	height: 20px;
	filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
}

/* ===== Police écran cathodique pour les éléments d'interface ===== */

.win98-titlebar,
.win98-menubar,
.win98-statusbar,
.win98-taskbar,
.mini-game-titlebar,
.mini-game-panel,
.mini-solitaire-titlebar,
.mini-download-titlebar,
.mini-download-body,
.mini-clock-titlebar,
.mini-clock-body,
.win98-start,
.desktop-icon span,
.sect{
	-webkit-font-smoothing: none;
	font-smoothing: none;
	text-rendering: optimizeSpeed;
}

/* ===== Mini fenêtre Démineur ===== */

.mini-game{
	position: fixed;
	top: 60px;
	left: calc(50% - 713px);
	width: 208px;
	z-index: 2;
	background-color: #C0C0C0;
	border: 2px solid;
	border-color: #ffffff #000000 #000000 #ffffff;
	box-shadow:
		inset -1px -1px 0 #808080,
		inset 1px 1px 0 #dfdfdf,
		4px 4px 0 rgba(0,0,0,0.3);
	padding: 3px;
	font-family: "Tahoma", "MS Sans Serif", sans-serif;
}

.mini-game-titlebar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 20px;
	padding: 2px 3px;
	background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
	color: #ffffff;
	font-size: 11px;
	font-weight: bold;
}

.mini-game-titlebar .win98-btn{
	width: 14px;
	height: 12px;
	font-size: 9px;
}

.mini-game-panel{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 5px 4px;
	padding: 4px 6px;
	background-color: #C0C0C0;
	border: 2px solid;
	border-color: #808080 #ffffff #ffffff #808080;
	box-shadow:
		inset -1px -1px 0 #dfdfdf,
		inset 1px 1px 0 #000000;
}

.mini-led{
	background-color: #000000;
	color: #ff0000;
	font-family: "Consolas", "Courier New", monospace;
	font-size: 15px;
	font-weight: bold;
	padding: 1px 3px;
	letter-spacing: 1px;
	border: 1px solid;
	border-color: #000000 #808080 #808080 #000000;
	min-width: 32px;
	text-align: right;
}

.mini-smiley{
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #ffe14d;
	border: 1px solid #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
}

.mini-grid{
	display: grid;
	grid-template-columns: repeat(8, 16px);
	grid-auto-rows: 16px;
	gap: 0;
	margin: 0 4px 4px 4px;
	border: 2px solid;
	border-color: #808080 #ffffff #ffffff #808080;
	box-shadow:
		inset -1px -1px 0 #dfdfdf,
		inset 1px 1px 0 #000000;
}

.m-cell{
	width: 16px;
	height: 16px;
	background-color: #C0C0C0;
	border: 1px solid;
	border-color: #ffffff #808080 #808080 #ffffff;
	box-shadow:
		inset -1px -1px 0 #808080,
		inset 1px 1px 0 #dfdfdf;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: bold;
}

.m-cell.rev{
	border: 1px solid #808080;
	box-shadow: none;
}

.m-cell.n1{ color: #0000ff; }
.m-cell.n2{ color: #008000; }
.m-cell.n3{ color: #ff0000; }

.m-cell.flag{ position: relative; }
.m-cell.flag::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 7px;
	border-color: transparent transparent transparent #ff0000;
}

/* ===== Mini fenêtre Solitaire ===== */

.mini-solitaire{
	position: fixed;
	bottom: 200px;
	right: calc(50% - 780px);
	width: 230px;
	z-index: 2;
	background-color: #C0C0C0;
	border: 2px solid;
	border-color: #ffffff #000000 #000000 #ffffff;
	box-shadow:
		inset -1px -1px 0 #808080,
		inset 1px 1px 0 #dfdfdf,
		4px 4px 0 rgba(0,0,0,0.3);
	padding: 3px;
	font-family: "Tahoma", "MS Sans Serif", sans-serif;
}

.mini-solitaire-titlebar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 20px;
	padding: 2px 3px;
	background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
	color: #ffffff;
	font-size: 11px;
	font-weight: bold;
}

.mini-solitaire-titlebar .win98-btn{
	width: 14px;
	height: 12px;
	font-size: 9px;
}

.mini-solitaire-felt{
	margin-top: 4px;
	padding: 6px 6px 10px 6px;
	background-color: #007700;
	border: 2px solid;
	border-color: #808080 #ffffff #ffffff #808080;
}

.solitaire-top-row{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 14px;
}

.solitaire-top-row .card-slot-group{
	display: flex;
	gap: 4px;
}

.card{
	width: 24px;
	height: 34px;
	border-radius: 2px;
	border: 1px solid #000000;
	background-color: #ffffff;
	font-size: 9px;
	font-weight: bold;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 1px 0 0 2px;
	line-height: 1;
	box-shadow: 1px 1px 0 rgba(0,0,0,0.35);
}

.card.back{
	background-image: repeating-linear-gradient(45deg, #0a3f8f 0 3px, #1560c4 3px 6px);
}

.card.red{ color: #d40000; }
.card.black{ color: #000000; }

.card-empty{
	width: 24px;
	height: 34px;
	border-radius: 2px;
	border: 1px solid #005500;
	background-color: transparent;
}

.solitaire-tableau{
	display: flex;
	gap: 6px;
}

.tableau-col{
	display: flex;
	flex-direction: column;
	width: 24px;
}

.tableau-col .card{
	margin-top: -24px;
}

.tableau-col .card:first-child{
	margin-top: 0;
}


/* ===== Disparition du décor sur écrans étroits =====
   Ces règles doivent rester en toute fin de fichier : à spécificité égale,
   c'est l'ordre d'apparition qui décide en CSS, donc "display: none" doit
   être déclaré APRÈS le "display: flex/grid" par défaut de chaque élément
   pour avoir le dernier mot.

   Seuils :
   - Icônes de bureau : cachées en dessous de 1600px.
   - Téléchargement de fichier, Date et heure, Clippy, Démineur, Solitaire
     (fenêtres flottantes ET leur onglet dans la barre des tâches) : cachés
     en dessous de 1920px, visibles au-dessus.
   - Barre des tâches entière : cachée en dessous de 1024px. */

@media (max-width: 1600px){
	.desktop-icon{
		display: none;
	}
}

@media (max-width: 1920px){
	.mini-download,
	.mini-clock,
	.clippy-wrap,
	.mini-game,
	.mini-solitaire,
	.win98-taskbar-extra{
		display: none;
	}
}

@media (max-width: 1024px){
	.win98-taskbar{
		display: none;
	}
}