/* ============================================================
   FOCAL PANEL — composant partagé
   Panneau coulissant depuis la droite, s'arrête à la sidebar.

   Usage :
     Ajouter  .is-open sur .focal-panel pour ouvrir
     Retirer  .is-open pour fermer

   Structure HTML attendue :
     <div class="focal-panel [modifier]">
       <div class="focal-panel-drawer">
         … contenu …
       </div>
     </div>
   ============================================================ */

.focal-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 250px; /* largeur de la sidebar .side */
    right: 0;
    z-index: 100;
    pointer-events: none;
    overflow: hidden;
}

.focal-panel.is-open {
    pointer-events: all;
}

.focal-panel-drawer {
    position: absolute;
    inset: 0;
    background: var(--blanc-focal, #F8F6F3);
    box-shadow: -12px 0 48px rgba(20, 18, 16, 0.10);
    transform: translateX(100%);
    transition: transform 0.30s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.focal-panel.is-open .focal-panel-drawer {
    transform: translateX(0);
}