@font-face {
    font-family: "Lato";
    url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXg.woff2) format('woff2'),
    font-style: normal;
    font-weight: 400;
}

@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: normal;
  src: local('Lobster'), url('http://themes.googleusercontent.com/static/fonts/lobster/v4/NIaFDq6p6eLpSvtV2DTNDQLUuEpTyoUstqEm5AMlJo4.woff') format('woff');
}

/* Style par défaut */
:root[data-theme="default"] {
  --font-body: 'Lato', sans-serif;
  --font-heading: 'Lobster', sans-serif;
  
  --content-width: 79%;
  --aside-width: 20%;
  --card-display: inline-block;
  --tooltip-display: block;
  --collapsible-border: 1px solid #ccc;
  --skill-display: inline-block;
  --description-block: inline-block;
  --description-width: 80%;
  --experience-border: none;
  --content-display: inline-block;
  --aside-background-color: #333333FF;
  --aside-color: white;
  --logo-display: block;
  --more-display: inline-block;
  --skill-line-display: inline-block;
  --show-icon: block;
  --ats-display: block;
}

:root[data-theme="ats"] {
  --font-body: Arial, sans-serif;
  --font-heading: Arial, sans-serif;
  
  --content-width: 75%;
  --aside-width: 24%;
  --card-display: block;
  --tooltip-display: none;
  --collapsible-border: none;
  --skill-display: inline-block;
  --description-block: block;
  --description-width: 100%;
  --experience-border: 1px solid #CCC;
  --content-display: inline-block;
  --aside-background-color: #FFF;
  --aside-color: black;
  --logo-display: none;
  --more-display: none;
  --skill-line-display: none;
  --show-icon: none;
  --ats-display: none;
}

/* Header */
header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #E0E1D1;
    width: 100%;
    margin: 5px 0;
}

footer {
    background-color: #E0E1D1;
}

.rounded
{
	border-radius: 25px;
	border: 2px solid #80DFFF;
	margin: 2px;
	padding: 0em 1em;
	margin: 5px 0px; 
}

.resume
{
	text-align: left;
}

.years_xp {
	display: flex;
	justify-content: space-around;
}

.xp {
	display: block;
	text-align: center;
}

.me {
    display: inline-block;
    margin: 5px 5px;
}

.main_pos {
	font-size: 10pt;
	font-style: normal;
}

.ats {
  display: var(--ats-display);
}

.sec_pos {
	font-size: 10pt;
	font-style: italic;
}

.header_photo {
    display: inline-block;
    vertical-align: middle;
    width: 70px;
}

#background {
	width: 100%;
}

#mainTitle h1, #mainTitle h3, #mainTitle ul {
    margin: 0;
}

#mainTitle {
   display: inline-block;
   vertical-align: middle;
}

.navigation_menu {
	all: initial;
	display: block;
}

.menu_nav
{
	display: none;
	padding: 16px;
	color: #FFFFFF;
}

.menu_buttons
{
	display: inline-block;
}

.toggler
{
	display: none;
	width: 2.5rem;
	height: 2rem;
	padding: 0.5rem 0.2rem;
	font-size: 1.25rem;
	line-height: 1rem;
	margin: 1.5em 1.5em;
	background-color: #E0E1D1;
}

.toggler span
{
	display: block;
	position: relative;
	height: 3px;
	width: 50%;
	background: #E0E1D1;
	border-radius: 3px;
	opacity: 1;
	left: 25%;
	
}

.toggler .line
{
	background: #000000;
}

.flag {
    vertical-align: middle;
    height: 16px;
}

.buttons {
    display: inline-block;
    vertical-align: middle;
    margin: 5px 5px;
}

header nav {
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    max-width: 50%;
}

nav ul {
    list-style-type: none;
}

header nav li {
    display: inline-block;
    margin-right: 15px;
}

header nav a {
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
}

header nav input{
    font-family: var(--font-body);
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
}

nav input, .menu_nav input {
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 1em;
    color: #3391ff;
    background: transparent;
    text-decoration: underline;
    padding: 0px;
}

nav a:hover{
    color: #760001;
    border-bottom: 3px solid #760001;
}

nav input:hover {
    color: #760001;
    border-bottom: 3px solid #760001;
}

/* Body */
body
{
	font-family: var(--font-body);
	background-color: white;
}

p
{
	font-family: var(--font-body);
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

h2
{
	font-family: var(--font-heading);
	text-align: center;
	color: white;
	border-radius: 5px;
	background-color: #E60068FF;
}

#resume
{
	color: #333333FF;
}

#btn_all
{
	background-color: #D80464FF;
}

.assets 
{
	margin-left: 0.25vw;
	font-size: 1.5vw;
}

.assets h3
{
	font-family:  var(--font-heading);	
}

h4
{
	margin-top: 0.5em;
	margin-bottom: 0;
}

h5, .company_type
{
	margin-top: 0;
	margin-bottom: 0;
	font-weight: normal;
	font-style: italic;
}

em
{
	color: #E60068FF;
}

aside
{
	display: inline-block;
	vertical-align: top;
	text-align: justify;
	color: var(--aside-color);
	background-color: var(--aside-background-color);
	padding-left: 0.3vw;
	padding-right: 0.3vw;
	width: var(--aside-width);
	height: 100%;
}

section
{
	display: inline-block;
	vertical-align: top;
}

button
{
	text-align: left;
	width: 100%;
}

.title
{
	display: none;
	vertical-align: top;
	color: #006194FF;
}


.title ul
{
	margin-top: 5px;
	margin-bottom: 5px;
	list-style-type: none;
}

#top_section {
    display: block;
    justify-content: center;
    text-align: center;
}

#top {
    display: block;
    justify-content: center;
    text-align: center;
}

.scop
{
	display: inline-block;
	margin-top: 20px;
	margin-bottom: 20px;
}

.scop img
{	
	height: 100px;
}

.content
{
	display: var(--content-display);
	vertical-align: top;
	width: var(--content-width);
	min-width: 480px;
}

.experience
{
	border: var(--experience-border);
	margin-top: 1em;
	margin-bottom: 1em;
}

.card
{
	display: var(--card-display);
	vertical-align: top;
	width: 15%;
}

.description
{
	display: var(--description-block);
	vertical-align: top;
	width: var(--description-width);
}
.needs
{
	display: block;
	text-align: left;
}

#complements, #training
{
	width: 100%;
}

i
{
	display: inline-block;
	vertical-align: middle;
}

i.fa, i.fas
{
	display: var(--show-icon);
}

.icon, .name
{
	font-size: 1.5vw;
	font-weight: bold;
	color: var(--aside-color);
	margin-top: 0.25em;
	margin-left: 0.25em;
	margin-right: 0.25em;
}

.icon_text
{
	display: inline-block;
	vertical-align: top;
	font-size: 1em;
	margin-top: 0;
	margin-bottom: 0;
}

.skill_line
{
  width: 100%;
  margin: 5px 0px;
}

.skill_line .rate
{
	display: var(--skill-line-display);
	margin: 0px 0;
	white-space: nowrap;
}

.skill_line .rate i {
  display: inline;
}

.skill_line p
{
	margin: 0 0 0 0;
	font-size: 1vw;
}

.icon a
{
	color: color: var(--aside-color);;
}

.logo
{
	display: var(--logo-display);
	width: 80%;
}

.photo
{
	display: none;
	margin-top: 15px;
	margin-bottom: 15px;
	left: 25%;
	width: 50%;
	position: relative;
}

.infos
{
	float: right;
}

.skill
{
	display: var(--skill-display);
	vertical-align: middle;
	top: 15px;
	width: 20%;
	margin: 2px;
}

.skill img
{
	transform: translate(0%, -25%);
	vertical-align: middle;
	max-width: 100%;
	max-height: 100%;
}

.ats-rate
{
	font-size: 1vw;
	display: block;
	vertical-align: middle;
}

.rate
{
	font-size: 2.2vw;
	color: orange;
	display: inline-block;
	vertical-align: middle;
}

.row
{
	display: inline-block;
}

.overlay-button
{
	position: absolute;
	bottom: -5px;
    left: 40px;
}

.collapsible
{
	background-color: white;
	color: black;
	cursor: pointer;
	border: var(--collapsible-border);
}

.active, .collapsible:hover
{
	background-color: #CCC;
}

/*
.collapsible:after
{
	content: '\02795';
	color: white;
	font-size: 13px;
	float: right top;
	margin-left: 5px;
}

.activate:after
{
	content: "\2796";
}
*/
.full
{
	display: none;
	background-color: #F1F1F1FF;
}

.abstract
{
	display: block;
	margin: 2px 0px;
}

.abstract .task
{
	display: none;
}

.iut .logo, #apmfs .logo
{
	height: 50px;
	width: 50px;
}

.btn
{
	border: 0;
}

.dropbtn
{
	background-color: #E60068FF;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
}

/* drop-content position*/
.dropdown
{
	display: inline-block;
	vertical-align: middle;
}

.dropdown-content
{
	display: none;
	position: absolute;
	background-color: #F7F7F7FF;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

/* Links */
.dropdown-content a, button
{
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover, .dropdown-content button:hover
{
	background-color: #F1F1F1FF;
}

.dropdown:hover .dropdown-content
{
	display: block;
}

.dropdown:hover .dropbtn
{
	background-color: #D80464FF;
}


#customSearch
{
	box-sizing: border-box;
	background-image: url('searchicon.png');
	background-position: 14px 12px;
	background-repeat: no-repeat;
	font-size: 16px;
	padding: 14px 20px 12px 45px;
	border: none;
	border-bottom: 1px solid #DDD;
}

/* search field when it gets focus */
#customSearch:focus
{
	outline: 3px solid #DDD;
}

.show
{
	display: block;
}

/* Tooltips */
.tooltip
{
	position: relative;
	display: inline-block;
}

.tooltip-text {
    visibility: hidden;
    width: 140px;
    background-color: #2c3e50;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 10;
    bottom: 125%; /* Position au-dessus de l'icône */
    left: 50%;
    margin-left: -70px; /* Centrage horizontal */
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Flèche du tooltip */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #2c3e50 transparent transparent transparent;
}

/* Afficher le tooltip au survol */
.skill-icon-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltiptext
{
	display: var(--tooltip-display);
	visibility: hidden;
	width: 8vw;
	background-color: black;
	color: #FFF;
	text-align: center;
	padding: 5px 0;
	margin: 5px 0;
	border-radius: 6px;

	position: absolute;
	vertical-align: middle;
	top: 15px;
	left: -12vw;
	z-index: 1;
}

.tooltip .tooltiptext_wide
{
	display: var(--tooltip-display);
	visibility: hidden;
	width: 16vw;
	background-color: black;
	color: #FFF;
	text-align: center;
	padding: 5px 0;
	margin: 5px 0;
	border-radius: 6px;

	position: absolute;
	vertical-align: middle;
	top: 15px;
	left: -20vw;
	z-index: 1;
}

.tooltip:hover .tooltiptext, .tooltip:hover .tooltiptext_wide
{
	visibility: visible;
}

.abstract ul
{
	font-family: var(--font-body);
	list-style-type: none;
}

.abstract li
{
	padding: 2px 0px;
}

.company {
    display: block;
}

.more {
    display: var(--more-display);
    vertical-align: top;
    float: right;
}

.less {
    display: none;
    vertical-align: top;
    float: right;
}

.deanonymize, .normal {
    display: none;
}

.ski {
    width: 95.5%;
}

.task, .env {
    display: flex;
    justify-content: center;
    font-weight: bold;
}

.task:before, .env:before,
.task:after, .env:after {
	content: "";
	flex: 1 1;
	border-bottom: 2px solid #000;
	margin: auto 10px auto 10px;
}

hr.hline {
    border-top: 1px solid black;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px;
    justify-items: center;
}

.skill-icon-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skill-icon {
    width: 45px;
    height: 45px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.skill-icon:hover {
    transform: scale(1.1);
}

.skills-section {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    line-height: 1.3;
    color: var(--aside-color);
    page-break-inside: avoid; /* Empêche la coupure de page */
    margin-bottom: 20px;
}
.skills-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--aside-color);
    border-bottom: 2px solid #FFF;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.skills-category {
    font-weight: bold;
    color: var(--aside-color);
    margin-top: 8px;
    margin-bottom: 3px;
}
.skills-list {
    margin: 0;
    padding-left: 15px;
}
.skills-item {
    margin-bottom: 5px;
}
.languages {
    font-style: italic;
    color: #FFF;
}

@media (max-width: 850px) {

	
	.navigation_menu
	{
		display: none;
		position: absolute;
		top: 10%;
		right: 15%;
		background-color: #E60068FF;
	}
	
	.menu_nav
	{
		display: none;
	}
	
	.menu_buttons
	{
		display: block;
	}
	
	.menu_buttons .dropdown
	{
		display: block;
	}

	.buttons
	{
		display: none;
	}
	
	.toggler{
		display: inline-block;
	}
	
}

@media (max-width: 640px) {
        header nav {
	    display: none;
	}

	.content
	{
		display: block;
		vertical-align: top;
		width: 100%;
	}
	
	.menu_nav
	{
		display: block;
	}
	
	aside
	{
		width: 100%;
		height: 100%;
	}
	
	.icon
	{
		font-size: 1em;
	
	}
	
	.info_asset .info
	{
		width: 66%;
	}
	
	.info_asset .assets
	{
		width: 33%;
	}
	
	.info, .assets
	{
		display: inline-block;
		width: 100%;
	}
	
	.asset_line
	{
		display: inline-block;
		width: 100%;
	}
	
	.tooltip .tooltiptext
	{
		display: block;
		top: -10vh;
		left: 0;
	}
	
	.tooltip .tooltiptext_wide
	{
		display: block;
		top: -10vh;
		left: 0;
	}
	
	.skill_line
	{
		display: inline-block;
		margin: 5px 5px;
	}
	
	#empty
	{
		display: none;
	}
	
	.assets p, h3
	{
		font-size: 1.5em;
	}
	
	.assets h3
	{
		text-align: center;
	}
}