/* =========================================================================
   Assistant ethique Gold Nature : bulle, panneau de discussion, charte.
   Memes variables que le site (pierre, encre, or, Poppins).
   ========================================================================= */
.cgn-chat{position:fixed;right:clamp(14px,2.4vw,30px);bottom:clamp(14px,2.4vw,30px);z-index:120;
  font-family:var(--sans);font-size:15px;color:var(--encre)}

/* ------------------------------------------------------------------ bulle */
.cgn-chat__bulle{position:relative;display:inline-flex;align-items:center;gap:11px;padding:13px 20px;cursor:pointer;
  background:var(--or);color:#fff;border:1px solid var(--or);font:inherit;font-size:14px;
  letter-spacing:.01em;box-shadow:0 14px 34px rgba(18,17,15,.22);
  transition:transform .45s cubic-bezier(.22,1,.36,1),background .35s,color .35s}
.cgn-chat__bulle svg{width:21px;height:21px}
.cgn-chat__bulle:hover{transform:translateY(-3px);background:var(--encre);border-color:var(--encre)}
.cgn-chat.est-ouvert .cgn-chat__bulle{opacity:0;pointer-events:none;transform:scale(.9)}
/* le libelle reste visible sur tablette et telephone : en pastille seule, la bulle
   passait inapercue. Sous 360 px, on retombe sur l'icone. */
@media(max-width:359px){.cgn-chat__bulle span{display:none}
  .cgn-chat__bulle{padding:16px;border-radius:50%}}

/* au chargement, trois battements discrets attirent l'oeil sur l'appareil tactile */
@media (hover:none) and (prefers-reduced-motion:no-preference){
  .cgn-chat__bulle::after{content:"";position:absolute;inset:-1px;border:1px solid var(--or);
    pointer-events:none;animation:cgn-chat-appel 2.4s ease-out 1.2s 3}
  .cgn-chat.est-ouvert .cgn-chat__bulle::after{animation:none}
}
@keyframes cgn-chat-appel{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.5)}}

/* ---------------------------------------------------------------- panneau */
.cgn-chat__panneau{position:absolute;right:0;bottom:0;width:min(93vw,382px);
  height:min(78vh,570px);display:flex;flex-direction:column;background:var(--papier);
  border:1px solid var(--encre);box-shadow:0 26px 70px rgba(18,17,15,.3);overflow:hidden;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.cgn-chat.est-ouvert .cgn-chat__panneau{opacity:1;transform:none;pointer-events:auto}

.cgn-chat__tete{display:flex;align-items:center;gap:12px;padding:16px 16px 15px;
  background:var(--encre);color:var(--papier)}
.cgn-chat__tete img{width:34px;height:34px}
.cgn-chat__titre{flex:1;min-width:0}
.cgn-chat__titre b{display:block;font-family:var(--titre);font-weight:500;font-size:15.5px;
  letter-spacing:.01em;color:#fff}
.cgn-chat__badge{display:inline-block;margin-top:3px;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or-clair);border:1px solid rgba(217,180,99,.45);padding:2px 7px}
.cgn-chat__fermer{background:none;border:0;color:#cfc9bd;font-size:24px;line-height:1;cursor:pointer;
  padding:0 2px;transition:color .3s}
.cgn-chat__fermer:hover{color:#fff}

/* ------------------------------------------------------------------- fil */
.cgn-chat__fil{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;
  background:var(--papier);scrollbar-width:thin}
.cgn-chat__msg{max-width:88%;padding:12px 14px;font-size:14.4px;line-height:1.5;white-space:pre-wrap}
.cgn-chat__msg--bot{align-self:flex-start;background:var(--pierre);border:1px solid var(--filet);
  color:var(--encre-2)}
.cgn-chat__msg--moi{align-self:flex-end;background:var(--encre);color:#efece4;border:1px solid var(--encre)}
.cgn-chat__msg--attente{display:flex;gap:5px;align-items:center}
.cgn-chat__msg--attente span{width:6px;height:6px;border-radius:50%;background:var(--or);
  animation:cgn-chat-point 1.1s infinite ease-in-out}
.cgn-chat__msg--attente span:nth-child(2){animation-delay:.15s}
.cgn-chat__msg--attente span:nth-child(3){animation-delay:.3s}
@keyframes cgn-chat-point{0%,80%,100%{opacity:.25;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-3px)}}

.cgn-chat__suggestions{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.cgn-chat__suggestion{background:transparent;border:1px solid var(--filet);color:var(--encre-2);
  font:inherit;font-size:12.6px;padding:8px 12px;cursor:pointer;
  transition:border-color .3s,color .3s,background .3s}
.cgn-chat__suggestion:hover{border-color:var(--or);color:var(--or-fonce);background:var(--pierre)}

/* ---------------------------------------------------------------- saisie */
.cgn-chat__forme{display:flex;gap:0;border-top:1px solid var(--filet);background:var(--papier)}
.cgn-chat__forme input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;
  padding:14px 15px;color:var(--encre)}   /* 16px : evite le zoom automatique sur iOS */
.cgn-chat__forme input:focus{outline:0}
.cgn-chat__forme button{border:0;background:var(--or);color:#fff;font-size:18px;width:52px;cursor:pointer;
  transition:background .3s}
.cgn-chat__forme button:hover{background:var(--encre)}
.cgn-chat__forme button:disabled{opacity:.5;cursor:default}

.cgn-chat__note{margin:0;padding:9px 15px 11px;font-size:11.4px;line-height:1.45;color:var(--gris);
  background:var(--pierre);border-top:1px solid var(--filet);
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.cgn-chat__note button{background:none;border:0;padding:0;font:inherit;font-size:11.4px;cursor:pointer;
  color:var(--or-fonce);text-decoration:underline;text-underline-offset:2px}

/* ---------------------------------------------------------------- charte */
.cgn-chat__charte{position:absolute;inset:0;background:var(--papier);padding:20px 18px;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s,transform .45s}
.cgn-chat.est-charte .cgn-chat__charte{opacity:1;transform:none;pointer-events:auto}
.cgn-chat__charte h3{margin:0;font-family:var(--titre);font-weight:500;font-size:1.12rem;line-height:1.25}
.cgn-chat__charte p{margin:0;font-size:13.6px;line-height:1.62;color:var(--encre-2)}
.cgn-chat__charte .cgn-chat__definition{border-left:2px solid var(--or);padding-left:14px}
.cgn-chat__charte ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.cgn-chat__charte li{font-size:13.2px;line-height:1.55;color:var(--encre-2);
  padding-left:17px;position:relative}
.cgn-chat__charte li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:1px;
  background:var(--or)}
.cgn-chat__charte li b{color:var(--encre);font-weight:600}
.cgn-chat__retour{align-self:flex-start;margin-top:4px;background:none;border:1px solid var(--filet);
  font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;
  cursor:pointer;color:var(--encre);transition:border-color .3s,color .3s}
.cgn-chat__retour:hover{border-color:var(--or);color:var(--or-fonce)}

/* ------------------------------------------------- clavier des telephones */
@media(max-width:560px){
  .cgn-chat.est-ouvert{right:0;bottom:0;left:0;top:0}
  .cgn-chat.est-ouvert .cgn-chat__panneau{position:fixed;inset:0;width:auto;
    height:var(--cgn-chat-hauteur,100%);border:0}
  .cgn-chat.est-clavier .cgn-chat__fil{padding-bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  .cgn-chat__bulle,.cgn-chat__panneau,.cgn-chat__charte{transition:none}
  .cgn-chat__msg--attente span{animation:none}
}