/* Réinitialisation et base */
* {
    box-sizing          : border-box;
    margin              : 0;
    padding             : 0;

  	font-family         : 'Titillium Web', sans-serif;
    font-weight         : normal;
    font-size           : inherit;
}

html {
    height              : 100%;
}

body {
    display             : flex;
    flex-direction      : column;
    height              : 100vh;
}

/* Header et Footer fixes */
.header, .footer {
    flex-shrink         : 0; /* Empêche le header/footer de rétrécir */
    height              : 38px; /* auto */
    z-index             : 100;

  	margin              : 5px;
    padding				: 10px;
    justify-content     : center;
    text-align          : center;
    font-size           : medium;
	background			: #fff;
    color				: #355681;
	/* */
    box-shadow: 
		inset 0px 0px 0px 1px rgba(53, 86, 129, 0.4), 
		inset 0px 0px 5px rgba(53, 86, 129, 0.5);
	text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.6);
    /**/
    position            : relative;
}

:target::before {
    content: "";
    display: block;
    height: 38px;
    margin: -38px 0 0;
}

.footer a{
    font-size           : small;
    padding             : 5px;
    background          : #007bff;
    color               : #fff;
    border-radius       : 4px;
    text-decoration     : none;
    box-shadow          : 0 2px 6px rgba(0,0,0,.2);
}

/* Conteneur principal flexible */
.main {
    display: flex;
    flex: 1; /* Prend tout l'espace disponible entre header et footer */
    overflow: hidden; /* Empêche le débordement */
    position: relative; /* Pour positionner la colonne latérale */
}

/* Colonne latérale fixe */
.lateral {
    position            : absolute;
    top                 : 0px;
    left                : 0px;
    bottom              : 0px;
    z-index             : 90;
    margin              : 0px 5px 0px 5px;

    width: 240px;
    background: #f0f0f0;
    overflow-y: auto; /* Ascenseur si le contenu dépasse */
}
.lateral h1, .lateral h2, .lateral h3, .lateral h4, .lateral h5, .lateral h6 {
    text-align			: center;
}
.lateral a {
	text-decoration		: none;
    color				: #000;
}
.lateral p{
    margin				: 0px;
    padding				: 5px;
}

.lateral-image {
    position: absolute;
    left: 10px;

    cursor: pointer;
}

/* Contenu principal défilable */
.contenu {
    flex: 1;
    margin: 0px 5px 0px 0px;

    margin-left: calc(240px + 10px); /* Largeur de la colonne latérale */
    /* padding: 1rem; */
    overflow-y: auto; /* Ascenseur si le contenu dépasse */
    height: 100%; /* Prend toute la hauteur disponible */
}


p, div, span, #p, #div, #span {
  	font-family         : 'Titillium Web', sans-serif;
    font-weight         : normal;
    font-size           : medium;
}

p {
    margin				: 5px 0px 5px 0px;
    padding				: 0px;
}



h1, h2, h3, h4, h5, h6, #h1, #h2, #h3, #h4, #h5, #h6 {
	width				: auto;
	margin				: 0px;
	padding				: 5px;
}

h1 {
	font-size           : large;
	background-color	: #355681dd;
	color				: white;
}

h2 {
	font-size           : large;
	background-color	: #b6e8fb;
	color				: #355681;
}

h3 {
	font-size           : large;
	background-color	: rgba(0, 0, 0, 0.10);
	color				: #355681;
}

h4 {
	background-color	: rgba(0, 0, 0, 0.05);
	font-size           : medium;
}

h5 {
	background-color	: rgba(0, 0, 0, 0.025);
	font-size           : small;
}

ul {
    list-style-type     : disc;
    margin              : 10px 20px;
    padding             : 0px;
}


.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:8px;
}
.btn img {
  width: 15px;
  height: 15px;
}
.btn:hover{ background: rgba(0,0,0,0.04); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }