/* =========================================================================
   WIDGETS BD — Chatbot "Agent Benjamin" + A11y. Inspiré IFPA Poitiers v2.
   Vanilla, zéro dépendance, RGPD-friendly.
   ========================================================================= */

/* ====== CHATBOT "AGENT BENJAMIN" ======================================= */

#bd-chatbot-container {
  position: fixed;
  bottom: 90px; right: 20px;
  width: 360px; max-width: calc(100vw - 40px);
  border: 1px solid #ECE9E1;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(26,26,46,.20);
  background: #fff;
  font-family: inherit;
  display: none;
  z-index: 9998;
  max-height: 75vh;
  overflow: hidden;
  flex-direction: column;
  animation: bd-chat-in .25s ease-out;
}
@keyframes bd-chat-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

#bd-chatbot-header {
  background: linear-gradient(135deg, #1a3d34 0%, #2a5e51 100%);
  color: #fff;
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; font-size: .95rem;
}
#bd-chatbot-header .bd-chat-title { display: flex; align-items: center; gap: .55rem; }
#bd-chatbot-header .bd-chat-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #4FBE9A;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-weight: 700; font-size: .85rem;
}
#bd-chatbot-header .bd-chat-status {
  font-size: .72rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: .4rem;
  opacity: .85;
}
#bd-chatbot-header .bd-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4FBE9A; box-shadow: 0 0 0 3px rgba(79,190,154,.30);
}
#bd-chatbot-close {
  background: rgba(255,255,255,.15); border: none; color: #fff;
  cursor: pointer; font-size: 18px; line-height: 1;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
}
#bd-chatbot-close:hover, #bd-chatbot-close:focus-visible {
  background: rgba(255,255,255,.30); outline: 2px solid #fff; outline-offset: 2px;
}

#bd-chatbot-messages {
  height: 360px; overflow-y: auto;
  padding: 16px;
  background: linear-gradient(180deg, #F9F8F4 0%, #fff 100%);
  flex: 1;
  scrollbar-width: thin; scrollbar-color: #1a3d34 transparent;
}
#bd-chatbot-messages::-webkit-scrollbar { width: 6px; }
#bd-chatbot-messages::-webkit-scrollbar-thumb { background: #1a3d34; border-radius: 3px; }

.bd-chat-message {
  margin: 8px 0; padding: 10px 14px;
  border-radius: 16px; max-width: 85%;
  line-height: 1.45; font-size: .9rem;
  white-space: pre-wrap; word-wrap: break-word;
}
.bd-chat-user {
  background: #1a3d34; color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.bd-chat-bot {
  background: #F4F2EC; color: #1a1a1a;
  margin-right: auto;
  border-bottom-left-radius: 4px;
}
.bd-chat-bot a {
  color: #1a3d34; text-decoration: underline; font-weight: 600;
}

.bd-chat-typing { display: inline-flex; gap: 3px; padding: 6px 0; }
.bd-chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #1a3d34;
  animation: bd-typing 1.4s infinite ease-in-out;
}
.bd-chat-typing span:nth-child(2) { animation-delay: .2s; }
.bd-chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes bd-typing {
  0%,60%,100% { transform: scale(.6); opacity: .4; }
  30% { transform: scale(1); opacity: 1; }
}

.bd-chat-suggests { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.bd-chat-suggest {
  background: #fff;
  border: 1.5px solid #1a3d34;
  color: #1a3d34;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s;
}
.bd-chat-suggest:hover, .bd-chat-suggest:focus-visible {
  background: #1a3d34; color: #fff; outline: none;
}

/* Helper accessibilité : masque visuellement tout en restant lisible par les lecteurs d'écran */
.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#bd-chatbot-input {
  display: flex; padding: 12px;
  border-top: 1px solid #ECE9E1;
  background: #fff; gap: 8px;
  align-items: center;
}
#bd-user-input {
  flex: 1; padding: 10px 14px;
  border: 1.5px solid #ECE9E1;
  border-radius: 999px;
  font-size: .92rem; font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#bd-user-input:focus {
  border-color: #1a3d34;
  box-shadow: 0 0 0 3px rgba(26,61,52,.15);
}
#bd-send-button {
  padding: 0 14px;
  background: #1a3d34; color: #fff;
  border: none; border-radius: 50%;
  width: 40px; height: 40px;
  cursor: pointer; font-size: 18px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, transform .15s;
}
#bd-send-button:hover, #bd-send-button:focus-visible {
  background: #4FBE9A; transform: scale(1.06);
  outline: 2px solid #1a3d34; outline-offset: 2px;
}

#bd-chatbot-toggle {
  position: fixed; bottom: 20px; right: 20px;
  background: linear-gradient(135deg, #1a3d34 0%, #2a5e51 100%);
  color: #fff;
  border: none; border-radius: 50%;
  width: 62px; height: 62px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(26,61,52,.40);
  z-index: 9997;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
}
#bd-chatbot-toggle:hover, #bd-chatbot-toggle:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 14px 36px rgba(26,61,52,.50);
  outline: 3px solid #1a3d34; outline-offset: 3px;
}
#bd-chatbot-toggle svg { width: 26px; height: 26px; stroke: #fff; }
#bd-chatbot-toggle .bd-badge-new {
  position: absolute;
  top: -4px; right: -4px;
  background: #4FBE9A; border: 2px solid #fff;
  width: 14px; height: 14px; border-radius: 50%;
  animation: bd-pulse 2s ease-in-out infinite;
}
@keyframes bd-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(79,190,154,.7); }
  50% { box-shadow: 0 0 0 8px rgba(79,190,154,0); }
}

@media (max-width: 480px) {
  #bd-chatbot-container { right: 10px; left: 10px; width: auto; bottom: 90px; }
  #bd-chatbot-messages { height: 50vh; }
}

/* ====== A11Y — Bouton flottant + panneau ============================== */

.bd-a11y-fab {
  position: fixed;
  bottom: 1.25rem; left: 1.25rem;
  z-index: 9998;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #1a3d34 0%, #2a5e51 100%);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 8px 24px rgba(26,61,52,.40), 0 0 0 1px rgba(7,19,34,.1);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
}
.bd-a11y-fab:hover, .bd-a11y-fab:focus-visible {
  transform: scale(1.08);
  outline: 3px solid #4FBE9A; outline-offset: 3px;
}
.bd-a11y-fab svg { width: 28px; height: 28px; }

.bd-a11y-panel {
  position: fixed; bottom: 5.5rem; left: 1.25rem; z-index: 9999;
  width: min(340px, calc(100vw - 2.5rem));
  background: #fff; color: #071322;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(7,19,34,.45), 0 0 0 1px rgba(7,19,34,.1);
  padding: 1.2rem;
  display: none;
  font-family: inherit; font-size: 15px; line-height: 1.5;
}
.bd-a11y-panel[aria-hidden="false"] { display: block; }
.bd-a11y-panel h2 {
  font-size: 1.05rem; font-weight: 800;
  margin: 0 0 .8rem; color: #071322;
  display: flex; align-items: center; gap: .5rem;
}
.bd-a11y-panel ul {
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.bd-a11y-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding: .55rem .7rem;
  border-radius: 8px;
  background: #F4F2EC; cursor: pointer;
  transition: background .15s;
}
.bd-a11y-toggle:hover { background: #EBE7DB; }
.bd-a11y-toggle:focus-within { outline: 2px solid #1a3d34; outline-offset: 2px; }
.bd-a11y-toggle .bd-a11y-label { font-weight: 600; color: #071322; flex: 1; display: inline-flex; gap: .5rem; align-items: center; }
.bd-a11y-toggle .bd-a11y-label svg { width: 18px; height: 18px; opacity: .7; }
.bd-a11y-toggle .bd-a11y-switch {
  position: relative; width: 38px; height: 22px;
  flex-shrink: 0;
  background: #cfd2dd; border-radius: 999px;
  transition: background .2s;
}
.bd-a11y-toggle .bd-a11y-switch::before {
  content: ""; position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.bd-a11y-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bd-a11y-toggle input:checked ~ .bd-a11y-switch { background: #4FBE9A; }
.bd-a11y-toggle input:checked ~ .bd-a11y-switch::before { transform: translateX(16px); }
.bd-a11y-reset {
  width: 100%; padding: .6rem;
  background: #F4F2EC; color: #071322;
  border: 1px solid rgba(7,19,34,.15);
  border-radius: 8px;
  font-weight: 700; font-size: .9rem;
  cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.bd-a11y-reset:hover { background: #EBE7DB; }
.bd-a11y-panel .bd-a11y-note { font-size: .8rem; color: #5a627a; margin: .8rem 0 0; }

/* ====== OVERRIDES — modes accessibilité ============================== */

/* ---------- CONTRASTE ÉLEVÉ — pattern WCAG AAA noir/blanc + accents jaunes uniquement sur liens ---------- */
html.a11y-contrast { background: #000 !important; }
html.a11y-contrast body { background: #000 !important; color: #fff !important; }
html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4, html.a11y-contrast h5,
html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span, html.a11y-contrast div,
html.a11y-contrast strong, html.a11y-contrast em, html.a11y-contrast small,
html.a11y-contrast label, html.a11y-contrast th, html.a11y-contrast td {
  color: #fff !important; background-color: transparent !important;
}
html.a11y-contrast .hero, html.a11y-contrast .section--dark, html.a11y-contrast .section--alt,
html.a11y-contrast .page-body, html.a11y-contrast .cta-band,
html.a11y-contrast .site-header, html.a11y-contrast .site-footer {
  background: #000 !important; color: #fff !important;
}
html.a11y-contrast a:not(.btn) { color: #ffeb3b !important; text-decoration: underline !important; text-underline-offset: 3px !important; }
html.a11y-contrast a:not(.btn):visited { color: #ff9e9e !important; }
html.a11y-contrast .btn, html.a11y-contrast .btn-primary {
  background: #ffeb3b !important; color: #000 !important;
  border: 2px solid #fff !important; font-weight: 700 !important;
}
html.a11y-contrast .btn-ghost, html.a11y-contrast .btn-ghost-light {
  background: #000 !important; color: #fff !important;
  border: 2px solid #fff !important;
}
html.a11y-contrast .pillar-card, html.a11y-contrast .blog-card, html.a11y-contrast .partner-card,
html.a11y-contrast .case-study, html.a11y-contrast .home-approach-block,
html.a11y-contrast .faq-item, html.a11y-contrast .related-card,
html.a11y-contrast .en-clair, html.a11y-contrast .hero-proof,
html.a11y-contrast .blog-grid > article, html.a11y-contrast .cta-inline--strong {
  background: #000 !important; color: #fff !important;
  border: 2px solid #fff !important;
}
html.a11y-contrast img:not(.hero-photo):not(.hero-photo--full) {
  filter: grayscale(1) contrast(1.4) !important;
}
html.a11y-contrast .hero-title em, html.a11y-contrast h2 em, html.a11y-contrast h3 em {
  color: #ffeb3b !important; font-style: italic !important;
}
html.a11y-contrast .hero-eyebrow, html.a11y-contrast .section-eyebrow {
  color: #ffeb3b !important; background: #000 !important; border-color: #ffeb3b !important;
}
html.a11y-contrast input, html.a11y-contrast textarea, html.a11y-contrast select {
  background: #000 !important; color: #fff !important; border: 2px solid #fff !important;
}

/* ---------- MODE SOMBRE — vrai sombre profond et cohérent ---------- */
html.a11y-dark { background: #06080d !important; }
html.a11y-dark body { background: #06080d !important; color: #e8e9ee !important; }
html.a11y-dark h1, html.a11y-dark h2, html.a11y-dark h3, html.a11y-dark h4, html.a11y-dark h5 {
  color: #ffffff !important;
}
html.a11y-dark p, html.a11y-dark li, html.a11y-dark span, html.a11y-dark div,
html.a11y-dark strong, html.a11y-dark em, html.a11y-dark small,
html.a11y-dark label, html.a11y-dark td, html.a11y-dark th { color: #e8e9ee !important; }
html.a11y-dark a:not(.btn):not(.pillar-card):not(.blog-card):not(.related-card):not(.partner-card) {
  color: #6EE7B7 !important;
}

/* Sections principales : fond sombre */
html.a11y-dark .hero { background: #06080d !important; }
html.a11y-dark .section--alt, html.a11y-dark .section--dark, html.a11y-dark .page-body,
html.a11y-dark .cta-band, html.a11y-dark .site-footer {
  background: #06080d !important; color: #e8e9ee !important;
}
html.a11y-dark .site-header {
  background: #0a0f17 !important; border-bottom: 1px solid #1f2937 !important;
}
html.a11y-dark .nav-menu a:not(.btn) { color: #e8e9ee !important; }

/* Cards */
html.a11y-dark .pillar-card, html.a11y-dark .blog-card, html.a11y-dark .partner-card,
html.a11y-dark .case-study, html.a11y-dark .home-approach-block,
html.a11y-dark .faq-item, html.a11y-dark .related-card, html.a11y-dark .en-clair,
html.a11y-dark .cta-inline--strong, html.a11y-dark .hero-proof,
html.a11y-dark .blog-grid > article {
  background: #11161f !important; color: #e8e9ee !important;
  border-color: #1f2937 !important;
}

/* Boutons : conserver visibilité — texte clair sur fond vert pleinement contrasté */
html.a11y-dark .btn-primary {
  background: #4FBE9A !important; color: #06080d !important;
  border-color: #4FBE9A !important; font-weight: 700 !important;
}
html.a11y-dark .btn-ghost, html.a11y-dark .btn-ghost-light {
  background: transparent !important; color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

html.a11y-dark input, html.a11y-dark textarea, html.a11y-dark select {
  background: #11161f !important; color: #e8e9ee !important;
  border-color: #2a3147 !important;
}

/* Panneau a11y lui-même en sombre */
html.a11y-dark .bd-a11y-panel { background: #11161f; color: #e8e9ee; }
html.a11y-dark .bd-a11y-toggle { background: #1a2030; }
html.a11y-dark .bd-a11y-toggle:hover { background: #232c46; }
html.a11y-dark .bd-a11y-toggle .bd-a11y-label { color: #e8e9ee; }
html.a11y-dark .bd-a11y-reset { background: #1a2030; color: #e8e9ee; border-color: #2a3147; }
html.a11y-dark .bd-a11y-panel h2 { color: #ffffff; }

/* Chatbot en mode sombre */
html.a11y-dark #bd-chatbot-container { background: #11161f; border-color: #1f2937; }
html.a11y-dark #bd-chatbot-messages { background: linear-gradient(180deg, #06080d 0%, #11161f 100%); }
html.a11y-dark .bd-chat-bot { background: #1a2030; color: #e8e9ee; }
html.a11y-dark #bd-chatbot-input { background: #11161f; border-top-color: #1f2937; }
html.a11y-dark #bd-user-input { background: #06080d; color: #e8e9ee; border-color: #2a3147; }

/* Texte agrandi */
html.a11y-large { font-size: 118%; }
html.a11y-large h1 { font-size: 2.6rem !important; }
html.a11y-large h2 { font-size: 2rem !important; }
html.a11y-large h3 { font-size: 1.5rem !important; }
html.a11y-large p, html.a11y-large li, html.a11y-large a, html.a11y-large span { line-height: 1.7 !important; }

/* Police lisible (dyslexie) */
html.a11y-readable body, html.a11y-readable * {
  font-family: 'Atkinson Hyperlegible', 'Verdana', 'Inter', sans-serif !important;
  letter-spacing: .03em !important;
  word-spacing: .08em !important;
  line-height: 1.75 !important;
}
html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3, html.a11y-readable h4 {
  letter-spacing: .01em !important; line-height: 1.3 !important;
}

/* Animations réduites */
html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* Liens soulignés */
html.a11y-underline a:not(.btn):not(.brand):not(.pillar-card):not(.blog-card):not(.related-card):not(.partner-card) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* Mobile FAB */
@media (max-width: 600px) {
  .bd-a11y-fab { width: 48px; height: 48px; bottom: 1rem; left: 1rem; }
  .bd-a11y-fab svg { width: 24px; height: 24px; }
  .bd-a11y-panel { bottom: 4.5rem; left: 1rem; }
  #bd-chatbot-toggle { width: 54px; height: 54px; bottom: 1rem; right: 1rem; }
}

/* Print */
@media print {
  .bd-a11y-fab, .bd-a11y-panel,
  #bd-chatbot-toggle, #bd-chatbot-container { display: none !important; }
}