/* Écran étape de Robin (porté de la maquette validée). Tout est sous .etape pour ne pas gêner le reste de l'application. */
.etape{--go:#1f8a4c; --go-ink:#ffffff; --field:#2f8f4e}
@media (prefers-color-scheme: dark){ .etape{--go:#4cc380; --go-ink:#06210f; --field:#2a7a45} }
.etape button{font-family:inherit; color:inherit}
.etape .eback{display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; border:2px solid var(--line); background:var(--card); font-size:1.4rem; text-decoration:none; color:inherit; font-weight:800}
.etape .top .left{display:flex; align-items:center; gap:10px}

.etape{max-width:480px; margin:0 auto; min-height:100vh; padding:12px 14px 150px; display:flex; flex-direction:column; gap:12px}

/* Barre du haut */
.etape .top{display:flex; align-items:center; justify-content:space-between}
.etape .top h1{font-family:ui-serif,Georgia,serif; font-size:1.25rem; margin:0}
.etape .gear{width:48px; height:48px; border-radius:14px; border:2px solid var(--line); background:var(--card); font-size:1.3rem; cursor:pointer}

/* Plan de match */
.etape .match{background:var(--card); border:2px solid var(--line); border-radius:18px; padding:10px 12px 8px}
.etape .match .label{display:flex; justify-content:space-between; font-size:.9rem; font-weight:700}
.etape .fieldbar{position:relative; height:34px; border-radius:10px; margin:8px 0 4px; overflow:hidden;
  background:var(--field);
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0, rgba(255,255,255,.14) 2px, transparent 2px, transparent 12.5%)}
.etape .fieldbar .ball{position:absolute; top:3px; font-size:1.35rem; line-height:1; transform:translateX(-50%); transition:left .5s linear}
.etape .fieldbar .goal{position:absolute; right:6px; top:5px; font-size:.85rem; font-weight:800; color:#fff}
.etape .match .depart{margin:2px 0 0; font-size:1rem; font-weight:700}

/* Mur de briques */
.etape .wallbox{background:var(--card); border:2px solid var(--line); border-radius:18px; padding:10px 12px 12px}
.etape .wallbox .label{display:flex; justify-content:space-between; font-size:.9rem; font-weight:700; margin-bottom:12px}
.etape .wall{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.etape .brick{position:relative; height:38px; border-radius:6px; background:transparent; border:2px dashed var(--line); transition:transform .3s}
.etape .brick::before, .etape .brick::after{content:""; position:absolute; top:-6px; width:11px; height:6px; border-radius:3px 3px 0 0; background:inherit; border:inherit; border-bottom:0}
.etape .brick::before{left:16%} .etape .brick::after{right:16%}
.etape .brick.done{border:2px solid rgba(0,0,0,.18); background:var(--c)}
.etape .brick.current{border:3px solid var(--ink); background:var(--card); animation:pulse 1.6s ease-in-out infinite}
.etape .brick.just{animation:drop .5s ease-out}
@keyframes pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes drop{0%{transform:translateY(-26px) scale(1.15); opacity:.2}100%{transform:none; opacity:1}}

/* Carte principale */
.etape .ecard{background:var(--card); border:2px solid var(--line); border-radius:24px; padding:18px 14px 16px; text-align:center}
.etape .ringwrap{position:relative; width:230px; height:230px; margin:0 auto}
.etape .ringwrap svg{width:100%; height:100%; transform:rotate(-90deg)}
.etape .ringwrap .inner{position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.etape .inner .emoji{font-size:4.6rem; line-height:1}
.etape .inner .time{font-size:1.7rem; font-weight:800; font-variant-numeric:tabular-nums; margin-top:4px}
.etape .step-title{font-family:ui-serif,Georgia,serif; font-size:1.7rem; margin:10px 0 4px}
.etape .step-hint{font-size:1.1rem; color:var(--muted); margin:0 6px}
.etape .status{font-size:1.05rem; font-weight:700; margin:8px 0 0; min-height:1.5em}
.etape .count{font-size:.9rem; color:var(--muted); margin-top:4px}

/* Sac */
.etape .bagtop{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.etape .bagtop .t{font-size:1.2rem; font-weight:800}
.etape .bagcount{font-size:1.2rem; font-weight:800; background:var(--accent-soft); padding:6px 12px; border-radius:14px}
.etape .items{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.etape .item{min-height:96px; border-radius:18px; border:3px solid var(--line); background:var(--card); font-size:1.05rem; font-weight:700; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; position:relative}
.etape .item .e{font-size:2.3rem; line-height:1}
.etape .item.in{border-color:var(--ok); background:rgba(31,138,76,.16)}
.etape .item.must{border-color:var(--warn)}
.etape .item .imp{font-size:.72rem; font-weight:800; color:var(--warn)}
.etape .item.in::after{content:"✅"; position:absolute; top:6px; right:8px; font-size:1.2rem}

/* Début / fin */
.etape .bigemoji{font-size:5rem; margin:0}
.etape .ecard h2{font-family:ui-serif,Georgia,serif; font-size:1.8rem; margin:6px 0}
.etape .ecard p.lead{font-size:1.15rem; margin:6px 8px}
.etape .bigwall{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:16px 6px 8px}
.etape .bigwall .brick{height:44px}

/* Bouton du bas */
.etape .bottom{position:fixed; left:0; right:0; bottom:0; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(to top, var(--bg) 70%, transparent)}
.etape .bottom .in{max-width:480px; margin:0 auto}
.etape .btn{width:100%; min-height:84px; border:0; border-radius:24px; font-size:1.7rem; font-weight:800; cursor:pointer; background:var(--go); color:var(--go-ink)}
.etape .btn.alt{background:var(--accent); color:#fff}

/* Bandeau et feuille */
.etape .banner{position:fixed; left:12px; right:12px; top:12px; z-index:20; max-width:456px; margin:0 auto; background:var(--accent); color:#fff; font-weight:800; font-size:1.2rem; text-align:center; padding:14px; border-radius:18px; box-shadow:0 6px 18px rgba(0,0,0,.25)}
.etape .sheet{position:fixed; left:0; right:0; top:0; bottom:0; z-index:30; background:rgba(10,14,22,.65); display:flex; align-items:flex-end; justify-content:center}
.etape .sheet .box{background:var(--card); width:100%; max-width:480px; border-radius:26px 26px 0 0; padding:22px 16px calc(18px + env(safe-area-inset-bottom)); text-align:center}
.etape .sheet h3{font-family:ui-serif,Georgia,serif; font-size:1.5rem; margin:0 0 6px}
.etape .sheet p{font-size:1.15rem; margin:4px 0 14px}
.etape .sheet .btn{min-height:68px; font-size:1.3rem; margin-top:8px}
.etape .sheet .btn.ghost{background:var(--card); color:var(--ink); border:2px solid var(--line)}

/* Démo */
.etape .demo{background:var(--card); border:2px dashed var(--line); border-radius:18px; padding:6px 14px}
.etape .demo h3{font-size:.95rem; margin:8px 0}
.etape .demo label{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; border-top:1px solid var(--line)}
.etape .demo select, .etape .demo button{min-height:44px; font-size:1rem; border-radius:12px; border:2px solid var(--line); background:var(--card); padding:4px 12px}
.etape .demo input[type=checkbox]{width:26px; height:26px}
.etape .notes{font-size:.85rem; color:var(--muted); padding:0 4px}
@media (prefers-reduced-motion: reduce){ .etape .brick.current, .etape .brick.just{animation:none} .etape .fieldbar .ball{transition:none} }