/* Les Nicheurs — habillage du bandeau cookies (plugin cookie-notice / Compliance by Hu-manity.co 3.1.4)
   Structure ciblée :
     #cookie-notice > .cookie-notice-container > #cn-notice-text + #cn-notice-buttons + #cn-close-notice

   Deux pièges du plugin, d'où les sélecteurs ci-dessous :
   1. il pose des styles EN LIGNE (fond de la barre, fond des 3 boutons) -> !important sur ces trois
      propriétés uniquement ;
   2. sa feuille front.min.css cible `#cookie-notice .cn-button:not(.cn-button-custom)` (spécificité
      1,2,0) -> les règles communes passent par `#cookie-notice #cn-notice-buttons .cn-button` (2,1,0),
      et `min-width:100%` sur #cookie-notice impose le reset `min-width:0`. */

/* --- La carte ------------------------------------------------------------ */
#cookie-notice.cookie-notice-visible{
  left:24px;
  right:auto;
  bottom:24px;
  min-width:0; /* sinon min-width:100% du plugin garde la barre pleine largeur */
  width:min(420px,calc(100vw - 32px));
  background:var(--white)!important;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 26px 50px -26px rgba(22,19,15,.45),0 4px 12px -8px rgba(22,19,15,.18);
  overflow:hidden;
  animation:cn-rise .32s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes cn-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #cookie-notice.cookie-notice-visible{animation:none}
}

#cookie-notice .cookie-notice-container{
  padding:22px 22px 20px;
  text-align:left;
  color:var(--ink-soft)!important;
}

/* --- Le texte ------------------------------------------------------------ */
#cookie-notice #cn-notice-text{
  display:block;
  font-family:var(--body);
  font-size:13px;
  font-weight:500;
  line-height:1.6;
  color:var(--ink-soft);
}
/* Eyebrow mono précédé de l'oiseau, comme le lockup de l'en-tête.
   Le logo est un background-image (le DOM du plugin n'offre pas de nœud où poser un <img>) :
   `pixelated` obligatoire, c'est du pixel art (300x269 servi à 24px). */
#cookie-notice #cn-notice-text::before{
  content:"Cookies";
  display:block;
  padding-left:33px;
  min-height:22px;
  line-height:22px;
  background:url("../img/logo-bird.png") left center / 24px auto no-repeat;
  image-rendering:pixelated;
  font-family:var(--mono);
  font-weight:700;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:9px;
}

/* --- Les boutons --------------------------------------------------------- */
#cookie-notice #cn-notice-buttons{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-top:11px;
}
#cookie-notice #cn-notice-buttons .cn-button{
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--sans);
  font-weight:700;
  font-size:14px;
  letter-spacing:-.005em;
  line-height:1.2;
  padding:11px 18px;
  border-radius:9px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .16s,color .16s,transform .16s,box-shadow .16s,border-color .16s;
  white-space:nowrap;
  text-shadow:none;
}
/* Accepter : le bouton orange plein du thème (.btn) */
#cookie-notice #cn-notice-buttons #cn-accept-cookie{
  background:var(--orange)!important;
  border-color:var(--orange);
  color:#fff;
  box-shadow:0 1px 2px rgba(22,19,15,.08),0 8px 18px -10px rgba(255,91,31,.55);
}
#cookie-notice #cn-notice-buttons #cn-accept-cookie:hover{
  background:var(--orange-deep)!important;
  border-color:var(--orange-deep);
  transform:translateY(-2px);
  box-shadow:0 12px 24px -10px rgba(255,91,31,.6);
}
/* Refuser : le bouton outline du thème (.btn.outline) */
#cookie-notice #cn-notice-buttons #cn-refuse-cookie{
  background:var(--white)!important;
  border-color:var(--line);
  color:var(--ink);
  box-shadow:0 1px 2px rgba(22,19,15,.06),0 8px 18px -12px rgba(22,19,15,.25);
}
#cookie-notice #cn-notice-buttons #cn-refuse-cookie:hover{
  background:var(--white)!important;
  border-color:var(--ink);
  color:var(--ink);
  transform:translateY(-2px);
}
/* Politique de confidentialité : lien texte sous le message (order:-1), pas un 3e bouton.
   Sur sa propre ligne : à 420px les trois éléments ne tiennent pas côte à côte. */
#cookie-notice #cn-notice-buttons #cn-more-info{
  order:-1;
  flex:1 0 100%;
  display:block;
  background:none!important;
  border-color:transparent;
  color:var(--muted);
  font-family:var(--body);
  font-weight:600;
  font-size:12.5px;
  text-align:left;
  padding:0 2px;
  margin:0 0 6px;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--line);
  box-shadow:none;
  white-space:normal;
}
#cookie-notice #cn-notice-buttons #cn-more-info:hover{
  color:var(--ink);
  text-decoration-color:var(--ink);
}
#cookie-notice #cn-notice-buttons .cn-button:focus-visible{
  outline:2px solid var(--green-deep);
  outline-offset:2px;
}

/* --- La croix ------------------------------------------------------------
   Masquée : elle portait data-cookie-set="accept" (fermer valait accepter).
   Le refus passe par le bouton « Refuser », explicite. */
#cookie-notice #cn-close-notice{display:none!important}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width:560px){
  #cookie-notice.cookie-notice-visible{
    left:12px;
    right:12px;
    bottom:12px;
    width:auto;
    border-radius:14px;
  }
  #cookie-notice .cookie-notice-container{padding:18px 18px 16px}
  #cookie-notice #cn-notice-buttons #cn-accept-cookie,
  #cookie-notice #cn-notice-buttons #cn-refuse-cookie{flex:1 1 0;min-width:0}
}