html {
	box-sizing: border-box;
	margin: -10 0 0 0;
}

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

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.about {
	margin: 3em 0 0 0;
	display: none;

}
body{
  font-family: 'helvetica';
	font-size: 1em;
	line-height: 1.1em;
  background-color: white;
}

p {
  color: black;
	margin: 0;
}

h2 {
	font-size: 1em;
	line-height: 0.7em;
	font-weight: medium;
	padding: 0;
	margin: 0 0;
  text-align: left;
}
h2 a{
	font-size: 1.4em;
	line-height: 1em;
	font-weight: medium;
	padding: 0;
	margin: 0 0;
  text-align: left;
  color: black;
	margin: 5px;
  /* display: inline-block; */
}
h1 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.75em; /* Taille plus petite */
  font-weight: normal;
  color: black;
  line-height: 1.2em; /* Meilleure lisibilité */
  margin: 5px 0; /* Espacement minimal */
  text-align: left; /* Alignement à gauche */
}
details > summary {
  color: black;
	list-style-type: '[...]';
  line-height: 1.5em;
}

a, .category-filter {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

a, .name {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

a:visited {
	color: gray;
	text-decoration: none;
}

a:hover, .category-filter:hover {
	color: gray;
	text-decoration: none;
}

.category-filter-active {
	font-family: sans-serif;
	font-style: italic;
}

.category-filtered {
	display: none;
}

figure {
	max-width: 100%;
	margin: 0 0 0.2em 0;
}

img {
	display: block;
	max-width: 100%;
	max-height: 90vh;
}

.slide {
	display: none;

}

.slide-active {
	display: block;
}

.col1 {
	width: 85%;
}

.col2 {
    position: fixed;
    right: 0;
	background-color: white;
	width: 15%;
	padding: 0 5px 0 5px;
  z-index: 1;
}

.col2 details {
  max-height: 800px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.col2 details[open] {
  max-height: 50vh; /* ou "50vh" pour un scroll adaptable */
  overflow-y: auto;
}

.entry {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.4em;
}

.date {
  width: 40px;      /* ta “tabulation” */
  flex-shrink: 0;
}

.content {
  flex: 1;
}

.entry.indent .date {
  visibility: hidden; /* garde l’alignement sans répéter l’année */
}

video {
  max-width: 100%;  /* Réduire la taille de la vidéo (50% de la largeur de la fenêtre) */
  max-height: 98vh; /* Limiter la hauteur à 50% de la hauteur de la fenêtre */
  width: auto;
  height: auto;
}



@media screen and (max-width: 831px) {

	.col2{
	    position: relative;
      top: 0.3em;
		width: 100%;
		margin: 0;
		padding: 0;
		background-color: white;
    z-index: 1;
	}

	.about {
	    position: relative;
      margin: 1.2em 0 0 0;
	    width: 100%;
	    background-color: white;

	}

	.col1 {
        margin: 20px 0 0 0;
        width: 100%;
      }
}
details > summary {
  color: black;
	list-style-type: '[...]';
}