/* ═══════════════════════════════════════════════════════════
   Pousse — « Le sentier »

   Pensé pour le téléphone d'abord ; le desktop n'ajoute que de la largeur.
   Il n'y a plus de surface « papier » : la page entière est le ciel, un
   dégradé qui descend vers la vallée au fil du défilement, et les cartes
   sont du verre posé dessus.

   Deux familles de jetons à ne pas confondre :
     paysage   --loin --milieu --pres --arbres --sentier --astre --nuage…
     interface --ciel-1/2/3 --encre --verre --fort --accent…
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ——— grade par défaut : aube ——— */
  --ciel-1:#8AB9E4;
  --ciel-2:#FFD6B8;
  --ciel-3:#B9DBA6;
  --encre:#1E2E33;
  --encre-2:#48606A;
  --verre:rgba(255,255,255,.60);
  --verre-fort:rgba(255,255,255,.80);
  --verre-bord:rgba(255,255,255,.72);
  --fort:#2F5D4B;
  --fort-txt:#F4FBF6;
  --accent:#C25E0B;
  --accent-doux:#FFD79A;

  /* paysage */
  --loin:#A9C6C2;
  --milieu:#88B487;
  --pres:#6FA070;
  --arbres:#436B53;
  --sentier:#E6D2AE;
  --brume:#FFFFFF;  --brume-op:.5;
  --astre:#FFF0D0;  --astre-halo:#FFD9A0;
  --nuage:#FFFFFF;  --nuage-op:.86;
  --etoile-op:0;    --luciole-op:0;
  --lanterne:#FFA83D;
  --lanterne-clair:#FFD79A;

  --rayon:26px;
  --colonne:min(100% - 2rem, 34rem);
}

html[data-heure="jour"]{
  --ciel-1:#57A9DC; --ciel-2:#ABDBF0; --ciel-3:#93CB94;
  --encre:#122E2B; --encre-2:#3C5B55;
  --loin:#A8C4BE; --milieu:#7FB57A; --pres:#5F9A63; --arbres:#3B6A4E;
  --sentier:#E8D6B4; --brume-op:.34;
  --astre:#FFFBE8; --astre-halo:#FFF0BC;
  --fort:#2C5A44;
}
html[data-heure="crepuscule"]{
  --ciel-1:#2A2750; --ciel-2:#8E4E63; --ciel-3:#3A3A55;
  --encre:#FBEEF2; --encre-2:#D9C3CD;
  --verre:rgba(255,255,255,.11); --verre-fort:rgba(255,255,255,.17);
  --verre-bord:rgba(255,255,255,.20);
  --fort:#F0A55E; --fort-txt:#2A1B10;
  --accent:#FFC46B; --accent-doux:#FFE0B0;
  --loin:#6E6489; --milieu:#4E5566; --pres:#3B4453; --arbres:#262C3A;
  --sentier:#9A8497; --brume:#E7B9A8; --brume-op:.3;
  --astre:#FFCE8A; --astre-halo:#FF9E5E;
  --nuage:#B9738A; --nuage-op:.55;
  --luciole-op:.95;
  --lanterne:#FFC46B; --lanterne-clair:#FFE7C2;
}
html[data-heure="nuit"]{
  --ciel-1:#0C1428; --ciel-2:#1B2C4E; --ciel-3:#14263A;
  --encre:#E9F1FB; --encre-2:#A9BFD6;
  --verre:rgba(255,255,255,.09); --verre-fort:rgba(255,255,255,.15);
  --verre-bord:rgba(255,255,255,.17);
  --fort:#8FB8DC; --fort-txt:#0C1828;
  --accent:#FFC46B; --accent-doux:#FFE0B0;
  --loin:#243553; --milieu:#1C2E42; --pres:#152331; --arbres:#0E1926;
  --sentier:#4E566B; --brume:#6C86AE; --brume-op:.2;
  --astre:#EAF0FF; --astre-halo:#8FA8D8;
  --nuage:#243758; --nuage-op:.55;
  --etoile-op:.95; --luciole-op:1;
  --lanterne:#FFC46B; --lanterne-clair:#FFE7C2;
}

/* ═══════════ socle ═══════════ */

*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;               /* clip, pas hidden : ne crée pas de conteneur de défilement */
  background:var(--ciel-3);      /* si le document est plus court que l'écran */
}
body{
  margin:0;
  overflow-x:clip;
  min-height:100%;
  color:var(--encre);
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  /* le dégradé couvre toute la hauteur du document : défiler, c'est descendre */
  background:linear-gradient(to bottom,var(--ciel-1) 0%,var(--ciel-2) 38%,var(--ciel-3) 100%);
  padding-bottom:env(safe-area-inset-bottom);
}

h1,h2,h3{font-family:"Klee One","Zen Maru Gothic",cursive;font-weight:600;line-height:1.26;margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
.colonne{width:var(--colonne);margin-inline:auto}

:focus-visible{outline:3px solid var(--encre);outline-offset:2px;border-radius:10px}

/* ═══════════ le paysage ═══════════ */

.scene{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:var(--scene-op,1);
}
.scene svg{width:100%;height:100%;display:block}

.etoiles circle{fill:#FFF;opacity:var(--etoile-op)}
.astre-corps{fill:var(--astre)}
.halo-coeur{stop-color:var(--astre-halo);stop-opacity:.5}
.halo-bord{stop-color:var(--astre-halo);stop-opacity:0}
.nuages ellipse{fill:var(--nuage);opacity:var(--nuage-op)}
.loin path{fill:var(--loin)}
.milieu path{fill:var(--milieu)}
.pres path{fill:var(--pres)}
.arbres path{fill:var(--arbres)}
.brume ellipse{fill:var(--brume);opacity:var(--brume-op)}
.sentier-corps{fill:var(--sentier)}

/* styler le <use>, pas son contenu : un sélecteur ne traverse pas le shadow tree */
.herbes use{fill:none;stroke:var(--arbres);stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fleurs .petale{fill:#FBF4E4;opacity:.9}
.fleurs .coeur{fill:var(--lanterne)}
.lucioles circle{fill:var(--lanterne-clair);opacity:var(--luciole-op)}

.lanterne-groupe .poteau{stroke:var(--arbres);stroke-width:5;fill:none}
.lanterne-groupe .socle,.lanterne-groupe .toit,.lanterne-groupe .finial{fill:var(--arbres)}
.lanterne-groupe .boite{fill:var(--loin);stroke:var(--arbres);stroke-width:2.4;opacity:.6}
.lanterne-groupe .flamme{fill:var(--lanterne-clair);opacity:0}
.lanterne-groupe .lueur{opacity:0}
.lanterne-groupe.allumee .boite{fill:var(--lanterne);stroke:var(--lanterne);opacity:1}
.lanterne-groupe.allumee .flamme{opacity:1}
.lanterne-groupe.allumee .lueur{opacity:1}

/* Pousse — les mêmes classes servent dans le paysage et dans la barre */
.corps{fill:#FDF7EA;stroke:var(--arbres);stroke-width:2.6}
.ombre{fill:var(--arbres);opacity:.18}
.oeil{fill:#22352C}
.joue{fill:#F7A9A0;opacity:.85}
.bouche{fill:none;stroke:#22352C;stroke-width:1.8;stroke-linecap:round}
.feuille{fill:#9ACB86;stroke:var(--arbres);stroke-width:2}
.tige{stroke:var(--arbres);stroke-width:2.4;fill:none;stroke-linecap:round}
#compagnon{pointer-events:auto;cursor:pointer}

/* ═══════════ accueil ═══════════ */

.accueil{
  position:relative;z-index:1;
  min-height:100svh;
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 1.6rem) 0 44svh;  /* le bas est à Pousse */
}
.marque{
  font-family:"Klee One",cursive;font-weight:600;font-size:1.35rem;
  margin:0 0 1.3rem;
}
.accueil h1{font-size:clamp(1.9rem,8vw,2.6rem)}
.accueil h1 span{display:block}
.accueil h1 .doux{color:var(--encre-2)}
.compte{
  font-family:"Klee One",cursive;font-size:.96rem;color:var(--encre-2);margin:1rem 0 0;
}
.compte::before{content:"✦ ";color:var(--accent)}

/* la carte qui fait gagner du temps */
.reprendre{margin:1.5rem 0 0}
.carte-reprendre{
  display:block;text-decoration:none;
  background:var(--verre-fort);border:1px solid var(--verre-bord);
  border-radius:var(--rayon);padding:1.05rem 1.15rem;
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.4);
}
.carte-reprendre .quoi{font-family:"Klee One",cursive;font-size:.84rem;color:var(--encre-2);margin:0 0 .15rem}
.carte-reprendre .titre{font-family:"Klee One",cursive;font-size:1.28rem;font-weight:600;margin:0}
.carte-reprendre .detail{font-size:.9rem;color:var(--encre-2);margin:.1rem 0 0}
.carte-reprendre .go{
  display:inline-flex;align-items:center;gap:.5rem;margin:.85rem 0 0;
  background:var(--fort);color:var(--fort-txt);
  border-radius:999px;padding:.6rem 1.2rem;font-size:.96rem;font-weight:500;
}

/* ═══════════ la vallée ═══════════ */

.vallee{position:relative;z-index:1;padding-top:1px}
section{margin:0 0 3.2rem}
h2{font-size:1.5rem;margin-bottom:.3rem}
.lede{color:var(--encre-2);margin:0 0 1.2rem;font-size:.95rem}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0;list-style:none}
.chip{
  font-size:.93rem;background:var(--verre);color:var(--encre);
  border:1px solid var(--verre-bord);border-radius:999px;
  padding:.55rem 1rem;cursor:pointer;min-height:44px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.chip[aria-pressed="true"]{background:var(--fort);color:var(--fort-txt);border-color:transparent}

.etape{
  background:var(--verre);border:1px solid var(--verre-bord);border-radius:var(--rayon);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  padding:1.2rem 1.1rem;margin:0 0 .85rem;
}
.etape.complete{background:var(--verre-fort);border-color:var(--accent-doux)}
.etape h3{font-size:1.28rem}
.etape h3 .en{
  display:block;font-family:"Zen Maru Gothic",sans-serif;font-size:.73rem;
  color:var(--encre-2);margin-top:.22rem;font-weight:400;
}
.meta{font-family:"Klee One",cursive;font-size:.88rem;color:var(--encre-2);margin:.5rem 0 0}
.meta .count{color:var(--encre)}
.meta .count.done{color:var(--accent)}
.why{margin:.7rem 0 0;color:var(--encre-2);font-size:.93rem}
.actions{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin:.95rem 0 0}

.ouvrir{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:.93rem;min-height:44px;
  background:var(--fort);color:var(--fort-txt);border:0;border-radius:999px;
  padding:.55rem 1.15rem;cursor:pointer;
}

.dots{display:flex;gap:.28rem;margin:.85rem 0 0;flex-wrap:wrap;padding:0}
.tick{
  width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;
}
.tick i{
  display:block;width:13px;height:13px;border-radius:50%;
  background:transparent;box-shadow:inset 0 0 0 2px var(--encre-2);opacity:.45;
}
.tick[aria-checked="true"] i{
  background:var(--lanterne);box-shadow:inset 0 0 0 2px var(--lanterne),0 0 12px 3px rgba(255,168,61,.5);
  opacity:1;
}

.counter{display:flex;align-items:center;gap:.55rem;margin:.85rem 0 0}
.counter button{
  width:44px;height:44px;border:1px solid var(--verre-bord);background:var(--verre);
  border-radius:50%;cursor:pointer;line-height:1;
}
.counter .n{font-family:"Klee One",cursive;font-size:.92rem;color:var(--encre-2)}
.bar{height:6px;background:var(--verre);border-radius:999px;flex:1;overflow:hidden}
.bar i{display:block;height:100%;background:var(--lanterne);border-radius:999px}

.groupe{margin:0 0 1.7rem}
.groupe h3{
  font-family:"Klee One",cursive;font-size:1rem;color:var(--encre-2);
  margin:0 0 .55rem;display:flex;align-items:baseline;gap:.55rem;font-weight:600;
}
.groupe h3 .gcount{font-size:.84rem;opacity:.7}
.rows{list-style:none;padding:0;margin:0}
.ligne-bloc{
  background:var(--verre);border:1px solid var(--verre-bord);border-radius:20px;
  margin:0 0 .42rem;padding:.1rem .8rem;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.ligne{display:flex;align-items:center;gap:.65rem;padding:.45rem 0;min-height:48px}
.ligne .nom{flex:1;text-decoration:none;font-size:.99rem;line-height:1.35}
.ligne .duree{font-family:"Klee One",cursive;font-size:.79rem;color:var(--encre-2);white-space:nowrap}
.ligne .prog{font-family:"Klee One",cursive;font-size:.79rem;color:var(--encre-2);opacity:.55;white-space:nowrap;min-width:3.3em;text-align:right}
.ligne .prog.some{opacity:1}
.ligne .prog.all{color:var(--accent);opacity:1}

.deplier{
  width:34px;height:34px;flex:0 0 34px;padding:0;line-height:1;
  border:1px solid var(--verre-bord);background:var(--verre);border-radius:50%;
  cursor:pointer;color:var(--encre-2);font-size:1rem;
}

.jours{display:flex;flex-wrap:wrap;gap:.38rem;align-items:center;padding:.15rem 0 .85rem}
.niveau{
  flex:0 0 100%;font-family:"Klee One",cursive;font-size:.84rem;color:var(--encre-2);
  margin:.65rem 0 .05rem;
}
.niveau:first-child{margin-top:.1rem}
.jour{
  display:inline-flex;align-items:center;gap:.1rem;min-height:38px;
  background:var(--verre);border:1px solid var(--verre-bord);border-radius:999px;
  padding:0 .65rem 0 .1rem;
}
.jour.done{background:var(--accent-doux);border-color:transparent;color:#3A2A12}
.jour.done .tick i{box-shadow:inset 0 0 0 2px #C25E0B;background:#C25E0B}
.jour-ouvrir{font-family:"Klee One",cursive;font-size:.89rem;text-decoration:none;white-space:nowrap}

/* ═══════════ barre compacte ═══════════ */

.barre{
  position:fixed;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;gap:.65rem;
  padding:calc(env(safe-area-inset-top) + .4rem) 1rem .4rem;
  background:var(--verre-fort);border-bottom:1px solid var(--verre-bord);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
}
.barre[hidden]{display:none}
.barre-pousse{width:40px;height:40px;flex:0 0 40px;padding:0;border:0;background:none;cursor:pointer}
.barre-pousse svg{width:100%;height:100%;display:block;overflow:visible}
.barre-prog{font-family:"Klee One",cursive;font-size:.88rem;color:var(--encre-2);flex:1}
.barre-go{
  text-decoration:none;font-size:.86rem;white-space:nowrap;
  background:var(--fort);color:var(--fort-txt);border-radius:999px;padding:.45rem .85rem;
}
.barre-go[hidden]{display:none}

/* ═══════════ outils, pied, dialogue ═══════════ */

.outils{border-top:1px solid var(--verre-bord);padding-top:1.7rem}
.rangee{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin:1rem 0 0}
.etiquette{font-family:"Klee One",cursive;font-size:.88rem;color:var(--encre-2)}
.note{color:var(--encre-2);font-size:.87rem;margin:.45rem 0 0}
.seg{display:inline-flex;background:var(--verre);border:1px solid var(--verre-bord);border-radius:999px;padding:.15rem}
.seg button{
  background:transparent;border:0;padding:.42rem .85rem;font-size:.84rem;cursor:pointer;
  color:var(--encre-2);border-radius:999px;min-height:40px;
}
.seg button.on{background:var(--fort);color:var(--fort-txt)}
.lien{
  background:none;border:0;padding:.4rem 0;font-size:.91rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;min-height:40px;
}
.sync-etat{font-size:.89rem;color:var(--encre-2);flex:1;min-width:12ch}
.sync-etat.live{color:var(--accent)}

footer{border-top:1px solid var(--verre-bord);padding:1.5rem 0 3rem;color:var(--encre-2);font-size:.87rem}
footer p{margin:0 0 .45rem}
footer .signature{font-family:"Klee One",cursive;color:var(--encre)}
footer .version{font-size:.77rem;opacity:.65;margin-top:1rem}

.maj{
  position:fixed;z-index:9;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 1rem);
  background:var(--fort);color:var(--fort-txt);border:0;border-radius:999px;
  padding:.72rem 1.25rem;font-size:.9rem;cursor:pointer;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
}
.maj[hidden]{display:none}

dialog{
  border:0;background:var(--ciel-2);color:var(--encre);
  max-width:28rem;width:calc(100% - 2rem);padding:1.5rem;border-radius:26px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
}
dialog::backdrop{background:rgba(6,14,22,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
dialog h3{font-size:1.32rem;margin-bottom:.35rem}
dialog p{color:var(--encre-2);font-size:.91rem;margin:0 0 1rem}
dialog input{
  width:100%;font:inherit;padding:.72rem 1rem;background:var(--verre-fort);
  border:1px solid var(--verre-bord);border-radius:14px;color:var(--encre);
}
.dlg-err{color:#8E2C1B;font-size:.87rem;margin:.55rem 0 0 !important}
.dlg-actions{display:flex;align-items:center;gap:.55rem;margin-top:1.15rem;flex-wrap:wrap}
.dlg-actions .spacer{flex:1}
.fantome,.plein{border:0;border-radius:999px;padding:.58rem 1.05rem;font-size:.91rem;cursor:pointer;min-height:44px}
.fantome{background:var(--verre);color:var(--encre)}
.plein{background:var(--fort);color:var(--fort-txt)}

/* ═══════════ mouvement ═══════════ */

@media (prefers-reduced-motion:no-preference){
  .accueil h1 span{animation:souffle .9s cubic-bezier(.2,.8,.3,1) both}
  .accueil h1 span:nth-child(2){animation-delay:.16s}
  .marque{animation:souffle .8s .04s ease-out both}
  .reprendre{animation:souffle .9s .34s ease-out both}
  .compte{animation:souffle .9s .46s ease-out both}
  @keyframes souffle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  .nuage{animation:derive linear infinite}
  .n1{animation-duration:160s}
  .n2{animation-duration:220s;animation-delay:-40s}
  .n3{animation-duration:190s;animation-delay:-90s}
  @keyframes derive{from{transform:translateX(-30%)}to{transform:translateX(130%)}}

  .herbes use{transform-box:fill-box;transform-origin:bottom center;animation:vent ease-in-out infinite alternate}
  @keyframes vent{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}

  /* quatre secondes d'inspiration, quatre d'expiration */
  .respire{transform-box:fill-box;transform-origin:bottom center;animation:respirer 8s ease-in-out infinite}
  @keyframes respirer{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
  .yeux{transform-box:fill-box;transform-origin:center;animation:cligner 6.5s infinite}
  @keyframes cligner{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}

  .saute .respire{animation:sauter .7s cubic-bezier(.25,1.5,.4,1)}
  @keyframes sauter{
    0%{transform:translateY(0)}
    35%{transform:translateY(-24px) scale(1.06)}
    62%{transform:translateY(0) scale(.95)}
    100%{transform:translateY(0) scale(1)}
  }

  .lanterne-groupe.allumee .flamme{animation:vaciller 3.2s ease-in-out infinite}
  @keyframes vaciller{0%,100%{opacity:1}50%{opacity:.72}}
  .lanterne-groupe .boite,.lanterne-groupe .lueur{transition:fill .7s ease,opacity .7s ease}

  .luciole{animation:flotter ease-in-out infinite alternate}
  @keyframes flotter{from{transform:translate(0,0)}to{transform:translate(14px,-18px)}}

  .tick i{transition:background .25s,box-shadow .25s,transform .25s,opacity .25s}
  .tick.just i{animation:eclore .5s cubic-bezier(.2,1.4,.4,1)}
  @keyframes eclore{0%{transform:scale(.5)}55%{transform:scale(1.8)}100%{transform:scale(1)}}

  .chip,.ouvrir,.carte-reprendre{transition:background .2s,color .2s,border-color .2s,transform .15s}
  .carte-reprendre:active{transform:scale(.985)}
  .scene{transition:opacity .2s linear}
}

/* ═══════════ desktop : on n'ajoute que de la largeur ═══════════ */

@media (min-width:820px){
  :root{--colonne:min(100% - 4rem, 44rem)}
  body{font-size:18px}
  .accueil{padding:5rem 0 40svh}
  .accueil h1{font-size:3rem}
  .marque{font-size:1.5rem}
  .etape{padding:1.6rem 1.7rem}
  .ligne-bloc{padding:.15rem 1.1rem}
  section{margin:0 0 4.2rem}
  h2{font-size:1.85rem}
}