/* ============ V1.18 : les styles des maquettes. Manga planche, Herbier, Forêt vivante,
   Papeterie florale et Aquarelle. Chacun a ses couleurs claires ET sombres (les deux sélecteurs du mode sombre),
   ses dessins sont en SVG dans la page (heroArt, heroDay, dayGauge, leafProgress dans app.js). Douceur, Orbit, Manga, Féminin, Nature et Manga
   grand format ont été retirés en V1.20.2. ============ */

/* Commun : avancement en feuilles et jauge (seulement rendus dans ces styles). */
.leaf-prog { display: inline-flex; gap: 2px; align-items: center; }
.leaf-prog svg { width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.leaf-prog svg.on { fill: var(--accent); }
.hero-art .rib { fill: none; stroke-width: .9; }
.dg-bar i { display: block; height: 100%; }

/* ---------- Manga planche : noir et blanc, cases encrées, bulle, lignes de vitesse ---------- */
:root[data-layout="manga-planche"] {
  --paper: #FFFFFF; --sheet: #FFFFFF; --sheet-2: #F4F4F6; --ink: #111114; --ink-2: #2E2E33; --muted: #4B4B52; --line: #C9C9CF;
  --mp-tone: rgba(0,0,0,.15);
  --f-display: "Bangers", Impact, sans-serif; --f-hand: var(--f-body); --r: 0px; --r-sm: 0px; --shadow: none;
  --marker: var(--accent-soft); --on-marker: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root[data-layout="manga-planche"]:not([data-theme="light"]) {
    --paper: #0E0E11; --sheet: #17171B; --sheet-2: #1E1E23; --ink: #F2F2F4; --ink-2: #D4D4DA; --muted: #B9B9C2; --line: #3A3A42; --mp-tone: rgba(255,255,255,.12);
  }
}
:root[data-layout="manga-planche"][data-theme="dark"] {
  --paper: #0E0E11; --sheet: #17171B; --sheet-2: #1E1E23; --ink: #F2F2F4; --ink-2: #D4D4DA; --muted: #B9B9C2; --line: #3A3A42; --mp-tone: rgba(255,255,255,.12);
}
:root[data-layout="manga-planche"] body { background-color: var(--paper); background-image: radial-gradient(circle, var(--mp-tone) 1.1px, transparent 1.6px); background-size: 7px 7px; }
:root[data-layout="manga-planche"] :is(.card, .ess, .ftile, .note-card, .home-appt, .home-shortcuts button) { border: 3px solid var(--ink); border-radius: 0; box-shadow: none; background-color: var(--sheet); }
:root[data-layout="manga-planche"] :is(.card-head h2, .card-head h3, .month-nav h2, .week-head h2) { font-family: var(--f-display); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; }
:root[data-layout="manga-planche"] .ess.prio .eyebrow { font: 400 1.15rem var(--f-display); letter-spacing: .05em; color: var(--ink); }
:root[data-layout="manga-planche"] .hero.compact { position: relative; min-height: 200px; margin: 0 0 10px; padding: 0; border: 3px solid var(--ink); background: var(--sheet); overflow: hidden; }
:root[data-layout="manga-planche"] .hero.compact::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 70% 56%, var(--ink) 0deg 1deg, transparent 1deg 5.5deg);
  -webkit-mask-image: radial-gradient(circle at 70% 56%, transparent 0 74px, #000 170px); mask-image: radial-gradient(circle at 70% 56%, transparent 0 74px, #000 170px);
}
:root[data-layout="manga-planche"] .hello { margin: 0; }
:root[data-layout="manga-planche"] .hello .hand {
  position: absolute; z-index: 1; left: 12px; top: 14px; max-width: 54%; padding: 8px 15px; box-sizing: border-box;
  background: var(--sheet); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 50%;
  font: 700 .95rem/1.2 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root[data-layout="manga-planche"] .hello::before, :root[data-layout="manga-planche"] .hello::after { content: ""; position: absolute; z-index: 2; clip-path: polygon(0 0, 100% 0, 15% 100%); }
:root[data-layout="manga-planche"] .hello::before { left: 40px; top: 50px; width: 20px; height: 18px; background: var(--ink); }
:root[data-layout="manga-planche"] .hello::after { left: 43.5px; top: 49px; width: 13px; height: 12px; background: var(--sheet); }
:root[data-layout="manga-planche"] .hello > b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root[data-layout="manga-planche"] .hero-day { position: absolute; z-index: 1; left: 70%; top: 56%; transform: translate(-50%, -50%); display: grid; justify-items: center; line-height: .92; text-transform: uppercase; color: var(--ink); }
:root[data-layout="manga-planche"] .hero-day small { font: 400 1.05rem var(--f-display); letter-spacing: .12em; }
:root[data-layout="manga-planche"] .hero-day b { font: 400 5.4rem var(--f-display); color: var(--accent); -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink); }
:root[data-layout="manga-planche"] .hero.compact .hero-sub { position: absolute; z-index: 1; left: 12px; bottom: 12px; max-width: 50%; margin: 0; padding: 5px 9px; background: var(--ink); color: var(--sheet); font-size: .8rem; line-height: 1.35; }
:root[data-layout="manga-planche"] .hero-sub b { color: inherit; }
:root[data-layout="manga-planche"] .appt-row { display: flex; gap: 8px; min-height: 138px; margin-bottom: 10px; }
:root[data-layout="manga-planche"] .appt-row > .home-appt {
  flex: 1.75 1 0; min-width: 0; margin: 0; border-right: 0; align-content: start; padding: 12px 34px 12px 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
  background: linear-gradient(to bottom right, transparent calc(50% - 3px), var(--ink) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)) right / 24px 100% no-repeat, var(--sheet);
}
:root[data-layout="manga-planche"] .home-appt .eyebrow { justify-self: start; padding: 3px 8px; background: var(--ink); color: var(--sheet); font-size: .66rem; letter-spacing: .08em; transform: skewX(-9deg); }
:root[data-layout="manga-planche"] .home-appt time {
  font: 400 2.9rem/1 var(--f-display); letter-spacing: .02em; color: var(--accent); -webkit-text-stroke: 1px var(--ink);
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--ink) 22%, transparent) 0 1.5px, transparent 1.5px 6px);
}
:root[data-layout="manga-planche"] .appt-row > .home-shortcuts { flex: 1 1 0; min-width: 0; display: flex; margin: 0 0 0 -24px; }
:root[data-layout="manga-planche"] .appt-row .home-shortcuts button {
  position: relative; overflow: hidden; border-left: 0; clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%);
  grid-template-columns: none; justify-items: end; align-content: start; text-align: right; padding: 12px 12px 10px 30px;
  background: linear-gradient(to bottom right, transparent calc(50% - 3px), var(--ink) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)) left / 24px 100% no-repeat, var(--sheet);
}
:root[data-layout="manga-planche"] .appt-row .home-shortcuts svg { grid-row: auto; width: 26px; height: 26px; color: var(--ink); margin: 0; }
:root[data-layout="manga-planche"] .home-shortcuts b { font: 400 1.25rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
:root[data-layout="manga-planche"] .appt-row .home-shortcuts button::after { content: "GO !"; position: absolute; left: 28px; top: 8px; font: 400 1.45rem var(--f-display); color: var(--accent); -webkit-text-stroke: 1px var(--ink); transform: rotate(-14deg); }
:root[data-layout="manga-planche"] .today-tasks .card-head { margin: -16px -16px 8px; padding: 6px 12px; background: var(--ink); }
:root[data-layout="manga-planche"] .today-tasks .card-head :is(h2, .count, .link) { color: var(--sheet); }
:root[data-layout="manga-planche"] .today-tasks .card-head h2 { font-size: 1.45rem; }
:root[data-layout="manga-planche"] .check { border: 3px solid var(--ink); border-radius: 0; }
:root[data-layout="manga-planche"] .task.done .check { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
:root[data-layout="manga-planche"] .task.done .task-title { position: relative; justify-self: start; text-decoration: none; }
:root[data-layout="manga-planche"] .task.done .task-title::after { content: ""; position: absolute; left: -4px; right: -6px; top: 47%; height: 5px; border-radius: 3px; background: var(--accent); transform: rotate(-2.5deg); opacity: .9; }
:root[data-layout="manga-planche"] .today-tasks .task.done { position: relative; }
:root[data-layout="manga-planche"] .today-tasks .task.done:not(:has(.task-time:not(:empty)))::after { content: "FINI !"; position: absolute; right: 6px; top: 50%; padding: 0 6px; border: 2px solid var(--accent); color: var(--accent); font: 400 1rem var(--f-display); letter-spacing: .05em; transform: translateY(-50%) rotate(-8deg); pointer-events: none; }
:root[data-layout="manga-planche"] .quick input { border: 2px dashed var(--ink); border-radius: 0; background: transparent; }
:root[data-layout="manga-planche"] .btn { border-radius: 0; }
:root[data-layout="manga-planche"] .quick .btn { border: 3px solid var(--ink); background: var(--accent); color: var(--accent-ink); box-shadow: 3px 3px 0 var(--ink); }
:root[data-layout="manga-planche"] .tabbar { border-top: 3px solid var(--ink); background: var(--sheet); }
:root[data-layout="manga-planche"] .tab { position: relative; z-index: 0; color: var(--ink); }
:root[data-layout="manga-planche"] .tab[aria-current="page"] { color: var(--sheet); font-weight: 700; }
:root[data-layout="manga-planche"] .tab[aria-current="page"]::before { content: ""; position: absolute; inset: 3px 4px; z-index: -1; background: var(--ink); transform: skewX(-10deg); }
:root[data-layout="manga-planche"] .nav-btn[aria-current="page"] { background: var(--ink); color: var(--sheet); border-radius: 0; }
:root[data-layout="manga-planche"] .fab { border-radius: 0; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }

/* ---------- Herbier : papier crème, branche dessinée, étiquette d'herbier, cases en graines ---------- */
:root[data-layout="herbier"] {
  --paper: #F2EDE1; --sheet: #FBF8F1; --sheet-2: #F4EFE4; --ink: #2C2A23; --ink-2: #4A463B; --muted: #5C5749; --line: #DCD3BF;
  --accent: #3D5A2B; --accent-ink: #FFFFFF; --accent-soft: #E1E8D3; --hb-leaf: #4A6A35; --hb-leaf-fill: rgba(74,106,53,.12); --hb-tape: rgba(196,166,112,.45);
  --f-display: "Fraunces", Georgia, serif; --f-hand: var(--f-display); --r: 18px; --r-sm: 10px; --shadow: none;
  --marker: var(--accent-soft); --on-marker: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root[data-layout="herbier"]:not([data-theme="light"]) {
    --paper: #121812; --sheet: #1A221A; --sheet-2: #202A20; --ink: #ECEADF; --ink-2: #C9CCBD; --muted: #B3B8A6; --line: #33402F;
    --accent: #9CC27E; --accent-ink: #121812; --accent-soft: #263326; --hb-leaf: #9CC27E; --hb-leaf-fill: rgba(156,194,126,.16); --hb-tape: rgba(207,167,127,.30);
  }
}
:root[data-layout="herbier"][data-theme="dark"] {
  --paper: #121812; --sheet: #1A221A; --sheet-2: #202A20; --ink: #ECEADF; --ink-2: #C9CCBD; --muted: #B3B8A6; --line: #33402F;
  --accent: #9CC27E; --accent-ink: #121812; --accent-soft: #263326; --hb-leaf: #9CC27E; --hb-leaf-fill: rgba(156,194,126,.16); --hb-tape: rgba(207,167,127,.30);
}
:root[data-layout="herbier"] body { background: var(--paper); }
:root[data-layout="herbier"] :is(.card, .ess, .ftile, .note-card, .home-shortcuts button) { border-color: var(--line); }
:root[data-layout="herbier"] .hero.compact { position: relative; overflow: hidden; min-height: 168px; margin: 0 0 6px; padding: 18px 124px 18px 18px; border: 1px solid var(--line); border-radius: 26px 6px 26px 6px; background: var(--sheet); }
:root:is([data-layout="herbier"], [data-layout="foret"], [data-layout="floral"], [data-layout="aquarelle"]) .hello { display: grid; gap: 3px; }
:root:is([data-layout="herbier"], [data-layout="foret"], [data-layout="floral"], [data-layout="aquarelle"]) .hello b::first-letter { text-transform: uppercase; }
:root[data-layout="herbier"] .hello .hand { font: italic 400 .95rem var(--f-display); color: var(--muted); }
:root[data-layout="herbier"] .hello b { font: 600 1.9rem/1.08 var(--f-display); letter-spacing: -.02em; }
:root[data-layout="herbier"] .hero.compact .hero-sub { margin-top: 8px; }
:root[data-layout="herbier"] .hero-art { position: absolute; right: 2px; bottom: -6px; width: 124px; height: 176px; }
.hero-art.herb .stem { fill: none; stroke: var(--hb-leaf); stroke-width: 2.2; stroke-linecap: round; }
.hero-art.herb .leaves { fill: var(--hb-leaf-fill); stroke: var(--hb-leaf); stroke-width: 1.6; stroke-linejoin: round; }
:root[data-layout="herbier"] .home-appt { position: relative; margin-top: 16px; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--sheet); color: var(--ink); overflow: visible; }
:root[data-layout="herbier"] .home-appt::before { content: ""; position: absolute; left: 50%; top: -9px; width: 74px; height: 18px; margin-left: -37px; background: var(--hb-tape); transform: rotate(-3deg); }
:root[data-layout="herbier"] .home-appt:not(.add-appt) { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 12px; }
:root[data-layout="herbier"] .home-appt .eyebrow { grid-column: 1 / -1; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 3px double var(--line); color: var(--accent); }
:root[data-layout="herbier"] .home-appt :is(b, small) { grid-column: 1; }
:root[data-layout="herbier"] .home-appt b { font: italic 600 1.35rem/1.15 var(--f-display); }
:root[data-layout="herbier"] .home-appt time { grid-column: 2; grid-row: 2 / span 2; font: 400 2.2rem/1 var(--f-display); letter-spacing: -.03em; color: var(--accent); }
:root[data-layout="herbier"] .today-tasks { border-radius: 6px 26px 6px 26px; }
:root[data-layout="herbier"] .card-head h2 { font: 600 1.25rem var(--f-display); }
:root[data-layout="herbier"] .check { border: 2px solid var(--hb-leaf); border-radius: 50%; }
:root[data-layout="herbier"] .task.done .check { background: var(--hb-leaf); border-color: var(--hb-leaf); color: var(--accent-ink); }
:root[data-layout="herbier"] .task.done .task-title { text-decoration-color: var(--hb-leaf); }
:root[data-layout="herbier"] .today-tasks .task.done { position: relative; }
:root[data-layout="herbier"] .today-tasks .task.done:not(:has(.task-time:not(:empty)))::after { content: "a germé"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: italic 400 .85rem var(--f-display); color: var(--accent); pointer-events: none; }
:root[data-layout="herbier"] .quick input { border-radius: 22px; background: var(--accent-soft); }
:root[data-layout="herbier"] .quick .btn { border-radius: 22px; }
:root[data-layout="herbier"] .home-shortcuts button { border-radius: 26px 6px 26px 6px; }
:root[data-layout="herbier"] .tab { position: relative; z-index: 0; }
:root[data-layout="herbier"] .tab[aria-current="page"]::before { content: ""; position: absolute; inset: 4px 6px; z-index: -1; border-radius: 18px 4px 18px 4px; background: var(--accent-soft); }
:root[data-layout="herbier"] .nav-btn[aria-current="page"] { border-radius: 18px 4px 18px 4px; background: var(--accent-soft); color: var(--accent); }
:root[data-layout="herbier"] .fab { border-radius: 30px 8px 30px 8px; }

/* ---------- Forêt vivante : paysage dessiné (lune le soir), formes de feuilles, courbes de niveau ---------- */
:root[data-layout="foret"] {
  --paper: #EEF1E6; --sheet: #FAFBF6; --sheet-2: #F1F4EA; --ink: #233023; --ink-2: #3F4C3D; --muted: #4F5D4C; --line: #D3DCCB;
  --accent: #36602D; --accent-ink: #FFFFFF; --accent-soft: #E0E9D5;
  --fv-s1: #B6D6DF; --fv-s2: #E2EDE6; --fv-s3: #F5EDD9; --fv-sun: #F2C46D; --fv-glow: rgba(242,196,109,.30); --fv-crescent: transparent; --fv-night: 0;
  --fv-far: #A3BDB9; --fv-mid: #7A9F74; --fv-pine: #3B5F33; --fv-topo: rgba(68,112,58,.10); --fv-sky-ink: #1D2A20; --fv-sky-muted: #3A4A3F;
  --f-display: "Fraunces", Georgia, serif; --f-hand: var(--f-display); --r: 18px; --r-sm: 10px; --shadow: none;
  --marker: var(--accent-soft); --on-marker: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root[data-layout="foret"]:not([data-theme="light"]) {
    --paper: #10170F; --sheet: #19221A; --sheet-2: #1F2A20; --ink: #ECEFE4; --ink-2: #C7CEBC; --muted: #B1B9A7; --line: #2C3A2B;
    --accent: #8DBA6B; --accent-ink: #0F160F; --accent-soft: #243024;
    --fv-s1: #132033; --fv-s2: #2F4557; --fv-s3: #5E6F72; --fv-sun: #F1E7C4; --fv-glow: rgba(241,231,196,.16); --fv-crescent: #203348; --fv-night: 1;
    --fv-far: #283B45; --fv-mid: #1C2C22; --fv-pine: #0B130C; --fv-topo: rgba(141,186,107,.10); --fv-sky-ink: #F4F2EA; --fv-sky-muted: #CBD4D2;
  }
}
:root[data-layout="foret"][data-theme="dark"] {
  --paper: #10170F; --sheet: #19221A; --sheet-2: #1F2A20; --ink: #ECEFE4; --ink-2: #C7CEBC; --muted: #B1B9A7; --line: #2C3A2B;
  --accent: #8DBA6B; --accent-ink: #0F160F; --accent-soft: #243024;
  --fv-s1: #132033; --fv-s2: #2F4557; --fv-s3: #5E6F72; --fv-sun: #F1E7C4; --fv-glow: rgba(241,231,196,.16); --fv-crescent: #203348; --fv-night: 1;
  --fv-far: #283B45; --fv-mid: #1C2C22; --fv-pine: #0B130C; --fv-topo: rgba(141,186,107,.10); --fv-sky-ink: #F4F2EA; --fv-sky-muted: #CBD4D2;
}
:root[data-layout="foret"] body { background-color: var(--paper); background-image: repeating-radial-gradient(ellipse at 85% 80%, transparent 0 21px, var(--fv-topo) 21px 22.5px); background-attachment: fixed; }
:root[data-layout="foret"] :is(.card, .ess, .ftile, .note-card) { border-color: var(--line); }
/* Téléphone : le bandeau va d'un bord à l'autre, le paysage derrière le texte (il est dessiné pour cette largeur,
   avec le soleil ou la lune en haut à droite) ; le prochain rendez-vous chevauche les collines. */
:root[data-layout="foret"] .hero.compact { position: relative; isolation: isolate; overflow: hidden; min-height: 236px; margin: -14px -16px 0; padding: 18px 96px 70px 18px; color: var(--fv-sky-ink); }
:root[data-layout="foret"] .hero-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
/* Écran large (V1.20.1) : étiré sur toute la largeur, le dessin grossissait jusqu'à passer derrière la date. Il garde
   ses proportions, à droite, entier, et se fond à gauche dans un ciel du même dégradé (même hauteur, donc sans
   raccord visible) ; le texte reste dans le ciel, à gauche. */
@media (min-width: 601px) {
  :root[data-layout="foret"] .hero.compact {
    min-height: 170px; margin: 0 0 14px; padding: 22px 24px; border-radius: 18px;
    background: linear-gradient(180deg, var(--fv-s1), var(--fv-s2) 65%, var(--fv-s3));
  }
  :root[data-layout="foret"] .hero.compact > :is(.hello, .hero-sub) { max-width: min(60%, calc(100% - 280px)); overflow-wrap: anywhere; }
  :root[data-layout="foret"] .hero-art {
    inset: 0 0 0 auto; width: auto; height: 100%; aspect-ratio: 3 / 2;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%); mask-image: linear-gradient(90deg, transparent, #000 34%);
  }
}
.hero-art.land .s1 { stop-color: var(--fv-s1); }
.hero-art.land .s2 { stop-color: var(--fv-s2); }
.hero-art.land .s3 { stop-color: var(--fv-s3); }
.hero-art.land .stars { fill: #F1EEDD; opacity: var(--fv-night); }
.hero-art.land .glow { fill: var(--fv-glow); }
.hero-art.land .sun { fill: var(--fv-sun); }
.hero-art.land .crescent { fill: var(--fv-crescent); }
.hero-art.land .far { fill: var(--fv-far); }
.hero-art.land .mid { fill: var(--fv-mid); }
.hero-art.land .pines { fill: var(--fv-pine); }
.hero-art.land .near { fill: var(--paper); }
:root[data-layout="foret"] .hello .hand { font: italic 400 .95rem var(--f-display); color: var(--fv-sky-muted); }
:root[data-layout="foret"] .hello b { font: 600 1.95rem/1.08 var(--f-display); letter-spacing: -.02em; }
:root[data-layout="foret"] .hero.compact .hero-sub { margin-top: 6px; color: var(--fv-sky-muted); }
:root[data-layout="foret"] .hero-sub b { color: var(--fv-sky-ink); }
:root[data-layout="foret"] .home-appt { position: relative; z-index: 1; margin: -46px 0 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 28px 10px 28px 10px; background: var(--sheet); color: var(--ink); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
@media (min-width: 601px) { :root[data-layout="foret"] .home-appt { margin: 0 0 12px; box-shadow: 0 6px 18px rgba(0,0,0,.10); } } /* écran large : sous le bandeau, sans le chevaucher */
:root[data-layout="foret"] .home-appt:not(.add-appt) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
:root[data-layout="foret"] .home-appt :is(.eyebrow, b, small) { grid-column: 1; }
:root[data-layout="foret"] .home-appt .eyebrow { color: var(--accent); }
:root[data-layout="foret"] .home-appt b { font: 600 1.2rem var(--f-display); }
:root[data-layout="foret"] .home-appt time { grid-column: 2; grid-row: 1 / span 3; font: 400 1.9rem/1 var(--f-display); letter-spacing: -.03em; color: var(--accent); }
:root[data-layout="foret"] .today-tasks { border-radius: 10px 28px 10px 28px; }
:root[data-layout="foret"] .card-head h2 { font: 600 1.25rem var(--f-display); }
:root[data-layout="foret"] .check { border: 2px solid var(--accent); border-radius: 3px 18px 3px 18px; }
:root[data-layout="foret"] .task.done .check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
:root[data-layout="foret"] .task.done .task-title { text-decoration-color: var(--accent); }
:root[data-layout="foret"] .quick input { border-radius: 22px 8px 22px 8px; background: var(--accent-soft); }
:root[data-layout="foret"] .quick .btn { border-radius: 22px 8px 22px 8px; }
:root[data-layout="foret"] .home-shortcuts button { border-radius: 28px 10px 28px 10px; }
:root[data-layout="foret"] .tab { position: relative; z-index: 0; }
:root[data-layout="foret"] .tab[aria-current="page"] { color: var(--accent-ink); }
:root[data-layout="foret"] .tab[aria-current="page"]::before { content: ""; position: absolute; inset: 4px 6px; z-index: -1; border-radius: 20px 6px 20px 6px; background: var(--accent); }
:root[data-layout="foret"] .nav-btn[aria-current="page"] { border-radius: 20px 6px 20px 6px; background: var(--accent); color: var(--accent-ink); }
:root[data-layout="foret"] .fab { border-radius: 50% 50% 50% 12px; }

/* ---------- Papeterie florale : couronne de roses, ruban, double filet, titres élégants ---------- */
:root[data-layout="floral"] {
  --paper: #FBF3F4; --sheet: #FFFFFF; --sheet-2: #FBF0F2; --ink: #3A2A30; --ink-2: #5A4850; --muted: #6E5A62; --line: #EED8DE;
  --accent: #A23B5F; --accent-ink: #FFFFFF; --accent-soft: #F8E3E9; --fl-rose: #B8456C; --fl-petal: rgba(184,69,108,.14); --fl-stem: #6F8A63; --fl-leaf: rgba(111,138,99,.14);
  --f-display: "Cormorant Garamond", Georgia, serif; --f-hand: var(--f-display); --r: 18px; --r-sm: 12px; --shadow: none;
  --marker: var(--accent-soft); --on-marker: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root[data-layout="floral"]:not([data-theme="light"]) {
    --paper: #1A1216; --sheet: #241A1F; --sheet-2: #2B1F25; --ink: #F5E9EE; --ink-2: #DCCAD2; --muted: #CDB8C1; --line: #43303A;
    --accent: #E79AB4; --accent-ink: #1A1216; --accent-soft: #3A2630; --fl-rose: #E79AB4; --fl-petal: rgba(231,154,180,.24); --fl-stem: #9DB08F; --fl-leaf: rgba(157,176,143,.18);
  }
}
:root[data-layout="floral"][data-theme="dark"] {
  --paper: #1A1216; --sheet: #241A1F; --sheet-2: #2B1F25; --ink: #F5E9EE; --ink-2: #DCCAD2; --muted: #CDB8C1; --line: #43303A;
  --accent: #E79AB4; --accent-ink: #1A1216; --accent-soft: #3A2630; --fl-rose: #E79AB4; --fl-petal: rgba(231,154,180,.24); --fl-stem: #9DB08F; --fl-leaf: rgba(157,176,143,.18);
}
:root[data-layout="floral"] body { background: var(--paper); }
:root[data-layout="floral"] :is(.card, .ess, .ftile, .note-card, .home-shortcuts button) { border-color: var(--line); }
:root[data-layout="floral"] .hero.compact { position: relative; overflow: hidden; min-height: 170px; margin: 0 0 8px; padding: 20px 132px 18px 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--sheet); }
:root[data-layout="floral"] .hero.compact::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); border-radius: 17px; pointer-events: none; }
:root[data-layout="floral"] .hello .hand { font: italic 500 1.05rem var(--f-display); color: var(--muted); }
:root[data-layout="floral"] .hello b { font: 600 2.1rem/1.02 var(--f-display); }
:root[data-layout="floral"] .hero.compact .hero-sub { margin-top: 10px; }
:root[data-layout="floral"] .hero-art { position: absolute; right: -4px; top: 6px; width: 136px; height: 160px; }
.hero-art.flor .stem { fill: none; stroke: var(--fl-stem); stroke-width: 1.6; stroke-linecap: round; }
.hero-art.flor .leaves { fill: var(--fl-leaf); stroke: var(--fl-stem); stroke-width: 1.2; stroke-linejoin: round; }
.hero-art.flor .rose circle { fill: var(--fl-petal); stroke: var(--fl-rose); stroke-width: 1.4; }
.hero-art.flor .rose path { fill: none; stroke: var(--fl-rose); stroke-width: 1.4; }
.hero-art.flor .buds { fill: var(--fl-rose); }
:root[data-layout="floral"] .home-appt { position: relative; margin-top: 18px; padding: 24px 16px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--sheet); color: var(--ink); overflow: visible; }
:root[data-layout="floral"] .home-appt:not(.add-appt) { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 12px; }
:root[data-layout="floral"] .home-appt .eyebrow { position: absolute; left: -6px; top: -12px; padding: 5px 22px 5px 14px; background: var(--fl-rose); color: var(--accent-ink); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); }
:root[data-layout="floral"] .home-appt :is(b, small) { grid-column: 1; }
:root[data-layout="floral"] .home-appt b { font: italic 600 1.5rem/1.1 var(--f-display); }
:root[data-layout="floral"] .home-appt time { grid-column: 2; grid-row: 1 / span 2; font: italic 500 2.4rem/1 var(--f-display); color: var(--accent); }
:root[data-layout="floral"] .card-head h2 { font: 600 1.4rem var(--f-display); }
:root[data-layout="floral"] .today-tasks .card-head { padding-bottom: 12px; background: radial-gradient(circle, var(--fl-rose) 1.3px, transparent 1.8px) 0 100% / 12px 8px repeat-x; }
:root[data-layout="floral"] .check { border: 1.5px solid var(--fl-rose); border-radius: 50%; }
:root[data-layout="floral"] .task.done .check { background: var(--fl-rose); border-color: var(--fl-rose); color: var(--accent-ink); }
:root[data-layout="floral"] .task.done .task-title { text-decoration-color: var(--fl-rose); }
:root:is([data-layout="floral"], [data-layout="aquarelle"]) .today-tasks .task.done { position: relative; }
:root[data-layout="floral"] .today-tasks .task.done:not(:has(.task-time:not(:empty)))::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: var(--fl-rose); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.5' r='4'/%3E%3Ccircle cx='17.2' cy='10.3' r='4'/%3E%3Ccircle cx='15.2' cy='16.5' r='4'/%3E%3Ccircle cx='8.8' cy='16.5' r='4'/%3E%3Ccircle cx='6.8' cy='10.3' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.5' r='4'/%3E%3Ccircle cx='17.2' cy='10.3' r='4'/%3E%3Ccircle cx='15.2' cy='16.5' r='4'/%3E%3Ccircle cx='8.8' cy='16.5' r='4'/%3E%3Ccircle cx='6.8' cy='10.3' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-layout="floral"] .quick input { border-radius: 22px; background: var(--accent-soft); }
:root[data-layout="floral"] .quick .btn { border-radius: 22px; }
:root[data-layout="floral"] .tab { position: relative; z-index: 0; }
:root[data-layout="floral"] .tab[aria-current="page"]::before { content: ""; position: absolute; inset: 4px 6px; z-index: -1; border-radius: 16px; background: var(--accent-soft); }
:root[data-layout="floral"] .nav-btn[aria-current="page"] { border-radius: 16px; background: var(--accent-soft); color: var(--accent); }
:root[data-layout="floral"] .fab { border-radius: 50%; }

/* ---------- Aquarelle : taches de couleur, écriture manuscrite, carte postale avec timbre ---------- */
:root[data-layout="aquarelle"] {
  --paper: #FFF9F7; --sheet: #FFFFFF; --sheet-2: #FBF3F7; --ink: #3B2F3F; --ink-2: #57495B; --muted: #6C5F70; --line: #F0E3EA;
  --accent: #8E3A80; --accent-ink: #FFFFFF; --accent-soft: #F6E3F1;
  --aq-w1: rgba(240,170,200,.40); --aq-w2: rgba(190,180,245,.45); --aq-w3: rgba(250,200,160,.45); --aq-w2s: #B9B0F2; --aq-shadow: rgba(120,70,110,.12); --aq-track: #F3E6EE;
  --f-display: "Playfair Display", Georgia, serif; --f-hand: "Dancing Script", "Segoe Script", cursive; --r: 20px; --r-sm: 12px;
  --shadow: 0 10px 28px var(--aq-shadow); --marker: var(--accent-soft); --on-marker: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root[data-layout="aquarelle"]:not([data-theme="light"]) {
    --paper: #15121C; --sheet: #221C2C; --sheet-2: #282133; --ink: #F3EEF7; --ink-2: #D8CFE2; --muted: #C3B9CF; --line: #3A3047;
    --accent: #D9A1D8; --accent-ink: #15121C; --accent-soft: #352A40;
    --aq-w1: rgba(217,161,216,.22); --aq-w2: rgba(160,170,240,.26); --aq-w3: rgba(247,186,150,.20); --aq-w2s: #9FA8EE; --aq-shadow: rgba(0,0,0,.35); --aq-track: #2E2638;
  }
}
:root[data-layout="aquarelle"][data-theme="dark"] {
  --paper: #15121C; --sheet: #221C2C; --sheet-2: #282133; --ink: #F3EEF7; --ink-2: #D8CFE2; --muted: #C3B9CF; --line: #3A3047;
  --accent: #D9A1D8; --accent-ink: #15121C; --accent-soft: #352A40;
  --aq-w1: rgba(217,161,216,.22); --aq-w2: rgba(160,170,240,.26); --aq-w3: rgba(247,186,150,.20); --aq-w2s: #9FA8EE; --aq-shadow: rgba(0,0,0,.35); --aq-track: #2E2638;
}
:root[data-layout="aquarelle"] body {
  background-color: var(--paper); background-attachment: fixed;
  background-image: radial-gradient(130px 110px at 85% 8%, var(--aq-w1), transparent 70%), radial-gradient(150px 120px at 15% 26%, var(--aq-w2), transparent 72%),
    radial-gradient(170px 120px at 88% 62%, var(--aq-w3), transparent 72%), radial-gradient(140px 120px at 8% 84%, var(--aq-w1), transparent 70%);
}
:root[data-layout="aquarelle"] :is(.card, .ess, .ftile, .note-card, .home-shortcuts button) { border-color: transparent; }
:root[data-layout="aquarelle"] .hero.compact { margin: 0 0 12px; padding: 4px 4px 0; }
:root[data-layout="aquarelle"] .hello .hand { font: 600 2.1rem/1.1 var(--f-hand); color: var(--accent); }
:root[data-layout="aquarelle"] .hello b { font: 500 1.95rem/1.1 var(--f-display); letter-spacing: -.01em; }
:root[data-layout="aquarelle"] .hero.compact .hero-sub { margin-top: 6px; }
:root[data-layout="aquarelle"] .day-gauge { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
:root[data-layout="aquarelle"] .dg-label { display: none; }
:root[data-layout="aquarelle"] .dg-bar { width: 150px; height: 12px; border-radius: 8px; background: var(--aq-track); overflow: hidden; }
:root[data-layout="aquarelle"] .dg-bar i { border-radius: 8px; background: linear-gradient(90deg, var(--aq-w2s), var(--accent)); }
:root[data-layout="aquarelle"] .dg-count { font-size: .8rem; color: var(--muted); }
:root[data-layout="aquarelle"] .home-appt { position: relative; margin-bottom: 14px; padding: 16px 104px 14px 16px; border-radius: 6px; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); transform: rotate(-1deg); }
:root[data-layout="aquarelle"] .home-appt:not(.add-appt)::after { content: ""; position: absolute; right: 16px; top: 50%; width: 66px; height: 80px; margin-top: -40px; border: 2px dashed var(--accent); border-radius: 4px; background: var(--aq-w1); }
:root[data-layout="aquarelle"] .home-appt:not(.add-appt)::before {
  content: ""; position: absolute; z-index: 1; right: 29px; top: 50%; width: 40px; height: 40px; margin-top: -20px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.5' r='4'/%3E%3Ccircle cx='17.2' cy='10.3' r='4'/%3E%3Ccircle cx='15.2' cy='16.5' r='4'/%3E%3Ccircle cx='8.8' cy='16.5' r='4'/%3E%3Ccircle cx='6.8' cy='10.3' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.5' r='4'/%3E%3Ccircle cx='17.2' cy='10.3' r='4'/%3E%3Ccircle cx='15.2' cy='16.5' r='4'/%3E%3Ccircle cx='8.8' cy='16.5' r='4'/%3E%3Ccircle cx='6.8' cy='10.3' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-layout="aquarelle"] .home-appt.add-appt { padding-right: 16px; }
:root[data-layout="aquarelle"] .home-appt .eyebrow { color: var(--accent); }
:root[data-layout="aquarelle"] .home-appt b { font: 600 1.3rem var(--f-display); }
:root[data-layout="aquarelle"] .home-appt time { font: italic 500 1.9rem/1 var(--f-display); color: var(--accent); }
:root[data-layout="aquarelle"] .card-head h2 { font: 600 1.25rem var(--f-display); }
:root[data-layout="aquarelle"] .check { border: 1.5px solid var(--accent); border-radius: 50%; background: var(--aq-w1); }
:root[data-layout="aquarelle"] .task.done .check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
:root[data-layout="aquarelle"] .task.done .task-title { justify-self: start; text-decoration: none; background: linear-gradient(transparent 35%, var(--aq-w2) 35% 85%, transparent 85%); }
:root[data-layout="aquarelle"] .quick input { border-radius: 22px; background: var(--sheet-2); }
:root[data-layout="aquarelle"] .quick .btn { border-radius: 22px; }
:root[data-layout="aquarelle"] .tabbar { border-top: 0; box-shadow: 0 -6px 20px var(--aq-shadow); }
:root[data-layout="aquarelle"] .tab { position: relative; z-index: 0; }
:root[data-layout="aquarelle"] .tab[aria-current="page"]::before { content: ""; position: absolute; inset: 4px 6px; z-index: -1; border-radius: 16px; background: var(--aq-w1); }
:root[data-layout="aquarelle"] .nav-btn[aria-current="page"] { border-radius: 16px; background: var(--aq-w1); color: var(--accent); }
:root[data-layout="aquarelle"] .fab { border-radius: 50%; background: linear-gradient(135deg, var(--aq-w2s), var(--accent)); }

/* ---------- Aperçus dans Réglages → Apparence (couleurs claires du style, quel que soit le mode) ---------- */
.interface-preview.manga-planche { border: 2px solid #111114; border-radius: 0; color: #111114; background: #FFFFFF repeating-conic-gradient(from 0deg at 78% 50%, rgba(17,17,20,.5) 0deg 1deg, transparent 1deg 7deg); }
.interface-preview.manga-planche > span { font-family: "Bangers", Impact, sans-serif; font-size: 1.15rem; letter-spacing: .04em; }
.interface-preview.manga-planche i { height: 5px; border-radius: 0; border-left: 0; background: #111114; }
.interface-preview.herbier { border-color: #DCD3BF; border-radius: 14px 4px 14px 4px; color: #3D5A2B; background: #F2EDE1; }
.interface-preview.herbier > span { font: italic 600 1rem "Fraunces", Georgia, serif; }
.interface-preview.herbier i { background: #E1E8D3; border-left-color: #4A6A35; }
.interface-preview.foret { border-color: #7A9F74; border-radius: 4px 18px 4px 18px; color: #1D2A20; background: linear-gradient(180deg, #B6D6DF, #E2EDE6 52%, #7A9F74 53%, #3B5F33); }
.interface-preview.foret > span { font: 600 1rem "Fraunces", Georgia, serif; }
.interface-preview.foret i { background: rgba(255,255,255,.75); border-left-color: #36602D; }
.interface-preview.floral { border-color: #EED8DE; color: #A23B5F; background: #FBF3F4 radial-gradient(circle at 86% 28%, #E9A3BC 0 7px, transparent 7.5px); }
.interface-preview.floral > span { font: italic 600 1.15rem "Cormorant Garamond", Georgia, serif; }
.interface-preview.floral i { background: #F8E3E9; border-left-color: #B8456C; }
.interface-preview.aquarelle { border-color: #F0E3EA; color: #8E3A80; background: #FFF9F7 radial-gradient(44px 32px at 80% 25%, rgba(240,170,200,.6), transparent 70%), radial-gradient(44px 32px at 20% 85%, rgba(190,180,245,.6), transparent 70%); }
.interface-preview.aquarelle > span { font: 600 1.3rem "Dancing Script", cursive; }
.interface-preview.aquarelle i { border-left: 0; background: rgba(160,66,143,.18); }

/* V1.18.6 : partout ailleurs les étiquettes sont en casse de phrase ; dans le style Manga planche, les capitales sont le lettrage
   de bande dessinée, elles restent. */
:root[data-layout="manga-planche"] :is(.eyebrow, .sub-label, .aisle, .tx-day, .recents .lab, .rd-cols) { text-transform: uppercase; letter-spacing: .05em; }