/* ==========================================================================
   Exerce-Ease — Thème « Salle d'opérations » pour les pages joueur
   Couche de style superposée : ne modifie aucune logique.
   Pour revenir à l'ancien look : retirer les 2 lignes ee-theme dans le <head>.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ---------- Jetons de couleur ---------- */
html.ee[data-ee-theme="dark"]{
  --ee-bg:#07090d; --ee-bg2:#0b0e13; --ee-surface:#0f1319; --ee-raised:#161c24;
  --ee-input:#0a0d12; --ee-line:#1f2630; --ee-line2:#2b333e;
  --ee-text:#ece8de; --ee-text2:#c6cad1; --ee-muted:#8e97a4;
  --ee-accent:#d4ae62; --ee-accent-text:#e2bf78; --ee-on-accent:#15110a;
  --ee-accent-soft:rgba(212,174,98,.13); --ee-accent-line:rgba(212,174,98,.45);
  --ee-danger:#e0424d; --ee-danger-text:#ff8a92; --ee-danger-soft:rgba(224,66,77,.13);
  --ee-success:#4cc38a; --ee-success-soft:rgba(76,195,138,.13);
  --ee-grid:rgba(255,255,255,.022); --ee-shadow:0 18px 50px rgba(0,0,0,.45);
  --ee-shadow-sm:0 1px 0 rgba(255,255,255,.03) inset;
  color-scheme: dark;
}
html.ee[data-ee-theme="light"]{
  --ee-bg:#f4f2ed; --ee-bg2:#fbfaf7; --ee-surface:#ffffff; --ee-raised:#f4f1ea;
  --ee-input:#fbfaf8; --ee-line:#e3ded3; --ee-line2:#d2cbbd;
  --ee-text:#16181d; --ee-text2:#2f333a; --ee-muted:#5d6570;
  --ee-accent:#c9a04e; --ee-accent-text:#86631c; --ee-on-accent:#15110a;
  --ee-accent-soft:rgba(201,160,78,.14); --ee-accent-line:rgba(160,120,40,.45);
  --ee-danger:#d23542; --ee-danger-text:#b01f2c; --ee-danger-soft:rgba(210,53,66,.09);
  --ee-success:#1f9a62; --ee-success-soft:rgba(31,154,98,.1);
  --ee-grid:rgba(20,20,30,.035); --ee-shadow:0 14px 36px rgba(30,28,20,.09);
  --ee-shadow-sm:0 1px 2px rgba(30,28,20,.05);
  color-scheme: light;
}

/* ---------- Base ---------- */
html.ee body{
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif !important;
  color:var(--ee-text) !important;
  background:var(--ee-bg) !important;
  background-image:
    linear-gradient(var(--ee-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--ee-grid) 1px,transparent 1px) !important;
  background-size:48px 48px !important;
  background-attachment:fixed !important;
}
html.ee body::before, html.ee body::after{ display:none !important; }
html.ee h1,html.ee h2,html.ee h3,html.ee h4,html.ee h5,html.ee h6{
  color:var(--ee-text) !important; font-family:"IBM Plex Sans",system-ui,sans-serif !important;
  font-weight:600 !important; letter-spacing:0 !important; text-shadow:none !important;
}
html.ee .container > h3.text-center,
html.ee .container > h2.text-center{
  font-family:"Cormorant Garamond",Georgia,serif !important; font-size:34px !important; margin:28px 0 18px !important;
}
html.ee a{ color:var(--ee-accent-text); }
html.ee .text-muted, html.ee small.text-muted{ color:var(--ee-muted) !important; }
html.ee ::selection{ background:var(--ee-accent-soft); }
html.ee *::-webkit-scrollbar{ width:10px; height:10px; }
html.ee *::-webkit-scrollbar-thumb{ background:var(--ee-line2) !important; border-radius:999px; border:2px solid transparent; background-clip:padding-box !important; }
html.ee *::-webkit-scrollbar-track{ background:transparent !important; }

/* ---------- En-tête ---------- */
html.ee .navbar, html.ee .top-bar{
  background:var(--ee-bg2) !important; border-bottom:1px solid var(--ee-line) !important;
  box-shadow:none !important; backdrop-filter:none !important;
  padding-top:10px !important; padding-bottom:10px !important; min-height:68px;
}
html.ee .navbar-text{ color:var(--ee-text2) !important; font-weight:500 !important; font-size:13px !important; line-height:1.45 !important; }
html.ee .ee-brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
html.ee .ee-brand img{ width:42px !important; height:42px !important; margin:0 !important; filter:none !important; border-radius:50%; box-shadow:0 0 0 1px var(--ee-accent-line); }
html.ee .ee-brand-name{ font-family:"Cormorant Garamond",Georgia,serif; font-size:24px; font-weight:600; line-height:1; color:var(--ee-text); letter-spacing:.3px; }
html.ee .ee-brand-name b{ color:var(--ee-danger); font-weight:600; }
html.ee .ee-brand-tag{ display:block; margin-top:3px; font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ee-muted); }

html.ee .logout-btn, html.ee .ee-toggle{
  width:42px; height:42px; display:inline-flex !important; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--ee-line2); background:transparent; color:var(--ee-text2);
  cursor:pointer; margin-left:10px; transition:background .15s,border-color .15s; padding:0;
}
html.ee .logout-btn:hover, html.ee .ee-toggle:hover{ background:var(--ee-raised); border-color:var(--ee-accent-line); }
html.ee .logout-btn svg{ color:var(--ee-danger); }
html.ee .ee-toggle-floating{ position:fixed; top:14px; right:16px; z-index:2000; background:var(--ee-surface); }

/* ---------- Barre des canaux ---------- */
html.ee .menu-bar{
  background:color-mix(in srgb,var(--ee-bg2) 88%,transparent) !important;
  backdrop-filter:blur(12px) !important; border:0 !important; border-bottom:1px solid var(--ee-line) !important;
  box-shadow:none !important; margin-top:0 !important; padding:10px 12px !important; gap:6px !important;
}
html.ee .menu-bar .btn{
  width:auto !important; min-width:0 !important; min-height:42px; padding:9px 16px !important;
  border-radius:10px !important; background:transparent !important; border:1px solid transparent !important;
  color:var(--ee-text2) !important; font-weight:500 !important; font-size:14px !important;
  box-shadow:none !important; transform:none !important; filter:none !important;
  transition:background .15s,border-color .15s,color .15s !important;
}
html.ee .menu-bar .btn::before, html.ee .menu-bar .btn::after{ display:none !important; }
html.ee .menu-bar .btn:hover{ background:var(--ee-raised) !important; color:var(--ee-text) !important; border-color:var(--ee-line) !important; }
html.ee .menu-bar .btn.ee-active{ background:var(--ee-raised) !important; color:var(--ee-text) !important; border-color:var(--ee-accent-line) !important; box-shadow:inset 0 -2px 0 var(--ee-accent) !important; }
html.ee .menu-bar a#iaBtn{ color:var(--ee-accent-text) !important; border-color:var(--ee-accent-line) !important; background:var(--ee-accent-soft) !important; }
html.ee .menu-bar .btn .alert-indicator{
  top:-6px !important; right:-6px !important; width:18px !important; height:18px !important;
  background:var(--ee-danger) !important; border:2px solid var(--ee-bg2) !important;
  box-shadow:0 0 0 0 rgba(224,66,77,.55) !important; color:#fff !important;
  font-size:10px !important; font-weight:700 !important; line-height:14px !important;
  animation:ee-ping 1.8s ease-out infinite;
}
@keyframes ee-ping{ 0%{box-shadow:0 0 0 0 rgba(224,66,77,.55)} 80%,100%{box-shadow:0 0 0 8px rgba(224,66,77,0)} }

/* ---------- Cartes / panneaux ---------- */
html.ee .column-box{ background:var(--ee-surface) !important; border:1px solid var(--ee-line) !important; border-radius:16px !important; box-shadow:var(--ee-shadow-sm) !important; backdrop-filter:none !important; padding:20px !important; color:var(--ee-text) !important; }
/* Quand la colonne ne sert que de conteneur à d'autres panneaux, elle devient transparente */
html.ee .column-box:has(> .messages-box, > .internal-messaging-box, > .received-messages-box, > .messages-sent-block, > .chat-box, > .chat-messages-box){ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
html.ee .messages-box, html.ee .internal-messaging-box, html.ee .received-messages-box, html.ee .messages-sent-block, html.ee .chat-box, html.ee .chat-messages-box{ padding:18px !important; }
html.ee .messages-box, html.ee .internal-messaging-box, html.ee .received-messages-box,
html.ee .sent-messages-box, html.ee .messages-sent-block, html.ee .chat-box,
html.ee .chat-messages-box, html.ee .message-container, html.ee .call-bubble,
html.ee .action-container, html.ee .chart-container, html.ee .qa-card, html.ee .ai-card,
html.ee .exercise-box, html.ee .login-container, html.ee .selector-box, html.ee .participant-box, html.ee .action-box{
  background:var(--ee-surface) !important; border:1px solid var(--ee-line) !important;
  border-radius:16px !important; box-shadow:var(--ee-shadow-sm) !important;
  backdrop-filter:none !important; color:var(--ee-text) !important;
}
html.ee .messages-box h5, html.ee .internal-messaging-box h5, html.ee .received-messages-box h5,
html.ee .messages-sent-block h5, html.ee .chat-box h5, html.ee .chat-messages-box h5{
  font-size:15px !important; margin-bottom:12px !important;
}
html.ee .chart-container::before, html.ee .call-bubble::before{ display:none !important; }
html.ee .message-card{
  background:var(--ee-raised) !important; border:1px solid var(--ee-line) !important;
  border-radius:12px !important; box-shadow:none !important; color:var(--ee-text) !important;
}
html.ee .message-date{ font-family:"IBM Plex Mono",monospace !important; font-size:11px !important; color:var(--ee-muted) !important; }
html.ee .message-sender{ color:var(--ee-accent-text) !important; }
html.ee .message-content{ color:var(--ee-text2) !important; }
html.ee .messages-box ul li{ color:var(--ee-text2); }
html.ee .messages-box ul li::marker{ color:var(--ee-accent); }
html.ee .chat-message{ border-radius:12px !important; border:0 !important; }

/* ---------- Formulaires ---------- */
html.ee .form-control, html.ee .form-select, html.ee textarea, html.ee select, html.ee input[type="text"],
html.ee input[type="email"], html.ee input[type="password"], html.ee input[type="number"]{
  background-color:var(--ee-input) !important; color:var(--ee-text) !important;
  border:1px solid var(--ee-line2) !important; border-radius:10px !important; box-shadow:none !important;
  font-family:inherit !important;
}
html.ee .form-control:focus, html.ee .form-select:focus, html.ee textarea:focus{
  border-color:var(--ee-accent) !important; box-shadow:0 0 0 3px var(--ee-accent-soft) !important;
}
html.ee .form-control::placeholder, html.ee textarea::placeholder{ color:var(--ee-muted) !important; opacity:1; }
html.ee .form-label, html.ee label{ color:var(--ee-muted) !important; font-size:13px; font-weight:500 !important; }
html.ee .form-select, html.ee select.form-control:not([multiple]){
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e97a4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat:no-repeat !important; background-position:right .75rem center !important;
  background-size:14px 10px !important; padding-right:2.25rem !important; appearance:none;
}

/* ---------- Boutons ---------- */
html.ee .btn{ border-radius:10px !important; font-weight:600 !important; box-shadow:none !important; transform:none !important; }
html.ee .btn-primary, html.ee .btn-success, html.ee .btn.play-audio, html.ee .reply-mail-btn.btn-success,
html.ee .send-reply-btn, html.ee .send-reply-mail-btn, html.ee .send-forward-mail-btn, html.ee #newSmsBtn{
  background:var(--ee-accent) !important; border:1px solid var(--ee-accent) !important; color:var(--ee-on-accent) !important;
}
html.ee .btn-primary:hover, html.ee .btn-success:hover, html.ee .btn.play-audio:hover{ filter:brightness(1.07) !important; }
html.ee .btn-secondary, html.ee .btn-outline-secondary, html.ee .btn-warning, html.ee .forward-mail-btn,
html.ee .reply-btn, html.ee .back-button, html.ee .media-buttons button, html.ee .btn-group .btn{
  background:transparent !important; border:1px solid var(--ee-line2) !important; color:var(--ee-text) !important;
}
html.ee .btn-secondary:hover, html.ee .btn-outline-secondary:hover, html.ee .btn-warning:hover,
html.ee .forward-mail-btn:hover, html.ee .reply-btn:hover, html.ee .back-button:hover, html.ee .media-buttons button:hover{
  background:var(--ee-raised) !important; border-color:var(--ee-accent-line) !important;
}
html.ee .btn-group .btn, html.ee .btn-group .btn.btn-secondary{ color:var(--ee-text2) !important; background:transparent !important; border-color:var(--ee-line2) !important; }
html.ee .btn-group .btn.btn-primary{ background:var(--ee-raised) !important; border-color:var(--ee-accent-line) !important; color:var(--ee-text) !important; box-shadow:inset 0 -2px 0 var(--ee-accent) !important; }
html.ee .btn-link{ color:var(--ee-accent-text) !important; background:transparent !important; border:0 !important; }
html.ee .btn-danger{ background:var(--ee-danger) !important; border-color:var(--ee-danger) !important; color:#fff !important; }

/* ---------- Alertes / fenêtres ---------- */
html.ee .alert{ background:var(--ee-surface) !important; color:var(--ee-text) !important; border:1px solid var(--ee-line2) !important; border-radius:12px !important; }
html.ee .alert-danger{ background:var(--ee-danger-soft) !important; border-color:var(--ee-danger) !important; color:var(--ee-danger-text) !important; }
html.ee .alert-success{ background:var(--ee-success-soft) !important; border-color:var(--ee-success) !important; }
html.ee .alert-warning{ background:var(--ee-accent-soft) !important; border-color:var(--ee-accent-line) !important; }
html.ee .modal-content{ background:var(--ee-surface) !important; color:var(--ee-text) !important; border:1px solid var(--ee-line2) !important; border-radius:16px !important; box-shadow:var(--ee-shadow) !important; }
html.ee .modal-header, html.ee .modal-footer{ border-color:var(--ee-line) !important; background:transparent !important; }
html.ee .modal-title{ color:var(--ee-text) !important; }
html.ee[data-ee-theme="dark"] .btn-close{ filter:invert(1) grayscale(1) brightness(1.4); }
html.ee .modal-backdrop.show{ opacity:.7; }

/* ---------- SMS (téléphone) ---------- */
html.ee .phone-container{
  background:var(--ee-bg2) !important; border:1px solid var(--ee-line2) !important;
  box-shadow:var(--ee-shadow), inset 0 0 0 6px var(--ee-surface) !important; border-radius:44px !important;
}
html.ee .phone-notch{ background:var(--ee-line2) !important; }
html.ee .sms-box{ background:transparent !important; }
html.ee .sms-bubble{ border:0 !important; box-shadow:none !important; border-radius:18px !important; }
html.ee .sms-bubble.received{ background:var(--ee-raised) !important; color:var(--ee-text) !important; border-bottom-left-radius:6px !important; }
html.ee .sms-bubble.received:after{ display:none !important; }
html.ee .sms-bubble.sent{ background:var(--ee-accent) !important; color:var(--ee-on-accent) !important; border-bottom-right-radius:6px !important; }
html.ee .sms-bubble.sent .sms-message, html.ee .sms-bubble.sent .sms-date{ color:var(--ee-on-accent) !important; }
html.ee .sms-header{ color:var(--ee-accent-text) !important; font-weight:600 !important; }
html.ee .sms-message{ color:inherit !important; }
html.ee .sms-date{ font-family:"IBM Plex Mono",monospace !important; font-size:11px !important; color:var(--ee-muted) !important; }

/* Dans le téléphone, chaque SMS n'est pas une carte */
html.ee .sms-box .message-container{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; }

/* ---------- Mails ---------- */
html.ee .message-container{ padding:22px 24px !important; }
html.ee .message-header{ background:transparent !important; border-bottom:1px solid var(--ee-line) !important; color:var(--ee-text) !important; }
html.ee .message-header strong, html.ee .message-header b{ color:var(--ee-text) !important; }
html.ee .message-header > div{ color:var(--ee-muted) !important; }
html.ee .message-header > div:first-child{ color:var(--ee-text) !important; font-size:18px !important; font-weight:600 !important; }
html.ee .sender, html.ee .recipient{ color:var(--ee-accent-text) !important; font-weight:600 !important; }
html.ee .mail-icon{ color:var(--ee-accent) !important; opacity:.8; }
html.ee .message-container .message-body{
  background:var(--ee-input) !important; border:1px solid var(--ee-line) !important;
  border-radius:12px !important; color:var(--ee-text2) !important; box-shadow:none !important; line-height:1.65;
}
html.ee .reply-mail-form, html.ee .forward-mail-form, html.ee .reply-form{ background:transparent !important; border:0 !important; box-shadow:none !important; }

/* ---------- Téléphone (appels) ---------- */
html.ee .call-header{ color:var(--ee-text) !important; border-color:var(--ee-line) !important; }
html.ee .call-header span:last-child{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ee-muted) !important; }
html.ee .call-message, html.ee .call-message em{ color:var(--ee-text2) !important; }
html.ee .phone-container > p{ color:var(--ee-muted) !important; }

/* ---------- Médias ---------- */
html.ee .tv-screen{ background:#000 !important; border:1px solid var(--ee-line2) !important; border-radius:18px !important; box-shadow:var(--ee-shadow) !important; overflow:hidden; }

/* ---------- Réseaux ---------- */
html.ee .tweet-container{ border-radius:16px !important; box-shadow:var(--ee-shadow-sm) !important; }
html.ee .tweet-light{ background:var(--ee-surface) !important; color:var(--ee-text) !important; border:1px solid var(--ee-line) !important; }
html.ee .tweet-light small{ color:var(--ee-muted) !important; }
html.ee .tweet-black{ background:#000 !important; color:#f2f2f2 !important; border:1px solid #2a2a2a !important; }
html.ee .tweet-avatar{ border:1px solid var(--ee-line2) !important; }

/* ---------- Bourse ---------- */
html.ee .market-badge{ font-family:"IBM Plex Mono",monospace !important; border-radius:8px !important; border:1px solid var(--ee-line2) !important; background:var(--ee-raised) !important; color:var(--ee-text) !important; }
html.ee .market-badge.up{ background:var(--ee-success-soft) !important; border-color:var(--ee-success) !important; color:var(--ee-success) !important; }
html.ee .market-badge.down{ background:var(--ee-danger-soft) !important; border-color:var(--ee-danger) !important; color:var(--ee-danger-text) !important; }

/* ---------- Assistant IA ---------- */
html.ee .qa-card{ background:var(--ee-raised) !important; }
html.ee .qa-meta{ color:var(--ee-muted) !important; font-family:"IBM Plex Mono",monospace; font-size:11px; }
html.ee .qa-card .q{ color:var(--ee-text) !important; font-weight:600; }
html.ee .qa-card .a{ color:var(--ee-text2) !important; }
html.ee .ai-answer{ background:var(--ee-input) !important; border:1px solid var(--ee-line) !important; color:var(--ee-text) !important; border-radius:12px !important; line-height:1.65; }
html.ee .help-hint{ color:var(--ee-muted) !important; }

/* ---------- Choix de l'exercice (index) ---------- */
html.ee .exercise-box{ padding:22px 24px !important; transition:border-color .15s,transform .15s !important; }
html.ee .exercise-box:hover{ border-color:var(--ee-accent-line) !important; transform:translateY(-2px) !important; background:var(--ee-surface) !important; }
html.ee .exercise-title{ color:var(--ee-text) !important; font-weight:600 !important; }
html.ee .exercise-id{ color:var(--ee-muted) !important; font-family:"IBM Plex Mono",monospace !important; font-size:12px !important; }

/* ---------- Connexion ---------- */
html.ee .login-container{ padding:36px !important; box-shadow:var(--ee-shadow) !important; }
html.ee .login-container h1, html.ee .login-container h2, html.ee .login-container h3{ font-family:"Cormorant Garamond",Georgia,serif !important; font-size:32px !important; }

/* ---------- Choix de langue (racine) ---------- */
html.ee .main-background{ background:transparent !important; }
html.ee .selector-box{ box-shadow:var(--ee-shadow) !important; padding:36px 40px !important; }
html.ee .selector-box h1{ font-size:22px !important; line-height:1.5 !important; }
html.ee .selector-box h1 span{ color:var(--ee-danger) !important; }
html.ee .flags{ display:flex !important; gap:14px !important; justify-content:center; }
html.ee .flags a{
  display:inline-flex !important; align-items:center; justify-content:center; min-width:120px; height:56px;
  border-radius:12px; border:1px solid var(--ee-line2); background:var(--ee-input); color:var(--ee-text) !important;
  text-decoration:none; font-weight:500; gap:10px; transition:border-color .15s,background .15s;
}
html.ee .flags a:hover{ border-color:var(--ee-accent); background:var(--ee-raised); }
html.ee .flags a img{ display:none !important; }
html.ee .flags a[href*="lang=FR"]::before{ content:"FR"; font-family:"IBM Plex Mono",monospace; color:var(--ee-accent-text); font-weight:600; }
html.ee .flags a[href*="lang=FR"]::after{ content:"Français"; }
html.ee .flags a[href*="lang=EN"]::before{ content:"EN"; font-family:"IBM Plex Mono",monospace; color:var(--ee-accent-text); font-weight:600; }
html.ee .flags a[href*="lang=EN"]::after{ content:"English"; }

/* ---------- Pied de page ---------- */
html.ee footer, html.ee .footer{ background:transparent !important; color:var(--ee-muted) !important; border-top:1px solid var(--ee-line) !important; font-size:13px; }

@media (prefers-reduced-motion: reduce){
  html.ee *{ animation:none !important; transition:none !important; }
}