/* =========================
   HEADER – FIX (logo gauche | nav centre | langues droite)
   ========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 10;

  /* On force le header à rester LTR même si la page passe en RTL (ar) */
  direction: ltr;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;

  padding: 12px 40px;
  background: rgba(15,23,42,0.85);
  backdrop-filter: blur(6px);
}

/* LEFT */
.header-left{
  display:flex;
  align-items:center;
}

/* Logo */
.logo-link{ display:inline-block; cursor:pointer; }
.logo-link img{ display:block; }
.logo-link:hover{ opacity:0.92; }

.logo-main{
  height: 100px;
  width: auto;
  animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.015); }
}

/* CENTER NAV (vraiment centré) */
.header-center{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.header-center a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  padding: 8px 12px;
  border-radius: 999px;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.header-center a.active{
  background: rgba(255,255,255,0.12);
  opacity: 0.9;
  transform: scale(0.95);
  pointer-events:none;
}

/* RIGHT */
.header-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* Lang switch (plus de position:fixed !) */
.lang-switch{
  display:flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}

.lang-switch button{
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  transition: transform .25s ease, opacity .25s ease;
}

.lang-switch button img{
  width: 28px;
  height: 28px;
  display:block;
  border-radius: 50%;
}

.lang-switch button:hover{ transform: scale(1.08); }

html[lang="fr"] .lang-switch button:nth-child(1),
html[lang="en"] .lang-switch button:nth-child(2),
html[lang="ar"] .lang-switch button:nth-child(3){
  transform: scale(0.85);
  opacity: 0.6;
  pointer-events:none;
}

/* Mobile */
@media (max-width: 768px){
  .site-header{
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px 14px;
  }

  .logo-main{ height: 48px; }

  .header-center{
    grid-column: 1 / -1;
    justify-content: center;
  }

  .header-center a{
    padding: 7px 9px;
    font-size: 14px;
  }
}


/* ── Intel Meca Chatbot Widget ── */
#im-chat-toggle {
  position: fixed; bottom: 32px; right: 32px;
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg, #00b4ff, #0066cc);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(0,180,255,.5);
  animation: im-pulse 2.5s infinite;
  transition: transform .2s; z-index: 10000;
}
#im-chat-toggle:hover { transform: scale(1.1); }
#im-chat-toggle svg { width: 28px; height: 28px; fill: #fff; }
@keyframes im-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,180,255,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(0,180,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,180,255,0); }
}
#im-chat-window {
  position: fixed; bottom: 108px; right: 32px;
  width: 400px; max-height: 600px;
  background: #0d1520;
  border: 1px solid rgba(0,180,255,.2); border-radius: 16px;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 40px rgba(0,180,255,.06);
  transform: scale(.92) translateY(20px); opacity: 0;
  pointer-events: none;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  z-index: 9999; overflow: hidden;
  font-family: 'Syne', sans-serif;
}
#im-chat-window.im-open {
  transform: scale(1) translateY(0); opacity: 1; pointer-events: all;
}
.im-header {
  background: linear-gradient(135deg, #0a1828, #091420);
  border-bottom: 1px solid rgba(0,180,255,.15);
  padding: 16px 20px; display: flex; align-items: center; gap: 12px;
}
.im-header-avatar {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, #00b4ff22, #0066cc33);
  border: 1.5px solid rgba(0,180,255,.4); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.im-header-avatar svg { width: 22px; height: 22px; }
.im-header-info { flex: 1; }
.im-header-name { font-size: 14px; font-weight: 700; color: #e8f4ff; letter-spacing: .04em; }
.im-header-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: #5a8fa8;
  font-family: 'Share Tech Mono', monospace; margin-top: 2px;
}
.im-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #00e676; box-shadow: 0 0 6px #00e676;
  animation: im-blink 2s infinite;
}
@keyframes im-blink { 0%,100%{opacity:1} 50%{opacity:.4} }
.im-close {
  background: none; border: none; cursor: pointer;
  color: #3a6a8a; font-size: 20px; padding: 4px; transition: color .2s;
}
.im-close:hover { color: #00b4ff; }
.im-lang-tabs {
  display: flex; border-bottom: 1px solid rgba(0,180,255,.1); background: #091420;
}
.im-lang-tab {
  flex: 1; padding: 8px; background: none; border: none; cursor: pointer;
  font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 600;
  color: #3a6a8a; transition: all .2s; border-bottom: 2px solid transparent;
}
.im-lang-tab.im-active { color: #00b4ff; border-bottom-color: #00b4ff; }
.im-lang-tab:hover { color: #7dd0f5; }
.im-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; max-height: 360px;
  scrollbar-width: thin; scrollbar-color: #1a3a5a transparent;
}
.im-messages::-webkit-scrollbar { width: 4px; }
.im-messages::-webkit-scrollbar-thumb { background: #1a3a5a; border-radius: 4px; }
.im-msg { display: flex; gap: 8px; animation: im-fadeIn .3s ease; }
@keyframes im-fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.im-msg.im-bot { align-items: flex-start; }
.im-msg.im-user { align-items: flex-end; flex-direction: row-reverse; }
.im-avatar {
  width: 28px; height: 28px; flex-shrink: 0;
  background: linear-gradient(135deg, #00b4ff22, #0066cc44);
  border: 1px solid rgba(0,180,255,.3); border-radius: 7px;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.im-bubble {
  max-width: 78%; padding: 10px 14px;
  border-radius: 12px; font-size: 13.5px; line-height: 1.55;
}
.im-msg.im-bot .im-bubble {
  background: #0f1e30; border: 1px solid rgba(0,180,255,.12);
  color: #c8dff0; border-top-left-radius: 3px;
}
.im-msg.im-user .im-bubble {
  background: linear-gradient(135deg, #005a9e, #0080cc);
  color: #fff; border-top-right-radius: 3px;
}
.im-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.im-chip {
  padding: 5px 12px; background: transparent;
  border: 1px solid rgba(0,180,255,.3); border-radius: 20px;
  color: #5ab8e8; font-size: 12px; font-family: 'Syne', sans-serif;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.im-chip:hover { background: rgba(0,180,255,.1); border-color: #00b4ff; color: #00d4ff; }
.im-typing { display: flex; align-items: center; gap: 4px; padding: 8px 4px; }
.im-typing span {
  width: 7px; height: 7px; background: #00b4ff;
  border-radius: 50%; opacity: .6; animation: im-bounce .9s infinite;
}
.im-typing span:nth-child(2) { animation-delay: .15s; }
.im-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes im-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-8px)} }
.im-input-area {
  padding: 12px 16px; border-top: 1px solid rgba(0,180,255,.1);
  display: flex; gap: 8px; align-items: flex-end; background: #091420;
}
#im-input {
  flex: 1; background: #0d1f33; border: 1px solid rgba(0,180,255,.2);
  border-radius: 10px; color: #c8dff0; font-family: 'Syne', sans-serif;
  font-size: 13px; padding: 10px 14px; resize: none; outline: none;
  max-height: 100px; min-height: 40px; transition: border-color .2s; line-height: 1.4;
}
#im-input::placeholder { color: #2a5a7a; }
#im-input:focus { border-color: rgba(0,180,255,.5); }
#im-send {
  width: 40px; height: 40px; flex-shrink: 0;
  background: linear-gradient(135deg, #00b4ff, #0066cc);
  border: none; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s, transform .15s;
}
#im-send:hover { opacity: .85; transform: scale(1.05); }
#im-send:disabled { opacity: .4; cursor: default; transform: none; }
#im-send svg { width: 18px; height: 18px; fill: #fff; }
.im-rtl { direction: rtl; text-align: right; }
@media (max-width: 480px) {
  #im-chat-window { width: calc(100vw - 24px); right: 12px; bottom: 90px; }
  #im-chat-toggle { bottom: 20px; right: 20px; }
}