:root{
  --desk:#6E7B6C; --paper:#FCFAF2; --ink:#26282B; --grey:#8A8F98;
  --a-ink:#8C2F63; --a-fluo:#FFC2DB;      /* parent A */
  --b-ink:#7A5C00; --b-fluo:#FFE879;      /* parent B */
  --c-ink:#1F5F3F; --c-fluo:#BFE8C8;      /* enfant   */
  --margin:#E9AFB4; --rule:#CBDCEF;
  --ev-passage:#26282B; --ev-sante:#B3362A; --ev-activite:#1F5F3F;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:linear-gradient(180deg,#FFFFFF 0%,#FBEFC3 100%) fixed;color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;padding:26px 10px 90px}
button{cursor:pointer;font-family:inherit}
.hand{font-family:'Caveat',cursive}
.mono{font-family:'IBM Plex Mono',monospace}
.grey{color:var(--grey)}
.wrap{max-width:720px;margin:0 auto}

/* --- onglets du carnet --- */
.tabs{display:flex;gap:6px;padding-left:26px;align-items:flex-end;flex-wrap:wrap}
.tab{border:none;padding:9px 16px 14px;border-radius:10px 10px 0 0;font-weight:600;font-size:14px;
  margin-bottom:-4px;box-shadow:0 -1px 2px rgba(0,0,0,.06);transition:transform .12s;background:#EDE7D5;color:#5b5f52}
.tab:not(.on){transform:translateY(6px);filter:saturate(.5) brightness(.97)}
.tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tab .badge{margin-left:6px;font-family:'IBM Plex Mono',monospace;font-size:11px}

/* --- la page de carnet --- */
.page{
  background-color:var(--paper);border-radius:4px;position:relative;
  padding:30px 26px 44px;
  box-shadow:0 12px 30px rgba(120,96,20,.18),0 2px 6px rgba(120,96,20,.12);
  background-image:
    repeating-linear-gradient(to bottom,transparent,transparent 26px,var(--rule) 26px,var(--rule) 27px);
}

.pagehead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pagehead .t{font-family:'Caveat',cursive;font-weight:700;font-size:38px;line-height:1}
.pagehead .t small{font-size:21px;color:var(--grey)}
.pagehead .ref{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--grey);text-transform:uppercase}

/* --- surligneur / tampon / scotch --- */
.fluo{padding:0 6px;margin:0 -2px;border-radius:40% 55% 45% 60% / 55% 40% 60% 45%;
  display:inline-block;mix-blend-mode:multiply}
.tampon{border:2px solid currentColor;border-radius:4px;padding:0 6px;font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:inline-block;opacity:.88}
button.tampon{background:none}
.scotch{position:absolute;top:-10px;width:74px;height:20px;background:rgba(238,228,196,.65);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* --- phrases manuscrites --- */
.line{font-family:'Caveat',cursive;font-size:24px;line-height:27px}
.line.big{font-size:27px}
.hd{font-family:'Caveat',cursive;font-weight:700;font-size:26px;line-height:27px;margin:26px 0 6px}
.hd .note{font-family:'IBM Plex Sans',sans-serif;font-size:12px;font-weight:500;color:var(--grey)}
.note{font-family:'IBM Plex Sans',sans-serif;font-size:12.5px;color:var(--grey)}

/* --- calendrier scotché --- */
.calwrap{position:relative;background:#fff;border:1px solid #E3E0D4;box-shadow:0 3px 8px rgba(120,96,20,.12);
  padding:18px 16px 14px;margin:14px 0 4px;transform:rotate(-.4deg)}
.calbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:6px}
.calbar .mo{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.nav{display:flex;gap:5px}
.nav button{width:44px;height:44px;border-radius:9px;border:1px solid #E3E0D4;background:#fff;font-size:24px;color:var(--ink);font-weight:600}
.nav button:active{background:#F6F1E2}
.leg{font-size:12px;color:#6B7085;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dow span{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:var(--grey)}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cell{text-align:center;padding:6px 0 4px;position:relative;min-height:40px}
.cell .n{font-family:'IBM Plex Mono',monospace;font-size:14.5px;font-weight:500}
.cell.today .n{font-weight:700}
.cell .circ{position:absolute;inset:-1px 3px;border:1.5px solid;border-radius:50% 45% 55% 48% / 48% 55% 45% 52%;pointer-events:none}
.cell .dots{height:6px;display:flex;justify-content:center;gap:2px;margin-top:2px}
.cell .dots i{width:5px;height:5px;border-radius:50%}
.switchmk{position:absolute;top:2px;right:3px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--grey)}
.provisional{font-family:'IBM Plex Sans',sans-serif;font-size:12.5px;background:#FBF3E4;border:1px solid #EAD9B4;color:#7a5a18;
  border-radius:6px;padding:8px 11px;margin:10px 0}

/* --- listes d'événements manuscrites --- */
.evline{font-family:'Caveat',cursive;font-size:23px;line-height:27px;display:flex;gap:8px;align-items:baseline}
.evline .add,.linkbtn{background:none;border:none;font-family:'Caveat',cursive;font-size:23px;color:var(--grey);padding:0;line-height:27px}
button.add{background:none;border:none;font-family:'Caveat',cursive;font-size:23px;color:var(--grey);padding:0;line-height:27px}
.evform{margin:8px 0 6px;padding:12px 14px;background:rgba(255,255,255,.6);border:1px dashed #D8D3C2;border-radius:6px}

/* --- carnet (mots) --- */
.notecard{margin-bottom:18px}
.notecard .meta{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--grey);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.notecard .body{font-family:'Caveat',cursive;font-size:24px;line-height:27px}
.compose{display:flex;gap:10px;align-items:flex-end;margin:8px 0 22px}
.compose textarea{flex:1;background:transparent;border:none;border-bottom:1.5px dashed var(--ink);outline:none;
  font-family:'Caveat',cursive;font-size:21px;line-height:27px;resize:none;padding:0 2px;min-height:54px;color:inherit}

/* --- fiche paramétrage & enfant --- */
.field{margin:14px 0}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
input[type=date],input[type=time],input[type=text],input:not([type]),select{
  font-family:'IBM Plex Sans',sans-serif;font-size:14.5px;color:var(--ink);background:#fff;
  border:1px solid #E3E0D4;border-radius:6px;padding:10px 11px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--a-ink);outline-offset:0}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1px solid #E3E0D4;background:#fff;border-radius:6px;padding:9px 12px;font-size:13.5px;color:var(--grey);flex:1;min-width:120px}
.seg button.on{border-color:var(--a-ink);background:var(--a-fluo);color:var(--a-ink);font-weight:600}
.seg button:disabled{opacity:.5}
.row{display:flex;gap:10px}.row>div{flex:1}
.btn{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--ink);background:transparent;color:var(--ink);
  border-radius:5px;padding:9px 14px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.block{width:100%;justify-content:center}
.btn:disabled{opacity:.45}
.valrow{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.mrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.mrow:last-child{border-bottom:none}
.ava{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-family:'Caveat',cursive;font-weight:700;font-size:22px;flex:none}

/* --- page enfant --- */
.kidhead{text-align:center;margin:30px 0 24px}
.kidhead .k1{font-family:'Caveat',cursive;font-size:30px;color:var(--grey)}
.kidhead .k2{font-family:'Caveat',cursive;font-weight:700;font-size:50px;line-height:1.1}
.kidhead .k3{font-family:'Caveat',cursive;font-size:26px;margin-top:14px}
.weekstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:6px 0 26px}
.wd{text-align:center}
.wd .dl{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;color:var(--grey)}
.wd .dn{font-family:'Caveat',cursive;font-weight:700;font-size:26px}

/* --- onboarding --- */
.choice{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.choice button{border:1px solid #E3E0D4;background:rgba(255,255,255,.55);border-radius:8px;padding:18px;text-align:left}
.choice b{font-family:'Caveat',cursive;font-size:26px;font-weight:700;display:block}

/* --- toast + modal --- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(18px);background:var(--ink);color:var(--paper);
  padding:11px 16px;border-radius:6px;font-size:14px;opacity:0;transition:.24s;z-index:80;max-width:90vw;box-shadow:0 8px 26px rgba(0,0,0,.3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--ev-sante)}
.backdrop{position:fixed;inset:0;background:rgba(38,40,43,.5);display:flex;align-items:center;justify-content:center;padding:20px;z-index:70}
.modalcard{background:var(--paper);border-radius:6px;max-width:400px;width:100%;padding:24px;position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.3);transform:rotate(-.6deg)}
.modalcard h3{font-family:'Caveat',cursive;font-weight:700;font-size:32px;margin:0 0 4px}
.modalcard p{font-size:13.5px;color:#555;margin:4px 0}
.secret{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:30px;letter-spacing:.14em;text-align:center;
  background:#fff;border:2px dashed var(--ink);border-radius:6px;padding:16px;margin:14px 0;user-select:all}

/* --- barre démo --- */
.demobar{position:fixed;right:14px;bottom:14px;z-index:60;background:var(--ink);color:var(--paper);border-radius:8px;
  padding:8px;display:flex;gap:5px;align-items:center;box-shadow:0 10px 26px rgba(0,0,0,.3);transform:rotate(-1.5deg)}
.demobar .tg{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;opacity:.6;padding:0 5px}
.demobar button{border:none;background:rgba(255,255,255,.14);color:var(--paper);border-radius:5px;padding:7px 10px;font-size:12.5px}
.demobar button.on{background:var(--paper);color:var(--ink);font-weight:600}
.empty{font-family:'Caveat',cursive;font-size:24px;color:var(--grey);padding:14px 0}

@media (max-width:560px){
  body{padding:14px 6px 80px}
  .page{padding:22px 12px 36px}
  .pagehead{flex-direction:column;gap:2px}
  .pagehead .t{font-size:30px}.pagehead .t small{font-size:16px}
  .kidhead .k2{font-size:38px}
  .choice{grid-template-columns:1fr}
  .tab{padding:8px 12px 12px;font-size:13px}
  .row{flex-direction:column;gap:0}
  .calwrap{transform:none;padding:12px 8px 10px}
  .nav button{width:40px;height:40px;font-size:22px}
  .cell{min-height:36px}
  .compose{flex-direction:column;align-items:stretch}
  .compose .tampon{align-self:flex-end}
  .weekstrip{gap:4px}
}
@media (min-width:561px) and (max-width:820px){
  .page{padding:26px 20px 40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* --- bouton d'installation PWA --- */
.installbtn{position:fixed;left:14px;bottom:14px;z-index:60;border:2px solid var(--ink);background:var(--paper);
  color:var(--ink);border-radius:8px;padding:10px 14px;font-family:'IBM Plex Mono',monospace;font-size:12px;
  font-weight:700;letter-spacing:.05em;box-shadow:0 6px 18px rgba(120,96,20,.2);cursor:pointer}