/* ============================================================================
   Carnet d'humeur quotidien — "Warm Journal" / Floating Paper.
   A warm, personal diary feel (cream page, white floating pages, soft colored
   shadows, Fraunces headings, tactile pills) — NOT the old yellow skeuomorphic
   paper, NOT a stark card grid, NOT a flat clinical form.
   Scoped to #view-carnet. Light-mode = warm cream; dark-mode = forest dark.
   ========================================================================= */

/* ---- Warm tokens (remap legacy --carnet-* onto the journal palette) ------ */
#view-carnet {
    --j-bg:     #fdfaf6;   /* soft sand/cream page */
    --j-card:   #ffffff;   /* white floating page  */
    --j-accent: #faf3e0;   /* warm cream fills (inputs, idle pills) */
    --j-peach:  #ffb5a7;   /* warmth / gratitude / hover */
    --j-sage:   var(--primary-light, #d8f3dc);   /* brand-light bridge → palette */
    --j-ink:    var(--brand-bar-from, #1b4332);   /* deep "ink" → palette deep */
    --j-ink-soft: var(--text-secondary, #52796f);
    --j-shadow: 0 12px 32px -8px rgba(var(--primary-rgb, 45, 106, 79), .14);

    /* keep inline styles in index.html on-palette */
    --carnet-ink:      var(--j-ink);
    --carnet-ink-soft: var(--j-ink-soft);
    --carnet-card:     var(--j-card);
    --carnet-card-edge: var(--j-sage);
    --carnet-accent:   var(--primary);
    --carnet-rule:     var(--j-sage);
    --carnet-link:     var(--primary);

    position: relative;
    max-width: 620px !important;
    padding: 8px 16px 110px !important;
    color: var(--j-ink);
    font-family: var(--ff-body);
    font-size: 15px;
    line-height: 1.55;
}

/* Full-bleed warm "paper" page behind the carnet. The exact tint is the
   per-day pastel chosen via the palette (set by BenzoCarnet on the root as
   --carnet-paper-bg); falls back to the default cream. Light mode only. */
#main-content:has(#view-carnet.active) { background: var(--carnet-paper-bg, #fdfaf6); }
[data-theme="dark"] #main-content:has(#view-carnet.active) { background: var(--bg); }

/* ---- Per-day pastel paper-colour palette -------------------------------- */
/* A horizontal colour row sitting below the daily stamp picker, on every
   screen size (titled "Couleur du jour"). */
.carnet-palette-block { text-align: center; margin: 2px 0 22px; }
.carnet-palette-title {
    margin: 0 0 8px;
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--j-ink-soft);
}
.carnet-palette {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 18px;
}
.carnet-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(45, 106, 79, .2);
    cursor: pointer;
    padding: 0;
    transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s;
}
.carnet-swatch:hover { transform: scale(1.18); }
.carnet-swatch.active {
    box-shadow: 0 0 0 2px var(--primary), 0 2px 6px rgba(45, 106, 79, .28);
    transform: scale(1.12);
}
[data-theme="dark"] .carnet-palette-block { display: none; } /* paper tint is light-mode only */

/* ---- "Mon empreinte du jour" — the daily stamp picker ------------------- */
.carnet-stamps { margin: 2px 0 20px; text-align: center; }
.carnet-stamps-title {
    margin: 0 0 10px;
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--j-ink-soft);
}
/* Balanced 6×2 grid (12 stamps = two even rows of 6) — no orphan row. */
.carnet-stamp-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-items: center;
    gap: 8px;
    max-width: 340px;
    margin: 0 auto;
}
@media (max-width: 400px) {
    .carnet-stamp-row { grid-template-columns: repeat(4, 1fr); max-width: 240px; } /* 4×3 on tiny screens */
}
.carnet-stamp {
    width: 44px; height: 44px;
    border: 0;
    border-radius: 14px;
    background: var(--j-accent);
    font-size: 1.45rem; line-height: 1;
    cursor: pointer;
    opacity: .72;
    transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s, opacity .16s, background .16s;
}
.carnet-stamp:hover { opacity: 1; transform: translateY(-2px); background: rgba(255,181,167,.32); }
.carnet-stamp.selected {
    opacity: 1;
    transform: translateY(-4px);
    background: #fff;
    box-shadow: 0 0 0 2px var(--primary), 0 6px 16px rgba(45,106,79,.22);
}
.carnet-stamp-label {
    margin-top: 10px;
    min-height: 1.2em;
    font-family: var(--ff-display);
    font-style: italic;
    font-size: .95rem;
    color: var(--primary);
}

/* ---- Calendar cell: big stamp + soft paper tint ------------------------- */
.cal-day { position: relative; }
.cal-day .cal-day-num {
    position: absolute;
    top: 4px; left: 7px;
    font-size: 11px;
    color: var(--text-secondary);
    z-index: 1;
}
.cal-day-stamp {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20px, 4.4vw, 30px);
    line-height: 1;
    pointer-events: none;
}
/* each stamped day gets a faint, hand-stamped rotation */
.cal-day:nth-child(7n+1) .cal-day-stamp { transform: rotate(-3deg); }
.cal-day:nth-child(7n+3) .cal-day-stamp { transform: rotate(2.5deg); }
.cal-day:nth-child(7n+5) .cal-day-stamp { transform: rotate(-1.5deg); }
.cal-day:nth-child(7n)   .cal-day-stamp { transform: rotate(3deg); }
.cal-dose-dot {
    position: absolute;
    bottom: 5px; right: 5px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--primary);
    z-index: 1;
}

/* ---- Site colour theme swatches (Settings) ------------------------------ */
.theme-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.theme-swatch {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 3px solid var(--card, #fff);
    box-shadow: 0 1px 5px rgba(0,0,0,.18);
    cursor: pointer;
    padding: 0;
    transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s;
}
.theme-swatch:hover { transform: scale(1.12); }
.theme-swatch.active {
    box-shadow: 0 0 0 3px var(--primary), 0 2px 6px rgba(0,0,0,.22);
    transform: scale(1.08);
}

/* ---- Wrapper ------------------------------------------------------------ */
.carnet-sheet { position: relative; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.carnet-deco-wheat { display: none !important; }

/* ---- Hero: "opening the book" ------------------------------------------- */
.carnet-datebar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 14px 0 0;
}
.carnet-datebar button {
    background: transparent;
    border: 0;
    color: var(--j-ink-soft);
    width: 34px; height: 34px;
    border-radius: 50%;
    font-size: 1.5rem; line-height: 1;
    cursor: pointer; flex-shrink: 0;
    opacity: .65;
    transition: opacity .15s, background .15s, transform .15s;
}
.carnet-datebar button:hover { opacity: 1; background: var(--j-accent); transform: translateY(-1px); }

.carnet-date-heading {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: clamp(1.9rem, 6vw, 2.5rem);
    line-height: 1.1;
    margin: 0;
    color: var(--j-ink);
    text-align: center;
    min-width: 0; flex: 1;
    letter-spacing: -.02em;
    background: none; padding: 0 4px;
}
.carnet-subtitle {
    text-align: center;
    margin: 4px 0 26px;
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--j-ink-soft);
    letter-spacing: 0;
    text-transform: none;
}

/* ---- Floating pages (cards) --------------------------------------------- */
.carnet-grid { display: flex; flex-direction: column; gap: 18px; }
.carnet-card--wide { /* no-op in single column */ }

.carnet-card {
    background: var(--j-card);
    border: 0;
    border-radius: 20px;
    padding: 22px 24px 24px;
    box-shadow: var(--j-shadow);
}
.carnet-card-title {
    margin: 0 0 16px;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1.32rem;
    color: var(--j-ink);
    letter-spacing: -.015em;
    text-transform: none;
    border: 0; padding: 0;
}

/* ---- Inputs: warm cream, peach focus glow, italic editorial placeholder -- */
#view-carnet input[type="text"],
#view-carnet input[type="number"],
#view-carnet textarea {
    width: 100%;
    background: var(--j-accent);
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: var(--ff-body);
    font-size: 1rem;
    color: var(--j-ink);
    padding: 11px 14px;
    outline: none;
    resize: vertical;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
#view-carnet input::placeholder,
#view-carnet textarea::placeholder {
    color: var(--j-ink-soft);
    opacity: .7;
    font-family: var(--ff-display);
    font-style: italic;
}
#view-carnet input[type="text"]:focus,
#view-carnet input[type="number"]:focus,
#view-carnet textarea:focus {
    background: #fff;
    border-color: var(--j-peach);
    box-shadow: 0 0 0 4px rgba(255, 181, 167, .28);
}
#view-carnet textarea { background-image: none; line-height: 1.6; min-height: 104px; }

/* The actual writing surfaces (day notes + gratitude) get a handwritten feel —
   used ONLY here, never on labels/UI, per the journal spec. Caveat is compact,
   so bump the size for legibility. */
#carnet-notes,
#carnet-gratitude,
.carnet-grat-input {
    font-family: 'Caveat', var(--ff-display);
    font-size: 1.3rem;
    line-height: 1.5;
}
#carnet-notes::placeholder,
#carnet-gratitude::placeholder,
.carnet-grat-input::placeholder { font-family: 'Caveat', var(--ff-display); font-style: normal; }

/* ---- Tactile scale pills (stress / energy) ------------------------------ */
.carnet-scale { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.carnet-scale button {
    background: var(--j-accent);
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    padding: 6px 9px;
    font-size: 1.3rem;
    line-height: 1;
    opacity: .55;
    filter: grayscale(.4);
    transition: transform .14s cubic-bezier(.34,1.56,.64,1), opacity .14s, filter .14s, background .14s, box-shadow .14s;
}
.carnet-scale button:hover { transform: translateY(-2px); opacity: .85; background: rgba(255,181,167,.35); }
.carnet-scale button.filled {
    opacity: 1; filter: none;
    background: var(--j-sage);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(45,106,79,.18);
}
.carnet-scale--water button { font-size: 1.55rem; }

/* ---- Mood faces — large tactile pills that lift + glow ------------------ */
.carnet-mood-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
.carnet-mood-label {
    flex: 0 0 86px;
    font-family: var(--ff-display);
    font-weight: 600;
    font-style: italic;
    color: var(--j-ink-soft);
    text-transform: none;
    font-size: .95rem;
    letter-spacing: 0;
}
.carnet-mood { display: flex; gap: 8px; }
.carnet-mood button {
    background: var(--j-accent);
    border: 0;
    border-radius: 16px;
    width: 46px; height: 46px;
    font-size: 1.55rem; line-height: 1;
    cursor: pointer;
    opacity: .5;
    filter: grayscale(.4);
    transition: transform .16s cubic-bezier(.34,1.56,.64,1), opacity .16s, filter .16s, background .16s, box-shadow .16s;
    padding: 0;
}
.carnet-mood button:hover { transform: translateY(-2px); opacity: .85; background: rgba(255,181,167,.35); }
.carnet-mood button.selected {
    opacity: 1; filter: none;
    background: var(--j-sage);
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 6px 16px rgba(45,106,79,.22);
}

/* ---- Mon humeur du jour — signature 1-10 ramp (rouge → vert forêt) ------ */
.carnet-daymood {
    display: flex;
    gap: 5px;
    align-items: flex-end;
    justify-content: space-between;
}
.carnet-daymood button {
    flex: 1;
    height: 38px;
    border: 0;
    border-radius: 9px;
    background: var(--m, var(--j-accent));
    opacity: .32;
    cursor: pointer;
    padding: 0;
    transition: opacity .14s, transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s, height .16s;
}
.carnet-daymood button:hover { opacity: .7; transform: translateY(-2px); }
.carnet-daymood button.filled { opacity: .9; }
.carnet-daymood button.selected {
    opacity: 1;
    height: 52px;
    box-shadow: 0 0 0 3px var(--j-card), 0 0 0 5px var(--m), 0 6px 14px rgba(0,0,0,.18);
    transform: translateY(-2px);
}
.carnet-daymood-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 14px;
}
.carnet-daymood-end {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: .9rem;
    color: var(--j-ink-soft);
}
.carnet-daymood-val {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--primary);
}

/* Detail-by-moment — secondary, tucked into a quiet disclosure. */
.carnet-moments { margin-top: 20px; border-top: 1px solid var(--j-sage); }
.carnet-moments > summary {
    list-style: none; cursor: pointer;
    font-family: var(--ff-body); font-size: .9rem; font-weight: 600;
    color: var(--j-ink-soft); padding: 12px 0 4px;
}
.carnet-moments > summary::-webkit-details-marker { display: none; }
.carnet-moments > summary::after { content: ' +'; font-weight: 400; }
.carnet-moments[open] > summary::after { content: ' \2212'; }

/* Sub-sections inside the "Mes petits suivis" drawer */
.carnet-sub { margin: 0 0 20px; }
.carnet-sub:last-child { margin-bottom: 0; }
.carnet-sub-title {
    margin: 0 0 10px;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--j-ink);
}

/* ---- Reading order: feeling first, logistics last (flex column) --------- */
#carnet-mood-card      { order: 1; }
#carnet-daytype-card   { order: 2; }
#carnet-notes-card     { order: 3; }
#carnet-gratitude-card { order: 4; }
#carnet-sleep-card     { order: 5; }
#carnet-stress-card    { order: 6; }
#carnet-energy-card    { order: 7; }
#carnet-emotions-card  { order: 8; }
#carnet-extras-card    { order: 9; }
#carnet-alcohol-card   { order: 10; }
#carnet-meds-card      { order: 11; }
#carnet-symptoms-card  { order: 12; }
#carnet-taper-card     { order: 13; }
#carnet-ciwa-card      { order: 14; }

/* ---- Wide screens: use the horizontal space — 2-column carnet ----------
   Single column stays the default (calm reading) up to 1024px. Beyond, the
   page widens to 1000px and lays out as a 2-col grid. `order` still applies
   in grid, so we redefine a desktop-specific order: hero on top (full width),
   quick metrics + the two writing zones paired side-by-side, long/collapsible
   sections full width. align-items:start keeps short cards their natural height
   (a little "blanc tournant" is fine — it keeps the journal feel). */
@media (min-width: 1024px) {
    #view-carnet { max-width: 1000px !important; }
    .carnet-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
        gap: 18px;
    }
    #carnet-mood-card      { order: 1; }
    #carnet-daytype-card   { order: 2; }
    #carnet-sleep-card     { order: 3; }
    #carnet-stress-card    { order: 4; }
    #carnet-energy-card    { order: 5; }
    #carnet-notes-card     { order: 6; }
    #carnet-gratitude-card { order: 7; }
    #carnet-emotions-card  { order: 8; }
    #carnet-extras-card    { order: 9; }
    #carnet-alcohol-card   { order: 10; }
    #carnet-meds-card      { order: 11; }
    #carnet-symptoms-card  { order: 12; }
    #carnet-taper-card     { order: 13; }
    #carnet-ciwa-card      { order: 14; }
    /* Full width: the hero mood + every long / collapsible section. */
    #carnet-mood-card,
    #carnet-emotions-card,
    #carnet-extras-card,
    #carnet-alcohol-card,
    #carnet-meds-card,
    #carnet-symptoms-card,
    #carnet-taper-card,
    #carnet-ciwa-card { grid-column: 1 / -1; }
    /* Half width pairs: quick metrics + the two writing zones. */
    #carnet-daytype-card,
    #carnet-sleep-card,
    #carnet-stress-card,
    #carnet-energy-card,
    #carnet-notes-card,
    #carnet-gratitude-card { grid-column: span 1; }
}

/* ---- Emotions — soft cream chips --------------------------------------- */
.carnet-emo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
@media (max-width: 460px) { .carnet-emo-grid { grid-template-columns: 1fr; } }
.carnet-emo {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; font-size: 1rem; color: var(--j-ink);
    background: var(--j-accent);
    border-radius: 12px;
    padding: 9px 12px;
    transition: background .14s, transform .14s;
}
.carnet-emo:hover { background: rgba(255,181,167,.3); transform: translateY(-1px); }
.carnet-emo input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--primary);
    cursor: pointer; flex-shrink: 0;
}
.carnet-emo input[type="text"] {
    flex: 1; border: 0; background: transparent;
    border-radius: 0; font-size: .95rem; padding: 0;
}
.carnet-emo input[type="text"]:focus { box-shadow: none; background: transparent; }

/* ---- Todo list --------------------------------------------------------- */
.carnet-todo-list { list-style: none; margin: 0 0 8px; padding: 0; }
.carnet-todo { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.carnet-todo input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.carnet-todo-text { flex: 1; font-size: 1rem; color: var(--j-ink); }
.carnet-todo.done .carnet-todo-text { text-decoration: line-through; color: var(--j-ink-soft); opacity: .7; }
.carnet-todo-del { background: transparent; border: none; color: var(--j-ink-soft); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px; opacity: .55; transition: opacity .12s, color .12s, background .12s; }
.carnet-todo-del:hover { opacity: 1; color: var(--destructive); background: rgba(198,40,40,.08); }

/* ---- Day type — airy "Fenêtre" vs grounded "Vague" --------------------- */
.carnet-daytype { display: flex; gap: 8px; flex-wrap: wrap; }
.carnet-daytype button {
    flex: 1; min-width: 76px;
    background: var(--j-accent);
    border: 0;
    border-radius: 999px;
    padding: 11px 12px;
    font-family: var(--ff-body);
    font-size: .92rem; font-weight: 600;
    color: var(--j-ink-soft);
    cursor: pointer;
    transition: background .14s, color .14s, transform .14s, box-shadow .14s;
}
.carnet-daytype button:hover { transform: translateY(-1px); }
.carnet-daytype button.selected { background: var(--j-sage); color: var(--j-ink); box-shadow: 0 4px 12px rgba(45,106,79,.16); }
.carnet-daytype button[data-daytype="window"].selected { background: var(--j-ink); color: #fff; }
.carnet-daytype button[data-daytype="wave"].selected { background: var(--j-peach); color: #5a2018; box-shadow: 0 4px 12px rgba(255,181,167,.4); }

/* ---- Gratitude — personal, editorial ----------------------------------- */
.carnet-grat-input {
    display: block; width: 100%;
    background: var(--j-accent);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 11px 14px;
    margin: 8px 0;
    font: inherit; font-size: .98rem;
    color: var(--j-ink);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.carnet-grat-input::placeholder { color: var(--j-peach); opacity: .85; font-family: var(--ff-display); font-style: italic; }
.carnet-grat-input:focus { outline: none; background: #fff; border-color: var(--j-peach); box-shadow: 0 0 0 4px rgba(255,181,167,.28); }

/* ---- Alcohol toggle ---------------------------------------------------- */
.carnet-alcohol-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }

/* ---- Status / autosave indicator --------------------------------------- */
.carnet-status { text-align: center; margin: 18px 0 0; font-size: .85rem; font-style: italic; font-family: var(--ff-display); color: var(--j-ink-soft); min-height: 1.2em; transition: opacity .25s ease; }
.carnet-status.ok { color: var(--success); font-style: normal; font-weight: 600; }

/* ---- Day context cards (meds / symptoms / taper) ----------------------- */
.carnet-day-context > details { border: 0; background: transparent; padding: 0; }
.carnet-day-context > details > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0;
    font-family: var(--ff-display); font-weight: 600; font-size: 1.15rem;
    color: var(--j-ink);
}
.carnet-day-context > details > summary::-webkit-details-marker { display: none; }
.carnet-day-context > details > summary::after { content: '+'; margin-left: auto; font-size: 22px; font-weight: 400; line-height: 1; color: var(--j-ink-soft); opacity: .8; }
.carnet-day-context > details[open] > summary::after { content: '\2212'; }
.carnet-day-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); opacity: .85; }
.carnet-day-title { flex: 1 1 auto; }
.carnet-day-count { font-family: var(--ff-body); font-size: 12px; font-weight: 500; color: var(--j-ink-soft); }
.carnet-day-body { padding: 10px 0 4px; font-family: var(--ff-body); font-size: 15px; line-height: 1.55; color: var(--j-ink); }
.carnet-day-empty { margin: 4px 0; font-style: italic; font-family: var(--ff-display); color: var(--j-ink-soft); }
.carnet-day-list { list-style: none; margin: 0 0 8px; padding: 0; }
.carnet-day-list li { padding: 7px 0; border-bottom: 1px solid var(--j-sage); }
.carnet-day-list li:last-child { border-bottom: 0; }
.carnet-day-slot { font-size: 12px; color: var(--j-ink-soft); font-family: var(--ff-body); text-transform: uppercase; letter-spacing: .06em; padding: 1px 8px; border: 1px solid var(--j-sage); border-radius: 999px; margin-left: 4px; white-space: nowrap; }
.carnet-day-symcat { margin: 6px 0; line-height: 1.7; }
.carnet-day-cat { text-transform: uppercase; font-size: 11px; letter-spacing: .1em; font-family: var(--ff-body); font-weight: 700; color: var(--j-ink-soft); margin-right: 6px; }
.carnet-day-sym { display: inline-block; margin: 2px 6px 2px 0; padding: 3px 11px; background: var(--j-accent); border: 0; border-radius: 999px; white-space: nowrap; color: var(--j-ink); }
.carnet-day-sym em { font-style: normal; font-size: 12px; color: var(--j-ink-soft); margin-left: 4px; }
.carnet-day-link { display: inline-block; margin-top: 6px; font-family: var(--ff-body); font-size: 12px; font-weight: 600; text-decoration: none; color: var(--primary); border-bottom: 1px solid currentColor; }
.carnet-day-link:hover { opacity: .8; }

/* ========================================================================
   DARK MODE — keep the forest-dark surfaces (no cream); warm accents stay.
   ===================================================================== */
[data-theme="dark"] #view-carnet {
    --j-bg:     #0b1f0b;
    --j-card:   #1b2e1b;
    --j-accent: rgba(255,255,255,.05);
    --j-ink:    var(--primary, #d8f3dc);
    --j-ink-soft: var(--text-secondary, #95d5b2);
    --j-sage:   rgba(var(--primary-rgb, 45,106,79),.35);
    --j-shadow: 0 10px 28px -8px rgba(0,0,0,.5);
    color: var(--j-ink);
}
[data-theme="dark"] #view-carnet input[type="text"]:focus,
[data-theme="dark"] #view-carnet input[type="number"]:focus,
[data-theme="dark"] #view-carnet textarea:focus,
[data-theme="dark"] .carnet-grat-input:focus { background: #243524; }
[data-theme="dark"] .carnet-daytype button[data-daytype="wave"].selected { color: #2a0f0a; }

/* ---- Sidebar emphasis for Carnet + Calendrier (desktop nav pair) -------- */
@media (min-width: 768px) {
    .desktop-nav-carnet, .desktop-nav-calendar, .desktop-nav-community {
        font-weight: 700 !important;
        margin: 4px 0 !important;
        padding: 13px 16px !important;
        border-radius: 12px !important;
        box-shadow: var(--shadow);
    }
    .desktop-nav-carnet { margin-top: 4px !important; }
    .desktop-nav-calendar { margin-bottom: 12px !important; }
    .desktop-nav-carnet { background: var(--primary-light) !important; color: var(--primary) !important; border: 1px solid var(--border); }
    .desktop-nav-carnet:hover { background: var(--accent) !important; transform: translateY(-1px); }
    .desktop-nav-calendar { background: linear-gradient(135deg, #dbeefb 0%, #b1d6ee 100%) !important; color: #0f2c40 !important; border: 1px solid #8ec0db; }
    .desktop-nav-calendar:hover { background: linear-gradient(135deg, #c9e5f7 0%, #98c8e6 100%) !important; transform: translateY(-1px); }
    [data-theme="dark"] .desktop-nav-calendar { background: linear-gradient(135deg, #6aa3c7 0%, #538bb0 100%) !important; color: #06151f !important; border-color: #4a7d9d; }
    .desktop-nav-community { margin: 4px 0 12px !important; background: linear-gradient(135deg, #d8f3dc 0%, #95d5b2 100%) !important; color: #14361f !important; border: 1px solid #74c498; }
    .desktop-nav-community:hover { background: linear-gradient(135deg, #c2ecca 0%, #7ec79c 100%) !important; transform: translateY(-1px); }
    [data-theme="dark"] .desktop-nav-community { background: linear-gradient(135deg, #5fa97c 0%, #4a8e64 100%) !important; color: #06190d !important; border-color: #3f7c56; }
    .desktop-nav-community-shortcut { font-weight: 700 !important; margin: 4px 0 !important; padding: 11px 16px !important; border-radius: 12px !important; box-shadow: var(--shadow); background: linear-gradient(135deg, #dbeefb 0%, #b1d6ee 100%) !important; color: #0f2c40 !important; border: 1px solid #8ec0db; }
    .desktop-nav-community-shortcut:hover { background: linear-gradient(135deg, #c9e5f7 0%, #98c8e6 100%) !important; transform: translateY(-1px); }
    [data-theme="dark"] .desktop-nav-community-shortcut { background: linear-gradient(135deg, #6aa3c7 0%, #538bb0 100%) !important; color: #06151f !important; border-color: #4a7d9d; }
}

/* ---- Carnet sections always expanded (no +/- collapse) ------------------ */
#view-carnet details > summary {
    cursor: default;
    pointer-events: none;
    list-style: none;
}
#view-carnet details > summary::-webkit-details-marker { display: none; }
#view-carnet details > summary::marker { content: ""; }

/* ---- Local daily media (webcam photo + audio note) ---------------------- */
.carnet-media-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.carnet-cam-live { margin-top: 10px; }
.carnet-cam-live video {
    width: 100%; max-width: 320px; border-radius: 10px; display: block;
    margin: 0 auto 8px; background: #000;
}
.carnet-rec-live {
    display: flex; align-items: center; gap: 10px; margin-top: 10px;
    padding: 8px 12px; border: 1px solid var(--j-rule, rgba(28,42,34,.12)); border-radius: 10px;
}
.carnet-rec-dot {
    width: 12px; height: 12px; border-radius: 50%; background: var(--destructive, #c62828);
    animation: carnet-rec-pulse 1s infinite;
}
@keyframes carnet-rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
#carnet-rec-timer { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 42px; }
.carnet-media-gallery {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px;
}
.carnet-media-item { position: relative; }
.carnet-media-item img {
    width: 96px; height: 96px; object-fit: cover; border-radius: 10px; display: block;
}
.carnet-media-item audio { width: 220px; max-width: 60vw; }
.carnet-media-del {
    position: absolute; top: -6px; right: -6px;
    width: 22px; height: 22px; border-radius: 50%; border: none;
    background: var(--destructive, #c62828); color: #fff; cursor: pointer;
    font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.carnet-media-item audio + .carnet-media-del { top: -8px; right: -2px; }