/* 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; }
}

/* Entrée des pages d'authentification (login, registration) : la carte apparaît, la photo se dézoome,
   puis les enfants de .lx-stagger arrivent l'un après l'autre. --lx-stagger-start décale le départ d'un groupe. */
@keyframes lx-auth-card
{
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
@keyframes lx-auth-zoom
{
    from { opacity: 0; transform: scale(1.08); }
    to   { opacity: 1; transform: none; }
}
/* Place de la barre de défilement réservée des deux côtés : pendant l'animation, les éléments décalés vers le bas
   peuvent faire apparaître la barre un instant, ce qui décalerait la carte au moment où elle disparaît. */
html.lx-auth-page { scrollbar-gutter: stable both-edges; }
.lx-auth-card { animation: lx-auth-card .6s cubic-bezier(.2, .7, .2, 1) .1s both; }
.lx-auth-zoom { animation: lx-auth-zoom 1.4s cubic-bezier(.2, .7, .2, 1) .1s both; }
.lx-stagger > *
{
    animation: lx-fade-up .5s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(var(--lx-stagger-start, 250ms) + var(--lx-i, 0) * 60ms);
}
.lx-stagger > :nth-child(2)  { --lx-i: 1; }
.lx-stagger > :nth-child(3)  { --lx-i: 2; }
.lx-stagger > :nth-child(4)  { --lx-i: 3; }
.lx-stagger > :nth-child(5)  { --lx-i: 4; }
.lx-stagger > :nth-child(6)  { --lx-i: 5; }
.lx-stagger > :nth-child(7)  { --lx-i: 6; }
.lx-stagger > :nth-child(8)  { --lx-i: 7; }
.lx-stagger > :nth-child(9)  { --lx-i: 8; }
.lx-stagger > :nth-child(10) { --lx-i: 9; }
.lx-stagger > :nth-child(11) { --lx-i: 10; }
.lx-stagger > :nth-child(12) { --lx-i: 11; }
.lx-stagger > :nth-child(n+13) { --lx-i: 12; }
@media (prefers-reduced-motion: reduce)
{
    .lx-auth-card, .lx-auth-zoom, .lx-stagger > * { 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; }
}

/* Texte long replié à 3 lignes avec « Voir plus » (page article : description, EventsArticleContent.js) :
   écrans jusqu'à md compris ; un dégradé flouté recouvre la dernière ligne pour signaler la suite. */
.lx-readmore-text {position: relative;}
@media (max-width: 1023.98px)
{
    .lx-readmore.is-clamped .lx-readmore-text
    {
        overflow: hidden;
        max-height: var(--lx-readmore-collapsed, 3.75rem);
        transition: max-height .4s cubic-bezier(.2, .7, .2, 1);
    }
    .lx-readmore.is-clamped.open .lx-readmore-text {max-height: var(--lx-readmore-full, 100rem);}
    .lx-readmore.is-clamped .lx-readmore-text::after
    {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1.75em;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 90%);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 65%);
        mask-image: linear-gradient(to bottom, transparent, #000 65%);
        transition: opacity .3s ease;
    }
    .lx-readmore.is-clamped.open .lx-readmore-text::after {opacity: 0;}
}
@media (prefers-reduced-motion: reduce)
{
    .lx-readmore.is-clamped .lx-readmore-text {transition: none;}
}