/*import de difféentes polices d'écriture*/

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
	font-family: 'NintendoFont';
	src: url(../polices/Nintendo-DS-BIOS.ttf);
}

/* créations de varibles qui seront utilisées tout au long de ce fichier CSS*/

:root {

	--widthSidebar: 20vw;
	--widthContent: 55vw;

    
	--colorBackground: #020605;
	--colorText: #cacaca;
	--colorLink: #9a7e3d;

	
	--colorPrimary: #a67f40;
	--colorSecondary: #f99b36;
	--colorTertiary: #24211c;

	
	--colorBorder: #f2ead4;


	--colorBackgroundMain: #151515;

	
	--fontText: 'Courier Prime', normal;
	--fontTitle: 'NintendoFont';

	
	--borderSolid: 1px solid #f2ead4;
	--borderDotted: 1px dotted #f2ead4;
	--borderTree: 1px solid #f2ead4;
	

	--imageBackground: linear-gradient(to bottom, rgb(25, 25, 25), rgb(0, 0, 0));
    
}


/*styles des différents éléments*/

body {
    display: flex;
	flex-flow: column;
    justify-content: space-between;
	margin: 0;
	height: 100vh;
    background-color: var(--colorBackground);
    color: var(--colorText);
    font-family: var(--fontText);
    background-image: var(--imageBackground);
    background-size: cover;
    background-attachment: fixed;
}

main {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
}

main > .sidebar {
	flex: 2 2 10em;
	max-width: calc(var(--widthSidebar) + 2em);
	padding: 1em;
}

.sidebar > .widget {
	display: flex;
	flex-flow: column;
	padding: 8px 0;
	border-bottom: var(--borderDotted);
}

main > .content {
	display: flex;
	flex-flow: row wrap;
	flex: 1 1 20em;
	max-width: var(--widthContent);
	padding: 3em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fontTitle);
	word-wrap: break-word;
}

p {
	font-family: var(--fontText);
}

b {
	color: var(--colorSecondary);
}

a {
	color: var(--colorLink);
}

section {
	border: 15px solid transparent;
	border-image-source: url('../images/cadre.png');
	border-image-slice: 20;
	border-image-repeat: round;
	background-color: var(--colorBackgroundMain);
	color: var(--colorText);
	padding: 1em;
	margin: 0 1em 2em 1em;
	width: 100%;
}

.arrow-list > li {
	padding: 0.2em 0;
	border-bottom: 1px solid var(--colorTertiary);
	list-style-position: outside;
}

 .arrow-list > li::marker {
	content: '↳';
	font-family: sans-serif;
}

.small_img {
	width: 40%;
	height: auto;
}



/* tentative lightbox pour les images*/

.lightbox {
    display: none; /* Cachée par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(2, 6, 5, 0.95); /* Ton noir de fond avec transparence */
    z-index: 9999;
    
    /* Préparation pour centrer le contenu quand elle sera affichée */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.lightbox:target {
    display: flex; /* On remplace 'none' par 'flex' pour l'afficher ! */
}

.lightbox img {
    max-width: 90vw;
    max-height: 80vh;
    border: 2px solid var(--colorBorder);
    border-radius: 5px;
}

.bouton-fermer {
    position: absolute;
    top: 30px;
    right: 40px;
    padding: 10px 20px;
    background-color: var(--colorBackgroundMain);
    color: var(--colorText);
    border: 2px solid var(--colorBorder);
    font-family: var(--fontText);
    font-size: 1.2rem;
    text-decoration: none; /* Enlève le soulignement moche du lien */
    border-radius: 5px;
    transition: all 0.3s ease;
}