/*GENERAL*/
/*
@font-face {
    font-family		: 'Viga-Regular';
    src				: url('polices//Viga-Regular.otf');
}
@font-face {
    font-family		: 'CaviarDreams';
    src				: url('polices/Caviar-Dreams/CaviarDreams.ttf');
}
@font-face {
    font-family		: 'LobsterTwo-Regular';
    src				: url('polices/Lobster-two/LobsterTwo-Regular.otf');
}
*/
@font-face {
    font-family		: 'Roboto';
    src				: url('polices/Roboto/Roboto-VariableFont_wdth,wght.ttf');
}

/* ---GITHUB site--- */

body{
	font-family	: "CaviarDreams", Arial, Verdana, sans-serif;
	margin		: 0;
	position 	: relative;
	min-height	: 100vh;
}

main{
	margin 			: 0;
	padding-top 	: 3rem;
	padding-bottom 	: 10rem;
}


/* ---Footer--- */

footer{
	text-align	: center;
	position	: absolute;
	bottom		: 0;
	width		: 100%;
	margin		: 0;
	padding		: 0;
}

hr{
	width : 30rem;
}

@media screen and (max-width: 625px){
	hr{
		width : 20rem;
	}
}

/* ---Header menu--- */

#menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333;
    z-index: 1000; /* Pour qu'il reste au-dessus du contenu */
}

#menu li {
    flex: 1 1 0; /* Les éléments ne s'étirent pas */
}

#menu a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: background-color 0.3s;
}

#menu a:hover {
    background-color: #555;
}

/* Change the link color to #111 (black) on hover */
/*
li a:hover {
  background-color: #111;
}
*/

@media screen and (max-width: 625px)
{
	#menu{
		position		: static;
		width 			: 100%;
		display 		: flex;
		flex-direction	: column;
		justify-content	: space-around;
	}
}


/* ---Main Content--- */

#BilletsWindows{
	display		: flex;
    flex-wrap	: wrap;
}

.billet{
	margin			: 3rem;
	margin-bottom 	: 1rem;
	padding			: 1rem;
	background 		: white;
	border-radius	: 7px;
	box-shadow		: 0px 4px 100px;
	max-width		: 340px;
}

@media screen and (max-width: 625px)
{
	#BilletsWindows{
		display			: flex;
		flex-direction	: column;
		flex-wrap		: wrap;
	}
	
	.billet{
		margin			: 0;
		margin-bottom	: 4rem;
		border-radius	: 0;
		box-shadow		: 0px 0px 0px;
	}
}


/* ---Home--- */

#homepage{
	display			: flex;
	justify-content	: center;
    align-items		: center;
}

#MyNameTitlte{
	text-align: center
}

#myName{
	font-size 	: 2rem;
	font-weight	: bold;
}


/* ---Tutos robots--- */

#TutoRobot{
	border-radius	: 7px;
	margin 			: 6rem;
	margin-top 		: 5rem;
	padding 		: 3rem;
	box-shadow		: 0px 4px 100px;
}

.pointTechno{
	background		: #F0E68C;
	border-radius	: 10px;
	box-shadow		: 6px 6px 6px grey;
	padding			: 12px;
    margin			: 40px;
}

@media screen and (max-width: 625px)
{
	#TutoRobot{
		border-radius	: 0;
		margin 			: 0;
		padding : 1rem;
		box-shadow		: 0px 0px 0px;
	}
	
	.pointTechno{
		box-shadow		: 6px 6px 6px grey;
		padding			: 1rem;
		margin			: 1rem;
	}
}

/* ---CV--- */

.bandeau_CV{
	/*background		: #F0E68C;*/
	background : #FDF5E6;
	border-radius	: 10px;
	box-shadow		: 6px 6px 20px grey;
	padding			: 12px;
    margin			: 40px;
}
/*
.project {
	margin-bottom: 40px;
	border-left: 4px solid #007bff;
	padding-left: 20px;
}
*/
.project-title {
	font-size: 24px;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 10px;
}

.project-meta {
	color: #666;
	font-size: 14px;
	margin-bottom: 5px;
}

.project-tech {
	color: #007bff;
	font-weight: 500;
	margin-bottom: 10px;
}

.project-description {
	margin-top: 15px;
	text-align: justify;
}

/* Appliquez flex UNIQUEMENT à la galerie */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 10px; /* Espacement après la galerie */
}

.project-description p {
	margin-bottom: 10px;
}

/* Buttons */

/* Pousser le sélecteur de langue à droite */
.language-switcher {
    /*margin-left: auto;*/
	flex: 0 0 auto; /* Ne grandit pas, taille automatique */
    display: flex;
    gap: 5px;
    padding: 8px 16px;
}

.lang-btn {
    background: transparent;
    border: 1px solid white;
    color: white;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lang-btn.active {
    background: white;
    color: #333;
}

/* Classe pour cacher les éléments */
.hidden {
	display: none;
}

.lang-content {
    display: inline;
}

.lang-content.hidden {
    display: none !important;
}