@charset "UTF-8";

/* ==========================================================================
   OFFCANVAS — End (droite)
   Fichier autonome à importer après main.css
   Usage : <link rel="stylesheet" href="offcanvas.css">
   Compatible avec le JS Bootstrap (data-bs-toggle="offcanvas")
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables & base
   -------------------------------------------------------------------------- */
:root {
  --offcanvas-width:            400px;
  --offcanvas-padding-x:        1.5rem;
  --offcanvas-padding-y:        1rem;
  --offcanvas-bg:               #fff;
  --offcanvas-color:            #1f2937;
  --offcanvas-title-color:      #111827;
  --offcanvas-border-color:     #e5e7eb;
  --offcanvas-border-width:     1px;
  --offcanvas-box-shadow:       -4px 0 24px rgba(17, 24, 39, .12);
  --offcanvas-z-index:          1045;
  --offcanvas-duration:         .32s;
  --offcanvas-easing:           cubic-bezier(.4, 0, .2, 1);
  --offcanvas-backdrop-bg:      rgba(17, 24, 39, .45);
  --offcanvas-backdrop-z:       1040;
  --offcanvas-close-color:      #6b7280;
  --offcanvas-close-hover-bg:   #f3f4f6;
  --offcanvas-close-hover-color:#1f2937;
}

/* --------------------------------------------------------------------------
   Panneau principal
   -------------------------------------------------------------------------- */
.offcanvas-end {
  position:         fixed;
  top:              0;
  right:            0;
  bottom:           0;
  z-index:          var(--offcanvas-z-index);
  width:            var(--offcanvas-width);
  max-width:        100%;
  display:          flex;
  flex-direction:   column;

  background-color: var(--offcanvas-bg);
  color:            var(--offcanvas-color);
  border-left:      var(--offcanvas-border-width) solid var(--offcanvas-border-color);
  box-shadow:       var(--offcanvas-box-shadow);

  /* État initial : masqué à droite */
  visibility:       hidden;
  transform:        translateX(100%);
  transition:
    transform  var(--offcanvas-duration) var(--offcanvas-easing),
    visibility var(--offcanvas-duration) var(--offcanvas-easing);

  will-change: transform;
  outline: 0;
}

/* Panneau ouvert */
.offcanvas-end.show {
  transform:  translateX(0);
  visibility: visible;
}

/* États intermédiaires (Bootstrap JS ajoute ces classes brièvement) */
.offcanvas-end.showing,
.offcanvas-end.hiding {
  visibility: visible;
}

/* Respect de la préférence de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .offcanvas-end {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.offcanvas-end .offcanvas-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--offcanvas-padding-y) var(--offcanvas-padding-x);
  border-bottom:   var(--offcanvas-border-width) solid var(--offcanvas-border-color);
  flex-shrink:     0;
}

.offcanvas-end .offcanvas-title {
  margin:      0;
  font-size:   1.1rem;
  font-weight: 600;
  line-height: 1.4;
  color:       var(--offcanvas-title-color);
}

/* --------------------------------------------------------------------------
   Corps scrollable
   -------------------------------------------------------------------------- */
.offcanvas-end .offcanvas-body {
  flex:       1 1 auto;
  padding:    var(--offcanvas-padding-y) var(--offcanvas-padding-x);
  overflow-y: auto;

  /* Scrollbar discrète, assortie au thème */
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.offcanvas-end .offcanvas-body::-webkit-scrollbar {
  width: 5px;
}
.offcanvas-end .offcanvas-body::-webkit-scrollbar-track {
  background: transparent;
}
.offcanvas-end .offcanvas-body::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Pied de page (optionnel)
   -------------------------------------------------------------------------- */
.offcanvas-end .offcanvas-footer {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  padding:       var(--offcanvas-padding-y) var(--offcanvas-padding-x);
  border-top:    var(--offcanvas-border-width) solid var(--offcanvas-border-color);
  flex-shrink:   0;
}

/* --------------------------------------------------------------------------
   Bouton de fermeture (×)
   -------------------------------------------------------------------------- */
.offcanvas-end .btn-close {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            2rem;
  height:           2rem;
  padding:          0;
  margin-left:      auto;
  background:       none;
  border:           0;
  border-radius:    .375rem;
  cursor:           pointer;
  color:            var(--offcanvas-close-color);
  font-size:        1rem;
  line-height:      1;
  opacity:          .65;
  transition:
    color            .15s ease,
    opacity          .15s ease,
    background-color .15s ease;
}

.offcanvas-end .btn-close::before {
  /* Caractère × universel, sans dépendance d'icône */
  content: "✕";
}

.offcanvas-end .btn-close:hover {
  color:            var(--offcanvas-close-hover-color);
  background-color: var(--offcanvas-close-hover-bg);
  opacity:          1;
}

.offcanvas-end .btn-close:focus {
  outline:    0;
  opacity:    1;
  box-shadow: 0 0 0 .2rem rgba(35, 97, 206, .25);
}

/* --------------------------------------------------------------------------
   Backdrop (overlay sombre)
   -------------------------------------------------------------------------- */
.offcanvas-backdrop {
  position:         fixed;
  inset:            0;
  z-index:          var(--offcanvas-backdrop-z);
  background-color: var(--offcanvas-backdrop-bg);

  opacity:    0;
  visibility: hidden;
  transition:
    opacity    var(--offcanvas-duration) var(--offcanvas-easing),
    visibility var(--offcanvas-duration) var(--offcanvas-easing);
}

.offcanvas-backdrop.show {
  opacity:    1;
  visibility: visible;
}

/* Bloquer le scroll du body quand le panneau est ouvert */
body.offcanvas-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Responsive — mobile (< 576px) : pleine largeur
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .offcanvas-end {
    --offcanvas-width: 100%;
    border-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Variantes de largeur  (inspirées de modal-sm / modal-lg / modal-xl…)
   Utilisation : <div class="offcanvas offcanvas-end offcanvas-lg">
   -------------------------------------------------------------------------- */

/*
 * Échelle de tailles
 * ─────────────────────────────────────────────────────────────────────────
 *  Classe             Largeur   Équivalent modal Bootstrap  Usage typique
 *  offcanvas-xs       240 px    —                           Menus compacts
 *  offcanvas-sm       320 px    modal-sm (300 px)           Panneaux légers
 *  (défaut)           400 px    modal (par défaut ~500 px)  Usage courant
 *  offcanvas-md       480 px    —                           Formulaires
 *  offcanvas-lg       600 px    modal-lg (800 px)           Détails riches
 *  offcanvas-xl       760 px    modal-xl (1140 px)          Tableaux / dashboards
 *  offcanvas-xxl      960 px    —                           Vue quasi-pleine
 *  offcanvas-full     100 %     —                           Plein écran
 * ─────────────────────────────────────────────────────────────────────────
 * Note : chaque taille est contrainte par max-width: 100% (déjà défini
 * sur .offcanvas-end), donc jamais plus large que la fenêtre.
 */

.offcanvas-end.offcanvas-xs   { --offcanvas-width: 240px; }
.offcanvas-end.offcanvas-sm   { --offcanvas-width: 320px; }
.offcanvas-end.offcanvas-md   { --offcanvas-width: 480px; }
.offcanvas-end.offcanvas-lg   { --offcanvas-width: 600px; }
.offcanvas-end.offcanvas-xl   { --offcanvas-width: 760px; }
.offcanvas-end.offcanvas-xxl  { --offcanvas-width: 960px; }
.offcanvas-end.offcanvas-full { --offcanvas-width: 100%;  border-left: 0; }

/*
 * Anciens alias conservés pour compatibilité ascendante
 * (peuvent être supprimés si non utilisés dans le projet)
 */
.offcanvas-end.offcanvas-narrow { --offcanvas-width: 280px; }   /* ≈ xs–sm */
.offcanvas-end.offcanvas-wide   { --offcanvas-width: 560px; }   /* ≈ lg    */

/*
 * Responsive — sur mobile (< 576 px) toutes les variantes passent
 * en pleine largeur pour rester exploitables au doigt.
 */
@media (max-width: 575.98px) {
  .offcanvas-end.offcanvas-xs,
  .offcanvas-end.offcanvas-sm,
  .offcanvas-end.offcanvas-md,
  .offcanvas-end.offcanvas-lg,
  .offcanvas-end.offcanvas-xl,
  .offcanvas-end.offcanvas-xxl,
  .offcanvas-end.offcanvas-narrow,
  .offcanvas-end.offcanvas-wide {
    --offcanvas-width: 100%;
    border-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Variantes de couleur (assorties au thème de main.css)
   -------------------------------------------------------------------------- */

/* Fond gris clair */
.offcanvas-end.offcanvas-light {
  --offcanvas-bg:           #f9fafb;
  --offcanvas-border-color: #e5e7eb;
  --offcanvas-color:        #374151;
}

/* Fond sombre */
.offcanvas-end.offcanvas-dark {
  --offcanvas-bg:             #1f2937;
  --offcanvas-color:          #f9fafb;
  --offcanvas-title-color:    #fff;
  --offcanvas-border-color:   #374151;
  --offcanvas-box-shadow:     -4px 0 24px rgba(0, 0, 0, .35);
  --offcanvas-close-color:    #9ca3af;
  --offcanvas-close-hover-bg: #374151;
  --offcanvas-close-hover-color: #f9fafb;
}

/* Couleur primaire marine du thème (#31316a) */
.offcanvas-end.offcanvas-navy {
  --offcanvas-bg:             #31316a;
  --offcanvas-color:          #e5e7eb;
  --offcanvas-title-color:    #fff;
  --offcanvas-border-color:   rgba(255, 255, 255, .1);
  --offcanvas-box-shadow:     -4px 0 24px rgba(0, 0, 0, .4);
  --offcanvas-close-color:    #9ca3af;
  --offcanvas-close-hover-bg: rgba(255, 255, 255, .1);
  --offcanvas-close-hover-color: #fff;
}