// 1) Définition des breakpoints en mobile-first
$breakpoints: (
    mobile: (max: 599.98px),
    // < 600
    tablet: (min: 600px, max: 1023.98px),
    // 600–1023
    desktop: (min: 1024px, max: 1439.98px),
    // 1024–1439
    wide: (min: 1440px) // >= 1440
);

// 2) Mixin générique pour les media queries
@mixin respond($bp, $orientation: null) {
    $def: map-get($breakpoints, $bp);

    @if $def ==null {
        @error "Breakpoint `#{$bp}` introuvable. Définis-le dans $breakpoints.";
    }

    $min: map-get($def, min);
    $max: map-get($def, max);
    $query: "";

    @if $min !=null {
        $query: "(min-width: #{$min})";
    }

    @else if $max !=null {
        $query: "(max-width: #{$max})";
    }

    @if $orientation !=null and $orientation !="" {
        $query: if($query !="", "#{$query} and (orientation: #{$orientation})", "(orientation: #{$orientation})");
    }

    @if $query !="" {
        @media #{$query} {
            @content;
        }
    }

    @else {
        @content;
    }
}

// 3) Alias pour les breakpoints
@mixin mobile_format($orientation: null) {
    @include respond(mobile, $orientation) {
        @content;
    }
}

@mixin tablette_format($orientation: null) {
    @include respond(tablet, $orientation) {
        @content;
    }
}

@mixin desktop_format($orientation: null) {
    @include respond(desktop, $orientation) {
        @content;
    }
}

@mixin wide_format($orientation: null) {
    @include respond(wide, $orientation) {
        @content;
    }
}

// 4) Classes utilitaires pour les media queries
@mixin mobile-up {
    @include respond(tablet) {
        @content;
    }
}

@mixin tablet-up {
    @include respond(desktop) {
        @content;
    }
}

@mixin desktop-up {
    @include respond(wide) {
        @content;
    }
}

@mixin wide-up {
    @include respond(wide) {
        @content;
    }
}