/* .invisiblelink a,  for use with <span class="invisiblelink"><a... */
/* a.invisible for use with <a class="invisible"... */
/* top right bottom left */


body {
    font-family: "Ubuntu", "Open Sans", sans-serif;
    margin: 0px;
    background-color: #1E1E1E; /* Noir */
    color: black;
    font-size: 16px;
    text-align: center;
}

#page {
    width: 90%;
    max-width: 1000px;
    padding: 12px 5% 40px; /* Simplification des paddings */
    background-color: #FFFFFF; /* Blanc */
    color: black;
    margin: auto;
    text-align: left;
}

h1 {
	font-weight: normal;
}

h2 {
	font-weight: normal;
	margin: 24px 0 12px 0; /* haut | droit | bas | gauche */
}

h3 {
	font-weight: normal;
	margin: 4px 0 10px 0; /* haut | droit | bas | gauche */
}

p {
	margin: 0 0 10px 0;
}


.helper {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.table {
	display: table;
}

.table > div {
	display: table-cell;
	vertical-align: middle;
}


.item {
	margin: 0;
	text-align: left;
}


.highlight {
	margin-bottom: 20px; /* Add padding to prevent margin collapse */	
}

a {
	color: black;
}


.container-responsive {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* Two columns by default */
	gap: 30px;
}

@media (max-width: 768px) {
	.container-responsive {
		grid-template-columns: 1fr; /* One column for small screens */
	}
}

.no-underline {
	text-decoration: none;
}

@media (prefers-color-scheme: dark) {
	body {
	        background-color: #1E1E1E; /* Gris très foncé presque noir */
	        color: #EEEEEE; /* Gris clair */
	    }

	    #page {
	        background-color: #1E1E1E; /* Gris un peu moins foncé */
	        color: #EEEEEE;
		}
  a {
    color: #EEEEEE; 
  }
  .invisiblelink a, 
  a.invisible { 
    color: inherit; /* Inherit the color from the parent element */
  }
  img {
    filter: grayscale(20%);
  }
}