/* LOCK-IN — Design system v2
 * Palette de la charte. Surfaces nettes ; dégradés réservés au cadran du cycle, aux actions principales et au défi.
 * Titres : Bricolage Grotesque (alternative à Phosphalte Solid). Texte : Poppins.
 * Icônes : Phosphor duotone.
 */
:root{
  --g1:#F28A3C; --g2:#F06A7E; --g3:#E8508A;
  --grad:linear-gradient(135deg,var(--g1) 0%,var(--g2) 52%,var(--g3) 100%);
  --orange:#EF7B3B; --orange-l:#F6A24E; --pink:#DE4C80; --rasp:#C8335F;
  --bg:#FCF8F6; --card:#FFFFFF; --rose-p:#FCE6EE; --peach-p:#FDEBDD; --rose-pd:#FFF0F4;
  --text:#2A2024; --text2:#8A7A7F; --border:#F1E4E6; --line:#F6ECEE;
  --c-mens:#EC5F86; --c-foll:#EE79AE; --c-ovu:#F48A4E; --c-lut:#C77AB8; --c-unk:#EBA6B9; --sage:#C77AB8; --sage-d:#6E8F75;
  --ok:#3E8F6E; --warn:#B9771C; --bad:#C8335F;
  --shadow:0 1px 1px rgba(42,32,36,.03),0 10px 30px -18px rgba(120,40,70,.18);
  --r:22px; --r-s:14px;
  --f-title:'Phosphalte Solid','Bricolage Grotesque',system-ui,sans-serif;
  --f-text:'Poppins',system-ui,-apple-system,sans-serif;
}
[data-theme="dark"]{
  --bg:#161113; --card:#211A1D; --rose-p:#3A2230; --peach-p:#36281E; --rose-pd:#2A1E24;
  --text:#F7EEF0; --text2:#B39FA6; --border:#33282C; --line:#2B2226;
  --shadow:0 1px 1px rgba(0,0,0,.25),0 10px 30px -18px rgba(0,0,0,.6);
  --rasp:#E5577F;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:var(--f-text);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-title);font-weight:700;letter-spacing:-.022em;line-height:1.1}
h1{font-size:34px;font-variation-settings:"opsz" 72} h2{font-size:22px} h3{font-size:16px;letter-spacing:-.01em;font-weight:650}
a{color:var(--rasp)}
:focus-visible{outline:2px solid var(--rasp);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.i{width:20px;height:20px;flex-shrink:0;display:inline-block;vertical-align:middle}
.app{display:flex;min-height:100vh}
/* Navigation */
.side{width:236px;flex-shrink:0;padding:26px 16px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:0 10px 28px}
.brand .logo{width:30px;height:30px;border-radius:50%;background:conic-gradient(var(--c-mens) 0 18%,var(--c-foll) 18% 45%,var(--c-ovu) 45% 55%,var(--c-lut) 55% 100%);position:relative}
.brand .logo::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--bg)}
.brand b{font-family:var(--f-title);font-size:21px;letter-spacing:-.03em;font-weight:800}
.nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;color:var(--text2);text-decoration:none;font-weight:500;font-size:14px;margin-bottom:1px;transition:background .15s,color .15s}
.nav a:hover{color:var(--text)}
.nav a.on{background:var(--card);color:var(--text);box-shadow:var(--shadow)}
.nav a.on .i{color:var(--rasp)}
.nav .i{width:21px;height:21px}
.main{flex:1;min-width:0;padding:34px 40px 120px;max-width:1200px}
.tabbar{display:none}
@media (max-width:860px){
  .side{display:none}
  .main{padding:20px 16px calc(100px + env(safe-area-inset-bottom))}
  .tabbar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:6px;justify-content:space-around}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0;font-size:10.5px;color:var(--text2);text-decoration:none;border-radius:18px}
  .tabbar a.on{color:var(--rasp)}
  .tabbar .i{width:23px;height:23px}
  h1{font-size:28px}
}
/* Header */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.head .sub{color:var(--text2);font-size:14px;margin-top:6px;max-width:62ch}
.eyebrow{font-size:13px;color:var(--text2);font-weight:500;margin-bottom:4px}
/* Grid & surfaces */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:span 2} .span3{grid-column:span 3}
@media (max-width:1050px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.span3{grid-column:span 2}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}.span2,.span3{grid-column:auto}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none;background:transparent}
.card.tint{background:var(--rose-pd);border-color:transparent;box-shadow:none}
.card.peach{background:var(--peach-p);border-color:transparent;box-shadow:none}
.card.hero{background:var(--card)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-h h3{display:flex;align-items:center;gap:10px}
.card-h h3 .i{width:32px;height:32px;padding:7px;border-radius:10px;background:var(--rose-pd);color:var(--rasp)}
.card.tint .card-h h3 .i,.card.peach .card-h h3 .i{background:var(--card)}
.muted{color:var(--text2)} .small{font-size:13px} .xs{font-size:12px}
.row{display:flex;align-items:center;gap:10px} .row.wrap{flex-wrap:wrap} .row.between{justify-content:space-between} .col{display:flex;flex-direction:column;gap:8px}
.mt{margin-top:12px} .mt2{margin-top:22px} .mb{margin-bottom:12px} .grow{flex:1;min-width:0}
.big{font-family:var(--f-title);font-size:30px;line-height:1;font-weight:700;letter-spacing:-.03em}
.sep{height:1px;background:var(--line);margin:14px 0}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border);background:var(--card);border-radius:999px;padding:9px 16px;font-weight:500;font-size:13.5px;cursor:pointer;transition:transform .1s,background .15s,border-color .15s;white-space:nowrap;color:var(--text)}
.btn:hover{border-color:var(--c-unk)} .btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.pri{background:var(--rasp);color:#fff;border-color:var(--rasp)}
.btn.pri:hover{background:#B42B54}
.btn.soft{background:var(--rose-pd);border-color:transparent;color:var(--rasp)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text2)}
.btn.ghost:hover{color:var(--text)}
.btn.sm{padding:6px 12px;font-size:13px} .btn.xs{padding:4px 10px;font-size:12px}
.btn.icon{padding:7px;border-radius:12px} .btn .i{width:17px;height:17px}
.btn.danger{color:var(--bad)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:500;background:var(--card);border:1px solid var(--border);cursor:pointer;user-select:none;color:var(--text)}
.chip:hover{border-color:var(--c-unk)}
.chip.on{background:var(--rasp);border-color:var(--rasp);color:#fff}
.chip input{accent-color:var(--rasp)}
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.tag{font-size:11.5px;padding:2px 9px;border-radius:999px;background:var(--peach-p);color:#A95A22;font-weight:600;white-space:nowrap}
.tag.rose{background:var(--rose-p);color:var(--rasp)} .tag.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)} .tag.bad{background:color-mix(in srgb,var(--bad) 11%,transparent);color:var(--bad)}
[data-theme="dark"] .tag{color:var(--orange-l)}
/* Forms */
label.f{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text2);font-weight:500}
input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:9px 12px;font-size:14px;width:100%;outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--rasp)}
textarea{min-height:110px;resize:vertical;line-height:1.6}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
/* Scale 1-5 */
.scale{display:flex;gap:4px;background:var(--rose-pd);padding:3px;border-radius:12px}
.scale button{flex:1;min-width:30px;height:32px;border-radius:9px;border:none;background:transparent;cursor:pointer;font-size:13px;font-weight:600;color:var(--text2);transition:background .15s,color .15s}
.scale button:hover{background:var(--card);color:var(--text)}
.scale button.on{background:var(--rasp);color:#fff}
.scale-l{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text2);margin-top:4px}
/* Habit rows */
.hab{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.hab:last-child{border-bottom:none}
.ck{width:24px;height:24px;border-radius:50%;border:1.6px solid var(--c-unk);display:grid;place-items:center;cursor:pointer;flex-shrink:0;background:transparent;transition:background .2s,border-color .2s;color:#fff}
.ck .i{width:13px;height:13px;opacity:0;transform:scale(.4);transition:all .2s}
.ck:hover{border-color:var(--rasp)}
.ck.full{background:var(--rasp);border-color:var(--rasp)} .ck.full .i{opacity:1;transform:none}
.ck.min{background:var(--peach-p);border-color:var(--orange-l);color:#B5651D} .ck.min .i{opacity:1;transform:none}
.hab .t{font-weight:500;font-size:14px} .hab .s{font-size:12.5px;color:var(--text2)}
.hab.done .t{color:var(--text2);text-decoration:line-through;text-decoration-color:var(--c-unk)}
/* Timeline */
.tl{position:relative}
.tl .hab{border-bottom:none;padding:9px 0}
.tl .tm{width:44px;font-size:12px;color:var(--text2);font-variant-numeric:tabular-nums;flex-shrink:0;text-align:right}
.tl-sec{font-size:12.5px;color:var(--text2);font-weight:600;margin:14px 0 2px 56px}
.tl-sec:first-child{margin-top:0}
/* Progress */
.bar{height:6px;border-radius:99px;background:var(--rose-pd);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--rasp);border-radius:99px;transition:width .5s ease}
.bar.thin{height:5px}
.bar.over>i{background:var(--orange)}
.ring{position:relative;display:grid;place-items:center}
.ring svg{transform:rotate(-90deg)}
.ring .v{position:absolute;text-align:center}
/* Cycle dial (élément signature) */
.dial-wrap{display:flex;gap:28px;align-items:center}
.dial{position:relative;width:228px;height:228px;flex-shrink:0;animation:dialIn .9s cubic-bezier(.2,.8,.2,1) both}
.dial svg{width:100%;height:100%}
.dial .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dial .c .n{font-family:var(--f-title);font-size:54px;font-weight:800;letter-spacing:-.05em;line-height:.9}
.dial .c .p{font-size:13px;font-weight:600;margin-top:6px}
.dial .c .e{font-size:11.5px;color:var(--text2)}
@keyframes dialIn{from{opacity:0;transform:rotate(-25deg) scale(.94)}to{opacity:1;transform:none}}
@media (max-width:640px){.dial-wrap{flex-direction:column;align-items:stretch}.dial{margin:0 auto;width:210px;height:210px}}
/* Tabs (segmented) */
.seg{display:inline-flex;background:var(--rose-pd);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:none;background:transparent;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(42,32,36,.08)}
/* Lists */
.li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:none}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-weight:600;color:var(--text2);font-size:12px;padding:8px 6px;border-bottom:1px solid var(--border)}
.tbl td{padding:9px 6px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.scroll-x{overflow-x:auto}
/* Calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .dn{font-size:11.5px;color:var(--text2);text-align:center;font-weight:600;padding-bottom:4px}
.cal .c{aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;cursor:pointer;position:relative;border:1.5px solid transparent;transition:background .15s;font-variant-numeric:tabular-nums}
.cal .c:hover{background:var(--rose-pd)}
.cal .c.out{opacity:.3}
.cal .c.today{border-color:var(--text);font-weight:700}
.cal .c.per{background:var(--c-mens);color:#fff;font-weight:600}
.cal .c.pred{border:1.5px dashed var(--c-mens);color:var(--c-mens)}
.cal .c i{position:absolute;bottom:13%;width:5px;height:5px;border-radius:50%}
/* Exercise */
.ex{padding:12px 14px;border-radius:var(--r-s);background:var(--bg);border:1px solid var(--line);margin-bottom:8px}
.ex .n{font-weight:600} .ex .a{font-weight:600;color:var(--rasp);white-space:nowrap;font-variant-numeric:tabular-nums}
details summary{cursor:pointer;list-style:none} details summary::-webkit-details-marker{display:none}
/* Modal */
.ov{position:fixed;inset:0;background:rgba(42,32,36,.32);backdrop-filter:blur(4px);z-index:80;display:flex;align-items:flex-end;justify-content:center;animation:fade .18s}
@media (min-width:700px){.ov{align-items:center}}
.sheet{background:var(--card);width:100%;max-width:560px;max-height:88vh;overflow:auto;border-radius:26px 26px 0 0;padding:24px;animation:up .26s cubic-bezier(.2,.8,.2,1)}
@media (min-width:700px){.sheet{border-radius:26px}}
.sheet.wide{max-width:780px}
@keyframes fade{from{opacity:0}} @keyframes up{from{transform:translateY(24px);opacity:0}}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:13.5px;z-index:99;animation:up .25s;box-shadow:var(--shadow)}
/* Breathing */
.breath{width:190px;height:190px;margin:14px auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F6A24E,#F06A7E 55%,#E8508A);display:grid;place-items:center;color:#fff;font-family:var(--f-title);font-size:20px;font-weight:700;transition:transform linear}
/* Charts */
.chart{width:100%;height:auto;display:block}
.chart text{font-family:var(--f-text);fill:var(--text2);font-size:11px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text2);margin-top:6px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.empty{padding:22px;text-align:center;color:var(--text2);font-size:13.5px;border:1.5px dashed var(--border);border-radius:var(--r-s)}
.note{font-size:13px;color:var(--text2);background:var(--rose-pd);border-radius:12px;padding:10px 12px;line-height:1.55}
.note b{color:var(--text)}
.alert{font-size:13px;border-radius:12px;padding:10px 12px;background:color-mix(in srgb,var(--warn) 11%,transparent);color:color-mix(in srgb,var(--warn) 80%,var(--text))}
.alert.bad{background:color-mix(in srgb,var(--bad) 9%,transparent);color:var(--bad)}
.heat{display:grid;grid-template-columns:repeat(15,1fr);gap:4px}
.heat i{aspect-ratio:1;border-radius:50%;background:var(--rose-pd);display:block}
.kpi .v{font-family:var(--f-title);font-size:26px;line-height:1.1;font-weight:700;letter-spacing:-.03em}
.kpi .l{font-size:12px;color:var(--text2)}
.sync{font-size:12px;color:var(--text2);display:flex;align-items:center;gap:8px;padding:10px 12px;margin-top:auto}
.sync .i{width:16px;height:16px}
.hidden{display:none!important}
.clickable{cursor:pointer}
.clickable.card:hover{border-color:var(--c-unk)}
.step-n{width:22px;height:22px;border-radius:50%;background:var(--rose-pd);color:var(--rasp);font-size:11.5px;font-weight:700;display:grid;place-items:center;flex-shrink:0}
.phase-band{height:4px;border-radius:99px;margin-bottom:16px}


/* ============ Touches premium, avec retenue ============ */
:root{--dial-c:transparent}
.btn.pri{background:linear-gradient(135deg,#DE4C80 0%,#C8335F 100%);border-color:transparent;box-shadow:0 6px 16px -10px rgba(200,51,95,.9),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.pri:hover{background:linear-gradient(135deg,#D44478 0%,#B82D56 100%)}
/* Défi : carte sombre, seule surface foncée de l'app */
.hero-g{position:relative;overflow:hidden;background:#2A2024;color:#FCF8F6;border:1px solid #3A2E33;box-shadow:0 24px 48px -28px rgba(42,32,36,.6)}
.hero-g::before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(232,80,138,.30),rgba(242,138,60,.10) 45%,transparent 70%)}
.hero-g > *{position:relative}
.hero-g h1{color:#FCF8F6!important}
.hero-g .muted{color:#BFAEB4}
.hero-g .bar{background:rgba(255,255,255,.12)!important}
.hero-g .bar>i{background:linear-gradient(90deg,#F28A3C,#F06A7E 55%,#E8508A)!important}
.hero-g .tag{background:rgba(255,255,255,.1)!important;color:#F3DDE4!important}
.hero-g .btn{background:rgba(255,255,255,.08);color:#FCF8F6;border-color:rgba(255,255,255,.16)}
.hero-g .btn.pri{background:linear-gradient(135deg,#F28A3C,#E8508A);color:#fff}
[data-theme="dark"] .hero-g{background:#100C0E;border-color:#2B2226}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(28px,1fr));gap:5px}
.dgrid i{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10.5px;color:var(--text2);background:var(--rose-pd);font-variant-numeric:tabular-nums}
.dgrid i.ok{background:var(--rasp);color:#fff}
.dgrid i.mid{background:var(--peach-p);color:#A95A22}
.dgrid i.today{outline:1.5px solid var(--text);outline-offset:2px}
.dgrid i.fut{opacity:.45}

/* ============ Accueil : cadran à sphère (v4) ============ */
.hello{font-size:40px;letter-spacing:-.035em}
@media (max-width:860px){.hello{font-size:32px}}
.roundbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--text);box-shadow:0 8px 20px -14px rgba(42,32,36,.35)}
.roundbtn .i{width:21px;height:21px}
.avatar{width:44px;height:44px;border-radius:50%;border:1px solid #F3D3DE;background:#F8E1E9;color:var(--rasp);font-family:var(--f-title);font-weight:700;font-size:18px;cursor:pointer}
[data-theme="dark"] .avatar{background:#3A2230;border-color:#4A2C3B;color:#F3A7BF}
.home-hero{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:36px;align-items:center;margin-bottom:8px}
@media (max-width:900px){.home-hero{grid-template-columns:1fr;gap:22px}}
.hero-l{display:flex;flex-direction:column;align-items:center;gap:18px}
.softchip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#F4EEEC;color:#7C6A70;font-size:13px;font-weight:600;letter-spacing:.01em}
.softchip .i{width:15px;height:15px;color:var(--c-mens)}
[data-theme="dark"] .softchip{background:#271E22;color:#C9B5BC}
.hero-date{font-size:14.5px;color:var(--text2)}
.orbdial{position:relative;width:min(100%,380px);aspect-ratio:1}
.dial-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orb{position:absolute;inset:17%;border-radius:50%;overflow:hidden;isolation:isolate;
  background:var(--o1);box-shadow:0 30px 60px -28px var(--o3),inset 0 0 0 1px rgba(255,255,255,.35)}
.orb::before{content:"";position:absolute;inset:-25%;z-index:-1;
  background:radial-gradient(closest-side at 30% 32%,var(--o2),transparent 70%),
    radial-gradient(closest-side at 72% 58%,var(--o3),transparent 70%),
    radial-gradient(closest-side at 46% 86%,var(--o4),transparent 65%),
    radial-gradient(closest-side at 80% 16%,rgba(255,255,255,.7),transparent 55%),
    radial-gradient(closest-side at 16% 72%,rgba(255,255,255,.45),transparent 55%);
  filter:blur(16px) saturate(1.1);animation:swirl 28s linear infinite}
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,transparent 62%,rgba(255,255,255,.35) 100%);pointer-events:none}
@keyframes swirl{to{transform:rotate(360deg)}}
.orb-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-shadow:0 2px 14px rgba(70,20,60,.25)}
.orb-c span{font-size:12px;letter-spacing:.3em;font-weight:600;opacity:.85}
.orb-c b{font-family:var(--f-title);font-size:clamp(30px,9vw,46px);font-weight:700;letter-spacing:-.03em;margin-top:4px;line-height:1}
.orb-c i{display:block;width:34px;height:3px;border-radius:3px;background:rgba(255,255,255,.75);margin-top:14px}
.orb.ph-menstruelle{--o1:#F3A6BC;--o2:#EC5F86;--o3:#F28A9C;--o4:#E8508A}
.orb.ph-folliculaire{--o1:#F5BCD6;--o2:#EE79AE;--o3:#F6A9CC;--o4:#E36AA5}
.orb.ph-ovulatoire{--o1:#F9C49E;--o2:#F48A4E;--o3:#F6A24E;--o4:#F06A7E}
.orb.ph-luteale{--o1:#D7B4E6;--o2:#A867CF;--o3:#8F62CF;--o4:#E3A9D6}
.orb.ph-inconnue{--o1:#F0CAD7;--o2:#EBA6B9;--o3:#F3C2D2;--o4:#E7A0B6}
.daypill{position:absolute;transform:translate(-50%,-50%);min-width:44px;height:30px;padding:0 9px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:12.5px;font-weight:700;border:3px solid var(--bg);box-shadow:0 6px 14px -6px rgba(42,32,36,.45)}
.daypill.ph-menstruelle{background:linear-gradient(135deg,#F28A3C,#EC5F86)}
.daypill.ph-folliculaire{background:linear-gradient(135deg,#F4A3C6,#EE79AE)}
.daypill.ph-ovulatoire{background:linear-gradient(135deg,#F6A24E,#F48A4E)}
.daypill.ph-luteale{background:linear-gradient(135deg,#C77AB8,#9C6FD0)}
.daypill.ph-inconnue{background:#D9A3B5}
.hero-r{display:flex;flex-direction:column;gap:18px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tile{display:flex;align-items:center;gap:14px;padding:16px;border-radius:24px;background:var(--card);border:1px solid var(--border);text-align:left;cursor:pointer;box-shadow:0 14px 30px -24px rgba(42,32,36,.35);transition:transform .15s,border-color .15s}
.tile:hover{border-color:var(--c-unk);transform:translateY(-1px)}
.tile b{display:block;font-size:15px;font-weight:600;color:var(--text)}
.tile em{display:block;font-style:normal;font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--rose-pd);color:var(--rasp)}
.tile-i .i{width:22px;height:22px}
.tile:nth-child(1) .tile-i{background:#FDEBDD;color:#D46A2A}
.tile:nth-child(2) .tile-i{background:#F1E6F6;color:#9A5FB8}
.tile:nth-child(3) .tile-i{background:#FCE6EE;color:var(--rasp)}
.tile:nth-child(4) .tile-i{background:#FDE8EC;color:#E04B6E}
[data-theme="dark"] .tile .tile-i{background:rgba(255,255,255,.06)!important}
.phase-brief{padding:20px;border-radius:24px;background:var(--card);border:1px solid var(--border)}
.phase-brief h3{margin-bottom:6px}
.brief-row{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px}
.brief-row:first-of-type{margin-top:10px}
.brief-row span{display:flex;align-items:center;gap:7px;color:var(--text2);width:104px;flex-shrink:0}
.brief-row span .i{width:17px;height:17px;color:var(--rasp)}
.brief-row b{font-weight:500}
/* Barre d'onglets mobile : bouton central sphère */
.tabbar .orbtab{flex:0 0 64px;display:grid;place-items:center;padding:0}
.tabbar .orbtab span{width:52px;height:52px;border-radius:50%;background:#FCE6EE;display:grid;place-items:center}
.tabbar .orbtab span::before{content:"";width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,transparent 35%),conic-gradient(from 210deg,#EC5F86,#F48A4E,#C77AB8,#EE79AE,#EC5F86);filter:saturate(1.05);box-shadow:0 6px 14px -6px rgba(200,51,95,.6)}
[data-theme="dark"] .tabbar .orbtab span{background:#3A2230}

@media (max-width:480px){.tiles{gap:10px}.tile{padding:12px;gap:10px;border-radius:20px}.tile-i{width:38px;height:38px}.tile-i .i{width:19px;height:19px}.tile b{font-size:14px}}