@import "tailwindcss";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-open-sans: "Open Sans", sans-serif;
    --font-russo: "Russo One", sans-serif;
    --color-brand: #ed1d24;
    --color-brand-dark: #600c0e;
    --brand-gradient: linear-gradient(
        90deg,
        #5a0b0d 0%,
        #ed1d24 33%,
        #5c0b0d 66%,
        #ed1d24 100%
    );
    --brand-gradient-2: linear-gradient(
        90deg,
        #780f10ff 0%,
        #ed1d24 33%,
        #780f10ff 66%,
        #ed1d24 100%
    );
    --brand-gradient-3: linear-gradient(
        15deg,
        #ed1d24 0%,
        black 33%,
        black 66%,
        #ed1d24 100%
    );
    --brand-gradient-4: linear-gradient(
        30deg,
        #ed1d24 0%,
        black 22%,
        black 88%,
        #ed1d24 100%
    );
}

#detach-button-host {
    display: none !important;
}
[x-cloak] {
    display: none !important;
}
.attr-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.attr-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 5px solid transparent; /* largeur de la bordure */
    background: linear-gradient(30deg, var(--color-brand) 0%, transparent 40%)
        border-box;

    /* Création du trou au centre */
    -webkit-mask: linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
}
.white-selection *::selection {
    background: rgba(255, 255, 255, 0.23);
}
img::selection {
    background: transparent;
}
body {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    overflow-x: hidden !important;
    overflow-y: auto;
    min-height: 100vh; /* modifié de height: 100vh à min-height: 100vh */
    width: 100%;
    max-width: 100vw !important;
    position: relative;
}
.text-shadow-white {
    text-shadow: 0 1px 6px #5e5e5eff, 0 0px 1px #ffffffff;
}
button {
    cursor: pointer;
}
html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    width: 100%;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative;
}
body.dark,
.dark {
    scrollbar-color: #666 #000; /* gris foncé sur fond noir */
    scrollbar-width: thin; /* thin | auto */
}

/* Chromium/WebKit: Chrome, Edge, Safari */
* {
    /* sans effet ici mais inoffensif si copié partout */
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 10px; /* largeur verticale */
    height: 10px; /* hauteur horizontale */
}

.dark *::-webkit-scrollbar-track,
*.dark::-webkit-scrollbar-track {
    background: #000; /* rail noir */
}

.dark *::-webkit-scrollbar-thumb,
*.dark::-webkit-scrollbar-thumb {
    background: #444; /* poignée gris foncé */
    border-radius: 8px;
    border: 2px solid #000; /* petit “gap” noir autour de la poignée */
}

.dark *::-webkit-scrollbar-thumb:hover,
*.dark::-webkit-scrollbar-thumb:hover {
    background: #666; /* un peu plus clair au survol */
}
body.overflow-hidden {
    overflow: hidden !important;
    overflow-x: hidden !important;
    /* supprimé: position fixed, width, left/right -> géré en JS pour éviter le jump */
}