/* La rangée « Ta semaine » (handoff Refontes/design_handoff_rangee_semaine, 01/10/2026),
   reprise de rangee-semaine-reference.html. Toutes les classes sont préfixées tw- (l'appli a
   déjà .go, .chip, .x...), les couleurs du design sont posées sur .tw, et les « container
   queries » de la maquette deviennent la borne téléphone de l'appli (600 px, cf. app-mobile.css). */
.tw{--cream:#FFF8EA;--card:#fff;--line2:#EEDFC2;--ink:#2A211B;--ink2:#6A5C4C;--muted:#7A6A58;
  --green:#33A15B;--green-d:#23733F;--green-bg:#E6F3E9;--green-line:#C6E4CE;--sun-bg:#FFF1D2;
  --orange:#F0682F;--orange-d:#B5440F;--orange-bg:#FCE3D8;--pill:999px;--spring:cubic-bezier(.3,1.45,.45,1);
  --fd:"Bricolage Grotesque",system-ui,sans-serif;--fb:"Hanken Grotesk",system-ui,sans-serif;
  position:relative;flex:1;min-width:0;font-family:var(--fb);color:var(--ink);line-height:1.5}
.tw *{box-sizing:border-box}
.tw button{font:inherit;color:inherit}
.tw-r{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;scroll-snap-type:x proximity}
.tw-r::-webkit-scrollbar{display:none}
.tw.tw-ov::after{content:"";position:absolute;right:0;top:0;bottom:4px;width:34px;background:linear-gradient(90deg,rgba(255,251,240,0),var(--bg,#FFFBF0));pointer-events:none}
.tw-p{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px 0 6px;border-radius:var(--pill);background:var(--cream);border:1.5px solid var(--line2);cursor:pointer;
  transition:transform .28s var(--spring),border-color .16s,background .16s;white-space:nowrap}
.tw-p:hover{border-color:var(--c-line,var(--line2));background:var(--card)}
.tw-p:active{transform:scale(.95)}
.tw-i{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--c-bg);color:var(--c-ink)}
.tw-i svg{width:24px;height:24px;overflow:visible}
.tw-i.tw-ic svg{width:17px;height:17px}
.tw-stack{display:flex}
.tw-stack .tw-i{width:30px;height:30px;border:2px solid var(--cream);margin-left:-11px}
.tw-stack .tw-i:first-child{margin-left:0}
.tw-stack .tw-i svg{width:21px;height:21px}
.tw-p b{font-family:var(--fd);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tw-p .tw-l{display:inline-flex;align-items:center;gap:3px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.tw-ar{color:var(--muted);margin-left:-3px;display:grid}
.tw-ar svg{width:13px;height:13px}
.tw-prod{--c-bg:var(--green-bg);--c-ink:var(--green-d);--c-line:var(--green-line)}
.tw-kcal{--c-bg:var(--sun-bg);--c-ink:#8A5A00;--c-line:#F4D88E}
.tw-shop{--c-bg:var(--orange-bg);--c-ink:var(--orange-d);--c-line:#F6C3AC}
.tw-p.tw-inv{background:var(--card);border-style:dashed;border-color:var(--green-line);padding-right:0;gap:0}
.tw-inv .tw-go{display:inline-flex;align-items:center;gap:9px;min-height:41px;padding:0 6px;border:0;background:none;cursor:pointer}
.tw-inv .tw-go .tw-l{color:var(--green-d);font-weight:800;font-family:var(--fd);font-size:14.5px}
.tw-inv .tw-x{width:44px;min-height:41px;display:grid;place-items:center;color:var(--muted);border:0;border-left:1.5px dashed var(--green-line);background:none;cursor:pointer;border-radius:0 var(--pill) var(--pill) 0;transition:color .16s,background .16s}
.tw-inv .tw-x:hover{color:var(--ink);background:var(--cream)}
.tw-p.tw-more{padding:0 15px;gap:6px;background:var(--card)}
.tw-more b{font-size:15px}
.tw-p .tw-l.tw-s{display:none}
.tw.tw-intro .tw-p{animation:tw-in .5s var(--spring) both}
@keyframes tw-in{from{opacity:0;transform:translateY(8px) scale(.9)}}
.tw-p.tw-new{animation:tw-in .45s var(--spring) both}
.tw-p.tw-bye{animation:tw-out .32s cubic-bezier(.4,0,1,.6) forwards}
@keyframes tw-out{to{opacity:0;transform:scale(.7);margin-right:calc(-1 * var(--tw-w,140px) - 8px)}}
.tw-p.tw-morph{animation:tw-morph .5s var(--spring)}
@keyframes tw-morph{40%{transform:scale(1.06)}}

/* Sur ordinateur, la rangée partage la ligne des semaines (« Cette semaine · Planifier le
   mois ») et s'aligne à DROITE, sans ajouter de hauteur. margin-left:auto, jamais
   justify-content:flex-end : le débordement doit partir à droite pour que la mesure le voie. */
.tw-ligne{display:flex;align-items:center;gap:12px;margin:14px 0 4px}
.tw-ligne>.courses-week-toggle{flex:none;margin:0}
.tw-ligne .tw-vr{width:1px;height:26px;background:#EEDFC2;flex:none}
.tw-ligne .tw-r>:first-child{margin-left:auto}
.tw-ligne.tw-solo .tw-r>:first-child{margin-left:0}

/* L'ARRIVÉE SUR UN BLOC : UNE AURA, UNE SEULE PULSATION (retours de Jérémy, 01/10/2026).
   Elle était coupée sur les côtés : #view coupe ce qui dépasse (`overflow-x: clip`, cf.
   styles.css, pour que les écrans qui glissent ne fassent pas défiler la page) et le bloc en prend
   toute la largeur. Élargir `overflow-clip-margin` NE SUFFIT PAS : Chrome ne l'applique que si la
   coupe vaut sur les deux axes, et ici seul x est coupé. Pendant l'aura, et seulement pendant elle
   (:has), #view ne coupe donc plus rien : aucun glissement ne joue à ce moment-là, et une ombre ne
   fait jamais défiler la page. Le bloc passe au premier plan, sinon la section suivante se peint
   par-dessus. Deux ombres à chaque étape, sinon elles ne s'interpolent pas. */
#hzPP{--tw-a:rgba(51,161,91,.5);--tw-g:rgba(51,161,91,.3);scroll-margin-top:16px}
section[data-nks]{--tw-a:rgba(246,166,9,.55);--tw-g:rgba(246,166,9,.32);scroll-margin-top:16px}
#view:has(.tw-onde){overflow-x:visible}
.tw-onde{position:relative;z-index:5;animation:tw-aura 1.3s cubic-bezier(.2,.7,.3,1) both}
@keyframes tw-aura{
  0%{box-shadow:0 0 0 0 var(--tw-a),0 0 0 0 var(--tw-g)}
  30%{box-shadow:0 0 0 6px var(--tw-a),0 0 34px 10px var(--tw-g)}
  100%{box-shadow:0 0 0 18px transparent,0 0 48px 16px transparent}}
#hzPP:focus,section[data-nks]:focus{outline:none}

@media (max-width:600px){
  /* Sur téléphone, la rangée a sa propre ligne sous le ruban des jours, et déborde jusqu'aux bords :
     le conteneur (.ph-plein) n'a pas de marge, le contenu commence à 16 px. */
  .tw-tel{margin:10px 0 2px}
  .tw-tel .tw-r{padding:2px 16px 4px;scroll-padding:16px;gap:6px}
  .tw-p{gap:6px;padding:0 11px 0 5px}
  .tw-i{width:28px;height:28px}.tw-i svg{width:21px;height:21px}
  .tw-p b{font-size:14.5px}.tw-p .tw-l{font-size:13px}
  .tw-p .tw-l.tw-lg{display:none}.tw-p .tw-l.tw-s{display:inline-flex}
  .tw-ar{display:none}
  .tw-inv .tw-go{padding-left:9px}.tw-inv .tw-go .tw-i,.tw-inv .tw-go .tw-stack{display:none}
  .tw-p.tw-more{padding:0 9px;gap:2px}
  /* une seule vignette sur téléphone : la pile de 3 coûte 34 px */
  .tw-stack .tw-i+.tw-i{display:none}
}
@media (prefers-reduced-motion:reduce){.tw *,.tw-onde{animation-duration:.01ms!important;transition-duration:.01ms!important}}