/*
// ============================================================================
// EXPO 1.2
// File         : expo/css/themes.css
// Description  : Theme system
// Author       : MXCOD.COM (https://mxcod.com)
// Date         : 2025
// License      : Proprietary
//                Unauthorized distribution/modification is strictly prohibited
// ============================================================================
// © 2025 MXCOD.COM – All rights reserved.
// ============================================================================
*/ 

/* Fallback vh + compat iOS (si ton ios-vh-fix pose --vh en px) */
:root { --vh: 100svh; }
@supports not (height: 100svh) { :root { --vh: 100vh; } }


/* 1) BASE PALETTES (couleurs & échelles) */
:root{
  /* Mint */
  --mint-50:  #e6faf4; 
  --mint-100: #d2f4ea;
  --mint-300: #20c997;
  --mint-500: #00BD82;
  --mint-600: #00976A;  
  --mint-700: #00724E;
  --mint-800: #005C40; 
  --mint-900: #004233;
  /* Yellow */
  --yellow-50:  #FFF9E6; 
  --yellow-100: #FFF2CC;
  --yellow-300: #FFE185;
  --yellow-500: #FFC000;
  --yellow-600: #E6AC00; 
  --yellow-700: #F49C17;
  --yellow-800: #B37400; 
  --yellow-900: #8A5C00;
  /* Pink */
  --pink-50:  #FFF0F4;  
  --pink-100: #FADEE4;
  --pink-300: #FF8DA8;
  --pink-500: #E85B79;
  --pink-600: #D94361;
  --pink-700: #B1264D;
  --pink-800: #8C1F3D; 
  --pink-900: #741A36;
  /* Orange */
  --orange-50:  #FFEDE6; 
  --orange-100: #FF906A;
  --orange-300: #FF5D3E;
  --orange-500: #EA3815;
  --orange-600: #C82E11; 
  --orange-700: #C22A0F;
  --orange-800: #991F0B; 
  --orange-900: #7A1705;
  /* Blue */
  --blue-50:  #F0F6FF;  
  --blue-100: #D6E7FC;
  --blue-300: #74B5FF;
  --blue-500: #3086EE;
  --blue-600: #1E64C8; 
  --blue-700: #005ABB;
  --blue-800: #00438C;  
  --blue-900: #003173;
  /* Purple */
  --purple-50:  #F6F4FF;  
  --purple-100: #E1DDF8;
  --purple-300: #A69FEA;
  --purple-500: #6955DA;
  --purple-600: #513DBE;  
  --purple-700: #2022AE;
  --purple-800: #1A197D;  
  --purple-900: #141464;
  /* Grey */
  --grey-50:#f8f9fa; 
  --grey-100:#F1F3F8; 
  --grey-300:#CED4DA; 
  --grey-500:#6c757d;
  --grey-600:#495057; 
  --grey-700:#343A40; 
  --grey-800:#073F56; 
  --grey-900:#012635;

  --neon-blue: #00d9ff;

}

/* ========== Defaults (communs aux thèmes) ========== */
:root{

  
  /* Typo & échelles */
  --font-base:'Open Sans', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', 'Noto Sans CJK SC',
               'Noto Sans CJK TC', 'Noto Sans JP', 'Noto Sans KR', sans-serif;  
  --font-heading:var(--font-base);
  --font-base-serif: 'Playfair Display', 'Cormorant Garamond','Lora', 'Noto Serif', 'Georgia', 'Times New Roman', Times, serif;
  --font-heading-serif: 'Lora', 'Playfair Display', 'Cormorant Garamond', 'Playfair Display', 'Georgia', 'Times New Roman', Times, serif;
  --fz-100:.875rem; --fz-200:1rem; --fz-300:1.125rem; --fz-400:1.25rem; --fz-500:1.5rem;
  --lh-tight:1.15; --lh-normal:1.4; --ls-tight:.2px;

  /* Rayons & ombres utilitaires */
  --radius-100:10px; --radius-120:12px; --radius-200:20px; --radius-300:30px; --radius-500:50px;--radius-9999:9999px;
  --shadow-grey:0 15px 40px rgba(0,0,0,.15);
  --shadow-soft:0 8px 18px rgba(32,201,151,.4);
  --shadow-color:0 0 0 / .08;

  /* Footer */
  --footer-border: rgba(255,255,255,.18);

  --header-h:5rem;

  /* Échelle générale d’arrondis Bootstrap */
  --bs-border-radius:      var(--radius-200, .75rem);
  --bs-border-radius-sm:   var(--radius-120, .5rem);
  --bs-border-radius-lg:   var(--radius-300, 1.25rem);
  --bs-border-radius-xl:   var(--radius-300, 1.25rem);  /* optionnel */
  --bs-border-radius-xxl:  var(--radius-500, 3rem);     /* optionnel */

  /* Cards — variables Bootstrap clés */
  --bs-card-spacer-y: .75rem;
  --bs-card-spacer-x: .85rem;

  --bs-card-border-width: 0; /* tu utilises des cards sans bord */
  --bs-card-border-color: transparent;
  --bs-card-border-radius: var(--bs-border-radius); /* mappe sur ton échelle */

  /* Si tu veux une ombre unifiée pilotable en var */
  --bs-card-box-shadow: 0 8px 22px rgba(0,0,0,.15);

  /* Titres/subtitles dans les cards */
  --bs-card-title-color:    inherit;
  --bs-card-subtitle-color: color-mix(in srgb, currentColor 70%, transparent);

  /* Header/Footer de card (si tu les utilises) */
  --bs-card-cap-padding-y: .6rem;
  --bs-card-cap-padding-x: .85rem;
  --bs-card-cap-bg:        color-mix(in srgb, var(--bs-card-bg) 92%, transparent);
  --bs-card-cap-color:     var(--bs-card-color, currentColor);
}

/* ================================= THÈMES ================================= */

html[data-theme="dark"],body[data-theme="dark"]{
  /* Main */
  --surface:#000000;
  --surface-muted:var(--grey-50);
  --text:#eaf1f5;
  --text-invert:#1f2a33;
  --text-muted:#b6c2cc;
  --border:#1f3340;
  --link:var(--primary-300);
  --link-hover:var(--primary-100);
  --footer-border: rgba(0,0,0,.12);
  --card-bg:rgba(255,255,255,.12);
  
  /* Corps */
  --bs-body-bg: var(--surface);
  --bs-body-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-secondary-color: color-mix(in srgb, var(--text) 72%, transparent);
  --bs-tertiary-color: var(--text-muted);

  /* Liens */
  --bs-link-color: var(--link, var(--section-accent));
  --bs-link-hover-color: var(--link-hover, var(--section-accent-2));

  /* Bordures / ombres */
  --bs-border-color: var(--border);
  --bs-box-shadow: 0 8px 24px rgba(0,0,0,.35);

  /* Card */
  --bs-card-bg: var(--card-bg);
  --bs-card-color: var(--text);
  --bs-card-border-color: color-mix(in srgb, var(--border) 75%, transparent);

  /* Boutons “par défaut” (btn .btn-outline-light par ex.) */
  --bs-btn-bg: color-mix(in srgb, var(--text) 8%, transparent);
  --bs-btn-color: var(--text);
  --bs-btn-border-color: color-mix(in srgb, var(--text) 35%, transparent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--text) 16%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--text) 55%, transparent);

  /* Bouton primary mappé à ton accent */
  --bs-primary: var(--section-accent);
  --bs-primary-rgb: 48,134,238;
  /* (si tu veux piloter .btn-primary via vars bouton) */
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--section-accent);
  --bs-btn-border-color: var(--section-accent);
  --bs-btn-hover-bg: var(--section-accent-2);
  --bs-btn-hover-border-color: var(--section-accent-2);

  /* Form controls */
  --bs-form-control-bg: color-mix(in srgb, var(--surface) 85%, transparent);
  --bs-form-control-color: var(--text);
  --bs-form-control-border-color: color-mix(in srgb, var(--border) 85%, transparent);
  --bs-form-control-placeholder-color: color-mix(in srgb, var(--text) 55%, transparent);
  --bs-form-control-focus-border-color: var(--section-accent);

  /* Modals */
  --bs-modal-bg: color-mix(in srgb, var(--surface) 95%, transparent);
  --bs-modal-color: var(--text);
  --bs-modal-header-border-color: color-mix(in srgb, var(--border) 65%, transparent);
  --bs-modal-footer-border-color: color-mix(in srgb, var(--border) 65%, transparent);

  /* Navbar / Dropdown (si utilisés) */
  --bs-navbar-bg: color-mix(in srgb, var(--surface) 92%, transparent);
  --bs-navbar-color: var(--text);
  --bs-navbar-hover-color: var(--section-accent);
  --bs-dropdown-bg: color-mix(in srgb, var(--surface) 98%, transparent);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-border-color: color-mix(in srgb, var(--border) 75%, transparent);

  /* Tables (si utilisées) */
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: color-mix(in srgb, var(--border) 75%, transparent);

  /* Hover card (pilotage par var) */
  --card-bg-hover: rgba(255,255,255,.10); /* tu l’as déjà */  
}

html[data-theme="light"],body[data-theme="light"]{
  /* Main */
  --surface:#f8f9fa;
  --surface-muted:var(--grey-50);
  --text:#1f2a33;
  --bs-body-color:#1f2a33;
  --text-invert:#eaf1f5;
  --text-muted:#5b6b79;
  --border:#e6e9ef;
  --link:var(--primary-500);
  --link-hover:var(--primary-700);
  --footer-border: rgba(0,0,0,.12);
  --card-bg:rgba(0,0,0,.06);

  /* Corps */
  --bs-body-bg: var(--surface);
  --bs-body-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-secondary-color: color-mix(in srgb, var(--text) 64%, transparent);
  --bs-tertiary-color: var(--text-muted);

  /* Liens */
  --bs-link-color: var(--link, var(--section-accent));
  --bs-link-hover-color: var(--link-hover, var(--section-accent-2));

  /* Bordures / ombres */
  --bs-border-color: var(--border);
  --bs-box-shadow: 0 10px 28px rgba(0,0,0,.10);

  /* Card */
  --bs-card-bg: var(--card-bg);
  --bs-card-color: var(--text);
  --bs-card-border-color: color-mix(in srgb, var(--border) 85%, transparent);

  /* Boutons (défaut) */
  --bs-btn-bg: color-mix(in srgb, var(--text) 3%, transparent);
  --bs-btn-color: var(--text);
  --bs-btn-border-color: color-mix(in srgb, var(--text) 18%, transparent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--text) 6%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--text) 32%, transparent);

  /* Bouton primary = accent */
  --bs-primary: var(--section-accent);
  --bs-primary-rgb: 48,134,238; /* mets l’RGB de ton accent light si différent */
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--section-accent);
  --bs-btn-border-color: var(--section-accent);
  --bs-btn-hover-bg: var(--section-accent-2);
  --bs-btn-hover-border-color: var(--section-accent-2);

  /* Form controls */
  --bs-form-control-bg: #fff;
  --bs-form-control-color: var(--text);
  --bs-form-control-border-color: color-mix(in srgb, var(--border) 85%, transparent);
  --bs-form-control-placeholder-color: color-mix(in srgb, var(--text) 45%, transparent);
  --bs-form-control-focus-border-color: var(--section-accent);

  /* Modals */
  --bs-modal-bg: #fff;
  --bs-modal-color: var(--text);
  --bs-modal-header-border-color: color-mix(in srgb, var(--border) 75%, transparent);
  --bs-modal-footer-border-color: color-mix(in srgb, var(--border) 75%, transparent);

  /* Navbar / Dropdown */
  --bs-navbar-bg: #fff;
  --bs-navbar-color: var(--text);
  --bs-navbar-hover-color: var(--section-accent);
  --bs-dropdown-bg: #fff;
  --bs-dropdown-color: var(--text);
  --bs-dropdown-border-color: color-mix(in srgb, var(--border) 85%, transparent);

  /* Tables */
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: color-mix(in srgb, var(--border) 85%, transparent);

  /* Hover card */
  --card-bg-hover: rgba(0,0,0,.12);
}

/* 2 MAPPING GLOBAL ACCENT (piloté par [data-accent] sur <html> ou <body>) */
html[data-accent="mint"],body[data-accent="mint"]{
  --section-accent:   var(--mint-500);
  --section-accent-2: var(--mint-700);
  --ui-accent:        var(--mint-500);
  --ui-accent-2:      var(--mint-700);
  --ui-bg:            var(--mint-500);  
  --ui-glass :        color-mix(in srgb, var(--mint-500) 24%, transparent); 
  --ui-glass-hover :  color-mix(in srgb, var(--mint-500) 32%, transparent);     
}
html[data-accent="yellow"],body[data-accent="yellow"]{
  --section-accent:   var(--yellow-500);
  --section-accent-2: var(--yellow-700);
  --ui-accent:        var(--yellow-500);
  --ui-accent-2:      var(--yellow-700);
  --ui-bg:            var(--yellow-500);  
  --ui-glass :        color-mix(in srgb, var(--yellow-500) 50%, transparent); 
  --ui-glass-hover :  color-mix(in srgb, var(--yellow-500) 60%, transparent);
}
html[data-accent="pink"],  body[data-accent="pink"]{
  --section-accent:   var(--pink-500);
  --section-accent-2: var(--pink-700);
  --ui-accent:        var(--pink-500);
  --ui-accent-2:      var(--pink-700);
  --ui-bg:            var(--pink-500);  
  --ui-glass :        color-mix(in srgb, var(--pink-500) 24%, transparent); 
  --ui-glass-hover :  color-mix(in srgb, var(--pink-500) 32%, transparent);  
}
html[data-accent="orange"],body[data-accent="orange"]{
  --section-accent:   var(--orange-300);
  --section-accent-2: var(--orange-500);
  --ui-accent:        var(--orange-500);
  --ui-accent-2:      var(--orange-700);
  --ui-bg:            var(--orange-300);  
  --ui-glass :        color-mix(in srgb, var(--orange-300) 24%, transparent); 
  --ui-glass-hover :  color-mix(in srgb, var(--orange-300) 32%, transparent);  
}
html[data-accent="blue"],  body[data-accent="blue"]{
  --section-accent:   var(--blue-500);
  --section-accent-2: var(--blue-700);
  --ui-accent:        var(--blue-500);
  --ui-accent-2:      var(--blue-700);
  --ui-bg:            var(--blue-500);  
  --ui-glass :        color-mix(in srgb, var(--blue-500) 24%, transparent); 
  --ui-glass-hover :  color-mix(in srgb, var(--blue-500) 32%, transparent);  
}
html[data-accent="purple"],body[data-accent="purple"]{
  --section-accent:   var(--purple-500);
  --section-accent-2: var(--purple-700);
  --ui-accent:        var(--purple-500);
  --ui-accent-2:      var(--purple-700);
  --ui-bg:            var(--purple-500);  
  --ui-glass :        color-mix(in srgb, var(--purple-500) 24%, transparent); 
  --ui-glass-hover :  color-mix(in srgb, var(--purple-500) 32%, transparent);  
}
html[data-accent="grey"],  body[data-accent="grey"]{
  --section-accent:   var(--grey-500);
  --section-accent-2: var(--grey-700);
  --ui-accent:        var(--grey-500);
  --ui-accent-2:      var(--grey-700);
  --ui-bg:            var(--grey-500);  
  --ui-glass :        color-mix(in srgb, var(--grey-500) 24%, transparent); 
  --ui-glass-hover :  color-mix(in srgb, var(--grey-500) 32%, transparent);  
}
html[data-accent="mono"], body[data-accent="mono"]{
  --section-accent:   var(--text);
  --section-accent-2: color-mix(in srgb, var(--text) 65%, transparent);
  --ui-accent:        var(--text);
  --ui-accent-2:      color-mix(in srgb, var(--text) 65%, transparent);
  --ui-bg:            var(--text);  
  --ui-glass :        color-mix(in srgb, var(--text) 24%, transparent); 
  --ui-glass-hover :  color-mix(in srgb, var(--text) 32%, transparent);  
}


/* 4) BLOCS THÉMATIQUES (API : variables héritées par le contenu) */
.theme{
  --section-bg:var(--surface);
  --section-fg:var(--text);
  --section-muted:var(--text-muted);
  /* Accent du bloc (peut être écrasé par accent-picker / .ui-*) */
  --section-accent:var(--primary-500);
  --section-accent-2:var(--info-500);
  /* Ombre “accent” (utilisée par certains éléments décoratifs) */
  --section-shadow:0 8px 18px color-mix(in srgb, var(--section-accent) 18%, transparent);
  background:var(--section-bg);
  color:var(--section-fg);
}

.theme .title-on{color:var(--section-fg);}
.theme .text-muted-on{color:var(--section-muted);}
.theme a.on{color:var(--section-accent);}
.theme a.on:hover{color:var(--section-accent-2);}

/* 5) VARIANTES DE BLOC (fond alternatif par couleur) */
.theme-mint   { --section-bg:var(--mint-300);   --section-accent:var(--mint-500);   --section-accent-2:var(--mint-700);   --section-accent-3:var(--mint-800); }
.theme-blue   { --section-bg:var(--blue-300);   --section-accent:var(--blue-500);   --section-accent-2:var(--blue-700);   --section-accent-3:var(--blue-800); }
.theme-pink   { --section-bg:var(--pink-300);   --section-accent:var(--pink-500);   --section-accent-2:var(--pink-700);   --section-accent-3:var(--pink-800); }
.theme-orange { --section-bg:var(--orange-300); --section-accent:var(--orange-300); --section-accent-2:var(--orange-500);   --section-accent-3:var(--orange-700); }
.theme-yellow { --section-bg:var(--yellow-300); --section-accent:var(--yellow-500); --section-accent-2:var(--yellow-700);   --section-accent-3:var(--yellow-800); }
.theme-purple { --section-bg:var(--purple-300); --section-accent:var(--purple-500); --section-accent-2:var(--purple-700);   --section-accent-3:var(--purple-800); }
.theme-grey   { --section-bg:var(--grey-300);   --section-accent:var(--grey-500);   --section-accent-2:var(--grey-700);   --section-accent-2:var(--grey-800); }

/* 6) UTILITAIRES D’ACCENT LOCAUX (icônes, boutons, etc.) */
.ui-mint   { --ui-accent:var(--mint-500); --ui-accent-2:var(--mint-700); }
.ui-yellow { --ui-accent:var(--yellow-500); --ui-accent-2:var(--yellow-700); }
.ui-pink   { --ui-accent:var(--pink-500);   --ui-accent-2:var(--pink-700); }
.ui-orange { --ui-accent:var(--orange-500); --ui-accent-2:var(--orange-700); }
.ui-blue   { --ui-accent:var(--blue-500);   --ui-accent-2:var(--blue-700); }
.ui-purple { --ui-accent:var(--purple-500); --ui-accent-2:var(--purple-700); }
.ui-grey   { --ui-accent:var(--grey-500);   --ui-accent-2:var(--grey-700); }

/* Utilitaires “prêts à l’emploi” (pas des composants) */
.btn-accent{
  --a:var(--ui-accent, var(--section-accent));
  --b:var(--ui-accent-2, var(--section-accent-2));
  color:#fff; border:none; border-radius:var(--radius-300);
  background:linear-gradient(135deg, var(--a), var(--b));
  box-shadow:var(--section-shadow);
  transition:transform .2s, box-shadow .25s, background .25s;
}
.btn-accent:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg, var(--b), var(--a));
  box-shadow:0 12px 26px color-mix(in srgb, var(--a) 32%, transparent);
  color:#fff;
}
.icon-accent{ color:var(--ui-accent, var(--section-accent)); }

/* 7) Variante “no background” pour un bloc */
.theme-nobg{ --section-bg:transparent; box-shadow:none; }
.theme-nobg, .theme-nobg .title-on, .theme-nobg .text-muted-on, .theme-nobg a.on{ color:var(--section-fg); }

/* ============= 2) ACCENT PICKER & BOUTONS ============= */

.accent-bg {
  background-color: color-mix(in srgb, var(--section-accent) 100%, transparent);
}


.accent-picker{ display:flex; gap:.5rem; align-items:center; }
.accent-dot{
  width:30px; height:30px; border-radius:999px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background: currentColor; border:2px solid rgba(255,255,255,.35);
  cursor:pointer; line-height:0;
  box-shadow: 0 0 0 0 transparent;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.accent-dot:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.accent-dot[aria-pressed="true"]{ border-color:#fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset; }

/* Couleurs visibles des pastilles via vars de theme.css */
.accent-dot[data-accent="mint"]   { color: var(--mint-500); }
.accent-dot[data-accent="yellow"] { color: var(--yellow-500); }
.accent-dot[data-accent="pink"]   { color: var(--pink-500); }
.accent-dot[data-accent="orange"] { color: var(--orange-500); }
.accent-dot[data-accent="blue"]   { color: var(--blue-500); }
.accent-dot[data-accent="purple"] { color: var(--purple-500); }
.accent-dot[data-accent="grey"]   { color: var(--grey-500); }


/* Ligne : deux blocs séparés (toggle à gauche, picker à droite) */
.settings-row{
  display:flex;
  flex-wrap:wrap;
  column-gap: 2rem;   /* espace horizontal entre blocs */
  row-gap: 1.25rem;   /* espace vertical entre lignes (desktop) */
  align-items:flex-start;
}

/* Blocs (langue / thème / accent) */
.settings-block{
  display:flex;
  flex-direction:column;
  min-width: 240px;   /* force plus vite le wrap, ajuste si besoin */
}

/* Label compact par défaut */
.settings-block > label.small{ margin-bottom:.35rem; }

/* Vue plus étroite : compacter l’espace vertical */
@media (max-width: 1200px){
  .settings-row{ row-gap: .85rem; }
}
@media (max-width: 992px){
  .settings-row{ row-gap: .6rem; column-gap: 1.25rem; }
  .settings-block{ min-width: 220px; }
  .settings-block > label.small{ margin-bottom:.25rem; }
}
@media (max-width: 576px){
  .settings-row{ row-gap: .45rem; column-gap: 1rem; }
  .settings-block{ min-width: 200px; }
}



/* ===== Switch Theme (fix Bootstrap layout) ===== */
.form-switch.switch-theme{
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  padding-left: 0;              /* annule padding Bootstrap */
  margin: 0;
}

/* L’input dessine le track + le thumb (::before) */
.switch-theme .form-check-input{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;                    /* annule le margin Bootstrap */
  transform: none;              /* supprime translateY de Bootstrap */
  background:#ccc;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: none;             /* option: supprime glow Bootstrap */
  transition: background-color .2s ease-in-out;
}
.switch-theme .form-check-input:focus{ box-shadow: none; outline: none; }
.switch-theme .form-check-input:checked{ background-color: var(--grey-700); }

.switch-theme .form-check-input::before{
  content:"";
  position:absolute;
  top:3px; left:4px;
  width:24px; height:24px;
  background:#fff;
  border-radius:50%;
  transform: translateX(0);
  transition: transform .2s ease-in-out;
}
.switch-theme .form-check-input:checked::before{ transform: translateX(30px); }

/* Le label recouvre tout le switch et porte les icônes */
.switch-theme .form-check-label{
  position:absolute;
  inset:0;                      /* top/right/bottom/left:0 */
  display:block;
  margin:0;                     /* annule margin Bootstrap */
  pointer-events:none;          /* clics passent à l’input */
}

/* Icônes soleil/lune */
.switch-theme .switch-icon{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  font-size:16px;
  line-height:1;
  transition: opacity .2s ease-in-out;
  pointer-events:none;
}
.switch-theme .switch-icon.sun{ left:8px;  color:#f39c12; opacity:1; }
.switch-theme .switch-icon.moon{ right:8px; color:#f1c40f; opacity:0; }

.switch-theme .form-check-input:checked + .form-check-label .switch-icon.sun{  opacity:0; }
.switch-theme .form-check-input:checked + .form-check-label .switch-icon.moon{ opacity:1; }

/* 8) Accessibilité : réduire les animations globales */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}


/* ================================= NÉON ================================= */