    .g-box.card {
        background:#1e1e1e; color:#fff; border-radius:14px; border:1px solid #2a2a2a;
        transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
        height:100%;
    }
    .g-box.card:hover { transform:translateY(-4px); background:#242424;
    box-shadow:0 8px 22px rgba(0,0,0,.35); }
    .g-icon { font-size:34px; opacity:.9; }
    .g-muted { color:#b6b6b6; font-size:.95rem; }
    .modal-header { border-bottom:1px solid rgba(255,255,255,.08); }
    .modal-content { background:#161616; color:#eaeaea; border:1px solid #2a2a2a; }
    .modal .form-control, .modal .form-select { background:#101010; color:#eaeaea; border-color:#2a2a2a; }
    /* empilement des modales imbriquées */
    .modal-stack { z-index: 1070 !important; }      /* modale de 2e niveau */
    .modal-backdrop-stack { z-index: 1060 !important; }
    pre { background:#0f0f0f; border:1px solid #2a2a2a; padding:12px; border-radius:10px; overflow:auto; }

    .g-box.card {
        background:#1e1e1e; color:#fff; border-radius:14px; border:1px solid #2a2a2a;
        transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
        height:100%;
    }
    .g-box.card:hover { transform:translateY(-4px); background:#242424;
    box-shadow:0 8px 22px rgba(0,0,0,.35); }

    .g-icon { font-size:34px; opacity:.9; }
    .g-muted { color:#b6b6b6; font-size:.95rem; }

    /* === MODALES (bordure visible + header positionné) === */
    .modal-header { border-bottom:1px solid rgba(255,255,255,.08); position:relative; }
    .modal-content {
        background:#161616; color:#eaeaea;
        border:2px solid #d4a017;            /* bordure bien visible (doré) */
        border-radius:14px;
        box-shadow:0 0 0 3px rgba(212,160,23,.15); /* halo léger */
    }

    /* bouton X custom en haut à droite */
    .modal-xmark {
        position:absolute; top:10px; right:12px;
        line-height:1; border:0; background:transparent;
    }
    .modal-xmark:hover { transform:scale(1.08); }

    /* empilement des modales imbriquées */
    .modal-stack { z-index: 1070 !important; }
    .modal-backdrop-stack { z-index: 1060 !important; }

    pre { background:#0f0f0f; border:1px solid #2a2a2a; padding:12px; border-radius:10px; overflow:auto; }
    
    
  /* ...tes règles existantes... */

  /* bordure visible et espace pour le X + actions */
  .modal-header { border-bottom:1px solid rgba(255,255,255,.08); position:relative; padding-right:64px; }
  .modal-content {
    background:#161616; color:#eaeaea;
    border:2px solid #d4a017;            /* bordure dorée bien visible */
    border-radius:14px;
    box-shadow:0 0 0 3px rgba(212,160,23,.15);
  }

  /* X en haut à droite (déjà présent) */
  .modal-xmark { position:absolute; top:10px; right:12px; line-height:1; border:0; background:transparent; }
  .modal-xmark:hover { transform:scale(1.08); }

  /* conteneur des actions (Copier / Imprimer / Editer) */
  .modal-actions { margin-left:auto; display:flex; gap:.5rem; align-items:center; }
  .modal-actions .btn { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; font-size:.85rem; }

  /* empilement des modales imbriquées */
  .modal-stack { z-index: 1070 !important; }
  .modal-backdrop-stack { z-index: 1060 !important; }
  
  /* SweetAlert2 en mode toast, au-dessus des modales Bootstrap */
.swal2-container.swal2-top-end { z-index: 200000 !important; }
.swal2-container.swal2-top-right { z-index: 200000 !important; }


  /* Poignée de resize visible en bas à droite des modales */
  .modal-resizable .modal-content {
    position: relative;   /* nécessaire pour positionner la poignée */
  }
  .modal-resize-handle {
    position: absolute;
    right: 6px; bottom: 6px;
    width: 22px; height: 22px;
    border: 1px solid #3b475f;
    border-radius: 4px;
    background:
      linear-gradient(135deg, transparent 0 50%, rgba(255,255,255,.08) 50% 100%),
      repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 2px, rgba(255,255,255,.05) 2px 4px);
    cursor: nwse-resize;
    opacity: .85;
    z-index: 5;
  }
  .modal-resize-handle::after{
    content: "\f424"; /* fa-up-right-and-down-left-from-center */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .9rem;
    position: absolute;
    right: 3px; bottom: 2px;
    opacity: .9;
  }
  .modal-content.resizing { cursor: nwse-resize; user-select: none; }

