/* ================================================================
   COCO — assistant Monkeys Academy (chatbot v1, réponses à boutons)
   Tout est isolé sous #coco et les variables sont préfixées --cc-
   pour ne jamais entrer en conflit avec style.css (ex. --teal du site).
   ================================================================ */
#coco{
  --cc-teal:#159a96; --cc-teal-d:#0e7471;
  --cc-jaune:#f6c445; --cc-creme:#fffaf0; --cc-texte:#24302f; --cc-gris:#6b7675;
  --cc-bulle-bot:#ffffff; --cc-bulle-user:#159a96;
  --cc-ang:#1f5fae; --cc-esp:#c8322b; --cc-tec:#1b7a43;
  --cc-brun:#8b5a32; --cc-brun-d:#6e4524; --cc-peau:#f2c99a; --cc-trait:#1f2523;
  --cc-bd:"Comic Neue","Chalkboard SE","Comic Sans MS","Nunito Sans",system-ui,sans-serif;
  --cc-banniere:46px; /* hauteur du bandeau des félicitations (fixe en bas) */
  --cc-drap-ang:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='xMidYMid slice'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
  --cc-drap-esp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40' preserveAspectRatio='none'%3E%3Crect width='60' height='40' fill='%23c60b1e'/%3E%3Crect y='10' width='60' height='20' fill='%23ffc400'/%3E%3C/svg%3E");
  --cc-drap-tec:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect width='56' height='56' fill='%231b7a43'/%3E%3Cg stroke='%2343a867' stroke-width='2.5' fill='none' stroke-linecap='round'%3E%3Cpath d='M0 14h16l7 7h14M56 34H40l-7 7v15M28 0v9M10 56V40l7-7h9M44 0v10l6 6h6'/%3E%3C/g%3E%3Cg fill='%23d9b44a' stroke='%230f4f2a' stroke-width='1'%3E%3Ccircle cx='37' cy='21' r='3.2'/%3E%3Ccircle cx='28' cy='9' r='3.2'/%3E%3Ccircle cx='26' cy='33' r='3.2'/%3E%3Ccircle cx='40' cy='34' r='3.2'/%3E%3Ccircle cx='50' cy='16' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
  font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
#coco *{box-sizing:border-box}

/* ---------- singe : sort de derrière le bandeau des félicitations ---------- */
#cc-mk{position:fixed;right:20px;bottom:var(--cc-banniere);width:118px;z-index:90;cursor:pointer;
  transform:translateY(105%);transition:transform .9s cubic-bezier(.2,1.3,.4,1);
  -webkit-tap-highlight-color:transparent;border:0;background:none;padding:0}
#cc-mk.peek{transform:translateY(34%)}
#cc-mk.peek:hover,#cc-mk.peek:focus-visible{transform:translateY(26%)}
#cc-mk svg{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
#cc-arm{transform-origin:94px 112px}
#cc-mk.wave #cc-arm{animation:cc-wave .55s ease-in-out 4 alternate}
@keyframes cc-wave{from{transform:rotate(-8deg)}to{transform:rotate(22deg)}}
#coco .blink{animation:cc-blink 4s infinite}
@keyframes cc-blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}

#cc-bubble{position:fixed;right:136px;bottom:calc(var(--cc-banniere) + 70px);z-index:91;background:#fff;color:var(--cc-texte);font-family:var(--cc-bd);font-weight:700;
  padding:10px 16px;border:3px solid var(--cc-trait);border-radius:22px;box-shadow:4px 4px 0 rgba(0,0,0,.35);font-size:17px;
  opacity:0;transform:translateY(8px) scale(.9);transition:.35s ease;pointer-events:none}
#cc-bubble::before,#cc-bubble::after{content:"";position:absolute;clip-path:polygon(0 0,100% 100%,0 62%)}
#cc-bubble::before{right:-24px;bottom:4px;width:27px;height:22px;background:var(--cc-trait)}
#cc-bubble::after{right:-15px;bottom:10px;width:18px;height:13px;background:#fff}
#cc-bubble.show{opacity:1;transform:none;pointer-events:auto;cursor:pointer}

/* ---------- fenêtre de chat ---------- */
#cc-chat{position:fixed;right:28px;bottom:calc(var(--cc-banniere) + 132px);width:min(380px,calc(100vw - 40px));height:min(540px,calc(100vh - var(--cc-banniere) - 160px));
  background:var(--cc-creme);color:var(--cc-texte);border:3.5px solid var(--cc-trait);border-radius:30px;box-shadow:7px 7px 0 rgba(0,0,0,.35);z-index:110;
  display:flex;flex-direction:column;opacity:0;transform:translateY(20px) scale(.97);
  transform-origin:bottom right;pointer-events:none;transition:.28s ease}
#cc-chat.open{opacity:1;transform:none;pointer-events:auto}
#cc-chat::before,#cc-chat::after{content:"";position:absolute;right:46px;clip-path:polygon(0 0,100% 0,78% 100%)}
#cc-chat::before{bottom:-36px;width:44px;height:36px;background:var(--cc-trait)}
#cc-chat::after{bottom:-28px;right:51px;width:34px;height:30px;background:#fff}
#coco .hd{background:var(--cc-teal);color:#fff;display:flex;align-items:center;gap:10px;padding:12px 14px 12px 16px;border-radius:26px 26px 0 0;border-bottom:3px solid var(--cc-trait)}
#coco .hd .av{cursor:pointer;transition:transform .15s;width:42px;height:42px;border-radius:50%;background:#fff;border:2.5px solid var(--cc-trait);flex:none;overflow:hidden;display:grid;place-items:center}
#coco .hd .av svg{width:46px;margin-top:10px}
#coco .hd .av:hover{transform:scale(1.08)}
#coco .hd .t{flex:1;line-height:1.2}
#coco .hd .t b{display:block;font-size:19px;font-family:var(--cc-bd)}
#coco .hd .t small{opacity:.85;font-size:12px}
#coco .hd button{border:0;background:rgba(255,255,255,.18);color:#fff;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer;line-height:1}
#coco .msgs{flex:1;overflow-y:auto;padding:14px 12px 6px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
#coco .b{max-width:88%;padding:10px 14px;border-radius:20px;border:2px solid var(--cc-trait);font-size:15px;line-height:1.45;animation:cc-pop .25s ease}
#coco .b.bot.accueil{white-space:pre-line;margin:4px 0 14px;align-self:center;text-align:center;font-size:16px;font-weight:700}
#coco .b.accueil .cur{display:inline-block;width:2px;height:1.05em;background:var(--cc-texte);margin-left:2px;vertical-align:-2px;animation:cc-cur .6s steps(1) infinite}
@keyframes cc-cur{50%{opacity:0}}
#coco .b.bot{background:var(--cc-bulle-bot);align-self:flex-start;border-bottom-left-radius:6px;box-shadow:3px 3px 0 rgba(0,0,0,.12)}
#coco .b.user{background:var(--cc-bulle-user);color:#fff;align-self:flex-end;border-bottom-right-radius:6px;box-shadow:3px 3px 0 rgba(0,0,0,.12)}
#coco .b b{color:var(--cc-teal-d)}
#coco .b a{color:var(--cc-teal-d);font-weight:700}
#coco .b ul{margin:6px 0 0;padding-left:18px}
@keyframes cc-pop{from{opacity:0;transform:translateY(6px)}}
#coco .chips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0 4px;animation:cc-pop .25s ease}
#coco .chip{font:inherit;font-size:14px;font-weight:800;border:2px solid var(--cc-teal);color:var(--cc-teal-d);background:#fff;border-radius:999px;padding:8px 13px;cursor:pointer;text-align:left}
#coco .chip:hover,#coco .chip:focus-visible{background:var(--cc-teal);color:#fff;outline:none}
#coco .chip.ang{border-color:var(--cc-ang);color:var(--cc-ang)} #coco .chip.esp{border-color:var(--cc-esp);color:var(--cc-esp)} #coco .chip.tec{border-color:var(--cc-tec);color:var(--cc-tec)}
#coco .chip.ang:hover,#coco .chip.ang:focus-visible{background:var(--cc-ang);color:#fff} #coco .chip.esp:hover,#coco .chip.esp:focus-visible{background:var(--cc-esp);color:#fff} #coco .chip.tec:hover,#coco .chip.tec:focus-visible{background:var(--cc-tec);color:#fff}
#coco .chip.fill.ang{background:var(--cc-ang);color:#fff} #coco .chip.fill.esp{background:var(--cc-esp);color:#fff} #coco .chip.fill.tec{background:var(--cc-tec);color:#fff}
#coco .chip.fill{border-color:var(--cc-trait)!important;box-shadow:2px 2px 0 rgba(0,0,0,.25)}
#coco .titre{align-self:center;margin:6px 0 4px;padding:9px 22px;border:3px solid var(--cc-trait);border-radius:999px;font-family:var(--cc-bd);font-weight:700;font-size:20px;color:#fff;background:var(--cc-teal);box-shadow:3px 3px 0 rgba(0,0,0,.25);animation:cc-pop .25s ease;text-align:center}
#coco .titre.ang{background:var(--cc-ang)} #coco .titre.esp{background:var(--cc-esp)} #coco .titre.tec{background:var(--cc-tec)}
#coco .chips.center{justify-content:center}
#coco .chips:not(.mats){flex-direction:column;align-items:stretch}
#coco .chips:not(.mats) .chip{text-align:center;font-size:16px;padding:10px 14px}
#coco .mats{margin-bottom:14px;padding:4px 4px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
#coco .chip.drap,#coco .titre.drap{color:#fff;border:3px solid var(--cc-trait)!important;background-size:cover;background-position:center;
  text-shadow:-1.5px -1.5px 0 #1f2523,1.5px -1.5px 0 #1f2523,-1.5px 1.5px 0 #1f2523,1.5px 1.5px 0 #1f2523,2px 3px 0 #1f2523;
  font-family:var(--cc-bd);font-weight:700;box-shadow:3px 3px 0 rgba(0,0,0,.3);transition:transform .15s,box-shadow .15s}
#coco .chip.drap{min-height:58px;font-size:17px;border-radius:16px;padding:8px 6px;text-align:center;letter-spacing:.02em}
#coco .chip.drap:hover,#coco .chip.drap:focus-visible{transform:translateY(-4px) scale(1.03);box-shadow:4px 8px 0 rgba(0,0,0,.35),0 0 0 4px var(--cc-jaune);color:#fff;filter:brightness(1.12) saturate(1.15);outline:none}
#coco .chip.drap.ang,#coco .titre.drap.ang{background-image:var(--cc-drap-ang)} #coco .chip.drap.esp,#coco .titre.drap.esp{background-image:var(--cc-drap-esp)} #coco .chip.drap.tec,#coco .titre.drap.tec{background-image:var(--cc-drap-tec);background-size:56px 56px}
#coco .titre.drap{font-size:26px;padding:16px 34px;border-radius:20px}
#coco .chip.cta{background:var(--cc-jaune);border-color:var(--cc-trait);color:#3d2f00;box-shadow:2px 2px 0 rgba(0,0,0,.25)}
#coco .chip.cta:hover{background:#e9b52f;color:#3d2f00}
#coco .chip.ghost{border-color:#cfc5b0;color:var(--cc-gris)}
#coco .chip.ghost:hover{background:#eee6d6;color:var(--cc-texte)}
#coco .ft{display:flex;justify-content:space-between;align-items:center;padding:9px 18px;border-top:2px dashed #e2d6bd;background:#fff;border-radius:0 0 26px 26px;font-size:12px;color:var(--cc-gris)}
#coco .ft button{font:inherit;font-size:13px;font-weight:800;border:0;background:none;color:var(--cc-teal-d);cursor:pointer;padding:4px 0}

@media (max-width:700px){
  #coco{--cc-banniere:40px}
}
@media (max-width:480px){
  #cc-mk{width:92px;right:12px}
  #cc-bubble{right:108px;bottom:calc(var(--cc-banniere) + 52px);font-size:15px}
  #cc-chat{right:10px;left:10px;bottom:calc(var(--cc-banniere) + 104px);width:auto;height:calc(100vh - var(--cc-banniere) - 124px);max-height:640px}
  #cc-chat::before{right:32px} #cc-chat::after{right:37px}
}
@media (prefers-reduced-motion:reduce){
  #coco *,#coco *::before,#coco *::after{animation:none!important;transition-duration:.01ms!important}
}

/* ===== FIRE 21j : Coco plus visible ===== */
#cc-mk{width:150px}
#cc-mk.peek{transform:translateY(18%)}
#cc-mk.peek:hover,#cc-mk.peek:focus-visible{transform:translateY(10%)}
#cc-mk::before{content:"";position:absolute;left:12%;right:12%;top:18%;aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle, rgba(246,196,69,.55) 0%, rgba(246,196,69,0) 68%);animation:cc-halo 2.8s ease-in-out infinite}
@keyframes cc-halo{0%,100%{transform:scale(.85);opacity:.55}50%{transform:scale(1.15);opacity:1}}
#cc-bubble{right:166px;bottom:calc(var(--cc-banniere) + 96px);background:var(--cc-jaune);font-size:19px}
#cc-bubble::after{background:var(--cc-jaune)}
#cc-bubble.show{animation:cc-hop 1.2s ease-in-out 2}
@keyframes cc-hop{0%,100%{transform:none}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){#cc-mk::before,#cc-bubble.show{animation:none}}
@media (max-width:600px){#cc-mk{width:110px}#cc-bubble{right:122px;bottom:calc(var(--cc-banniere) + 66px);font-size:16px}}
#cc-chat{bottom:calc(var(--cc-banniere) + 158px);height:min(540px,calc(100vh - var(--cc-banniere) - 186px))}