@charset "UTF-8";
/* CSS Document */

@font-face {
font-family: Century;
src: url(Century.ttf);
}

html, body {
/* color: #0F9858; */
/* color: #0c7d48; */
/* background-color:#D5EDDE; */
/* font-family: Times, serif; */
/* font-family: 'Times New Roman', Times, serif; */
font-family: Century;
font-size: 13px;
line-height: 15px;
text-underline-offset: 2px;
background-color:rgb(255, 245, 235);
}

::-webkit-scrollbar { 
width: 0px;
}

::selection {
background-color: blue;
color: rgb(255, 245, 235);
}

#time {
position: absolute;
top: 1rem; left: 1rem;
color:blue;
/* background-color: #FF7230; */
}
p.ind {
text-indent: 25%;
}

.cap {
text-transform: uppercase;
}
.bleu {
color:blue;
}

/* Liens dans le texte courant */
a {
/* color: #0F9858; */
/* color: #0c7d48; */
color:blue;
text-decoration: underline;
}
a:visited {
/* color: #0F9858; */
/* color: #0c7d48; */
color:blue;
text-decoration: underline;
}
a:hover {
/* color: #FFF; */
text-decoration: none;
}

a.desc {
color:blue;
/* color: #0c7d48; */
text-decoration: none;
}
a.desc:visited {
/* color: #0c7d48; */
color:blue;
text-decoration: none;
}
a.desc:hover {
/* color: #FFF; */
text-decoration: none;
}

svg {
position: absolute;
width: 50%;
height: auto;
z-index: 1;
}
#hg { top: 0; left: 0; }
#hd { top: 0; right: 0; }
#bd { bottom: 0; right: 0; }
#bg { bottom: 0; left: 0; }

/* --- */

.header {
padding-left: 1rem; padding-right: 1rem; padding-bottom: 0; padding-top: 1rem;
overflow-y: hidden;
z-index: 0;
/* background-color: #FF7230; /* ### */
}

.menubox {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
padding-left: 1rem; padding-right: 1rem; padding-top: 1rem;
height: 5rem;
/* background-color: #0F9858; */
background-color:rgb(255, 245, 235);
z-index: 2;
}

#left {
position: absolute;
height: auto; width: calc(50% - 1.5rem);
display: grid;
grid-template-columns: repeat(4, 1fr);
/* grid-column-gap: 1rem; */
/* background-color: aqua; */
}

#right {
position: absolute;
left: calc(50% + 0.5rem);
height: auto; width: calc(50% - 1.5rem);
display: grid;
grid-template-columns: repeat(2, 1fr);
/* background-color: aqua; */
}

.menu {
/* min-width: auto; */
/* display:inline-block; */
height: 15px; /* Interligne */
/* background-color: cornflowerblue; */
}
label {
vertical-align: top;
}
input[type="radio"] {
width: 1rem;
height: 1rem;
margin:0;
vertical-align: text-top;
}

#txtmenu {
grid-column: 1 / 7;
grid-row: 2;
color:blue;
/* background-color: cadetblue; */
}

#liste {
padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-top: 0rem;
height:auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1rem;
z-index: 1;
/* background-color: darkorange; */
}

.square {
aspect-ratio: 1 / 1;
padding: 0.5rem;
display: grid;
grid-template-rows: auto 1fr auto;
z-index: 1;
background:lightblue;
}
.square:hover { background:#444; }
.square:hover .sqtab { color:#fff; }
.square:hover .sqtitle { color:#fff; }
.square:hover a { color:#fff; }

.salmon { background-color: lightsalmon; } /* Collection */
.grey { background-color: lightgrey; } /* Génération */
.steel { background-color: lightsteelblue; } /* Lecture */

.square img {
filter: grayscale(100%); /* Effet de bichromie (gris) par défaut sur l'image */
transition: filter 0.3s ease; /* Animation de transition pour une expérience plus fluide */
/* padding-top: 0.5rem; */
}
.square:hover img {
filter: none; /* Annulation de l'effet de bichromie au survol du parent */
}
.square img:hover {
filter: hue-rotate(90deg); /* Effet de bichromie au survol de l'image elle-même */
}

.sqtab {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 1rem;
/* background-color: #0F9858; */
}

.tab1 {
grid-column: 1 ;
/* background-color: #D5EDDE; */
}
.tab2 {
grid-column: 2 / span 2 ;
overflow-wrap: break-word;
word-wrap: break-word;
/* background-color: #D5EDDE; */
}

.sqtitle {
width: calc(100% - 2rem); padding-left: 1rem; padding-right: 1rem;
text-align: center;
/* background-color: #edd5ec; */
}

div {
overflow: hidden; /* Correction de bug d'affichage dans les grilles */
}

.thumb {
position: relative;
max-width: 100%;
max-height: 100%;
overflow: hidden; /* Correction de bug d'affichage pour les conteneurs d'image */
}
img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}

/* --- */

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

html, body {
font-size: 11px;
line-height: 13px;
}

p.ind {
text-indent: 50%;
}
.mobile {
color:blue;
}
.mobind {
text-indent: 25%;
}

#left {
width: calc(100% - 2rem);
/* background-color: aquamarine; */
}
#right {
display: none;
}

#liste {
grid-template-columns: repeat(2, 1fr);
}

}