:root {
    --navbar-bg: #ffffff;
    --text-color: #111827;
    --muted: #6b7280;
    --border: #e5e7eb;
    --shadow: 0 2px 20px rgba(0,0,0,.06);
    --container-max: 1200px;
    --radius: 16px;
    --item-h: 52px;      /* hauteur des items */
    --nav-py: 12px;      /* padding vertical du header (sert aussi d'anti-gap) */
  }

  /* ===== Base namespacée .xnav pour éviter tout conflit ===== */
  .xnav { top: 0; z-index: 1045; background: var(--navbar-bg); box-shadow: var(--shadow); color: var(--text-color); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
  .xnav * { box-sizing: border-box; }
  .xnav a { color: inherit; text-decoration: none; }

  .xnav-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--nav-py) 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; position: relative; }

  /* Gauche: logo */
  .x-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
  .x-brand img { height: 34px; width: auto; display: block; }

  /* Centre: menu */
  .x-center { justify-self: center; }
  .x-menu { list-style: none; display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; }
  .x-item { position: relative; }
  .x-item.has-mega { position: static; } /* le méga se centre sur le conteneur */

  .x-link { appearance: none; border: 0; background: none; font: inherit; color: inherit; height: var(--item-h); padding: 0 10px; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; position: relative; }
  .x-link:hover, .x-link:focus-visible { background: #f3f4f6; outline: 2px solid transparent; }
  .x-caret { font-size: 16px; color: var(--muted); }

  /* Anti-gap: pont entre le bouton et le panneau */
  @media (min-width: 993px) {
    .x-item.has-drop > .x-link::after,
    .x-item.has-mega > .x-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--nav-py)); height: var(--nav-py); }
  }

  /* Panneaux (desktop) */
  .x-drop, .x-mega { position: absolute; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; min-width: 220px; opacity: 0; visibility: hidden; transition: opacity .12s ease; }
  .x-drop { left: 0; top: calc(100% + var(--nav-py)); }
  /* Pont côté panneau (double filet anti-gap) */
  .x-drop::before, .x-mega::before { content:""; position:absolute; left:0; right:0; top: calc(-1 * var(--nav-py)); height: var(--nav-py); }

  /* Affichage desktop au survol */
  @media (min-width: 993px) {
    .x-item.has-drop:hover > .x-drop { opacity: 1; visibility: visible; }
    .x-item.has-mega:hover > .x-mega { opacity: 1; visibility: visible; }
  }

  /* Mega centré */
  .x-mega { left: 50%; top: 100%; transform: translateX(-50%); width: min(980px, calc(100vw - 32px)); z-index: 2100; }
  .x-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 20px; align-items: start; }
  .x-col { padding: 6px 0; }
  .x-title { font-weight: 700; margin: 0 0 6px; font-size: 14px; }
  .x-links { list-style: none; margin: 0; padding: 0; }
  .x-links a { display: block; padding: 8px 10px; border-radius: 10px; }
  .x-links a:hover { background: #f3f4f6; }

  /* Droite: icônes + burger */
  .x-right { justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
  .x-icon, .x-burger { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: #fff; cursor: pointer; }
  .x-icon:hover, .x-icon:focus-visible, .x-burger:hover, .x-burger:focus-visible, .x-account-btn:hover, .x-account-btn:focus-visible { background: #f3f4f6; outline: none; }

  /* Compte utilisateur (icône + nom + dropdown) */
  .x-account { position: relative; }
  .x-account-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 8px; border: 1px solid var(--border); border-radius: 9999px; background: #fff; cursor: pointer; }
  .x-avatar { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; background: transparent; }
  .x-account-btn .ri-user-line { font-size: 18px; }
  .x-account .x-name { display: none; font-weight: 500; white-space: nowrap; }
  .x-account.is-auth .x-name { display: inline-flex; align-items: center; }
  .x-acc-drop { position: absolute; right: 0; top: calc(100% + var(--nav-py)); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; min-width: 220px; opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 2201; }
  .x-acc-drop .x-links a { padding: 10px 12px; }

  /* Reset du <form> dans le menu user */
.x-acc-drop .x-links li form { margin: 0; }

/* Le bouton agit comme un <a> du menu */
.x-acc-drop .x-links li form button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-color);
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
}

/* Couleur danger + hover comme les autres items */
.x-acc-drop .x-links li form button.text-danger {
  color: #dc2626; /* rouge */
}
.x-acc-drop .x-links li form button:hover {
  background: #e5e6e7;
}
.x-acc-drop .x-links li form button.text-danger:hover {
  color: #b91c1c;
}


  /* anti-gap pour le compte, comme les autres menus */
  @media (min-width: 993px) {
    .x-account-btn::after { content:""; position:absolute; left:0; right:0; bottom: calc(-1 * var(--nav-py)); height: var(--nav-py); }
    .x-acc-drop::before { content:""; position:absolute; left:0; right:0; top: calc(-1 * var(--nav-py)); height: var(--nav-py); }
    .x-account:hover > .x-acc-drop { opacity: 1; visibility: visible; }
  }

  /* Offcanvas (mobile) */
  .x-burger { display: none; }
  @media (max-width: 992px) {
    .xnav-inner { grid-template-columns: 1fr auto auto; }
    .x-center { justify-self: center; }
    .x-burger { display: inline-flex; }

    .x-menu { position: fixed; top: 0; left: 0; height: 100vh; width: min(92vw, 420px); background: #fff; border-right: 1px solid var(--border); padding: 14px; display: flex; flex-direction: column; gap: 4px; transform: translateX(-100%); transition: transform .22s ease; z-index: 3000; overflow-y: auto; overflow-x: hidden; }
    .x-menu.is-open { transform: translateX(0); }

    /* Empêcher la navigation par défaut pour les liens avec enfants en mobile */
    .x-link[data-has-children] {
      cursor: pointer !important;
      pointer-events: auto !important;
    }
    /* indicateur visuel que c'est un toggle */
    .x-link[data-has-children] .x-caret {
      transition: transform 0.2s ease;
    }
    /* Rotation de la flèche quand le menu est ouvert */
    .x-item.is-expanded .x-link[data-has-children] .x-caret {
        transform: rotate(180deg);
    }    

    .x-drop, .x-mega { position: static; border: 0; box-shadow: none; width: auto; opacity: 1; visibility: visible; transform: none; padding: 0; height: 0; overflow: hidden; transition: height .25s ease; }
    .x-panel-inner { padding: 6px 6px 10px; }
    .x-grid { grid-template-columns: 1fr; gap: 8px; }
    /* .x-col + .x-col { border-top: 1px solid var(--border); padding-top: 10px; } */
    .x-title { font-size: 13px; text-transform: uppercase; letter-spacing: .02em; margin: 6px 0; opacity: .9; }
    .x-links a { padding-left: 0; }

    .x-item { width: 100%; border-bottom: 1px solid var(--border); }
    .x-link { width: 100%; justify-content: space-between; }
    .x-item.is-expanded .x-caret { transform: rotate(180deg); }
    .x-item.is-expanded > .x-link { background: #f3f4f6; }

    /* Overlay */
    .x-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s step-end; z-index: 1500; }
    .x-overlay.is-show { opacity: 1; visibility: visible; }

    /* Dropdown compte en mobile (toggle .is-open) */
    .x-account.is-open > .x-acc-drop { opacity: 1; visibility: visible; }

    .x-burger, .x-acc-drop { z-index: 3001 !important; }
    .x-overlay { z-index: 2000 !important; }
    .xnav { position: relative; z-index: 2500; }
  }