/* ============================================
   SYSTÈME DE THÈMES - DATA WORLDS v3.0
   Avec gradients, accents et polices personnalisées
   ============================================ */

/* ========================================
   IMPORTS DE POLICES
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Polices additionnelles pour les thèmes */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800;900&display=swap');

/* ========================================
   THÈME PAR DÉFAUT: OCEAN PLATINUM
   ======================================== */
:root,
[data-theme="ocean"] {
  /* Polices */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-accent: 'Inter', sans-serif;

  /* Couleurs principales */
  --primary: #0a2540;
  --primary-dark: #051729;
  --primary-light: #1a3a5f;

  --accent: #06b6d4;
  --accent-dark: #097a96;
  --accent-light: #cbe7ec;
  --accent-2: #22d3ee;
  --accent-3: #0891b2;
  --accent-hover: #14b8d4;

  --secondary: #3a5a7e;

  /* Texte */
  --text-dark: #0d3d56;
  --text-medium: #2d7fa5;
  --text-light: #68b5d8;
  --text-white: #f0f4f8;
  --text-muted: #94a3b8;

  /* Backgrounds */
  --bg-white: #ebf2f5;
  --bg-light: #e1e6eb;
  --bg-medium: #e1e8ed;
  --bg-dark: #0891b2;

  /* Gradients */
  --gradient-main: linear-gradient(135deg, rgba(31,41,55,0.98) 0%, rgba(75,85,99,0.95) 40%, rgba(6,182,212,0.90) 100%);
  --gradient-accent: linear-gradient(135deg, #f0f0f0 0%, #14b8d4 50%, #22d3ee75 100%);
  --gradient-accent-transparent: linear-gradient(135deg, #f0f0f0aa 0%, #14b7d469 50%, #22d3ee4f 100%);
  --gradient-hero: linear-gradient(135deg, var(--accent-light) 50%, var(--accent-2) 60%, rgba(6,182,212,0.85) 70%);
  --gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
  --gradient-accent-vibrant: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 50%, var(--accent-2) 100%);
  --gradient-soft: linear-gradient(135deg, var(--accent-light) 0%, rgba(6,182,212,0.3) 50%, rgba(34,211,238,0.2) 100%);
  --gradient-card: linear-gradient(135deg, rgba(235,242,245,0.8) 0%, rgba(225,230,235,0.6) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(10,37,64,0) 0%, rgba(10,37,64,0.7) 100%);
  --gradient-radial: radial-gradient(circle at top right, var(--accent-2) 0%, var(--primary) 100%);
  --gradient-radial-soft: radial-gradient(circle at center, var(--accent-light) 0%, transparent 70%);




  /* Buttons */
--btn-primary-bg: var(--accent);
--btn-primary-bg-hover: var(--accent-hover);
--btn-primary-bg-active: var(--accent-dark);
--btn-primary-text: #ffffff;


--btn-secondary-bg: var(--primary-light);
--btn-secondary-bg-hover: var(--primary);
--btn-secondary-bg-active: var(--primary-dark);
--btn-secondary-text: #ffffff;


--btn-outline-bg: transparent;
--btn-outline-border: color-mix(in srgb, var(--accent) 60%, #000 40%);
--btn-outline-text: var(--accent);
--btn-outline-bg-hover: rgba(6,182,212,0.12);
--btn-outline-text-hover: var(--primary-dark);


--btn-disabled-bg: #cbd5e1;
--btn-disabled-text: #94a3b8;


/* Inputs */
--input-bg: #ffffff;
--input-border: #d1e9ee;
--input-border-focus: var(--accent);
--input-bg-focus: #fbfeff;
--input-text: var(--text-dark);
--input-placeholder: #94a3b8;
}

/* ========================================
   THÈME 1: SUNSET (Orange & Bleu)
   Polices: Montserrat + Lora (moderne et chaleureux)
   ======================================== */
[data-theme="sunset"] {
  /* Polices */
  --font-main: 'Montserrat', -apple-system, sans-serif;
  --font-heading: 'Lora', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-accent: 'Montserrat', sans-serif;

  --primary: #0a4d6e;
  --primary-dark: #053d56;
  --primary-light: #1a6a8f;

  --accent: #ff8c42;
  --accent-dark: #e67a2e;
  --accent-light: #ffa666;
  --accent-2: #ffb088;
  --accent-3: #f77f2e;
  --accent-hover: #ff9d5c;

  --secondary: #2d7fa5;

  --text-dark: #0d3d56;
  --text-medium: #2d7fa5;
  --text-light: #68b5d8;
  --text-white: #fff5f0;
  --text-muted: #94a3b8;

  --bg-white: #fff9f5;
  --bg-light: #fef3ec;
  --bg-medium: #fde9dd;
  --bg-dark: #ff8c42;

  --gradient-main: linear-gradient(135deg, rgba(10,77,110,0.98) 0%, rgba(45,127,165,0.95) 40%, rgba(255,140,66,0.90) 100%);
  --gradient-accent: linear-gradient(135deg, #ff8c42aa  0%, #ff9d5c 50%, #ffae76 100%);
  --gradient-accent-transparent: linear-gradient(135deg, #ff8c42aa 0%, #ff9d5c69 50%, #ffae764f 100%);
  --gradient-hero: linear-gradient(135deg, var(--accent-light) 50%, var(--accent-2) 60%, rgba(6,182,212,0.85) 70%);
  --gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
  --gradient-accent-vibrant: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 50%, var(--accent-2) 100%);
  --gradient-soft: linear-gradient(135deg, var(--accent-light) 0%, rgba(255,140,66,0.3) 50%, rgba(255,176,136,0.2) 100%);
  --gradient-card: linear-gradient(135deg, rgba(255,249,245,0.9) 0%, rgba(254,243,236,0.7) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(10,77,110,0) 0%, rgba(10,77,110,0.8) 100%);
  --gradient-radial: radial-gradient(circle at top right, var(--accent-2) 0%, var(--primary) 100%);
  --gradient-radial-soft: radial-gradient(circle at center, var(--accent-light) 0%, transparent 70%);

    /* Boutons primaires */
/* Buttons */
--btn-primary-bg: var(--accent);
--btn-primary-bg-hover: var(--accent-hover);
--btn-primary-bg-active: var(--accent-dark);
--btn-primary-text: #fff5f0;


--btn-secondary-bg: var(--primary-light);
--btn-secondary-bg-hover: var(--primary);
--btn-secondary-bg-active: var(--primary-dark);
--btn-secondary-text: #ffffff;


--btn-outline-bg: transparent;
--btn-outline-border: var(--accent);
--btn-outline-text: var(--accent);
--btn-outline-bg-hover: var(--accent-light);
--btn-outline-text-hover: var(--primary-dark);


--btn-disabled-bg: #f3e4d8;
--btn-disabled-text: #d2c2b9;


/* Inputs */
--input-bg: #fff9f5;
--input-border: #f5d8c4;
--input-border-focus: var(--accent);
--input-bg-focus: #fff;
--input-text: #38210e;
--input-placeholder: #e0b79c;
}

/* ========================================
   THÈME 2: MIDNIGHT (Violet & Or)
   Polices: Crimson Pro + Raleway (élégant et sophistiqué)
   ======================================== */
[data-theme="midnight"] {
  /* Polices */
  --font-main: 'Raleway', -apple-system, sans-serif;
  --font-heading: 'Crimson Pro', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-accent: 'Raleway', sans-serif;

  --primary: #1e1441;
  --primary-dark: #120c2a;
  --primary-light: #2d1f5e;

  --accent: #d4af37;
  --accent-dark: #b89b2f;
  --accent-light: #e8c95f;
  --accent-2: #f0d978;
  --accent-3: #c9a02e;
  --accent-hover: #e0bd4d;

  --secondary: #4a3072;

  --text-dark: #1e1441;
  --text-medium: #6b4fa0;
  --text-light: #9d7fca;
  --text-white: #faf9fc;
  --text-muted: #a89bb8;

  --bg-white: #f8f6fb;
  --bg-light: #f0ecf7;
  --bg-medium: #e8e1f0;
  --bg-dark: #d4af37;

  --gradient-main: linear-gradient(135deg, rgba(30,20,65,0.98) 0%, rgba(74,48,114,0.95) 40%, rgba(212,175,55,0.90) 100%);
  --gradient-accent: linear-gradient(135deg, #d4af37aa  0%, #e0bd4d 50%, #ebcb63 100%);
  --gradient-accent-transparent: linear-gradient(135deg, #d4af37aa 0%, #e0bd4d69 50%, #ebcb634f 100%);
  --gradient-hero: linear-gradient(135deg, var(--accent-light) 50%, var(--accent-2) 60%, rgba(6,182,212,0.85) 70%);
  --gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--secondary) 100%);
  --gradient-accent-vibrant: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 50%, var(--accent-2) 100%);
  --gradient-soft: linear-gradient(135deg, var(--accent-light) 0%, rgba(212,175,55,0.3) 50%, rgba(240,217,120,0.2) 100%);
  --gradient-card: linear-gradient(135deg, rgba(248,246,251,0.95) 0%, rgba(240,236,247,0.8) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(30,20,65,0) 0%, rgba(30,20,65,0.85) 100%);
  --gradient-radial: radial-gradient(circle at top right, var(--accent-2) 0%, var(--secondary) 100%);
  --gradient-radial-soft: radial-gradient(circle at center, var(--accent-light) 0%, transparent 70%);

  --shadow-accent: 0 8px 32px rgba(212,175,55,0.4);
  --shadow-glow: 0 0 30px rgba(212,175,55,0.3);

  /* Buttons */
--btn-primary-bg: var(--accent);
--btn-primary-bg-hover: var(--accent-hover);
--btn-primary-bg-active: var(--accent-dark);
--btn-primary-text: #fff;


--btn-secondary-bg: #2b2545;
--btn-secondary-bg-hover: #201a36;
--btn-secondary-bg-active: #171327;
--btn-secondary-text: #e6e6ff;


--btn-outline-bg: transparent;
--btn-outline-border: color-mix(in srgb, var(--accent) 60%, #fff 40%);
--btn-outline-text: var(--accent);
--btn-outline-bg-hover: rgba(99,102,241,0.12);
--btn-outline-text-hover: #c7c7d9;


--btn-disabled-bg: #2a2a38;
--btn-disabled-text: #6b6b78;


/* Inputs */
--input-bg: #0f1324;
--input-border: #2a2a44;
--input-border-focus: var(--accent);
--input-bg-focus: #14162b;
--input-text: #e6e6ff;
--input-placeholder: #7a7a8c;
}

/* ========================================
   THÈME 3: FOREST (Vert & Cuivre)
   Polices: Poppins + Lora (naturel et robuste)
   ======================================== */
[data-theme="forest"] {
  /* Polices */
  --font-main: 'Poppins', -apple-system, sans-serif;
  --font-heading: 'Lora', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-accent: 'Poppins', sans-serif;

  --primary: #1a3f2f;
  --primary-dark: #0f2419;
  --primary-light: #2a5f47;

  --accent: #b87333;
  --accent-dark: #9f6128;
  --accent-light: #cd8f53;
  --accent-2: #d89f68;
  --accent-3: #a6651f;
  --accent-hover: #c88447;

  --secondary: #3d7a5c;

  --text-dark: #1a3f2f;
  --text-medium: #3d7a5c;
  --text-light: #6ba889;
  --text-white: #f9fdfb;
  --text-muted: #89a89b;

  --bg-white: #f0f5f2;
  --bg-light: #e6efe9;
  --bg-medium: #d5e5db;
  --bg-dark: #b87333;

  --gradient-main: linear-gradient(135deg, rgba(26,63,47,0.98) 0%, rgba(61,122,92,0.95) 40%, rgba(184,115,51,0.90) 100%);
  --gradient-accent: linear-gradient(135deg, #b87333aa  0%, #c88447 50%, #d8955b 100%);
  --gradient-accent-transparent: linear-gradient(135deg, #b87333aa 0%, #c8844769 50%, #d8955b4f 100%);
  --gradient-hero: linear-gradient(135deg, var(--accent-light) 50%, var(--accent-2) 60%, rgba(6,182,212,0.85) 70%);
  --gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--secondary) 100%);
  --gradient-accent-vibrant: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 50%, var(--accent-2) 100%);
  --gradient-soft: linear-gradient(135deg, var(--accent-light) 0%, rgba(184,115,51,0.3) 50%, rgba(216,159,104,0.2) 100%);
  --gradient-card: linear-gradient(135deg, rgba(240,245,242,0.95) 0%, rgba(230,239,233,0.8) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(26,63,47,0) 0%, rgba(26,63,47,0.8) 100%);
  --gradient-radial: radial-gradient(circle at top right, var(--accent-2) 0%, var(--secondary) 100%);
  --gradient-radial-soft: radial-gradient(circle at center, var(--accent-light) 0%, transparent 70%);

  --btn-primary-bg: var(--accent);
--btn-primary-bg-hover: var(--accent-hover);
--btn-primary-bg-active: var(--accent-dark);
--btn-primary-text: #08321e;


--btn-secondary-bg: #115c45;
--btn-secondary-bg-hover: #0f4f39;
--btn-secondary-bg-active: #0b3628;
--btn-secondary-text: #f0fff7;


--btn-outline-bg: transparent;
--btn-outline-border: color-mix(in srgb, var(--accent) 60%, #000 40%);
--btn-outline-text: var(--accent-dark);
--btn-outline-bg-hover: rgba(74,222,128,0.08);
--btn-outline-text-hover: var(--primary-dark);


--btn-disabled-bg: #dbeadf;
--btn-disabled-text: #8ea89a;


/* Inputs */
--input-bg: #f8fff9;
--input-border: #d2edde;
--input-border-focus: var(--accent);
--input-bg-focus: #ffffff;
--input-text: #053022;
--input-placeholder: #89a89b;
}

/* ========================================
   THÈME 4: NEON (Gris & Cyan)
   Polices: Space Grotesk + Inter (futuriste et tech)
   ======================================== */
[data-theme="neon"] {
  /* Polices */
  --font-main: 'Space Grotesk', -apple-system, sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-accent: 'Space Grotesk', sans-serif;

  --primary: #1f2937;
  --primary-dark: #111827;
  --primary-light: #374151;

  --accent: #06b6d4;
  --accent-dark: #0891b2;
  --accent-light: #22d3ee;
  --accent-2: #67e8f9;
  --accent-3: #0e7490;
  --accent-hover: #14b8d4;

  --secondary: #4b5563;

  --text-dark: #1f2937;
  --text-medium: #6b7280;
  --text-light: #9ca3af;
  --text-white: #f9fafb;
  --text-muted: #9ca3af;

  --bg-white: #f9fafb;
  --bg-light: #f3f4f6;
  --bg-medium: #e5e7eb;
  --bg-dark: #06b6d4;

  --gradient-main: linear-gradient(135deg, rgba(31,41,55,0.98) 0%, rgba(75,85,99,0.95) 40%, rgba(6,182,212,0.90) 100%);
  --gradient-accent: linear-gradient(135deg, #06b6d4aa  0%, #14b8d4 50%, #22d3ee 100%);
  --gradient-accent-transparent: linear-gradient(135deg, #06b6d4aa 0%, #14b8d469 50%, #22d3ee4f 100%);
  --gradient-hero: linear-gradient(135deg, var(--accent-light) 50%, var(--accent-2) 60%, rgba(6,182,212,0.85) 70%);
  --gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--secondary) 100%);
  --gradient-accent-vibrant: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 50%, var(--accent-2) 100%);
  --gradient-soft: linear-gradient(135deg, var(--accent-light) 0%, rgba(6,182,212,0.3) 50%, rgba(103,232,249,0.2) 100%);
  --gradient-card: linear-gradient(135deg, rgba(249,250,251,0.95) 0%, rgba(243,244,246,0.8) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(31,41,55,0) 0%, rgba(31,41,55,0.85) 100%);
  --gradient-radial: radial-gradient(circle at top right, var(--accent-2) 0%, var(--primary) 100%);
  --gradient-radial-soft: radial-gradient(circle at center, var(--accent-light) 0%, transparent 70%);

  --shadow-accent: 0 8px 32px rgba(6,182,212,0.4);
  --shadow-neon: 0 0 20px rgba(6,182,212,0.6);

  /* Buttons (neon prefixed) */
--btn-primary-bg: var(--accent);
--btn-primary-bg-hover: var(--accent-light);
--btn-primary-bg-active: var(--accent-dark);
--btn-primary-text: #041018;


--btn-secondary-bg: #0b1220;
--btn-secondary-bg-hover: #0f1724;
--btn-secondary-bg-active: #05070b;
--btn-secondary-text: #67e8f9;


--btn-outline-bg: transparent;
--btn-outline-border: rgba(6,182,212,0.9);
--btn-outline-text: rgba(6,182,212,0.95);
--btn-outline-bg-hover: rgba(6,182,212,0.06);
--btn-outline-text-hover: var(--text-white);


--btn-disabled-bg: #091021;
--btn-disabled-text: #334155;


/* Inputs */
--input-bg: #071323;
--input-border: #0b1220;
--input-border-focus: var(--accent);
--input-bg-focus: #081828;
--input-text: #dff9fb;
--input-placeholder: #93c5fd;
}

/* ========================================
   THÈME 5: ROSE (Bordeaux & Rose Gold)
   Polices: Quicksand + Crimson Pro (doux et élégant)
   ======================================== */
[data-theme="rose"] {
  /* Polices */
  --font-main: 'Quicksand', -apple-system, sans-serif;
  --font-heading: 'Crimson Pro', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-accent: 'Quicksand', sans-serif;

  --primary: #4a1c2e;
  --primary-dark: #2d1119;
  --primary-light: #6b2943;

  --accent: #e6a8a0;
  --accent-dark: #d48f87;
  --accent-light: #f4c4bc;
  --accent-2: #ffd4cd;
  --accent-3: #cc8278;
  --accent-hover: #edb8b0;

  --secondary: #7a3d52;

  --text-dark: #4a1c2e;
  --text-medium: #7a3d52;
  --text-light: #a66178;
  --text-white: #fdfbfb;
  --text-muted: #b89098;

  --bg-white: #faf5f4;
  --bg-light: #f7efed;
  --bg-medium: #f2e5e2;
  --bg-dark: #e6a8a0;

  --gradient-main: linear-gradient(135deg, rgba(74,28,46,0.98) 0%, rgba(122,61,82,0.95) 40%, rgba(230,168,160,0.90) 100%);
  --gradient-accent: linear-gradient(135deg, #e6a8a0aa  0%, #edb8b0 50%, #f4c8c0 100%);
  --gradient-accent-transparent: linear-gradient(135deg, #e6a8a0aa 0%, #edb8b069 50%, #f4c8c04f 100%);
  --gradient-hero: linear-gradient(135deg, var(--accent-light) 50%, var(--accent-2) 60%, rgba(6,182,212,0.85) 70%);
  --gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--secondary) 100%);
  --gradient-accent-vibrant: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 50%, var(--accent-2) 100%);
  --gradient-soft: linear-gradient(135deg, var(--accent-light) 0%, rgba(230,168,160,0.3) 50%, rgba(255,212,205,0.2) 100%);
  --gradient-card: linear-gradient(135deg, rgba(250,245,244,0.95) 0%, rgba(247,239,237,0.8) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(74,28,46,0) 0%, rgba(74,28,46,0.8) 100%);
  --gradient-radial: radial-gradient(circle at top right, var(--accent-2) 0%, var(--secondary) 100%);
  --gradient-radial-soft: radial-gradient(circle at center, var(--accent-light) 0%, transparent 70%);


  /* Buttons */
--btn-primary-bg: var(--accent);
--btn-primary-bg-hover: var(--accent-hover);
--btn-primary-bg-active: var(--accent-dark);
--btn-primary-text: var(--text-white);


--btn-secondary-bg: #6b2943;
--btn-secondary-bg-hover: #5a2038;
--btn-secondary-bg-active: #3f1527;
--btn-secondary-text: #fff7f6;


--btn-outline-bg: transparent;
--btn-outline-border: var(--accent-dark);
--btn-outline-text: var(--accent-dark);
--btn-outline-bg-hover: rgba(230,168,160,0.08);
--btn-outline-text-hover: var(--primary-dark);


--btn-disabled-bg: #f3e8e6;
--btn-disabled-text: #cbb2b0;


/* Inputs */
--input-bg: #fff7f6;
--input-border: #f3d6d3;
--input-border-focus: var(--accent);
--input-bg-focus: #fff;
--input-text: #4a1c2e;
--input-placeholder: #d8a9a3;
}

/* ========================================
   THÈME 6: COSMIC (Bleu nuit & Violet)
   Polices: Nunito + Playfair Display (mystique et spatial)
   ======================================== */
[data-theme="cosmic"] {
  /* Polices */
  --font-main: 'Nunito', -apple-system, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-accent: 'Nunito', sans-serif;

  --primary: #0f1729;
  --primary-dark: #070c17;
  --primary-light: #1a2840;

  --accent: #a78bfa;
  --accent-dark: #8b5cf6;
  --accent-light: #c4b5fd;
  --accent-2: #ddd6fe;
  --accent-3: #7c3aed;
  --accent-hover: #b19dfc;

  --secondary: #1e3a8a;

  --text-dark: #0f1729;
  --text-medium: #4c5d8a;
  --text-light: #7c8bb5;
  --text-white: #fafbfc;
  --text-muted: #9ba5c8;

  --bg-white: #f8f9fc;
  --bg-light: #f1f3f9;
  --bg-medium: #e6e9f3;
  --bg-dark: #a78bfa;

  --gradient-main: linear-gradient(135deg, rgba(15,23,41,0.98) 0%, rgba(30,58,138,0.95) 40%, rgba(167,139,250,0.90) 100%);
  --gradient-accent: linear-gradient(135deg, #a78bfaaa  0%, #b19dfc 50%, #c4b5fd 100%);
  --gradient-accent-transparent: linear-gradient(135deg, #a78bfaaa 0%, #b19dfc69 50%, #c4b5fd4f 100%);
  --gradient-hero: linear-gradient(135deg, var(--accent-light) 50%, var(--accent-2) 60%, rgba(6,182,212,0.85) 70%);
  --gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--secondary) 100%);
  --gradient-accent-vibrant: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 50%, var(--accent-2) 100%);
  --gradient-soft: linear-gradient(135deg, var(--accent-light) 0%, rgba(167,139,250,0.3) 50%, rgba(221,214,254,0.2) 100%);
  --gradient-card: linear-gradient(135deg, rgba(248,249,252,0.95) 0%, rgba(241,243,249,0.8) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(15,23,41,0) 0%, rgba(15,23,41,0.9) 100%);
  --gradient-radial: radial-gradient(circle at top right, var(--accent-2) 0%, var(--secondary) 100%);
  --gradient-radial-soft: radial-gradient(circle at center, var(--accent-light) 0%, transparent 70%);

  --shadow-accent: 0 8px 32px rgba(167,139,250,0.4);
  --shadow-cosmic: 0 0 40px rgba(167,139,250,0.3);

/* Buttons (user-specified cosmic values) */
--btn-primary-bg: #7c3aed;
--btn-primary-bg-hover: #6d28d9;
--btn-primary-bg-active: #5b21b6;
--btn-primary-text: #f5f3ff;


--btn-secondary-bg: #4c1d95;
--btn-secondary-bg-hover: #5b21b6;
--btn-secondary-bg-active: #3b0d71;
--btn-secondary-text: #ede9fe;


--btn-outline-bg: transparent;
--btn-outline-border: #a78bfa;
--btn-outline-text: #a78bfa;
--btn-outline-bg-hover: rgba(167,139,250,0.15);
--btn-outline-text-hover: #c4b5fd;


--btn-disabled-bg: #3f3f46;
--btn-disabled-text: #71717a;


/* Inputs (user-specified cosmic values) */
--input-bg: #1e1b4b;
--input-border: #4c1d95;
--input-border-focus: #a78bfa;
--input-bg-focus: #2e2a68;
--input-text: #e2e8f0;
--input-placeholder: #8b5cf6;
}

/* ========================================
   THÈME 7: TROPICAL (Lagon & Corail)
   Polices: Poppins + Quicksand (frais et vibrant)
   ======================================== */
[data-theme="tropical"] {
  /* Polices */
  --font-main: 'Poppins', -apple-system, sans-serif;
  --font-heading: 'Quicksand', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-accent: 'Poppins', sans-serif;

  --primary: #0d4f5c;
  --primary-dark: #083a44;
  --primary-light: #1a6e7f;

  --accent: #ff6b6b;
  --accent-dark: #ee5a52;
  --accent-light: #ff8787;
  --accent-2: #ffa3a3;
  --accent-3: #e04b4b;
  --accent-hover: #ff7a7a;

  --secondary: #20a39e;

  --text-dark: #0d4f5c;
  --text-medium: #20a39e;
  --text-light: #4ecdc4;
  --text-white: #fdfefe;
  --text-muted: #8bb8b5;

  --bg-white: #f0fbfa;
  --bg-light: #e6f8f7;
  --bg-medium: #d5f2f0;
  --bg-dark: #ff6b6b;

  --gradient-main: linear-gradient(135deg, rgba(13,79,92,0.98) 0%, rgba(32,163,158,0.95) 40%, rgba(255,107,107,0.90) 100%);
  --gradient-accent: linear-gradient(135deg, #ff6b6baa  0%, #ff7a7a 50%, #ff9999 100%);
  --gradient-accent-transparent: linear-gradient(135deg, #ff6b6baa 0%, #ff7a7a69 50%, #ff99994f 100%);
  --gradient-hero: linear-gradient(135deg, var(--accent-light) 50%, var(--accent-2) 60%, rgba(6,182,212,0.85) 70%);
  --gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--secondary) 100%);
  --gradient-accent-vibrant: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 50%, var(--accent-2) 100%);
  --gradient-soft: linear-gradient(135deg, var(--accent-light) 0%, rgba(255,107,107,0.3) 50%, rgba(255,163,163,0.2) 100%);
  --gradient-card: linear-gradient(135deg, rgba(240,251,250,0.95) 0%, rgba(230,248,247,0.8) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(13,79,92,0) 0%, rgba(13,79,92,0.8) 100%);
  --gradient-radial: radial-gradient(circle at top right, var(--accent-2) 0%, var(--secondary) 100%);
  --gradient-radial-soft: radial-gradient(circle at center, var(--accent-light) 0%, transparent 70%);

  /* Buttons */
--btn-primary-bg: var(--accent);
--btn-primary-bg-hover: var(--accent-hover);
--btn-primary-bg-active: var(--accent-dark);
--btn-primary-text: #ffffff;


--btn-secondary-bg: #0f6b6b;
--btn-secondary-bg-hover: #0b5757;
--btn-secondary-bg-active: #083f3f;
--btn-secondary-text: #eaffef;


--btn-outline-bg: transparent;
--btn-outline-border: rgba(255,107,107,0.9);
--btn-outline-text: rgba(255,107,107,0.95);
--btn-outline-bg-hover: rgba(255,107,107,0.06);
--btn-outline-text-hover: var(--text-dark);


--btn-disabled-bg: #f3f7f6;
--btn-disabled-text: #9bbdb8;


/* Inputs */
--input-bg: #f7fffe;
--input-border: #dff3f2;
--input-border-focus: var(--accent);
--input-bg-focus: #ffffff;
--input-text: #043737;
--input-placeholder: #8bb8b5;
}

/* ========================================
   VARIABLES COMMUNES (non affectées par le thème)
   ======================================== */
:root {
  /* Espacements */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  
  /* Typographie (tailles) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  
  
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Bordures / radius */
  --border-color: rgba(10,37,64,0.10);
  --border-light: rgba(10,37,64,0.05);
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-full: 9999px;
  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  
  /* Ombres */
  --shadow-sm: 0 2px 8px rgba(10,37,64,0.08);
  --shadow-md: 0 6px 18px rgba(10,37,64,0.12);
  --shadow-lg: 0 10px 30px rgba(10,37,64,0.14);
  --shadow-xl: 0 20px 50px rgba(10,37,64,0.18);
  /* Transitions */
  --transition-fast: 0.15s;
  --transition-base: 0.25s;
  --transition-slow: 0.4s;
  --ease-smooth: cubic-bezier(0.4,0,0.2,1);

  /* Layout */
  --container-max: 1280px;
  --container-padding: clamp(1.5rem, 5vw, 3rem);
  --header-height: 72px;

  /* Composants: boutons */
  --btn-padding-y: 0.6rem;
  --btn-padding-x: 1rem;
  --btn-gap: 0.6rem;
  --btn-radius: calc(var(--radius-md) / 1.2);
  --btn-font-weight: var(--weight-semibold);

  /* Composants: inputs */
  --input-padding-y: 0.66rem;
  --input-padding-x: 0.9rem;
  --input-radius: calc(var(--radius-md) / 1.2);

  /* Backdrop */
  --backdrop-blur: blur(8px);

  /* Focus */
  --focus-outline: 3px solid rgba(10,37,64,0.14);


    /* Boutons primaires */
  --btn-primary-bg: var(--accent);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-bg-active: var(--accent-dark);

  --btn-primary-text: #ffffff;

  /* Boutons secondaires */
  --btn-secondary-bg: var(--primary-light);
  --btn-secondary-bg-hover: var(--primary);
  --btn-secondary-bg-active: var(--primary-dark);

  --btn-secondary-text: #ffffff;

  /* Boutons outline */
  --btn-outline-bg: transparent;
  --btn-outline-border: var(--accent);
  --btn-outline-text: var(--accent);
  --btn-outline-bg-hover: var(--accent-light);
  --btn-outline-text-hover: var(--primary-dark);

  /* Disabled */
  --btn-disabled-bg: #cbd5e1;
  --btn-disabled-text: #94a3b8;

  /* Inputs */
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --input-border-focus: var(--accent);
  --input-bg-focus: #ffffff;
  --input-text: var(--primary-dark);
  --input-placeholder: #94a3b8;


    --transition-fast: 0.15s;
  --transition-base: 0.25s;
  --transition-slow: 0.4s;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);


    --success:green;
    --danger:rgb(113, 26, 26);

}

/* ========================================
   APPLICATION DES POLICES
   ======================================== */

body {
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4{
  color: var(--text-medium);
}


h1, h2, h3, h4, h5, h6,
.heading,
.title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);

}

code, pre,
.code,
.mono {
  font-family: var(--font-mono);
}

.accent-font {
  font-family: var(--font-accent);
}

/* ========================================
   CLASSES UTILITAIRES POUR LES GRADIENTS
   ======================================== */

.gradient-primary-bg {
  background: var(--gradient-primary);
}

.gradient-accent-bg {
  background: var(--gradient-accent);
}

.gradient-accent-vibrant-bg {
  background: var(--gradient-accent-vibrant);
}

.gradient-soft-bg {
  background: var(--gradient-soft);
}

.gradient-card-bg {
  background: var(--gradient-card);
}

.gradient-hero-bg {
  background: var(--gradient-hero);
}

.gradient-overlay-bg {
  background: var(--gradient-overlay);
}

.gradient-radial-bg {
  background: var(--gradient-radial);
}

.gradient-text {
  background: var(--gradient-accent-vibrant);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Effet glassmorphism avec gradient */
.glass-gradient {
  background: var(--gradient-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Bordure animée avec gradient */
.gradient-border {
  position: relative;
  background: var(--bg-white);
  border-radius: var(--radius-md);
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--gradient-accent-vibrant);
  border-radius: var(--radius-md);
  z-index: -1;
}

/* Bouton avec gradient animé */
.btn-gradient {
  background: var(--gradient-accent-vibrant);
  color: white;
  border: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base);
  font-family: var(--font-accent);
  font-weight: var(--weight-semibold);
}

.btn-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-accent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.btn-gradient:hover::before {
  opacity: 1;
}

.btn-gradient:hover {
  transform: translateY(-2px);
}

/* Sections avec gradients */
.section-gradient-overlay {
  position: relative;
}

.section-gradient-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-overlay);
  z-index: 1;
}

.section-gradient-overlay > * {
  position: relative;
  z-index: 2;
}
/* Bouton primaire */
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: .6rem 1.2rem;
  border-radius: 8px;
  margin: 5px;
  border: none;
  cursor: pointer;
  transition: 0.2s;
}
.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
}
.btn-primary:active {
  background: var(--btn-primary-bg-active);
}
.btn-primary:disabled {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  cursor: not-allowed;
}

/* Bouton secondaire */
.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  padding: .6rem 1.2rem;
  border-radius: 8px;
  border: none;
    margin: 5px;

  cursor: pointer;
  transition: 0.2s;
}
.btn-secondary:hover {
  background: var(--btn-secondary-bg-hover);
}
.btn-secondary:active {
  background: var(--btn-secondary-bg-active);
}
.btn-secondary:disabled {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
}


/* Bouton primaire pour liens */
a.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: .6rem 1.2rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: 0.2s;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
a.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  text-decoration: none;
}
a.btn-primary:active {
  background: var(--btn-primary-bg-active);
}
a.btn-primary.disabled,
a.btn-primary[aria-disabled="true"] {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  cursor: not-allowed;
  pointer-events: none;
}

/* Bouton secondaire pour liens */
a.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  padding: .6rem 1.2rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: 0.2s;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
a.btn-secondary:hover {
  background: var(--btn-secondary-bg-hover);
  text-decoration: none;
}
a.btn-secondary:active {
  background: var(--btn-secondary-bg-active);
}
a.btn-secondary.disabled,
a.btn-secondary[aria-disabled="true"] {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  cursor: not-allowed;
  pointer-events: none;
}

/* Ghost Button */
.btn-ghost {
background: transparent;
color: var(--text-medium);
border: none;
padding: 0.6rem 1.2rem;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: 0.25s ease;
}
.btn-ghost:hover {
background: rgba(255,140,66,0.12);
color: var(--accent-dark);
}
.btn-ghost:active {
background: rgba(255,140,66,0.2);
}


/* Danger Button */
.btn-danger {
background: #d9534f;
color: #fff;
padding: 0.75rem 1.4rem;
border-radius: 12px;
font-weight: 600;
transition: 0.25s ease;
border: none;
}
.btn-danger:hover {
background: #c2403c;
}
.btn-danger:active {
background: #a3312e;
}


/* Success Button */
.btn-success {
background: #4caf50;
color: #fff;
padding: 0.75rem 1.4rem;
border-radius: 12px;
font-weight: 600;
border: none;
transition: 0.25s ease;
}
.btn-success:hover {
background: #3f8f42;
}
.btn-success:active {
background: #317535;
}


/* Rounded Button Variants */
.btn-round {
border-radius: 50px;
padding: 0.6rem 1.6rem;
}
.btn-round-sm {
border-radius: 40px;
padding: 0.4rem 1rem;
font-size: 0.875rem;
}
.btn-round-lg {
border-radius: 60px;
padding: 1rem 2.2rem;
font-size: 1.15rem;
}


/* Outline Accent Button (Sunset Style Extended) */
.btn-outline {
background: var(--btn-outline-bg);
border: 2px solid var(--btn-outline-border);
color: var(--btn-outline-text);
padding: 0.7rem 1.4rem;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: 0.25s ease;
}
.btn-outline:hover {
background: var(--btn-outline-bg-hover);
color: var(--btn-outline-text-hover);
}
.btn-outline:active {
opacity: 0.85;
}


/* Glass Button */
.btn-glass {
backdrop-filter: blur(12px);
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.4);
}
/* Inputs */
input,
textarea,
select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
  padding: .6rem .8rem;
  border-radius: 6px;
  transition: 0.2s;
}
input::placeholder {
  color: var(--input-placeholder);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--input-border-focus);
  background: var(--input-bg-focus);
  outline: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  :root {
    --btn-padding-y: 0.55rem;
    --btn-padding-x: 0.9rem;
    --input-padding-y: 0.55rem;
    --header-height: 64px;
    --container-padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  :root {
    --btn-padding-y: 0.5rem;
    --btn-padding-x: 0.8rem;
    --input-padding-y: 0.5rem;
    --text-5xl: 2rem;
    --text-4xl: 1.75rem;
    --text-3xl: 1.5rem;
  }
}