/* ===================================================================
   Le Carnet — feuille de style (reprise fidèle de l'artefact validé)
   =================================================================== */

/* — Univers SÆF — Nuit (défaut) : vert profond, or doux, ivoire — */
:root{
  --bg:#081D17; --bg-2:#0A1F18; --panel:#0F211A; --card:#122820; --card-2:#17342D;
  --gold:#A2BAAD; --gold-soft:#C1D4C9; --ivory:#F1F3EF; --glacier:#DDE6DF; --sage:#8FA199; --sage-dim:#6E7F78;
  --line:rgba(162,186,173,.20); --line-soft:rgba(221,230,223,.08);
  --perso:#D98E6A; --outlook:#83AEDA; --teams:#AC9BE6; --zoom:#5CC6D1; --deadline:#A2BAAD;
  --chip-bg:#F1F3EF; --chip-fg:#0F1715;
  --wire-hi:#EBD9A8; --wire:#C8A466; --wire-lo:#6E5626; --hole:#0A1F18; --fold:38,27,13;
  --glow:.55;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 30px 70px -34px rgba(0,0,0,.85);
}
/* — Jour (clair) : ivoire & vert sauge, accents or — */
:root[data-theme="light"]{
  --bg:#E7EBE3; --bg-2:#EEF1EA; --panel:#F2F4EE; --card:#FBFCF9; --card-2:#E2E9DF;
  --gold:#5B6E64; --gold-soft:#6E8276; --ivory:#16241E; --glacier:#2A3A31; --sage:#5B6A62; --sage-dim:#7C8A82;
  --line:rgba(94,110,102,.34); --line-soft:rgba(22,36,30,.10);
  --perso:#BC5C39; --outlook:#376299; --teams:#6A57B0; --zoom:#227E8B; --deadline:#5B6E64;
  --chip-bg:#17342D; --chip-fg:#F3F5F0;
  --wire-hi:#F0E6C8; --wire:#BE9C55; --wire-lo:#7C5F28; --hole:#D7DAD1; --fold:104,72,36;
  --glow:0;
  --shadow:0 1px 2px rgba(22,36,30,.06), 0 26px 55px -32px rgba(22,36,30,.28);
}

/* — Univers HORACE — Nuit : bleu marine, or, ivoire — */
:root[data-univers="horace"]{
  --bg:#0E2338; --bg-2:#0A1D30; --panel:#0E2338; --card:#14304C; --card-2:#193A58;
  --gold:#CBA968; --gold-soft:#E9D39E; --ivory:#F2F1EB; --glacier:#DCE3EA; --sage:#8B98A8; --sage-dim:#6D7A8B;
  --line:rgba(201,165,94,.18); --line-soft:rgba(220,227,234,.09);
  --perso:#E0916B; --outlook:#79A6DE; --teams:#AC9BE6; --zoom:#5CC6D1; --deadline:#CBA968;
  --chip-bg:#F2F1EB; --chip-fg:#0E2338; --fold:36,26,14; --glow:.55;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 30px 70px -34px rgba(0,0,0,.85);
}
/* — Univers HORACE — Jour : papier, encre marine, or — */
:root[data-univers="horace"][data-theme="light"]{
  --bg:#F6F4EF; --bg-2:#FBFAF5; --panel:#F1EFE8; --card:#FFFFFF; --card-2:#EBE6DB;
  --gold:#9C7A31; --gold-soft:#B9954E; --ivory:#0E2338; --glacier:#1E3A52; --sage:#5E6B78; --sage-dim:#7E8A98;
  --line:rgba(30,58,82,.22); --line-soft:rgba(14,35,56,.10);
  --perso:#BC5C39; --outlook:#2F5C99; --teams:#6A57B0; --zoom:#227E8B; --deadline:#9C7A31;
  --chip-bg:#0E2338; --chip-fg:#F6F4EF; --fold:104,72,36; --glow:0;
  --shadow:0 1px 2px rgba(14,35,56,.06), 0 26px 55px -32px rgba(14,35,56,.28);
}
/* Accent orange (esprit SÆF) : boutons & états sélectionnés, dans tous les thèmes */
:root{--accent:#D9743F; --accent-soft:#E29466; --on-accent:#FBF5EE}
*{box-sizing:border-box}
html,body{margin:0; overscroll-behavior:none; overscroll-behavior-x:none}
body{
  min-height:100vh; min-height:100dvh; padding:clamp(10px,2.4vw,30px);
  background:var(--bg);
  background-image:
    radial-gradient(90% 60% at 78% -8%, rgba(200,164,102,.10), transparent 60%),
    radial-gradient(70% 50% at 10% 108%, rgba(110,127,120,.10), transparent 60%);
  background-attachment:fixed;
  color:var(--ivory); font-family:"Manrope",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.app{
  max-width:1560px; margin:0 auto; display:grid; grid-template-columns:1fr 96px; gap:0;
  background:linear-gradient(180deg,var(--bg-2),var(--panel));
  border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
}

/* Onglets à droite — esprit carnet, épuré SÆF */
.rail{grid-column:2; grid-row:1; display:flex; flex-direction:column; align-items:stretch; gap:9px; padding:22px 0; background:var(--bg-2); border-left:1px solid var(--line-soft); justify-content:flex-start}
.rail button{border:0; background:transparent; color:var(--sage); cursor:pointer; padding:14px 6px; margin-left:9px; display:flex; flex-direction:column; align-items:center; gap:6px; border-radius:14px 0 0 14px; transition:color .18s, background .18s}
.rail button svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.4; fill:none}
.rail button small{font-size:9px; letter-spacing:.11em; text-transform:uppercase; font-weight:600}
.rail button:hover{color:var(--glacier)}
.rail button[aria-selected="true"]{color:var(--on-accent); background:var(--accent)}
.rail button:focus-visible{outline:1px solid var(--gold); outline-offset:2px}
/* Réglages : poussé en bas du rail, discret, avec pastille du nombre de connexions */
.rail .rail-set{margin-top:auto; position:relative; border-top:1px solid var(--line-soft)}
.rail .rail-set .badge{position:absolute; top:9px; right:16px; min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:var(--accent); color:var(--on-accent); font-size:9px; font-weight:700; display:grid; place-items:center; border:1px solid var(--bg-2)}
/* Replier / rouvrir la colonne d'onglets */
.rail .rail-fold{align-self:flex-end; padding:5px 9px; margin:0 8px 4px 0; border-radius:8px}
.rail .rail-fold svg{width:17px; height:17px; stroke:var(--sage-dim); stroke-width:1.6; fill:none}
.rail .rail-fold:hover svg{stroke:var(--gold)}
.app.rail-collapsed{grid-template-columns:1fr}
.app.rail-collapsed .rail{display:none}
.rail-open{position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:30; display:none; align-items:center; justify-content:center; width:26px; height:56px; border:1px solid var(--line); border-right:0; border-radius:11px 0 0 11px; background:var(--bg-2); color:var(--gold); cursor:pointer; box-shadow:-4px 0 14px -8px rgba(0,0,0,.6)}
.rail-open svg{width:18px; height:18px; stroke:currentColor; stroke-width:1.7; fill:none}
.rail-open:hover{border-color:var(--gold)}

.univers{display:inline-flex; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:3px}
.univers button{border:0; background:transparent; cursor:pointer; font-family:"Manrope",sans-serif; font-size:11.5px; font-weight:600; color:var(--sage); padding:6px 12px; border-radius:999px; transition:.18s; letter-spacing:.01em}
.univers button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}
.theme-toggle,.gear{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--gold); cursor:pointer; display:grid; place-items:center; transition:.18s}
.theme-toggle:hover,.gear:hover{border-color:var(--gold)}
.theme-toggle svg,.gear svg{width:17px; height:17px; stroke:currentColor; stroke-width:1.5; fill:none}
.gear{position:relative}
.gear .badge{position:absolute; top:-3px; right:-3px; min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:var(--gold); color:#1a1405; font-size:9px; font-weight:700; display:grid; place-items:center; border:1px solid var(--bg-2)}

.main{grid-column:1; grid-row:1; min-width:0; padding:clamp(16px,2.4vw,30px)}

/* En-tête */
.head{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:20px}
.emblem{width:40px; height:40px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold); flex:0 0 auto}
.emblem span{font-family:"Manrope",sans-serif; font-weight:300; font-size:18px; letter-spacing:.02em}
.emblem svg{width:19px; height:19px; stroke:var(--gold); stroke-width:1.5; fill:none}
.brand{display:flex; flex-direction:column; line-height:1}
.brand b{font-family:"Cormorant Garamond","Manrope",serif; font-weight:600; font-size:32px; letter-spacing:.16em; text-transform:uppercase; line-height:1; color:var(--ivory)}
.brand small{font-family:"Manrope",sans-serif; font-size:9px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-top:5px}
.period{font-family:"Manrope",sans-serif; font-weight:300; font-size:clamp(19px,2.7vw,26px); color:var(--glacier); text-wrap:balance}
.period i{font-style:italic; color:var(--gold-soft)}
.nav{display:inline-flex; gap:6px}
.nav button{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--sage); cursor:pointer; font-size:16px; line-height:1; transition:.18s}
.nav button:hover{border-color:var(--gold); color:var(--gold)}
.spring{flex:1 1 40px}
/* Boutons en-tête : Aujourd'hui + Recherche */
.today-btn{font-family:"Manrope",sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.01em; color:var(--gold); background:transparent; border:1px solid var(--line); border-radius:999px; padding:7px 14px; cursor:pointer; white-space:nowrap; transition:.18s}
.today-btn:hover{border-color:var(--accent); color:var(--accent)}
.icon-btn{width:34px; height:34px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--gold); cursor:pointer; display:grid; place-items:center; transition:.18s}
.icon-btn:hover{border-color:var(--accent); color:var(--accent)}
.icon-btn svg{width:17px; height:17px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round}
.toggle{display:inline-flex; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:3px}
.toggle button{border:0; background:transparent; cursor:pointer; font-family:"Manrope",sans-serif; font-size:12px; font-weight:600; color:var(--sage); padding:7px 15px; border-radius:999px; white-space:nowrap; transition:.18s}
.toggle button[data-on="rdv"][aria-pressed="true"]{background:var(--chip-bg); color:var(--chip-fg)}
.toggle button[data-on="ech"][aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}
.legend{display:flex; flex-wrap:wrap; gap:5px 18px; width:100%}
.legend span{display:inline-flex; align-items:center; gap:7px; font-size:11px; color:var(--sage); font-weight:500; letter-spacing:.01em}
.legend i{width:8px; height:8px; border-radius:50%}

.view{display:none} .view.on{display:block}

/* SEMAINE */
.week{display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel)}
.day{border-right:1px solid var(--line-soft); min-height:clamp(360px,60vh,720px); display:flex; flex-direction:column}
.day:last-child{border-right:0}
.day.today{background:linear-gradient(180deg, rgba(200,164,102,.10), rgba(200,164,102,.02))}
.dh{display:flex; align-items:baseline; justify-content:space-between; gap:6px; padding:12px 12px 10px; border-bottom:1px solid var(--line-soft)}
.dn{font-family:"Manrope",sans-serif; font-weight:400; font-size:13px; color:var(--glacier); text-transform:capitalize; letter-spacing:.02em}
.dd{font-family:"Manrope",sans-serif; font-weight:300; font-size:20px; color:var(--sage)}
.day.today .dd{color:var(--gold)}
.today-tag{font-family:"Manrope",sans-serif; font-style:italic; font-weight:300; font-size:12px; color:var(--gold-soft)}
.evs{display:flex; flex-direction:column; gap:6px; padding:10px}
.ev{position:relative; padding:8px 10px 8px 14px; border-radius:9px; background:var(--card); border:1px solid var(--line-soft); transition:transform .16s, border-color .16s; cursor:default}
.ev:hover{transform:translateY(-1px); border-color:var(--line)}
.ev::before{content:""; position:absolute; left:6px; top:9px; bottom:9px; width:2px; border-radius:2px; background:var(--c); box-shadow:0 0 calc(9px * var(--glow)) -1px var(--c)}
.ev .t{font-size:10.5px; font-weight:600; color:var(--sage); font-variant-numeric:tabular-nums; letter-spacing:.03em}
.ev .n{font-size:12.5px; font-weight:600; color:var(--ivory); line-height:1.25; margin-top:1px; text-wrap:balance}
.ev .s{font-size:9px; text-transform:uppercase; letter-spacing:.11em; color:var(--sage-dim); font-weight:600; margin-top:3px}
.ev.deadline{background:rgba(200,164,102,.08); border-color:rgba(200,164,102,.22)}
.ev.deadline .t{color:var(--gold)}
/* Trait de continuité multi-jours : ligne de la couleur de la source, filant vers le bord qui continue */
.ev.cont::after{content:''; position:absolute; bottom:5px; height:2.5px; background:var(--c); border-radius:2px; box-shadow:0 0 calc(6px * var(--glow)) -1px var(--c)}
.ev.cn:not(.cp)::after{left:46%; right:-1px}
.ev.cp:not(.cn)::after{left:-1px; right:46%}
.ev.cp.cn::after{left:-1px; right:-1px}
.empty-day{padding:14px; color:var(--sage-dim); font-size:11px; font-style:italic}

/* MOIS */
.month{display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel)}
.month .wd{font-family:"Manrope",sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--sage-dim); text-align:center; padding:11px 0; border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft)}
.month .wd:nth-child(7n){border-right:0}
.cell{min-height:clamp(96px,12.5vh,168px); border-right:1px solid var(--line-soft); border-top:1px solid var(--line-soft); padding:8px 9px; display:flex; flex-direction:column; gap:5px}
.cell:nth-child(7n){border-right:0}
.cell.out{opacity:.4}
.cell .num{font-family:"Manrope",sans-serif; font-weight:300; font-size:15px; color:var(--glacier)}
.cell.today .num{background:var(--gold); color:#1a1405; border-radius:50%; width:25px; height:25px; display:grid; place-items:center; font-weight:400}
.dots{display:flex; flex-wrap:wrap; gap:4px; margin-top:auto}
.dots i{width:7px; height:7px; border-radius:50%; background:var(--c); box-shadow:0 0 calc(7px * var(--glow)) -1px var(--c)}
.mev{font-size:10.5px; line-height:1.3; color:var(--glacier); display:flex; gap:5px; align-items:center; border-left:2px solid var(--c); padding-left:5px}
.mev span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums}

/* MOIS — défilement vertical continu (façon Calendrier d'Apple) */
#v-mois{padding:0}
.mscroll{position:relative; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:14px; background:var(--panel)}
.wdhead{position:sticky; top:0; z-index:4; display:grid; grid-template-columns:34px repeat(7,1fr); background:var(--panel); border-bottom:1px solid var(--line)}
.wdhead span{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--sage-dim); text-align:center; padding:11px 0}
.mblock{border-top:1px solid var(--line-soft)}
.mblock:first-of-type{border-top:0}
.mlabel{position:sticky; top:35px; z-index:3; font-family:"Cormorant Garamond","Manrope",serif; font-weight:600; font-size:21px; letter-spacing:.01em; color:var(--gold); padding:12px 16px 9px; background:linear-gradient(180deg,var(--panel) 62%,transparent)}
.mlabel span{color:var(--sage-dim); font-weight:500}
.mgrid{display:grid; grid-template-columns:34px repeat(7,1fr)}
.mgrid .wknum{display:grid; place-items:center; font-size:11px; font-weight:600; color:var(--gold-soft); opacity:.7; font-variant-numeric:tabular-nums; border-top:1px solid var(--line-soft); border-right:1px solid var(--line); background:linear-gradient(90deg,transparent,rgba(0,0,0,.04))}
.mgrid .cell{min-height:clamp(78px,11.5vh,132px); border-right:1px solid var(--line-soft); border-top:1px solid var(--line-soft); padding:8px 9px; display:flex; flex-direction:column; gap:5px}
.mgrid .cell:nth-child(8n){border-right:0}
.mgrid .cell.blank{background:transparent}
.mgrid .cell.today .num{background:var(--gold); color:#1a1405; border-radius:50%; width:25px; height:25px; display:grid; place-items:center; font-weight:400}

/* JOUR */
.day-title{font-family:"Manrope",sans-serif; font-weight:300; font-size:20px; color:var(--glacier); margin:0 0 14px}
.day-title i{font-style:italic; color:var(--gold-soft)}
.day-tl{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel)}
.hr{display:grid; grid-template-columns:62px 1fr; border-top:1px solid var(--line-soft); min-height:50px}
.hr:first-child{border-top:0}
.hr .h{font-size:11px; font-weight:600; color:var(--sage-dim); padding:9px 12px; text-align:right; border-right:1px solid var(--line-soft); font-variant-numeric:tabular-nums}
.hr .slot{padding:7px 10px; display:flex; flex-direction:column; gap:6px}
.hr .slot .ev{max-width:560px}

/* PAPIER — double page façon Filofax */
.spread{position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.pg{position:relative; display:flex; flex-direction:column; padding:6px 16px; min-height:clamp(452px,66vh,780px); background:var(--card)}
.pg.left{border-radius:11px 2px 2px 11px}
.pg.right{border-radius:2px 11px 11px 2px}
.spread::after{content:""; position:absolute; top:14px; bottom:14px; left:calc(50% - 15px); width:30px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(var(--fold),0) 0%,
    rgba(var(--fold),.14) 36%,
    rgba(var(--fold),.55) 50%,
    rgba(var(--fold),.14) 64%,
    rgba(var(--fold),0) 100%)}
.pday{flex:1; display:flex; flex-direction:column; padding:9px 0 6px; border-bottom:1px solid var(--line-soft)}
.pg .pday:last-child{border-bottom:0}
.pday.today{background:linear-gradient(90deg, rgba(200,164,102,.07), transparent 70%)}
.ph{display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-bottom:5px}
.ph .pn{font-weight:600; font-size:12.5px; color:var(--ivory); text-transform:capitalize; letter-spacing:.02em}
.ph .pd{font-weight:300; font-size:18px; color:var(--sage)}
.pitems{display:flex; flex-direction:column; flex:1; gap:0; background:repeating-linear-gradient(transparent 0 18px, var(--line-soft) 18px 19px)}
.pitems.two{display:block; column-count:2; column-gap:16px}
.pitems.two .pev{break-inside:avoid}
.pev{display:flex; align-items:center; gap:7px; height:19px; font-size:11px; color:var(--glacier); overflow:hidden; white-space:nowrap}
.pev i{width:5.5px; height:5.5px; border-radius:50%; flex:0 0 auto}
.pev .pt{color:var(--sage); font-weight:600; font-variant-numeric:tabular-nums; font-size:10px; flex:0 0 auto}
.pev .pnm{min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pev.empty{color:var(--sage-dim)}
.pev.pcont{position:relative}
.pev.pcont::after{content:''; position:absolute; bottom:0; height:2px; background:var(--c); border-radius:2px}
.pev.cn:not(.cp)::after{left:38%; right:0}
.pev.cp:not(.cn)::after{left:0; right:38%}
.pev.cp.cn::after{left:0; right:0}
.wend{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.wend > div{display:flex; flex-direction:column; min-width:0}

/* Tâches / Notes */
.pad{border:1px solid var(--line); border-radius:14px; padding:26px; min-height:300px; background:var(--panel)}
.pad h3{font-family:"Manrope",sans-serif; font-weight:300; font-size:22px; margin:0 0 6px; color:var(--ivory)}
.pad p{color:var(--sage); font-size:14px; max-width:56ch; margin:0 0 18px; line-height:1.6}
.chk{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ivory); padding:9px 0; border-bottom:1px solid var(--line-soft)}
.chk:last-child{border-bottom:0}
.chk b{width:17px; height:17px; border:1px solid var(--sage-dim); border-radius:5px; display:grid; place-items:center; flex:0 0 auto; color:transparent}
.chk.done{color:var(--sage-dim); text-decoration:line-through}
.chk.done b{background:var(--gold); border-color:var(--gold); color:#1a1405}
.chk .cdate{margin-left:auto; font-size:11px; color:var(--sage-dim); font-variant-numeric:tabular-nums}
/* Tâches locales */
.pad .muted{color:var(--sage-dim); font-size:13px; font-style:italic; margin:12px 0}
.tasksub{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:24px 0 8px}
.taskinput{display:block; width:100%; box-sizing:border-box; margin:14px 0 10px; font-family:"Manrope",sans-serif; font-size:14px; color:var(--ivory); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.taskadd{display:flex; align-items:center; gap:8px; margin:0 0 16px; flex-wrap:wrap}
.taskadd .duelabel{font-size:12px; letter-spacing:.02em; color:var(--gold); font-weight:600; margin-right:2px}
.taskadd .duelabel em{font-style:normal; color:var(--sage-dim); font-weight:400}
.taskadd #taskDue,.taskadd #taskTime{font-family:"Manrope",sans-serif; font-size:13px; color:var(--ivory); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:9px 10px}
.taskadd #taskTime{width:104px}
.taskadd .btn{padding:10px 16px; margin-left:auto}
.task{display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--line-soft)}
.task:last-child{border-bottom:0}
.task .tcheck{width:22px; height:22px; flex:0 0 auto; border:1px solid var(--sage-dim); border-radius:6px; background:transparent; color:#1a1405; cursor:pointer; display:grid; place-items:center; font-size:13px}
.task.done .tcheck{background:var(--gold); border-color:var(--gold)}
.task .ttext{flex:1; font-size:14.5px; color:var(--ivory)}
.task.done .ttext{color:var(--sage-dim); text-decoration:line-through}
.task .tdue{font-size:11px; color:var(--gold); font-weight:600; white-space:nowrap}
.task .tdel{background:transparent; border:0; color:var(--sage-dim); font-size:18px; cursor:pointer; padding:0 2px}
.task .tdel:hover{color:#e07a52}
/* Notes */
.notelist{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.note{background:var(--card); border:1px solid var(--line-soft); border-radius:11px; padding:12px 14px; cursor:pointer; transition:border-color .15s}
.note:hover{border-color:var(--line)}
.note .ntext{font-size:14px; color:var(--glacier); line-height:1.5; white-space:pre-wrap; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical}
.sheet textarea{width:100%; font-family:"Manrope",sans-serif; font-size:15px; line-height:1.55; color:var(--ivory); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; resize:vertical; min-height:180px}
.sheet textarea::placeholder{color:var(--sage-dim)}

.foot{color:var(--sage-dim); font-size:11px; text-align:center; padding-top:16px; letter-spacing:.02em}
.foot b{color:var(--gold); font-weight:300; font-family:"Manrope",sans-serif; letter-spacing:.1em}

/* ---- Connexions (modale) ---- */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; padding:16px; z-index:50}
.overlay.on{display:flex}
.sheet{width:100%; max-width:460px; max-height:90vh; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow)}
.sheet h2{font-family:"Manrope",sans-serif; font-weight:300; font-size:21px; margin:0 0 4px; color:var(--ivory)}
.sheet .sub{color:var(--sage); font-size:13px; line-height:1.5; margin:0 0 16px}
.sheet .sect{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:20px 0 8px}
.sheet label{display:block; font-size:12px; color:var(--sage); margin:8px 0 4px}
.sheet .segset{display:inline-flex; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px}
.sheet .segset button{border:0; background:transparent; cursor:pointer; font-family:"Manrope",sans-serif; font-size:12.5px; font-weight:600; color:var(--sage); padding:7px 15px; border-radius:999px; transition:.15s}
.sheet .segset button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}
.sheet input,.sheet select{width:100%; font-family:"Manrope",sans-serif; font-size:14px; color:var(--ivory); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.sheet input::placeholder{color:var(--sage-dim)}
.sheet input[type="date"],.sheet input[type="time"]{color-scheme:dark}
:root[data-theme="light"] .sheet input[type="date"],:root[data-theme="light"] .sheet input[type="time"],:root[data-univers="horace"][data-theme="light"] .sheet input[type="date"],:root[data-univers="horace"][data-theme="light"] .sheet input[type="time"]{color-scheme:light}
.sheet .chkline{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ivory); margin-top:14px; cursor:pointer}
.sheet .chkline input{width:auto; accent-color:var(--gold)}
.sheet .joinlink{display:block; margin-top:8px; font-size:13px; font-weight:600; color:var(--gold); text-decoration:none}
.sheet .joinlink:hover{text-decoration:underline}
.sheet input[type="file"]{padding:8px 10px; font-size:12.5px; color:var(--sage)}
/* Résultats de recherche */
.searchres{margin-top:14px; display:flex; flex-direction:column; gap:6px; max-height:56vh; overflow-y:auto}
.sr-empty{color:var(--sage-dim); font-size:13px; font-style:italic; padding:10px 2px; line-height:1.5}
.sr{display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:var(--card); border:1px solid var(--line-soft); border-radius:11px; padding:11px 13px; cursor:pointer; transition:border-color .15s, transform .15s}
.sr:hover{border-color:var(--accent); transform:translateX(2px)}
.sr-dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.sr-main{min-width:0; display:flex; flex-direction:column; gap:2px}
.sr-main b{font-size:14px; font-weight:600; color:var(--ivory); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sr-main small{font-size:11.5px; color:var(--sage); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sheet input[type="file"]::file-selector-button{font-family:"Manrope",sans-serif; font-size:12px; font-weight:600; color:var(--chip-fg); background:var(--chip-bg); border:0; border-radius:8px; padding:6px 10px; margin-right:10px; cursor:pointer}
.sheet .attach{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; color:var(--glacier); background:var(--card); border:1px solid var(--line-soft); border-radius:9px; padding:8px 10px}
.sheet .attach a{color:var(--gold); text-decoration:none; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sheet .attach .rm{margin-left:auto; cursor:pointer; color:var(--sage-dim); background:transparent; border:0; font-size:16px}
.row{display:flex; gap:8px}
.row > *{flex:1}
.btn{border:0; cursor:pointer; font-family:"Manrope",sans-serif; font-weight:600; font-size:13.5px; border-radius:10px; padding:11px 14px; transition:.15s}
.btn.primary{background:var(--accent); color:var(--on-accent); margin-top:12px; width:100%}
.btn.ghost{background:transparent; color:var(--sage); border:1px solid var(--line)}
.btn.mini{padding:7px 10px; font-size:12px}
.feed{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line-soft); border-radius:10px; padding:9px 10px; margin-top:8px}
.feed .fi{width:22px; height:22px; padding:0; border:1px solid var(--line); border-radius:50%; flex:0 0 auto; background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none; overflow:hidden}
.feed .fi::-webkit-color-swatch-wrapper{padding:0}
.feed .fi::-webkit-color-swatch{border:none; border-radius:50%}
.feed .fi::-moz-color-swatch{border:none; border-radius:50%}
.feed .fmeta{flex:1; min-width:0}
.feed .fmeta b{font-size:13px; color:var(--ivory); font-weight:600; display:block}
.feed .fmeta small{font-size:10.5px; color:var(--sage-dim); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.feed .x{cursor:pointer; color:var(--sage-dim); background:transparent; border:0; font-size:15px}
.msg{font-size:12px; margin-top:8px}
.msg.ok{color:#5FB495} .msg.err{color:#e07a52}
.statusline{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--sage); margin:2px 0 6px}
.statusline i{width:8px; height:8px; border-radius:50%}
.close-x{float:right; background:transparent; border:0; color:var(--sage); font-size:20px; cursor:pointer; line-height:1}

/* ---- Loader ---- */
.loader{position:fixed; top:14px; left:50%; transform:translateX(-50%); background:var(--card); border:1px solid var(--line); color:var(--sage); font-size:12px; padding:7px 14px; border-radius:999px; z-index:40; display:none}
.loader.on{display:block}

@media (max-width:760px){
  body{padding:0}
  .app{grid-template-columns:1fr 54px; align-content:start; border-radius:0; border:0; min-height:100dvh}
  /* Vue Mois : plein écran + défilement interne continu (les autres vues défilent la page) */
  .app.view-mois{height:100dvh; min-height:0; overflow:hidden; align-content:stretch}
  .app.view-mois .main{display:flex; flex-direction:column; min-height:0; overflow:hidden}
  .app.view-mois .foot{display:none}
  .app.view-mois .view.on{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
  /* Onglets : ils RESTENT à droite (esprit carnet Filofax), version étroite icône seule */
  .rail{position:sticky; top:0; align-self:start; height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:calc(14px + env(safe-area-inset-top)) 0 calc(14px + env(safe-area-inset-bottom)); gap:4px; justify-content:flex-start}
  .rail button{padding:12px 3px; margin-left:5px}
  .rail button svg{width:20px; height:20px}
  .rail button small{display:none}
  .rail .rail-set .badge{top:6px; right:8px}
  .main{padding:calc(14px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom))}
  .head{gap:6px 9px; padding-bottom:9px; margin-bottom:11px}
  .emblem{width:29px; height:29px}
  .emblem span{font-size:14px}
  .brand b{font-size:21px; letter-spacing:.12em}
  .brand small{font-size:8px; letter-spacing:.24em; margin-top:3px}
  .nav button{width:29px; height:29px}
  .theme-toggle,.gear{width:29px; height:29px}
  .univers button{font-size:10.5px; padding:5px 9px}
  .toggle button{font-size:11px; padding:6px 11px}
  .period{font-size:15px; width:100%; order:5; margin-top:1px}
  .legend{gap:3px 9px; order:6} .legend span{font-size:9.5px; gap:5px}
  .evs{padding:8px}
  .empty-day{padding:8px 12px}
  .week{grid-template-columns:1fr}
  .day{min-height:0; border-right:0; border-bottom:1px solid var(--line-soft)}
  .cell{min-height:58px} .cell .mev{display:none}
  .wdhead,.mgrid{grid-template-columns:24px repeat(7,1fr)}
  .mgrid .cell{min-height:56px; padding:6px 6px}
  .mgrid .wknum{font-size:9.5px}
  .mlabel{font-size:18px; padding:10px 12px 7px; top:33px}
  /* Vue Papier : DEUX pages côte à côte même en vertical (carnet ouvert) */
  .spread{grid-template-columns:1fr 1fr; padding:8px 2px; border:0; border-radius:0; background:transparent; box-shadow:none}
  .spread::after{display:block; top:8px; bottom:8px; left:calc(50% - 8px); width:16px}
  .pg{min-height:calc(100dvh - 200px); box-shadow:none; border-radius:0; padding:4px 7px}
  .pg.left{border-bottom:0}
  .pitems.two{column-count:1}
  .wend{grid-template-columns:1fr 1fr; gap:0 6px}
  .ph .pn{font-size:11.5px} .ph .pd{font-size:15px}
  /* RDV : le texte passe à la ligne dans les colonnes étroites (pas de troncature) */
  .pev{height:auto; white-space:normal; align-items:flex-start; line-height:1.34; padding:1px 0}
  .pev .pnm{white-space:normal; overflow:visible; text-overflow:clip}
  .day-tl,.month,.pad{border-radius:12px}
}
/* Desktop : la vue active occupe toute la hauteur de l'écran (vrai plein-page) */
@media (min-width:761px){
  /* PLAFONNE la grille à la hauteur d'écran : minmax(0,1fr) empêche le rail/main
     de faire grandir la ligne au-delà de l'écran → les vues se compriment pour tenir. */
  .app{height:calc(100dvh - 2 * clamp(10px,2.4vw,30px)); grid-template-rows:minmax(0,1fr); overflow:hidden}
  .main{display:flex; flex-direction:column; min-height:0; overflow:hidden}
  .rail{min-height:0}
  .view{min-height:0}
  .view.on{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
  .week{flex:1 1 auto; min-height:0}
  .month{flex:1 1 auto; min-height:0; grid-template-rows:auto repeat(6,1fr)}
  .day{min-height:0}
  .cell{min-height:0}
  .spread{flex:1 1 auto; min-height:0}
  .pg{min-height:0}
  .day-tl{flex:1 1 auto; min-height:0; overflow:auto}
  .pad{flex:1 1 auto}
}
/* Viewport court (téléphone en paysage, fenêtre basse) : on GARDE le plein-écran
   (toute la semaine/le mois/la double-page d'un coup, sans défiler) mais on
   compacte fortement l'en-tête et les lignes pour que tout tienne. */
@media (max-height:540px){
  /* Paysage téléphone : l'app remplit tout l'écran (le plafonnement est géré plus haut),
     on masque le pied et on compacte fortement en-tête + lignes pour tout faire tenir. */
  body{padding:0}
  .app{height:100dvh}
  .foot{display:none}
  .head{gap:4px 10px; padding-bottom:6px; margin-bottom:7px}
  .emblem{width:27px; height:27px} .emblem span{font-size:13px}
  .brand b{font-size:15px; letter-spacing:.05em}
  .brand small{display:none}
  .period{font-size:14.5px}
  .legend{display:none}
  .nav button,.theme-toggle,.gear{width:28px; height:28px}
  .univers button{font-size:10.5px; padding:4px 9px}
  .toggle button{font-size:11px; padding:5px 11px}
  /* le titre se rétrécit (ellipsis) pour laisser l'en-tête tenir sur une ligne */
  .period{flex:1 1 60px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0}
  .spring{display:none}
  .cell{padding:5px 7px}
  .cell .mev{display:none}
  .month .wd{padding:6px 0}
  .pg{padding:2px 12px}
  .pday{padding:5px 0 3px}
  .ph{margin-bottom:2px}
  .ph .pn{font-size:11px} .ph .pd{font-size:14px}
  .pev{height:15px; font-size:10px}
  .pev .pt{font-size:9px}
  .pitems{background:repeating-linear-gradient(transparent 0 15px, var(--line-soft) 15px 16px)}
  .spread{padding:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}