:root {
  --noirsite: #0a1b1b98;
  --bleumenu: #386cb1;
  --blancsite: rgb(236, 233, 233, 0.945);
  --light_smoke: rgba(227, 222, 222, 0.575);
}
html, body {
  height: 95%;
  margin: 5px;
  padding: 5px;
  font-size: 1em;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: var(--blancsite);
  display: flex;
  flex-direction: column;
}
.footer {
  background: var(--blancsite);
  border-top: 2px solid var(--noirsite);
  text-align: center;
  padding: 10px;
}
.coeurPage #CommentSimu article{
  background-color: var(--blancsite);
}
/* NOTE : #closeBtn et #openBtn sont gérés par Menu_CSS.css.
   Ne PAS mettre display:none ici, sinon ça interfère avec le JS inline. */
.rgpd-banner p {
  margin: 0 0 10px 0;
  font-size: 14px;
}
.rgpd-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.85);
  color: white;
  text-align: center;
  padding: 15px;
  z-index: 2000;
}
.rgpd-form button {
  margin: 0 5px;
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 600px;
  background: #fff;
  padding: 1em;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}

/* Grand écran */
@media only screen and (min-width: 800px) {
  .coeurPage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;   /* ligne 1 = titre, ligne 2 = contenu */
    gap: 10px;
  }
  .coeurPage > #titre {
    gap: 10px;
    font-size: 1em;
    color: green;
    grid-column: 1 / 3;    /* Prend toute la largeur (col 1 ET 2) */
    grid-row: 1;
  }
  .coeurPage > #CommentSimu {
    background-color: var(--blancsite);
    grid-column: 1;
    grid-row: 2;
  }
  .coeurPage > #SimuTrajTerre {
    background-color: var(--blancsite);
    grid-column: 2;
    grid-row: 2;
  }
  .coeurPage > #SimuTrajTerre h2 {
    text-align: center;
    background-color: var(--blancsite);
    color: rgb(83, 33, 201);
  }
  .coeurPage > #SimuTrajTerre img {
    width: 50%;
    height: auto;
  }
}

/* Écran moyen */
@media only screen and (min-width: 600px) and (max-width: 799px) {
  .coeurPage {
    display: grid;
    gap: 0.5em;
    font-size: 1em;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
  }
  .coeurPage > #titre {
    gap: 0.5em;
    font-size: 1em;
    color: rgb(37, 26, 196);
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .coeurPage > #CommentSimu {
    background-color: var(--blancsite);
    grid-column: 1;
    grid-row: 2;
  }
  .coeurPage > #SimuTrajTerre {
    grid-column: 2;
    grid-row: 2;
    background-color: var(--blancsite);
    color: rgb(33, 201, 125);
  }
  .coeurPage > #SimuTrajTerre img {
    width: 80%;
    height: auto;
  }
}

/* Mobile */
@media only screen and (max-width: 599px) {
  .coeurPage {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    font-size: 1em;
  }
  .coeurPage > #titre {
    display: block;
    width: 100%;
    gap: 0.5em;
    font-size: 1em;
  }
  .coeurPage > #CommentSimu {
    display: block;
    background-color: var(--blancsite);
    width: 100%;
    max-width: 100%;
    grid-column: auto;
  }
  .coeurPage > #SimuTrajTerre {
    display: block;
    background-color: var(--blancsite);
    color: var(--bleumenu);
    width: 100%;
    max-width: 100%;
    grid-column: auto;
  }
  .coeurPage > #SimuTrajTerre img {
    width: 100%;
    height: auto;
  }
}