:root{
      --bg:#0b0b0f;
      --panel:#0f111a;
      --panel2:#0c0e14;
      --text:#f5f7ff;
      --muted:rgba(245,247,255,.68);
      --line:rgba(255,255,255,.10);
      --yellow:#FFD400;
      --yellow2:#FFB800;
      --shadow: 0 20px 60px rgba(0,0,0,.45);
      --shadow2: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
      --radius2: 14px;
    }
    html,body{height:100%}
    body{
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      background:
        radial-gradient(1200px 900px at 15% 5%, rgba(255,212,0,.20), transparent 60%),
        radial-gradient(900px 700px at 85% 0%, rgba(255,184,0,.14), transparent 60%),
        radial-gradient(900px 700px at 75% 85%, rgba(255,212,0,.08), transparent 60%),
        linear-gradient(180deg, #07070b 0%, #0b0b0f 40%, #07070b 100%);
      color: var(--text);
      overflow-x:hidden;
    }
    .containerX{max-width:1200px;margin:0 auto;padding:0 20px}
    .glass{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid var(--line);
      box-shadow: var(--shadow2);
      backdrop-filter: blur(10px);
      border-radius: var(--radius);
    }
    .chip{
      border:1px solid rgba(255,212,0,.30);
      background: linear-gradient(180deg, rgba(255,212,0,.16), rgba(255,212,0,.06));
      color: rgba(255,255,255,.92);
      border-radius: 999px;
      padding: 8px 12px;
      display:inline-flex;align-items:center;gap:8px;
    }
    .btn{
      border-radius: 12px;
      padding: 12px 14px;
      font-weight: 700;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
      user-select:none;
    }
    .btn:active{transform: translateY(1px) scale(.99)}
    .btn-primary{
      background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow2) 100%);
      color:#0b0b0f;
      box-shadow: 0 18px 40px rgba(255,212,0,.18);
    }
    .btn-primary:hover{box-shadow: 0 24px 60px rgba(255,212,0,.24); transform: translateY(-1px)}
    .btn-ghost{
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.92);
    }
    .btn-ghost:hover{border-color: rgba(255,212,0,.30); background: rgba(255,255,255,.06); transform: translateY(-1px)}
    .navLink{
      color: rgba(255,255,255,.78);
      font-weight: 600;
      padding: 10px 12px;
      border-radius: 12px;
      transition: background .18s ease, color .18s ease;
      outline: none;
    }
    .navLink:hover{background: rgba(255,255,255,.05); color: rgba(255,255,255,.95)}
    .navLink[aria-current="page"]{
      background: linear-gradient(180deg, rgba(255,212,0,.18), rgba(255,212,0,.08));
      border: 1px solid rgba(255,212,0,.22);
      color: rgba(255,255,255,.95);
    }
    .heroCard{
      background:
        radial-gradient(700px 300px at 20% 0%, rgba(255,212,0,.20), transparent 60%),
        radial-gradient(600px 300px at 80% 40%, rgba(255,184,0,.14), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.10);
      border-radius: calc(var(--radius) + 6px);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .gridGlow{
      position:absolute; inset:-2px;
      background:
        radial-gradient(circle at 25% 15%, rgba(255,212,0,.25), transparent 40%),
        radial-gradient(circle at 85% 35%, rgba(255,184,0,.16), transparent 45%),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: auto, auto, 42px 42px, 42px 42px;
      mask-image: radial-gradient(60% 55% at 40% 30%, #000 55%, transparent 100%);
      opacity:.55;
      pointer-events:none;
    }
    .stat{
      border-radius: 16px;
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10);
      padding: 14px 14px;
    }
    kbd.kbd {
  background: rgba(255,212,0,0.2);
  color: var(--yellow);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255,212,0,0.3);
  font-size: 12px;
  font-weight: 600;
}

    .kbd{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      padding: 2px 7px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.30);
      color: rgba(255,255,255,.75);
    }
    .sectionTitle{
      font-size: clamp(22px, 2.4vw, 32px);
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .muted{color: var(--muted)}
    .card{
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .cardHover{
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .cardHover:hover{
      transform: translateY(-2px);
      border-color: rgba(255,212,0,.24);
      box-shadow: 0 20px 55px rgba(0,0,0,.45);
    }
    .badge{
      display:inline-flex;align-items:center;gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.85);
      font-weight: 600;
      font-size: 13px;
    }
    .iconDot{
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--yellow);
      box-shadow: 0 0 0 4px rgba(255,212,0,.15);
    }
    .toast{
      position: fixed;
      bottom: 18px; left: 50%;
      transform: translateX(-50%);
      background: rgba(15,17,26,.92);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.92);
      padding: 12px 14px;
      border-radius: 14px;
      box-shadow: var(--shadow2);
      display:none;
      max-width: min(560px, calc(100vw - 30px));
      z-index: 80;
      backdrop-filter: blur(10px);
    }
    #cookieToast #toastMessage {
  color: #ffd400; /* ton jaune */
}
    .toast.show{display:flex; gap:10px; align-items:flex-start; animation: toastIn .25s ease}
    @keyframes toastIn{
      from{opacity:0; transform: translateX(-50%) translateY(10px)}
      to{opacity:1; transform: translateX(-50%) translateY(0)}
    }
    .field{
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 14px;
      padding: 12px 12px;
      color: rgba(255,255,255,.92);
      outline:none;
      width:100%;
      transition: border-color .18s ease, box-shadow .18s ease;
    }
    .field:focus{
      border-color: rgba(255,212,0,.40);
      box-shadow: 0 0 0 4px rgba(255,212,0,.14);
    }
    .footerLine{
      border-top: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.20);
    }
   #mobileBtn {
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  z-index: 9999 !important;
}

/* Force menu visible au toggle */
#mobileMenu {
  display: none; /* Au lieu de Tailwind hidden */
}

#mobileMenu:not(.hidden) {
  display: block !important;
}
    .skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
    .skip:focus{left:14px;top:14px;width:auto;height:auto;padding:10px 12px;border-radius:12px;background:#111827;border:1px solid rgba(255,255,255,.15);z-index:100}
    @media (prefers-reduced-motion: reduce){
      *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
    }
/* ICONES SOCIALES - COULEURS NATIVES */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  flex-shrink: 0;
  backdrop-filter: blur(10px);
}

.social-link:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

/* X (Twitter) */
.social-link[href*="x.com"],
.social-link[href*="twitter.com"] {
  color: #1da1f2;
}

.social-link[href*="x.com"]:hover,
.social-link[href*="twitter.com"]:hover {
  background: rgba(29, 161, 242, 0.15);
  border-color: #1da1f2;
  color: #1da1f2;
  box-shadow: 0 8px 25px rgba(29, 161, 242, 0.3);
}

/* Facebook */
.social-link[href*="facebook.com"] {
  color: #1877f2;
}

.social-link[href*="facebook.com"]:hover {
  background: rgba(24, 119, 242, 0.15);
  border-color: #1877f2;
  color: #1877f2;
  box-shadow: 0 8px 25px rgba(24, 119, 242, 0.3);
}

/* SVG optimisés */
.social-link svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke: none;
  stroke-width: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Styles pour les selects du formulaire - SANS BLEU */
.field {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #444 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  width: 100% !important;
  transition: all 0.3s ease !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 20 20'%3e%3cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  padding-right: 40px !important;
}

.field:hover {
  border-color: #666 !important;
  background-color: #1a1a1a !important;
}

.field:focus {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #FFD700 !important;
  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.3) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

/* ✅ CORRECTION HOVER OPTIONS - PLUS DE BLEU */
.field option {
  background-color: #ffffff !important;
  color: #000000 !important;
  padding: 8px !important;
}

.field option:hover {
  background-color: #fcfbfb !important; /* Orange doré */
  color: #000000 !important;
}

.field option:focus,
.field option:active,
.field option:selected {
  background-color: #000000 !important; /* Jaune gold */
  color: #ffffff !important;
}

/* Webkit - Chrome/Safari */
.field::-webkit-scrollbar {
  width: 6px;
}
.field::-webkit-scrollbar-track {
  background: #333 !important;
}
.field::-webkit-scrollbar-thumb {
  background: #FF8C00 !important; /* Orange pas bleu */
  border-radius: 3px;
}
.field::-webkit-scrollbar-thumb:hover {
  background: #FFD700 !important; /* Jaune au hover */
}

/* Firefox */
.field {
  scrollbar-width: thin;
  scrollbar-color: #FF8C00 #333 !important;
}