/* Leurre Lunea (traqueur de cycle) - porte du prototype. Styles scopes sous
   .lunea pour cohabiter avec la surface secrete (chat.css). */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin-SfWU466.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.lunea {
  --bg:#FBF8FC; --surface:#FFFFFF; --ink:#3A2440; --ink-soft:#7C6A82;
  --blush:#F5E9F0; --blush-2:#EFDCE8; --line:#ECE1EE;
  --flow:#E15C7B; --flow-soft:#F9DDE4;
  --fertile:#5FA085; --fertile-soft:#DDEDE4;
  --ovul:#3E8E9C; --ovul-soft:#D6EAED;
  --luteal:#B79ACb; --luteal-soft:#ECE4F4;
  --lshadow:0 10px 34px rgba(58,36,64,.10);
  background:var(--bg); color:var(--ink); font-family:'DM Sans',system-ui,sans-serif;
  display:flex; flex-direction:column; height:100%;
}
.lunea .screen { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.lunea .screen::-webkit-scrollbar { display:none; }
.lunea .view { display:none; padding:0 20px 96px; }
.lunea .view.active { display:block; }

.lunea .topbar { padding:18px 20px 4px; display:flex; align-items:center; justify-content:space-between; }
.lunea .brand { font-family:'Fraunces',serif; font-weight:600; font-size:26px; letter-spacing:-.01em; }
.lunea .brand .dot { color:var(--flow); }
.lunea .topbar .date { font-size:13px; color:var(--ink-soft); font-weight:500; }
.lunea .topbar .date::first-letter { text-transform:uppercase; }

.lunea .ring-wrap { display:flex; flex-direction:column; align-items:center; margin-top:6px; }
.lunea .ring { position:relative; width:246px; height:246px; }
.lunea .ring svg { transform:rotate(-90deg); }
.lunea .ring .center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; user-select:none; }
.lunea .ring .kicker { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.lunea .ring .day { font-weight:500; font-size:76px; line-height:.92; margin:4px 0 0; cursor:pointer; transition:transform .12s;
  /* Appui long fiable sur mobile : le navigateur ne doit ni scroller, ni
     selectionner, ni ouvrir le menu contextuel (sinon pointercancel avant 500ms). */
  touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.lunea .ring .day:active { transform:scale(.96); }
.lunea .ring .phase { font-size:15px; font-weight:600; margin-top:2px; }
.lunea .focal-dot { position:absolute; top:36%; right:33%; width:12px; height:12px; border-radius:50%; background:var(--flow); box-shadow:0 0 0 3px var(--bg); }
.lunea .next-pill { margin-top:18px; background:var(--surface); border:1px solid var(--line); padding:11px 18px; border-radius:999px; font-size:14px; font-weight:500; box-shadow:var(--lshadow); display:inline-flex; gap:8px; align-items:center; }
.lunea .next-pill b { color:var(--flow); }

.lunea .sec-title { font-size:13px; font-weight:600; color:var(--ink-soft); letter-spacing:.02em; margin:26px 4px 12px; }
.lunea .card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:16px; box-shadow:var(--lshadow); }

.lunea .chips { display:flex; flex-wrap:wrap; gap:9px; }
.lunea .chip { border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:9px 14px; border-radius:999px; font-size:13.5px; font-weight:500; font-family:inherit; cursor:pointer; display:inline-flex; gap:7px; align-items:center; transition:.15s; }
.lunea .chip .ic { font-size:15px; }
.lunea .chip.on { background:var(--blush); border-color:var(--flow-soft); color:var(--flow); }
.lunea .note { width:100%; border:none; background:transparent; resize:none; font-family:inherit; font-size:14.5px; color:var(--ink); min-height:52px; line-height:1.5; }
.lunea .note::placeholder { color:#B7A7BC; }
.lunea .note:focus { outline:none; }

.lunea .cal-head { display:flex; align-items:center; justify-content:space-between; margin:6px 4px 14px; }
.lunea .cal-head .m { font-family:'Fraunces',serif; font-size:20px; font-weight:600; text-transform:capitalize; }
.lunea .cal-nav { border:1px solid var(--line); background:var(--surface); width:34px; height:34px; border-radius:11px; font-size:16px; color:var(--ink); cursor:pointer; }
.lunea .dow { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
.lunea .dow span { text-align:center; font-size:11px; font-weight:600; color:var(--ink-soft); }
.lunea .grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.lunea .cell { aspect-ratio:1; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:500; color:var(--ink); position:relative; border:1px solid transparent; }
.lunea .cell.mute { color:#CBBCCF; }
.lunea .cell.flow { background:var(--flow-soft); color:var(--flow); }
.lunea .cell.pred { border:1px dashed var(--flow); color:var(--flow); }
.lunea .cell.fert { background:var(--fertile-soft); color:var(--fertile); }
.lunea .cell.ovul { background:var(--ovul-soft); color:var(--ovul); }
.lunea .cell.today { outline:2px solid var(--ink); outline-offset:-2px; }
.lunea .cell .sym { position:absolute; bottom:6px; width:5px; height:5px; border-radius:50%; background:var(--luteal); }
.lunea .legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; padding:0 4px; }
.lunea .legend span { font-size:12px; color:var(--ink-soft); display:inline-flex; gap:6px; align-items:center; }
.lunea .legend i { width:11px; height:11px; border-radius:4px; display:inline-block; }

.lunea .stat-row { display:flex; gap:12px; }
.lunea .stat { flex:1; text-align:center; padding:6px 4px; }
.lunea .stat .v { font-family:'Fraunces',serif; font-size:30px; font-weight:600; }
.lunea .stat .l { font-size:12px; color:var(--ink-soft); margin-top:2px; }
.lunea .bar-item { display:flex; align-items:center; gap:12px; margin:12px 2px; }
.lunea .bar-item .lab { font-size:12.5px; color:var(--ink-soft); width:64px; }
.lunea .bar-track { flex:1; height:10px; background:var(--blush); border-radius:6px; overflow:hidden; }
.lunea .bar-fill { height:100%; background:linear-gradient(90deg,var(--flow),var(--luteal)); border-radius:6px; }
.lunea .bar-item .val { font-size:12.5px; font-weight:600; width:34px; text-align:right; }

.lunea .set-list { padding:0; }
.lunea .set-item { display:flex; align-items:center; justify-content:space-between; padding:15px 16px; border-bottom:1px solid var(--line); }
.lunea .set-item:last-child { border-bottom:none; }
.lunea .set-item .k { font-size:14.5px; font-weight:500; }
.lunea .set-item .s { font-size:12px; color:var(--ink-soft); margin-top:2px; }
.lunea .set-item .v { font-size:14px; color:var(--ink-soft); }
.lunea .toggle { width:46px; height:28px; border-radius:999px; background:var(--line); position:relative; cursor:pointer; transition:.2s; border:none; }
.lunea .toggle.on { background:var(--fertile); }
.lunea .toggle::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.lunea .toggle.on::after { left:21px; }

.lunea .tabbar { display:flex; background:var(--surface); border-top:1px solid var(--line); padding:8px 6px calc(8px + env(safe-area-inset-bottom)); }
.lunea .tab { flex:1; border:none; background:none; font-family:inherit; color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; font-weight:600; cursor:pointer; padding:5px; }
.lunea .tab svg { width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.7; }
.lunea .tab.on { color:var(--flow); }
.lunea .hint { text-align:center; font-size:11px; color:#B7A7BC; padding:6px 24px 0; }