/* ---------- La suggestion de la semaine (écrite par le chef) : une feuille blanche, un cadre tracé à la main, feuillage, écriture ---------- */
.sem{--sg:#3E6A2A;--sr:#B8352B;--sk:'Kaushan Script',cursive;--sc:'Caveat',cursive;--so:'Oswald',sans-serif;--sa:'Aleo',Georgia,serif;
  position:relative;width:min(100%,600px);margin:34px auto 0;padding:34px 34px 26px;background:#fff;color:#1f2a18;text-align:center;
  box-shadow:0 30px 60px -34px rgba(30,53,23,.45),0 2px 0 rgba(62,106,42,.06);transform:rotate(-.5deg);border-radius:3px}
.sem-cadre{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);overflow:visible;pointer-events:none}
.sem-cadre path{fill:none;stroke:var(--sg);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.sem.on .sem-cadre path{transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1);stroke-dashoffset:0}
.sem-brin{position:absolute;top:10px;width:38px;height:58px;overflow:visible;opacity:0;transition:opacity .5s .9s}
.sem-brin.g{left:16px;transform:rotate(-14deg)}.sem-brin.d{right:16px;transform:rotate(14deg)}
.sem-brin path{fill:none;stroke:var(--sg);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.sem.on .sem-brin{opacity:.9;animation:semSway 5s ease-in-out 2s infinite alternate}
.sem.on .sem-brin.d{animation-delay:2.6s}
.sem.on .sem-brin path{transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) .9s;stroke-dashoffset:0}
@keyframes semSway{from{transform:rotate(-14deg)}to{transform:rotate(-8deg)}}
.sem-brin.d{animation-name:semSwayD}
@keyframes semSwayD{from{transform:rotate(14deg)}to{transform:rotate(8deg)}}
.sem-kicker{font-family:var(--so);text-transform:uppercase;letter-spacing:.24em;font-size:11px;color:var(--sg);opacity:0;transform:translateY(6px);transition:opacity .6s .5s,transform .6s cubic-bezier(.4,0,.2,1) .5s}
.sem.on .sem-kicker{opacity:.85;transform:none}
.sem-titre{font-family:var(--sk);font-weight:400;font-style:normal;text-transform:none;letter-spacing:0;font-size:clamp(30px,4.6vw,46px);line-height:1.05;color:var(--sg);margin:8px 0 0}
.sem-titre .sem-w{display:inline-block;clip-path:inset(-10% 100% -10% 0);transition:clip-path .55s cubic-bezier(.4,0,.2,1) calc(.7s + var(--i) * .16s)}
.sem.on .sem-titre .sem-w{clip-path:inset(-10% 0 -10% 0)}
.sem-under{display:block;width:62%;height:12px;margin:-2px auto 0;overflow:visible}
.sem-under path{fill:none;stroke:var(--sr);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.sem.on .sem-under path{transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1) 1.6s;stroke-dashoffset:0}
.sem-list{margin:18px auto 0;max-width:480px;text-align:left}
.sem-d{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:0 10px;padding:8px 0;opacity:0;transform:translateX(-16px);transition:opacity .5s calc(1.9s + var(--i) * .16s),transform .6s cubic-bezier(.4,0,.2,1) calc(1.9s + var(--i) * .16s)}
.sem.on .sem-d{opacity:1;transform:none}
.sem-nom{font-family:var(--sa);font-size:clamp(16px,1.6vw,18px);line-height:1.3;min-width:0}
.sem-nom b{font-weight:700;font-style:normal;text-transform:none;letter-spacing:0;color:#1f2a18}
.sem-nom span{display:block;font-style:italic;font-size:.88em;color:#4a5a41}
.sem-pts{align-self:end;height:0;margin-bottom:6px;min-width:14px;border-bottom:2px dotted rgba(62,106,42,.4)}
.sem-prix{position:relative;font-family:var(--sc);font-style:normal;font-weight:600;font-size:clamp(20px,2vw,25px);color:var(--sr);white-space:nowrap;padding:2px 12px;display:inline-block;transform:scale(.7);opacity:0;transition:transform .5s cubic-bezier(.2,1.6,.4,1) calc(2.3s + var(--i) * .16s),opacity .3s calc(2.3s + var(--i) * .16s)}
.sem.on .sem-prix{transform:none;opacity:1}
.sem-prix svg{position:absolute;inset:-6px -6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible;pointer-events:none}
.sem-prix svg path{fill:none;stroke:var(--sr);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.sem.on .sem-prix svg path{transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1) calc(2.6s + var(--i) * .16s);stroke-dashoffset:0}
.sem-pied{margin-top:16px;font-family:var(--sc);font-size:17px;color:var(--sg);opacity:0;transform:rotate(-1.5deg);transition:opacity .8s 3s}
.sem.on .sem-pied{opacity:.9}
.sem-wrap{padding:8px 0 30px}
@media(max-width:700px){
  .sem{margin-top:24px;padding:26px 18px 20px;transform:rotate(-.3deg)}
  .sem-brin{width:28px;height:44px;top:8px}.sem-brin.g{left:10px}.sem-brin.d{right:10px}
  .sem-titre{font-size:30px}
  .sem-kicker{letter-spacing:.16em;font-size:10px}
  .sem-d{grid-template-columns:1fr auto;gap:0 8px}.sem-pts{display:none}
  .sem-nom{font-size:16px}.sem-prix{font-size:21px;padding:2px 9px}
}
@media(prefers-reduced-motion:reduce){
  .sem *,.sem{transition:none!important;animation:none!important}
  .sem-cadre path,.sem-brin path,.sem-under path,.sem-prix svg path{stroke-dashoffset:0}
  .sem-brin,.sem-kicker,.sem-d,.sem-prix,.sem-pied{opacity:1;transform:none}
  .sem-titre .sem-w{clip-path:none}
}

/* un tableau mis à jour se montre déjà écrit, sans rejouer l animation */
.sem.net,.sem.net *{transition:none!important}
