/* ZebraFrame du classeur.
 * La configuration de couleur et de bordure est partagée avec la bannière.
 * Les styles des items restent volontairement hors de ce composant.
 */

.zbd-binder-frame {
  --zbd-binder-frame-radius: clamp(18px, 2vw, 26px);
  --zbd-binder-frame-gutter-base: clamp(7px, 1vw, 13px);
  --zbd-binder-frame-gutter: var(--zbd-binder-frame-gutter-base);
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: var(--zbd-binder-frame-gutter);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--zbd-binder-frame-radius);
  background:
    radial-gradient(92% 42% at 50% -8%, rgba(255, 255, 255, 0.18), transparent 62%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 34% 68%, rgba(0, 0, 0, 0.16)),
    linear-gradient(136deg,
      hsla(var(--zbd-hue, 210), var(--zbd-s-base, 58%), var(--zbd-l-base, 44%), 0.98),
      hsla(calc(var(--zbd-hue, 210) + var(--zbd-shift, 28)), var(--zbd-s-accent, 52%), var(--zbd-l-accent, 40%), 0.99));
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.32),
    0 5px 14px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.zbd-binder-frame.zbd-cover-premium:not(.zbd-cover-border-none) {
  --zbd-binder-frame-gutter: max(
    var(--zbd-binder-frame-gutter-base),
    calc(var(--zbd-cover-border-size, 7px) + 3px)
  );
}

.zbd-binder-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.zbd-binder-frame::after {
  z-index: 3;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 3px rgba(0, 0, 0, 0.22),
    inset 0 0 0 4px rgba(255, 255, 255, 0.05);
}

.zbd-binder-frame > * {
  position: relative;
  z-index: 1;
}

.zbd-binder-frame.zbd-cover-custom-color {
  background:
    radial-gradient(92% 42% at 50% -8%, rgba(255, 255, 255, 0.2), transparent 62%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 34% 68%, rgba(0, 0, 0, 0.18)),
    var(--zbd-custom-color);
}

.zbd-binder-frame.zbd-cover-border-solid::after,
.zbd-binder-frame.zbd-cover-border-gold::after,
.zbd-binder-frame.zbd-cover-border-silver::after {
  box-shadow:
    inset 0 0 0 var(--zbd-cover-border-size, 7px) var(--zbd-cover-border-color, #58a6ff),
    inset 0 0 0 calc(var(--zbd-cover-border-size, 7px) + 2px) rgba(255, 255, 255, 0.22),
    inset 0 0 0 calc(var(--zbd-cover-border-size, 7px) + 5px) rgba(0, 0, 0, 0.34),
    inset 0 0 22px rgba(255, 255, 255, 0.11);
}

.zbd-binder-frame.zbd-cover-border-gold {
  --zbd-cover-border-color: #ffd55f;
}

.zbd-binder-frame.zbd-cover-border-silver {
  --zbd-cover-border-color: #e1ecf8;
}

.zbd-binder-frame.zbd-cover-border-glow {
  border-color: var(--zbd-cover-border-color, #58a6ff);
  box-shadow:
    0 0 0 1px var(--zbd-cover-border-color, #58a6ff),
    0 0 24px color-mix(in srgb, var(--zbd-cover-border-color, #58a6ff) 72%, transparent),
    0 18px 34px rgba(0, 0, 0, 0.34);
}

.zbd-binder-frame.zbd-cover-border-glow::after {
  box-shadow:
    inset 0 0 0 var(--zbd-cover-border-size, 7px) var(--zbd-cover-border-color, #58a6ff),
    inset 0 0 0 calc(var(--zbd-cover-border-size, 7px) + 2px) rgba(255, 255, 255, 0.2),
    inset 0 0 22px var(--zbd-cover-border-color, #58a6ff);
}

.zbd-binder-frame.zbd-cover-border-hatched::after {
  box-sizing: border-box;
  padding: var(--zbd-cover-border-size, 7px);
  background:
    repeating-linear-gradient(
      135deg,
      #fff 0 8px,
      #050605 8px 18px,
      #fff 18px 27px,
      #050605 27px 40px
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.zbd-binder-frame > .zbd-binder-surface {
  min-width: 0;
  margin: 0 !important;
  border-radius: clamp(11px, 1.25vw, 16px);
}

@media (max-width: 575.98px) {
  .zbd-binder-frame {
    --zbd-binder-frame-radius: 18px;
    --zbd-binder-frame-gutter-base: 5px;
    box-shadow:
      0 15px 30px rgba(0, 0, 0, 0.3),
      0 4px 10px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.13),
      inset 0 -1px 0 rgba(0, 0, 0, 0.24);
  }
}