:root{
    --bg:#0c130d;
    --bg-deep:#080d09;
    --surface:#151f17;
    --surface-2:#1c2a1f;
    --line:#26362a;
    --parchment:#ffffff;
    --parchment-2:#f2f2f2;
    --green:#74d24f;
    --green-deep:#2f6b3a;
    --ivory:#f4f1e4;
    --muted:#9db29a;
    --amber:#e0a94a;
    --danger:#e08a6f;
    --ok:#74d24f;
    --radius:14px;
  }
  *,*::before,*::after{ box-sizing:border-box; }
  html{ background:var(--bg); }
  body{
    margin:0;
    background:
      radial-gradient(1100px 620px at 12% -8%, rgba(116,210,79,0.10), transparent 60%),
      radial-gradient(900px 500px at 100% 0%, rgba(224,169,74,0.06), transparent 55%),
      var(--bg);
    color:var(--ivory);
    font-family:"Manrope", system-ui, -apple-system, sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{
    max-width:1080px;
    margin:0 auto;
    padding-inline:20px;
  }
  a{ color:var(--green); }

  /* ---------- Hero / header ---------- */
  header.hero{
    padding-block:44px 28px;
    border-bottom:1px solid var(--line);
  }
  .hero-top{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
  }
  .hero-top img.logo{
    width:84px;
    height:84px;
    flex:none;
    filter:drop-shadow(0 6px 16px rgba(0,0,0,0.45));
  }
  .hero-title h1{
    font-family:"Anton", sans-serif;
    font-weight:400;
    letter-spacing:0.5px;
    font-size:clamp(28px, 5vw, 44px);
    margin:0 0 4px;
    text-wrap:balance;
    color:var(--ivory);
  }
  .hero-title p.eyebrow{
    margin:0;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:12px;
    font-weight:700;
    color:var(--green);
  }
  .hero-copy{
    max-width:62ch;
    color:var(--muted);
    font-size:15.5px;
    margin:20px 0 0;
  }
  .hero-copy strong{ color:var(--ivory); }

  .shipping-note{
    max-width:62ch;
    margin:14px auto 0;
    text-align:center;
    color:var(--amber);
    font-size:13.5px;
    font-weight:600;
  }

  #readonly-banner{
    margin-top:18px;
    padding:12px 16px;
    background:rgba(224,138,111,0.12);
    border:1px solid rgba(224,138,111,0.4);
    border-radius:10px;
    color:var(--ivory);
    font-size:14px;
  }

  /* ---------- Convoy tracker ---------- */
  .convoy{
    margin-top:26px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:18px 20px;
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
  }
  .convoy.is-full{
    border-color:var(--green-deep);
    background:linear-gradient(180deg, rgba(116,210,79,0.10), var(--surface) 70%);
  }
  .convoy-label{
    font-family:"Anton", sans-serif;
    font-weight:400;
    letter-spacing:0.3px;
    font-size:18px;
    color:var(--ivory);
    flex:none;
  }
  .convoy.is-full .convoy-label{ color:var(--green); }
  .convoy-pips{
    display:flex;
    gap:7px;
  }
  .pip{
    width:22px;
    height:22px;
    border-radius:6px;
    background:var(--surface-2);
    border:1px solid var(--line);
  }
  .pip.is-filled{
    background:var(--green);
    border-color:var(--green);
    box-shadow:0 0 0 3px rgba(116,210,79,0.16);
  }
  .convoy-count{
    margin-left:auto;
    font-variant-numeric:tabular-nums;
    color:var(--muted);
    font-size:14px;
    font-weight:600;
  }

  .convoy-ready{
    margin-top:10px;
    background:linear-gradient(180deg, rgba(116,210,79,0.16), rgba(116,210,79,0.06));
    border:1px solid var(--green-deep);
    border-radius:var(--radius);
    padding:12px 18px;
    color:var(--green);
    font-weight:800;
    font-size:14.5px;
    text-align:center;
  }

  .admin-order-action{
    margin-top:10px;
    display:flex;
    justify-content:flex-end;
  }
  .btn-order-done{
    font-family:inherit;
    font-weight:700;
    font-size:13.5px;
    border-radius:999px;
    border:1px solid var(--green-deep);
    background:var(--green);
    color:#0c1a0d;
    padding:8px 16px;
    cursor:pointer;
  }
  .btn-order-done:hover{ filter:brightness(1.06); }
  .btn-order-done:disabled{ opacity:0.6; cursor:default; }
  .btn-shipping{ background:var(--amber); border-color:#a67629; }

  .manifest-ordered-tag{
    color:var(--green);
    font-weight:700;
    font-size:12px;
  }
  .manifest-subitems li.status-delivered{ opacity:0.55; }

  .status-badge{
    font-size:11px;
    font-weight:700;
    padding:3px 9px;
    border-radius:999px;
    white-space:nowrap;
  }
  .status-badge.status-reserved{ background:rgba(157,178,154,0.16); color:var(--muted); }
  .status-badge.status-ordered{ background:rgba(224,169,74,0.16); color:var(--amber); }
  .status-badge.status-shipping{ background:rgba(224,169,74,0.28); color:var(--amber); }
  .status-badge.status-delivered{ background:rgba(116,210,79,0.16); color:var(--green); }

  .paid-badge{
    font-family:inherit;
    font-size:11px;
    font-weight:700;
    padding:3px 9px;
    border-radius:999px;
    white-space:nowrap;
    border:1px solid var(--danger);
    background:none;
    color:var(--danger);
    cursor:pointer;
  }
  .paid-badge.is-paid{ border-color:var(--green-deep); color:var(--green); }
  span.paid-badge{ cursor:default; }

  .manifest-mark-delivered{
    font-family:inherit;
    font-size:11.5px;
    font-weight:700;
    border:1px solid var(--green-deep);
    background:none;
    color:var(--green);
    padding:4px 10px;
    border-radius:999px;
    cursor:pointer;
    flex:none;
  }
  .manifest-mark-delivered:hover{ background:rgba(116,210,79,0.14); }

  .btn-purge-delivered{
    font-family:inherit;
    font-size:11.5px;
    font-weight:700;
    border:1px solid var(--danger);
    background:none;
    color:var(--danger);
    padding:5px 12px;
    border-radius:999px;
    cursor:pointer;
  }
  .btn-purge-delivered:hover{ background:rgba(224,138,111,0.14); }
  .btn-purge-delivered.is-confirm{ background:var(--danger); color:#2a0f0a; }
  .btn-purge-delivered:disabled{ opacity:0.6; cursor:default; }

  .recap{
    margin-top:10px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px 20px;
  }
  .recap-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
  }
  .recap-title{
    text-transform:uppercase;
    letter-spacing:1.2px;
    font-size:11px;
    font-weight:700;
    color:var(--muted);
  }
  .btn-copy-recap{
    font-family:inherit;
    font-size:11.5px;
    font-weight:700;
    border:1px solid var(--line);
    background:var(--surface-2);
    color:var(--ivory);
    padding:5px 11px;
    border-radius:999px;
    cursor:pointer;
  }
  .btn-copy-recap:hover{ border-color:var(--green-deep); }
  .recap-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .recap-list li{
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:13.5px;
  }
  .recap-name{ color:var(--ivory); font-weight:700; }
  .recap-detail{ color:var(--amber); font-variant-numeric:tabular-nums; text-align:right; }
  .recap-total{
    margin-top:10px;
    padding-top:10px;
    border-top:1px dashed var(--line);
    text-align:right;
    font-weight:800;
    color:var(--ivory);
    font-size:14px;
  }

  /* ---------- Suivi de commande ---------- */
  .track-order{
    margin-top:22px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px 20px;
  }
  .track-order h2{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    font-weight:800;
    margin:0 0 10px;
    color:var(--ivory);
  }
  #track-form{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  #track-form input{
    flex:1;
    min-width:160px;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:8px;
    padding:9px 10px;
    color:var(--ivory);
    font-family:inherit;
    font-size:14px;
  }
  .btn-track{
    font-family:inherit;
    font-weight:700;
    font-size:13.5px;
    border-radius:999px;
    border:1px solid var(--green-deep);
    background:var(--green);
    color:#0c1a0d;
    padding:8px 16px;
    cursor:pointer;
  }
  .btn-track:hover{ filter:brightness(1.06); }
  #track-results{ margin-top:12px; }
  .track-empty{ color:var(--muted); font-size:13.5px; margin:0; }
  .track-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .track-list li{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:13.5px;
    padding:8px 10px;
    background:var(--surface-2);
    border-radius:8px;
  }
  .track-item{ color:var(--ivory); font-weight:700; flex:1; }

  /* ---------- Confetti ---------- */
  .confetti-container{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:2000;
    overflow:hidden;
  }
  .confetti-piece{
    position:absolute;
    top:-12px;
    width:8px;
    height:14px;
    opacity:0.9;
    animation-name:confetti-fall;
    animation-timing-function:ease-in;
    animation-fill-mode:forwards;
  }
  @keyframes confetti-fall{
    to{ transform:translateY(105vh) rotate(360deg); opacity:0.3; }
  }

  /* ---------- Sections ---------- */
  .shop-section{
    padding-block:36px 8px;
  }
  .shop-section h2, .manifest h2{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:"Anton", sans-serif;
    font-weight:400;
    letter-spacing:0.4px;
    font-size:22px;
    margin:0 0 18px;
    color:var(--ivory);
  }
  .claw{ color:var(--green); display:inline-flex; }

  .card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    gap:16px;
  }

  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .card-photo{
    position:relative;
    background:linear-gradient(180deg, var(--parchment), var(--parchment-2));
    aspect-ratio:4/3.4;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px;
  }
  .card-photo img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    filter:drop-shadow(0 6px 10px rgba(0,0,0,0.18));
    cursor:zoom-in;
  }

  .lightbox{
    position:fixed;
    inset:0;
    background:rgba(4,8,5,0.92);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1000;
    padding:32px;
    cursor:zoom-out;
  }
  .lightbox[hidden]{ display:none; }
  .lightbox img{
    max-width:min(92vw, 900px);
    max-height:88vh;
    object-fit:contain;
    border-radius:10px;
    background:#fff;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  .lightbox-close{
    position:fixed;
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ivory);
    font-size:18px;
    line-height:1;
    cursor:pointer;
  }
  body.lightbox-open{ overflow:hidden; }
  .face-toggle{
    position:absolute;
    left:50%;
    bottom:8px;
    transform:translateX(-50%);
    display:flex;
    background:rgba(12,19,13,0.72);
    border-radius:999px;
    padding:3px;
    gap:2px;
  }
  .face-toggle[hidden]{ display:none; }
  .face-btn{
    font-family:inherit;
    font-size:11px;
    font-weight:700;
    border:none;
    background:transparent;
    color:var(--muted);
    padding:5px 11px;
    border-radius:999px;
    cursor:pointer;
  }
  .face-btn.is-active{
    background:var(--green);
    color:#0c1a0d;
  }
  .card-body{
    padding:14px 16px 16px;
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
  }
  .card-body h3{
    margin:0;
    font-size:16px;
    font-weight:800;
    color:var(--ivory);
  }
  .card-note{
    margin:0;
    font-size:13px;
    color:var(--muted);
    flex:1;
  }
  .card-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:4px;
  }
  .color-field{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .color-field label{
    font-size:12px;
    color:var(--muted);
    font-weight:600;
  }
  .color-field select{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:8px;
    padding:7px 9px;
    color:var(--ivory);
    font-family:inherit;
    font-size:13px;
    flex:1;
    min-width:0;
  }
  .price{
    font-variant-numeric:tabular-nums;
    font-weight:800;
    color:var(--amber);
    font-size:15px;
  }
  .btn-reserve, .btn-confirm{
    font-family:inherit;
    font-weight:700;
    font-size:13.5px;
    border-radius:999px;
    border:1px solid var(--green-deep);
    background:var(--green);
    color:#0c1a0d;
    padding:8px 16px;
    cursor:pointer;
  }
  .btn-reserve:hover, .btn-confirm:hover{ filter:brightness(1.06); }
  .btn-reserve:focus-visible, .btn-confirm:focus-visible, input:focus-visible{
    outline:2px solid var(--amber);
    outline-offset:2px;
  }
  body.read-only .btn-reserve{ display:none; }

  .reserve-form{
    margin-top:8px;
    padding-top:10px;
    border-top:1px dashed var(--line);
    flex-direction:column;
    gap:8px;
  }
  .reserve-form:not([hidden]){ display:flex; }
  .reserve-form[hidden]{ display:none; }
  .reserve-form label{
    font-size:12px;
    color:var(--muted);
    font-weight:600;
  }
  .reserve-form input, .reserve-form select{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:8px;
    padding:9px 10px;
    color:var(--ivory);
    font-family:inherit;
    font-size:14px;
  }
  .size-fixed{
    margin:0;
    font-size:12.5px;
    color:var(--muted);
    font-style:italic;
  }
  .form-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .form-msg{ font-size:12.5px; color:var(--muted); }
  .form-msg.is-error{ color:var(--danger); }
  .form-msg.is-ok{ color:var(--ok); font-weight:700; }
  .btn-confirm:disabled{ opacity:0.6; cursor:default; }

  /* ---------- Manifest ---------- */
  .manifest{ padding-block:36px 48px; }
  .manifest-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:18px;
  }
  .manifest-header h2{ margin:0; }
  .manifest-header-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .manifest-empty{ color:var(--muted); font-size:14px; }
  .manifest-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:2px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
  }
  .manifest-group{ border-bottom:1px solid var(--line); }
  .manifest-group:last-child{ border-bottom:none; }
  .manifest-group-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 16px;
    background:var(--surface-2);
  }
  .manifest-group-title{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .manifest-pseudo{ color:var(--ivory); font-weight:700; }
  .manifest-group-count{ font-size:11.5px; font-weight:700; color:var(--muted); white-space:nowrap; }
  .manifest-subitems{ list-style:none; margin:0; padding:0; }
  .manifest-subitems li{
    padding:9px 16px 9px 26px;
    font-size:13.5px;
    color:var(--muted);
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
    border-top:1px solid var(--line);
  }
  .manifest-subitems li:first-child{ border-top:none; }
  .manifest-item{ color:var(--green); font-weight:600; }
  .manifest-subitems li time{ margin-left:auto; font-size:12px; color:var(--muted); opacity:0.8; }
  .manifest-cancel{
    font-family:inherit;
    font-size:11.5px;
    font-weight:700;
    border:1px solid var(--danger);
    background:none;
    color:var(--danger);
    padding:4px 10px;
    border-radius:999px;
    cursor:pointer;
    flex:none;
  }
  .manifest-cancel:hover{ background:rgba(224,138,111,0.14); }
  .manifest-cancel:disabled{ opacity:0.5; cursor:default; }
  .manifest-edit-toggle{
    font-family:inherit;
    font-size:11.5px;
    font-weight:700;
    border:1px solid var(--line);
    background:none;
    color:var(--muted);
    padding:4px 10px;
    border-radius:999px;
    cursor:pointer;
    flex:none;
  }
  .manifest-edit-toggle:hover{ border-color:var(--green-deep); color:var(--ivory); }
  .manifest-edit-row{
    flex-basis:100%;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:8px;
    padding-top:8px;
    border-top:1px dashed var(--line);
  }
  .manifest-edit-row[hidden]{ display:none; }
  .manifest-edit-row label{
    font-size:12px;
    color:var(--muted);
    font-weight:600;
  }
  .manifest-edit-row select{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:8px;
    padding:6px 8px;
    color:var(--ivory);
    font-family:inherit;
    font-size:13px;
  }
  .btn-edit-save{
    font-family:inherit;
    font-weight:700;
    font-size:12.5px;
    border-radius:999px;
    border:1px solid var(--green-deep);
    background:var(--green);
    color:#0c1a0d;
    padding:6px 14px;
    cursor:pointer;
  }
  .btn-edit-save:disabled{ opacity:0.6; cursor:default; }
  .btn-edit-cancel{
    font-family:inherit;
    font-weight:700;
    font-size:12.5px;
    border-radius:999px;
    border:1px solid var(--line);
    background:none;
    color:var(--muted);
    padding:6px 14px;
    cursor:pointer;
  }
  .btn-edit-cancel:hover{ color:var(--ivory); }

  footer.site-footer{
    border-top:1px solid var(--line);
    padding-block:22px 40px;
    color:var(--muted);
    font-size:13px;
  }
  footer.site-footer p{ margin:0 0 6px; }
  .admin-zone{ margin-top:14px; }
  .admin-link{
    background:none;
    border:none;
    padding:0;
    color:var(--muted);
    font-size:12px;
    text-decoration:underline;
    cursor:pointer;
    font-family:inherit;
  }
  .admin-link:hover{ color:var(--green); }
  #admin-form:not([hidden]){
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
  }
  #admin-form[hidden]{ display:none; }
  #admin-form label{ font-size:12px; color:var(--muted); }
  #admin-form input{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:8px;
    padding:7px 9px;
    color:var(--ivory);
    font-family:inherit;
    font-size:13px;
  }
  .admin-unlock{
    font-family:inherit;
    font-weight:700;
    font-size:12.5px;
    border-radius:999px;
    border:1px solid var(--green-deep);
    background:var(--green);
    color:#0c1a0d;
    padding:6px 14px;
    cursor:pointer;
  }
  #admin-panel:not([hidden]){ padding-block:8px 40px; }

  @media (max-width:480px){
    .hero-top{ gap:14px; }
    .hero-top img.logo{ width:64px; height:64px; }
    .convoy{ padding:14px 16px; }
    .convoy-count{ margin-left:0; width:100%; }
  }