@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

/* Nuit par défaut : le site applique ses propres conseils (peu de lumière, pas de blanc éclatant). */
:root{
  color-scheme:dark;
  --ground:#0A0F1E; --surface:#111831; --raised:#172042; --ink:#ECE8E1; --muted:#9BA1B9; --line:#232C4D; --track:#1C2445;
  --sommeil:#7482EC; --sieste:#AAB2F3; --routine:#343D7C; --travail:#7B82A3; --trajet:#454D72;
  --lumiere:#F2A541; --cafe:#C98D60; --warn-bg:#2E2412; --warn-ink:#F4CF94;
  --accent:#F2A541; --accent-ink:#1A1206; --link:#F4B865; --glow:rgba(242,165,65,.16);
  --display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body:"Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
:root[data-theme="light"]{
  color-scheme:light;
  --ground:#EEF0F6; --surface:#FFFFFF; --raised:#F6F7FB; --ink:#141A2E; --muted:#596079; --line:#D7DBE7; --track:#E4E7F0;
  --sommeil:#3B48A3; --sieste:#8790D8; --routine:#BCC1E8; --travail:#2B3147; --trajet:#A6ACC0;
  --lumiere:#D98A1C; --cafe:#8A5634; --warn-bg:#FFF3DF; --warn-ink:#7A4A06;
  --accent:#B5680C; --accent-ink:#FFFFFF; --link:#9A5A0A; --glow:rgba(217,138,28,.14);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;margin:0}
a{color:var(--link)}
img,svg{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Barre du haut */
.topbar{max-width:1120px;margin:0 auto;padding-inline:20px;padding-block:18px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em}
.brand svg{width:28px;height:28px}
.topbar nav{font-size:14px;display:flex;gap:18px;align-items:center}
.topbar nav a{color:var(--muted);text-decoration:none}
.topbar nav a:hover{color:var(--ink)}
@media (max-width:620px){.topbar nav a.hide-sm{display:none}}
.themebtn{font:inherit;font-size:13px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:99px;padding:5px 11px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.themebtn:hover{color:var(--ink);border-color:var(--muted)}
.themebtn svg{width:14px;height:14px}

.wrap{max-width:1120px;margin:0 auto;padding-inline:20px;padding-block:24px 56px;display:grid;gap:40px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,5.2vw,54px);line-height:1.02;margin:0;text-wrap:balance;letter-spacing:-.02em}
h1 em{font-style:normal;color:var(--accent)}
.lede{margin:0;color:var(--muted);font-size:17px;max-width:46ch}
h2{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.2;margin:0;text-wrap:balance}
h3{font-family:var(--display);font-weight:500;font-size:17px;margin:0}

/* Héros : le cadran est l'emblème */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:32px;align-items:center}
@media (max-width:880px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero-text{display:grid;gap:16px;align-content:center}
.trust{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--muted);margin:0;padding:0;list-style:none}
.trust li{display:flex;gap:6px;align-items:center}
.trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.cta{font:inherit;font-weight:600;font-size:15px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:12px 18px;cursor:pointer;text-decoration:none;display:inline-block;justify-self:start}
.cta:hover{filter:brightness(1.08)}
.keyfig{font-size:14.5px;color:var(--muted);margin:0;max-width:52ch;border-left:2px solid var(--accent);padding-left:12px}
.keyfig b{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);margin-right:4px}

.dialwrap{position:relative;display:grid;gap:14px;justify-items:center}
.dialwrap::before{content:"";position:absolute;left:50%;top:48%;width:100%;aspect-ratio:1;max-width:560px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--glow),transparent 72%);pointer-events:none;z-index:0}
svg.dial{position:relative;z-index:1;width:100%;max-width:420px;height:auto;display:block}
.legend{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:12.5px;color:var(--muted)}
.legend div{display:flex;align-items:center;gap:6px}
.sw{width:14px;height:8px;border-radius:2px;flex:none}
.sw.thin{height:3px}

/* Animation d'ouverture : l'arc du sommeil se dessine */
@media (prefers-reduced-motion:no-preference){
  .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s cubic-bezier(.4,0,.2,1) .3s forwards}
  .draw.late{animation-delay:1.1s;animation-duration:.9s}
  @keyframes draw{to{stroke-dashoffset:0}}
}
.now circle{fill:var(--accent)}

/* Outil */
.tool{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:24px;align-items:start;scroll-margin-top:16px}
@media (max-width:880px){.tool{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:16px}
.field{display:grid;gap:6px}
.field label,.field .lbl{font-size:13px;font-weight:600}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
select,input[type=time]{font:inherit;font-size:15px;color:var(--ink);background:var(--raised);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%}
input[type=time]{font-family:var(--mono)}
input[type=range]{width:100%;accent-color:var(--accent)}
.rangehead{display:flex;justify-content:space-between;align-items:baseline}
.val{font-family:var(--mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{padding:9px 8px;text-align:center;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);display:grid;gap:1px}
.seg label small{font-weight:400;font-size:11.5px}
.seg input:checked + label{background:var(--accent);color:var(--accent-ink)}
.seg input:focus-visible + label{outline:2px solid var(--accent);outline-offset:-2px}
.hint{font-size:12.5px;color:var(--muted);margin:0}
.warn{background:var(--warn-bg);color:var(--warn-ink);border-radius:10px;padding:10px 14px;font-size:13.5px}

ol.day{list-style:none;margin:0;padding:0;display:grid}
ol.day li{display:grid;grid-template-columns:62px 14px minmax(0,1fr);gap:12px;padding-block:11px;border-top:1px solid var(--line)}
ol.day li:first-child{border-top:0}
.t{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;padding-top:1px}
.dot{width:10px;height:10px;border-radius:50%;margin-top:6px}
.ev b{font-weight:600;display:block}
.ev span{color:var(--muted);font-size:14px}
a.src{font-size:12px;font-family:var(--mono);color:var(--muted);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
a.src:hover{color:var(--accent)}

/* Offre */
.premium{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:22px;display:grid;gap:18px;position:relative;overflow:hidden}
.premium::after{content:"";position:absolute;right:-120px;bottom:-160px;width:360px;height:360px;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
.phead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px}
.price{font-family:var(--display);font-weight:700;font-size:28px;line-height:1}
.price small{font-family:var(--body);font-weight:400;font-size:13px;color:var(--muted)}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;position:relative;z-index:1}
.feat{border:1px dashed var(--line);border-radius:10px;padding:14px;display:grid;gap:4px;align-content:start}
.feat b{font-weight:600;display:flex;gap:8px;align-items:center}
.feat span{font-size:13.5px;color:var(--muted)}
.lock{width:12px;height:12px;flex:none;color:var(--accent)}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;position:relative;z-index:1}

/* Guide et FAQ */
.guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 48px;align-items:start}
@media (max-width:880px){.guide{grid-template-columns:minmax(0,1fr)}}
.guide article{display:grid;gap:10px;max-width:62ch}
.guide p{margin:0}
.guide ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
details{border-top:1px solid var(--line);padding-block:12px}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600}
details p{margin:8px 0 0;color:var(--muted)}

/* Pages de texte */
.doc{max-width:720px;margin:0 auto;padding-inline:20px;padding-block:28px 48px;display:grid;gap:18px}
.doc h1{font-size:clamp(28px,4.4vw,40px)}
.doc h2{margin-top:10px}
.doc p,.doc ul{margin:0}
.refs{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.cite{font-size:13.5px;color:var(--muted)}
.rule{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:16px 18px;display:grid;gap:8px;scroll-margin-top:16px}
.rule h3{font-size:18px}
.level{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted);justify-self:start}
.level.strong{border-color:var(--sommeil);color:var(--sommeil)}
.level.mid{border-color:var(--lumiere);color:var(--lumiere)}
.updated{font-size:12.5px;color:var(--muted);font-family:var(--mono)}

footer.site{max-width:1120px;margin:0 auto;padding-inline:20px;padding-block:18px 32px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);display:grid;gap:8px}
footer.site nav{display:flex;flex-wrap:wrap;gap:16px}
footer.site a{color:var(--muted)}

/* ---------- Mon Rythme ---------- */
.ghost{font:inherit;font-weight:600;font-size:14px;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 16px;cursor:pointer}
.ghost:hover{border-color:var(--muted)}
.lockbar{border:1px solid var(--accent);border-radius:14px;padding:16px 18px;background:linear-gradient(135deg,var(--glow),transparent 60%),var(--surface)}
.lockrow{display:grid;gap:12px}
.lockrow p{margin:0}
.lockbtns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.keyform{display:grid;gap:6px}
.keyform label{font-size:13px;font-weight:600}
.keyrow{display:flex;gap:8px;flex-wrap:wrap}
.keyrow input{flex:1 1 220px;min-width:0;font:inherit;font-family:var(--mono);font-size:14px;color:var(--ink);background:var(--raised);border:1px solid var(--line);border-radius:8px;padding:10px}
.mr-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){.mr-grid{grid-template-columns:minmax(0,1fr)}}
.mr-col{display:grid;gap:20px;min-width:0}
.step{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:13px;margin-right:10px;vertical-align:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:13px;color:var(--ink);background:var(--raised);border:1px solid var(--line);border-radius:99px;padding:7px 12px;cursor:pointer}
.chip:hover{border-color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.more summary{font-size:13.5px;color:var(--muted);font-weight:500}
details.more{border:0;padding:0}
.builder{display:grid;gap:10px;margin-top:10px}
.cycle{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:28px}
i.k{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:500}
i.k.N,.cal-d.N b,.tchip.N{background:var(--sommeil);color:#0A0F1E}
i.k.J,.cal-d.J b,.tchip.J{background:var(--lumiere);color:#1A1206}
i.k.R,.cal-d.R b,.tchip.R{background:var(--track);color:var(--muted)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal-h{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center;text-transform:uppercase}
.cal-d{font:inherit;display:grid;justify-items:center;gap:3px;padding:6px 0 7px;background:var(--raised);border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--ink)}
.cal-d span{font-size:12px;font-variant-numeric:tabular-nums}
.cal-d b{display:grid;place-items:center;width:22px;height:18px;border-radius:5px;font-family:var(--mono);font-size:11px;font-weight:500}
.cal-d:hover{border-color:var(--muted)}
.calkey{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.calkey span{display:flex;gap:6px;align-items:center}
.calkey i.k{width:12px;height:12px;border-radius:3px}
.days{display:grid;gap:8px}
.dayitem{border:1px solid var(--line);border-radius:10px;background:var(--raised);padding:0}
details.dayitem{border-top:1px solid var(--line)}
details.dayitem:last-child{border-bottom:1px solid var(--line)}
.daysum{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:4px 10px;align-items:center;padding:10px 12px;cursor:pointer;list-style:none}
.daysum::-webkit-details-marker{display:none}
.dname{font-weight:600;white-space:nowrap}
.tchip{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:99px;justify-self:start}
.dinfo{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:520px){.daysum{grid-template-columns:auto 1fr}.dinfo{grid-column:1/-1}}
.dayitem ol.day{padding:0 12px 6px}
.dayitem.locked{opacity:.55}
.dayitem.locked .daysum{cursor:default}
.actgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.act{font:inherit;text-align:left;display:grid;gap:4px;align-content:start;background:var(--raised);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer}
.act b{font-weight:600}
.act span{font-size:13px;color:var(--muted)}
.act:hover{border-color:var(--accent)}
.act.is-locked b::after{content:" · 14 €";color:var(--accent);font-weight:500;font-size:12.5px}
.restore{font-size:13px;color:var(--muted);display:grid;gap:6px}
.restore input{font-size:13px;color:var(--muted)}
.howto{margin:8px 0 0;padding-left:1.2em;display:grid;gap:6px;font-size:13.5px;color:var(--muted)}
#printArea{display:none}
@media print{
  .noprint{display:none!important}
  #printArea{display:block}
  body{background:#fff;color:#111}
  .sign{max-width:170mm;margin:12mm auto;text-align:center;font-family:var(--display)}
  .sign h1{font-size:64pt;line-height:1;margin:10mm 0 6mm;color:#111}
  .sign-sub{font-family:var(--body);font-size:20pt;margin:0 0 10mm}
  .sign-moon{width:34mm;height:34mm;margin:0 auto;border-radius:50%;box-shadow:inset -9mm -3mm 0 0 #111}
  .sign-t{margin:0 auto;border-collapse:collapse;font-family:var(--body);font-size:15pt}
  .sign-t th,.sign-t td{border-bottom:1px solid #999;padding:3mm 8mm;text-align:left}
  .sign-foot{font-family:var(--body);font-size:11pt;color:#555;margin-top:10mm}
}
:root[data-theme="light"] i.k.N,:root[data-theme="light"] .cal-d.N b,:root[data-theme="light"] .tchip.N{color:#fff}
.sharebtn{position:relative;z-index:1;font-size:13.5px;padding:8px 14px}
.doc .todo{background:var(--warn-bg);color:var(--warn-ink);padding:0 4px;border-radius:4px}
.dayitem.lockall{opacity:1;border-style:dashed}
.dayitem.lockall .daysum{grid-template-columns:auto minmax(0,1fr)}
label.check{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:600;cursor:pointer}
label.check input{width:18px;height:18px;accent-color:var(--accent);margin:0}