/* CLARO — bandeau de consentement cookies
   Reprend les teintes du site : fond ivoire, encre presque noire, bordeaux de marque. */

:root{
  --ck-bg:#fafaf9;
  --ck-ink:#111110;
  --ck-ink2:#3d3d3b;
  --ck-border:rgba(17,17,16,.14);
  --ck-accent:rgb(140,49,67);
  --ck-accent-l:rgb(176,84,104);
  --ck-ease:cubic-bezier(.16,1,.3,1);
}

.ck-bar{
  position:fixed; z-index:9999;
  left:16px; right:16px; bottom:16px;
  max-width:760px; margin:0 auto;
  display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  padding:20px 24px;
  background:var(--ck-bg);
  color:var(--ck-ink);
  border:1px solid var(--ck-border);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(17,17,16,.16);
  font-family:inherit;
  /* etat de depart : masque, anime a l'ouverture */
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ck-ease), transform .5s var(--ck-ease);
}
.ck-bar.is-open{opacity:1; transform:none}
.ck-bar[hidden]{display:none}

.ck-txt{flex:1 1 340px; min-width:0}
.ck-txt p{
  margin:0; font-size:14px; line-height:1.65; color:var(--ck-ink2);
}
.ck-txt a{color:var(--ck-accent); text-decoration:underline; text-underline-offset:2px;
  white-space:nowrap} /* evite que « En savoir plus » se coupe en fin de ligne */
.ck-txt a:hover{color:var(--ck-accent-l)}

/* Les deux boutons ont le meme poids visuel : la CNIL impose que refuser
   soit aussi simple qu'accepter. */
.ck-btns{display:flex; gap:10px; flex:0 0 auto}
.ck-btn{
  font:inherit; font-size:14px; font-weight:500; letter-spacing:.01em;
  padding:11px 20px; border-radius:8px; cursor:pointer;
  border:1px solid var(--ck-accent);
  transition:background .25s var(--ck-ease), color .25s var(--ck-ease);
}
.ck-btn--no{background:transparent; color:var(--ck-accent)}
.ck-btn--no:hover{background:rgba(140,49,67,.07)}
.ck-btn--yes{background:var(--ck-accent); color:#fff}
.ck-btn--yes:hover{background:var(--ck-accent-l); border-color:var(--ck-accent-l)}
.ck-btn:focus-visible{outline:2px solid var(--ck-accent); outline-offset:3px}

/* Lien « Gérer les cookies » dans les pieds de page */
.ck-link{background:none; border:0; padding:0; font:inherit; color:inherit;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px}

@media (max-width:640px){
  .ck-bar{left:10px; right:10px; bottom:10px; padding:18px; gap:16px}
  .ck-btns{width:100%}
  .ck-btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  .ck-bar{transition:none}
}