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: black;
}

p {
  color: white;
	margin: 0;
  text-align: left;
}

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;
}

h1 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.75em;
  font-weight: normal;
  color: white;
  line-height: 1.2em;
  margin: 5px 0;
  text-align: left;
}

details > summary {
  color: white;
	list-style-type: '[...]';
  line-height: 1.5em;
}
.col2 details > summary {
  color: white;
  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;
}

.container {
    display: grid;
    justify-content: space-between;
    align-items: flex-start;
    width: 85%;
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-template-rows: auto;
    grid-row-gap: 3%;
    align-items: start;
    justify-items: center;
    padding-top: 1%;
}

.col1, .col2, .col3 {
  display: grid;
  place-items: center;
}

.col4 {
    position: absolute;
    right: 0;
    top: 0;
    background-color: black;
    width: 15%;
    height: 100%;
    padding: 1% 5px 0 5px;
    z-index: 1;
    color: white;
    overflow: hidden;
    text-align: left;
    font-family: sans-serif; /* optionnel */
}

.col4 details {
    max-height: 50vh;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.col4 details[open] {
    overflow-y: auto;
}

/* force tout le texte à gauche, y compris le summary */
.col4 details,
.col4 details * {
    text-align: left !important;
}

.col4 details summary {
    cursor: pointer;
    text-align: left;
}


.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 */
}

.col1 img, .col2 img, .col3 img {
    max-width: 85%;
    height: auto;
    align-items: center;
}

@keyframes clignote {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.clignotant {
    animation: clignote 1s infinite;
}

.image-container {
  position: relative;
  display: grid;
  place-items: center;
}

.image-container .default-image {
  display: block;
  max-width: 85%;
  height: auto;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.image-container .hover-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  max-width: 85%;
  height: auto;
  transition: opacity 0.3s ease-in-out;
}

.image-container:hover .default-image {
  opacity: 0;
}

.image-container:hover .hover-image {
  opacity: 1;
}

.image-container .default-image.clignotant {
  animation: clignote 1s infinite;
}

@keyframes clignote {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@media screen and (max-width: 831px) {
  .container {
         display: grid;
         grid-template-columns: 100%;
         grid-template-rows: auto;
         grid-row-gap: 1%;
         justify-items: center;
         width: 100%;
     }

     .col1, .col2, .col3 {
       display: grid;
        place-items: center;
        width: 100%;
        margin: 20px 0 0 0;
     }

     .col1 img, .col2 img, .col3 img {
         max-width: 100%;
     }

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

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

    /* Code spécifique au swipe pour les appareils mobiles */
    .image-container {
      position: relative;
      display: grid;
      place-items: center;
    }

    .image-container .default-image {
      display: block;
      max-width: 85%;
      height: auto;
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
    }

    .image-container .hover-image {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      max-width: 85%;
      height: auto;
      transition: opacity 0.3s ease-in-out;
    }

    .image-container .default-image.clignotant {
      animation: clignote 1s infinite;
    }
}

.image-container.swiped-left .default-image {
  opacity: 0; /* Cacher l'image de départ */
}

.image-container.swiped-left .hover-image {
  opacity: 1; /* Afficher la deuxième image */
}

.image-container.swiped-right .default-image {
  opacity: 1; /* Rendre l'image de départ visible */
}

.image-container.swiped-right .hover-image {
  opacity: 0; /* Cacher la deuxième image */
}