/* ========================================================= */
/* LIGHT MODE — STRUCTURE PROPRE (IDENTIQUE, RE-ORDONNÉ)      */
/* ========================================================= */
/* -----------------------LIGHT MODE ---------------------------- */



/* ========================================================= */
/* 1) MOBILE (petits ajustements spécifiques)                  */
/* ========================================================= */

@media (max-width: 900px) {
  body.light-mode #close-mobile-menu {
    color: #90771B;
  }
}



/* ========================================================= */
/* 2) BACKGROUNDS (radial / before / after)                    */
/* ========================================================= */

body.light-mode #radial-background {
  background: radial-gradient(center bottom, rgb(225, 215, 176) 0%, rgb(255, 255, 255) 46.5608%, rgb(236, 220, 183) 99.4709%);
}

body.light-mode::before {
  background: -webkit-radial-gradient(center bottom, rgb(225, 215, 176) 0%, rgb(255, 255, 255) 46.5608%, rgb(236, 220, 183) 99.4709%);
  opacity: 1;
}

body.light-mode::after {
  background: -webkit-radial-gradient(center top, #43423f, #25231a);
  opacity: 0;
}



/* ========================================================= */
/* 3) ICONS (copy icon)                                        */
/* ========================================================= */

/* Styles par défaut pour le mode clair */
body.light-mode .copy-icon {
  content: url('assets/BUTTON_copy_light.webp');
}

/* Image pour le survol en mode clair */
body.light-mode .copy-icon:hover {
  content: url('assets/BUTTON_copy_light_hover.webp');
}



/* ========================================================= */
/* 4) BASE LAYOUT / RESET                                      */
/* ========================================================= */

body.light-mode  {
  position: relative;
   
}

body.light-mode  div {
  box-sizing: border-box;
}

body.light-mode h2 {
  margin: 2em auto 0;
  text-align: center;
}

body.light-mode header {
  padding: 10px 0px;
}

body.light-mode .header {
  display: flex;
  justify-content: space-between;
}

body.light-mode .header-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}

body.light-mode button {
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
}

body.light-mode .landscape-top-left-div {
  position: absolute; /* ou "fixed" pour que la div soit fixée en haut à gauche de la fenêtre de navigation et non en haut à gauche de la page de navigation. */
  top: 3px;
  left: 3px;
  width: 110px;
  height: 100px;
  z-index: 9999; /* Ensure it is above other elements */
}

body.light-mode {
  font-family: Work Sans, Arial, Helvetica, "Roboto", sans-serif;
  padding: 1em;
  font-weight: 100;
  margin: 0;
  overflow-x: hidden; /* Prevent horizontal scroll */
}



/* ========================================================= */
/* 5) TYPO / TEXT / LINKS                                      */
/* ========================================================= */

body.light-mode p {
  text-decoration: none;
  font-family: Arial, Helvetica, "Roboto", sans-serif;
  color: #90771B;
  font-weight: 300;
  letter-spacing: 1.95px;
  text-align: center;
  font-weight: lighter;
}

body.light-mode p.bold {
  text-decoration: none;
  color: #444;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1.2px;
}

body.light-mode a {
  text-decoration: none;
  color: #444;
  text-align: center;
  font-weight: 400;
}

body.light-mode a:link {
  color: #90771B;
  letter-spacing: 2.6px;
}

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

body.light-mode a:hover {
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
  color: #90771B;
  font-weight: 500;
  letter-spacing: 2.9px;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: #90771B;
  text-shadow: 0px 0px 10px #FFDF6B;
}

body.light-mode a:active {
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
  color: white;
  font-weight: 550;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: white;
  text-shadow: 0px 0px 10px #E1C53B;
  letter-spacing: 3px;
}



/* ========================================================= */
/* 6) STATIC LINK (non-interactif)                             */
/* ========================================================= */

body.light-mode .static-link,
body.light-mode .static-link:hover,
body.light-mode .static-link:active,
body.light-mode .static-link:visited {
  color: #90771B;
  font-weight: 550;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: #90771B;
  text-shadow: 0px 0px 10px #E1C53B;
  letter-spacing: 3px;
  cursor: default; /* Curseur par défaut */
  pointer-events: none; /* Désactive les interactions de la souris */
}



/* ========================================================= */
/* 7) DROPDOWN TABS (multi-niveaux)                            */
/* ========================================================= */

body.light-mode .dropdown-tabs {
  margin-top: 10px;
  width: 100%;
}

body.light-mode .dropdown-tabs ul {
  display: flex;
  justify-content: center;
  width: 100%;
   
}

body.light-mode .dropdown-tabs ul li {
  flex-grow: 1;
  text-align: center;
}

body.light-mode .dropdown-item {
  display: none;
}

body.light-mode .dropdown-item.active {
  display: block;
}

body.light-mode .sub-dropdown-tabs {
  margin-top: 10px;
  width: 100%;
}

body.light-mode .sub-dropdown-tabs ul {
  display: flex;
  justify-content: center;
  width: 100%;
   
}

body.light-mode .sub-dropdown-tabs ul li {
  flex-grow: 1;
  text-align: center;
}

body.light-mode .sub-dropdown-item {
  display: none;
}

body.light-mode .sub-dropdown-item.active {
  display: block;
}

body.light-mode .sub-sub-dropdown-tabs {
  margin-top: 10px;
  width: 100%;
}

body.light-mode .sub-sub-dropdown-tabs ul {
  display: flex;
  justify-content: center;
  width: 100%;
   
}

body.light-mode .sub-sub-dropdown-tabs ul li {
  flex-grow: 1;
  text-align: center;
}

body.light-mode .sub-sub-dropdown-item {
  display: none;
}

body.light-mode .sub-sub-dropdown-item.active {
  display: block;
}



/* ========================================================= */
/* 8) MOBILE DROPDOWN (hover trigger)                          */
/* ========================================================= */

body.light-mode .mobile-nav:hover .mobile-dropdown {
  display: block;
}

body.light-mode .mobile-dropdown {
  display: none;
  text-align: center;
}



/* ========================================================= */
/* 9) SIDENAV (mobile menu legacy)                             */
/* ========================================================= */

body.light-mode .sidenav a {
  color: #fff;
  letter-spacing: 3px;
  font-weight: lighter;
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 16px;
  display: block;
  transition: 0.3s;
}

body.light-mode .sidenav {
  height: 0;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #000;
  overflow-y: auto;
  transition: height 0.5s ease;
  text-align: center;
}

body.light-mode .sidenav a:hover {
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
  color: #FFECB3;
  text-shadow: 0px 0px 10px #FFFFFF;
  font-weight: 300;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: #FFEFC9;
  letter-spacing: 3px;
}

body.light-mode .sidenav .closebtn-right {
  position: absolute;
  top: 50px;
  right: 50px;
  font-size: 36px;
  color: #fff;
  z-index: 2;
}

body.light-mode .sidenav .closebtn-left {
  position: absolute;
  top: 50px;
  left: 25px;
  font-size: 36px;
  color: #fff;
  z-index: 2;
}

body.light-mode .sidenav .mobile-nav:hover .mobile-dropdown {
  display: block;
}

body.light-mode .sidenav .mobile-dropdown {
  display: none;
  text-align: center;
}



/* ========================================================= */
/* 1️⃣0️⃣ CONTAINER + MOBILE BUTTONS (bar left/right)          */
/* ========================================================= */

body.light-mode .container {
  width: auto;
  padding: 0 15px;
}

body.light-mode .mobile-menu-bar-left {
  display: block;
  font-size: 30px;
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
  color:  #90771B;
  position: fixed;
  top: 20px;
  left: 25px;
  z-index: 3;
}

body.light-mode .mobile-menu-bar-right {
  display: block;
  font-size: 30px;
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
  color:  #90771B;
  position: fixed;
  top: 20px;
  right: 25px;
  z-index: 3;
}



/* ========================================================= */
/* 1️⃣1️⃣ TABS HOVER STATES                                    */
/* ========================================================= */

body.light-mode .tabs ul li a:hover,
body.light-mode .tabs ul li a.active 
body.light-mode .dropdown-tabs ul li a:hover,
body.light-mode .sub-dropdown-tabs ul li a:hover,
body.light-mode .sub-sub-dropdown-tabs ul li a:hover {
  color: #90771B;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: #90771B;
  text-shadow: 0px 0px 10px #FFDF6B;
  background: none;
}



/* ========================================================= */
/* 1️⃣2️⃣ FORM WARNINGS (tooltip)                               */
/* ========================================================= */

body.light-mode #form-warning {
  background: -webkit-radial-gradient(center, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 46.5608%, rgb(236, 220, 183) 100%);
  color: black;
  letter-spacing: 2px;
  font-weight: 500;
  border-radius: 5px;
  font-size: 14px;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.50) 0px 0px 15px, rgba(0, 0, 0, 0.50) 0px 0px 15px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

body.light-mode #write-us-form-warning {
  background: -webkit-radial-gradient(center, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 46.5608%, rgb(236, 220, 183) 100%);
  color: black;
  letter-spacing: 2px;
  font-weight: 500;
  border-radius: 5px;
  font-size: 14px;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.50) 0px 0px 15px, rgba(0, 0, 0, 0.50) 0px 0px 15px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}



/* ========================================================= */
/* 1️⃣3️⃣ MOBILE MENU (new #mobile-menu)                       */
/* ========================================================= */

body.light-mode #mobile-menu {
  background: radial-gradient(circle at 50% 40%, #fffbe6 0%, #f5ebd5 100%);
  color: #90771B;
}

body.light-mode #mobile-menu ul .separator {
  border-bottom: 2px solid #938021;  /* <-- adapte si tu veux une couleur différente en light mode */
}

body.light-mode #mobile-menu ul li a {
  color: #90771B;
  text-decoration: none;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.11em;
  display: block;
  padding: 0.4em 0;
  margin-top: -3%;
  margin-bottom: -3%;
}

body.light-mode #mobile-menu ul li p { color: #90771B; }  /* <-- Ajout explicite */
body.light-mode #mobile-menu ul li a { color: #90771B; }  /* <-- Ajout explicite */

body.light-mode #mobile-menu ul li p {
  color: #90771B;
  text-decoration: none;
  font-size: 1.7em;
  font-weight: 400;
  letter-spacing: 0.11em;
  display: block;
  padding: 0.4em 0;
  margin-top: -7%;
  margin-bottom: -7%;
}

body.light-mode #mobile-menu ul .sub-menu li a {
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.09em;
}

body.light-mode #mobile-menu .mode-btn { color: #90771B; } /* <-- Ajout explicite */



/* ========================================================= */
/* 1️⃣4️⃣ COPIED NOTIFICATION                                  */
/* ========================================================= */

body.light-mode .copied-notification {
  display: none;
  position: fixed;
  background: -webkit-radial-gradient(center, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 46.5608%, rgb(236, 220, 183) 100%);
  color: black;
  letter-spacing: 2px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.50) 0px 0px 15px, rgba(0, 0, 0, 0.50) 0px 0px 15px;
  pointer-events: none; /* Pour éviter les interactions de la souris */
  transform: translate(-50%, -50%);
}



/* ========================================================= */
/* 1️⃣5️⃣ FORM OPTIONS                                          */
/* ========================================================= */

body.light-mode .form-option {
  font-weight: 400; /* Change en 400 (normal), 500, 600, 700 (bold) si tu veux + d’épaisseur */
  font-size: 1em; /* tu peux ajuster ici aussi */
  letter-spacing: 1.5px;
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
  transition: color 0.3s ease, font-weight 0.3s ease;
  color:  #90771B;
}

/* Tu peux ajouter un effet doux au survol si tu veux */
body.light-mode .form-option:hover {
  font-weight: 500; /* Change en 400 (normal), 500, 600, 700 (bold) si tu veux + d’épaisseur */
  font-size: 1em; /* tu peux ajuster ici aussi */
  letter-spacing: 1.5px;
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
  transition: color 0.3s ease, font-weight 0.3s ease;
  color: #000000;
}



/* ========================================================= */
/* 1️⃣6️⃣ FAKE LINK (hover/active en light)                    */
/* ========================================================= */

body.light-mode .fake-link:hover {
  color: #90771B;
  font-weight: 500;
  letter-spacing: 2.9px;
  text-decoration: underline;
  text-decoration-color: #90771B;
  text-shadow: 0px 0px 10px #FFDF6B;
}

body.light-mode .fake-link:active {
  color: white;
  font-weight: 550;
  text-decoration: underline;
  text-decoration-color: white;
  text-shadow: 0px 0px 10px #E1C53B;
  letter-spacing: 3px;
}