/* ========================================================================== */
/* menuclicdroit.css — MENU CLIC-DROIT (PROPRE + STABLE)                       */
/* ==========================================================================
   Objectif :
   - 1 seule logique d’affichage (classe .is-visible)
   - position FIXED + z-index MAX (toujours au-dessus)
   - Thème (light/dark) = uniquement couleurs/ombres, jamais display/position/z-index
   - Sous-menu Translate = absolute (dans le menu), propre
   -------------------------------------------------------------------------- */


/* ============================= */
/* 1) STRUCTURE + VISIBILITÉ     */
/* ============================= */

#custom-context-menu{
  display: none;                 /* caché par défaut */
  position: fixed;               /* IMPORTANT : reste fixed (toujours au-dessus) */
  z-index: 2147483647;           /* au-dessus de TOUT */
  pointer-events: auto;          /* cliquable */
}

#custom-context-menu.is-visible{
  display: block;                /* visible via JS */
}


/* ============================= */
/* 2) BASE MENU (COMMUN)         */
/* ============================= */

#custom-context-menu{
  border-radius: 5px;
  overflow: visible;
}

#custom-context-menu ul{
  list-style: none;
  margin: 0;
  padding: 10px 0;
  position: relative;
}

#custom-context-menu li{
  padding: 8px 20px;
  position: relative;            /* parent logique du sous-menu */
  text-align: left;
}

/* Liens du menu */
#custom-context-menu li a{
  display: block;
  text-decoration: none;
  text-align: center;
  font-weight: 200;
  letter-spacing: 3px;
}

/* Sous-menu translate (structure neutre) */
#translate-submenu{
  display: none;
  position: absolute;
  left: 0;
  top: 8px;
  min-width: 150px;
  border-radius: 5px;
  z-index: 2147483647;           /* reste dans la couche la plus haute */
}

#translate:hover #translate-submenu{
  display: block;
}

#translate-submenu li{
  padding: 8px 20px;
  text-align: left;
}

#translate-submenu li a{
  display: block;
  padding: 10px 20px;
  margin: 2px 0;
  text-decoration: none;
  text-align: center;
  font-weight: 200;
  letter-spacing: 3px;
}


/* ============================= */
/* 3) CURSEURS (COMMUN)          */
/* ============================= */
/* (Tu peux alléger si tu veux, mais là c’est “safe” et cohérent) */

#custom-context-menu,
#custom-context-menu *{
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
}


/* ============================= */
/* 4) DARK MODE                  */
/* ============================= */

body.dark-mode #custom-context-menu{
  background: radial-gradient(circle at center, #43423f, #25231a);
  box-shadow: 0 0 5px #FFEFC9;
}

body.dark-mode #custom-context-menu li a{
  color: #FFEFC9;
}

body.dark-mode #custom-context-menu li a:visited{
  color: #FFEFC9;
  text-decoration: underline;
  text-underline-position: under;
}

body.dark-mode #custom-context-menu li a:hover{
  color: #FFECB3;
  text-shadow: 0 0 10px #FFFFFF;
  font-weight: 300;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: #FFEFC9;
  letter-spacing: 3px;
}

body.dark-mode #custom-context-menu li a:active{
  color: #FFECB3;
  font-weight: normal;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: #FFFFFF;
  text-shadow: 0 0 10px #FFEFC9;
  letter-spacing: 3px;
}

/* Sous-menu translate — DARK */
body.dark-mode #translate-submenu{
  background: radial-gradient(circle at center, #43423f, #25231a);
  box-shadow: 0 0 5px #FFEFC9;
}

body.dark-mode #translate-submenu li a{
  color: #FFEFC9;
}

body.dark-mode #translate-submenu li a:visited{
  color: #FFEFC9;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: transparent;
  letter-spacing: 3px;
}

body.dark-mode #translate-submenu li a:hover{
  color: #FFECB3;
  text-shadow: 0 0 10px #FFFFFF;
  font-weight: 300;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: #FFEFC9;
  letter-spacing: 3px;
}

body.dark-mode #translate-submenu li a:active{
  color: #FFECB3;
  font-weight: normal;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: #FFFFFF;
  text-shadow: 0 0 10px #FFEFC9;
  letter-spacing: 3px;
}


/* ============================= */
/* 5) LIGHT MODE                 */
/* ============================= */

body.light-mode #custom-context-menu{
  background: radial-gradient(circle at center, #ffffff 0%, #ffffff 46%, rgb(236, 220, 183) 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

body.light-mode #custom-context-menu li a{
  color: #444;
  font-weight: 400;
  letter-spacing: 3px;
}

body.light-mode #custom-context-menu li a:visited{
  color: #90771B;
  text-decoration: underline;
  text-underline-position: under;
}

body.light-mode #custom-context-menu li a:hover{
  color: #90771B;
  font-weight: 500;
  letter-spacing: 2.9px;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: #90771B;
  text-shadow: 0 0 10px #FFDF6B;
}

body.light-mode #custom-context-menu li a:active{
  color: #FFFFFF;
  font-weight: 550;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: #FFFFFF;
  text-shadow: 0 0 10px #E1C53B;
  letter-spacing: 3px;
}

/* Sous-menu translate — LIGHT */
body.light-mode #translate-submenu{
  background: radial-gradient(circle at center, #ffffff 0%, #ffffff 46%, rgb(236, 220, 183) 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

body.light-mode #translate-submenu li a{
  color: #444;
  font-weight: 400;
  letter-spacing: 3px;
}

body.light-mode #translate-submenu li a:visited{
  color: #90771B;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: transparent;
}

body.light-mode #translate-submenu li a:hover{
  color: #90771B;
  font-weight: 500;
  letter-spacing: 2.9px;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: #90771B;
  text-shadow: 0 0 10px #FFDF6B;
}

body.light-mode #translate-submenu li a:active{
  color: #FFFFFF;
  font-weight: 550;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: #FFFFFF;
  text-shadow: 0 0 10px #E1C53B;
  letter-spacing: 3px;
}