/* fixes.css — chargé en dernier. Menu stable, formulaires lisibles, chargement propre. */

/* ===== 1) En-tête : le menu ne bouge plus ===== */
header{display:flex;align-items:center;gap:10px;min-height:68px}
header .logo{flex:none}
header>.hT,header>div:nth-child(2){flex:1 1 auto;min-width:0}
header .hT b,header .hT small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header .hb{flex:none;margin-left:0;position:relative;z-index:2}
header .pav{margin-left:0}

/* ===== 2) Couleurs des champs et des titres : jamais blanc sur blanc ===== */
:root{--f-bg:#fff;--f-tx:#0f1a15;--f-bd:#8fa399;--f-ph:#5d6e65;--f-lb:#1d2b24;--f-ttl:#0b1511;--f-ok:#0f7a4a;--f-er:#b42318;--f-er-bg:#fef3f2}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-surface="light"]){--f-bg:#0b1210;--f-tx:#f3f8f4;--f-bd:#5b7367;--f-ph:#9fb2a7;--f-lb:#dfe9e2;--f-ttl:#fff;--f-er:#ff8a80;--f-er-bg:#3a1512;--f-ok:#4cd694}}
:root[data-surface="dark"]{--f-bg:#0b1210;--f-tx:#f3f8f4;--f-bd:#5b7367;--f-ph:#9fb2a7;--f-lb:#dfe9e2;--f-ttl:#fff;--f-er:#ff8a80;--f-er-bg:#3a1512;--f-ok:#4cd694}
:root[data-surface="light"]{--f-bg:#fff;--f-tx:#0f1a15;--f-bd:#8fa399;--f-ph:#5d6e65;--f-lb:#1d2b24;--f-ttl:#0b1511;--f-er:#b42318;--f-er-bg:#fef3f2;--f-ok:#0f7a4a}

input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]),textarea,select{background:var(--f-bg)!important;color:var(--f-tx)!important;-webkit-text-fill-color:var(--f-tx);caret-color:var(--p);border:1.5px solid var(--f-bd);border-radius:10px;min-height:46px}
.qs input,.pfx input{background:transparent!important;border:0!important;min-height:0}
#q{border-radius:999px}
textarea{min-height:96px;line-height:1.45}
input::placeholder,textarea::placeholder{color:var(--f-ph);opacity:1;-webkit-text-fill-color:var(--f-ph)}
input:focus,textarea:focus,select:focus{border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 30%,transparent)}
select option{background:var(--f-bg);color:var(--f-tx)}
input:disabled,textarea:disabled,select:disabled{opacity:.6}
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:var(--f-tx)!important;box-shadow:0 0 0 1000px var(--f-bg) inset!important;caret-color:var(--f-tx)}
input[type=color]{padding:3px;min-height:40px}
.sheet input[type=file]{background:color-mix(in srgb,var(--p) 6%,var(--f-bg))!important}

/* Titres et libellés lisibles sur n'importe quelle surface */
h2,.sheet .top b,.mo .card h2,.card h2,.pdn,.dh b,.steps b{color:var(--f-ttl)}
label,.sheet label{color:var(--f-lb);font-weight:600;font-size:14px;margin:14px 0 6px}
.sheet .top b{font-size:18px}
header,header b,header small,header .logo{color:#fff}

/* ===== 3) Aide, erreurs et compteurs sous les champs ===== */
.req::after{content:" *";color:var(--f-er);font-weight:800}
.fh{display:block;margin:5px 2px 0;font-size:12.5px;line-height:1.35;color:var(--f-ph)}
.fe{display:none;margin:6px 2px 0;font-size:13px;font-weight:600;line-height:1.35;color:var(--f-er)}
.fe::before{content:"⚠ "}
.fld-bad .fe{display:block}
.fld-bad input,.fld-bad textarea,.fld-bad select,input.err,textarea.err,select.err{border-color:var(--f-er)!important;background:var(--f-er-bg)!important}
.fld-ok input:not([type=file]),.fld-ok textarea{border-color:var(--f-ok)}
.fc{float:right;font-size:12px;color:var(--f-ph);font-variant-numeric:tabular-nums}
.fp{display:block;margin:5px 2px 0;font-size:13px;font-weight:700;color:var(--p)}

/* ===== 4) Photos : aperçu avec suppression ===== */
.pvw{gap:10px}
.pvw .pv1{position:relative;width:76px;height:76px}
.pvw .pv1 img{width:76px;height:76px;object-fit:cover;border-radius:12px;border:2px solid var(--f-bd)}
.pvw .pv1 button{position:absolute;top:-8px;right:-8px;width:28px;height:28px;border-radius:50%;border:2px solid var(--f-bg);background:var(--f-er);color:#fff;font-size:15px;line-height:1;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pvw .pvn{align-self:center;font-size:13px;color:var(--f-lb);font-weight:600}
.pvw .pvb{align-self:center;font-size:13px;color:var(--p);font-weight:700}

/* ===== 5) Brouillon : bandeau discret ===== */
.drfb{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;background:color-mix(in srgb,var(--p) 10%,var(--card));border:1px solid color-mix(in srgb,var(--p) 35%,var(--bd));border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:13px;color:var(--f-lb)}
.drfb button{border:0;background:none;color:var(--p);font-weight:700;font-size:13px;cursor:pointer;padding:6px 4px;text-decoration:underline}

/* ===== 6) Récapitulatif avant envoi ===== */
.rcv{position:fixed;inset:0;z-index:500;background:rgba(9,20,15,.66);display:flex;align-items:flex-end;justify-content:center}
.rcv>div{background:var(--card);color:var(--tx);width:100%;max-width:480px;max-height:92vh;max-height:92dvh;overflow:auto;border-radius:20px 20px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px))}
@media(min-width:700px){.rcv{align-items:center}.rcv>div{border-radius:20px}}
.rcv h3{margin:0 0 4px;font-size:19px;color:var(--f-ttl)}
.rcv .sub{margin:0 0 12px;font-size:13.5px;color:var(--f-lb)}
.rcv dl{margin:0;display:grid;grid-template-columns:96px 1fr;gap:8px 12px;font-size:14.5px}
.rcv dt{color:var(--f-ph);font-weight:600}.rcv dd{margin:0;color:var(--f-tx);font-weight:600;word-break:break-word}
.rcv .ph4{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.rcv .ph4 img{width:72px;height:72px;object-fit:cover;border-radius:12px;border:2px solid var(--f-bd)}
.rcv .act{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:18px}
.rcv .act .b{min-height:50px;font-size:15px}

/* ===== 7) Squelette de chargement (remplacé dès que les articles arrivent) ===== */
.sk{background:var(--card);border:1px solid var(--bd);border-radius:var(--r,14px);overflow:hidden;padding-bottom:12px}
.sk .skp{aspect-ratio:1;background:var(--bd)}
.sk .skl{height:12px;margin:12px 12px 0;border-radius:6px;background:var(--bd)}
.sk .skl.s{width:45%}
.sk .skp,.sk .skl{position:relative;overflow:hidden}
.sk .skp::after,.sk .skl::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--card) 70%,transparent),transparent);transform:translateX(-100%);animation:skS 1.2s ease-in-out infinite}
@keyframes skS{to{transform:translateX(100%)}}

/* ===== 8) Chargement plus léger ===== */
.prod,.sk{content-visibility:auto;contain-intrinsic-size:auto 330px}
@media(prefers-reduced-motion:reduce){.sk .skp::after,.sk .skl::after{animation:none}}