/* Couleurs du bandeau Klaro, calées sur le noir, l'or et la crème du site.
   Feuille à part : site/css/style.css n'est pas modifiée.
   Klaro 0.7.22 (BSD), fichiers klaro.css et klaro-no-css.js. */

.klaro {
  --font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --title-font-family: Georgia, "Times New Roman", serif;
  --font-size: 16px;
}

.klaro .cookie-notice:not(.cookie-modal-notice),
.klaro .cookie-modal .cm-modal.cm-klaro {
  background-color: #111111;
  color: #f7f3ea;
}

.klaro .cookie-notice p,
.klaro .cookie-notice strong,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice li,
.klaro .cookie-modal p,
.klaro .cookie-modal strong,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal li {
  color: #f7f3ea;
}

.klaro .cookie-notice a,
.klaro .cookie-modal a,
.klaro .context-notice a {
  color: #e4c77a;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.klaro .cookie-notice a:hover,
.klaro .cookie-modal a:hover,
.klaro .context-notice a:hover {
  color: #f0d48a;
}

.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn {
  border-radius: 999px;
  padding: 0.55em 1.05em;
  font-weight: 600;
  border: 2px solid transparent;
}

.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-info {
  background-color: #c9a24a;
  color: #111111;
  border-color: #c9a24a;
}

.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-info:hover {
  background-color: #d8b45e;
  border-color: #d8b45e;
  color: #111111;
}

.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-danger {
  background-color: transparent;
  color: #f7f3ea;
  border-color: #f7f3ea;
}

.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover {
  background-color: rgba(247, 243, 234, 0.08);
  color: #f7f3ea;
}

.klaro .cookie-modal .cm-list-title,
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-notice .cm-list-title,
.klaro .cookie-notice .cm-list-description {
  color: #f7f3ea;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider {
  background-color: #c9a24a;
}

.klaro .cm-btn:focus-visible,
.klaro a:focus-visible,
.klaro .hide:focus-visible {
  outline: 3px solid #f0d48a;
  outline-offset: 2px;
}

/* Lien « Gérer les cookies », rendu par consentement-body.php
   sous le pied de page (le pied lui-même n'est pas modifié). */
#gestion-cookies {
  margin: 0;
  background: #111111;
  color: #dddddd;
  font-size: 0.92rem;
  padding-bottom: 1.25rem;
}

#gestion-cookies p {
  margin: 0;
}

#gestion-cookies a {
  color: #dddddd;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

#gestion-cookies a:hover {
  color: #c9a24a;
}

#gestion-cookies a:focus-visible {
  outline: 3px solid #f0d48a;
  outline-offset: 2px;
}

/* Texte court du bandeau : masqué sur ordinateur, où la phrase longue reste affichée. */
.klaro .cn-texte-court { display: none; }

@media (max-width: 600px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-texte-long { display: none; }
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-texte-court { display: inline; }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    padding: 0.45rem 0.75rem 0.55rem;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p,
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p span {
    margin: 0.2rem 0 0;
    font-size: 14px;
    line-height: 1.35;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin-top: 0.3rem;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a,
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div {
    margin-top: 0;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cm-link.cn-learn-more {
    align-self: flex-start;
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
    flex: 1 1 0;
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 0.4em 0.5em;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* Le contenu peut défiler au-dessus du bandeau tant qu'il est affiché. */
  body:has(#klaro-cookie-notice:not(.cookie-notice-hidden)) {
    padding-bottom: var(--hauteur-bandeau, 160px);
  }

  html:has(#klaro-cookie-notice:not(.cookie-notice-hidden)) {
    scroll-padding-bottom: var(--hauteur-bandeau, 160px);
  }
}