/* ==========================================================================
   GESCOM PRO AFRICA
   BOUTIQUE PUBLIQUE PREMIUM
   Fichier : public/assets/css/boutique.css
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */

:root {

    --shop-bg: #f4f7fb;
    --shop-bg-soft: #eef4fb;

    --shop-white: #ffffff;
    --shop-surface: #ffffff;
    --shop-surface-soft: #f8fafc;

    --shop-navy: #061426;
    --shop-navy-2: #0b203a;
    --shop-navy-3: #123a61;
    --shop-navy-4: #174d7a;

    --shop-blue: #1769ff;
    --shop-blue-dark: #0d51d6;
    --shop-blue-soft: #eaf2ff;

    --shop-cyan: #08b8d6;
    --shop-cyan-soft: #e8fbff;

    --shop-green: #159957;
    --shop-green-dark: #0d7c45;
    --shop-green-soft: #eaf8f0;

    --shop-orange: #f97316;
    --shop-orange-dark: #db5d08;
    --shop-orange-soft: #fff2e8;

    --shop-purple: #7c3aed;
    --shop-purple-soft: #f3edff;

    --shop-red: #d92d20;
    --shop-red-soft: #fff1f0;

    --shop-yellow: #e9a819;
    --shop-yellow-soft: #fff8df;

    --shop-text: #102033;
    --shop-text-2: #33465e;
    --shop-text-soft: #61728a;
    --shop-muted: #8897a9;

    --shop-border: #dce6f0;
    --shop-border-strong: #c7d6e6;

    --shop-shadow-xs:
        0 4px 14px rgba(6, 20, 38, .04);

    --shop-shadow-sm:
        0 8px 24px rgba(6, 20, 38, .07);

    --shop-shadow-md:
        0 18px 48px rgba(6, 20, 38, .11);

    --shop-shadow-lg:
        0 30px 80px rgba(6, 20, 38, .16);

    --shop-radius-sm: 13px;
    --shop-radius-md: 18px;
    --shop-radius-lg: 24px;
    --shop-radius-xl: 32px;

    --shop-container: 1560px;

    --shop-transition:
        .18s ease;
}


/* ==========================================================================
   2. RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 0 0,
            rgba(23, 105, 255, .07),
            transparent 26%
        ),
        radial-gradient(
            circle at 100% 10%,
            rgba(8, 184, 214, .05),
            transparent 22%
        ),
        var(--shop-bg);

    color: var(--shop-text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.share-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

[hidden] {
    display: none !important;
}


/* ==========================================================================
   3. CONTENEUR
   ========================================================================== */

.shop-container {
    width:
        min(
            calc(100% - 56px),
            var(--shop-container)
        );

    margin-inline: auto;
}


/* ==========================================================================
   4. ÉLÉMENTS COMMUNS
   ========================================================================== */

.shop-eyebrow {
    display: inline-block;

    color: var(--shop-blue);

    font-size: 11px;
    font-weight: 950;

    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.btn {
    min-height: 50px;

    padding:
        13px
        18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    border:
        1px solid transparent;

    border-radius:
        15px;

    font-size: 14px;
    font-weight: 900;

    transition:
        transform var(--shop-transition),
        box-shadow var(--shop-transition),
        background var(--shop-transition),
        border-color var(--shop-transition),
        color var(--shop-transition);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-dark {
    background: var(--shop-navy);
    color: #fff;

    box-shadow:
        0 10px 24px
        rgba(6, 20, 38, .16);
}

.btn-dark:hover {
    background: var(--shop-navy-2);
}

.btn-primary {
    background:
        linear-gradient(
            135deg,
            var(--shop-blue),
            #3a7bff
        );

    color: #fff;

    box-shadow:
        0 10px 24px
        rgba(23, 105, 255, .20);
}

.btn-primary:hover {
    background:
        linear-gradient(
            135deg,
            var(--shop-blue-dark),
            var(--shop-blue)
        );
}

.btn-light {
    background: #fff;
    color: var(--shop-navy);

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, .10);
}

.btn-light:hover {
    background: #f4f8ff;
}

.btn-outline {
    border-color:
        var(--shop-border-strong);

    background: #fff;

    color: var(--shop-navy);
}

.btn-outline:hover {
    border-color:
        var(--shop-blue);

    color:
        var(--shop-blue);

    background:
        var(--shop-blue-soft);
}

.btn-glass {
    border-color:
        rgba(255, 255, 255, .18);

    background:
        rgba(255, 255, 255, .08);

    color: #fff;

    backdrop-filter:
        blur(12px);
}

.btn-glass:hover {
    background:
        rgba(255, 255, 255, .14);
}


/* ==========================================================================
   5. PAGE ERREUR
   ========================================================================== */

.shop-error-page {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding: 24px;
}

.shop-error-card {
    width:
        min(
            100%,
            680px
        );

    padding: 50px;

    text-align: center;

    border:
        1px solid
        var(--shop-border);

    border-radius:
        var(--shop-radius-xl);

    background: #fff;

    box-shadow:
        var(--shop-shadow-lg);
}

.shop-error-icon {
    width: 84px;
    height: 84px;

    margin:
        0
        auto
        20px;

    display: grid;
    place-items: center;

    border-radius: 25px;

    background:
        var(--shop-orange-soft);

    color:
        var(--shop-orange);

    font-size: 37px;
}

.shop-error-card h1 {
    margin:
        12px
        0
        0;

    color: var(--shop-navy);

    font-size:
        clamp(
            30px,
            3vw,
            44px
        );

    line-height: 1.08;
}

.shop-error-card p {
    max-width: 550px;

    margin:
        18px
        auto
        26px;

    color:
        var(--shop-text-soft);

    font-size: 16px;
    line-height: 1.75;
}


/* ==========================================================================
   6. HEADER
   ========================================================================== */

.shop-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background:
        rgba(
            6,
            20,
            38,
            .97
        );

    color: #fff;

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, .14);
}

.shop-header-row {
    min-height: 86px;

    display: grid;

    grid-template-columns:
        auto
        minmax(320px, 720px)
        auto;

    align-items: center;

    gap: 26px;
}


/* BRAND */

.shop-brand {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 13px;
}

.shop-brand-logo {
    width: 52px;
    height: 52px;

    flex:
        0
        0
        52px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #0fc3dc,
            var(--shop-blue)
        );

    color: #fff;

    font-size: 27px;
    font-weight: 950;

    box-shadow:
        0 10px 28px
        rgba(23, 105, 255, .30);
}

.shop-brand-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.shop-brand-text strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 950;

    letter-spacing: .5px;
}

.shop-brand-text small {
    margin-top: 3px;

    color:
        rgba(
            255,
            255,
            255,
            .66
        );

    font-size: 11px;
    font-weight: 650;
}


/* ==========================================================================
   7. RECHERCHE HEADER
   ========================================================================== */

.shop-search-shell {
    position: relative;

    min-width: 0;
}

.shop-main-search {
    min-height: 54px;

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        auto
        auto;

    align-items: center;

    padding:
        4px
        5px
        4px
        0;

    border:
        1px solid
        rgba(255, 255, 255, .15);

    border-radius: 17px;

    background:
        rgba(255, 255, 255, .09);

    transition:
        border-color var(--shop-transition),
        background var(--shop-transition),
        box-shadow var(--shop-transition);
}

.shop-main-search:focus-within {
    border-color:
        rgba(94, 234, 212, .55);

    background:
        rgba(255, 255, 255, .12);

    box-shadow:
        0 0 0 4px
        rgba(23, 105, 255, .10);
}

.shop-search-icon {
    display: grid;
    place-items: center;

    color:
        rgba(255, 255, 255, .68);

    font-size: 18px;
}

.shop-main-search input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #fff;

    font-size: 15px;
    font-weight: 650;
}

.shop-main-search input::placeholder {
    color:
        rgba(255, 255, 255, .48);
}

.shop-search-clear {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color:
        rgba(255, 255, 255, .70);

    transition:
        background var(--shop-transition),
        color var(--shop-transition);
}

.shop-search-clear:hover {
    background:
        rgba(255, 255, 255, .10);

    color: #fff;
}

.shop-search-submit {
    min-height: 42px;

    padding:
        9px
        15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 0;

    border-radius: 13px;

    background: #fff;

    color:
        var(--shop-navy);

    font-size: 13px;
    font-weight: 900;

    transition:
        transform var(--shop-transition),
        background var(--shop-transition);
}

.shop-search-submit:hover {
    transform: translateY(-1px);
    background: #edf5ff;
}


/* SUGGESTIONS */

.shop-search-suggestions {
    position: absolute;

    top:
        calc(
            100% + 10px
        );

    left: 0;
    right: 0;

    max-height:
        min(
            68vh,
            650px
        );

    overflow-y: auto;

    border:
        1px solid
        var(--shop-border);

    border-radius: 20px;

    background: #fff;

    color:
        var(--shop-text);

    box-shadow:
        0 28px 70px
        rgba(0, 0, 0, .22);

    z-index: 1500;
}

.shop-search-loading {
    padding: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    color:
        var(--shop-text-soft);

    font-size: 13px;
    font-weight: 800;
}

.shop-spinner {
    width: 18px;
    height: 18px;

    border:
        2px solid
        #d7e2ed;

    border-top-color:
        var(--shop-blue);

    border-radius: 50%;

    animation:
        shop-spin
        .75s
        linear
        infinite;
}

@keyframes shop-spin {

    to {
        transform: rotate(360deg);
    }
}


/*
   Ces classes seront utilisées par boutique.js
   pour les suggestions.
*/

.search-group {
    padding:
        8px
        8px
        10px;
}

.search-group + .search-group {
    border-top:
        1px solid
        #edf1f6;
}

.search-group-title {
    padding:
        10px
        11px
        7px;

    color:
        var(--shop-muted);

    font-size: 10px;
    font-weight: 950;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.search-result-item {
    width: 100%;

    padding:
        11px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-radius: 14px;

    transition:
        background var(--shop-transition);
}

.search-result-item:hover,
.search-result-item.is-active {
    background:
        var(--shop-blue-soft);
}

.search-result-photo {
    width: 52px;
    height: 52px;

    flex:
        0
        0
        52px;

    overflow: hidden;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #edf4ff,
            #e8fafc
        );

    color:
        #7196b9;

    font-size: 21px;
}

.search-result-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.search-result-main {
    flex: 1;
    min-width: 0;
}

.search-result-main strong {
    display: block;

    overflow: hidden;

    color:
        var(--shop-navy);

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 14px;
    font-weight: 900;
}

.search-result-main small {
    display: block;

    margin-top: 4px;

    overflow: hidden;

    color:
        var(--shop-text-soft);

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 11px;
}

.search-result-price {
    flex: 0 0 auto;

    color:
        var(--shop-navy);

    font-size: 13px;
    font-weight: 950;
}

.search-result-status {
    display: block;

    margin-top: 4px;

    color:
        var(--shop-green);

    font-size: 10px;
    font-weight: 900;
}

.search-result-status.is-unavailable {
    color:
        var(--shop-red);
}

.search-empty {
    padding:
        30px
        20px;

    text-align: center;
}

.search-empty i {
    display: block;

    margin-bottom: 12px;

    color:
        var(--shop-blue);

    font-size: 31px;
}

.search-empty strong {
    display: block;

    color:
        var(--shop-navy);

    font-size: 16px;
}

.search-empty p {
    max-width: 430px;

    margin:
        8px
        auto
        0;

    color:
        var(--shop-text-soft);

    font-size: 12px;
    line-height: 1.6;
}


/* ==========================================================================
   8. ACTIONS HEADER
   ========================================================================== */

.shop-header-actions {
    display: flex;
    align-items: center;

    gap: 9px;
}

.shop-header-btn {
    min-height: 46px;

    padding:
        10px
        14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, .07);

    color: #fff;

    font-size: 12px;
    font-weight: 850;

    transition:
        background var(--shop-transition),
        transform var(--shop-transition);
}

.shop-header-btn:hover {
    transform: translateY(-1px);

    background:
        rgba(255, 255, 255, .13);
}

.shop-header-btn.dashboard {
    background:
        rgba(8, 184, 214, .14);

    border-color:
        rgba(8, 184, 214, .26);

    color:
        #baf5ff;
}


/* ==========================================================================
   9. HERO
   ========================================================================== */

.shop-hero {
    min-height: 390px;

    margin-top: 32px;

    padding:
        58px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        380px;

    align-items: center;

    gap: 58px;

    position: relative;
    overflow: hidden;

    border-radius:
        var(--shop-radius-xl);

    background:
        linear-gradient(
            135deg,
            var(--shop-navy) 0%,
            #0c2746 52%,
            #155a7b 100%
        );

    color: #fff;

    box-shadow:
        var(--shop-shadow-lg);
}

.shop-hero::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    top: -260px;
    right: -150px;

    border-radius: 50%;

    background:
        rgba(8, 184, 214, .12);
}

.shop-hero::after {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    right: 260px;
    bottom: -250px;

    border-radius: 50%;

    background:
        rgba(23, 105, 255, .13);
}

.shop-hero-content,
.shop-hero-panel {
    position: relative;
    z-index: 2;
}

.shop-hero-kicker {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 19px;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .08);

    color:
        #a5f3fc;

    font-size: 11px;
    font-weight: 950;

    letter-spacing: 1px;
}

.shop-hero h1 {
    max-width: 950px;

    margin: 0;

    color: #fff;

    font-size:
        clamp(
            40px,
            4vw,
            64px
        );

    line-height: 1.03;

    letter-spacing: -1.8px;

    font-weight: 950;
}

.shop-hero-description {
    max-width: 820px;

    margin:
        23px
        0
        0;

    color:
        rgba(255, 255, 255, .78);

    font-size:
        clamp(
            17px,
            1.25vw,
            20px
        );

    line-height: 1.72;
}

.shop-hero-actions {
    margin-top: 29px;

    display: flex;
    flex-wrap: wrap;

    gap: 11px;
}

.shop-hero-trust {
    margin-top: 30px;

    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.shop-hero-trust span {
    padding:
        8px
        11px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .05);

    color:
        rgba(255, 255, 255, .74);

    font-size: 11px;
    font-weight: 750;
}

.shop-hero-trust i {
    color:
        #5eead4;
}


/* HERO PANEL */

.shop-hero-panel {
    padding: 30px;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius: 26px;

    background:
        rgba(255, 255, 255, .07);

    backdrop-filter:
        blur(14px);
}

.shop-panel-icon {
    width: 63px;
    height: 63px;

    display: grid;
    place-items: center;

    margin-bottom: 20px;

    border-radius: 19px;

    background:
        rgba(255, 255, 255, .10);

    color:
        #67e8f9;

    font-size: 28px;
}

.shop-panel-kicker {
    color:
        #7dd3fc;

    font-size: 10px;
    font-weight: 950;

    letter-spacing: 1px;
}

.shop-hero-panel h2 {
    margin:
        9px
        0
        0;

    color: #fff;

    font-size: 26px;
    line-height: 1.17;
}

.shop-hero-panel > p {
    margin:
        13px
        0
        0;

    color:
        rgba(255, 255, 255, .68);

    font-size: 13px;
    line-height: 1.65;
}

.shop-stats {
    margin-top: 24px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 9px;
}

.shop-stats article {
    padding:
        14px
        8px;

    text-align: center;

    border-radius: 15px;

    background:
        rgba(255, 255, 255, .07);
}

.shop-stats strong {
    display: block;

    color: #fff;

    font-size: 23px;
    font-weight: 950;
}

.shop-stats span {
    display: block;

    margin-top: 4px;

    color:
        rgba(255, 255, 255, .55);

    font-size: 9px;
    font-weight: 850;

    text-transform: uppercase;
}


/* ==========================================================================
   10. BANNIÈRE ENTREPRISE
   ========================================================================== */

.shop-company-banner {
    margin-top: 26px;

    padding:
        24px
        26px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;

    border:
        1px solid
        var(--shop-border);

    border-radius: 22px;

    background: #fff;

    box-shadow:
        var(--shop-shadow-sm);
}

.shop-company-main {
    display: flex;
    align-items: center;

    gap: 16px;
}

.shop-company-avatar {
    width: 62px;
    height: 62px;

    flex:
        0
        0
        62px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            var(--shop-navy),
            var(--shop-blue)
        );

    color: #fff;

    font-size: 25px;
    font-weight: 950;
}

.shop-company-banner h2 {
    margin:
        5px
        0
        0;

    color:
        var(--shop-navy);

    font-size: 24px;
}

.shop-company-banner p {
    max-width: 750px;

    margin:
        7px
        0
        0;

    color:
        var(--shop-text-soft);

    font-size: 14px;
    line-height: 1.6;
}


/* ==========================================================================
   11. MODE RECHERCHE
   ========================================================================== */

.shop-search-mode {
    margin-top: 32px;

    padding:
        34px
        38px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border:
        1px solid
        var(--shop-border);

    border-radius:
        var(--shop-radius-lg);

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f3f7ff
        );

    box-shadow:
        var(--shop-shadow-sm);
}

.shop-search-mode h1 {
    margin:
        7px
        0
        0;

    color:
        var(--shop-navy);

    font-size:
        clamp(
            30px,
            3vw,
            46px
        );

    line-height: 1.1;
}

.shop-search-mode h1 span {
    color:
        var(--shop-blue);
}

.shop-search-mode p {
    margin:
        10px
        0
        0;

    color:
        var(--shop-text-soft);

    font-size: 15px;
    line-height: 1.65;
}


/* ==========================================================================
   12. SECTIONS
   ========================================================================== */

.shop-categories-section {
    margin-top: 82px;
}

.shop-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 27px;
}

.shop-section-heading h2 {
    margin:
        7px
        0
        0;

    color:
        var(--shop-navy);

    font-size:
        clamp(
            30px,
            2.8vw,
            44px
        );

    line-height: 1.08;
}

.shop-section-heading > p {
    max-width: 600px;

    margin: 0;

    color:
        var(--shop-text-soft);

    text-align: right;

    font-size: 15px;
    line-height: 1.65;
}


/* ==========================================================================
   13. CATÉGORIES
   ========================================================================== */

.shop-category-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 15px;
}

.shop-category-card {
    min-height: 118px;

    padding: 18px;

    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        38px;

    align-items: center;

    gap: 14px;

    border:
        1px solid
        var(--shop-border);

    border-radius: 19px;

    background: #fff;

    box-shadow:
        var(--shop-shadow-xs);

    transition:
        transform var(--shop-transition),
        border-color var(--shop-transition),
        box-shadow var(--shop-transition),
        background var(--shop-transition);
}

.shop-category-card:hover {
    transform: translateY(-4px);

    border-color:
        #bed2e8;

    box-shadow:
        var(--shop-shadow-md);
}

.shop-category-card.is-active {
    border:
        2px solid
        var(--shop-blue);

    background:
        linear-gradient(
            145deg,
            #eef4ff,
            #fff
        );
}

.shop-category-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background:
        var(--shop-blue-soft);

    color:
        var(--shop-blue);

    font-size: 23px;
}

.shop-category-card:nth-child(4n + 2)
.shop-category-icon {
    background:
        var(--shop-green-soft);

    color:
        var(--shop-green);
}

.shop-category-card:nth-child(4n + 3)
.shop-category-icon {
    background:
        var(--shop-orange-soft);

    color:
        var(--shop-orange);
}

.shop-category-card:nth-child(4n + 4)
.shop-category-icon {
    background:
        var(--shop-purple-soft);

    color:
        var(--shop-purple);
}

.shop-category-content {
    min-width: 0;
}

.shop-category-content strong {
    display: block;

    color:
        var(--shop-navy);

    font-size: 15px;
    line-height: 1.3;
}

.shop-category-content span {
    display: block;

    margin-top: 6px;

    color:
        var(--shop-muted);

    font-size: 11px;
    font-weight: 750;
}

.shop-category-arrow {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        var(--shop-surface-soft);

    color:
        var(--shop-blue);

    transition:
        background var(--shop-transition),
        color var(--shop-transition);
}

.shop-category-card:hover
.shop-category-arrow {
    background:
        var(--shop-blue);

    color: #fff;
}


/* ==========================================================================
   14. AUTRES CATÉGORIES
   ========================================================================== */

.shop-other-categories {
    margin-top: 18px;

    border:
        1px solid
        var(--shop-border);

    border-radius: 18px;

    background: #fff;
}

.shop-other-categories summary {
    min-height: 58px;

    padding:
        15px
        18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    cursor: pointer;

    list-style: none;

    color:
        var(--shop-text-2);

    font-size: 13px;
    font-weight: 900;
}

.shop-other-categories summary::-webkit-details-marker {
    display: none;
}

.shop-other-categories summary span {
    display: flex;
    align-items: center;

    gap: 9px;
}

.shop-other-categories[open]
summary > i {
    transform: rotate(180deg);
}

.shop-other-categories summary > i {
    transition:
        transform var(--shop-transition);
}

.shop-other-category-grid {
    padding:
        0
        16px
        16px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 9px;
}

.shop-other-category-grid a {
    min-height: 46px;

    padding:
        10px
        12px;

    display: flex;
    align-items: center;

    gap: 9px;

    border:
        1px solid
        #edf1f5;

    border-radius: 13px;

    background:
        var(--shop-surface-soft);

    color:
        var(--shop-text-2);

    font-size: 12px;
    font-weight: 750;
}

.shop-other-category-grid i {
    color:
        var(--shop-blue);
}


/* ==========================================================================
   15. SOUS-CATÉGORIES
   ========================================================================== */

.shop-subcategories {
    margin-top: 18px;

    padding: 15px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    border:
        1px solid
        var(--shop-border);

    border-radius: 17px;

    background: #fff;
}

.shop-subcategory-label {
    margin-right: 3px;

    color:
        var(--shop-muted);

    font-size: 11px;
    font-weight: 900;
}

.shop-subcategories a {
    padding:
        8px
        12px;

    border:
        1px solid
        var(--shop-border);

    border-radius: 999px;

    background:
        var(--shop-surface-soft);

    color:
        var(--shop-text-2);

    font-size: 11px;
    font-weight: 850;

    transition:
        background var(--shop-transition),
        color var(--shop-transition),
        border-color var(--shop-transition);
}

.shop-subcategories a:hover,
.shop-subcategories a.is-active {
    border-color:
        var(--shop-blue);

    background:
        var(--shop-blue);

    color: #fff;
}


/* ==========================================================================
   16. FILTRES
   ========================================================================== */

.shop-filters-section {
    margin-top: 56px;
}

.shop-filter-bar {
    padding: 13px;

    display: grid;

    grid-template-columns:
        minmax(180px, 1fr)
        minmax(180px, 1fr)
        auto;

    gap: 10px;

    border:
        1px solid
        var(--shop-border);

    border-radius: 19px;

    background: #fff;

    box-shadow:
        var(--shop-shadow-sm);
}

.shop-filter-field {
    min-height: 62px;

    padding:
        9px
        13px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border:
        1px solid
        var(--shop-border);

    border-radius: 14px;

    background:
        var(--shop-surface-soft);
}

.shop-filter-field > span {
    margin-bottom: 3px;

    display: flex;
    align-items: center;

    gap: 6px;

    color:
        var(--shop-muted);

    font-size: 9px;
    font-weight: 950;

    text-transform: uppercase;
    letter-spacing: .6px;
}

.shop-filter-field select {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color:
        var(--shop-text);

    font-size: 13px;
    font-weight: 850;
}

.shop-filter-submit {
    align-self: stretch;

    min-width: 145px;
}


/* FILTRES ACTIFS */

.shop-active-filters {
    margin-top: 12px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.shop-active-filters span,
.shop-active-filters a {
    min-height: 35px;

    padding:
        8px
        11px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border:
        1px solid
        var(--shop-border);

    border-radius: 999px;

    background: #fff;

    color:
        var(--shop-text-soft);

    font-size: 10px;
    font-weight: 850;
}

.shop-active-filters .is-clear {
    border-color:
        #ffd7d4;

    background:
        var(--shop-red-soft);

    color:
        var(--shop-red);
}


/* ==========================================================================
   17. TITRE RÉSULTATS
   ========================================================================== */

.shop-results-heading {
    margin:
        42px
        0
        22px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;
}

.shop-results-heading h2 {
    margin:
        6px
        0
        0;

    color:
        var(--shop-navy);

    font-size:
        clamp(
            27px,
            2.4vw,
            38px
        );

    line-height: 1.1;
}

.shop-results-heading p {
    margin:
        8px
        0
        0;

    color:
        var(--shop-text-soft);

    font-size: 13px;
    line-height: 1.6;
}

.shop-results-count {
    padding:
        9px
        13px;

    border-radius: 999px;

    background:
        var(--shop-navy);

    color: #fff;

    font-size: 11px;
    font-weight: 900;
}


/* ==========================================================================
   18. GRILLE PRODUITS
   ========================================================================== */

.shop-product-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 20px;
}

.shop-product-card {
    min-width: 0;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        var(--shop-border);

    border-radius: 22px;

    background: #fff;

    box-shadow:
        var(--shop-shadow-sm);

    transition:
        transform var(--shop-transition),
        box-shadow var(--shop-transition),
        border-color var(--shop-transition);
}

.shop-product-card:hover {
    transform: translateY(-5px);

    border-color:
        #c4d6e8;

    box-shadow:
        var(--shop-shadow-md);
}


/* MEDIA */

.shop-product-media {
    position: relative;

    aspect-ratio:
        4 / 3;

    overflow: hidden;

    display: block;

    background:
        linear-gradient(
            145deg,
            #eaf2ff,
            #e8fafc
        );
}

.shop-product-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .30s ease;
}

.shop-product-card:hover
.shop-product-media img {
    transform: scale(1.035);
}

.shop-product-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    color:
        #7196b9;
}

.shop-product-placeholder i {
    font-size: 48px;
}

.shop-product-placeholder small {
    font-size: 11px;
    font-weight: 850;
}


/* BADGES */

.shop-offer-badge,
.shop-stock-badge,
.shop-product-category {
    position: absolute;

    z-index: 2;

    backdrop-filter:
        blur(8px);
}

.shop-offer-badge {
    top: 13px;
    left: 13px;

    padding:
        7px
        9px;

    border-radius: 999px;

    background:
        rgba(6, 20, 38, .88);

    color: #fff;

    font-size: 9px;
    font-weight: 950;

    letter-spacing: .6px;
}

.shop-offer-badge.is-rental {
    background:
        rgba(21, 153, 87, .94);
}

.shop-stock-badge {
    top: 13px;
    right: 13px;

    padding:
        7px
        9px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .93);

    color:
        var(--shop-green);

    font-size: 9px;
    font-weight: 950;
}

.shop-stock-badge.is-unavailable {
    color:
        var(--shop-red);
}

.shop-product-category {
    left: 13px;
    bottom: 13px;

    max-width:
        calc(100% - 26px);

    padding:
        7px
        9px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .94);

    color:
        var(--shop-navy);

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 9px;
    font-weight: 900;
}


/* BODY */

.shop-product-body {
    flex: 1;

    padding: 18px;

    display: flex;
    flex-direction: column;
}

.shop-product-company {
    display: flex;
    align-items: center;

    gap: 7px;

    color:
        var(--shop-blue);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .4px;
    text-transform: uppercase;
}

.shop-product-title {
    margin-top: 9px;

    color:
        var(--shop-navy);

    font-size: 19px;
    line-height: 1.28;

    font-weight: 950;
}

.shop-product-title:hover {
    color:
        var(--shop-blue);
}

.shop-product-description {
    margin:
        9px
        0
        0;

    display: -webkit-box;

    overflow: hidden;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    color:
        var(--shop-text-soft);

    font-size: 12px;
    line-height: 1.6;
}

.shop-product-meta {
    margin-top: 13px;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.shop-product-meta span {
    padding:
        6px
        8px;

    display: inline-flex;
    align-items: center;

    gap: 5px;

    border-radius: 999px;

    background:
        var(--shop-surface-soft);

    color:
        var(--shop-text-soft);

    font-size: 9px;
    font-weight: 750;
}

.shop-product-price {
    margin-top: 17px;

    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;

    gap: 5px;
}

.shop-product-price strong {
    color:
        var(--shop-navy);

    font-size:
        clamp(
            21px,
            1.6vw,
            27px
        );

    line-height: 1;

    font-weight: 950;
}

.shop-product-price span {
    color:
        var(--shop-muted);

    font-size: 10px;
    font-weight: 750;
}

.shop-unavailable-message {
    margin:
        13px
        0
        0;

    padding:
        9px
        10px;

    display: flex;
    align-items: flex-start;

    gap: 7px;

    border:
        1px solid
        #ffd9d6;

    border-radius: 12px;

    background:
        var(--shop-red-soft);

    color:
        #a73a32;

    font-size: 10px;
    line-height: 1.5;
}


/* ACTIONS */

.shop-product-actions {
    margin-top: auto;

    padding-top: 17px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        44px
        44px;

    gap: 8px;
}

.shop-product-view {
    min-height: 44px;

    padding:
        10px
        13px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border-radius: 13px;

    background:
        var(--shop-navy);

    color: #fff;

    font-size: 11px;
    font-weight: 900;

    transition:
        background var(--shop-transition),
        transform var(--shop-transition);
}

.shop-product-view:hover {
    transform: translateY(-1px);

    background:
        var(--shop-blue);
}

.shop-share-button,
.shop-company-button {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--shop-border);

    border-radius: 13px;

    background: #fff;

    color:
        var(--shop-blue);

    font-size: 17px;

    transition:
        background var(--shop-transition),
        color var(--shop-transition),
        border-color var(--shop-transition);
}

.shop-share-button:hover,
.shop-company-button:hover {
    border-color:
        var(--shop-blue);

    background:
        var(--shop-blue);

    color: #fff;
}


/* ==========================================================================
   19. PAGINATION
   ========================================================================== */

.shop-pagination {
    margin-top: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;
}

.shop-pagination a {
    min-width: 42px;
    height: 42px;

    padding:
        0
        11px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--shop-border);

    border-radius: 12px;

    background: #fff;

    color:
        var(--shop-text-2);

    font-size: 12px;
    font-weight: 900;

    transition:
        background var(--shop-transition),
        color var(--shop-transition);
}

.shop-pagination a:hover,
.shop-pagination a.is-current {
    background:
        var(--shop-navy);

    color: #fff;

    border-color:
        var(--shop-navy);
}


/* ==========================================================================
   20. AUCUN RÉSULTAT
   ========================================================================== */

.shop-empty-state {
    margin-top: 25px;

    padding:
        70px
        25px;

    text-align: center;

    border:
        1px dashed
        var(--shop-border-strong);

    border-radius:
        var(--shop-radius-lg);

    background: #fff;
}

.shop-empty-icon {
    width: 76px;
    height: 76px;

    margin:
        0
        auto
        18px;

    display: grid;
    place-items: center;

    border-radius: 22px;

    background:
        var(--shop-blue-soft);

    color:
        var(--shop-blue);

    font-size: 32px;
}

.shop-empty-state h2 {
    margin:
        7px
        0
        0;

    color:
        var(--shop-navy);

    font-size:
        clamp(
            26px,
            2.6vw,
            38px
        );
}

.shop-empty-state p {
    max-width: 680px;

    margin:
        14px
        auto
        0;

    color:
        var(--shop-text-soft);

    font-size: 15px;
    line-height: 1.7;
}

.shop-empty-actions {
    margin-top: 24px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 9px;
}


/* ==========================================================================
   21. CONFIANCE COMMERCIALE
   ========================================================================== */

.shop-commercial-trust {
    margin-top: 72px;

    padding: 34px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 20px;

    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            var(--shop-navy),
            var(--shop-navy-3)
        );

    color: #fff;

    box-shadow:
        var(--shop-shadow-lg);
}

.shop-commercial-trust article {
    padding: 8px;

    display: flex;
    align-items: flex-start;

    gap: 13px;
}

.shop-commercial-trust article > span {
    width: 50px;
    height: 50px;

    flex:
        0
        0
        50px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background:
        rgba(255, 255, 255, .08);

    color:
        #67e8f9;

    font-size: 22px;
}

.shop-commercial-trust strong {
    display: block;

    color: #fff;

    font-size: 14px;
}

.shop-commercial-trust p {
    margin:
        6px
        0
        0;

    color:
        rgba(255, 255, 255, .64);

    font-size: 11px;
    line-height: 1.6;
}


/* ==========================================================================
   22. FOOTER
   ========================================================================== */

.shop-footer {
    margin-top: 58px;

    padding:
        28px
        0
        38px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        auto;

    align-items: center;

    gap: 30px;

    border-top:
        1px solid
        var(--shop-border);
}

.shop-footer-brand {
    display: flex;
    align-items: center;

    gap: 12px;
}

.shop-footer-logo {
    width: 45px;
    height: 45px;

    flex:
        0
        0
        45px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background:
        var(--shop-navy);

    color: #fff;

    font-size: 20px;
    font-weight: 950;
}

.shop-footer-brand strong {
    display: block;

    color:
        var(--shop-navy);

    font-size: 13px;
}

.shop-footer-brand p,
.shop-footer-copy {
    margin:
        4px
        0
        0;

    color:
        var(--shop-muted);

    font-size: 10px;
}

.shop-footer-links {
    display: flex;
    align-items: center;

    gap: 18px;
}

.shop-footer-links a {
    color:
        var(--shop-text-soft);

    font-size: 11px;
    font-weight: 800;
}

.shop-footer-links a:hover {
    color:
        var(--shop-blue);
}


/* ==========================================================================
   23. PARTAGE
   ========================================================================== */

.shop-share-overlay {
    position: fixed;
    inset: 0;

    z-index: 1900;

    background:
        rgba(4, 14, 29, .62);

    backdrop-filter:
        blur(6px);
}

.shop-share-sheet {
    position: fixed;

    left: 50%;
    bottom: 22px;

    z-index: 2000;

    width:
        min(
            calc(100% - 28px),
            560px
        );

    padding:
        18px;

    border:
        1px solid
        var(--shop-border);

    border-radius: 25px;

    background: #fff;

    box-shadow:
        0 34px 100px
        rgba(0, 0, 0, .28);

    transform:
        translate(
            -50%,
            calc(100% + 60px)
        );

    opacity: 0;

    pointer-events: none;

    transition:
        transform .25s ease,
        opacity .25s ease;
}

.shop-share-sheet.is-open {
    transform:
        translate(
            -50%,
            0
        );

    opacity: 1;

    pointer-events: auto;
}

.shop-share-sheet-handle {
    width: 46px;
    height: 5px;

    margin:
        0
        auto
        17px;

    border-radius: 999px;

    background:
        #d7e0e9;
}

.shop-share-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.shop-share-heading h2 {
    margin:
        5px
        0
        0;

    color:
        var(--shop-navy);

    font-size: 22px;
}

.shop-share-heading p {
    margin:
        5px
        0
        0;

    color:
        var(--shop-text-soft);

    font-size: 11px;
}

.shop-share-close {
    width: 41px;
    height: 41px;

    flex:
        0
        0
        41px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--shop-border);

    border-radius: 12px;

    background: #fff;

    color:
        var(--shop-navy);
}

.shop-share-options {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 9px;
}

.shop-share-options a,
.shop-share-options button {
    min-height: 85px;

    padding:
        12px
        8px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border: 0;

    border-radius: 15px;

    color: #fff;

    font-size: 10px;
    font-weight: 900;
}

.shop-share-options i {
    font-size: 24px;
}

.shop-share-options .whatsapp {
    background:
        #159957;
}

.shop-share-options .telegram {
    background:
        #229ed9;
}

.shop-share-options .facebook {
    background:
        #1877f2;
}

.shop-share-options .copy {
    background:
        var(--shop-navy);
}


/* ==========================================================================
   24. TOAST
   ========================================================================== */

.shop-toast {
    position: fixed;

    left: 50%;
    bottom: 30px;

    z-index: 2500;

    min-width: 280px;
    max-width:
        calc(100% - 28px);

    padding:
        13px
        17px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    transform:
        translateX(-50%);

    border-radius: 14px;

    background:
        var(--shop-navy);

    color: #fff;

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, .20);

    font-size: 12px;
    font-weight: 800;
}

.shop-toast i {
    color:
        #5eead4;

    font-size: 17px;
}


/* ==========================================================================
   25. NAVIGATION MOBILE
   ========================================================================== */

.shop-mobile-nav {
    display: none;
}


/* ==========================================================================
   26. ÉCRANS ≤ 1300px
   ========================================================================== */

@media (max-width: 1300px) {

    .shop-header-row {
        grid-template-columns:
            auto
            minmax(260px, 1fr)
            auto;
    }

    .shop-brand-text small {
        display: none;
    }

    .shop-category-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .shop-product-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}


/* ==========================================================================
   27. TABLETTE ≤ 1050px
   ========================================================================== */

@media (max-width: 1050px) {

    .shop-container {
        width:
            calc(100% - 36px);
    }

    .shop-header-row {
        min-height: auto;

        padding:
            12px
            0;

        grid-template-columns:
            auto
            1fr;

        gap: 12px;
    }

    .shop-search-shell {
        grid-column:
            1 / -1;

        grid-row: 2;
    }

    .shop-header-actions {
        justify-self: end;
    }

    .shop-hero {
        grid-template-columns:
            1fr;

        padding:
            44px;
    }

    .shop-hero-panel {
        max-width: 680px;
    }

    .shop-section-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .shop-section-heading > p {
        text-align: left;
    }

    .shop-category-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .shop-other-category-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .shop-product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .shop-commercial-trust {
        grid-template-columns: 1fr;
    }

    .shop-footer {
        grid-template-columns:
            1fr
            auto;
    }

    .shop-footer-copy {
        grid-column:
            1 / -1;
    }
}


/* ==========================================================================
   28. GSM ≤ 700px
   ========================================================================== */

@media (max-width: 700px) {

    html {
        scroll-padding-top: 20px;
    }

    body {
        padding-bottom: 82px;
    }

    .shop-container {
        width:
            calc(100% - 20px);
    }


    /* HEADER */

    .shop-header {
        position: relative;
    }

    .shop-header-row {
        padding:
            11px
            0
            13px;

        display: grid;

        grid-template-columns:
            1fr
            auto;

        gap: 10px;
    }

    .shop-brand-logo {
        width: 44px;
        height: 44px;

        flex-basis: 44px;

        border-radius: 13px;

        font-size: 22px;
    }

    .shop-brand-text strong {
        font-size: 13px;
    }

    .shop-brand-text small {
        display: none;
    }

    .shop-header-actions {
        gap: 6px;
    }

    .shop-header-btn {
        width: 44px;
        height: 44px;

        min-height: 44px;

        padding: 0;
    }

    .shop-header-btn span {
        display: none;
    }


    /* RECHERCHE */

    .shop-search-shell {
        grid-column:
            1 / -1;
    }

    .shop-main-search {
        min-height: 50px;

        grid-template-columns:
            43px
            minmax(0, 1fr)
            auto;

        border-radius: 15px;
    }

    .shop-main-search input {
        font-size: 14px;
    }

    .shop-search-submit {
        width: 42px;
        height: 42px;

        min-height: 42px;

        padding: 0;
    }

    .shop-search-submit span {
        display: none;
    }

    .shop-search-clear {
        display: none;
    }

    .shop-search-suggestions {
        position: absolute;

        left: 0;
        right: 0;

        max-height:
            67vh;

        border-radius: 17px;
    }

    .search-result-item {
        padding: 10px;
    }

    .search-result-photo {
        width: 48px;
        height: 48px;

        flex-basis: 48px;
    }

    .search-result-price {
        max-width: 110px;

        font-size: 11px;
    }


    /* HERO */

    .shop-hero {
        min-height: 0;

        margin-top: 14px;

        padding:
            31px
            22px;

        gap: 28px;

        border-radius: 23px;
    }

    .shop-hero-kicker {
        margin-bottom: 16px;

        padding:
            8px
            10px;

        font-size: 9px;
    }

    .shop-hero h1 {
        font-size: 34px;

        line-height: 1.06;

        letter-spacing: -.9px;
    }

    .shop-hero-description {
        margin-top: 17px;

        font-size: 15px;

        line-height: 1.65;
    }

    .shop-hero-actions {
        margin-top: 22px;

        display: grid;

        grid-template-columns:
            1fr
            1fr;
    }

    .shop-hero-actions .btn {
        min-height: 48px;

        padding:
            11px
            10px;

        font-size: 11px;
    }

    .shop-hero-trust {
        display: none;
    }

    .shop-hero-panel {
        padding: 21px;

        border-radius: 20px;
    }

    .shop-panel-icon {
        width: 52px;
        height: 52px;

        margin-bottom: 15px;

        border-radius: 15px;

        font-size: 23px;
    }

    .shop-hero-panel h2 {
        font-size: 22px;
    }

    .shop-hero-panel > p {
        font-size: 12px;
    }

    .shop-stats {
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }

    .shop-stats strong {
        font-size: 20px;
    }


    /* ENTREPRISE */

    .shop-company-banner {
        margin-top: 14px;

        padding: 18px;

        align-items: flex-start;

        flex-direction: column;

        border-radius: 18px;
    }

    .shop-company-avatar {
        width: 52px;
        height: 52px;

        flex-basis: 52px;

        border-radius: 15px;

        font-size: 21px;
    }

    .shop-company-banner h2 {
        font-size: 20px;
    }

    .shop-company-banner .btn {
        width: 100%;
    }


    /* RECHERCHE MODE */

    .shop-search-mode {
        margin-top: 14px;

        padding:
            24px
            19px;

        align-items: flex-start;

        flex-direction: column;

        border-radius: 19px;
    }

    .shop-search-mode h1 {
        font-size: 29px;
    }

    .shop-search-mode p {
        font-size: 13px;
    }

    .shop-search-mode .btn {
        width: 100%;
    }


    /* CATEGORIES */

    .shop-categories-section {
        margin-top: 52px;
    }

    .shop-section-heading {
        margin-bottom: 20px;

        gap: 10px;
    }

    .shop-section-heading h2 {
        font-size: 30px;
    }

    .shop-section-heading > p {
        font-size: 13px;

        line-height: 1.6;
    }

    .shop-category-grid {
        grid-template-columns:
            1fr
            1fr;

        gap: 9px;
    }

    .shop-category-card {
        min-height: 124px;

        padding: 15px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;

        gap: 10px;

        border-radius: 17px;
    }

    .shop-category-icon {
        width: 44px;
        height: 44px;

        border-radius: 13px;

        font-size: 20px;
    }

    .shop-category-content strong {
        font-size: 13px;
    }

    .shop-category-content span {
        font-size: 10px;
    }

    .shop-category-arrow {
        display: none;
    }

    .shop-other-category-grid {
        grid-template-columns:
            1fr
            1fr;
    }

    .shop-other-category-grid a {
        min-height: 44px;

        font-size: 10px;
    }

    .shop-subcategories {
        overflow-x: auto;

        flex-wrap: nowrap;

        padding: 11px;

        scrollbar-width: none;
    }

    .shop-subcategories::-webkit-scrollbar {
        display: none;
    }

    .shop-subcategories a {
        flex:
            0
            0
            auto;
    }


    /* FILTRES */

    .shop-filters-section {
        margin-top: 35px;
    }

    .shop-filter-bar {
        padding: 10px;

        grid-template-columns:
            1fr
            1fr;

        gap: 8px;

        border-radius: 17px;
    }

    .shop-filter-field {
        min-height: 58px;

        padding:
            8px
            10px;
    }

    .shop-filter-field select {
        font-size: 11px;
    }

    .shop-filter-submit {
        grid-column:
            1 / -1;

        min-height: 46px;
    }

    .shop-active-filters {
        overflow-x: auto;

        flex-wrap: nowrap;

        scrollbar-width: none;
    }

    .shop-active-filters::-webkit-scrollbar {
        display: none;
    }

    .shop-active-filters span,
    .shop-active-filters a {
        flex:
            0
            0
            auto;
    }


    /* RESULTATS */

    .shop-results-heading {
        margin:
            31px
            0
            16px;

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }

    .shop-results-heading h2 {
        font-size: 27px;
    }

    .shop-results-heading p {
        font-size: 12px;
    }


    /* PRODUITS */

    .shop-product-grid {
        grid-template-columns:
            1fr;

        gap: 14px;
    }

    .shop-product-card {
        border-radius: 19px;
    }

    .shop-product-media {
        aspect-ratio:
            16 / 10;
    }

    .shop-offer-badge,
    .shop-stock-badge,
    .shop-product-category {
        font-size: 8px;
    }

    .shop-product-body {
        padding: 16px;
    }

    .shop-product-title {
        font-size: 18px;
    }

    .shop-product-description {
        font-size: 11px;
    }

    .shop-product-price strong {
        font-size: 23px;
    }

    .shop-product-actions {
        grid-template-columns:
            minmax(0, 1fr)
            42px
            42px;
    }

    .shop-product-view,
    .shop-share-button,
    .shop-company-button {
        min-height: 42px;
    }

    .shop-share-button,
    .shop-company-button {
        width: 42px;
        height: 42px;
    }


    /* EMPTY */

    .shop-empty-state {
        padding:
            50px
            20px;
    }

    .shop-empty-state h2 {
        font-size: 27px;
    }

    .shop-empty-state p {
        font-size: 13px;
    }

    .shop-empty-actions {
        display: grid;
    }


    /* TRUST */

    .shop-commercial-trust {
        margin-top: 48px;

        padding:
            24px
            18px;

        gap: 15px;

        border-radius: 21px;
    }


    /* FOOTER */

    .shop-footer {
        margin-top: 42px;

        padding-bottom: 22px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 17px;
    }

    .shop-footer-links {
        flex-wrap: wrap;
    }


    /* PARTAGE */

    .shop-share-sheet {
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;

        padding:
            17px
            17px
            calc(
                20px + env(safe-area-inset-bottom)
            );

        border-radius:
            25px
            25px
            0
            0;

        transform:
            translateY(
                calc(100% + 30px)
            );
    }

    .shop-share-sheet.is-open {
        transform:
            translateY(0);
    }

    .shop-share-heading h2 {
        font-size: 20px;
    }

    .shop-share-options {
        grid-template-columns:
            repeat(
                4,
                1fr
            );

        gap: 7px;
    }

    .shop-share-options a,
    .shop-share-options button {
        min-height: 78px;

        font-size: 9px;
    }

    .shop-share-options i {
        font-size: 22px;
    }


    /* TOAST */

    .shop-toast {
        bottom: 86px;

        min-width: 0;

        width:
            calc(100% - 28px);
    }


    /* MOBILE NAV */

    .shop-mobile-nav {
        position: fixed;

        left: 10px;
        right: 10px;
        bottom:
            calc(
                9px + env(safe-area-inset-bottom)
            );

        z-index: 1700;

        min-height: 62px;

        padding:
            7px;

        display: grid;

        grid-template-columns:
            repeat(
                4,
                1fr
            );

        gap: 4px;

        border:
            1px solid
            rgba(255, 255, 255, .10);

        border-radius: 19px;

        background:
            rgba(
                6,
                20,
                38,
                .96
            );

        backdrop-filter:
            blur(15px);

        box-shadow:
            0 18px 45px
            rgba(0, 0, 0, .22);
    }

    .shop-mobile-nav a,
    .shop-mobile-nav button {
        min-width: 0;

        padding:
            7px
            3px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 4px;

        border: 0;

        border-radius: 13px;

        background: transparent;

        color:
            rgba(255, 255, 255, .63);

        font-size: 9px;
        font-weight: 800;
    }

    .shop-mobile-nav i {
        font-size: 18px;
    }

    .shop-mobile-nav a.is-active {
        background:
            rgba(23, 105, 255, .18);

        color: #fff;
    }
}


/* ==========================================================================
   29. PETIT GSM ≤ 390px
   ========================================================================== */

@media (max-width: 390px) {

    .shop-brand-text strong {
        font-size: 12px;
    }

    .shop-hero h1 {
        font-size: 31px;
    }

    .shop-hero-actions {
        grid-template-columns: 1fr;
    }

    .shop-category-card {
        min-height: 116px;

        padding: 13px;
    }

    .shop-category-content strong {
        font-size: 12px;
    }

    .shop-other-category-grid {
        grid-template-columns: 1fr;
    }

    .shop-filter-bar {
        grid-template-columns: 1fr;
    }

    .shop-filter-submit {
        grid-column: auto;
    }

    .shop-share-options {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }
}


/* ==========================================================================
   30. ACCESSIBILITÉ
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline:
        3px solid
        rgba(23, 105, 255, .34);

    outline-offset: 3px;
}


/* ==========================================================================
   31. RÉDUCTION DES ANIMATIONS
   ========================================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }
}