/* « Ajouter depuis l'historique » dans « Modifier ma semaine » (13/10/2026).
   Écrite à la main : le CADRE du panneau (à droite, ou en feuille sur téléphone), le bouton qui
   l'ouvre, le choix du jour, le message « Annuler ». Son CONTENU (recherche, sources, filtres,
   semaines repliables) vient du handoff design_handoff_ajout_plat : ajout-historique.css, générée
   par scripts/ajout-plat-css.py. Chaque règle passe par une classe ht-, rien ne fuit hors de .es. */

.es .ht-ent{grid-column:1/-1;margin-top:6px}
.es .ht-ouv{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px 0 14px;border:1.5px solid var(--line2);border-radius:999px;background:var(--card);cursor:pointer;
  font:800 14.5px var(--fd);color:var(--ink);box-shadow:0 2px 0 var(--line);transition:transform .3s var(--spring),background .2s,border-color .2s,box-shadow .2s}
.es .ht-ouv svg{color:var(--orange);flex:none}
.es .ht-ouv:hover{transform:translateY(-2px);border-color:var(--orange);box-shadow:0 6px 0 var(--orange-bg)}
.es .ht-ouv.on{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 2px 0 var(--orange-d)}
.es .ht-ouv.on svg{color:#fff}
.es .ht-ouv:focus-visible,.es .ht .ah-x:focus-visible,.es .ht .ah-it:focus-visible,.es .ht .ah-wh:focus-visible,.es .ht-c:focus-visible,.es .ht-back:focus-visible,.es .ht-msg button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* La page laisse la place au panneau. Pas de transition ici : la vague du calendrier (htVague,
   popotam-semaine-ui.js) mesure avant et après, puis anime chaque jour jusqu'à sa place. */
@media (min-width:761px){
  .es.ht-on .pg{margin-right:calc(var(--pw) + 24px);margin-left:max(0px,calc((100% - var(--pw) - 24px - 1120px)/2))}
}

.es .ht{position:fixed;z-index:25;top:16px;right:16px;bottom:96px;width:var(--pw);display:flex;flex-direction:column;background:var(--card);border:1.5px solid var(--line);border-radius:28px;
  box-shadow:0 30px 60px -30px rgba(80,45,15,.45);overflow:hidden}

.es .ht-art{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--tint,var(--sun-bg))}
.es .ht-art svg{width:40px;height:40px}
.es .ht-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.es .ht-tx b{font:700 14.5px/1.25 var(--fb);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.es .ht-tx small{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12px;color:var(--muted)}

.es .ht-ld{display:flex;align-items:center;gap:10px;padding:8px 4px 14px;color:var(--ink2);font-weight:600}
.es .ht-ld .ldp{width:44px;height:44px;flex:none}
.es .ht-ld .ldp svg{width:100%;height:100%}
.es .ht-sk{display:flex;flex-direction:column;gap:8px}
.es .ht-sk i{display:block;height:70px;border-radius:18px;background:linear-gradient(90deg,var(--cream) 0%,var(--cream2) 50%,var(--cream) 100%);background-size:200% 100%;animation:ht-sk 1.2s linear infinite}
@keyframes ht-sk{to{background-position:-200% 0}}
.es .ht-vide{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 14px}
.es .ht-vide b{font:800 17px var(--fd)}
.es .ht-vide p{margin:0;font-size:14px;color:var(--ink2);line-height:1.45}
.es .ht-vp{width:78px;height:78px}
.es .ht-vp svg{width:100%;height:100%}

/* choisir le jour (le comportement d'avant, au toucher d'un plat) */
.es .ht-back{display:inline-flex;align-items:center;gap:4px;min-height:36px;margin:0 0 8px -4px;padding:0 12px 0 4px;border:0;border-radius:999px;background:none;cursor:pointer;font:700 13.5px var(--fb);color:var(--ink2)}
.es .ht-back:hover{background:var(--cream);color:var(--ink)}
.es .ht-back svg{width:18px;height:18px}
.es .ht-pp{display:flex;align-items:center;gap:11px;padding:10px;margin-bottom:12px;border-radius:18px;background:var(--cream);border:1.5px dashed var(--line2)}
.es .ht-jours{display:flex;flex-direction:column;gap:7px}
.es .ht-j{display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:stretch}
.es .ht-jn{display:flex;flex-direction:column;justify-content:center;padding-left:2px}
.es .ht-jn b{font:800 14px var(--fd)}
.es .ht-jn small{font-size:11.5px;color:var(--muted)}
.es .ht-c{min-width:0;min-height:50px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:6px 10px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;text-align:left;
  transition:transform .25s var(--spring),border-color .2s,background .2s}
.es .ht-c small{display:inline-flex;align-items:center;gap:4px;font:700 11px var(--fb);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.es .ht-c span{max-width:100%;font:600 13px/1.2 var(--fb);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es .ht-c.libre{border-style:dashed;border-color:var(--line2);background:rgba(255,255,255,.6)}
.es .ht-c.libre span{color:var(--green-d);font-weight:700}
.es .ht-c.batch{border-color:var(--sun)}
.es .ht-c:not([disabled]):hover{transform:scale(1.03);border-color:var(--orange);background:var(--orange-bg)}
.es .ht-c[disabled]{cursor:default;opacity:.5;background:var(--cream)}
.es .ht-bt{margin-left:4px;padding:0 6px;border-radius:999px;background:var(--sun-bg);color:#9A6A00;font-style:normal;text-transform:none;letter-spacing:0}

/* le plat glissé depuis le panneau */
.es .dish.ht-ghost{width:150px;height:auto;min-height:118px}

/* le message « Annuler » */
.es .ht-msg{position:fixed;z-index:45;left:50%;bottom:96px;transform:translateX(-50%);width:max-content;max-width:min(560px,calc(100vw - 32px));display:flex;align-items:center;gap:14px;
  padding:10px 10px 10px 18px;border-radius:20px;background:var(--dark);color:#fff;box-shadow:0 20px 40px -18px rgba(51,38,27,.6)}
.es .ht-mt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:14px;line-height:1.35}
.es .ht-mt small{font-size:12.5px;color:#FFD9A8}
.es .ht-msg button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 15px;border:0;border-radius:999px;background:#fff;cursor:pointer;font:800 13.5px var(--fd);color:var(--ink)}
.es .ht-msg button:hover{background:var(--sun-bg)}
.es .ht-msg.batch{border:2px solid var(--sun)}

.es .ht-scrim{position:fixed;inset:0;z-index:39;background:rgba(51,38,27,.35);opacity:0;transition:opacity .25s}
.es .ht-scrim.on{opacity:1}

/* téléphone : une feuille, de gros boutons ; toucher un plat puis son jour */
@media (max-width:760px){
  .es .ht-ent{margin-top:4px}
  .es .ht-ouv{width:100%;justify-content:center;min-height:50px;font-size:15px}
  .es .ht.sheet{top:auto;left:0;right:0;bottom:0;width:auto;max-height:86vh;max-height:86dvh;border-radius:26px 26px 0 0;border-bottom:0;z-index:40;padding-bottom:env(safe-area-inset-bottom)}
  .es .ht.sheet::before{content:"";position:absolute;left:50%;top:7px;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:var(--line2);z-index:3}
  .es .ht-j{grid-template-columns:72px minmax(0,1fr) minmax(0,1fr)}
  .es .ht-c{min-height:56px}
  .es .ht-c span{font-size:13.5px}
  .es .ht-msg{bottom:150px}
}
@media (prefers-reduced-motion:reduce){
  .es .ht-sk i{animation:none}
}