/* ============================== */
/* =    cookieBanner.css        = */
/* ============================== */

/* Pour éviter les soucis de débordement */
#customCookieBanner,
#customCookieBanner * {
  box-sizing: border-box;
}

#customCookieBanner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  padding: 8px 12px;
  margin: 0;
  text-align: center;
  border-radius: 0;

  display: flex;
  flex-wrap: wrap;    /* Autorise le retour à la ligne */
  align-items: center;
  justify-content: center;
}

/* Image d’escargot */
#customCookieBanner img {
  height: 40px;
  margin-right: 8px;
}

/* Span texte => autorise la coupure de ligne */
#customCookieBanner span {
  margin: 4px;
  white-space: normal;      /* Le texte peut se scinder en plusieurs lignes */
  overflow-wrap: break-word; 
  word-wrap: break-word;    /* Compatibilité anciens navigateurs */
}

/* Lien "En savoir plus" */
#customCookieBanner a {
  color: #E67E22;
  text-decoration: none;
  margin: 0 8px;
  font-weight: bold;
}

/* Bouton "OK" */
#customCookieBanner button {
  background-color: #4F7C3E;
  color: #fff;
  border: none;
  padding: 6px 12px;
  margin: 4px;
  cursor: pointer;
  border-radius: 0;
}

/* ========================== */
/* =   Responsive mobile    = */
/* ========================== */
@media (max-width: 600px) {
  #customCookieBanner {
    font-size: 14px;
    padding: 10px;  /* On peut réduire un peu les padding */

    /* On peut passer en colonne si on veut tout empiler */
    flex-direction: column; 
  }

  #customCookieBanner img {
    margin: 0 0 8px 0;  /* On annule le margin-right pour éviter un décalage */
  }

  #customCookieBanner span,
  #customCookieBanner a,
  #customCookieBanner button {
    display: block;
    margin: 4px auto;  /* Centrés au milieu */
  }
}