/* --- COOKIES --- */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f4f4f4;
  color: #333;
  text-align: center;
  padding: 10px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.cookiestext {
  margin-right: 10px;
  padding: 8px 16px;
  line-height: 24px;
}

.cookiesbtn {
  padding: 8px 16px;
  margin: 0 10px;
  background-color: #0084ff;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 4px;
}

.cookiesbtn:hover {
  background-color: #0056b3;
}

.cookiesbtn-grey {
  background-color: #949494;
}

.cookiesbtn-grey:hover {
  background-color: dimgrey;
}

@media (max-width: 500px) {
  .cookie-banner {
    flex-direction: column;
  }

  .cookiesbtn {
    margin: 5px 10px;
  }
}

/* --- COOKIES END --- */
/* ============================================================
   Mouvement reduit
   ------------------------------------------------------------
   Le gabarit anime les blocs a l'apparition (AOS) sans tenir
   compte du reglage systeme. Pour une personne sujette au mal
   des transports ou aux migraines vestibulaires, ces animations
   sont un probleme reel. On les neutralise quand le systeme le
   demande, sans toucher au reste de la mise en page.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Banniere de consentement, retouches
   ============================================================ */

.cookie-banner[hidden] {
    display: none !important;
}

.cookie-banner {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    z-index: 9999;
}

.cookie-banner .cookiestext {
    margin-right: 0;
    padding: 0;
    max-width: 62ch;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.cookie-banner .cookiestext a {
    color: #1a4f8a;
    text-decoration: underline;
}

.cookiesbtn {
    cursor: pointer;
    border: none;
}