:root {
    --header-text-color: #ffaa3c;
    --body-background: #1b140c;
    --body-background2:#302212;
    --body-background3:#0e0905;
}

body {
    font-family: monospace;
    margin: 0;
    background: var(--body-background);
    color: var(--header-text-color);
}

.breadcrumb {
display: flex;
background-color: #fff8d3;
padding: 8px 0 8px 12px;
}

nav {
position: relative;
}

.login {
position: absolute;
right: 8px;
}

.main-container {
    max-width: 1000px;  /* largeur max */
    width: 100%;        /* s’adapte aux petits écrans */
    margin: 0 auto;         /* centre la page */
    background: #111;       /* pour garder le fond rétro */
    min-height: 100vh;      /* prend toute la hauteur de l’écran */
    display: flex;
    flex-direction: column;
    
    border-left: 1px solid #444;
    border-right: 1px solid #444;
}

home-header {
  background: var(--body-background);
  padding: 1rem;
  border-bottom: 2px solid #444;
}

home-header h1 {
  margin: 0;
  font-size: 1.5rem;
  color: #0f0; /* effet CRT vert */
}

home-header p {
  margin: 0;
  font-size: 0.9rem;
  color: #aaa;
}

nav {
  background: var(--body-background2);
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
}

nav a {
  color: var(--header-text-color);
  text-decoration: none;
}

nav a:hover {
  color: #0f0;
}

button#explore {
  background: var(--body-background2);
  color: #aaa;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  background: var(--body-background3);
  border-bottom: 2px solid #444;
}

.hero img {
  width: 200px;
}

.sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.card {
  background: var(--body-background);
  padding: 1rem;
  border: 1px solid #444;
  text-align: center;
  font-size: x-large;
  transition: transform 0.2s;
  height: 120px;          /* hauteur fixe */
  display: flex;          /* pour centrer le contenu */
  align-items: center;
  justify-content: center;
}

.card:hover {
  transform: scale(1.05);
  border-color: #0f0;
}


.sections .card .date {
    right: -70px;
    top: 51px;
    position: relative;
    font-size: medium;
}

.highlight {
  background: var(--body-background3);
  margin: 1rem;
  margin-top: 0rem;
  padding: 1.5rem;
  border: 2px solid #444;
}

home-footer {
  background: var(--body-background);
  padding: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: #888;
  border-top: 2px solid #444;
}

.square_thumbnail {
  height: 150px;
  /* object-fit: cover; */
  /* resize vertically */
}

.eye::after {
  margin-left: .5rem;
  content: "\01F441";
  font-family: "Noto Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 2rem;
}