:root{--navy:#062652;--navy2:#0b3263;--gold:#ffb000;--bg:#f4f7fb;--white:#fff;--text:#142033}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);font-family:Arial,sans-serif;color:var(--text)}
.yw-app{min-height:100vh;padding-bottom:32px}
.yw-header{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:22px 20px;display:flex;align-items:center;gap:14px;color:#fff}
.yw-header img{width:58px;height:58px;object-fit:cover;border-radius:16px}
.yw-header div{display:flex;flex-direction:column;gap:3px}
.yw-header strong{font-size:21px}
.yw-header span{font-size:13px;opacity:.8}
.yw-welcome{padding:28px 20px 12px}
.yw-welcome p{margin:0;color:#64748b;font-size:14px}
.yw-welcome h1{margin:5px 0 0;font-size:28px;color:var(--navy)}
.yw-actions{
padding:12px 20px;
}

.yw-actions:not(.yw-dashboard-actions){
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.yw-actions:not(.yw-dashboard-actions) > a{
min-height:105px;
background:#fff;
border-radius:18px;
padding:18px;
text-decoration:none;
color:var(--navy);
font-weight:700;
font-size:16px;
display:flex;
align-items:flex-end;
box-shadow:0 8px 25px rgba(6,38,82,.08);
}
@media(min-width:800px){.yw-app{max-width:760px;margin:auto}.yw-header{border-radius:0 0 24px 24px}}

.yw-back{display:inline-block;margin-bottom:8px;color:#062652;font-weight:700;text-decoration:none}

.yw-product-form{
padding:10px 20px 40px;
display:flex;
flex-direction:column;
gap:8px;
}

.yw-product-form label{
display:block;
margin-top:10px;
font-size:14px;
font-weight:700;
color:#062652;
}

.yw-product-form input,
.yw-product-form select,
.yw-product-form textarea{
width:100%;
min-height:52px;
padding:13px 14px;
border:1px solid #d5deea;
border-radius:12px;
background:#fff;
font:inherit;
font-size:16px;
color:#142033;
outline:none;
}

.yw-product-form textarea{
min-height:130px;
resize:vertical;
}

.yw-product-form input:focus,
.yw-product-form select:focus,
.yw-product-form textarea:focus{
border-color:#0b3263;
box-shadow:0 0 0 3px rgba(11,50,99,.08);
}

.yw-product-form input[type=file]{
height:auto;
padding:14px;
}

.yw-form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.yw-form-actions{
display:grid;
gap:12px;
margin-top:22px;
}

.yw-form-actions button{
min-height:56px;
border:0;
border-radius:14px;
padding:14px;
font-size:16px;
font-weight:700;
cursor:pointer;
}

.yw-form-actions button:first-child{
background:#fff;
color:#062652;
border:1px solid #d5deea;
}

.yw-form-actions button:last-child{
background:linear-gradient(135deg,#ffb000,#ff9200);
color:#062652;
}

@media(max-width:480px){
.yw-form-row{grid-template-columns:1fr}
}

.yw-photo-preview{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-top:10px;
}

.yw-photo-item{
position:relative;
overflow:hidden;
border-radius:14px;
background:#fff;
aspect-ratio:1/1;
box-shadow:0 4px 14px rgba(6,38,82,.08);
}

.yw-photo-item img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.yw-photo-item span{
position:absolute;
left:5px;
right:5px;
bottom:5px;
padding:5px 4px;
border-radius:8px;
background:rgba(6,38,82,.88);
color:#fff;
font-size:10px;
font-weight:700;
text-align:center;
}

.yw-photo-item:first-child{
outline:3px solid #ffb000;
outline-offset:-3px;
}

.yw-message{
margin:0 20px 12px;
padding:14px 16px;
border-radius:12px;
font-size:14px;
font-weight:700;
}

.yw-success{
background:#eaf8ef;
border:1px solid #b9e6c7;
color:#176b35;
}

.yw-error{
background:#fff0f0;
border:1px solid #f0bcbc;
color:#a32121;
}

.yw-products-list{
padding:0 20px 40px;
display:flex;
flex-direction:column;
gap:16px;
}

.yw-product-card{
background:#fff;
border-radius:18px;
padding:12px;
display:grid;
grid-template-columns:105px 1fr;
gap:14px;
align-items:center;
box-shadow:0 7px 24px rgba(6,38,82,.08);
overflow:hidden;
}

.yw-product-image{
width:105px;
height:105px;
border-radius:14px;
overflow:hidden;
background:#eef2f7;
}

.yw-product-image img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

.yw-product-info{
min-width:0;
display:flex;
flex-direction:column;
gap:5px;
}

.yw-product-id{
font-size:12px;
font-weight:700;
color:#7b8798;
}

.yw-product-info h2{
margin:0;
font-size:17px;
line-height:1.25;
color:#062652;
overflow-wrap:anywhere;
}

.yw-product-price{
font-size:17px;
color:#062652;
}

.yw-product-stock{
font-size:13px;
color:#64748b;
}

.yw-empty{
background:#fff;
padding:24px;
border-radius:18px;
text-align:center;
color:#64748b;
}

@media(min-width:700px){
.yw-products-list{
display:grid;
grid-template-columns:1fr 1fr;
}
}

.yw-edit-button{
display:inline-flex;
align-items:center;
justify-content:center;
align-self:flex-start;
margin-top:6px;
min-height:38px;
padding:8px 16px;
border-radius:10px;
background:#062652;
color:#fff;
font-size:13px;
font-weight:700;
text-decoration:none;
}

.yw-edit-button:active{
transform:scale(.97);
}

.yw-product-actions{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
margin-top:6px;
}

.yw-product-actions .yw-edit-button{
margin-top:0;
}

.yw-product-actions form{
margin:0;
}

.yw-sold-button{
min-height:38px;
padding:8px 13px;
border:0;
border-radius:10px;
background:#ffb000;
color:#062652;
font:inherit;
font-size:13px;
font-weight:700;
cursor:pointer;
}

.yw-sold-button:active{
transform:scale(.97);
}

.yw-delete-button{
min-height:38px;
padding:8px 13px;
border:1px solid #d8a4a4;
border-radius:10px;
background:#fff;
color:#9b1c1c;
font:inherit;
font-size:13px;
font-weight:700;
cursor:pointer;
}

.yw-delete-button:active{
transform:scale(.97);
}

.yw-product-actions .yw-delete-button{
appearance:none;
-webkit-appearance:none;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:8px 13px;
margin:0;
border:1px solid #e4b4b4;
border-radius:10px;
background:#fff;
color:#9b1c1c;
font-family:inherit;
font-size:13px;
font-weight:700;
line-height:1;
text-decoration:none;
box-shadow:none;
cursor:pointer;
}

.yw-product-actions .yw-delete-button:hover{
background:#fff5f5;
}

.yw-product-actions .yw-delete-button:active{
transform:scale(.97);
}

.yw-edit-photos{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin:8px 0 14px;
}

.yw-edit-photo{
position:relative;
aspect-ratio:1/1;
overflow:hidden;
border-radius:14px;
background:#fff;
box-shadow:0 4px 14px rgba(6,38,82,.08);
}

.yw-edit-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.yw-edit-photo span{
position:absolute;
left:5px;
right:5px;
bottom:5px;
padding:5px;
border-radius:8px;
background:rgba(6,38,82,.88);
color:#fff;
font-size:10px;
font-weight:700;
text-align:center;
}

.yw-edit-photo-main{
outline:3px solid #ffb000;
outline-offset:-3px;
}

.yw-no-photo{
padding:15px;
border-radius:12px;
background:#fff;
color:#64748b;
}

.yw-edit-photo{
overflow:visible;
margin-bottom:76px;
}

.yw-edit-photo img{
border-radius:14px;
}

.yw-photo-controls{
position:absolute;
top:calc(100% + 8px);
left:0;
right:0;
display:grid;
gap:5px;
font-size:11px;
}

.yw-photo-controls label{
display:flex;
align-items:center;
gap:5px;
font-weight:700;
cursor:pointer;
}

.yw-photo-controls input{
width:auto;
min-height:0;
margin:0;
}

.yw-photo-main-choice{
color:#062652;
}

.yw-photo-remove-choice{
color:#9b1c1c;
}

/* =========================================
   YOWILOO ARTICLES — ÉQUIPE
========================================= */

.yw-product-form h2 {
    color: #062652;
    margin: 0 0 22px;
}

.yw-product-form h3 {
    color: #062652;
    margin: 28px 0 14px;
}

.yw-permissions {
    display: grid;
    gap: 10px;
    margin-bottom: 24px;
}

.yw-permission {
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 12px 14px;
    margin: 0 !important;
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    color: #062652;
    font-weight: 700;
    cursor: pointer;
}

.yw-permission input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #9aa9bc;
    border-radius: 7px;
    background: #fff;
    position: relative;
}

.yw-permission input[type="checkbox"]:checked {
    background: #ffb000;
    border-color: #ffb000;
}

.yw-permission input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #062652;
    font-size: 17px;
    font-weight: 900;
}

.yw-team-submit {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 15px;
    background: #062652;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    padding: 14px 18px;
    cursor: pointer;
}

.yw-team-submit:active {
    transform: scale(.98);
}

.yw-team-members {
    margin-top: 28px;
}


/* Cartes membres — YOWILOO Articles */

.yw-team-list {
    display: grid;
    gap: 18px;
}

.yw-team-card {
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 5px 18px rgba(6,38,82,.06);
}

.yw-team-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.yw-team-card-head strong {
    display: block;
    color: #062652;
    font-size: 18px;
}

.yw-team-card-head small {
    display: block;
    margin-top: 4px;
    color: #66758a;
    overflow-wrap: anywhere;
}

.yw-team-status {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.yw-team-status.is-active {
    background: #e9f8ef;
    color: #16723a;
}

.yw-team-status.is-disabled {
    background: #fbecec;
    color: #a52a2a;
}

.yw-team-toggle-form {
    margin-top: 10px;
}

.yw-team-toggle {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #fff;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.yw-team-toggle.is-disable {
    border: 2px solid #b42318;
    color: #b42318;
}

.yw-team-toggle.is-enable {
    border: 2px solid #16723a;
    color: #16723a;
}

.yw-team-toggle:active {
    transform: scale(.98);
}


/* Session utilisateur — YOWILOO Articles */

.yw-user-session {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 16px;
}

.yw-user-session div {
    min-width: 0;
}

.yw-user-session span {
    display: block;
    color: #6b7788;
    font-size: 12px;
    margin-bottom: 2px;
}

.yw-user-session strong {
    display: block;
    color: #062652;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.yw-logout {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    border: 2px solid #b42318;
    border-radius: 12px;
    color: #b42318 !important;
    background: #fff;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 800;
}

.yw-logout:active {
    transform: scale(.97);
}


/* =========================================
   CONNEXION — YOWILOO ARTICLES
========================================= */

.yw-login-page {
    min-height: 100vh;
    padding: 28px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f7fb;
    box-sizing: border-box;
}

.yw-login-card {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 24px;
    padding: 28px 24px;
    box-shadow: 0 14px 40px rgba(6,38,82,.10);
}

.yw-login-brand {
    text-align: center;
    margin-bottom: 30px;
}

.yw-login-brand img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    border-radius: 22px;
}

.yw-login-brand h1 {
    margin: 15px 0 3px;
    color: #062652;
    font-size: 28px;
}

.yw-login-brand p {
    margin: 0;
    color: #66758a;
}

.yw-login-heading {
    margin-bottom: 22px;
}

.yw-login-heading h2 {
    margin: 0 0 5px;
    color: #062652;
    font-size: 26px;
}

.yw-login-heading p {
    margin: 0;
    color: #66758a;
}

.yw-login-form label {
    display: block;
    margin-bottom: 18px;
    color: #062652;
    font-weight: 700;
}

.yw-login-form input[type="text"],
.yw-login-form input[type="password"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 54px;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid #ccd6e3;
    border-radius: 14px;
    background: #fff;
    font-size: 16px;
}

.yw-login-remember {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.yw-login-remember input {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
}

.yw-login-forgot {
    display: block;
    margin-top: 20px;
    text-align: center;
    color: #062652;
    font-weight: 700;
}


/* =========================================
   YOWILOO ARTICLES — INSTALLATION PWA
========================================= */

.yw-install-banner {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 999999;

    max-width: 520px;
    margin: 0 auto;
    padding: 14px 44px 14px 14px;

    display: grid;
    grid-template-columns: 54px 1fr auto;
    align-items: center;
    gap: 12px;

    background: linear-gradient(135deg, #062652, #0b3263);
    color: #fff;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;

    box-shadow:
        0 18px 50px rgba(0,0,0,.28),
        0 4px 12px rgba(0,0,0,.15);

    animation: ywInstallIn .35s ease-out;
}

.yw-install-icon {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yw-install-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yw-install-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.yw-install-text strong {
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
}

.yw-install-text span {
    color: rgba(255,255,255,.78);
    font-size: 12px;
    line-height: 1.35;
}

.yw-install-button {
    border: 0;
    border-radius: 12px;
    padding: 11px 15px;

    background: #ffb000;
    color: #062652;

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

.yw-install-button:active {
    transform: scale(.97);
}

.yw-install-close {
    position: absolute;
    top: 5px;
    right: 8px;

    width: 30px;
    height: 30px;

    border: 0;
    background: transparent;
    color: rgba(255,255,255,.72);

    font-size: 24px;
    line-height: 30px;
    cursor: pointer;
}

@keyframes ywInstallIn {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 520px) {
    .yw-install-banner {
        grid-template-columns: 48px 1fr;
    }

    .yw-install-icon {
        width: 48px;
        height: 48px;
    }

    .yw-install-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (display-mode: standalone) {
    .yw-install-banner {
        display: none !important;
    }
}

/* =========================================
   YOWILOO ARTICLES — INSTALLATION PWA
========================================= */

.yw-install-banner {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 999999;

    max-width: 520px;
    margin: 0 auto;
    padding: 14px 44px 14px 14px;

    display: grid;
    grid-template-columns: 54px 1fr auto;
    align-items: center;
    gap: 12px;

    background: linear-gradient(135deg, #062652, #0b3263);
    color: #fff;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;

    box-shadow:
        0 18px 50px rgba(0,0,0,.28),
        0 4px 12px rgba(0,0,0,.15);

    animation: ywInstallIn .35s ease-out;
}

.yw-install-icon {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yw-install-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yw-install-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.yw-install-text strong {
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
}

.yw-install-text span {
    color: rgba(255,255,255,.78);
    font-size: 12px;
    line-height: 1.35;
}

.yw-install-button {
    border: 0;
    border-radius: 12px;
    padding: 11px 15px;

    background: #ffb000;
    color: #062652;

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

.yw-install-button:active {
    transform: scale(.97);
}

.yw-install-close {
    position: absolute;
    top: 5px;
    right: 8px;

    width: 30px;
    height: 30px;

    border: 0;
    background: transparent;
    color: rgba(255,255,255,.72);

    font-size: 24px;
    line-height: 30px;
    cursor: pointer;
}

@keyframes ywInstallIn {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 520px) {
    .yw-install-banner {
        grid-template-columns: 48px 1fr;
    }

    .yw-install-icon {
        width: 48px;
        height: 48px;
    }

    .yw-install-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (display-mode: standalone) {
    .yw-install-banner {
        display: none !important;
    }
}

/* =========================================
   YOWILOO ARTICLES — DASHBOARD PREMIUM
========================================= */

.yw-dashboard-actions {
    display: block;
}

.yw-add-card {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
    padding: 16px 18px;

    border-radius: 18px;
    background: linear-gradient(135deg, #ffb000, #ffc94d);
    color: #062652 !important;

    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(255,176,0,.22);
}

.yw-add-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;
    background: #062652;
    color: #fff;

    font-size: 21px;
    line-height: 1;
}

.yw-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

.yw-stat-card {
    position: relative;
    min-height: 128px;
    box-sizing: border-box;

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

    padding: 17px;

    border-radius: 20px;
    background: #fff !important;
    color: #062652 !important;
    text-decoration: none;

    border: 1px solid rgba(6,38,82,.08);
    box-shadow: 0 8px 28px rgba(6,38,82,.08);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.yw-stat-card:active {
    transform: scale(.98);
}

.yw-stat-label {
    font-size: 14px;
    font-weight: 750;
    color: #44536a;
}

.yw-stat-number {
    display: block;
    margin: 5px 0;

    font-size: 38px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1px;

    color: #062652;
}

.yw-stat-caption {
    font-size: 11px;
    line-height: 1.25;
    color: #7a8798;
}

.yw-team-card {
    background: linear-gradient(145deg, #062652, #0b3263) !important;
}

.yw-team-card .yw-stat-label,
.yw-team-card .yw-stat-number {
    color: #fff;
}

.yw-team-card .yw-stat-caption {
    color: rgba(255,255,255,.68);
}

@media (max-width: 360px) {
    .yw-dashboard-grid {
        grid-template-columns: 1fr;
    }
}