/* boost.css — ajouts additifs (n'écrase pas style.css, se charge après) */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Skeleton loader ---------- */
.skel-card{
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;padding-bottom:14px;
}
.skel-media,.skel-line{
  background:linear-gradient(90deg,var(--sand) 25%,rgba(255,255,255,.45) 50%,var(--sand) 75%);
  background-size:200% 100%;
  animation:skel-shimmer 1.3s ease-in-out infinite;
}
.skel-media{aspect-ratio:1/1;}
.skel-line{height:12px;border-radius:6px;margin:12px 14px 0;}
.skel-line.short{width:45%;}
@keyframes skel-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
@media (prefers-reduced-motion: reduce){
  .skel-media,.skel-line{animation:none;}
}

/* ---------- Toast "phrases sarcastiques" à l'ajout au panier ---------- */
.quip-toast{
  position:fixed;left:50%;bottom:24px;
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  max-width:min(92vw,360px);text-align:center;
  background:var(--ink);color:var(--white);
  padding:11px 16px;border-radius:12px;
  font-size:13px;font-weight:600;line-height:1.35;
  box-shadow:0 8px 22px rgba(0,0,0,.22);z-index:450;
  transition:opacity .25s ease, transform .25s ease;
}
.quip-toast.visible{opacity:1;transform:translate(-50%,0);}

/* ---------- Sauvegarde de progression (pied de page) ---------- */
.progress-backup{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  padding:0 0 16px;
}
.progress-backup button{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  font-size:12.5px;padding:8px 14px;border-radius:999px;
}
.progress-backup button:hover{color:var(--ink);border-color:var(--ink);}

/* ---------- Confirmation de commande (étape 3) ---------- */
.order-extra{
  background:var(--sand-light);border:1px dashed var(--line);
  border-radius:12px;padding:16px;margin:0 0 18px;
}
.order-extra .order-no{font-size:12px;color:var(--muted);letter-spacing:.04em;}
.order-extra .order-no b{color:var(--ink);font-family:ui-monospace,Menlo,Consolas,monospace;}
.order-extra .order-status{font-size:15px;margin:8px 0 12px;line-height:1.45;color:var(--ink);}
.order-track{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.order-track li{
  font-size:13px;color:var(--muted);
  opacity:0;transform:translateX(-8px);transition:opacity .4s ease, transform .4s ease;
}
.order-track li.in{opacity:1;transform:none;}

.mail-toast{
  position:fixed;top:14px;right:14px;max-width:320px;z-index:650;
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;box-shadow:0 10px 26px rgba(0,0,0,.2);
  font-size:12.5px;line-height:1.45;cursor:pointer;
  transform:translateX(120%);transition:transform .45s cubic-bezier(.2,.9,.3,1);
}
.mail-toast.visible{transform:translateX(0);}
.mail-toast .mail-from{color:var(--muted);font-size:11.5px;}
.mail-toast .mail-subject{font-weight:700;margin-top:2px;}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .container{padding:0 14px;}
  .nav-inner{padding:10px 14px;}
  .nav-right{gap:8px;}
  .saved-pill{padding:5px 10px;font-size:11.5px;}
  .saved-pill b{font-size:12.5px;}
  .cart-link{padding:8px 12px;font-size:13px;}

  /* Catalogue : 2 colonnes compactes (avant : 1 seule grosse colonne) */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:40px;}
  .card-body{padding:10px 10px 12px;gap:4px;}
  .card-name{font-size:13.5px;}
  .card-price{font-size:16px;}
  .card-media{font-size:36px;}
  .card-add button{padding:9px;font-size:12.5px;}

  /* Box mystère : carrousel horizontal (avant : 4 grosses cartes empilées) */
  .boxes-title{margin:22px 0 10px;font-size:18px;}
  .boxes-grid{
    display:flex;overflow-x:auto;gap:10px;
    margin:0 -14px 4px;padding:0 14px 10px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .boxes-grid::-webkit-scrollbar{display:none;}
  .boxes-grid .card{flex:0 0 44%;max-width:190px;scroll-snap-align:start;}
  .box-card-media{aspect-ratio:4/3;font-size:38px;}

  /* Filtres : une ligne scrollable, collée sous la nav.
     Même fond que la nav (opaque en clair, semi-transparent en sombre).
     top = hauteur exacte de la nav : 10 + 36 (bouton ☰) + 10 de marge + 1 de
     bordure = 57 px. Avec 55 px (hauteur d'avant l'ajout du bouton ☰), les
     filtres passaient 2 px SOUS la nav, et comme les deux fonds sont
     semi-transparents, cette bande de recouvrement faisait un trait plus
     sombre entre les deux. */
  .chips{
    position:sticky;top:57px;z-index:15;
    flex-wrap:nowrap;overflow-x:auto;gap:8px;
    padding:10px 14px;margin:0 -14px;
    background:var(--sand-light);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .chips::-webkit-scrollbar{display:none;}
  .chip{flex:0 0 auto;white-space:nowrap;padding:8px 14px;}

  /* Pas de trait de séparation entre la nav et la barre de filtres collée
     dessous : la bordure est rendue transparente plutôt que supprimée, pour
     que la nav garde exactement sa hauteur (les filtres restent pile
     accrochés dessous, sans interstice de 1 px). Seulement sur les pages
     qui ont des filtres (la boutique). */
  body:has(.chips) .nav{border-bottom-color:transparent !important;}

  .quip-toast{bottom:88px;}
  .mail-toast{left:14px;right:14px;max-width:none;}
}

@media (max-width:640px) and (prefers-color-scheme: dark){
  .chips{background:rgba(11,11,11,.85);}
  .chip:not(.active){background:rgba(255,255,255,.05);}
}

@media (max-width:420px){
  .saved-pill span:last-child{display:none;}
}