:root {
    --panel-w: 320px;
    --radius: 16px;
    --shadow: 0 10px 30px rgba(0,0,0,.15);
  }

  /* Reset minimal */

  /* Bouton déclencheur (en haut à droite) */
  .open-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 20;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: var(--shadow);
    text-decoration: none;
    user-select: none;
    border: none;
    padding: 10px;
    background-color: #e5ebee;
    color:#186dbc;
    font-size: larger;
  }
  .open-btn:focus-visible { outline: 3px solid #5aa9ff; outline-offset: 2px; }

  /* Le toggle "invisible" qui pilote les états */
  #menu-toggle {
    position: fixed;
    top: 0;
    right: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  /* Backdrop (cliquable pour fermer) */
  .backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 15;
  }

  /* Panneau latéral droit */
  .side-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(100%, var(--panel-w));
    background: #fff;
    border-left: 1px solid #e9e9e9;
    box-shadow: -10px 0 30px rgba(0,0,0,.08);
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 25;
    display: grid;
    grid-template-rows: auto 1fr;
  }

  .side-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
  }
  .title { font-weight: 600; font-size: 1.05rem; }

  /* Bouton fermer (label lié au toggle) */
  .close-btn {
    margin-left: auto;
    padding: 8px 12px;
    border-radius: 12px;
    background: #f4f4f4;
    cursor: pointer;
    user-select: none;
    font-size: larger;
  }
  .close-btn:focus-visible { outline: 3px solid #5aa9ff; outline-offset: 2px; }

  .side-content {
    padding: 16px;
    overflow: auto;
  }
  .side-content a {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: #111;
  }
  .side-content a:hover { background: #f5f7ff; }

  /* États ouverts via :checked */
  #menu-toggle:checked ~ .backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  #menu-toggle:checked ~ .side-panel {
    transform: translateX(0);
  }

  /* Préférence utilisateur : réduire les animations */
  @media (prefers-reduced-motion: reduce) {
    .side-panel { transition: none; }
    .backdrop  { transition: none; }
  }

  /* Contenu de démonstration */
  .demo {
    padding: 80px 16px 16px;
    max-width: 900px;
    margin: 0 auto;
  }
  .card {
    padding: 18px;
    border: 1px solid #eee;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: #fff;
  }