/* V10.4.1 SAFE CSS : sélecteurs Elementor supprimés pour ne pas casser le CSS personnalisé du site. */
/* ============================================================
   ART AVATAR GENERATOR · V10 CLEAN UI
   Nettoyage complet :
   - une seule couche CSS
   - fond ciel
   - fenêtres glass
   - boutons style dress-up game
   - lueur interne sur sélection
   - responsive desktop/tablette/mobile
============================================================ */

.artav-wrap{
    --ink:#211426;
    --outline:#5b4a63;
    --shadow:rgba(90,74,100,.45);
    --shadow-soft:rgba(35,22,42,.16);
    --pink-1:#fffafd;
    --pink-2:#ffa7e2;
    --pink-3:#fffafd;
    --pink-4:#fffafd;
    --lilac:#d9d2ff;
    --sky:#bfe7ff;
    --glass:rgba(255,255,255,.18);
    --pixel:"Afacad", Arial, sans-serif;

    position:relative;
    isolation:isolate;
    overflow:visible;
    width:100%;
    max-width:none;
    margin:0 auto;
    padding:clamp(14px,3vw,32px);
    color:var(--ink);
    font-family:"Afacad";
    font-size: 12px;
    font-weight: 700;
    background:
        linear-gradient(180deg, rgba(255, 0, 140, 0.18), rgba(120,190,255,.14)),
        linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0));
}

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

.artav-header,
.artav-logo-img,
.artav-baseline,
#artav-logo-fallback{
    display:none !important;
}

.artav-toast{
    position:fixed;
    bottom:24px;
    left:50%;
    z-index:99999;
    transform:translateX(-50%) translateY(16px);
    opacity:0;
    pointer-events:none;
    padding:11px 22px;
    border-radius:8px;
    border:3px solid var(--outline);
    background:linear-gradient(180deg,#ffa7e2,#ffa7e2);
    color:var(--ink);
    font-family:"Afacad";
    font-size:15px;
    font-weight:400;
    box-shadow:6px 6px 0 var(--shadow);
    transition:opacity .25s, transform .25s;
}

.artav-toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* ============================================================
   LAYOUT
============================================================ */

.artav-main-row{
    width:min(100%,1320px);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(300px,420px) minmax(0,1fr);
    gap:clamp(18px,3vw,30px);
    align-items:start;
}

.artav-left-col{
    width:100%;
    max-width:420px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.artav-options-wrap{
    position:relative;
    min-width:0;
    width:100%;
    overflow:visible;
    isolation:isolate;
}

/* ============================================================
   FENÊTRES GLASS
============================================================ */

.artav-canvas-wrap,
.artav-options-inner{
    position:relative;
    overflow:visible;
    isolation:isolate;
    border-radius:10px;
    border:1px solid var(--outline);
    background:
        linear-gradient(180deg, rgba(255,178,224,.95) 0 34px, rgba(255, 255, 255, 0) 34px 100%);
    backdrop-filter:blur(26px) saturate(1.8);
    -webkit-backdrop-filter:blur(26px) saturate(1.8);
    box-shadow:
        10px 10px 5px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
        
}




/* Croix de fenêtre */
.artav-canvas-wrap::after,
.artav-options-wrap::after{
    content:"×";
    position:absolute;
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    z-index:120;
    color:#fff;
    font-family:"Afacad";
    font-size:14px;
    font-weight:900;
    line-height:1;
    background:
        radial-gradient(circle at 28% 18%,rgba(255,255,255,.64),transparent 36%),
        linear-gradient(180deg,#ff8f78 0%,#e53d22 100%);
    border:1px solid rgba(35,22,42,.62);
    border-radius:4px;
}

.artav-canvas-wrap::after{
    top:7px;
    right:9px;
}

.artav-options-wrap::after{
    top:8px;
    right:10px;
}

.artav-canvas-wrap{
    padding:46px 12px 12px;
}

.artav-canvas-shadow,
.artav-options-shadow{
    display:none;
}

.artav-canvas-inner{
    position:relative;
    z-index:5;
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:10px;
    border:2px solid rgba(91,74,99,.45);
    background:
        radial-gradient(circle at 16% 14%,rgba(255,255,255,.76) 0 28px,transparent 29px),
        radial-gradient(circle at 46% 11%,rgba(255,255,255,.62) 0 34px,transparent 35px),
        linear-gradient(135deg,rgba(255,255,255,.84),rgba(255,219,240,.36) 48%,rgba(188,204,255,.42));
}

.artav-canvas-inner::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:.10;
    background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
    mix-blend-mode:soft-light;
}

#artavCanvas{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    display:block;
}

/* ============================================================
   YEUX DÉCORATIFS
============================================================ */

.artav-floating-eye,
.artav-big-eye{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    user-select:none;
}

.artav-floating-eye{
    width:70px;
    height:70px;
    z-index:90;
}

.artav-floating-eye--left{
    left:-40px;
    top:225px;
    transform:rotate(-8deg);
}

.artav-floating-eye--right{
    left:344px;
    top:-100px;
    width:82px;
    height:82px;
    transform:rotate(9deg);
}

.artav-big-eye{
    right:155px;
    top:-54px;
    width:106px;
    height:106px;
    z-index:9999;
}

.artav-eye-orbit,
.artav-eye-pupil{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:contain;
}

.artav-eye-pupil{
    left:50%;
    top:50%;
    width:62%;
    height:62%;
    transform:translate(-50%,-50%);
    will-change:transform;
}

/* ============================================================
   BOUTONS NAVIGATION · STYLE SCREENSHOT
============================================================ */

.artav-nav-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    padding:12px;
    border:1px solid var(--outline);
      border-color: #7a647e;
    border-radius:10px;
    background:#f7b4e3;
    backdrop-filter:blur(2px) saturate(1.4);
     box-shadow:
          5px 5px 2px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
    -webkit-backdrop-filter:blur(12px) saturate(1.4);
}

.artav-nav-btn{
    all:unset;
    box-sizing:border-box;
    position:relative;
    width:78px;
    height:64px;
    cursor:pointer;
    flex:0 0 auto;
}

.artav-nav-btn-face{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    border:1px solid var(--outline);
    border-color: #f17ace;
    background:
        linear-gradient(to bottom,#ffd1ea 0%,#ffd1ea 70%,#ffd1ea 100%);
    box-shadow:
          2px 2px 2px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
    overflow:hidden;
}


.artav-nav-btn:hover .artav-nav-btn-face{
    transform:translateY(-2px);
    filter:brightness(1.03) saturate(1.05);
}

.artav-nav-btn:active .artav-nav-btn-face{
    transform:translate(4px,4px);
    box-shadow:
          2px 2px 2px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
}

.artav-nav-btn svg{
    position:relative;
    z-index:2;
    width:26px;
    height:26px;
    fill:none;
    stroke:#f17ace;
    stroke-width:4;
}

/* ============================================================
   PANNEAU OPTIONS
============================================================ */

.artav-options-inner{
    display:grid;
    grid-template-columns:124px minmax(0,1fr);
    min-height:575px;
}

.artav-tabs-vert{
    position:relative;
    z-index:5;
    width:124px;
    min-width:124px;
    margin-top:34px;
    padding:12px 8px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:7px;
    overflow-y:auto;
    border-right:1px solid rgba(91,74,99,.45);
    background:rgba(255,205,235,.22);
}

.artav-tabs-vert::-webkit-scrollbar{
    width:0;
    height:0;
}

.artav-tab-btn{
    all:unset;
    box-sizing:border-box;
    min-height:48px;
    width:100%;
    cursor:pointer;
    display:grid;
    grid-template-columns:22px 1fr;
    align-items:center;
    gap:6px;
    padding:6px 7px;
    border-radius:8px;
    text-align:left;
    font-family:"Afacad";
    font-size:12px;
    font-weight:400; /* Regular */
    text-align: center;
    line-height:1.05;
    color:var(--ink);
    background:rgba(255,255,255,.35);
    border:1px solid transparent;
    border-color:#7a647e;
    transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.artav-tab-btn svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    fill:none;
    stroke-width:2.5;
    justify-self:center;
}

.artav-tab-icon{
    width:18px;
    height:18px;
    display:block;
    justify-self:center;
    flex:0 0 18px;
    background:currentColor;
    -webkit-mask:var(--artav-tab-icon) center / contain no-repeat;
    mask:var(--artav-tab-icon) center / contain no-repeat;
}

.artav-tab-icon--empty{
    background:transparent;
}

.artav-tab-btn:hover{
    background:rgba(255,235,248,.72);
}

.artav-tab-btn.active{
    background: #ffd1ea;
    border-color:var(--outline);
}

.artav-content-panel{
    position:relative;
    z-index:5;
    min-width:0;
    display:flex;
    flex-direction:column;
    margin-top:34px;
    padding:22px;
    background:transparent;
}

.artav-cat-title{
    width:fit-content;
    margin:0 0 14px;
    padding:6px 12px;
    color:var(--ink);
    font-family:"Afacad";
    font-size:24px;
    font-weight:600;
    color : #f17ace;
    text-align: RIGHT;
    line-height:1;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:16px;
    padding:9px 10px;
    border-radius:10px;
    border:1px solid var(--outline);
    border-color : #f17ace;
    background:#ffd1ea;
   
}

.artav-cat-title::before,
.artav-content-panel::after{
    display:none !important;
    content:none !important;
}

/* ============================================================
   PALETTES
============================================================ */

.artav-palette-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:16px;
    padding:9px 10px;
    border-radius:10px;
    border:1px solid var(--outline);
    background:rgba(255,245,251,.76);
    box-shadow:
        3px 5px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
}

.artav-palette-label{
    padding:3px 6px;
    font-family:"Afacad";
    font-size:12px;
    font-weight:500;
    color:var(--ink);
    line-height:1;
}

.artav-color-swatch{
    all:unset;
    width:27px;
    height:27px;
    border-radius:6px;
    border:2px solid rgba(91,74,99,.78);
    cursor:pointer;
    position:relative;
    box-shadow:
        2px 2px 5px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
    transition:transform .12s ease, box-shadow .12s ease;
}

.artav-color-swatch:hover{
    transform:scale(1.08);
}

.artav-color-swatch:active,
.artav-color-swatch.active:active{
    transform:scale(1.14);
}

.artav-color-swatch.active{
    transform:scale(1.14);
    outline:none;
    box-shadow:
        
        inset 0 0 0 3px rgba(255,150,215,.95),
        inset 0 0 22px rgba(255,150,215,.65),
        inset 0px 0px 0 rgb(0, 0, 0);
}

/* ============================================================
   CARTES OPTIONS
============================================================ */

.artav-options-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
    gap:13px;
    overflow-y:auto;
    overflow-x:visible;
    max-height:335px;
    padding:5px 7px 15px 5px;
    background:transparent;
}

.artav-options-grid::-webkit-scrollbar{
    width:12px;
}

.artav-options-grid::-webkit-scrollbar-track{
    background:rgba(255,245,251,.5);
    border:1px solid rgba(91,74,99,.25);
}

.artav-options-grid::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#ffa7e2,#ffa7e2);
    border:1px solid rgba(91,74,99,.35);
}

.artav-opt-card{
    all:unset;
    box-sizing:border-box;
    position:relative;
    aspect-ratio:.92/1;
    cursor:pointer;
    display:block;
    overflow:visible;
}

.artav-opt-card-shadow{
    display:none;
}

.artav-opt-card-face{
    position:absolute;
    inset:0;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:7px;
    overflow:hidden;
    border-radius:7px;
    border:1px solid var(--outline);
    background:
        radial-gradient(circle at 24% 14%,rgba(255,255,255,.98),transparent 32%),
        linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,235,248,.62));
    box-shadow:
        2px 2px 2px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
    transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.artav-opt-card-face::after{
    display:none !important;
    content:none !important;
}

.artav-opt-card:hover .artav-opt-card-face{
    transform:translate(-1px,-1px);
    box-shadow:
         2px 2px 2px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
}

.artav-opt-card:active .artav-opt-card-face{
    transform:translate(2px,2px);
}

.artav-opt-card.active .artav-opt-card-face{
    box-shadow:
        inset 0 0 0 3px rgba(255,150,215,.95),
        inset 0 0 22px rgba(255,150,215,.65),
          2px 2px 2px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
}

.artav-opt-card img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:none;
}

/* ============================================================
   ACTIONS
============================================================ */

.artav-actions-row{
    display:flex;
    gap:12px;
    margin-top:auto;
    padding-top:17px;
}

.artav-action-btn{
    all:unset;
    box-sizing:border-box;
    position:relative;
    flex:1;
    height:64px;
    cursor:pointer;
    display:inline-block;
}

.artav-action-btn-face{
    position:absolute;
    inset:0;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:22px;
    border:4px solid var(--outline);
    border-color : #f17ace;
    background: #ffd1ea;
    color:#f17ace;
    font-family:"Afacad";
    font-size:12px;
    font-weight:900;
    Color : #f17ace;
    letter-spacing:-.02em;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.9),
        12px 12px 0 var(--shadow);
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
    overflow:hidden;
}


.artav-action-btn--primary .artav-action-btn-face{
    background:#f17ace;
    font-family:"Afacad";
    font-size:12px;
    font-weight:900;
    Color : #f17ace;
}

.artav-action-btn:hover .artav-action-btn-face{
    transform:translateY(-2px);
    filter:brightness(1.03) saturate(1.05);
}

.artav-action-btn:active .artav-action-btn-face{
    transform:translate(4px,4px);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.75),
        6px 6px 0 rgba(90,74,100,.35);
}

.artav-action-btn svg{
    position:relative;
    z-index:2;
    width:16px;
    height:16px;
    fill:none;
    stroke:#f17ace;
    stroke-width:2.8;
}

.artav-action-btn-face{
    position:absolute;
}

.artav-action-btn-face > *{
    position:relative;
    z-index:2;
}

/* ============================================================
   DEBUG
============================================================ */

.artav-debug-banner{
    display:none !important;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width:1180px){
    .artav-main-row{
        grid-template-columns:minmax(300px,380px) minmax(0,1fr);
        gap:22px;
    }

    .artav-left-col{
        max-width:380px;
    }

    .artav-nav-btn{
        width:70px;
        height:58px;
    }

    .artav-nav-btn svg{
        width:24px;
        height:24px;
    }
}

@media (max-width:960px){
    .artav-wrap{
        padding:18px;
    }

    .artav-main-row{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:22px;
    }

    .artav-left-col,
    .artav-options-wrap{
        width:100%;
        max-width:620px;
    }

    .artav-options-inner{
        display:flex;
        flex-direction:column;
        min-height:auto;
    }

    .artav-tabs-vert{
        width:100%;
        min-width:0;
        margin-top:34px;
        flex-direction:row;
        overflow-x:auto;
        overflow-y:hidden;
        border-right:none;
        border-bottom:2px solid rgba(91,74,99,.45);
        padding:10px;
        gap:8px;
        -webkit-overflow-scrolling:touch;
    }

    .artav-tab-btn{
        min-width:104px;
        min-height:46px;
        flex-shrink:0;
        font-size:8.5px;
    }

    .artav-content-panel{
        margin-top:0;
        padding:18px;
    }

    .artav-options-grid{
        max-height:none;
        grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
    }

    .artav-floating-eye,
    .artav-big-eye{
        display:none;
    }

    .artav-actions-row{
        flex-direction:row;
    }
}

@media (max-width:640px){
    .artav-wrap{
        padding:12px;
    }

    .artav-left-col,
    .artav-options-wrap{
        max-width:100%;
    }

    .artav-canvas-wrap{
        padding:44px 10px 10px;
        border-radius:14px;
    }

    .artav-options-inner{
        border-radius:14px;
    }

    .artav-nav-row{
        gap:7px;
        padding:10px;
    }

    .artav-nav-btn{
        width:58px;
        height:50px;
    }

    .artav-nav-btn-face{
        border-width:3px;
        border-radius:14px;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,.85),
            6px 6px 0 var(--shadow);
    }

    .artav-nav-btn svg{
        width:21px;
        height:21px;
    }

    .artav-tab-btn{
        min-width:96px;
        min-height:44px;
        font-size:8px;
    }

    .artav-cat-title{
        font-size:24px;
        margin-bottom:12px;
    }

    .artav-palette-row{
        gap:7px;
        padding:9px;
    }

    .artav-color-swatch{
        width:25px;
        height:25px;
    }

    .artav-options-grid{
        grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
        gap:11px;
        padding:6px 4px 12px;
    }

    .artav-actions-row{
        flex-direction:column;
        gap:10px;
    }

    .artav-action-btn{
        width:100%;
        height:56px;
    }

    .artav-action-btn-face{
        border-width:3px;
        border-radius:16px;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,.9),
            7px 7px 0 var(--shadow);
    }
}

@media (max-width:420px){
    .artav-wrap{
        padding:10px;
    }

    .artav-nav-btn{
        width:52px;
        height:46px;
    }

    .artav-tabs-vert{
        padding:8px;
    }

    .artav-tab-btn{
        min-width:88px;
        min-height:42px;
        grid-template-columns:18px 1fr;
        padding:6px;
    }

    .artav-tab-btn svg,
    .artav-tab-icon{
        width:16px;
        height:16px;
        flex-basis:16px;
    }

    .artav-content-panel{
        padding:14px;
    }

    .artav-options-grid{
        grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
        gap:9px;
    }

    .artav-cat-title{
        font-size:22px;
    }
}

/* ============================================================
   V10.1 · COMPACT BUTTONS + USAGE WINDOW + JPG EXPORT UI
============================================================ */

/* Fond mieux positionné */
.artav-wrap{
    background:
        linear-gradient(180deg, rgba(255, 0, 140, 0.16), rgba(120,190,255,.12)),
        linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0)) !important;
    background-attachment: scroll !important;
}

/* Couleur contour plus douce, plus de contour noir */

/* Fenêtres : contour plus doux, pas noir */
.artav-canvas-wrap,
.artav-options-inner,
.artav-palette-row,

.artav-tab-btn.active,
.artav-opt-card-face{
    border-color:var(--outline) !important;
}

/* Boutons navigation plus petits pour tenir sur une ligne */
.artav-nav-row{
    gap:7px !important;
    padding:10px !important;
}

.artav-nav-btn{
    width:50px !important;
    height:42px !important;
}

.artav-nav-btn-face{
    border-width:2px !important;
    border-radius:10px !important;
    box-shadow:
        inset 0 0px 0 rgb(0, 0, 0),
        2px 2px 0 var(--shadow) !important;
}

.artav-nav-btn svg{
    width:19px !important;
    height:19px !important;
    stroke-width:3.6 !important;
}

.artav-nav-btn:hover .artav-nav-btn-face{
    transform:translateY(-1px) !important;
}



/* Boutons action : ombre plus petite, contour doux */
.artav-action-btn{
    height:54px !important;
}

.artav-action-btn-face{
    border-width:2px !important;
    border-radius:16px !important;
    box-shadow:
          2px 2px 2px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
}

.artav-action-btn:active .artav-action-btn-face{
    transform:translate(2px,2px) !important;
    box-shadow:
          2px 2px 2px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
}

/* Cartes et onglets : ombres plus petites */
.artav-opt-card-face{
    border-width:1px !important;
    box-shadow:
        2px 2px 2px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
}

.artav-opt-card:hover .artav-opt-card-face{
    box-shadow:
        inset 0 0 0 2px rgba(255,210,234,.75),
        inset 0 0 14px rgba(255,170,220,.38),
         2px 2px 2px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
}

.artav-opt-card.active .artav-opt-card-face{
    box-shadow:
        inset 0 0 0 3px rgba(255,150,215,.95),
        inset 0 0 22px rgba(255,150,215,.65),
      2px 2px 2px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
}

.artav-tab-btn.active{
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.55),
        inset 0 0 14px rgba(255,170,220,.45) !important;
}

.artav-palette-row{
    box-shadow:     
        3px 3px 5px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
}

.artav-color-swatch{
    box-shadow:
        2px 2px 5px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
}

/* Yeux au-dessus des bords des fenêtres */
.artav-floating-eye,
.artav-big-eye{
    z-index:99999 !important;
}

/* Œil gauche, sur la croix rouge à gauche du canvas */
.artav-floating-eye--left{
    left:73px !important;
    top:500px !important;
}

/* Œil au-dessus du canvas, sur la croix rouge */
.artav-floating-eye--right{
    left:370px !important;
    top:60px !important;
}

/* Gros œil sur la croix rouge du panneau de droite */
.artav-big-eye{
    top:-45px !important;
    right:155px !important;
}

.artav-eye-orbit,
.artav-eye-pupil{
    z-index:1000000 !important;
}

/* Les fenêtres restent sous les yeux */
.artav-canvas-wrap,
.artav-options-inner{
    z-index:1 !important;
}

/* Nouvelle fenêtre règles d’utilisation */
.artav-usage-window{
    position:relative;
    margin-top:4px;
    padding:42px 14px 14px;
    border-radius:10px;
    border:1px solid var(--outline);
    background:
        linear-gradient(180deg, rgba(255,178,224,.95) 0 34px, rgba(255, 255, 255, 0) 34px 100%);
    backdrop-filter:blur(18px) saturate(1.55);
    -webkit-backdrop-filter:blur(18px) saturate(1.55);
     box-shadow:
        5px 5px 5px var(--shadow),
        inset 0px 0px 0 rgb(0, 0, 0);
    color:#7a647e;
     font-size:18px;
    font-weight:400; /* Regular */
    line-height:1.05;
}


.artav-usage-window::after{
    content:"×";
    position:absolute;
    top:7px;
    right:9px;
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    color:#FFFFFF;
    font-family:"Afacad";
    font-size:14px;
    font-weight:800;
    line-height:1;
    background:
        radial-gradient(circle at 28% 18%,rgba(255, 255, 255, 0),transparent 36%),
        linear-gradient(180deg,#ff8f78 0%,#e53d22 100%);
    border:1px solid rgba(122,100,127,.62);
    border-radius:4px;
    
}

.artav-usage-title{
    position:absolute;
    top:10px;
    left:12px;
    z-index:2;
    font-family:"Afacad";
    font-size:16px;
    font-weight:400; /* Regular */
    text-align: center;
    line-height:1.05;
    color:#FFFFFF;
}

.artav-usage-window p{
    position:relative;
    z-index:2;
    margin:0;
    background:rgba(255, 255, 255, 0);
    border-radius:10px;
    padding:10px;
}

/* Responsive : boutons encore plus compacts */
@media (max-width:1180px){
    .artav-nav-btn{
        width:46px !important;
        height:40px !important;
    }
}

@media (max-width:640px){
    .artav-nav-row{
        gap:6px !important;
    }

    .artav-nav-btn{
        width:42px !important;
        height:38px !important;
    }

    .artav-nav-btn-face{
        border-radius:10px !important;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,.78),
            3px 3px 0 var(--shadow) !important;
    }

    .artav-usage-window{
        font-size:11px;
        padding:40px 12px 12px;
    }
}

@media (max-width:420px){
    .artav-nav-btn{
        width:38px !important;
        height:36px !important;
    }

    .artav-nav-btn svg{
        width:16px !important;
        height:16px !important;
    }
}


/* ============================================================
   V10.2 · PREMIUM SKY CARD BACKGROUND
   - fond ciel limité à la zone du générateur
   - grosses marges gauche/droite
   - coins très arrondis
   - meilleur cadrage du ciel
   - effet carte flottante premium
   - responsive
============================================================ */

.artav-wrap{
    --ink:#211426;
    --outline:#7a647f !important;
    --shadow:rgba(122,100,127,.20) !important;

    position:relative !important;
    isolation:isolate !important;
    overflow:visible !important;

    width:calc(100% - 120px) !important;
    max-width:1700px !important;

    margin:48px auto !important;
    padding:clamp(24px, 3.2vw, 44px) !important;

    border-radius:42px !important;

    color:var(--ink) !important;
    font-family:"Afacad" !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,190,226,.14),
            rgba(120,190,255,.08)
        ),
        linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0)) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.48),
        0 24px 70px rgba(35,22,42,.13) !important;
}

/* Voile premium discret au-dessus du ciel */
.artav-wrap::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;

    border-radius:42px !important;

    background:
        radial-gradient(
            circle at 14% 8%,
            rgba(255,255,255,.38),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 10%,
            rgba(255,210,240,.20),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.02)
        ) !important;

    mix-blend-mode:screen !important;
}

/* Tout le générateur passe au-dessus du fond carte */
.artav-main-row,
.artav-floating-eye,
.artav-header{
    position:relative !important;
    z-index:2 !important;
}

/* On garde les yeux décoratifs visibles sur desktop */
.artav-floating-eye,
.artav-big-eye{
    z-index:99999 !important;
}

/* Ajustement du contenu pour respirer dans la carte */
.artav-main-row{
    width:min(100%,1320px) !important;
    margin:0 auto !important;
}

/* Responsive tablette */
@media (max-width:960px){
    .artav-wrap{
        width:calc(100% - 32px) !important;
        margin:18px auto !important;
        padding:18px !important;
        border-radius:28px !important;
        background-position:center 34% !important;
    }

    .artav-wrap::before{
        border-radius:28px !important;
    }
}

/* Responsive mobile */
@media (max-width:640px){
    .artav-wrap{
        width:calc(100% - 20px) !important;
        margin:10px auto !important;
        padding:12px !important;
        border-radius:22px !important;
        background-position:center 30% !important;
    }

    .artav-wrap::before{
        border-radius:22px !important;
    }
}

/* Très petits écrans */
@media (max-width:420px){
    .artav-wrap{
        width:calc(100% - 14px) !important;
        margin:7px auto !important;
        padding:10px !important;
        border-radius:18px !important;
    }

    .artav-wrap::before{
        border-radius:18px !important;
    }
}
/* ============================================================
   TITRES DE FENÊTRES
============================================================ */

/* Fenêtre avatar */
.artav-canvas-wrap::before{
    content:"Aperçu avatar";

    position:absolute;
    top:10px;
    left:12px;

    z-index:200;

    font-family:"Afacad";
      font-size:16px;
    font-weight:400; /* Regular */
    text-align: center;
    line-height:1.05;
     color:#ffffff;
    pointer-events:none;
}

/* Fenêtre personnalisation */
.artav-options-inner::before{
    content:"Personnalisation";

    position:absolute;
    top:10px;
    left:14px;

    z-index:200;

    font-family:"Afacad";
    font-size:18px;
    font-weight:400; /* Regular */
    text-align: center;
    line-height:1.05;
    color:#ffffff;
    pointer-events:none;
    
}



/* ============================================================
   V10.3.4 · COHÉRENCE LANDING PAGE LYUBOV
   - boutons du générateur alignés sur .lyubov-glass-btn / .lyubov-glass-scd
   - effet enfoncement appliqué au bouton complet, pas à sa face interne
   - fond ciel pleine largeur sans espace haut/bas
   - interface agrandie et centrée
============================================================ */

/* ============================= */
/* FOND CIEL PLEINE LARGEUR */
/* ============================= */

.artav-wrap{
    --ink:#211426 !important;
    --outline:#7a647f !important;
    --shadow:rgba(0,0,0,.40) !important;
    --shadow-soft:rgba(0,0,0,.22) !important;

    --lyubov-hot:#f17bce;
    --lyubov-light:#ffd1ea;
    --lyubov-text:#665E61;
    --lyubov-window:rgba(255,245,251,.50);

    width:100vw !important;
    max-width:100vw !important;

    margin-top:0 !important;
    margin-bottom:0 !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;

    padding:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    overflow:visible !important;
    position:relative !important;
    display:block !important;
    isolation:isolate !important;

    color:var(--ink) !important;
    font-family:"Afacad", Arial, sans-serif !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,190,226,.14),
            rgba(120,190,255,.08)
        ),
        linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0)) !important;
}

.artav-wrap::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    border-radius:0 !important;
    background:
        radial-gradient(circle at 14% 8%, rgba(255,255,255,.30), transparent 34%),
        radial-gradient(circle at 88% 10%, rgba(255,210,240,.16), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
    mix-blend-mode:screen !important;
}

/* Le padding est sur le contenu, pas sur le fond ciel */
.artav-main-row{
    width:min(100%,1500px) !important;
    max-width:1500px !important;

    margin:0 auto !important;
    padding:clamp(42px,4vw,76px) clamp(22px,4vw,70px) !important;

    display:grid !important;
    grid-template-columns:minmax(390px,520px) minmax(0,1fr) !important;
    gap:clamp(28px,3.6vw,56px) !important;
    align-items:start !important;

    box-sizing:border-box !important;
    overflow:visible !important;
    position:relative !important;
    z-index:2 !important;
}

/* ============================= */
/* INTERFACE AGRANDIE */
/* ============================= */

.artav-left-col{
    width:100% !important;
    max-width:520px !important;
    gap:18px !important;
    overflow:visible !important;
}

.artav-canvas-wrap{
    padding:46px 14px 14px !important;
    overflow:visible !important;
}

.artav-options-wrap{
    width:100% !important;
    max-width:none !important;
    overflow:visible !important;
}

.artav-options-inner{
    min-height:690px !important;
    grid-template-columns:150px minmax(0,1fr) !important;
    overflow:visible !important;
}

.artav-tabs-vert{
    width:150px !important;
    min-width:150px !important;
    gap:9px !important;
    padding:14px 10px !important;
}

.artav-tab-btn{
    min-height:54px !important;
    font-size:12px !important;
}

.artav-content-panel{
    padding:30px !important;
    overflow:visible !important;
}

.artav-cat-title{
    font-size:28px !important;
}

.artav-options-grid{
    grid-template-columns:repeat(auto-fill,minmax(108px,1fr)) !important;
    gap:16px !important;
    max-height:430px !important;
    padding:6px 10px 18px 6px !important;
    overflow-y:auto !important;
    overflow-x:visible !important;
}

/* ============================= */
/* FENÊTRES STYLE LANDING */
/* ============================= */

.artav-canvas-wrap,
.artav-options-inner,
.artav-usage-window{
    border:1px solid rgba(110,90,114,1) !important;
    border-radius:10px !important;
    background:
        linear-gradient(180deg, var(--lyubov-hot) 0 34px, rgba(255,245,251,.50) 34px 100%) !important;

    backdrop-filter:blur(30px) saturate(130%) !important;
    -webkit-backdrop-filter:blur(30px) saturate(130%) !important;

    box-shadow:
        6px 6px 14px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.65) !important;
}

/* Titres de fenêtres */
.artav-canvas-wrap::before,
.artav-options-inner::before,
.artav-usage-title{
    color:#ffffff !important;
    font-family:"Afacad", Arial, sans-serif !important;
    font-size:14px !important;
    font-weight:600 !important;
    line-height:1.1 !important;
}

/* Croix de fenêtres */
.artav-canvas-wrap::after,
.artav-options-wrap::after,
.artav-usage-window::after{
    width:19px !important;
    height:19px !important;
    display:grid !important;
    place-items:center !important;
    color:#ffffff !important;
    font-family:"Afacad", Arial, sans-serif !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1 !important;
    background:
        linear-gradient(180deg, rgba(254,139,116,1), rgba(234,74,47,1)) !important;
    border:0.3641px solid rgba(110,90,114,1) !important;
    border-radius:4px !important;
    box-shadow:none !important;
}

/* ============================= */
/* BOUTONS : BASE COMMUNE LANDING */
/* ============================= */

/* Le parent du bouton bouge, pas la face interne */
.artav-nav-btn,
.artav-action-btn,
.artav-opt-card,
.artav-tab-btn{
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
    border:none !important;
    overflow:visible !important;

    transform:translate(0,0) !important;
    transition:transform .18s ease !important;

    will-change:transform;
}

/* Supprime les fonds/encarts parasites */
.artav-nav-btn::before,
.artav-nav-btn::after,
.artav-action-btn::before,
.artav-action-btn::after,
.artav-opt-card::before,
.artav-opt-card::after{
    display:none !important;
    content:none !important;
}

.artav-nav-btn:focus,
.artav-nav-btn:focus-visible,
.artav-action-btn:focus,
.artav-action-btn:focus-visible,
.artav-opt-card:focus,
.artav-opt-card:focus-visible,
.artav-tab-btn:focus,
.artav-tab-btn:focus-visible{
    outline:none !important;
    background:transparent !important;
    box-shadow:none !important;
}

/* Les faces gardent le visuel glass, mais ne se déplacent jamais seules */
.artav-nav-btn-face,
.artav-action-btn-face,
.artav-opt-card-face{
    transform:none !important;
    position:absolute !important;
    overflow:hidden !important;

    background-color:rgba(255,209,234,.70) !important;
    border:1px solid var(--lyubov-hot) !important;
    color:var(--lyubov-hot) !important;

    backdrop-filter:blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(12px) saturate(140%) !important;

    box-shadow:5px 5px 10px rgba(0,0,0,.40) !important;

    transition:
        background-color .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

.artav-nav-btn-face::before,
.artav-action-btn-face::before,
.artav-opt-card-face::before,
.artav-tab-btn::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.55) 0%,
        rgba(255,255,255,.18) 35%,
        rgba(255,255,255,.05) 70%,
        rgba(255,255,255,.25) 100%
    ) !important;
}

/* Le contenu reste au-dessus du reflet */
.artav-nav-btn-face > *,
.artav-action-btn-face > *,
.artav-opt-card-face > *,
.artav-tab-btn > *{
    position:relative !important;
    z-index:2 !important;
}

/* Hover / active : même effet que .lyubov-glass-btn */
.artav-nav-btn:hover,
.artav-action-btn:hover,
.artav-opt-card:hover,
.artav-tab-btn:hover{
    transform:translate(3px,3px) !important;
}

.artav-nav-btn:active,
.artav-action-btn:active,
.artav-opt-card:active,
.artav-tab-btn:active{
    transform:translate(5px,5px) !important;
}

.artav-nav-btn:hover .artav-nav-btn-face,
.artav-action-btn:hover .artav-action-btn-face,
.artav-opt-card:hover .artav-opt-card-face,
.artav-tab-btn:hover{
    box-shadow:
        2px 2px 5px rgba(0,0,0,.35),
        inset 2px 2px 5px rgba(102,94,97,.25),
        inset -1px -1px 3px rgba(255,255,255,.45) !important;
    filter:none !important;
}

.artav-nav-btn:active .artav-nav-btn-face,
.artav-action-btn:active .artav-action-btn-face,
.artav-opt-card:active .artav-opt-card-face,
.artav-tab-btn:active{
    box-shadow:
        1px 1px 3px rgba(0,0,0,.30),
        inset 3px 3px 6px rgba(102,94,97,.35),
        inset -2px -2px 4px rgba(255,255,255,.35) !important;
}

/* ============================= */
/* BOUTONS NAVIGATION */
/* ============================= */

.artav-nav-row{
    gap:10px !important;
    padding:12px !important;
    overflow:visible !important;
    background:rgba(255,209,234,.45) !important;
    border:1px solid rgba(110,90,114,1) !important;
    border-radius:10px !important;
    backdrop-filter:blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(12px) saturate(140%) !important;
    box-shadow:
        5px 5px 10px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.65) !important;
}

.artav-nav-btn{
    width:62px !important;
    height:52px !important;
}

.artav-nav-btn-face{
    border-radius:10px !important;
}

.artav-nav-btn svg{
    width:22px !important;
    height:22px !important;
    stroke:var(--lyubov-hot) !important;
    stroke-width:3.6 !important;
}

/* ============================= */
/* ONGLETS CATÉGORIES */
/* ============================= */

.artav-tab-btn{
    position:relative !important;
    overflow:hidden !important;

    background-color:rgba(255,209,234,.70) !important;
    border:1px solid var(--lyubov-hot) !important;
    border-radius:10px !important;

    color:var(--lyubov-text) !important;

    backdrop-filter:blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(12px) saturate(140%) !important;

    box-shadow:5px 5px 10px rgba(0,0,0,.18) !important;
}

.artav-tab-btn svg,
.artav-tab-icon,
.artav-tab-btn span{
    position:relative !important;
    z-index:2 !important;
}

.artav-tab-btn.active{
    background-color:rgba(241,123,206,.70) !important;
    border:1px solid var(--lyubov-light) !important;
    color:#ffffff !important;
    box-shadow:
        inset 0 0 0 3px rgba(255,150,215,.55),
        inset 0 0 20px rgba(255,150,215,.35),
        5px 5px 10px rgba(0,0,0,.22) !important;
}

/* ============================= */
/* CARTES OPTIONS */
/* ============================= */

.artav-opt-card{
    aspect-ratio:.92/1 !important;
}

.artav-opt-card-face{
    border-radius:10px !important;
    padding:7px !important;
    background-color:rgba(255,245,251,.72) !important;
    border:1px solid var(--lyubov-hot) !important;
}

.artav-opt-card.active .artav-opt-card-face{
    background-color:rgba(255,209,234,.78) !important;
    border:2px solid var(--lyubov-hot) !important;
    box-shadow:
        inset 0 0 0 3px rgba(255,150,215,.95),
        inset 0 0 22px rgba(255,150,215,.65),
        5px 5px 10px rgba(0,0,0,.30) !important;
}

.artav-opt-card.active:hover .artav-opt-card-face,
.artav-opt-card.active:active .artav-opt-card-face{
    box-shadow:
        inset 0 0 0 3px rgba(255,150,215,.95),
        inset 0 0 22px rgba(255,150,215,.65),
        2px 2px 5px rgba(0,0,0,.30),
        inset 2px 2px 5px rgba(102,94,97,.20) !important;
}

/* ============================= */
/* BOUTONS ACTIONS */
/* ============================= */

.artav-actions-row{
    gap:16px !important;
    overflow:visible !important;
}

.artav-action-btn{
    height:62px !important;
}

.artav-action-btn-face{
    border-radius:10px !important;
    border:1px solid var(--lyubov-hot) !important;
    background-color:rgba(255,209,234,.70) !important;
    color:#f17ace !important;
    font-family:"Afacad", Arial, sans-serif !important;
    font-size:12px !important;
    font-weight:900 !important;
    letter-spacing:-.02em !important;
}

.artav-action-btn--primary .artav-action-btn-face{
    background-color:rgba(241,123,206,.70) !important;
    border:1px solid var(--lyubov-light) !important;
    color:#ffffff !important;
}

.artav-action-btn svg{
    width:16px !important;
    height:16px !important;
    stroke:currentColor !important;
}

/* ============================= */
/* PALETTES COULEURS */
/* ============================= */

.artav-palette-row{
    background:rgba(255,245,251,.76) !important;
    border:1px solid rgba(110,90,114,1) !important;
    border-radius:10px !important;
    box-shadow:
        5px 5px 10px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.65) !important;
}

.artav-color-swatch{
    box-shadow:
        5px 5px 10px rgba(0,0,0,.22),
        inset 1px 1px 0 rgba(255,255,255,.55) !important;
    transform:translate(0,0) !important;
    transition:transform .18s ease, box-shadow .18s ease !important;
}

.artav-color-swatch:hover{
    transform:translate(3px,3px) scale(1.02) !important;
    box-shadow:
        2px 2px 5px rgba(0,0,0,.28),
        inset 2px 2px 5px rgba(102,94,97,.20),
        inset -1px -1px 3px rgba(255,255,255,.40) !important;
}

.artav-color-swatch:active{
    transform:translate(5px,5px) scale(1.02) !important;
    box-shadow:
        1px 1px 3px rgba(0,0,0,.22),
        inset 3px 3px 6px rgba(102,94,97,.28),
        inset -2px -2px 4px rgba(255,255,255,.32) !important;
}

.artav-color-swatch.active{
    transform:scale(1.10) !important;
    box-shadow:
        inset 0 0 0 3px rgba(255,150,215,.95),
        inset 0 0 22px rgba(255,150,215,.65),
        5px 5px 10px rgba(0,0,0,.20) !important;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width:1180px){
    .artav-main-row{
        grid-template-columns:minmax(340px,450px) minmax(0,1fr) !important;
        max-width:1180px !important;
        gap:30px !important;
    }

    .artav-left-col{
        max-width:450px !important;
    }

    .artav-options-inner{
        grid-template-columns:132px minmax(0,1fr) !important;
        min-height:620px !important;
    }

    .artav-tabs-vert{
        width:132px !important;
        min-width:132px !important;
    }

    .artav-options-grid{
        grid-template-columns:repeat(auto-fill,minmax(92px,1fr)) !important;
        max-height:390px !important;
    }
}

@media (max-width:960px){
    .artav-wrap{
        width:100vw !important;
        max-width:100vw !important;
        margin-top:0 !important;
        margin-bottom:0 !important;
        margin-left:calc(50% - 50vw) !important;
        margin-right:calc(50% - 50vw) !important;
        padding:0 !important;
        border-radius:0 !important;
    }

    .artav-main-row{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        width:100% !important;
        max-width:720px !important;
        margin:0 auto !important;
        padding:26px 18px !important;
        gap:26px !important;
    }

    .artav-left-col,
    .artav-options-wrap{
        width:100% !important;
        max-width:680px !important;
    }

    .artav-options-inner{
        display:flex !important;
        flex-direction:column !important;
        min-height:auto !important;
    }

    .artav-tabs-vert{
        width:100% !important;
        min-width:0 !important;
        flex-direction:row !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
    }
}

@media (max-width:640px){
    .artav-wrap{
        margin-top:0 !important;
        margin-bottom:0 !important;
        padding:0 !important;
    }

    .artav-main-row{
        max-width:100% !important;
        padding:18px 12px !important;
    }

    .artav-canvas-wrap{
        padding:42px 10px 10px !important;
    }

    .artav-nav-btn{
        width:48px !important;
        height:42px !important;
    }

    .artav-nav-btn svg{
        width:18px !important;
        height:18px !important;
    }

    .artav-content-panel{
        padding:16px !important;
    }

    .artav-cat-title{
        font-size:22px !important;
    }

    .artav-options-grid{
        grid-template-columns:repeat(auto-fill,minmax(72px,1fr)) !important;
        gap:10px !important;
        max-height:none !important;
    }

    .artav-action-btn{
        height:56px !important;
    }
}

@media (max-width:420px){
    .artav-main-row{
        padding:14px 10px !important;
    }
}



/* ============================================================
   V10.3.5 · DERNIÈRES CORRECTIONS LANDING/PLUGIN
   - supprime l'espace haut restant autour du ciel
   - boutons de modification toujours sur une seule ligne
   - fenêtre droite étirée à la même hauteur que la colonne gauche
   - fonds affichés comme couleurs + motifs futurs
   - les déplacements/zoom s'appliquent uniquement à l'avatar, jamais au fond
============================================================ */

/* =============================
   SUPPRESSION ESPACE HAUT/BAS
============================= */

.artav-wrap{
    display:block !important;
    width:100vw !important;
    max-width:100vw !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

/* On garde de l'air autour du contenu sans créer de marge externe au ciel. */
.artav-main-row{
    padding-top:clamp(24px,2.4vw,42px) !important;
    padding-bottom:clamp(24px,2.4vw,42px) !important;
    align-items:stretch !important;
}

/* =============================
   HAUTEUR UNIFORME GAUCHE / DROITE
============================= */

.artav-left-col{
    height:100% !important;
}

.artav-options-wrap{
    align-self:stretch !important;
    height:100% !important;
    display:flex !important;
    flex-direction:column !important;
}

.artav-options-inner{
    flex:1 1 auto !important;
    height:100% !important;
    min-height:100% !important;
}

/* Desktop : le panneau de droite s'étire sur la hauteur totale de la colonne gauche. */
@media (min-width:961px){
    .artav-main-row{
        align-items:stretch !important;
    }

    .artav-options-wrap,
    .artav-options-inner{
        align-self:stretch !important;
    }

    .artav-content-panel{
        min-height:0 !important;
    }

    .artav-options-grid{
        flex:1 1 auto !important;
    }
}

/* =============================
   BOUTONS DE MODIFICATION SUR UNE SEULE LIGNE
============================= */

.artav-nav-row{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    padding:10px !important;
    overflow:visible !important;
}

.artav-nav-btn{
    flex:0 0 54px !important;
    width:54px !important;
    min-width:54px !important;
    max-width:54px !important;
    height:46px !important;
}

.artav-nav-btn-face{
    border-radius:10px !important;
}

.artav-nav-btn svg{
    width:20px !important;
    height:20px !important;
}

/* Tablette : toujours une seule ligne. */
@media (max-width:960px){
    .artav-nav-row{
        flex-wrap:nowrap !important;
        gap:7px !important;
        padding:10px !important;
    }

    .artav-nav-btn{
        flex:0 0 52px !important;
        width:52px !important;
        min-width:52px !important;
        max-width:52px !important;
        height:44px !important;
    }
}

/* Mobile : on réduit pour éviter le retour à la ligne. */
@media (max-width:640px){
    .artav-main-row{
        padding-top:18px !important;
        padding-bottom:18px !important;
    }

    .artav-nav-row{
        flex-wrap:nowrap !important;
        gap:5px !important;
        padding:8px !important;
    }

    .artav-nav-btn{
        flex:0 0 39px !important;
        width:39px !important;
        min-width:39px !important;
        max-width:39px !important;
        height:36px !important;
    }

    .artav-nav-btn svg{
        width:16px !important;
        height:16px !important;
    }
}

@media (max-width:420px){
    .artav-main-row{
        padding-top:14px !important;
        padding-bottom:14px !important;
    }

    .artav-nav-row{
        gap:4px !important;
        padding:7px !important;
    }

    .artav-nav-btn{
        flex:0 0 35px !important;
        width:35px !important;
        min-width:35px !important;
        max-width:35px !important;
        height:33px !important;
    }

    .artav-nav-btn svg{
        width:15px !important;
        height:15px !important;
    }
}

/* =============================
   CARTES FONDS : COULEURS / MOTIFS
============================= */

.artav-bg-card .artav-opt-card-face{
    padding:0 !important;
    overflow:hidden !important;
}

.artav-bg-preview{
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:var(--lyubov-text) !important;
    font-family:"Afacad", Arial, sans-serif !important;
    font-size:11px !important;
    font-weight:700 !important;
    text-align:center !important;
    background-size:cover !important;
    background-position:center !important;
}

.artav-bg-preview span{
    position:relative !important;
    z-index:2 !important;
    padding:4px 7px !important;
    border-radius:999px !important;
    background:rgba(255,245,251,.62) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
}

/* Sur la catégorie fond, les cartes sont un peu plus larges pour mieux voir les motifs. */
.artav-options-grid.artav-options-grid--fonds{
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr)) !important;
}

@media (max-width:640px){
    .artav-options-grid.artav-options-grid--fonds{
        grid-template-columns:repeat(auto-fill,minmax(94px,1fr)) !important;
    }
}



/* ============================================================
   V10.3.6 · TRANSPARENT ELEMENTOR BACKGROUND + WINDOW-EDGE EYES
   - le plugin ne dessine plus le fond ciel : tu peux le gérer dans Elementor
   - les yeux décoratifs sont attachés aux bords des fenêtres
============================================================ */

/* =============================
   FOND TRANSPARENT POUR ELEMENTOR
============================= */

.artav-wrap{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    background-image:none !important;
    overflow:visible !important;
}

.artav-wrap::before{
    content:none !important;
    display:none !important;
    background:none !important;
    box-shadow:none !important;
}

/* Le padding reste sur le contenu du générateur : le fond visible sera celui du conteneur Elementor. */
.artav-main-row{
    width:min(100%,1500px) !important;
    max-width:1500px !important;
    margin:0 auto !important;
    padding:clamp(24px,2.8vw,52px) clamp(18px,3.6vw,64px) !important;
    box-sizing:border-box !important;
    overflow:visible !important;
}

/* =============================
   YEUX SUR LE BORD DES FENÊTRES
============================= */

.artav-canvas-wrap,
.artav-options-wrap,
.artav-options-inner{
    position:relative !important;
    overflow:visible !important;
}

.artav-floating-eye,
.artav-big-eye{
    display:flex !important;
    position:absolute !important;
    pointer-events:none !important;
    user-select:none !important;
    z-index:99999 !important;
}

/* Œil accroché au bord gauche de la fenêtre aperçu avatar. */
.artav-canvas-wrap .artav-floating-eye--left{
    width:72px !important;
    height:72px !important;
    left:-42px !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translateY(-50%) rotate(-8deg) !important;
}

/* Œil posé sur le bord haut droit de la fenêtre aperçu avatar. */
.artav-canvas-wrap .artav-floating-eye--right{
    width:82px !important;
    height:82px !important;
    left:auto !important;
    right:34px !important;
    top:-34px !important;
    bottom:auto !important;
    transform:rotate(9deg) !important;
}

/* Gros œil posé sur le bord haut de la fenêtre personnalisation. */
.artav-options-wrap .artav-big-eye{
    width:108px !important;
    height:108px !important;
    left:auto !important;
    right:58px !important;
    top:-42px !important;
    bottom:auto !important;
    transform:rotate(5deg) !important;
}

.artav-eye-orbit,
.artav-eye-pupil{
    position:absolute !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
}

.artav-eye-pupil{
    left:50% !important;
    top:50% !important;
    width:62% !important;
    height:62% !important;
    transform:translate(-50%,-50%);
    will-change:transform;
}

/* Mobile/tablette : on masque les yeux pour éviter qu'ils gênent la lecture. */
@media (max-width:960px){
    .artav-floating-eye,
    .artav-big-eye{
        display:none !important;
    }

    .artav-main-row{
        padding:22px 14px !important;
    }
}

@media (max-width:640px){
    .artav-main-row{
        padding:18px 12px !important;
    }
}

/* ============================================================
   V10.3.7 · CORRECTION FOND ELEMENTOR VISIBLE
   - le plugin reste transparent
   - le conteneur parent Elementor conserve son image/couleur/vidéo de fond
   - aucun reset de background sur le parent Elementor
============================================================ */

.artav-wrap{
    background:transparent !important;
    background-image:none !important;
    background-color:transparent !important;
}

.artav-wrap::before{
    content:none !important;
    display:none !important;
}

/* Les fenêtres restent en glass, mais aucun grand bloc blanc ne doit recouvrir le fond Elementor. */
.artav-main-row,
.artav-left-col,
.artav-options-wrap{
    background:transparent !important;
}

/* ============================================================
   V10.3.12 · BOUTON BRILLANT À DROITE + SÉPARATEUR VERTICAL
   - le bouton reste visuellement identique aux autres boutons
   - un trait vertical sépare les ajustements du bouton brillant
   - l'ensemble séparateur + brillant est poussé tout à droite
   - icône : contour quand désactivé, remplie quand activé
============================================================ */

.artav-nav-separator{
    flex:0 0 auto !important;
    width:1px !important;
    height:30px !important;
    margin-left:auto !important;
    margin-right:2px !important;
    align-self:center !important;
    display:block !important;
    border-radius:999px !important;
    background:rgba(149,106,138,.62) !important;
    box-shadow:
        1px 0 0 rgba(255,255,255,.42),
        0 0 8px rgba(241,123,206,.20) !important;
}

.artav-nav-btn--brillant{
    margin-left:0 !important;
}

.artav-nav-btn--brillant .artav-nav-btn-face{
    color:var(--lyubov-hot) !important;
    background-color:rgba(255,209,234,.70) !important;
    border:1px solid var(--lyubov-hot) !important;
}

/* Icône unique de scintillement */
.artav-nav-btn--brillant svg{
    width:22px !important;
    height:22px !important;
    stroke:currentColor !important;
    fill:none !important;
    stroke-width:2.3 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

/* Désactivé : seulement les contours */
.artav-nav-btn--brillant .artav-sparkle-path{
    fill:transparent !important;
    stroke:currentColor !important;
}

/* Activé : le scintillement est plein */
.artav-nav-btn--brillant.is-active .artav-sparkle-path{
    fill:currentColor !important;
    stroke:currentColor !important;
}

/* L'état actif ne change pas la forme du bouton : seul le pictogramme change. */
.artav-nav-btn--brillant.is-active .artav-nav-btn-face{
    color:var(--lyubov-hot) !important;
    background-color:rgba(255,209,234,.70) !important;
    border:1px solid var(--lyubov-hot) !important;
}

@media (max-width:640px){
    .artav-nav-separator{
        height:24px !important;
        margin-right:1px !important;
    }

    .artav-nav-btn--brillant svg{
        width:18px !important;
        height:18px !important;
    }
}

@media (max-width:420px){
    .artav-nav-separator{
        height:22px !important;
    }

    .artav-nav-btn--brillant svg{
        width:16px !important;
        height:16px !important;
    }
}



/* ============================================================
   V10.3.16 · PATCH FINAL RESPONSIVE + FOND PALETTE
   - réduit les sauts de mise en page
   - rend les colonnes, onglets, boutons et cartes plus fluides
   - harmonise la palette de fond avec les autres catégories
============================================================ */

.artav-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
}

.artav-main-row{
    width:min(100%,1500px) !important;
    max-width:1500px !important;
    grid-template-columns:minmax(300px, min(36vw, 520px)) minmax(0, 1fr) !important;
    gap:clamp(18px, 3vw, 52px) !important;
    padding:clamp(22px, 3vw, 52px) clamp(14px, 4vw, 64px) !important;
}

.artav-left-col,
.artav-options-wrap{
    min-width:0 !important;
}

.artav-canvas-inner{
    width:100% !important;
    max-width:520px !important;
    margin:0 auto !important;
}

.artav-options-inner{
    min-width:0 !important;
    min-height:clamp(560px, 58vw, 720px) !important;
}

.artav-content-panel{
    min-width:0 !important;
}

.artav-tabs-vert{
    scrollbar-width:none !important;
}

.artav-tab-btn span{
    overflow-wrap:anywhere !important;
}

.artav-options-grid{
    grid-template-columns:repeat(auto-fill, minmax(clamp(74px, 8vw, 108px), 1fr)) !important;
    max-height:clamp(300px, 42vw, 430px) !important;
}

.artav-options-grid.artav-options-grid--fonds{
    grid-template-columns:repeat(auto-fill, minmax(clamp(92px, 12vw, 135px), 1fr)) !important;
}

.artav-nav-row{
    width:100% !important;
    min-width:0 !important;
}

@media (max-width:1024px){
    .artav-main-row{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        max-width:760px !important;
        padding:24px 14px !important;
    }

    .artav-left-col,
    .artav-options-wrap{
        width:100% !important;
        max-width:680px !important;
    }

    .artav-options-inner{
        display:flex !important;
        flex-direction:column !important;
        min-height:auto !important;
    }

    .artav-tabs-vert{
        width:100% !important;
        min-width:0 !important;
        display:flex !important;
        flex-direction:row !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        border-right:none !important;
        border-bottom:1px solid rgba(91,74,99,.35) !important;
        padding:10px !important;
    }

    .artav-tab-btn{
        flex:0 0 auto !important;
        width:auto !important;
        min-width:102px !important;
    }

    .artav-content-panel{
        padding:18px !important;
    }

    .artav-options-grid{
        max-height:none !important;
    }
}

@media (max-width:640px){
    .artav-main-row{
        padding:18px 10px !important;
        gap:18px !important;
    }

    .artav-canvas-wrap,
    .artav-options-inner,
    .artav-usage-window,
    .artav-nav-row{
        border-radius:9px !important;
    }

    .artav-canvas-wrap{
        padding:42px 8px 8px !important;
    }

    .artav-nav-row{
        gap:4px !important;
        padding:7px !important;
        justify-content:center !important;
    }

    .artav-nav-btn{
        flex:1 1 32px !important;
        width:auto !important;
        min-width:30px !important;
        max-width:42px !important;
        height:34px !important;
    }

    .artav-nav-btn svg{
        width:15px !important;
        height:15px !important;
    }

    .artav-nav-separator{
        flex:0 0 1px !important;
        margin-left:3px !important;
        margin-right:3px !important;
        height:22px !important;
    }

    .artav-tab-btn{
        min-width:88px !important;
        min-height:42px !important;
        font-size:10px !important;
        grid-template-columns:18px 1fr !important;
    }

    .artav-cat-title{
        font-size:21px !important;
    }

    .artav-palette-row{
        gap:6px !important;
    }

    .artav-color-swatch{
        width:24px !important;
        height:24px !important;
    }

    .artav-options-grid{
        grid-template-columns:repeat(auto-fill, minmax(66px, 1fr)) !important;
        gap:9px !important;
    }

    .artav-actions-row{
        flex-direction:column !important;
    }

    .artav-usage-window{
        font-size:12px !important;
        line-height:1.25 !important;
    }
}

@media (max-width:380px){
    .artav-main-row{
        padding:14px 8px !important;
    }

    .artav-nav-row{
        gap:3px !important;
        padding:6px !important;
    }

    .artav-nav-btn{
        min-width:27px !important;
        max-width:34px !important;
        height:31px !important;
    }

    .artav-nav-btn svg,
    .artav-nav-btn--brillant svg{
        width:13px !important;
        height:13px !important;
    }

    .artav-tab-btn{
        min-width:78px !important;
        font-size:9px !important;
    }

    .artav-content-panel{
        padding:12px !important;
    }
}


/* ============================================================
   V10.4.4 · POLICE UNIFIÉE AFACAD
   - force Afacad sur toute l'interface du générateur
   - corrige les zones qui pouvaient revenir en police serif par défaut
============================================================ */

.artav-wrap,
.artav-wrap *,
.artav-toast,
.artav-toast *,
.artav-tab-btn,
.artav-tab-btn *,
.artav-cat-title,
.artav-palette-row,
.artav-palette-row *,
.artav-options-grid,
.artav-options-grid *,
.artav-action-btn,
.artav-action-btn *,
.artav-nav-btn,
.artav-nav-btn *,
.artav-usage-window,
.artav-usage-window * {
    font-family: "Afacad", Arial, sans-serif !important;
}

.artav-palette-label,
.artav-bg-preview,
.artav-bg-preview span {
    font-family: "Afacad", Arial, sans-serif !important;
}


/* ============================================================
   V10.4.5 · FOND CHROMATIQUE EN LIGNE
   - remplace les petits carrés de couleurs du fond par un curseur chromatique
============================================================ */

.artav-palette-row--chromatique {
    align-items: center !important;
}

.artav-palette-row--chromatique #artav-swatches-container {
    flex: 1 1 260px !important;
    min-width: min(100%, 240px) !important;
}

.artav-chroma-control {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.artav-chroma-slider {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    height: 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(110,90,114,.78) !important;
    cursor: pointer !important;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 4%,
        hsl(0, 82%, 72%) 7%,
        hsl(30, 82%, 72%) 18%,
        hsl(60, 82%, 72%) 29%,
        hsl(120, 82%, 72%) 42%,
        hsl(180, 82%, 72%) 55%,
        hsl(240, 82%, 72%) 68%,
        hsl(300, 82%, 72%) 81%,
        hsl(360, 82%, 72%) 93%,
        #202022 96%,
        #202022 100%
    ) !important;
    box-shadow:
        inset 1px 1px 3px rgba(102,94,97,.18),
        3px 3px 8px rgba(0,0,0,.16) !important;
}

.artav-chroma-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    border: 2px solid rgba(110,90,114,.90) !important;
    background: rgba(255,245,251,.92) !important;
    box-shadow:
        3px 3px 8px rgba(0,0,0,.26),
        inset 1px 1px 0 rgba(255,255,255,.85) !important;
}

.artav-chroma-slider::-moz-range-thumb {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    border: 2px solid rgba(110,90,114,.90) !important;
    background: rgba(255,245,251,.92) !important;
    box-shadow:
        3px 3px 8px rgba(0,0,0,.26),
        inset 1px 1px 0 rgba(255,255,255,.85) !important;
}

.artav-chroma-preview {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    border: 2px solid rgba(110,90,114,.85) !important;
    box-shadow:
        3px 3px 8px rgba(0,0,0,.18),
        inset 1px 1px 0 rgba(255,255,255,.65) !important;
}

@media (max-width: 640px) {
    .artav-chroma-control {
        gap: 9px !important;
    }

    .artav-chroma-slider {
        height: 16px !important;
    }

    .artav-chroma-slider::-webkit-slider-thumb {
        width: 25px !important;
        height: 25px !important;
    }

    .artav-chroma-slider::-moz-range-thumb {
        width: 25px !important;
        height: 25px !important;
    }

    .artav-chroma-preview {
        flex-basis: 27px !important;
        width: 27px !important;
        height: 27px !important;
    }
}


/* ============================================================
   V10.4.7 · PRESETS FOND BLANC + GRIS TRÈS FONCÉ
============================================================ */

.artav-fond-presets {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-right: 4px !important;
}

.artav-fond-preset {
    all: unset !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 30px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(110,90,114,.78) !important;
    background: rgba(255,245,251,.68) !important;
    color: #665E61 !important;
    font-family: "Afacad", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow:
        3px 3px 8px rgba(0,0,0,.14),
        inset 1px 1px 0 rgba(255,255,255,.68) !important;
}

.artav-fond-preset span {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(110,90,114,.70) !important;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.55) !important;
}

.artav-fond-preset em {
    font-style: normal !important;
}

.artav-fond-preset.active {
    border-color: rgba(241,123,206,.95) !important;
    box-shadow:
        inset 0 0 0 2px rgba(255,150,215,.55),
        inset 0 0 14px rgba(255,150,215,.35),
        3px 3px 8px rgba(0,0,0,.16) !important;
}

@media (max-width: 640px) {
    .artav-fond-presets {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .artav-fond-preset {
        flex: 1 1 0 !important;
        justify-content: center !important;
        font-size: 11px !important;
        padding: 4px 7px !important;
    }
}


/* ============================================================
   V10.4.8 · MICRO-CORRECTIONS UI
   - blanc et gris foncé intégrés directement au curseur chromatique
   - sous-titres dans Détails visage
============================================================ */

.artav-details-subtitle {
    grid-column: 1 / -1 !important;
    margin: 8px 0 2px !important;
    padding: 5px 9px !important;
    width: fit-content !important;
    border-radius: 999px !important;
    border: 1px solid rgba(241,123,206,.65) !important;
    background: rgba(255,209,234,.42) !important;
    color: #665E61 !important;
    font-family: "Afacad", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.artav-palette-row--chromatique #artav-swatches-container {
    flex: 1 1 100% !important;
}

.artav-chroma-control {
    max-width: 100% !important;
}

/* Les presets de la v10.4.7 ne sont plus utilisés : le blanc et le gris
   foncé sont maintenant dans le curseur lui-même. */
.artav-fond-presets {
    display: none !important;
}


/* ============================================================
   V10.4.9 · FIX ŒIL HAUT DROITE
   - évite que l’œil du haut soit coupé
============================================================ */

.artav-wrap{
    overflow: visible !important;
}

.artav-canvas-wrap .artav-floating-eye--right{
    top: -34px !important;
}

.artav-options-wrap .artav-big-eye{
    top: -42px !important;
}


/* ============================================================
   V10.5.2 · PIERCINGS
   - palette or/argent
   - multi-sélection propre
   - sous-titres détails visage si besoin
============================================================ */

.artav-details-subtitle {
    grid-column: 1 / -1 !important;
    margin: 8px 0 2px !important;
    padding: 5px 9px !important;
    width: fit-content !important;
    border-radius: 999px !important;
    border: 1px solid rgba(241,123,206,.65) !important;
    background: rgba(255,209,234,.42) !important;
    color: #665E61 !important;
    font-family: "Afacad", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* ============================================================
   V10.5.8 · MOBILE RESPONSIVE FIX
   Corrige la grille cassée de la V10.5.7 :
   - aperçu + options réellement lisibles
   - onglets en bandeau horizontal
   - options scrollables
   - boutons Aléatoire / Télécharger toujours visibles
   - boutons tactiles qui reviennent à leur position
============================================================ */

/* ------------------------------------------------------------
   TOUCH : évite les boutons qui restent visuellement enfoncés
------------------------------------------------------------ */

.artav-nav-btn,
.artav-action-btn,
.artav-opt-card,
.artav-tab-btn,
.artav-color-swatch {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

@media (hover: none) and (pointer: coarse) {
    .artav-nav-btn:hover,
    .artav-action-btn:hover,
    .artav-opt-card:hover,
    .artav-tab-btn:hover {
        transform: translate(0, 0) !important;
    }

    .artav-nav-btn:hover .artav-nav-btn-face,
    .artav-action-btn:hover .artav-action-btn-face,
    .artav-opt-card:hover .artav-opt-card-face {
        transform: none !important;
        filter: none !important;
        box-shadow: 5px 5px 10px rgba(0,0,0,.40) !important;
    }

    .artav-tab-btn:hover {
        filter: none !important;
    }

    .artav-nav-btn:active,
    .artav-action-btn:active,
    .artav-opt-card:active,
    .artav-tab-btn:active {
        transform: translate(2px, 2px) !important;
    }

    .artav-nav-btn:active .artav-nav-btn-face,
    .artav-action-btn:active .artav-action-btn-face,
    .artav-opt-card:active .artav-opt-card-face {
        transform: none !important;
    }
}

/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 767px) {
    .artav-wrap {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;
        padding: 8px !important;

        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* On abandonne toute grille héritée du desktop */
    .artav-main-row {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 10px !important;
        overflow: visible !important;
    }

    /* ========================================================
       APERÇU
    ======================================================== */

    .artav-left-col {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 8px !important;
        overflow: visible !important;
    }

    .artav-canvas-wrap {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        padding: 38px 8px 8px !important;

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

        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .artav-canvas-inner {
        width: min(100%, 34svh, 360px) !important;
        max-width: 360px !important;
        height: auto !important;
        max-height: none !important;

        aspect-ratio: 1 / 1 !important;
        margin: 0 auto !important;
    }

    /* Contrôles aperçu */
    .artav-nav-row {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;

        margin: 0 !important;
        padding: 5px !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 4px !important;

        border-radius: 10px !important;
        overflow: visible !important;
    }

    .artav-nav-btn {
        flex: 1 1 0 !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 44px !important;
        height: 34px !important;
    }

    .artav-nav-btn svg,
    .artav-nav-btn--brillant svg {
        width: 14px !important;
        height: 14px !important;
    }

    .artav-nav-separator {
        flex: 0 0 1px !important;

        width: 1px !important;
        height: 22px !important;

        margin: 0 2px !important;
    }

    /* La fenêtre de règles prend trop de place sur téléphone */
    .artav-usage-window {
        display: none !important;
    }

    /* ========================================================
       PERSONNALISATION
    ======================================================== */

    .artav-options-wrap {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        display: block !important;
        overflow: visible !important;
    }

    /* IMPORTANT :
       on neutralise explicitement les 2 colonnes desktop */
    .artav-options-inner {
        width: 100% !important;
        max-width: 100% !important;

        height: min(49svh, 500px) !important;
        min-height: 350px !important;
        max-height: 500px !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(0, 1fr) !important;

        overflow: hidden !important;
        border-radius: 10px !important;
    }

    /* Onglets = bandeau horizontal */
    .artav-tabs-vert {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 34px 0 0 !important;
        padding: 7px !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;

        gap: 6px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        border-right: none !important;
        border-bottom: 1px solid rgba(91,74,99,.35) !important;

        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .artav-tabs-vert::-webkit-scrollbar {
        display: none !important;
    }

    .artav-tab-btn {
        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 78px !important;
        max-width: 112px !important;
        min-height: 38px !important;
        height: auto !important;

        padding: 5px 7px !important;

        display: grid !important;
        grid-template-columns: 16px minmax(0, 1fr) !important;
        align-items: center !important;

        gap: 5px !important;

        font-size: 9px !important;
        line-height: 1.05 !important;

        white-space: normal !important;
    }

    .artav-tab-btn svg,
    .artav-tab-icon {
        width: 15px !important;
        height: 15px !important;
    }

    /* Contenu options */
    .artav-content-panel {
        grid-column: 1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 8px !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows:
            auto
            auto
            minmax(0, 1fr)
            auto !important;

        gap: 5px !important;

        overflow: hidden !important;
    }

    .artav-cat-title {
        margin: 0 !important;
        padding: 6px 9px !important;

        font-size: 18px !important;
        line-height: 1 !important;
    }

    /* Palette horizontale compacte */
    .artav-palette-row {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 6px !important;

        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        gap: 6px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .artav-palette-row::-webkit-scrollbar {
        display: none !important;
    }

    .artav-palette-label {
        flex: 0 0 auto !important;

        padding: 2px 4px !important;

        font-size: 11px !important;
        white-space: nowrap !important;
    }

    #artav-swatches-container {
        flex-wrap: nowrap !important;
    }

    .artav-color-swatch {
        flex: 0 0 24px !important;

        width: 24px !important;
        height: 24px !important;
    }

    /* La liste des éléments est la seule zone qui scrolle */
    .artav-options-grid,
    .artav-options-grid.artav-options-grid--fonds {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        max-height: none !important;

        margin: 0 !important;
        padding: 4px 3px 10px !important;

        display: grid !important;
        grid-template-columns:
            repeat(auto-fill, minmax(62px, 1fr)) !important;

        gap: 7px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .artav-opt-card {
        min-width: 0 !important;
        min-height: 62px !important;
    }

    /* ========================================================
       ACTIONS TOUJOURS VISIBLES
    ======================================================== */

    .artav-actions-row {
        position: relative !important;
        z-index: 30 !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 6px 0 2px !important;

        display: grid !important;
        grid-template-columns:
            minmax(0, .9fr)
            minmax(0, 1.35fr) !important;

        gap: 7px !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,245,251,0),
                rgba(255,245,251,.92) 30%,
                rgba(255,245,251,.98) 100%
            ) !important;
    }

    .artav-action-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
    }

    .artav-action-btn-face {
        padding: 0 7px !important;

        gap: 5px !important;

        border-width: 1px !important;
        border-radius: 10px !important;

        font-size: 10px !important;
        line-height: 1 !important;

        box-shadow: 4px 4px 8px rgba(0,0,0,.28) !important;
    }

    .artav-action-btn svg {
        flex: 0 0 14px !important;

        width: 14px !important;
        height: 14px !important;
    }

    /* Décorations masquées uniquement sur téléphone */
    .artav-floating-eye,
    .artav-big-eye {
        display: none !important;
    }
}

/* ------------------------------------------------------------
   PETITS TÉLÉPHONES
------------------------------------------------------------ */

@media (max-width: 420px) {
    .artav-wrap {
        padding: 6px !important;
    }

    .artav-main-row {
        gap: 8px !important;
    }

    .artav-canvas-inner {
        width: min(100%, 31svh, 320px) !important;
    }

    .artav-nav-btn {
        max-width: 38px !important;
        height: 32px !important;
    }

    .artav-options-inner {
        height: min(50svh, 470px) !important;
        min-height: 335px !important;
        max-height: 470px !important;
    }

    .artav-tab-btn {
        min-width: 72px !important;
        max-width: 102px !important;
        min-height: 36px !important;

        font-size: 8.5px !important;
    }

    .artav-content-panel {
        padding: 7px !important;
    }

    .artav-options-grid,
    .artav-options-grid.artav-options-grid--fonds {
        grid-template-columns:
            repeat(auto-fill, minmax(56px, 1fr)) !important;

        gap: 6px !important;
    }

    .artav-action-btn {
        height: 42px !important;
    }

    .artav-action-btn-face {
        padding-inline: 5px !important;
        font-size: 9.5px !important;
    }
}

/* ============================================================
   V10.5.9 · CORRECTIFS UI MOBILE + DESKTOP
   - une seule palette pupilles
   - palettes pupilles / paupières sur fond blanc
   - cartes qui ne se chevauchent plus
   - aperçu couleur de fond non coupé
   - suppression du dégradé derrière les actions
   - toast aléatoire compact
   - espacement accessoires tête réduit sur desktop
============================================================ */

/* ------------------------------------------------------------
   YEUX : BLOCS COULEUR BLANCS — MOBILE + DESKTOP
------------------------------------------------------------ */

.artav-eye-color-block {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 10px !important;
    padding: 10px 12px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 9px !important;

    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(110,90,114,.78) !important;
    border-radius: 10px !important;

    box-shadow:
        4px 4px 10px rgba(0,0,0,.16),
        inset 1px 1px 0 rgba(255,255,255,.92) !important;
}

.artav-eye-color-title {
    margin: 0 !important;
    padding: 0 !important;

    color: #2b2b2b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: .02em !important;
}

.artav-eye-color-swatches {
    width: 100% !important;

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

    gap: 8px !important;
}

.artav-eye-section-title {
    grid-column: 1 / -1 !important;

    margin: 8px 0 4px !important;
    padding: 0 !important;

    color: #2b2b2b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: .02em !important;
}

/* ------------------------------------------------------------
   CARTES : PLUS DE CHEVAUCHEMENT
------------------------------------------------------------ */

.artav-options-grid {
    column-gap: 15px !important;
    row-gap: 15px !important;

    padding-right: 10px !important;
    padding-bottom: 16px !important;
}

.artav-opt-card {
    min-width: 0 !important;
    margin: 0 !important;
}

.artav-opt-card-face {
    inset: 0 !important;
}



/* ------------------------------------------------------------
   FOND : LE CARRÉ DE COULEUR RESTE ENTIÈREMENT VISIBLE
------------------------------------------------------------ */

.artav-palette-row--chromatique {
    overflow: visible !important;
}

.artav-palette-row--chromatique #artav-swatches-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow: visible !important;
}

.artav-chroma-control {
    width: 100% !important;
    min-width: 0 !important;

    padding-right: 3px !important;

    overflow: visible !important;
}

.artav-chroma-slider {
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
}

.artav-chroma-preview {
    flex: 0 0 30px !important;

    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;

    height: 30px !important;

    margin-right: 1px !important;
}

/* ------------------------------------------------------------
   ACTIONS : SUPPRIME LE FOND BLANC DÉGRADÉ
------------------------------------------------------------ */

.artav-actions-row {
    background: transparent !important;
    background-image: none !important;
}

/* ------------------------------------------------------------
   TOAST / CHIP APRÈS ALÉATOIRE : COMPACT
------------------------------------------------------------ */

.artav-toast {
    max-width: min(320px, calc(100vw - 32px)) !important;

    padding: 8px 12px !important;

    border-width: 1px !important;
    border-radius: 10px !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    text-align: center !important;
    white-space: normal !important;

    box-shadow:
        3px 3px 8px rgba(0,0,0,.24) !important;
}

/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 767px) {
    .artav-eye-color-block {
        margin-bottom: 8px !important;
        padding: 9px 10px !important;

        gap: 8px !important;
    }

    .artav-eye-color-title {
        font-size: 12px !important;
    }

    .artav-eye-color-swatches {
        flex-wrap: nowrap !important;

        gap: 7px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 2px 2px 4px !important;

        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .artav-eye-color-swatches::-webkit-scrollbar {
        display: none !important;
    }

    .artav-options-grid {
        column-gap: 10px !important;
        row-gap: 10px !important;

        padding-right: 7px !important;
        padding-bottom: 12px !important;
    }

    .artav-palette-row--chromatique {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    .artav-chroma-control {
        gap: 7px !important;
        padding-right: 2px !important;
    }

    .artav-chroma-preview {
        flex-basis: 28px !important;

        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;

        height: 28px !important;
    }

    .artav-actions-row {
        background: transparent !important;
        background-image: none !important;
    }

    .artav-toast {
        bottom: max(18px, env(safe-area-inset-bottom)) !important;

        max-width: calc(100vw - 40px) !important;

        padding: 7px 11px !important;

        font-size: 12px !important;
        line-height: 1.15 !important;
    }
}

/* ============================================================
   V10.5.10 · ACCESSOIRE TÊTE — ESPACEMENT DES LIGNES
   Réduit l'espace vertical excessif entre les rangées de cards.
============================================================ */

@media (min-width: 768px) {
    .artav-options-grid--accessoires {
        row-gap: 12px !important;
        column-gap: 13px !important;

        align-content: start !important;
        align-items: start !important;

        grid-auto-rows: max-content !important;
    }

    .artav-options-grid--accessoires .artav-opt-card {
        align-self: start !important;
        margin: 0 !important;
    }
}

/* ============================================================
   V10.5.12 · DESKTOP ÉQUILIBRÉ
   - barre de contrôle réellement adaptable
   - fenêtre de droite à la même hauteur que toute la colonne gauche
   - conserve le compactage desktop
============================================================ */

@media (min-width: 1025px) {
    /* --------------------------------------------------------
       Structure générale
    -------------------------------------------------------- */

    .artav-wrap {
        margin: 24px auto !important;
        padding: 24px !important;
    }

    .artav-main-row {
        grid-template-columns:
            minmax(280px, 360px)
            minmax(0, 1fr) !important;

        gap: clamp(16px, 2vw, 24px) !important;

        /* IMPORTANT :
           les 2 colonnes partagent exactement la même hauteur */
        align-items: stretch !important;
    }

    .artav-left-col {
        width: 100% !important;
        max-width: 360px !important;

        gap: 10px !important;

        align-self: stretch !important;
    }

    /* --------------------------------------------------------
       Aperçu compact
    -------------------------------------------------------- */

    .artav-canvas-wrap {
        padding: 40px 10px 10px !important;
    }

    .artav-canvas-inner {
        width: min(100%, 340px, calc(100svh - 330px)) !important;
        max-width: 340px !important;
        min-width: 280px !important;

        margin: 0 auto !important;
    }

    /* --------------------------------------------------------
       Barre de contrôle adaptable
       Les boutons se partagent la largeur disponible.
    -------------------------------------------------------- */

    .artav-nav-row {
        width: 100% !important;
        min-width: 0 !important;

        padding: 6px !important;
        gap: 4px !important;

        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: stretch !important;

        overflow: visible !important;
    }

    .artav-nav-btn {
        flex: 1 1 0 !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 38px !important;
    }

    .artav-nav-btn-face {
        width: 100% !important;
        min-width: 0 !important;
    }

    .artav-nav-btn svg,
    .artav-nav-btn--brillant svg {
        width: 17px !important;
        height: 17px !important;
    }

    .artav-nav-separator {
        flex: 0 0 1px !important;

        width: 1px !important;
        min-width: 1px !important;

        height: 24px !important;

        margin: 0 2px !important;
    }

    /* --------------------------------------------------------
       Règles d'utilisation compactes
    -------------------------------------------------------- */

    .artav-usage-window {
        margin-top: 0 !important;

        padding: 38px 12px 10px !important;

        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    .artav-usage-window p {
        padding: 7px !important;
    }

    /* --------------------------------------------------------
       Colonne droite = hauteur totale de la colonne gauche
    -------------------------------------------------------- */

    .artav-options-wrap {
        min-height: 0 !important;
        height: auto !important;

        align-self: stretch !important;

        display: flex !important;
        flex-direction: column !important;
    }

    .artav-options-inner {
        flex: 1 1 auto !important;

        width: 100% !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: none !important;

        grid-template-columns:
            140px
            minmax(0, 1fr) !important;

        overflow: hidden !important;
    }

    /* --------------------------------------------------------
       Navigation catégories
    -------------------------------------------------------- */

    .artav-tabs-vert {
        width: 140px !important;
        min-width: 140px !important;

        padding: 10px 8px !important;
        gap: 6px !important;

        overflow-y: auto !important;
    }

    .artav-tab-btn {
        min-height: 44px !important;
        font-size: 11px !important;
    }

    /* --------------------------------------------------------
       Contenu options
    -------------------------------------------------------- */

    .artav-content-panel {
        min-height: 0 !important;

        padding: 18px !important;

        overflow: hidden !important;
    }

    .artav-cat-title {
        margin-bottom: 10px !important;
        font-size: 24px !important;
    }

    .artav-options-grid {
        flex: 1 1 auto !important;

        min-height: 0 !important;
        max-height: none !important;

        grid-template-columns:
            repeat(auto-fill, minmax(92px, 1fr)) !important;

        gap: 12px !important;

        overflow-y: auto !important;
    }

    /* --------------------------------------------------------
       Actions
    -------------------------------------------------------- */

    .artav-actions-row {
        flex: 0 0 auto !important;

        padding-top: 10px !important;
        gap: 10px !important;
    }

    .artav-action-btn {
        height: 50px !important;
    }
}

/* ============================================================
   V10.5.13 · DESKTOP SPACING FIX
   - empêche l’étirement vertical des éléments dans la grille
   - supprime les grands vides entre les lignes
   - garde les sous-titres et blocs yeux compactés en haut
============================================================ */

@media (min-width: 1025px) {
    .artav-options-grid {
        align-content: start !important;
        align-items: start !important;
        justify-items: stretch !important;
        grid-auto-rows: max-content !important;
    }

    .artav-opt-card,
    .artav-eye-color-block,
    .artav-eye-section-title,
    .artav-details-subtitle {
        align-self: start !important;
    }

    .artav-eye-color-block {
        margin-bottom: 8px !important;
    }

    .artav-eye-section-title {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }

    .artav-details-subtitle {
        margin-top: 4px !important;
        margin-bottom: 2px !important;
    }
}

/* ============================================================
   V10.5.14 · DERNIERS CORRECTIFS UI
   - pupilles / paupières : libellé + couleurs sur une seule ligne
   - aucun effet de pression sur onglets et couleurs
   - nez : aucune palette parasite sur téléphone
============================================================ */

/* ------------------------------------------------------------
   YEUX : LIBELLÉ + COULEURS SUR LA MÊME LIGNE
------------------------------------------------------------ */

.artav-eye-color-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 14px !important;

    padding: 10px 12px !important;
}

.artav-eye-color-title {
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}

.artav-eye-color-swatches {
    flex: 1 1 auto !important;
    min-width: 0 !important;

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

    gap: 8px !important;
}

/* Tablette et téléphone : on garde la même ligne, les couleurs scrollent si besoin */
@media (max-width: 1024px) {
    .artav-eye-color-block {
        gap: 10px !important;
    }

    .artav-eye-color-swatches {
        flex-wrap: nowrap !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 2px 2px 4px !important;

        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .artav-eye-color-swatches::-webkit-scrollbar {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .artav-eye-color-block {
        padding: 8px 9px !important;
        gap: 8px !important;
    }

    .artav-eye-color-title {
        font-size: 11px !important;
    }
}

/* ------------------------------------------------------------
   ONGLET + COULEURS : AUCUN EFFET DE PRESSION
   L'état sélectionné reste visible, mais sans déplacement/écrasement.
------------------------------------------------------------ */

.artav-tab-btn,
.artav-color-swatch {
    translate: none !important;
    transform: none !important;

    transition:
        background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        opacity .16s ease,
        filter .16s ease !important;
}

.artav-tab-btn:hover,
.artav-tab-btn:active,
.artav-tab-btn:focus,
.artav-tab-btn:focus-visible,
.artav-color-swatch:hover,
.artav-color-swatch:active,
.artav-color-swatch:focus,
.artav-color-swatch:focus-visible {
    translate: none !important;
    transform: none !important;
    top: auto !important;
}

/* La couleur active reste indiquée par la lueur, sans scale */
.artav-color-swatch.active {
    translate: none !important;
    transform: none !important;

    box-shadow:
        inset 0 0 0 3px rgba(255,150,215,.95),
        inset 0 0 22px rgba(255,150,215,.65),
        2px 2px 5px var(--shadow) !important;
}

/* L'onglet actif reste indiqué sans effet pressé */
.artav-tab-btn.active {
    translate: none !important;
    transform: none !important;
}

/* Neutralise aussi les règles tactiles définies plus haut */
@media (hover: none) and (pointer: coarse) {
    .artav-tab-btn,
    .artav-tab-btn:hover,
    .artav-tab-btn:active,
    .artav-color-swatch,
    .artav-color-swatch:hover,
    .artav-color-swatch:active {
        translate: none !important;
        transform: none !important;
    }
}

/* ------------------------------------------------------------
   NEZ : AUCUNE PALETTE PARASITE SUR TÉLÉPHONE
------------------------------------------------------------ */

@media (max-width: 767px) {
    .artav-content-panel[data-artav-category="nez"] .artav-palette-row {
        display: none !important;
    }
}

/* ============================================================
   V10.5.17 · MOBILE — ACTIONS TOUJOURS AU MÊME ENDROIT
   Les boutons Aléatoire / Télécharger sont ancrés en bas du
   panneau de personnalisation, indépendamment de la catégorie.
============================================================ */

@media (max-width: 767px) {
    .artav-content-panel {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 6px !important;

        /* réserve fixe pour la barre d'actions */
        padding: 8px 8px 66px !important;

        overflow: hidden !important;
    }

    .artav-cat-title,
    .artav-palette-row {
        flex: 0 0 auto !important;
    }

    .artav-options-grid,
    .artav-options-grid.artav-options-grid--fonds {
        flex: 1 1 auto !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .artav-actions-row {
        position: absolute !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        z-index: 80 !important;

        width: auto !important;
        height: 50px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: grid !important;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr) !important;
        align-items: stretch !important;

        gap: 7px !important;

        background: transparent !important;
        background-image: none !important;
    }

    .artav-action-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 50px !important;
    }

    .artav-action-btn-face {
        height: 100% !important;
    }
}

@media (max-width: 420px) {
    .artav-content-panel {
        padding-bottom: 62px !important;
    }

    .artav-actions-row {
        left: 7px !important;
        right: 7px !important;
        bottom: 7px !important;
        height: 46px !important;
    }

    .artav-action-btn {
        height: 46px !important;
    }
}

/* ============================================================
   V10.5.20 · DESKTOP PLUS LARGE
   Objectif : élargir le générateur sans augmenter sa hauteur.
   - plus de largeur disponible pour la fenêtre de personnalisation
   - la colonne aperçu et la taille du canvas restent identiques
   - hauteur desktop conservée : on ne touche pas aux min-height/actions
   - mobile/tablette inchangés
============================================================ */

@media (min-width: 1025px) {
    .artav-wrap {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box !important;
        overflow-x: clip !important;
    }

    .artav-main-row {
        width: min(100%, 1760px) !important;
        max-width: 1760px !important;

        grid-template-columns:
            minmax(280px, 360px)
            minmax(0, 1fr) !important;

        gap: clamp(18px, 2.4vw, 34px) !important;
        padding-left: clamp(18px, 4vw, 78px) !important;
        padding-right: clamp(18px, 4vw, 78px) !important;
    }

    .artav-left-col {
        max-width: 360px !important;
    }

    .artav-canvas-inner {
        width: min(100%, 340px, calc(100svh - 330px)) !important;
        max-width: 340px !important;
        min-width: 280px !important;
    }

    .artav-options-wrap {
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .artav-options-inner {
        width: 100% !important;
        max-width: none !important;
        grid-template-columns:
            150px
            minmax(0, 1fr) !important;
    }

    .artav-tabs-vert {
        width: 150px !important;
        min-width: 150px !important;
    }

    .artav-content-panel {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}