/* ===================================================================
   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);
}
/* — Univers VIF = registre « Jeune » du Brand Kit — Nuit (adaptation sombre chaude) — */
:root[data-univers="vibrant"]{
  --bg:#1B1A1E; --bg-2:#211F24; --panel:#25232A; --card:#2C2A32; --card-2:#37333D;
  --gold:#F0C24A; --gold-soft:#F6D479; --ivory:#F3F0EC; --glacier:#E2DDD6; --sage:#ADA6A0; --sage-dim:#7E7873;
  --line:rgba(255,140,90,.22); --line-soft:rgba(243,240,236,.08);
  --perso:#FF9E7E; --outlook:#7FB0E6; --teams:#B79BEA; --zoom:#22C7BC; --deadline:#F0C24A;
  --chip-bg:#F3F0EC; --chip-fg:#25232A; --fold:70,40,26; --glow:.45;
  --shadow:0 2px 6px rgba(0,0,0,.4), 0 26px 60px -30px rgba(0,0,0,.8);
  --accent:#FF8C42; --accent-soft:#FFA96A; --on-accent:#3A1F12; --routine:#22C7BC;
  --accent-pastel:#F6E4A6;
  --grad:linear-gradient(120deg,#FF8FA3 0%,#FF8C42 52%,#FFC72E 100%);
}
/* — Univers VIF — Jour = le registre JEUNE officiel : Cloud Dancer #F0EEE9 (Pantone 2026),
     dégradé Pink lemonade → Papaye → Mangue, œil turquoise #00A9A0 (seul accent froid). — */
:root[data-univers="vibrant"][data-theme="light"]{
  --bg:#F0EEE9; --bg-2:#F5F3EE; --panel:#FBFAF6; --card:#FFFFFF; --card-2:#F5F0E8;
  --gold:#E39A2E; --gold-soft:#F0B24E; --ivory:#16323A; --glacier:#2C464D; --sage:#6C7A78; --sage-dim:#9AA6A2;
  --line:rgba(22,50,58,.14); --line-soft:rgba(22,50,58,.07);
  --perso:#FF7A5A; --outlook:#3D77C4; --teams:#7A5CD0; --zoom:#00A9A0; --deadline:#E39A2E;
  --chip-bg:#16323A; --chip-fg:#F0EEE9; --fold:120,80,50; --glow:0;
  --shadow:0 2px 6px rgba(22,50,58,.06), 0 22px 46px -26px rgba(255,124,90,.4);
  --accent:#FF8C42; --accent-soft:#FFA96A; --on-accent:#3A1F12; --routine:#00A9A0;
  --accent-pastel:#F6E4A6;
  --grad:linear-gradient(120deg,#FF8FA3 0%,#FF8C42 52%,#FFC72E 100%);
}
/* Accent orange (esprit SÆF) : boutons & états sélectionnés (SÆF + Horace) ;
   l'univers Vif redéfinit --accent en violet ci-dessus. --routine = couleur des séances. */
:root{--accent:#D9743F; --accent-soft:#E29466; --on-accent:#FBF5EE; --routine:#0FB5A8}
/* Couleur des objectifs/séances, harmonisée à chaque univers.
   Vif conserve le turquoise « œil » du Brand Kit (défini plus haut). */
:root{--routine:#6E9C7E}                                       /* SÆF Vert — vert sauge */
:root[data-theme="light"]{--routine:#557A61}
:root[data-univers="horace"]{--routine:#5E9BD1}                /* Horace Bleu — azur harmonisé */
:root[data-univers="horace"][data-theme="light"]{--routine:#2F6FA6}
*{box-sizing:border-box}
html,body{margin:0; overscroll-behavior:none; overscroll-behavior-x:none;
  max-width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%;
  touch-action:manipulation} /* pas de double-tap-zoom accidentel (appli plein écran) */
body{
  min-height:100vh; min-height:100dvh; padding:clamp(8px,1.5vw,18px);
  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:"Poppins",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.app{
  max-width:none; 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:"Poppins",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); position:relative}

/* 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}
/* Emblème = la cible officielle, dans tous les univers, agrandie.
   Trait en currentColor (couleur du thème) ; œil = accent. Le mode Vif
   remplace le trait par le dégradé chaud (voir plus bas). */
.emblem{width:52px; height:52px; border:0; display:grid; place-items:center; color:var(--gold); flex:0 0 auto}
.emblem-cible{width:100%; height:100%}
.emblem-cible .eye{fill:var(--accent)}

/* Filigrane : grande cible en surimpression, coin bas-droit, très discrète —
   une signature visuelle (esprit Horace / SÆF). Adaptée à chaque univers. */
.brandmark{position:absolute; left:-20%; top:-24%; width:min(98vw,1180px); z-index:2;
  color:var(--gold); opacity:.03; pointer-events:none}
.brandmark svg{width:100%; height:auto; display:block}
.brandmark .eye{fill:var(--accent)}
:root[data-univers="vibrant"] .brandmark{opacity:.055}
:root[data-univers="vibrant"] .brandmark .ring{stroke:url(#calGradWM)}
:root[data-univers="vibrant"] .brandmark .eye{fill:#00A9A0}
@media (max-width:760px){ .brandmark{width:145vw; left:-30%; top:-10%; opacity:.028} }
.brand{display:flex; flex-direction:column; line-height:1}
.brand b{font-family:"Poppins",sans-serif; font-weight:600; font-size:28px; letter-spacing:.10em; text-transform:none; line-height:1; color:var(--ivory)}
.brand small{font-family:"Poppins",sans-serif; font-size:9px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-top:5px}
.period{font-family:"Poppins",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:"Poppins",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:"Poppins",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)}
.toggle button[data-on="obj"][aria-pressed="true"]{background:var(--routine); color:#fff}
.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:"Poppins",sans-serif; font-weight:400; font-size:13px; color:var(--glacier); text-transform:capitalize; letter-spacing:.02em}
.dd{font-family:"Poppins",sans-serif; font-weight:300; font-size:20px; color:var(--sage)}
.day.today .dd{color:var(--gold)}
.today-tag{font-family:"Poppins",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:"Poppins",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:"Poppins",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:"Poppins",sans-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:"Poppins",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:minmax(0,1fr) minmax(0,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:13.5px; color:var(--ivory); text-transform:capitalize; letter-spacing:.02em}
.ph .pd{font-weight:300; font-size:19px; color:var(--sage)}
.pitems{display:flex; flex-direction:column; flex:1; gap:0; background:repeating-linear-gradient(transparent 0 22px, var(--line-soft) 22px 23px)}
.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:23px; font-size:12.5px; color:var(--glacier); overflow:hidden; white-space:nowrap}
.pev i{width:6px; height:6px; border-radius:50%; flex:0 0 auto}
.pev .pt{color:var(--sage); font-weight:600; font-variant-numeric:tabular-nums; font-size:11px; 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:0; background:var(--panel); max-height:calc(100dvh - 150px); overflow-y:auto; -webkit-overflow-scrolling:touch}
.pad h3{font-family:"Poppins",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:"Poppins",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:"Poppins",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:"Poppins",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:"Poppins",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:"Poppins",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:"Poppins",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:"Poppins",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}
.route-row{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px}
.route-lbl{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:700}
.route-btn{font-family:"Poppins",sans-serif; font-size:12.5px; font-weight:600; color:var(--glacier); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:6px 13px; transition:.15s; background:var(--card)}
.route-btn:hover{border-color:var(--accent); color:var(--accent)}
.evd-meta{font-family:"Poppins",sans-serif; font-weight:600; font-size:15px; color:var(--glacier); margin:2px 0 6px}
.evd-loc{font-size:14px; color:var(--ivory); margin:0 0 10px}
.evd-src{display:inline-block; margin-top:12px; font-size:11px; letter-spacing:.06em; color:var(--sage); border:1px solid var(--line); border-radius:999px; padding:4px 11px}
.help{margin:0 0 12px; border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden}
.help > summary{cursor:pointer; list-style:none; padding:11px 14px; font-family:"Poppins",sans-serif; font-size:13px; font-weight:600; color:var(--gold); display:flex; align-items:center; gap:8px}
.help > summary::-webkit-details-marker{display:none}
.help > summary::before{content:"?"; flex:0 0 auto; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--gold); color:var(--gold); font-size:11px; font-weight:700; display:grid; place-items:center}
.help[open] > summary{border-bottom:1px solid var(--line)}
.help-body{padding:12px 14px; font-size:13px; line-height:1.55; color:var(--glacier)}
.help-body p{margin:0 0 11px} .help-body p:last-child{margin:0}
.help-body a{color:var(--gold); text-decoration:none} .help-body a:hover{text-decoration:underline}
.help-body code{font-family:ui-monospace,Menlo,monospace; font-size:12px; background:var(--bg-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--ivory)}
.help-warn{color:var(--perso); font-weight:500}
.help-note{color:var(--sage); border-top:1px dashed var(--line); padding-top:9px}
.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:"Poppins",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:"Poppins",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:40px; height:40px}
  .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:minmax(0,1fr) minmax(0,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; min-height:0; overflow-y: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:36px; height:36px} .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}}

/* ===================================================================
   Espace Objectifs (module Progression · Phase 1)
   =================================================================== */
.obj-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px}
.obj-kicker{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--sage-dim); font-weight:700}
.obj-pad h3{margin:2px 0 0}
.obj-empty{text-align:center; padding:38px 10px; max-width:44ch; margin:0 auto}
.obj-emoji{margin-bottom:12px; color:var(--accent); line-height:0}
.obj-emoji svg{width:48px; height:48px; stroke:currentColor; stroke-width:1.4; fill:none}
.obj-empty h4{font-family:"Poppins",sans-serif; font-weight:600; font-size:18px; color:var(--ivory); margin:0 0 8px}
.obj-empty p{color:var(--sage); font-size:14px; line-height:1.6; margin:0 0 18px}
.goallist{display:flex; flex-direction:column; gap:11px}
.goalcard{display:flex; align-items:center; gap:13px; background:var(--card); border:1px solid var(--line-soft); border-radius:15px; padding:13px 14px; cursor:pointer; transition:border-color .15s, transform .15s}
.goalcard:hover{border-color:var(--line); transform:translateY(-1px)}
.gtile{width:48px; height:48px; flex:0 0 auto; border-radius:14px; display:grid; place-items:center; color:var(--cc,var(--accent)); background:var(--card-2); background:color-mix(in srgb, var(--cc,var(--accent)) 15%, var(--card))}
.gtile svg{width:26px; height:26px; stroke:currentColor; stroke-width:1.6; fill:none}
.gmain{flex:1; min-width:0}
.gtitle{font-size:16px; font-weight:700; color:var(--ivory); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gmeta{font-size:12px; color:var(--sage); margin-top:1px}
.gdots{display:flex; align-items:center; gap:5px; margin-top:8px; flex-wrap:wrap}
.gdots i{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--routine); box-sizing:border-box}
.gdots i.on{background:var(--routine)}
.gdots span{font-size:11px; color:var(--sage); margin-left:4px; font-weight:600}
.gnext{font-size:12px; color:var(--accent); margin-top:6px; font-weight:600}
.gplan{flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--accent); font-size:18px; cursor:pointer; transition:.15s}
.gplan:hover{border-color:var(--accent)}
/* Chips de choix (catégorie, durée, priorité, échéance, jours) */
.chipset{display:flex; flex-wrap:wrap; gap:7px; margin-top:2px}
.chipset button{border:1px solid var(--line); background:var(--card); cursor:pointer; font-family:"Poppins",sans-serif; font-size:12.5px; font-weight:600; color:var(--sage); padding:8px 12px; border-radius:999px; transition:.15s}
.chipset button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.chipset button svg{width:15px; height:15px; stroke:currentColor; stroke-width:1.7; fill:none; vertical-align:-2px; margin-right:5px}
.chipset.wds button{width:36px; padding:8px 0; text-align:center}
.freqrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:2px}
.stepper{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:12px; background:var(--card)}
.stepper button{width:40px; height:40px; border:0; background:transparent; color:var(--accent); font-size:20px; cursor:pointer}
.stepper span{min-width:36px; text-align:center; font-weight:700; color:var(--ivory)}
#goalEditSheet textarea{min-height:58px}
/* Détail d'un objectif */
.gd-head{display:flex; align-items:center; gap:12px; margin:2px 0 14px}
.gd-stats{display:flex; gap:9px; margin-bottom:12px}
.gd-stat{flex:1; text-align:center; background:var(--card); border:1px solid var(--line-soft); border-radius:13px; padding:11px 4px}
.gd-stat b{display:block; font-family:"Poppins",sans-serif; font-weight:600; font-size:22px; color:var(--ivory)}
.gd-stat small{font-size:11px; color:var(--sage)}
.gd-quote{background:var(--card); border-left:3px solid var(--accent); border-radius:10px; padding:11px 13px; font-style:italic; color:var(--glacier); font-size:14px; line-height:1.5; margin-bottom:10px}
.gd-target{font-size:12.5px; color:var(--sage); margin-bottom:10px}
.gd-group{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:16px 0 8px}
.occrow{display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line-soft); border-radius:12px; padding:9px 11px; margin-bottom:7px}
.occ-when{flex:1; min-width:0}
.occ-when b{display:block; font-size:14px; color:var(--ivory)}
.occ-when small{font-size:12px; color:var(--sage)}
.occrow .btn{margin:0}
.occ-done{background:var(--accent); color:var(--on-accent)}
.occ-del{background:transparent; border:0; color:var(--sage-dim); font-size:15px; cursor:pointer; padding:0 2px}
.occ-del:hover{color:#e07a52}
.gd-done{display:flex; gap:9px; align-items:center; font-size:13.5px; color:var(--sage); padding:5px 2px}
/* Planifier une séance */
.daypick{display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px; -webkit-overflow-scrolling:touch}
.daychip{flex:0 0 auto; width:52px; padding:8px 0; border:1px solid var(--line); background:var(--card); border-radius:13px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; transition:.15s}
.daychip small{font-size:11px; color:var(--sage)}
.daychip b{font-size:17px; color:var(--ivory); font-weight:700}
.daychip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent)}
.daychip[aria-pressed="true"] small,.daychip[aria-pressed="true"] b{color:var(--on-accent)}

/* ===================================================================
   Univers VIF = registre « Jeune » du Brand Kit CALENDÆ.
   Poppins, fond Cloud Dancer, dégradé chaud dynamique + œil turquoise.
   Distinct des univers Heritage (Vert / Bleu) ; scopé à [data-univers="vibrant"].
   =================================================================== */
/* Emblème en mode Vif : trait en dégradé chaud, œil turquoise (registre Jeune) */
:root[data-univers="vibrant"] .emblem-cible .ring{stroke:url(#calGrad)}
:root[data-univers="vibrant"] .emblem-cible .eye{fill:#00A9A0}
/* Typographie Poppins UNIFIÉE — identique dans TOUS les univers :
   logotype SemiBold 0,10em (minuscules), titres SemiBold, texte Regular.
   (Seul le fond dégradé chaud reste propre au mode Vif.) */
:root[data-univers="vibrant"] body{
  background-image:
    radial-gradient(70% 50% at 85% -12%, rgba(255,122,138,.14), transparent 62%),
    radial-gradient(60% 46% at 4% 112%, rgba(0,169,160,.10), transparent 60%);
}
.period, .pad h3, .sheet h2, .obj-empty h4, .mlabel, .day-title, .gd-stat b{font-family:"Poppins",sans-serif; font-weight:600}
.period i, .day-title i, .mlabel span{font-style:normal}
/* Dégradé chaud = énergie : gros boutons d'action (dynamique) */
:root[data-univers="vibrant"] .btn.primary,
:root[data-univers="vibrant"] .obj-head .btn{background:var(--grad); color:#fff; box-shadow:0 9px 22px -10px rgba(255,140,66,.75)}
:root[data-univers="vibrant"] .obj-kicker{color:var(--accent)}
/* Tuiles d'icônes en PASTEL (teinte douce de la catégorie) */
:root[data-univers="vibrant"] .gtile{border-radius:16px}
:root[data-univers="vibrant"][data-theme="light"] .gtile{background:color-mix(in srgb, var(--cc,var(--accent)) 22%, #fff)}
/* Formes douces + ombres portées franches */
:root[data-univers="vibrant"] .app{border-radius:28px}
:root[data-univers="vibrant"] .sheet{border-radius:24px}
:root[data-univers="vibrant"] .goalcard,
:root[data-univers="vibrant"] .gd-stat,
:root[data-univers="vibrant"] .occrow{border-radius:20px}
:root[data-univers="vibrant"] .goalcard{border-color:transparent; box-shadow:0 5px 18px -9px rgba(22,50,58,.20)}
:root[data-univers="vibrant"] .goalcard:hover{transform:translateY(-2px); box-shadow:0 12px 28px -12px rgba(255,124,90,.40)}
:root[data-univers="vibrant"] .btn{border-radius:14px; font-weight:600}
:root[data-univers="vibrant"] .chipset button{border-radius:13px}
:root[data-univers="vibrant"] .rail button[aria-selected="true"]{border-radius:16px 0 0 16px}
:root[data-univers="vibrant"] .gdots i{width:10px; height:10px}
/* Vif : les états sélectionnés prennent le dégradé chaud (saumon → papaye → jaune vif),
   texte brun foncé lisible sur le jaune terminal. Progression demandée par la cliente. */
:root[data-univers="vibrant"] .rail button[aria-selected="true"],
:root[data-univers="vibrant"] .univers button[aria-pressed="true"],
:root[data-univers="vibrant"] .sheet .segset button[aria-pressed="true"],
:root[data-univers="vibrant"] .chipset button[aria-pressed="true"],
:root[data-univers="vibrant"] .daychip[aria-pressed="true"]{
  background:var(--grad); color:#3A1F12; border-color:transparent;
}
:root[data-univers="vibrant"] .daychip[aria-pressed="true"] small,
:root[data-univers="vibrant"] .daychip[aria-pressed="true"] b{color:#3A1F12}
/* Échéances : accent papaye plein (distinct du dégradé principal et du turquoise objectifs) */
:root[data-univers="vibrant"] .toggle button[data-on="ech"][aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}

/* ===================================================================
   Gestion de conflit interactive : étiquette-bouton + panneau d'options
   =================================================================== */
.evfix{border:0; cursor:pointer; font:inherit; font-size:.86em; font-weight:600; letter-spacing:.01em;
  padding:1px 7px; border-radius:999px; margin-left:2px; vertical-align:baseline;
  background:color-mix(in srgb, var(--routine) 16%, transparent); color:var(--routine);
  transition:background .15s, transform .1s}
.evfix:hover{background:color-mix(in srgb, var(--routine) 30%, transparent)}
.evfix:active{transform:scale(.94)}
.evfix-conflict{background:color-mix(in srgb, #E0552F 20%, transparent); color:#E0552F}
.evfix-conflict:hover{background:color-mix(in srgb, #E0552F 34%, transparent)}
.evfix-overlap{background:color-mix(in srgb, var(--gold) 22%, transparent); color:var(--gold)}
.sheet.cfx{max-width:440px}
.cfx-sub{font-family:"Poppins",sans-serif; font-weight:600; color:var(--ivory); margin:2px 0 2px}
.cfx-hint{color:var(--sage); font-size:13px; margin:0 0 14px}
.cfx-list{display:flex; flex-direction:column; gap:9px}
.cfx-opt{display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left;
  border:1px solid var(--line); background:var(--card); border-radius:14px; padding:12px 14px; cursor:pointer;
  transition:border-color .15s, transform .1s, background .15s}
.cfx-opt:hover{border-color:var(--routine); background:color-mix(in srgb, var(--routine) 7%, var(--card))}
.cfx-opt:active{transform:scale(.99)}
.cfx-opt b{font-family:"Poppins",sans-serif; font-size:16px; font-weight:600; color:var(--ivory)}
.cfx-opt span{font-size:12.5px; color:var(--sage)}
.cfx-force{border-color:color-mix(in srgb, var(--gold) 45%, var(--line))}
.cfx-force:hover{border-color:var(--gold); background:color-mix(in srgb, var(--gold) 8%, var(--card))}
.cfx-auto{border-style:dashed}

/* ===================================================================
   Séances d'objectif : cases à cocher (toutes les vues) + animation
   « cible atteinte » gratifiante.
   =================================================================== */
/* Semaine / Jour */
.ev.evroutine{padding-right:38px}
.evcheck{position:absolute; top:50%; right:8px; transform:translateY(-50%); width:24px; height:24px; border-radius:50%;
  border:2px solid var(--c); background:transparent; color:var(--c); cursor:pointer; display:grid; place-items:center;
  font-size:13px; font-weight:800; line-height:1; z-index:2; transition:transform .14s, background .14s}
.evcheck:hover{transform:translateY(-50%) scale(1.14)}
.evcheck.on{background:var(--c); color:#fff}
.ev.evdone{opacity:.62}
.ev.evdone .n{text-decoration:line-through}
/* Papier */
.pevcheck{flex:0 0 auto; width:17px; height:17px; border-radius:50%; border:1.6px solid var(--c); background:transparent;
  color:var(--c); cursor:pointer; display:grid; place-items:center; font-size:10px; font-weight:800; line-height:1; padding:0}
.pevcheck.on{background:var(--c); color:#fff}
.pev.pevdone .pnm{text-decoration:line-through; opacity:.68}
/* Mois */
.mevcheck{flex:0 0 auto; width:13px; height:13px; border-radius:50%; border:1.5px solid var(--c); background:transparent;
  color:var(--c); cursor:pointer; display:grid; place-items:center; font-size:8px; font-weight:800; line-height:1; padding:0; margin-right:3px}
.mevcheck.on{background:var(--c); color:#fff}
.mev.mevdone span{text-decoration:line-through; opacity:.68}
/* Détail objectif */
.occcheck{flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:2px solid var(--routine); background:transparent;
  color:var(--routine); cursor:pointer; display:grid; place-items:center; font-size:14px; font-weight:800; transition:transform .14s, background .14s}
.occcheck:hover{transform:scale(1.1)}
.occcheck.on{background:var(--routine); color:#fff}
.gchevron{font-size:22px; color:var(--sage-dim); align-self:center; flex:0 0 auto}

/* Animation « cible atteinte » : anneaux concentriques + coche qui jaillit */
.cible-burst{position:fixed; z-index:9999; transform:translate(-50%,-50%); pointer-events:none; width:0; height:0}
.cible-burst span{position:absolute; left:0; top:0; width:26px; height:26px; margin:-13px 0 0 -13px; border:2.5px solid var(--accent);
  border-radius:50%; opacity:.9; transform:scale(.5); animation:cibleRing .62s cubic-bezier(.2,.7,.3,1) forwards}
.cible-burst span:nth-child(2){border-color:var(--routine); animation-delay:.07s}
.cible-burst span:nth-child(3){animation-delay:.14s}
.cible-burst b{position:absolute; left:0; top:0; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  background:var(--routine); color:#fff; display:grid; place-items:center; font-size:17px; font-weight:800; transform:scale(0);
  animation:ciblePop .55s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes cibleRing{ to{ transform:scale(3.6); opacity:0 } }
@keyframes ciblePop{ 0%{transform:scale(0)} 55%{transform:scale(1.18)} 80%{transform:scale(1)} 100%{transform:scale(1); opacity:0} }
@media (prefers-reduced-motion:reduce){ .cible-burst{display:none} }

/* ===================================================================
   Rappels d'objectifs (bandeau) + type de suivi + objectif souple
   =================================================================== */
.objbanner{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
.rem{display:flex; align-items:center; gap:10px; border-radius:14px; padding:10px 12px; border:1px solid var(--line)}
.rem-strict{background:var(--card); background:color-mix(in srgb, #E0554A 12%, var(--card)); border-color:color-mix(in srgb, #E0554A 40%, transparent)}
.rem-soft{background:var(--card); background:color-mix(in srgb, var(--routine) 12%, var(--card)); border-color:color-mix(in srgb, var(--routine) 34%, transparent)}
.remicon{flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px; color:#fff}
.rem-strict .remicon{background:#E0554A}
.rem-soft .remicon{background:var(--routine)}
.remtxt{flex:1; min-width:0; font-size:13.5px; color:var(--ivory); line-height:1.4}
.remtxt b{font-weight:700}
.rembtn{flex:0 0 auto; border:0; cursor:pointer; font-family:"Poppins",sans-serif; font-weight:700; font-size:12.5px; border-radius:11px; padding:8px 14px; background:var(--accent); color:var(--on-accent)}
.rembtn.ghost{background:transparent; border:1px solid var(--line); color:var(--sage)}
.rem-strict .rembtn{background:#E0554A; color:#fff}
/* Éditeur : indice du type de suivi */
.modehint{font-size:12px; color:var(--sage); line-height:1.5; margin:8px 0 0}
/* Détail : objectif souple (temps cumulé) */
.gd-flex{background:var(--card); border:1px solid var(--line-soft); border-radius:14px; padding:12px 13px; margin-bottom:10px}
.gd-flexbar{height:9px; border-radius:6px; background:var(--card-2); overflow:hidden}
.gd-flexbar span{display:block; height:100%; background:var(--routine); border-radius:6px; transition:width .3s}
.gd-flexlbl{font-size:13px; color:var(--ivory); margin-top:7px}
.gd-flexlbl b{font-family:"Poppins",sans-serif; font-weight:700; color:var(--routine)}
.gd-catchup{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; color:var(--sage); margin-top:10px}
.gd-catchup .btn{margin:0}

/* ===================================================================
   Tableau de bord « Progression » (temps pour soi / travail + compounding)
   =================================================================== */
.pgsplit{display:flex; gap:10px; margin-bottom:12px}
.pgtile{flex:1; text-align:center; border-radius:15px; padding:15px 8px; border:1px solid var(--line-soft); background:var(--card)}
.pgtile b{display:block; font-family:"Poppins",sans-serif; font-weight:700; font-size:24px; color:var(--ivory)}
.pgtile small{font-size:12px; color:var(--sage)}
.pgself{background:color-mix(in srgb, var(--routine) 12%, var(--card))}
.pgwork{background:color-mix(in srgb, var(--accent) 12%, var(--card))}
.pgcompare{display:flex; height:12px; border-radius:7px; overflow:hidden; background:var(--card-2)}
.pgcompare .cself{background:var(--routine)}
.pgcompare .cwork{background:var(--accent)}
.pgcomparelbl{display:flex; justify-content:space-between; font-size:11.5px; color:var(--sage); margin-top:6px; font-weight:600}
.pgcard{display:flex; gap:13px; align-items:flex-start; background:var(--card); border:1px solid var(--line-soft); border-radius:16px; padding:13px 14px; margin-bottom:10px}
.pgmain{flex:1; min-width:0}
.pgtitle{font-family:"Poppins",sans-serif; font-weight:600; font-size:15px; color:var(--ivory)}
.pgbar{height:8px; border-radius:5px; background:var(--card-2); overflow:hidden; margin:8px 0 7px}
.pgbar span{display:block; height:100%; border-radius:5px; transition:width .3s}
.pgmeta{font-size:12px; color:var(--sage)}
.pgmeta b{color:var(--ivory); font-weight:700}
.pgproj{font-size:12px; color:var(--accent); font-weight:600; margin-top:4px}
.pgproj b{font-weight:800}

/* ===================================================================
   Tableau de bord — graphiques (donut de répartition + widgets objectifs)
   =================================================================== */
.donut{display:block}
.pgchart{display:flex; gap:18px; align-items:center; flex-wrap:wrap; background:var(--card); border:1px solid var(--line-soft); border-radius:16px; padding:16px; margin-bottom:14px}
.donutwrap{flex:0 0 auto}
.legend{flex:1; min-width:170px; display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--sage)}
.legend .lg{display:flex; align-items:center; gap:8px}
.legend .lg i{width:11px; height:11px; border-radius:3px; flex:0 0 auto}
.legend .lg b{color:var(--ivory); font-weight:700}
.lgself{margin-top:6px; padding-top:8px; border-top:1px solid var(--line-soft); font-size:12.5px}
.lgself b{color:var(--routine); font-family:"Poppins",sans-serif; font-weight:700}
.wdggrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px}
.wdg{background:var(--card); border:1px solid var(--line-soft); border-radius:16px; padding:14px; cursor:pointer; transition:border-color .15s, transform .15s}
.wdg:hover{border-color:var(--line); transform:translateY(-1px)}
.wdghead{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.wdghead .gtile{width:38px; height:38px; border-radius:11px}
.wdghead .gtile svg{width:21px; height:21px}
.wdgtitle{font-family:"Poppins",sans-serif; font-weight:600; font-size:15px; color:var(--ivory); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wdgbody{display:flex; align-items:center; gap:14px}
.wdgring{flex:0 0 auto; text-align:center}
.wdgring small{display:block; font-size:10.5px; color:var(--sage); margin-top:3px}
.wdgbars{flex:1; min-width:0}
.wdgbars small{display:block; font-size:10.5px; color:var(--sage); margin-top:5px; text-align:center}
.bars{display:flex; align-items:flex-end; gap:4px; height:66px}
.barcol{flex:1; height:100%; display:flex; align-items:flex-end}
.barfill{width:100%; border-radius:4px 4px 2px 2px; min-height:2px; transition:height .3s}
.wdgfoot{display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--sage); margin-top:13px}
.wdgfoot b{color:var(--ivory); font-weight:700}
.wdgproj{font-size:12px; color:var(--accent); font-weight:600; margin-top:6px}
.wdgproj b{font-weight:800}
@media (max-width:560px){ .wdggrid{grid-template-columns:1fr} }

/* Rappels d'objectifs — version discrète (moins voyante) */
.objbanner{gap:6px; margin-bottom:10px}
.rem{padding:6px 10px; gap:8px; border-radius:11px; border-color:var(--line-soft)}
.rem-soft{background:color-mix(in srgb, var(--routine) 7%, var(--card))}
.rem-strict{background:color-mix(in srgb, #E0554A 9%, var(--card)); border-color:color-mix(in srgb, #E0554A 26%, transparent)}
.remicon{width:17px; height:17px; font-size:10px}
.remtxt{font-size:12px; color:var(--sage)}
.remtxt b{color:var(--ivory)}
.rembtn{padding:5px 11px; font-size:11px; border-radius:9px}