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

/* Indicateur de chargement (utils/loader.js) : logo au centre, anneau ondulé qui s'étire et tourne (style Play Store).
   Couleur : bleu de la marque (theme.css), clair ou sombre. */
.ls-loader { position: relative; display: inline-block; flex-shrink: 0; width: var(--ls-loader-size, 56px); height: var(--ls-loader-size, 56px); }
.ls-loader svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: ls-loader-rotate 2.2s linear infinite; }
.ls-loader-track { fill: none; stroke: var(--ls-brand, #4f46e5); stroke-opacity: .14; stroke-width: 4; }
.ls-loader-wave { fill: none; stroke: var(--ls-brand, #4f46e5); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
                  stroke-dasharray: 8 92; animation: ls-loader-dash 1.7s cubic-bezier(.4, 0, .2, 1) infinite; }
.ls-loader img { position: absolute; inset: 25%; width: 50%; height: 50%; object-fit: contain; animation: ls-loader-breathe 1.7s ease-in-out infinite; }
/* Entreprise sans logo : ses initiales à la place du logo (utils/branding.js) */
.ls-loader .ls-logo-initials { position: absolute; inset: 25%; display: flex; align-items: center; justify-content: center; border-radius: 22%;
                               background: var(--ls-brand, #4f46e5); color: #fff; font-weight: 700; font-size: calc(var(--ls-loader-size, 56px) * .2);
                               animation: ls-loader-breathe 1.7s ease-in-out infinite; }
.ls-loader-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 24px; }
.ls-loader-label { font-size: 13px; font-weight: 600; color: var(--color-gray-500, #6b7280); text-align: center; }
@keyframes ls-loader-rotate { to { transform: rotate(360deg); } }
@keyframes ls-loader-dash
{
    0%   { stroke-dasharray: 6 94;  stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 62 38; stroke-dashoffset: -18; }
    100% { stroke-dasharray: 6 94;  stroke-dashoffset: -100; }
}
@keyframes ls-loader-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(.9); } }
@media (prefers-reduced-motion: reduce)
{
    .ls-loader svg { animation-duration: 6s; }
    .ls-loader-wave { animation: none; stroke-dasharray: 40 60; }
    .ls-loader img { animation: none; }
}

/* Fenêtre d'enregistrement (utils/loading.js) : indicateur et libellé sur un voile léger. */
.ls-loading { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px;
              background: var(--ls-modal-overlay, rgba(15, 23, 42, .32)); backdrop-filter: blur(2px); opacity: 0; transition: opacity .18s ease; }
.ls-loading.open { opacity: 1; }
.ls-loading-card { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 220px; max-width: 320px; padding: 26px 28px 22px;
                   border-radius: 16px; background: var(--ls-card, #fff); border: 1px solid var(--ls-popover-border, #e5e7eb); box-shadow: var(--ls-popover-shadow); }

/* ─── Champs et boutons Luxshope CV (formulaires de l'éditeur, fenêtres) : couleurs du thème (theme.css) ─── */
.ls-input { width: 100%; min-height: 38px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--ls-field-border); background: var(--ls-field-bg);
            color: var(--color-gray-900, #111827); font-size: 13px; font-weight: 500; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.ls-input:hover:not(:focus) { border-color: var(--ls-field-border-hover); }
.ls-input:focus { border-color: var(--ls-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ls-brand) 18%, transparent); }
.ls-input::placeholder { color: var(--color-gray-400, #9ca3af); }
textarea.ls-input { min-height: 84px; resize: vertical; line-height: 1.45; }
select.ls-input { cursor: pointer; }
.ls-input[type="color"] { width: 42px; min-height: 34px; height: 34px; padding: 3px; cursor: pointer; }

.ls-btn { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
          border: 1px solid var(--color-gray-300, #d1d5db); background: var(--ls-card); color: var(--color-gray-700, #374151); font-size: 13px; font-weight: 600;
          text-decoration: none; transition: border-color .15s ease, opacity .15s ease, background-color .15s ease; }
.ls-btn:hover { border-color: var(--color-gray-400, #9ca3af); }
.ls-btn:active { transform: scale(.98); }
.ls-btn:disabled { opacity: .55; cursor: not-allowed; }
.ls-btn-primary { border-color: transparent; background: var(--ls-brand-solid); color: #fff; }
.ls-btn-primary:hover { border-color: transparent; opacity: .9; }
.ls-btn-danger { color: #dc2626; }
.ls-btn-sm { height: 30px; padding: 0 9px; font-size: 12px; border-radius: 7px; }
.ls-btn-icon { width: 32px; padding: 0; }

/* ─── Fenêtres (utils/dialog.js) ─── */
.ls-dialog { width: calc(100vw - 24px); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--ls-popover-border); border-radius: 14px;
             background: var(--ls-card); color: var(--color-gray-800, #1f2937); box-shadow: var(--ls-popover-shadow); overflow: hidden; }
.ls-dialog[open] { display: flex; flex-direction: column; animation: lx-fade-up .2s ease both; }
.ls-dialog::backdrop { background: var(--ls-modal-overlay); backdrop-filter: blur(2px); }
.ls-dialog-sm { max-width: 420px; }
.ls-dialog-md { max-width: 640px; }
.ls-dialog-lg { max-width: 920px; }
.ls-dialog-xl { max-width: 1180px; }
.ls-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--color-gray-200, #e5e7eb); }
.ls-dialog-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--color-gray-900, #111827); }
.ls-dialog-sub { font-size: 12px; font-weight: 500; color: var(--color-gray-500, #6b7280); }
.ls-dialog-body { padding: 18px 20px 20px; overflow-y: auto; }
.ls-dialog .ls-icon-btn { color: var(--color-gray-500, #6b7280); }
.ls-dialog .ls-icon-btn:hover { background: var(--color-gray-100, #f3f4f6); color: var(--color-gray-900, #111827); }