/* ===========================================================================
   Le casier — signature du concept A.
   Aucune image : grille et alveoles entierement en CSS (ASSET-MANIFEST id
   « casier-alveoles »), donc nettes a toute echelle.
   Trois etats : repos (epingle), actif (colonne collante), plein ecran.
   =========================================================================== */

.casier{
  --alveole:0px;               /* calcule par etat */
  --colonnes:4;
  background:var(--fond);
  border:1px solid var(--encre-12);
  border-radius:var(--rayon);
  padding:14px;
  box-shadow:0 18px 40px -30px rgba(47,37,33,.55);
}
.casier__grille{
  display:grid;
  grid-template-columns:repeat(var(--colonnes),var(--alveole));
  gap:calc(var(--alveole) * .16);
  justify-content:center;
}

/* --- une alveole --------------------------------------------------------- */
.alveole{
  width:var(--alveole);height:var(--alveole);border-radius:50%;
  background:var(--creux);
  box-shadow:inset 0 2px 5px rgba(47,37,33,.14), inset 0 -1px 0 rgba(255,255,255,.7);
  display:grid;place-items:center;position:relative;overflow:hidden;
  transition:box-shadow .18s ease;
}
.alveole--pleine{background:var(--al,var(--fond))}
/* L anneau est dessine par-dessus le visuel, sinon le recadrage le recouvrait. */
.alveole--pleine::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 max(3px,calc(var(--alveole) * .075)) var(--al,var(--encre));
}
/* Les fichiers de fruit officiels portent des trainees de compression sur leurs
   marges. L alveole etant ronde et decoupante, on agrandit legerement le visuel
   pour que ces marges tombent hors du cercle : c est un recadrage, pas une retouche. */
.alveole img{
  width:118%;height:118%;object-fit:cover;object-position:50% 46%;
  animation:pose .32s var(--geste) both;
}
@keyframes pose{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}
.alveole__retirer{
  position:absolute;inset:0;border:0;background:transparent;cursor:pointer;
  opacity:0;transition:opacity .15s ease;
}
.alveole--pleine:hover .alveole__retirer,
.alveole__retirer:focus-visible{opacity:1;background:rgba(252,246,236,.72)}
.alveole__retirer::after{content:"×";font-size:calc(var(--alveole) * .42);line-height:1}

/* --- compteur et prix ---------------------------------------------------- */
.casier__compteur{
  font-family:var(--titre);font-weight:700;letter-spacing:-.04em;line-height:.82;
  font-size:var(--t-compteur);display:block;
}
.casier__compteur small{font-size:.44em;color:var(--encre-38);letter-spacing:-.02em}
.casier__prix{font-family:var(--chiffre);font-variant-numeric:tabular-nums;font-size:var(--t-3);line-height:1.1}
.casier__prix .u{display:block;font-size:var(--t-7);font-family:var(--texte);color:var(--encre-60);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.casier__repere{font-size:var(--t-7);color:var(--encre-60);margin-top:4px}
.casier__repere s{color:var(--encre-38)}

/* --- selecteur de format 12 / 24 ----------------------------------------- */
.formats{display:inline-flex;background:var(--creux);border-radius:999px;padding:4px;gap:4px}
.formats button{
  border:0;background:transparent;border-radius:999px;padding:9px 20px;cursor:pointer;
  font-size:var(--t-6);letter-spacing:.02em;transition:background .15s ease;
}
.formats button[aria-pressed="true"]{background:var(--encre);color:var(--fond)}

/* --- etat repos : epingle en haut a droite -------------------------------- */
.casier--repos{--alveole:26px;--colonnes:4;position:fixed;top:76px;right:var(--marge);z-index:55;width:auto}
.casier--repos .casier__compteur{font-size:22px;text-align:center;margin-top:8px}
.casier--repos .casier__prix,.casier--repos .formats,.casier--repos .casier__repere{display:none}

/* --- etat actif : colonne collante --------------------------------------- */
.casier--actif{--alveole:70px}
.colonne-collante{position:sticky;top:104px}
@media (max-width:1100px){.casier--actif{--alveole:56px}}

/* --- etat plein ecran ---------------------------------------------------- */
.casier--plein{--alveole:min(9.4vh,88px);}

/* --- barre basse mobile --------------------------------------------------- */
.barre{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  min-height:calc(72px + env(safe-area-inset-bottom,0px));align-items:center;gap:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--fond);border-top:1px solid var(--encre-12);
  box-shadow:none;
}
.barre__compteur{font-family:var(--titre);font-weight:700;font-size:26px;letter-spacing:-.03em}
.barre__prix{font-family:var(--chiffre);font-size:15px;line-height:1.2;color:var(--encre-60)}
.barre .bouton{min-height:44px;margin-left:auto;padding:0 20px}
@media (max-width:900px){
  .barre{display:flex}
  .casier--repos{display:none}
  body.avec-barre{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  /* En dessous de 900 px la barre basse joue le role du casier epingle :
     le laisser collant en plus le faisait passer par-dessus la grille des
     saveurs et intercepter les clics. */
  .colonne-collante{position:static;top:auto}
}

/* --- feuille / plein ecran ------------------------------------------------ */
.voile{
  position:fixed;inset:0;z-index:80;background:rgba(47,37,33,.32);
  display:grid;place-items:center;padding:24px;
}
.voile[hidden]{display:none}
.feuille{
  background:var(--fond);border-radius:20px;padding:28px;max-height:92vh;overflow:auto;
  box-shadow:0 40px 90px -40px rgba(47,37,33,.8);
}
@media (max-width:900px){
  .voile{place-items:end stretch;padding:0}
  .feuille{border-radius:20px 20px 0 0;max-height:88vh;width:100%}
}

@media (prefers-reduced-motion:reduce){
  .alveole img{animation:none}
}

@media(max-width:400px){
  .barre{gap:10px;padding-inline:12px}
  .barre__prix{display:none}
  .barre .bouton{font-size:14px;padding-inline:16px}
}

.casier-page{padding-top:28px}
.casier-page h1{font-size:clamp(34px,5vw,64px);line-height:1.05}
.casier-intro{margin:16px 0 24px}
.choix-format h2,.titre-saveurs{font-size:22px;line-height:1.25;margin:0 0 14px}
.formats-haut{display:grid;grid-template-columns:1fr 1fr;max-width:500px;border-radius:16px}
.formats-haut button{display:flex;flex-direction:column;gap:6px;align-items:center;border-radius:12px;padding:14px 20px;min-height:76px;font-size:16px}
.formats-haut button span{font-size:15px}
.format-detail{font-size:14px;margin:12px 0 26px;color:var(--encre-60)}
.barre__compteur{white-space:nowrap;flex-shrink:0}
.barre .bouton{line-height:1.2;text-align:center}
@media(max-width:900px){
  .page-casier .pied{margin-top:40px;padding:32px 0}
  .page-casier .colonnes{gap:24px}
}