@font-face {
	font-family: 'Pacifico';
	font-style: normal;
	font-weight: 400;
	src: url('/asset/font/Pacifico/Pacifico-Regular.ttf');
}
/*@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');*/

:root {
    --noir: #333333;
	--header: #005a9c;	/* couleur pour l'entete et le footer */
	--nav : #033d66;	/* couleur de la barre de navigation */
    --bleu-ombrager: #678fac;
    --blanc: #FFFFFF;
    --tBlanc: rgba(255, 255, 255, 0.8);
    --hauteurMenu : 2.5rem;
	--titre1: #033d66;
	--titre2: #005a9c;
	--titre3: #0984db;
	--titre4: #7070c5;
	box-sizing: border-box;
	
}

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

html {
    font-size: 100%; /* 16px = 1rem*/
    /*font-size: 62.5%;   /* 10px = 1 rem */
}

/*img {
    max-width: 100%;
    height: auto;
}*/

img {
	max-width: 100%; /* les images seront limitées à la largeur de leur parent */
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: var(--noir);
    font-size: 1rem;
}

/*********************************************************
*          Entête
**********************************************************/
header
{
    position: fixed;
	top: 0;
	display: flex;
	flex-direction: column;
	background-color: var(--header);
	height: 7.5rem;
	width: 100%;
}

header div#presentation
{
	display: flex;
	width:100%;
	align-items: center;
	justify-content: center;
	background-color:var(--bleu);
	margin: 0 auto;
	height: 5rem;
	/*line-height: 4rem;*/
}

header img
{
	height: 3.75rem;
	width: 3.75rem;
	border-radius: 50%;
}

header h1
{
	color: #fff;
	font-family: 'Pacifico', Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1.8rem;
	font-weight: normal;
	flex-shrink: 0;
	margin: 0 1.25rem;
}

.icone
{
	color: rgb(172, 179, 240);
	font-size: 50px;
}

/******************************************
*        Menu 
*******************************************/
#menu {
	background-color: var(--nav);
	width: 100%;
	font-size: 0.8rem;
	align-self: center;
	/*height: var(--hauteurMenu);*/
	/*position: relative;*/
}
nav #navToggle {
    display: none;
}
nav #navToggle ~ label {
    color: white;
    font-size: 1.8rem;
	display:none;
}
#menu ul {
	display: flex;
	list-style-type: none;
	color: beige;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
	margin: 0;
	padding: 0;
	height: 2.5rem;
	list-style-type: none;
	position: relative;
}

#menu li {
	margin: 0 0.3rem;
}

#menu li a{
	color: var(--blanc);
	text-decoration-line: none;
	display: inline-block;
	padding: 0.6rem;
}

#menu li:hover {
	background-color: var(--bleu-ombrager);
}

#menu li:hover .sousMenu{
	display: block;
}

#menu .sousMenu {
	margin: 0;
	padding: 0;
	display: none;
	color: black;
	background-color: #005a9c;
	position: absolute;
	top: var(--hauteurMenu);
	z-index: 10;
	/*align-items: start;*/
	height: auto;
	border: 1px black solid;
}

#menu .sousMenu li {
	padding: 0.6rem;
}

#menu .sousMenu li a{
	margin: 0;
	padding: 0;
}

#menu .active {
	background-color: rgb(24, 119, 156);
}


/******************************************
*        Contenu 
*******************************************/
section {
	margin: 8rem auto 2.5rem;
	max-width: 1200px;
	padding: 0 0.6rem;
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 1.25rem;
}

section #petit_ecran {
	display: none;
}

section h1 {
	font-size: 1.3rem;
	background-color: #ffc400;
	color: var(--titre1);
	border: var(--titre1) 1px solid;
	border-radius: 10px;
	padding: 0.3rem 0;
	text-align: center;
}

section h1::after {
	white-space: pre;
	content: "\00000A  Du code, des croquettes et zéro bug (ou presque)";
	font-size: 0.6rem;
}

section h1 span {
	font-size: 0.6rem;
}


section h2 {
	font-size: 1.25rem;
	color: var(--titre2);
	margin-top: 1.8rem;
}

section h3 {
	font-size: 1.1rem;
	color: var(--titre3);
}

section h4 {
	font-size: 1rem;
	color: var(--titre4);
}

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

section #texte {
	margin-bottom: 1.25rem;
}

code {
	/*color:darkcyan;*/
	color: #a65525;
	font-family: Consolas, monospace;
}

.codehref {
	text-decoration: underline dotted;
}

.codehref:link, .codehref:visited {
	color: #a65525;
	
}
.codehref:hover {
	color: #f55c03;
}

pre {
	display: block;
	/*background: #272822;*/
	/*color: #f8f8f2;*/
	font-size: 0.8rem;
	padding-left: 1.25rem;
	padding-bottom: 0.6rem;
	margin:0;
	white-space: pre-wrap;
	/* ajouter */
	word-spacing: normal;
	word-break: normal;
	text-align: left;
	white-space: pre; 
	font-family: 'Consolas', 'Courier New', Courier, monospace;
	/*overflow: auto;*/
	overflow-x: auto;
	border-radius: 0.3em;
	hyphens: none;
	tab-size: 4;
}


dd {
	margin-bottom: 0.6rem;
}

section ol li, section ul li{
	margin-bottom: 0.6rem;
}

section ul li{
	margin-bottom: 0.4rem;
}

section div#hommage {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	
}
section div#hommage .photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end;
	gap: 2rem;
}

section div#hommage img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

section div#hommage p {
	text-align: center;
	font-weight: bold;
	font-style: italic;
	font-size: 0.9em;
}

/******************************************
*        Tableaux 
*******************************************/
table
{
    width: 70%;
    border-collapse: collapse;
    
}

th, td 
{
    padding: 5px;
	border: 1px solid rgb(184, 184, 247);
}

th
{
    color: blue;
	font-weight: normal;
    
}

tr:nth-child(even)
{
    background-color: var(--color-cs-violet-clair);
}

th {
    letter-spacing: 2px;
  }
  
  
tbody td {
    text-align: center;
}

table td pre,  table td pre code {
	text-align: left;
	background: white;
	color: var(--noir);
}


table td {
	text-align: center;
}

/******************************************
*        Pied de page 
*******************************************/
footer
{
	position:fixed;
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-items: center;
	align-items: center;
	bottom: 0;
	width: 100%;
    background-color:var(--header);
	color: var(--blanc);
	height: 2.5rem;
	font-size: 0.6rem;
	justify-content: center;
	align-items: center;
}

footer p
{
	line-height: 0.8rem;
}


/**********************************************
Les médias queries
**********************************************/
@media screen and (max-width: 768px) {
	section {
		grid-template-columns: 100%;   /* 1fr */
		grid-template-rows: 200px 1fr;	
		gap: 0.3rem;
		margin-bottom: 1.25rem;
	}
	section img {
		height: 200px;
		width: auto;
		grid-row: 1;
		justify-self: center;
	}
	/*section #grand_ecran {
		display: none;
	}
	section #petit_ecran {
		display: block;
		height: 200px;
		width: auto;
		grid-row: 1;
		justify-self: center;
	}*/
	section #texte {
		grid-row: 2;
	}
	
	pre {
		font-size: 0.75rem;
		padding-left: 0.1rem;
	}
	table
	{
    	width: 100%;
   	}

	section div#hommage figure {
		width: 80%;
	}

	/*nav #navToggle ~ label {
		display:block;
		text-align: end;
		margin-right: 1rem;
	}

	#menu ul{
		position: absolute;
		width: 100%;
		height: 100vh;
		left: -110%;
		flex-direction: column;
		background-color: #005a9c;

	}
	#navToggle:checked ~ ul {
		left: 0;
	}*/
}