:root{
  --bg: #F5F0E8;--surface:#FFFFFF;--surfaceAlt:#EDE8DF;--surfaceWarm:#F0EBE3;
  --border:rgba(139,105,20,.18);--borderLight:rgba(139,105,20,.10);
  --text: #1A1714;--textBody:#2C1E08;--textMuted:rgba(60,40,10,.55);--textDim:rgba(60,40,10,.38);
  --accent: #8B6914;--accentLight:#B8863A;--accentBg:rgba(139,105,20,.06);
  --zonePlein:#4a6fa5;--zoneAccord:#8B6914;--zoneTension:#c47a10;--zoneRupture:#b71c1c;
  --paramC:#4a6fa5;--paramE:#c47a10;--paramS:#6a5aad;--paramR:#2e7d32;--paramP:#a05070;--paramCo:#4a8090;
  --serif:'Libre Baskerville',Georgia,serif;
  --body:'DM Sans',system-ui,-apple-system,sans-serif;--mono:'DM Mono','Courier New',monospace;
  --card-shadow:0 1px 4px rgba(139,105,20,.08);
  --card-radius:20px;
  --section-gap:16px;
  --fs-micro:11px;
  --fs-label:13px;
  --fs-body:16px;
  --fs-title:20px;
  --fs-hero:24px;
}
.theme-dark{
  --bg:#1C1A18;--surface:#2A2723;--surfaceAlt:#221F1C;--surfaceWarm:#1a1816;
  --border:rgba(196,169,106,.18);--borderLight:rgba(196,169,106,.10);
  --text:#F5F0E8;--textBody:#E8E0D4;--textMuted:rgba(245,240,232,.55);--textDim:rgba(245,240,232,.35);
  --accent:#C4A96A;--accentLight:#ddbf88;--accentBg:rgba(196,169,106,.08);
  --zonePlein:#6b9fd4;--zoneAccord:#C4A96A;--zoneTension:#daa050;--zoneRupture:#d06060;
  --paramC:#6b9fd4;--paramE:#daa050;--paramS:#9888cc;--paramR:#6aad6a;--paramP:#c47a95;--paramCo:#6a9ab0;
  --card-shadow:0 1px 4px rgba(0,0,0,.3);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.01em;}
#app{max-width:680px;margin:0 auto;min-height:100vh;position:relative;}
@media(min-width:768px){#app{max-width:680px;padding:0 20px;}.nav{max-width:680px;}.overlay{max-width:680px;}.page{padding:0 8px 110px;}}
@media(min-width:1024px){#app{max-width:760px;padding:0 32px;}.nav{max-width:760px;}.overlay{max-width:760px;}html{font-size:17px;}}

#page-inscription{display:none;min-height:100vh;flex-direction:column;justify-content:center;padding:32px 24px 40px;background:var(--bg);}
#page-main{display:none;}

/* ── Navigation principale ── */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:680px;background:var(--bg);border-top:1px solid var(--borderLight);display:flex;z-index:100;padding-bottom:env(safe-area-inset-bottom,0px);}
.nav-btn{flex:1;padding:12px 4px 16px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;border:none;background:none;color:var(--textDim);font-family:var(--body);font-size:11px;font-weight:400;letter-spacing:.03em;transition:color .2s;min-height:56px;}
.nav-btn.active{color:var(--accent);}
.nav-icon{display:flex;align-items:center;justify-content:center;transition:transform .15s;}
.nav-icon svg{width:22px;height:22px;}
.nav-btn.active .nav-icon{transform:scale(1.1);}

.page{display:none;padding:0 16px 110px;}
.page.active{display:block;}

/* ── Headers ── */
.header{position:sticky;top:0;z-index:50;background:var(--bg);padding:18px 0 12px;margin:0 -16px 16px;padding-left:16px;padding-right:16px;}
.header::after{content:'';position:absolute;bottom:0;left:16px;right:16px;height:2px;background:linear-gradient(90deg,var(--accent),transparent 70%);}
.header-brand{font-family:var(--body);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--textMuted);font-weight:600;}
.header-title{font-family:var(--serif);font-size:30px;font-weight:400;color:var(--text);margin-top:0;line-height:1.15;}
.header-sub{font-size:14px;color:var(--textMuted);letter-spacing:.02em;margin-top:3px;font-weight:400;}

/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--borderLight);border-radius:var(--card-radius);padding:18px 20px;margin-bottom:var(--section-gap);box-shadow:var(--card-shadow);}
.card-title{font-family:var(--mono);font-size:11px;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.card-title::after{content:'';flex:1;height:1px;background:var(--borderLight);}

/* ── Gauge ── */
.gauge-wrap{display:flex;flex-direction:column;align-items:center;padding:10px 0;}
.gauge-score{font-family:var(--mono);font-size:56px;font-weight:500;color:var(--text);line-height:1;margin-top:-6px;}
.gauge-zone{font-family:var(--serif);font-size:22px;font-weight:400;margin-top:6px;}
.gauge-desc{font-size:14px;color:var(--textMuted);text-align:center;margin-top:6px;max-width:260px;font-style:italic;line-height:1.5;}

/* ── Zones ── */
.z-plein{color:var(--zonePlein)!important;}
.z-accord{color:var(--zoneAccord)!important;}
.z-tension{color:var(--zoneTension)!important;}
.z-rupture{color:var(--zoneRupture)!important;}

/* ── Banners ── */
.solar-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;margin-bottom:var(--section-gap);border:none;}
.solar-normal{background:rgba(106,173,106,.1);color:var(--zoneAccord);}
.solar-high{background:rgba(218,160,80,.12);color:var(--zoneTension);}
.solar-storm{background:rgba(208,96,96,.12);color:var(--zoneRupture);}
.solar-title{font-weight:600;font-size:15px;letter-spacing:.01em;}
.solar-sub{font-size:13px;opacity:.75;margin-top:2px;}
.kp-badge{font-family:var(--mono);font-size:20px;font-weight:600;}

/* ── Stats ── */
.env-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.env-item{background:var(--surfaceAlt);border-radius:10px;padding:12px 6px;text-align:center;}
.env-val{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--text);}
.env-lbl{font-size:13px;color:var(--textMuted);margin-top:3px;letter-spacing:.02em;font-weight:400;}
.stats-row{display:flex;gap:8px;margin-bottom:var(--section-gap);}
.stat-box{flex:1;background:var(--surface);border:none;border-radius:12px;padding:12px 8px;text-align:center;box-shadow:0 1px 4px rgba(28,25,23,.06);}
.stat-val{font-family:var(--mono);font-size:22px;font-weight:600;}
.stat-lbl{font-size:13px;color:var(--textMuted);letter-spacing:.05em;text-transform:uppercase;margin-top:3px;font-weight:500;}

/* ── Signals ── */
.signal{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;margin-bottom:6px;font-size:14px;color:var(--textBody);border:1px solid;}
.sig-warn{background:rgba(218,160,80,.1);border-color:rgba(218,160,80,.3);}
.sig-danger{background:rgba(208,96,96,.1);border-color:rgba(208,96,96,.3);}

/* ── Citations ── */
.citation{font-family:var(--serif);font-size:18px;font-style:italic;font-weight:300;line-height:1.65;color:var(--textBody);border-left:3px solid var(--accent);padding-left:16px;}
.citation-attr{font-size:13px;color:var(--textMuted);margin-top:8px;letter-spacing:.05em;font-family:var(--body);font-weight:500;}

/* ── Boutons ── */
.btn{display:block;width:100%;padding:16px;background:var(--accent);color:#fff;border:none;border-radius:12px;font-family:var(--body);font-size:16px;font-weight:600;cursor:pointer;text-align:center;transition:all .2s;margin-top:8px;letter-spacing:.01em;min-height:52px;}
.btn:active{transform:scale(.97);opacity:.85;}
.btn-outline{background:transparent;color:var(--accent);border:2px solid var(--accent);}
.btn-dark{background:#2c2520;color:#f5f0ea;}
.btn-sm{padding:12px 18px;font-size:14px;width:auto;display:inline-block;border-radius:8px;margin-top:0;}

/* ── Onglets ── */
.hm-tabs{display:flex;gap:6px;margin-bottom:12px;}
.hm-tab{flex:1;padding:10px;text-align:center;border-radius:8px;font-size:13px;cursor:pointer;border:none;background:var(--surfaceAlt);color:var(--textMuted);transition:all .2s;font-weight:600;}
.hm-tab.active{background:var(--accent);color:#fff;}
.hm-wrap{overflow-x:auto;padding-bottom:4px;}
.hm-grid{display:grid;gap:3px;}
.hm-cell{border-radius:3px;cursor:pointer;}
.hm-legend{display:flex;align-items:center;gap:8px;margin-top:8px;justify-content:flex-end;}
.hm-leg-item{display:flex;align-items:center;gap:3px;font-size:12px;color:var(--textMuted);}
.hm-leg-sq{width:10px;height:10px;border-radius:2px;}

.period-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.period-tab{padding:9px 16px;border-radius:20px;font-size:13px;cursor:pointer;border:none;background:var(--surfaceAlt);color:var(--textMuted);transition:all .2s;font-weight:600;}
.period-tab.active{background:var(--accent);color:#fff;}

/* ── Graphes ── */
.sparkline-wrap{position:relative;height:80px;margin:4px 0;}
.sparkline-wrap svg{width:100%;height:100%;}
.stat-table{width:100%;border-collapse:collapse;font-size:15px;}
.stat-table th{text-align:left;padding:10px 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--textMuted);border-bottom:2px solid var(--border);font-weight:600;font-family:var(--body);}
.stat-table td{padding:12px 8px;font-size:15px;border-bottom:1px solid var(--borderLight);color:var(--textBody);}
.stat-table tr:last-child td{border-bottom:none;}

/* ── Insights ── */
.insights-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--accent) 0%,var(--accentLight) 100%);border:none;border-radius:14px;color:#fff;font-family:var(--body);font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;letter-spacing:.03em;min-height:52px;}
.insights-btn:hover{box-shadow:0 2px 16px rgba(201,169,110,.25);}
.insights-btn:disabled{opacity:.5;cursor:wait;}
.insights-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:300;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(6px);}
.insights-overlay.open{display:flex;}
.insights-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;max-width:440px;width:100%;max-height:85vh;overflow-y:auto;position:relative;}
.insights-header{padding:20px 20px 0;display:flex;justify-content:space-between;align-items:flex-start;}
.insights-title{font-family:var(--serif);font-size:20px;color:var(--text);font-weight:400;}
.insights-close{font-size:28px;color:var(--textMuted);cursor:pointer;background:none;border:none;padding:0 4px;line-height:1;}
.insights-body{padding:16px 20px 24px;font-size:15px;color:var(--textBody);line-height:1.75;font-family:var(--body);}
.insights-meta{padding:0 20px 16px;font-size:13px;color:var(--textDim);font-family:var(--mono);display:flex;justify-content:space-between;}
.insights-loading{text-align:center;padding:40px 20px;}
.insights-loading .spinner{width:28px;height:28px;border:2.5px solid var(--borderLight);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px;}
@keyframes spin{to{transform:rotate(360deg)}}
.insights-loading-text{font-family:var(--serif);font-size:15px;color:var(--textMuted);font-style:italic;}

.evo-card{margin-top:4px;}
.evo-legend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.evo-leg-btn{padding:7px 12px;border-radius:16px;font-size:13px;cursor:pointer;border:1.5px solid var(--border);background:var(--surface);color:var(--textMuted);transition:all .15s;font-family:var(--body);}
.evo-leg-btn.active{color:#fff;border-color:transparent;}
.evo-wrap{position:relative;height:180px;overflow-x:auto;overflow-y:hidden;}
.evo-wrap svg{height:100%;min-width:100%;}

/* ── Overlay saisie ── */
.overlay{position:fixed;inset:0;background:var(--bg);z-index:200;overflow-y:auto;max-width:680px;margin:0 auto;display:none;}
.overlay.open{display:block;}
.saisie-header{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg);z-index:10;}
.saisie-period{font-family:var(--body);font-size:16px;color:var(--accent);font-weight:600;}
.saisie-step-info{font-size:14px;color:var(--textMuted);font-weight:500;}
.saisie-close{font-size:30px;color:var(--textMuted);cursor:pointer;background:none;border:none;padding:4px 8px;line-height:1;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;}
.progress-bar{height:4px;background:var(--borderLight);}
.progress-fill{height:100%;background:var(--accent);transition:width .3s ease;}
.saisie-body{padding:24px 16px 140px;}
.step-label{font-family:var(--body);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;font-weight:600;}
.step-q{font-family:var(--serif);font-size:22px;font-style:italic;font-weight:400;color:var(--text);margin-bottom:24px;line-height:1.4;}
.step-val{font-family:var(--mono);font-size:56px;font-weight:600;text-align:center;margin:10px 0 6px;line-height:1;}
.step-level{font-family:var(--serif);font-size:17px;color:var(--textMuted);text-align:center;margin-bottom:18px;height:24px;font-style:italic;}

/* ── Sliders ── */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;cursor:pointer;touch-action:none;margin:12px 0;padding:0;}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:36px;height:36px;border-radius:50%;background:var(--accent);border:none;box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:pointer;margin-top:-15px;}
input[type=range]::-moz-range-thumb{width:36px;height:36px;border-radius:50%;background:var(--accent);border:none;box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:pointer;}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;border:none;}
.slider-ticks{display:flex;justify-content:space-between;padding:0 2px;margin-top:4px;}
.slider-tick{font-family:var(--mono);font-size:13px;color:var(--textMuted);}

/* ── Compteurs ── */
.counter-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px;}
.counter-info{flex:1;}
.counter-label{font-size:16px;color:var(--text);font-weight:500;}
.counter-sub{font-size:13px;color:var(--textMuted);margin-top:2px;font-style:italic;}
.counter-ctrl{display:flex;align-items:center;gap:12px;}
.counter-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--surfaceAlt);color:var(--text);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
.counter-val{font-family:var(--mono);font-size:20px;font-weight:500;min-width:28px;text-align:center;}

/* ── Chips ── */
.chip-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.chip{padding:11px 16px;border:1.5px solid var(--border);border-radius:20px;font-size:15px;color:var(--textBody);background:var(--surface);cursor:pointer;transition:all .15s;user-select:none;font-weight:500;min-height:44px;display:flex;align-items:center;}
.chip.sel{background:var(--accent);border-color:var(--accent);color:#fff;}
.chip.sel-pos{background:rgba(106,173,106,.15);border-color:var(--zoneAccord);color:var(--zoneAccord);}
.chip.sel-neg{background:rgba(218,160,80,.15);border-color:var(--zoneTension);color:var(--zoneTension);}
.chip.sel-neu{background:var(--surfaceAlt);border-color:var(--textMuted);color:var(--textMuted);}

/* ── Time fields ── */
.time-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.time-field{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;}
.time-label{font-size:13px;color:var(--textMuted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.time-field input[type=time]{border:none;background:none;font-family:var(--mono);font-size:22px;color:var(--text);width:100%;outline:none;}
.sleep-dur{text-align:center;font-family:var(--mono);font-size:36px;font-weight:500;margin:8px 0 2px;}
.sleep-norm{text-align:center;font-size:14px;color:var(--textMuted);margin-bottom:14px;}

/* ── Wakeups ── */
.wakeups-row{display:flex;gap:6px;margin-bottom:14px;}
.wakeup-btn{flex:1;min-width:44px;min-height:44px;padding:10px 4px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-family:var(--mono);font-size:15px;color:var(--textBody);cursor:pointer;text-align:center;transition:all .15s;}
.wakeup-btn.sel{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ── Balance bar ── */
.bal-bar{height:36px;border-radius:8px;overflow:hidden;display:flex;margin:10px 0;}
.bal-seg{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:#fff;font-weight:500;transition:width .3s;min-width:0;}
.bal-labels{display:flex;justify-content:space-between;font-size:13px;color:var(--textMuted);margin-bottom:4px;}

/* ── Émotions ── */
.emo-section{margin-bottom:12px;}
.emo-section-title{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:7px;}
.sel-emotions{display:flex;flex-wrap:wrap;gap:6px;min-height:32px;margin-bottom:10px;}

/* ── Inputs ── */
.goal-input-row{display:flex;gap:8px;margin-top:10px;}
.goal-input{flex:1;border:1px solid var(--border);border-radius:8px;padding:12px;font-size:15px;font-family:var(--body);background:var(--surface);outline:none;color:var(--text);}
.goal-input:focus{border-color:var(--accent);}
.goal-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;min-height:32px;}
.goal-tag{padding:6px 10px 6px 12px;background:var(--surfaceAlt);border:1px solid var(--border);border-radius:16px;font-size:14px;display:flex;align-items:center;gap:4px;}
.goal-tag .rm{cursor:pointer;color:var(--textMuted);font-size:16px;}

textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:14px;font-family:var(--body);font-size:15px;color:var(--text);background:var(--surface);resize:none;outline:none;min-height:90px;}
textarea:focus{border-color:var(--accent);}
.autosug-preview{background:var(--surfaceAlt);border-left:3px solid var(--accent);padding:14px 16px;border-radius:0 8px 8px 0;font-family:var(--serif);font-size:17px;font-style:italic;color:var(--textBody);min-height:56px;margin-top:10px;}

/* ── Toggle ── */
.gymn-toggle{width:50px;height:30px;border-radius:15px;background:var(--border);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;display:inline-block;}
.gymn-toggle.on{background:var(--zoneAccord);}
.gymn-toggle::after{content:'';position:absolute;width:24px;height:24px;border-radius:50%;background:var(--text);top:3px;left:3px;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.gymn-toggle.on::after{left:23px;}

/* ── Nav saisie ── */
.saisie-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:680px;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-top:1px solid var(--borderLight);padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;z-index:300;}
.btn-prev{flex:1;background:var(--surfaceAlt);color:var(--textBody);border:none;border-radius:12px;padding:16px;font-family:var(--body);font-size:16px;font-weight:600;cursor:pointer;min-height:52px;}
.btn-next{flex:2;}

/* ── Score lines ── */
.score-line{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--borderLight);font-size:15px;}
.score-line:last-child{border-bottom:none;}
.pos{font-family:var(--mono);font-size:13px;color:var(--zoneAccord);}
.neg{font-family:var(--mono);font-size:13px;color:var(--zoneRupture);}

/* ── Axbars ── */
.axbar{margin-bottom:8px;}
.axbar-label{display:flex;justify-content:space-between;font-size:15px;color:var(--textBody);margin-bottom:4px;font-weight:500;}
.axbar-track{height:6px;background:var(--borderLight);border-radius:3px;overflow:hidden;}
.axbar-fill{height:100%;border-radius:3px;}

/* ── Calendrier ── */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.cal-month{font-family:var(--serif);font-size:22px;font-weight:500;}
.cal-arrow{background:none;border:none;font-size:24px;color:var(--textMuted);cursor:pointer;padding:8px 14px;border-radius:8px;transition:background .15s;min-width:44px;min-height:44px;}
.cal-arrow:active{background:var(--surfaceAlt);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-dow{text-align:center;font-size:13px;color:var(--textMuted);letter-spacing:.05em;padding:4px 0;}
.cal-day{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;font-weight:500;cursor:pointer;border:1.5px solid transparent;transition:all .15s;min-height:40px;}
.cal-day.today{border-color:var(--accent);}
.cal-day.plein{background:var(--zonePlein);color:#fff;}
.cal-day.accord{background:var(--zoneAccord);color:#fff;}
.cal-day.tension{background:var(--zoneTension);color:#fff;}
.cal-day.rupture{background:var(--zoneRupture);color:#fff;}

/* ── Divers ── */
.divider{height:1px;background:var(--borderLight);margin:12px 0;}
.mt8{margin-top:8px;}.mt12{margin-top:12px;}.mt16{margin-top:16px;}
.footer-brand{text-align:center;padding:24px 0 8px;font-size:13px;color:var(--textMuted);letter-spacing:.04em;line-height:1.8;opacity:.7;}
.dream-cloud{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.dream-word{font-family:var(--serif);color:var(--textBody);}
.corr-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--borderLight);}
.corr-item:last-child{border-bottom:none;}
.reco-item{border-left:3px solid var(--accent);padding:14px 16px;background:var(--surface);border-radius:0 10px 10px 0;margin-bottom:10px;font-size:15px;color:var(--textBody);line-height:1.6;border:1px solid var(--borderLight);border-left-width:3px;border-left-color:var(--accent);}
.sync-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--textDim);margin-left:6px;vertical-align:middle;}
.sync-ok{background:var(--zoneAccord);}

/* ── Inscription ── */
.insc-delta{font-family:var(--serif);font-size:60px;font-weight:300;color:var(--accent);text-align:center;line-height:1;margin-bottom:12px;}
.insc-title{font-family:var(--serif);font-size:28px;text-align:center;font-weight:400;margin-bottom:6px;letter-spacing:-.01em;}
.insc-sub{font-size:15px;color:var(--textMuted);text-align:center;margin-bottom:32px;letter-spacing:.05em;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:14px;color:var(--textBody);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;font-weight:600;}
.field input{width:100%;border:1.5px solid var(--border);border-radius:14px;padding:16px;font-family:var(--body);font-size:16px;color:var(--text);background:var(--surface);outline:none;transition:border-color .2s,box-shadow .2s;}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,169,110,.15);}
.consent-box{background:var(--surfaceAlt);border:none;border-radius:14px;padding:16px;margin-bottom:16px;}
.consent-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;}
.consent-row:last-child{margin-bottom:0;}
.consent-row input[type=checkbox]{margin-top:3px;width:20px;height:20px;accent-color:var(--accent);flex-shrink:0;cursor:pointer;}
.consent-text{font-size:15px;color:var(--textBody);line-height:1.6;}
.req{color:var(--zoneRupture);font-weight:700;font-size:13px;}
.opt{color:var(--zoneAccord);font-weight:700;font-size:13px;}
.privacy-note{font-size:13px;color:var(--textMuted);text-align:center;margin-top:12px;line-height:1.6;}
.err-msg{color:var(--zoneRupture);font-size:15px;text-align:center;margin-top:8px;min-height:20px;}

/* ── Guide ── */
.guide-section{margin-bottom:24px;}
.guide-section-title{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--text);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--accent);}
.guide-q{font-weight:700;font-size:16px;color:var(--text);margin:16px 0 8px;}
.guide-a{font-size:15px;color:var(--textBody);line-height:1.75;}
.guide-formula{background:var(--surfaceAlt);border-radius:10px;padding:14px 16px;font-family:var(--mono);font-size:13px;color:var(--textBody);line-height:2;margin:10px 0;}
.guide-highlight{background:var(--surfaceAlt);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:12px 14px;font-family:var(--serif);font-size:15px;font-style:italic;color:var(--textBody);margin:10px 0;line-height:1.6;}

/* ── Tooltips ── */
.tip-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--border);background:var(--surfaceAlt);color:var(--textMuted);font-size:12px;cursor:pointer;font-family:var(--mono);font-weight:700;margin-left:6px;vertical-align:middle;flex-shrink:0;transition:all .15s;}
.tip-btn:hover,.tip-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.tip-box{display:none;background:var(--surfaceAlt);color:var(--textBody);border:1px solid var(--border);border-radius:10px;padding:14px;font-size:14px;line-height:1.7;margin:8px 0 14px;font-style:italic;}
.tip-box.vis{display:block;animation:fadeIn .15s ease;}

/* ── Badges ── */
.badge-niveau{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:12px;font-size:13px;font-weight:600;letter-spacing:.04em;font-family:var(--body);}
.badge-base{background:rgba(160,152,136,.12);color:var(--textMuted);}
.badge-psychiste{background:rgba(152,136,204,.12);color:var(--paramS);}
.badge-axion{background:rgba(201,169,110,.12);color:var(--accent);}
.badge-4e{background:rgba(196,122,149,.12);color:var(--paramP);}

/* ── Streak ── */
.streak-wrap{display:flex;align-items:center;gap:6px;}
.streak-fire{font-size:18px;line-height:1;}
.streak-count{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--text);}
.streak-label{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--textMuted);font-weight:500;}
.streak-msg{font-size:14px;color:var(--accent);font-style:italic;margin-top:2px;}

/* ── Animations ── */
@keyframes celebPulse{0%{transform:scale(0.8);opacity:0}50%{transform:scale(1.05);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes celebGlow{0%{box-shadow:0 0 0 0 rgba(201,169,110,.4)}70%{box-shadow:0 0 0 20px rgba(201,169,110,0)}100%{box-shadow:0 0 0 0 rgba(201,169,110,0)}}
@keyframes confetti{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(120px) rotate(720deg);opacity:0}}
.celeb-score{animation:celebPulse .6s ease-out, celebGlow 1.5s ease-out;}
.confetti-dot{position:absolute;width:6px;height:6px;border-radius:50%;animation:confetti 1.2s ease-out forwards;}

/* ── Milestones ── */
.milestone-banner{padding:14px 16px;border-radius:12px;border:1.5px solid var(--accent);background:var(--accentBg);margin-bottom:var(--section-gap);text-align:center;}
.milestone-text{font-family:var(--serif);font-size:15px;color:var(--accent);font-style:italic;line-height:1.5;}

.watermark{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:160px;height:160px;opacity:0.04;pointer-events:none;z-index:0;background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8dGV4dCB4PSI1MCIgeT0iODAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iOTAiIGZvbnQtZmFtaWx5PSJzZXJpZiIgZmlsbD0iIzAwMCI+zpQ8L3RleHQ+Cjwvc3ZnPg==') center/contain no-repeat;}

@keyframes cerclePulse{
  0%,100%{opacity:1;text-shadow:none;}
  50%{opacity:.5;text-shadow:0 0 8px var(--accent);}
}
.nav-btn .cercle-label{
  animation:cerclePulse 2.8s ease-in-out infinite;
}

/* ── Panneaux secondaires (Journal, Collectif...) ── */
.panel-header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:10;}
.panel-back{font-size:28px;color:var(--textMuted);cursor:pointer;background:none;border:none;min-width:44px;min-height:44px;display:flex;align-items:center;padding:0;}
.panel-title{font-family:var(--serif);font-size:22px;font-style:italic;color:var(--text);}
.panel-tabs{display:flex;border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;}
.panel-tab{flex-shrink:0;padding:14px 16px;font-size:15px;color:var(--textMuted);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:all .2s;font-weight:500;white-space:nowrap;}
.panel-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700;}
.panel-content{padding:16px 16px 100px;}

/* ── t- classes (textes journal/conseil) ── */
.t-eye{display:block;font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.t-quote{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--textBody);line-height:1.7;margin:10px 0;}
.t-src{font-size:13px;color:var(--textMuted);letter-spacing:.05em;}
.t-body{font-size:15px;color:var(--textBody);line-height:1.75;}

/* ── ph-title (panneaux) ── */
.ph-title{font-family:var(--serif);font-size:24px;font-style:italic;color:var(--text);padding:16px;border-bottom:1px solid var(--border);}
.sph-title{font-family:var(--serif);font-size:24px;font-style:italic;color:var(--text);}


/* ── CORRECTIONS AUDIT V3.0 ── */

/* 1 — cal-arrow font-family */
.cal-arrow { font-family: var(--mono); }

/* 2 — btn-n / btn-y (page-creation) */
.btn-n, .btn-y {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .1em;
  border: none;
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 14px;
}
.btn-n {
  background: transparent;
  color: var(--textMuted);
  border-bottom: 1px solid var(--border);
}
.btn-y {
  background: var(--accent);
  color: #ffffff;
}

/* 3 — selects page-inscription */
#page-inscription select,
#page-inscription option {
  font-family: var(--body);
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
#page-inscription select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201,169,110,.15);
}

/* 5 — label section page-accord */
#page-accord .section-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .18em;
  color: var(--accent);
  text-transform: uppercase;
}

/* 6 — checkbox accord */
#accord-check {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 3px;
}

/* 7 — checkbox inscription */
#c1 {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 3px;
}

/* nav-btn font inherit */
.nav-btn { font-family: inherit; }

#settings-content input,
#settings-content select,
#settings-content button,
#settings-content textarea {
  max-width:100%;
  box-sizing:border-box;
}
#settings-content {
  overflow-x:hidden;
}

/* ── Polices unifiées — supprimer Cormorant Garamond et IBM Plex Mono ── */
/* Remplacer par Libre Baskerville (serif) et DM Mono (mono) partout */
.header-title,
.cal-month,
.gauge-zone,
.insc-title,
.t-quote,
.citation,
.guide-section-title,
.sph-title,
.ph-title,
.panel-title {
  font-family:'Libre Baskerville',Georgia,serif !important;
}
.header-brand,
.stat-val,
.stat-lbl,
.env-val,
.env-lbl,
.mono,
code,
.guide-formula {
  font-family:'DM Mono','Courier New',monospace !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CORRECTIONS AUDIT V3.0
   ═══════════════════════════════════════════════════════════════════ */

/* ── Correction 1 : .cal-arrow font-family ── */
.cal-arrow {
  font-family: var(--mono);
}

/* ── Correction 2 : .btn-n et .btn-y (page-creation) ── */
.btn-n,
.btn-y {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  border: none;
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 14px;
  min-height: 44px;
}
.btn-n {
  background: transparent;
  color: var(--textMuted);
  border-bottom: 1px solid var(--border);
}
.btn-y {
  background: var(--accent);
  color: #ffffff;
}

/* ── Correction 3 : selects page-inscription ── */
#page-inscription select,
#page-inscription option {
  font-family: var(--body);
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: none;
  border-bottom: 1px solid #E8E8E8;
  border-radius: 14px;
  padding: 14px 16px;
  width: 100%;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
#page-inscription select:focus {
  border-color: var(--accent);
}

/* ── Correction 5 : label section uppercase page-accord ── */
#page-accord p[style*="letter-spacing"] {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.18em;
}

/* ── Correction 6 : checkbox accord ── */
#accord-check {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 3px;
}

/* ── Correction 7 : checkbox inscription ── */
#c1 {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 3px;
}

/* ── Bonus : nav-btn font-family inherit ── */
.nav-btn {
  font-family: inherit;
}

/* ══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM V3.1 — RÈGLES GLOBALES
   Fond beige #F7F3EE · Cartes blanches · Radius 20px · Or #8B6914
   ══════════════════════════════════════════════════════════════════ */

/* R1 — Héritage police sur tous les éléments interactifs */
button, select, input, textarea, a {
  font-family: inherit;
}

/* R2 — Couleurs de fond globales V3.1 */
:root {
  --bg: #F5F0E8;
  --surface: #FFFFFF;
  --surfaceAlt: #EDE8DF;
  --surfaceWarm: #F0EBE3;
  --border: rgba(139,105,20,.18);
  --borderLight: rgba(139,105,20,.10);
  --text: #1A1714;
  --textBody: #2C1E08;
  --textMuted: rgba(60,40,10,.55);
  --textDim: rgba(60,40,10,.38);
  --accent: #8B6914;
  --accentLight: #B8863A;
  --accentBg: rgba(139,105,20,.06);
  --card-radius: 20px;
  --section-gap: 16px;
}

/* R3 — Boutons principaux arrondis */
.btn, .btn-next, .btn-dark, .btn-outline,
.insights-btn, .btn-y {
  font-family: var(--mono) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  border-radius: 14px !important;
}
.btn, .btn-next, .btn-y {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border: none !important;
}
.btn-outline {
  background: transparent !important;
  color: var(--accent) !important;
  border: 2px solid var(--accent) !important;
}

/* R4 — Inputs underline style (inscription, saisie) */
.field input, .field select, .field textarea,
#page-inscription input[type=text],
#page-inscription input[type=email],
#page-inscription input[type=password],
#page-inscription input[type=date] {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--body) !important;
  font-size: 16px !important;
  color: var(--text) !important;
  padding: 10px 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

/* R5 — Cards arrondies 20px */
.card {
  border-radius: var(--card-radius) !important;
  background: var(--surface) !important;
  border: 1px solid var(--borderLight) !important;
}

/* R6 — Chips et tags arrondis */
.chip, .chip-cloud .chip {
  border-radius: 20px !important;
}
.goal-tag {
  border-radius: 12px !important;
}
.badge-niveau {
  border-radius: 20px !important;
}

/* R7 — Onglets arrondis */
.hm-tab, .period-tab {
  border-radius: 12px !important;
}
.evo-leg-btn {
  border-radius: 20px !important;
}

/* R8 — Éléments de formulaire arrondis */
.counter-row {
  border-radius: 16px !important;
}
.time-field {
  border-radius: 16px !important;
}
.wakeup-btn {
  border-radius: 12px !important;
}
.consent-box {
  border-radius: 16px !important;
}
.goal-input {
  border-radius: 12px !important;
}
.reco-item {
  border-radius: 16px !important;
}

/* R9 — Labels uppercase unifiés */
.step-label, .card-title, .header-brand, .t-eye, .eyebrow {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

/* R10 — Zones de score : couleur accent unifiée */
.z-accord, .zone-badge.accord { color: var(--accent) !important; }
.zone-badge { border-radius: 20px !important; }

/* R11 — Barre nav saisie : fond beige */
.saisie-nav {
  background: var(--bg) !important;
  border-top: 1px solid var(--borderLight) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.btn-prev {
  background: var(--surfaceAlt) !important;
  color: var(--textBody) !important;
  border-radius: 14px !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  border: none !important;
}
#btn-prev, button#btn-prev, .saisie-nav #btn-prev,
.saisie-nav .btn-prev, .saisie-nav button {
  border-radius: 14px !important;
}

/* R12 — Saisie : fermeture, valeurs, questions */
.saisie-close {
  font-family: var(--mono) !important;
  font-size: 20px !important;
  color: var(--textMuted) !important;
}
.step-val {
  color: var(--text) !important;
  font-size: 52px !important;
}
.step-q {
  font-size: 22px !important;
  line-height: 1.4 !important;
}
.step-level {
  font-size: 16px !important;
}

/* R13 — Slider thumb agrandi pour mobile */
input[type=range]::-webkit-slider-thumb {
  width: 32px !important;
  height: 32px !important;
  margin-top: -13px !important;
}
input[type=range]::-moz-range-thumb {
  width: 32px !important;
  height: 32px !important;
}

/* ── ORBE AURA — fond flou animé ── */
.orbe-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  will-change: transform;
}
.orbe-blob-1 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(201,169,110,.35) 0%, transparent 70%);
  top: 60px; left: -40px;
  animation: blobDrift1 9s ease-in-out infinite;
}
.orbe-blob-2 {
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(212,206,188,.4) 0%, transparent 70%);
  top: 120px; right: -20px;
  animation: blobDrift2 12s ease-in-out infinite;
}
.orbe-blob-3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(240,235,227,.6) 0%, transparent 70%);
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  animation: blobDrift3 10s ease-in-out infinite;
}
@keyframes blobDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(30px,-20px) scale(1.1); }
  66%      { transform: translate(-10px,30px) scale(0.95); }
}
@keyframes blobDrift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%      { transform: translate(-25px,15px) scale(1.08); }
  70%      { transform: translate(15px,-25px) scale(0.92); }
}
@keyframes blobDrift3 {
  0%,100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.15) translateY(-15px); }
}

/* ── CLASSES T- (Journal Mon état) ── */
.t-dim {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--textMuted);
  margin-bottom: 8px;
}
.t-big {
  display: block;
  font-family: var(--mono);
  font-size: 48px;
  font-weight: 300;
  color: var(--text);
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 4px;
}
.t-zone {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: var(--accent);
  margin-bottom: 4px;
}
.t-diff {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 300;
  color: var(--textMuted);
  letter-spacing: .06em;
}

/* ══ V3.1 FIXES FINAUX ══════════════════════════════════════════════ */

/* Nav bas permanente — visible sur toutes les pages .ds-page */
#home-nav-v31 {
  display: grid !important;
}

/* Transition sans flash — fond beige garanti pendant transition */
.ds-page, .ds-screen {
  background: #F5F0E8 !important;
}

/* btn-n arrondi (override) */
.btn-n {
  border-radius: 14px !important;
  border-bottom: none !important;
  border: 1.5px solid var(--border) !important;
}

/* btn-y arrondi (override) */
.btn-y {
  border-radius: 14px !important;
}

/* Saisie nav fond beige (override) */
.saisie-nav {
  background: #F5F0E8 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(139,105,20,.12) !important;
}

/* Wakeup buttons arrondis */
.wakeup-btn {
  border-radius: 14px !important;
}

/* Counter row arrondi */
.counter-row {
  border-radius: 16px !important;
}

/* Time field arrondi */
.time-field {
  border-radius: 14px !important;
}

/* Select inscription arrondi */
#page-inscription select {
  border-radius: 14px !important;
  border: 1.5px solid var(--border) !important;
  padding: 14px 16px !important;
  background: var(--surface) !important;
}

/* ══ CORRECTIONS AUDIT FINAL ════════════════════════════════════════

   1. DM Sans hérité partout — garantit la police body sur toutes les pages
   2. Nav active state — onglet actif en or
   3. Fond Accueil — forcer var(--bg) même sur style inline
   4. Séparateurs Réglages et Évolution — forcer or
   5. Cercle bouton Envoyer — arrondi
   6. Texte #0A0A0A → #1A1208 partout
   ═══════════════════════════════════════════════════════════════════ */

/* 1 — DM Sans sur tout le body et toutes les sections */
body, .pbody, .ptab, .ds-page, .ds-screen,
#guide-content, #cercle-content, #creation-content,
#settings-content, #parcours-content, #page-cal {
  font-family: var(--body) !important;
}

/* 2 — Nav active state — bouton actif = or */
#home-nav-v31 button.active > span,
#home-nav-v31 button[data-active="true"] > span,
#global-nav button.active > span {
  color: #8B6914 !important;
}

/* 3 — Fond Accueil — forcer beige même si inline */
#page-home {
  background: #F5F0E8 !important;
}

/* 4 — Séparateurs settings et parcours — forcer or */
#settings-content .settings-sep,
#settings-content [style*="border-bottom"] {
  border-bottom-color: rgba(139,105,20,.1) !important;
  border-top-color: rgba(139,105,20,.1) !important;
}
#parcours-content [style*="#F0F0F0"] {
  border-color: rgba(139,105,20,.1) !important;
}

/* 5 — Cercle bouton Envoyer — arrondi */
#new-post-overlay button[onclick*="submitPost"],
#new-post-overlay button[onclick*="submit"] {
  border-radius: 14px !important;
}

/* 6 — #0A0A0A → #1A1208 via var */
#settings-content, #parcours-content {
  color: var(--text) !important;
}
#settings-content input,
#settings-content textarea {
  color: var(--text) !important;
  font-family: var(--body) !important;
}

/* 7 — Accueil bouton "Envoyer au champ" — 14px radius */
#page-home button[onclick*="champ"],
#page-home .btn-lattice {
  border-radius: 14px !important;
}

/* ── Bug 2 — Titres coupés sur mobile ── */
.ph-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 90px);
  font-size: 24px !important;
}
.sph-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 80px);
}

/* ── Bug 4 — Nav active : classe nav-btn sur global-nav ── */
#global-nav button {
  font-family: var(--body);
}

/* ── Bug 5 — Cercle filtres : border-radius ── */
#cercle-content button[onclick*="filterCat"],
#cercle-content .filter-btn,
#cercle-content [style*="border-radius:0"] {
  border-radius: 20px !important;
}

/* ── Cercle boutons commentaires/réaction — forcer or ── */
#cercle-content button[onclick*="reactPost"],
#cercle-content button[onclick*="showComment"] {
  border-radius: 14px !important;
  background: transparent !important;
  border: 1.5px solid rgba(139,105,20,.25) !important;
  color: #8B6914 !important;
}

/* ── Bug 2 — Titres coupés mobile ── */
.ph-title{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:calc(100% - 90px)!important;font-size:24px!important;}
.sph-title{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:calc(100% - 80px)!important;}

/* ── Bug 1 — Fond page-home forcé ── */
#page-home{background: #F5F0E8!important;}

/* ── Bug 4 — Nav active global ── */
#global-nav button{font-family:var(--body);}

/* ── Bug 5 — Cercle filtres arrondis ── */
#cercle-content [data-cat]{border-radius:20px!important;}

#page-cercle,#cercle-content{background:#04060a!important;color:rgba(240,236,228,.9)!important;}


/* ─ Cercle fond sombre ─ */
#page-cercle,#cercle-content{background:#04060a!important;color:rgba(240,236,228,.9)!important;}


/* ── Cercle fond sombre ── */
#page-cercle,#cercle-content{background:#04060a!important;color:rgba(240,236,228,.9)!important;}