// ===========================
// BREAKPOINTS SYSTEM
// ===========================

// Breakpoints standards
$breakpoints: (
  'xs': 0,
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1400px
);

// ===========================
// MIXINS POUR MEDIA QUERIES
// ===========================

// Mixin pour min-width (mobile first)
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Breakpoint '#{$breakpoint}' n'existe pas dans $breakpoints";
  }
}

// Mixin pour max-width (desktop first)
@mixin respond-below($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (max-width: #{map-get($breakpoints, $breakpoint) - 1px}) {
      @content;
    }
  } @else {
    @warn "Breakpoint '#{$breakpoint}' n'existe pas dans $breakpoints";
  }
}

// Mixin pour range entre deux breakpoints
@mixin respond-between($min-breakpoint, $max-breakpoint) {
  @if map-has-key($breakpoints, $min-breakpoint) and map-has-key($breakpoints, $max-breakpoint) {
    @media (min-width: #{map-get($breakpoints, $min-breakpoint)}) and (max-width: #{map-get($breakpoints, $max-breakpoint) - 1px}) {
      @content;
    }
  } @else {
    @warn "Un ou plusieurs breakpoints n'existent pas dans $breakpoints";
  }
}

// Mixin pour orientation
@mixin landscape {
  @media (orientation: landscape) {
    @content;
  }
}

@mixin portrait {
  @media (orientation: portrait) {
    @content;
  }
}

// ===========================
// CLASSES UTILITAIRES
// ===========================

// Classes pour masquer/afficher selon les breakpoints
.hidden-xs { @include respond-below('sm') { display: none !important; } }
.hidden-sm { @include respond-between('sm', 'md') { display: none !important; } }
.hidden-md { @include respond-between('md', 'lg') { display: none !important; } }
.hidden-lg { @include respond-between('lg', 'xl') { display: none !important; } }
.hidden-xl { @include respond-to('xl') { display: none !important; } }

.visible-xs { @include respond-to('sm') { display: none !important; } }
.visible-sm { @include respond-below('sm') { display: none !important; } @include respond-to('md') { display: none !important; } }
.visible-md { @include respond-below('md') { display: none !important; } @include respond-to('lg') { display: none !important; } }
.visible-lg { @include respond-below('lg') { display: none !important; } @include respond-to('xl') { display: none !important; } }
.visible-xl { @include respond-below('xl') { display: none !important; } }

// ===========================
// VARIABLES RESPONSIVE
// ===========================

// Container max-widths
$container-max-widths: (
  'sm': 540px,
  'md': 720px,
  'lg': 960px,
  'xl': 1140px,
  'xxl': 1320px
);

// Spacing responsive
$spacing-xs: 0.25rem;
$spacing-sm: 0.5rem;
$spacing-md: 1rem;
$spacing-lg: 1.5rem;
$spacing-xl: 3rem;

// Grid columns
$grid-columns: 12;
$grid-gutter-width: 30px;

// Z-index scale
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070; 