/* =========================================================================
   Fini le Yoyo — APP (PWA installable, mobile-first)
   S'appuie sur les tokens + composants de style.css (chargé avant).
   ========================================================================= */

/* ---------- Chrome de l'app ---------- */
html, body{ height:100%; }
body{
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.member-bar{ display:none !important; }   /* la barre membre du site n'a pas sa place dans l'app */

#app{ display:none; min-height:100%; padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
#app.pret{ display:block; }

/* ---------- En-tête ---------- */
.app-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 20px 4px;
}
.app-brand{ display:flex; align-items:baseline; gap:.1em; text-decoration:none; color:var(--ink); }
.app-brand b{ font-family:var(--serif); font-weight:600; font-size:1.1rem; }
.app-brand .yo{ font-family:var(--hand); color:var(--accent-deep); font-size:1.5rem; line-height:0; position:relative; top:.06em; }
.app-jour{ font-size:.82rem; color:var(--ink-soft); font-weight:600; }
.app-retour-site{ font-size:.82rem; font-weight:700; color:var(--ink-soft); text-decoration:none; white-space:nowrap; }
.app-retour-site:hover{ color:var(--accent-deep); }
@media (display-mode: standalone){ .app-retour-site{ display:none; } } /* app installée : pas de « retour au site » */
@media (max-width:700px){ .app-retour-site{ display:none; } }          /* petit écran : le lien vit dans l'onglet Moi */

/* ---------- Écrans ---------- */
.ecran{ display:none; padding:6px 20px 24px; max-width:560px; margin:0 auto; }
.ecran.on{ display:block; animation:ecranIn .28s ease both; }
@keyframes ecranIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.ecran h1{ font-size:clamp(26px,7vw,32px); margin:0 0 .15em; }
.ecran .sous{ color:var(--ink-soft); margin:0 0 1.1em; font-size:.95rem; }
.app-eyebrow{
  font-family:var(--hand); font-weight:600; font-size:24px; color:var(--accent-deep);
  display:inline-block; transform:rotate(-1.2deg); animation:wiggle 5s ease-in-out infinite;
}

/* ---------- Onglets (barre du bas) ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; justify-content:space-around; align-items:stretch;
  background:rgba(251,247,240,.92); backdrop-filter:saturate(140%) blur(12px);
  border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tabbar button{
  flex:1; max-width:96px; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; cursor:pointer; padding:6px 2px 4px;
  color:var(--ink-soft); font-size:.68rem; font-weight:700; border-radius:14px;
  transition:transform .15s ease;
}
.tabbar button .ic{ font-size:1.35rem; line-height:1.2; filter:grayscale(.35); transition:transform .18s ease; }
.tabbar button.on{ color:var(--accent-deep); }
.tabbar button.on .ic{ filter:none; transform:translateY(-2px) scale(1.12); }
.tabbar button:active{ transform:scale(.94); }

/* ---------- Écran Aujourd'hui ---------- */
.jour-hero{
  border-radius:var(--r-lg); padding:22px 20px 20px; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden; margin-bottom:14px;
}
.jour-hero.leger{ background:linear-gradient(135deg,#EAF0E6,#F6F2E9); }
.jour-hero.normal{ background:linear-gradient(135deg,#F7E7DD,#FBF3EC); }
.jour-hero .badge-jour{
  display:inline-flex; align-items:center; gap:.45em; font-weight:700; font-size:.8rem;
  padding:.35em 1em; border-radius:var(--r-pill); background:#fff;
}
.jour-hero.leger .badge-jour{ color:var(--sage-deep); }
.jour-hero.normal .badge-jour{ color:var(--accent-deep); }
.jour-hero h2{ font-size:clamp(22px,6vw,27px); margin:.5rem 0 .3rem; }
.jour-hero p{ color:var(--ink-soft); margin:0; font-size:.95rem; }
.jour-hero .emoji-fond{
  position:absolute; right:10px; top:6px; font-size:64px; opacity:.35; line-height:1;
  transform:rotate(8deg);
}
.btn-valider{
  width:100%; margin-top:16px; justify-content:center; font-size:1.05rem; padding:1em;
}
.valide-etat{ display:flex; align-items:center; gap:.6em; margin-top:16px; flex-wrap:wrap; }
.valide-etat .bravo{
  display:inline-flex; align-items:center; gap:.5em; font-weight:800; color:var(--sage-deep);
  animation:popIn .5s ease both; font-size:1.02rem;
}
.valide-etat .bravo .coche{ font-size:1.3rem; }
.btn-annuler{
  background:none; border:1.5px solid var(--line); color:var(--ink-soft);
  border-radius:var(--r-pill); padding:.45em 1em; font-weight:600; font-size:.82rem; cursor:pointer;
}

/* statistiques en pastilles */
.stats-rangee{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.stat-puce{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 8px; text-align:center; box-shadow:var(--shadow-sm);
}
.stat-puce .val{ font-family:var(--serif); font-size:1.5rem; line-height:1.1; color:var(--ink); }
.stat-puce .lbl{ font-size:.68rem; color:var(--ink-soft); font-weight:700; margin-top:2px; }
.stat-puce .flamme{ display:inline-block; animation:flamme 1.6s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes flamme{ 0%,100%{ transform:rotate(-4deg) scale(1); } 50%{ transform:rotate(4deg) scale(1.12); } }

/* semaine : anneau + points */
.semaine-carte{
  display:flex; align-items:center; gap:16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px; box-shadow:var(--shadow-sm); margin-bottom:14px;
}
.anneau{ position:relative; width:86px; height:86px; flex:none; }
.anneau svg{ transform:rotate(-90deg); }
.anneau .fond{ stroke:var(--line); }
.anneau .plein{ stroke:var(--sage); stroke-linecap:round; transition:stroke-dashoffset .8s ease; }
.anneau .centre{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--serif); font-size:1.25rem; color:var(--ink);
}
.semaine-info{ flex:1; }
.semaine-info h3{ margin:0 0 .2em; font-size:1.02rem; }
.semaine-info p{ margin:0 0 .5em; font-size:.82rem; color:var(--ink-soft); }
.points-semaine{ display:flex; gap:6px; }
.pt-jour{ flex:1; text-align:center; }
.pt-jour i{
  display:block; width:100%; max-width:26px; aspect-ratio:1; margin:0 auto; border-radius:50%;
  background:var(--surface-2); border:1.5px solid var(--line);
  font-style:normal; font-size:.72rem; line-height:24px; color:var(--ink-soft);
}
.pt-jour.tenu i{ background:var(--sage); border-color:var(--sage); color:#fff; font-weight:800; }
.pt-jour.aujourdhui i{ outline:2px solid var(--ink); outline-offset:1px; }
.pt-jour .l{ font-size:.62rem; font-weight:700; color:var(--ink-soft); }

/* pensée + recette */
.pensee-carte{
  background:linear-gradient(135deg,#F7E7DD,#FBF3EC); border:1px solid #EAD7C9;
  border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-sm); margin-bottom:14px;
}
.pensee-carte h3{ margin:0 0 .3em; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-family:var(--sans); }
.pensee-carte .txt{
  font-family:var(--hand); font-weight:600; font-size:1.45rem; line-height:1.25;
  color:var(--accent-deep); display:inline-block; transform:rotate(-1.2deg);
}
.recette-jour-carte{
  display:flex; gap:12px; align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:12px; box-shadow:var(--shadow-sm); margin-bottom:14px;
  cursor:pointer; transition:transform .15s ease;
}
.recette-jour-carte:active{ transform:scale(.98); }
.recette-jour-carte img, .recette-jour-carte .ph{
  width:76px; height:76px; border-radius:14px; object-fit:cover; flex:none;
  background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center; color:var(--sage-deep);
}
.recette-jour-carte h3{ margin:.1em 0 .15em; font-size:1rem; }
.recette-jour-carte .meta{ font-size:.78rem; color:var(--accent-deep); font-weight:700; }
.recette-jour-carte .voir{ font-size:.8rem; color:var(--ink-soft); }
.chip-compteur{
  display:inline-flex; align-items:center; gap:.5em; background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--r-pill); padding:.55em 1.1em; font-weight:700; font-size:.85rem;
  color:var(--sage-deep); text-decoration:none;
}

/* ---------- Calendrier ---------- */
.cal-app .cal-grid{ gap:5px; }
.cal-app .cal-day{ border-radius:10px; }
.cal-app .cal-top{ margin-bottom:.6rem; }
.cal-note{ font-size:.82rem; color:var(--ink-soft); margin-top:.9rem; }

/* ---------- Recettes ---------- */
.r-filtres{ display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.r-filtres button{
  border:1.5px solid var(--line); background:var(--surface); border-radius:var(--r-pill);
  padding:.42em 1em; font-weight:700; font-size:.82rem; cursor:pointer; color:var(--ink-soft);
}
.r-filtres button.on{ background:var(--accent); color:#FFF6EF; border-color:var(--accent); }
.r-liste{ display:grid; gap:14px; }
.r-carte{
  background:#FFF; border:1px solid var(--line); border-radius:6px; padding:10px 10px 12px;
  box-shadow:0 8px 24px rgba(46,42,38,.1); transform:rotate(var(--rot,0deg));
}
.r-carte .photo{ position:relative; border-radius:3px; overflow:hidden; cursor:pointer; }
.r-carte .photo img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.r-carte .photo .ph-vide{
  width:100%; aspect-ratio:16/10; display:grid; place-items:center;
  background:linear-gradient(135deg,#EFF3EB,#FAEEE6); color:var(--sage-deep);
}
.r-carte .k{
  position:absolute; top:8px; left:8px; background:var(--surface); color:var(--accent-deep);
  font-weight:700; font-size:.75rem; padding:4px 10px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm);
}
.r-carte .rep{
  position:absolute; top:8px; right:8px; background:var(--surface); color:var(--sage-deep);
  font-weight:700; font-size:.75rem; padding:4px 10px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm);
}
.r-carte h3{ font-size:1.02rem; margin:.6em .2em .1em; }
.r-carte .atout{ font-family:var(--hand); font-weight:600; font-size:1.15rem; color:var(--accent-deep); margin:0 .2em; }
.r-carte .detail{ display:none; padding:.4em .2em 0; }
.r-carte.ouverte .detail{ display:block; animation:ecranIn .25s ease both; }
.r-carte .detail h4{
  font-family:var(--sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); margin:.9em 0 .3em;
}
.r-carte .detail ul, .r-carte .detail ol{ margin:0; padding-left:1.2em; color:var(--ink-soft); font-size:.9rem; }
.r-carte .detail li{ margin:.18em 0; }
.r-carte .ouvrir{
  width:100%; margin-top:.6em; background:none; border:none; color:var(--accent-deep);
  font-weight:700; font-size:.85rem; cursor:pointer; padding:.4em;
}

/* ---------- Méthode (réutilise les styles du site) ---------- */
.ecran .methode-sec h2{ font-size:1.15rem; }
.ecran .methode-quote{ font-size:1.1rem; }

/* ---------- Moi ---------- */
.moi-carte{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px; box-shadow:var(--shadow-sm); margin-bottom:14px;
}
.moi-carte h3{ margin:0 0 .5em; font-size:1.02rem; }
.moi-poids{ display:flex; gap:8px; }
.moi-poids input{
  flex:1; padding:.75rem .9rem; font:inherit; border:1.5px solid var(--line); border-radius:10px;
  background:#fff; min-width:0;
}
.moi-poids input:focus{ outline:none; border-color:var(--accent); }
.perdu-fete{ color:var(--sage-deep); font-weight:800; }
.moi-lien{
  display:flex; align-items:center; justify-content:space-between; padding:.85em .2em;
  border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem;
  background:none; border-left:none; border-right:none; border-top:none; width:100%; cursor:pointer; font-family:inherit;
}
.moi-lien:last-child{ border-bottom:none; }
.moi-lien .fleche{ color:var(--ink-soft); }
.rappel-ligne{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rappel-ligne select{
  font:inherit; padding:.5em .7em; border:1.5px solid var(--line); border-radius:10px; background:#fff;
}
.interrupteur{ position:relative; width:52px; height:30px; flex:none; }
.interrupteur input{ opacity:0; width:100%; height:100%; position:absolute; margin:0; cursor:pointer; z-index:2; }
.interrupteur i{
  position:absolute; inset:0; border-radius:999px; background:var(--line); transition:background .25s ease;
}
.interrupteur i::after{
  content:""; position:absolute; left:3px; top:3px; width:24px; height:24px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform .25s ease;
}
.interrupteur input:checked + i{ background:var(--sage); }
.interrupteur input:checked + i::after{ transform:translateX(22px); }

/* ---------- Confettis ---------- */
.confetti{
  position:fixed; z-index:200; top:-12px; width:9px; height:14px; border-radius:2px;
  pointer-events:none; animation:tombe linear both;
}
@keyframes tombe{
  from{ transform:translateY(-4vh) rotate(0) rotateY(0); opacity:1; }
  80%{ opacity:1; }
  to{ transform:translateY(104vh) rotate(540deg) rotateY(720deg); opacity:0; }
}

/* ---------- Célébration de palier (plein écran) ---------- */
.fete{
  position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center;
  background:rgba(46,42,38,.55); backdrop-filter:blur(3px); padding:28px;
  animation:feteFond .3s ease both;
}
@keyframes feteFond{ from{ opacity:0; } to{ opacity:1; } }
.fete-carte{
  background:var(--surface); border-radius:28px; padding:34px 26px 26px; text-align:center;
  max-width:340px; width:100%; box-shadow:0 24px 60px rgba(0,0,0,.35);
  animation:popIn .5s cubic-bezier(.2,1.4,.4,1) both;
}
.fete-carte .ic{
  font-size:64px; line-height:1; display:inline-block;
  animation:feteIcone 1.1s cubic-bezier(.2,1.4,.4,1) both .15s;
}
@keyframes feteIcone{
  0%{ transform:scale(0) rotate(-30deg); }
  55%{ transform:scale(1.25) rotate(8deg); }
  100%{ transform:scale(1) rotate(0); }
}
.fete-carte .palier{
  font-family:var(--hand); font-weight:600; font-size:26px; color:var(--accent-deep);
  display:block; margin:10px 0 2px; transform:rotate(-1.2deg);
}
.fete-carte h2{ font-size:1.5rem; margin:0 0 .3em; }
.fete-carte p{ color:var(--ink-soft); font-size:.95rem; margin:0 0 1.2em; }
.fete-carte .btn{ width:100%; justify-content:center; }

/* ---------- Flamme jouet + bulle record ---------- */
.stat-puce.touchable{ cursor:pointer; transition:transform .15s ease; }
.stat-puce.touchable:active{ transform:scale(.93); }
.flamme.pirouette{ animation:pirouette .7s cubic-bezier(.2,1.3,.4,1) both !important; }
@keyframes pirouette{
  0%{ transform:scale(1) rotate(0); }
  45%{ transform:scale(1.6) rotate(180deg); }
  100%{ transform:scale(1) rotate(360deg); }
}
.toast{
  position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:120; background:var(--dark); color:var(--dark-ink); font-weight:700; font-size:.9rem;
  padding:.75em 1.3em; border-radius:var(--r-pill); box-shadow:0 10px 30px rgba(0,0,0,.3);
  animation:toastIn .3s ease both; white-space:nowrap;
}
@keyframes toastIn{ from{ opacity:0; transform:translateX(-50%) translateY(12px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }
.toast.sortie{ animation:toastOut .3s ease both; }
@keyframes toastOut{ to{ opacity:0; transform:translateX(-50%) translateY(12px); } }

/* teaser du lendemain */
.demain-teaser{
  margin-top:12px; padding:.7em 1em; border-radius:12px; font-size:.88rem;
  background:rgba(255,255,255,.55); color:var(--ink-soft);
}
.demain-teaser strong{ color:var(--ink); }

/* ---------- Divers ---------- */
.vide-note{ text-align:center; color:var(--ink-soft); font-size:.9rem; padding:1.5rem 0; }
@media (prefers-reduced-motion:reduce){
  .ecran.on, .valide-etat .bravo{ animation:none; }
  .stat-puce .flamme, .app-eyebrow{ animation:none; }
  .confetti{ display:none; }
  .fete, .fete-carte, .fete-carte .ic{ animation:none; }
  .flamme.pirouette{ animation:none !important; }
}