/* Ordre des couches CSS, déclaré avant Tailwind : base (remise à zéro de Tailwind) < components (.lx-input…)
   < utilities (classes Tailwind). Sans cette déclaration, la remise à zéro pourrait passer après .lx-input. */
@layer theme, base, components, utilities;
*{font-family:"Montserrat", sans-serif;font-optical-sizing: auto;font-style:normal;}
*{scrollbar-width: thin;scrollbar-color: #c1c7d0 transparent;}
*::-webkit-scrollbar{width: 8px;height: 8px;}
*::-webkit-scrollbar-track{background: transparent;}
*::-webkit-scrollbar-thumb{background-color: #c1c7d0;border-radius: 9999px;border: 2px solid transparent;background-clip: padding-box;}
*::-webkit-scrollbar-thumb:hover{background-color: #a1a9b5;}
.fs7{font-size:7px}.fs8{font-size:8px}.fs9{font-size:9px}.fs10{font-size:10px}.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}.fs16{font-size:16px}.fs17{font-size:17px}.fs18{font-size:18px}.fs19{font-size:19px}.fs20{font-size:20px}.fs21{font-size:21px}.fs22{font-size:22px}.fs23{font-size:23px}.fs24{font-size:24px}.fs25{font-size:25px}.fs26{font-size:26px}.fs27{font-size:27px}.fs28{font-size:28px}.fs29{font-size:29px}.fs30{font-size:30px}
.fw100{font-weight:100}.fw200{font-weight:200}.fw300{font-weight:300}.fw400{font-weight:400}.fw500{font-weight:500}.fw600{font-weight:600}.fw700{font-weight:700}.fw800{font-weight:800}.fw900{font-weight:900}
.search-bar {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 42rem;
    height: 36px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    background: #e7ebf0;
    border: 1px solid #64748b;
    border-radius: 7px;
    overflow: hidden;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}
.search-bar > button,
.search-bar > input {position: relative;z-index: 2;}
.search-bar-electric {position: absolute;inset: 0;z-index: 10;padding: 2px;border-radius: 7px;pointer-events: none;opacity: 0;
    -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;
    transition: opacity .2s ease;
}
.search-bar-electric::before {content: "";position: absolute;inset: -150%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 25deg,
        #00eaff 40deg,
        #00cfff 55deg,
        #0072ff 75deg,
        transparent 100deg,
        transparent 360deg
    );
    animation: searchElectricRotate 1.1s linear infinite;
}
.search-bar-glow {position: absolute;inset: -2px;border-radius: 9px;pointer-events: none;z-index: 1;opacity: 0;background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 25deg,
        #00eaff 40deg,
        #00cfff 55deg,
        #0072ff 75deg,
        transparent 100deg,
        transparent 360deg
    );
    filter: blur(7px);
    transition: opacity .2s ease;
    animation: searchElectricRotate 1.1s linear infinite;
}
.search-bar:focus-within {
    border-color: transparent;
    box-shadow:
        0 0 8px rgba(0, 174, 255, .25),
        0 0 18px rgba(0, 114, 255, .15);
}
.search-bar:focus-within .search-bar-electric {opacity: 1;}
.search-bar:focus-within .search-bar-glow {opacity: .35;}
@keyframes searchElectricRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.search-bar .search-input {min-width: 0;border: none !important;outline: none !important;appearance: none;-webkit-appearance: none;
    background: #e7ebf0;
    color: #303943;
    font-size: 13px;
    box-shadow:
        inset 3px 3px 7px rgba(163, 177, 198, .35),
        inset -3px -3px 7px rgba(255, 255, 255, .75);
    transition: box-shadow .25s ease;
    font-weight: 500;
}
.search-bar .search-input:focus {border: none !important;outline: none !important;
    box-shadow:
        inset 2px 2px 5px rgba(163, 177, 198, .45),
        inset -2px -2px 5px rgba(255, 255, 255, .85);
}
.search-bar .search-input::placeholder {color: #89929c;}
.search-bar .search-input::-webkit-search-cancel-button {-webkit-appearance: none;}
.search-bar .search-input::-moz-focus-inner {border: 0;}
/* Champ de saisie Luxshope. Dans la couche « components » : les classes Tailwind (couche « utilities »)
   peuvent le surcharger, ex : largeur w-20. Hors couche, il l'emportait sur toutes les classes Tailwind. */
@layer components
{
    .lx-input
    {
        font-size: 13px;
        font-weight: 500;
        box-shadow:
            inset 3px 3px 7px rgba(163, 177, 198, .35),
            inset -3px -3px 7px rgba(255, 255, 255, .75);
        transition: box-shadow .25s ease;
        background: #e7ebf0;
        min-height: 35px;
        border: 1px solid #d1d5db;
        width: 100%;
        outline: none;
    }
    .lx-input::placeholder{color: #9ca3af;}
    .lx-input:focus
    {
        border-color: #6b7f9e;
        box-shadow:
            inset 3px 3px 7px rgba(163, 177, 198, .35),
            inset -3px -3px 7px rgba(255, 255, 255, .75),
            0 0 0 3px rgba(107, 127, 158, .15);
    }
    .lx-input:hover:not(:focus){border-color: #b0bac9;}
}

/* Apparition / disparition douces des éléments d'une liste (cartes d'articles, etc.).
   Décalage progressif via style="animation-delay: …" ; désactivé si l'utilisateur limite les animations. */
@keyframes lx-fade-up
{
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes lx-fade-out
{
    to { opacity: 0; transform: scale(.96); }
}
.lx-fade-up  { animation: lx-fade-up .35s cubic-bezier(.2, .7, .2, 1) both; }
.lx-fade-out { animation: lx-fade-out .2s ease forwards; pointer-events: none; }
.lx-fade-in  { animation: lx-fade-up .25s ease both; }
@media (prefers-reduced-motion: reduce)
{
    .lx-fade-up, .lx-fade-out, .lx-fade-in { animation: none; }
}

/* Tableaux dépliables (<details class="lx-accordion">, ex : « Informations sur le produit » de la page article).
   Navigateurs récents (::details-content) : la hauteur s'anime à l'ouverture comme à la fermeture ;
   les autres : le contenu apparaît en glissant à l'ouverture. Dans tous les cas, les lignes apparaissent en fondu. */
.lx-accordion { interpolate-size: allow-keywords; }
.lx-accordion::details-content
{
    block-size: 0;
    overflow: hidden;
    transition: block-size .3s cubic-bezier(.2, .7, .2, 1), content-visibility .3s allow-discrete;
}
.lx-accordion[open]::details-content { block-size: auto; }
@keyframes lx-accordion-in
{
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.lx-accordion[open] > .lx-accordion-body { animation: lx-accordion-in .3s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce)
{
    .lx-accordion::details-content { transition: none; }
    .lx-accordion[open] > .lx-accordion-body { animation: none; }
}