* {
    margin: 0px;
    padding: 0px;
    font-family: 'Aster', sans-serif;
}

body {
    background-color: #2e3033;
    height: 100%;
    overflow: hidden; /* désactive scroll global */
}

header {
    height: 60px;
    width: 100%;
    position: fixed; /* fixe le header en haut */
    top: 0;
    left: 0;
    z-index: 999; /* pour qu’il reste au-dessus */
}

section {
    width: 75dvw;
    height: calc(100vh - 60px); /* occupe le reste de la page */
    margin-top: 60px; /* pousse la section sous le header */
    background-color: #249440;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

section table {
    position: relative;
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

section td {
    vertical-align: middle;
    text-align: center;
    width: 33.33%;
}

section td:nth-child(1),
section td:nth-child(3) {
    width: 40%;
}

section td:nth-child(2) {
    width: 20%;
}

.container,
.container2 {
    display: flex;
    overflow-x: auto;   /* active le scroll horizontal si besoin */
    justify-content: center;
    height: auto;
    padding: 1rem;
}

.container::-webkit-scrollbar,
.container2::-webkit-scrollbar {
    height: 8px;
}
.container::-webkit-scrollbar-thumb,
.container2::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.3);
    border-radius: 4px;
}

.container {
    margin-top: 50px;
}

.container2 {
    margin-bottom: 50px;
}

/* FEEDLY */
.Titre {
    color: white;
    position: relative;
    height: 100%;
    display: inline-block; /* Ajoute un comportement de bloc pour aider à aligner avec le logo */
}

.Titre svg {
    display: inline-block;
    vertical-align: middle; /* Aligne verticalement le logo avec le texte */
    width: 50px;  /* Taille du logo */
    height: 50px;
    margin-right: 10px; /* Espacement entre le logo et le titre */
}

h1 {
    font-size: 50px;
    display: inline-block; /* Permet d'afficher le titre sur la même ligne que le logo */
    vertical-align: middle;  /* Aligne verticalement le texte avec le logo */
}
/* FEEDLY */

.card,
.card2 {
    display: flex; /* Utiliser flex pour gérer le contenu de la carte */
    flex-direction: column;
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    width: clamp(150px, 20vw, 200px);
    height: clamp(220px, 30vw, 280px);
    background-color: #17141d;
    border-radius: 10px;
    box-shadow: 0px 0 1rem #000;
    transition: 0.4s ease-out;
    position: relative;
}

.card:hover {
    transform: translateY(-30px);
    transition: 0.4s ease-out;
}

.card2:hover {
    transform: translateY(-20px);
    transition: 0.4s ease-out;
}


.card:hover~.card,
.card2:hover~.card2 {
    position: relative;
    transition: 0.4s ease-out;
}


.title {
    color: white;
    font-weight: 300;
    position: absolute;
    left: 20px;
    top: 15px;
    text-align: left;
}

.bar,
.bar2 {
    position: absolute;
    bottom: 20px; /* Positionne la barre au bas de la carte */
    left: 20px;
    height: clamp(4px, 1vw, 8px); /* hauteur flexible de la barre */
    width: clamp(120px, 15vw, 150px); /* largeur flexible de la barre */
    background-color: #2e3033; /* Couleur de la barre vide */
    border-radius: 3px;
}


.emptybar {
    background-color: #2e3033;
    width: 100%;
    height: 100%;
}

.filledbar {
    position: absolute;
    top: 0px;
    z-index: 3;
    width: 0px;
    height: 100%;
    background: rgb(0, 154, 217);
    background: linear-gradient(90deg, rgba(0, 154, 217, 1) 0%, rgba(217, 147, 0, 1) 65%, rgba(255, 186, 0, 1) 100%);
    transition: 0.6s ease-out;
    border-radius: 3px;
}

.card:hover .filledbar,
.card2:hover .filledbar {
    width: 120px; /* Largeur de la barre remplie au survol */
    transition: 0.4s ease-out;
}

.anssi,
.it,
.lmi,
.hacker,
.frand {
    height: clamp(60px, 18vw, 125px);
    margin-top: clamp(70px, 10vw, 110px);
    margin-bottom: clamp(15px, 3vw, 30px);
}

.cnil {
    height: clamp(30px, 4vw, 50px);
    margin-top: clamp(90px, 10vw, 140px);
    margin-bottom: clamp(15px, 3vw, 30px);
}

.zero1net {
    height: clamp(60px, 18vw, 125px);
    margin-top: clamp(70px, 10vw, 110px);
    margin-bottom: clamp(15px, 3vw, 30px);
}

.clubic {
    height: clamp(60px, 18vw, 125px);
    margin-top: clamp(70px, 10vw, 110px);
    margin-bottom: clamp(15px, 3vw, 30px);
}

.jv {
    height: clamp(60px, 18vw, 125px);
    margin-top: clamp(70px, 10vw, 110px);
    margin-bottom: clamp(15px, 3vw, 30px);
}