/* Bannière et panneau Klaro aux couleurs de maneo.ca (charte de index.html).
   Les sélecteurs .klaro.maneo l'emportent sur la feuille intégrée à klaro.js. */
.klaro.maneo{
  --dark1:#0E1B30; --dark2:#16335F; --dark3:#948E82;
  --light1:#E2DDCE; --light2:rgba(226,221,206,.75); --light3:rgba(226,221,206,.55);
  --white1:#FBFCFE; --white2:#3A4A66; --white3:#FBFCFE;
  --green1:#3D93E8; --green2:#5AA8F2; --green3:#3D93E8;
  --blue1:#3D93E8; --blue2:#5AA8F2;
  --button-text-color:#FBFCFE; --border-radius:12px; --box-shadow-color:rgba(0,0,0,.30);
  --font-family:"Newsreader", serif; --title-font-family:"Newsreader", serif; --font-size:15px;
}

/* ---- Bandeau : barre en bas de l'écran, sans voile ---- */
.klaro.maneo .cookie-notice:not(.cookie-modal-notice){
  position:fixed; left:0; right:0; bottom:0; top:auto; width:100%; max-width:none;
  border-radius:0; z-index:999;
  background:rgba(14,27,48,.94);
  -webkit-backdrop-filter: blur(10px) saturate(116%);
  backdrop-filter: blur(10px) saturate(116%);
  border-top:1px solid rgba(226,221,206,.14);
  box-shadow:0 -10px 34px rgba(90,168,242,.14);
}
.klaro.maneo .cookie-notice:not(.cookie-modal-notice) .cn-body{
  max-width:1060px; margin:0 auto; padding:1rem 8vw 1.1rem;
  display:flex; align-items:center; gap:1rem 2rem; flex-wrap:wrap;
}
.klaro.maneo .cookie-notice:not(.cookie-modal-notice) .cn-body p{
  flex:1 1 420px; margin:0; font-family:"Newsreader", serif; font-size:.98rem; line-height:1.5; color:#E2DDCE;
}
.klaro.maneo .cookie-notice:not(.cookie-modal-notice) .cn-body p a{
  color:#5AA8F2; text-decoration:underline; text-underline-offset:.18em;
}
.klaro.maneo .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok{
  margin:0; flex:0 1 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.6rem;
}
.klaro.maneo .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons{
  display:flex; gap:.6rem; margin:0; width:auto;
}
.klaro.maneo .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn{
  width:auto; margin:0;
}

/* Les trois choix ont le même poids, dans le bandeau comme dans le panneau : refuser est aussi
   simple qu'accepter. Le .cn-body et le .cm-modal donnent la spécificité qui l'emporte sur les
   variantes colorées de Klaro (cm-btn-success, cm-btn-info). */
.klaro.maneo .cookie-notice .cn-body .cm-btn,
.klaro.maneo .cookie-notice .cn-body .cn-ok .cn-learn-more,
.klaro.maneo .cookie-modal .cm-modal .cm-btn{
  display:inline-block; margin:0; padding:.7rem 1.1rem; border-radius:12px;
  font-family:"IBM Plex Mono", monospace; font-size:.68rem; letter-spacing:.14em; line-height:1.2;
  color:#FBFCFE; background:rgba(90,168,242,.10); border:1px solid rgba(226,221,206,.35);
  text-align:center; text-decoration:none; cursor:pointer; transition:background .3s ease, border-color .3s ease;
}
.klaro.maneo .cookie-notice .cn-body .cm-btn:hover,
.klaro.maneo .cookie-notice .cn-body .cn-ok .cn-learn-more:hover,
.klaro.maneo .cookie-modal .cm-modal .cm-btn:hover{
  background:rgba(90,168,242,.24); border-color:#5AA8F2;
}
.klaro.maneo .cookie-notice .cn-body .cm-btn:focus-visible,
.klaro.maneo .cookie-notice .cn-body .cn-ok .cn-learn-more:focus-visible,
.klaro.maneo .cookie-modal .cm-modal .cm-btn:focus-visible{
  outline:2px solid #5AA8F2; outline-offset:2px;
}

@media (max-width:600px){
  .klaro.maneo .cookie-notice:not(.cookie-modal-notice) .cn-body{padding:.9rem 16px 1rem; gap:.8rem}
  .klaro.maneo .cookie-notice:not(.cookie-modal-notice) .cn-body p{flex-basis:100%; font-size:.92rem}
  .klaro.maneo .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok{width:100%; display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem}
  .klaro.maneo .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons{display:contents}
  .klaro.maneo .cookie-notice .cn-body .cm-btn,
  .klaro.maneo .cookie-notice .cn-body .cn-ok .cn-learn-more{padding:.7rem .3rem; letter-spacing:.06em}
}

/* ---- Panneau « Choisir » ---- */
.klaro.maneo .cookie-modal .cm-bg{background:rgba(14,27,48,.72)}
.klaro.maneo .cookie-modal .cm-modal.cm-klaro{
  background:#0E1B30; color:#E2DDCE; border:1px solid rgba(226,221,206,.18); border-radius:14px;
  box-shadow:0 26px 52px rgba(0,0,0,.30), 0 10px 34px rgba(90,168,242,.22);
}
.klaro.maneo .cookie-modal .cm-modal .cm-header h1{font-weight:520; color:#FBFCFE}
.klaro.maneo .cookie-modal .cm-modal .cm-header p,
.klaro.maneo .cookie-modal .cm-list-description,
.klaro.maneo .cookie-modal .cm-purposes{color:rgba(226,221,206,.85)}
.klaro.maneo .cookie-modal a{color:#5AA8F2}
.klaro.maneo .cookie-modal .cm-header,
.klaro.maneo .cookie-modal .cm-footer{border-color:rgba(226,221,206,.14)}
.klaro.maneo .cookie-modal .cm-footer-buttons{gap:.6rem}
.klaro.maneo .cookie-modal .cm-list-input:focus-visible + .cm-list-label .slider{outline:2px solid #5AA8F2; outline-offset:2px}
@media (max-width:600px){
  .klaro.maneo .cookie-modal .cm-modal .cm-footer-buttons{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem}
  .klaro.maneo .cookie-modal .cm-modal .cm-btn{padding:.7rem .3rem; letter-spacing:.06em}
}

/* ---- Pied de page : lien CONFIDENTIALITÉ et bouton PRÉFÉRENCES, même style que REJOUER ---- */
.pied .pied-consentement{display:flex; align-items:center; gap:1.6rem}
.pied .pied-consentement a,
.pied #preferences{
  cursor:pointer; background:none; border:none; text-decoration:none;
  color:rgba(226,221,206,.55); font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.22em;
  transition:color .3s ease;
}
.pied .pied-consentement a:hover,
.pied #preferences:hover{color:#5AA8F2}