/* Police Noto Sans (comme jardinetmaison.fr), chargée dans includes/head_pwa.php (non bloquant) */

/* ══════════════════════════════════════════
   Variables
   ══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Charte Jardin et Maison : vert pomme #89ad32 et bleu pétrole #003d56.
       Les noms --emerald-* / --forest-* / --mint-* sont conservés (utilisés partout) mais portent ces couleurs. */
    --brand-green:  #89ad32;
    --brand-petrol: #003d56;
    --emerald-500: #89ad32;
    --emerald-600: #5c7a1b;   /* boutons à texte blanc (contraste ≥ 4,5) */
    --emerald-700: #486014;
    --forest-800:  #0a5273;
    --forest-900:  #003d56;
    --mint-50:     #f5f8ea;
    --mint-100:    #e9f1d0;
    --mint-200:    #d3e3a6;

    --bg-app:        #f7f8f2;
    --surface-card:  #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.82);
    --border-subtle: #e4e8d9;
    --border-input:  #dce1cf;
    --text-primary:  #13242c;
    --text-secondary:#46575e;
    --text-muted:    #7f9097;
    --red-600:       #dc2626;
    --red-50:        #fef2f2;

    --shadow-sm:  0 1px 2px rgba(0, 40, 56, 0.05), 0 1px 3px rgba(0, 40, 56, 0.04);
    --shadow-md:  0 4px 16px -4px rgba(0, 61, 86, 0.10), 0 2px 4px rgba(0,0,0,0.03);
    --shadow-lg:  0 18px 40px -8px rgba(0, 61, 86, 0.22), 0 4px 12px rgba(0,0,0,0.05);
    --ring:       0 0 0 4px rgba(137, 173, 50, 0.25);

    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  22px;
    --radius-pill: 9999px;
    --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --bottom-nav-h: 0px;
    --side-nav-w: 232px;
    --sticky-top: 0px; /* décalage des éléments collants en haut d'écran */
}

/* ══════════════════════════════════════════
   Base
   ══════════════════════════════════════════ */
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--bg-app);
    background-image:
        radial-gradient(at 0% 0%, rgba(137, 173, 50, 0.10) 0, transparent 45%),
        radial-gradient(at 100% 100%, rgba(0, 61, 86, 0.05) 0, transparent 45%);
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--emerald-700); }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid rgba(0, 61, 86, 0.55); outline-offset: 2px; border-radius: 6px; }

.container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 20px 24px calc(80px + var(--bottom-nav-h));
}
/* Formulaires : en-tête et menu à la même largeur que les autres pages, contenu centré */
.container-narrow > :not(.topbar):not(.nav-wrap):not(.toast):not(script) {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* ══════════════════════════════════════════
   En-tête
   ══════════════════════════════════════════ */
.topbar[hidden] { display: none; }
.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 12px 10px 14px;
    margin-bottom: 14px;
    background: var(--surface-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.brand-title {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.brand-icon {
    font-size: 1.4rem;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--mint-100), var(--mint-200));
    border-radius: var(--radius-md);
}
.brand-name, h1 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--forest-900);
    letter-spacing: -0.3px;
}

.meteo-chip {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    font-size: 0.82rem;
}
.meteo-chip-icon { font-size: 1.5rem; line-height: 1; }
.meteo-chip-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.meteo-chip-text strong { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meteo-chip-text span { color: var(--text-secondary); }
.meteo-loading { color: var(--text-muted); font-size: 0.85rem; }

.user-bar { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.user-avatar {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--forest-900);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
}
.user-name { font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); }
.logout-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 8px 10px;
    border-radius: var(--radius-pill);
    transition: background var(--transition), color var(--transition);
}
.logout-link:hover { background: var(--red-50); color: var(--red-600); }

/* ── Navigation principale ──
   ≥ 900px : barre latérale fixe (toutes les rubriques) + menu « Ajouter »
   < 900px : barre d'onglets en bas (Aujourd'hui, Agenda, +, Jardin, Carnet) + feuilles */
.nav-group-title {
    padding: 14px 10px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.nav-badge {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--emerald-600);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

/* Barre latérale (ordinateur) */
.side-nav { display: none; }
@media (min-width: 900px) {
    body:has(.side-nav) { padding-left: var(--side-nav-w); }
    .topbar .brand-title { display: none; }
    .tab-bar { display: none; }
    .side-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        position: fixed;
        top: 0; bottom: 0; left: 0;
        z-index: 900;
        width: var(--side-nav-w);
        padding: 16px 12px;
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.92);
        border-right: 1px solid var(--border-subtle);
    }
}
/* Marque : bandeau bleu pétrole en haut de la barre latérale */
.brand-logo { display: block; flex-shrink: 0; border-radius: 12px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-by { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1px; color: #b7cf6a; white-space: nowrap; }
.side-brand {
    margin: -16px -12px 12px;
    padding: 18px 16px 16px;
    gap: 12px;
    background: var(--brand-petrol);
}
.side-brand .brand-logo { width: 44px; height: 44px; }
.side-brand .brand-name { font-size: 1.25rem; color: #fff; letter-spacing: -0.2px; }

/* Bandeau de marque mobile / tablette */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--brand-petrol);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.app-header-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.app-header .brand-logo { width: 40px; height: 40px; }
.app-header .brand-name { font-size: 1.15rem; color: #fff; letter-spacing: -0.2px; }
.app-header-site { flex-shrink: 0; color: #d6e5a6; font-size: 0.75rem; font-weight: 600; text-decoration: none; padding: 6px 4px; }
.app-header-site:hover { color: #fff; text-decoration: underline; }
@media (min-width: 900px) { .app-header { display: none; } }
.side-add {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 8px;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--emerald-600);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background var(--transition);
}
.side-add span { font-size: 1.25rem; line-height: 1; }
.side-add:hover, .side-add[aria-expanded="true"] { background: var(--emerald-700); }
.side-nav a:not(.side-brand) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background var(--transition), color var(--transition);
}
.side-nav a:not(.side-brand):hover { background: var(--mint-50); color: var(--forest-900); }
.side-nav a.active { background: var(--forest-900); color: #fff; }
.side-nav a.active:hover { background: var(--forest-800); color: #fff; }
.side-nav a.active .nav-badge { background: #fff; color: var(--forest-900); }
/* Rubriques réservées aux membres, vues par un visiteur */
.nav-lock { margin-left: auto; font-size: 0.72rem; opacity: 0.55; line-height: 1; }
.nav-sheet-grid a { position: relative; }
.nav-sheet-grid .nav-lock { position: absolute; top: 6px; right: 8px; margin: 0; }
.tab-icon .nav-lock { position: absolute; top: -2px; right: 4px; margin: 0; }
.side-nav a.nav-signup { font-weight: 800; color: var(--forest-800); }
.side-icon { width: 22px; text-align: center; font-size: 1rem; line-height: 1; }
.side-foot {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}
.side-nav a.nav-logout:hover, .nav-sheet .nav-logout:hover { background: var(--red-50); color: var(--red-600); }

/* Panneaux (Jardin, Carnet, Ajout rapide) - sur ordinateur, seul l'ajout rapide s'ouvre, à droite de la barre latérale */
.nav-backdrop, .nav-sheet { display: none; }
.nav-sheet:not([hidden]) {
    display: block;
    position: fixed;
    top: 64px;
    left: calc(var(--side-nav-w) - 8px);
    z-index: 1002;
    width: 320px;
    padding: 4px 10px 10px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: menu-in .16s ease-out;
}
.nav-sheet .nav-group-title { padding: 10px 4px 8px; }
.nav-sheet-handle { display: none; }
.nav-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nav-sheet-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
    text-align: center;
    transition: background var(--transition), border-color var(--transition);
}
.nav-sheet-grid a:hover { background: var(--mint-50); border-color: var(--mint-200); }
.nav-sheet-grid a.active { background: var(--mint-100); border-color: var(--mint-200); color: var(--forest-900); }
.nav-sheet-icon {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    background: var(--bg-app);
    font-size: 1.4rem;
}
.nav-sheet-grid a.active .nav-sheet-icon { background: #fff; }
.nav-sheet-foot {
    display: flex;
    gap: 4px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}
.nav-sheet-foot a {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 8px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
}
.nav-sheet-foot a.active { background: var(--mint-100); color: var(--forest-900); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }

/* Barre d'onglets en bas d'écran (mobile et tablette) */
@media (max-width: 899px) {
    :root { --bottom-nav-h: 64px; }
    .tab-bar {
        display: flex;
        align-items: stretch;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1003;
        height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
        padding: 4px 4px env(safe-area-inset-bottom);
        border-top: 1px solid var(--border-subtle);
        background: rgba(255,255,255,0.96);
        box-shadow: 0 -4px 20px rgba(0, 61, 86, 0.08);
    }
    .tab-bar a, .tab-bar button {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 0 2px;
        border: 0;
        background: none;
        color: var(--text-secondary);
        text-decoration: none;
        font: inherit;
        font-weight: 600;
        font-size: 0.68rem;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Indicateur actif : pastille derrière l'icône */
    .tab-icon {
        position: relative;
        display: inline-grid; place-items: center;
        width: 52px; height: 30px;
        border-radius: var(--radius-pill);
        font-size: 1.2rem;
        line-height: 1;
        transition: background var(--transition);
    }
    .tab-icon .nav-badge { position: absolute; top: -4px; right: 2px; height: 18px; min-width: 18px; padding: 0 5px; font-size: 0.65rem; }
    .tab-bar .active, .tab-bar [aria-expanded="true"] { color: var(--forest-900); font-weight: 800; }
    .tab-bar .active .tab-icon, .tab-bar [aria-expanded="true"] .tab-icon { background: var(--mint-100); }
    .tab-bar a:active .tab-icon, .tab-bar button:active .tab-icon { background: var(--mint-50); }

    /* Bouton central « + » : ajout rapide */
    .tab-bar .tab-add { flex: 0 0 72px; }
    .tab-add span {
        display: grid; place-items: center;
        width: 48px; height: 48px;
        border-radius: 50%;
        background: var(--emerald-600);
        color: #fff;
        font-size: 1.9rem;
        font-weight: 400;
        line-height: 1;
        box-shadow: 0 6px 18px -4px rgba(72, 96, 20, 0.50);
        transition: transform var(--transition), background var(--transition);
    }
    .tab-add:active span { transform: scale(0.94); }
    .tab-add[aria-expanded="true"] span { transform: rotate(45deg); background: var(--forest-900); }

    /* Feuilles qui montent depuis le bas */
    .nav-backdrop:not([hidden]) {
        display: block;
        position: fixed; inset: 0;
        z-index: 1001;
        background: rgba(0, 30, 44, 0.40);
        animation: fade-in .2s ease-out;
    }
    .nav-sheet:not([hidden]) {
        top: auto; left: 0; right: 0;
        bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
        width: auto;
        max-height: 70vh;
        overflow-y: auto;
        padding: 8px 14px 14px;
        border: 0;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: 0 -12px 32px rgba(0, 61, 86, 0.16);
        animation: sheet-up .22s cubic-bezier(0.2, 0.8, 0.3, 1);
    }
    .nav-sheet-handle {
        display: block;
        width: 40px; height: 4px;
        margin: 2px auto 2px;
        border-radius: var(--radius-pill);
        background: var(--border-input);
    }
    .nav-sheet-grid { grid-template-columns: repeat(4, 1fr); }
    .quick-sheet .nav-sheet-grid { grid-template-columns: repeat(3, 1fr); }
    html.nav-open { overflow: hidden; }
}

/* ══════════════════════════════════════════
   Toast / alertes
   ══════════════════════════════════════════ */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + var(--bottom-nav-h));
    transform: translateX(-50%);
    z-index: 2000;
    background: var(--forest-900);
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 12px 20px 12px 16px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    display: flex; align-items: center; gap: 10px;
    max-width: calc(100% - 32px);
    cursor: pointer;
    animation: toast-in .25s ease-out;
    transition: opacity .3s, transform .3s;
}
.toast::before { content: '✓'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--emerald-500); font-size: 0.8rem; flex-shrink: 0; }
.toast-error { background: #991b1b; }
.toast-error::before { content: '!'; background: #ef4444; }
.toast-hide { opacity: 0; transform: translate(-50%, 10px); pointer-events: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }

.erreur, .succes {
    padding: 13px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 0.92rem;
    font-weight: 600;
}
.erreur { background: var(--red-50); color: #b91c1c; border: 1px solid #fecaca; }
.succes { background: var(--mint-50); color: var(--forest-800); border: 1px solid var(--mint-200); }
.succes a { color: var(--forest-900); font-weight: 800; }

/* ══════════════════════════════════════════
   Boutons
   ══════════════════════════════════════════ */
.btn-group { display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--emerald-600);
    color: #fff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(72, 96, 20, 0.30);
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition), color var(--transition);
}
.btn:hover { background: var(--emerald-700); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px -4px rgba(72, 96, 20, 0.40); }
.btn:active { transform: translateY(0); }

.btn-secondary { background: var(--surface-card); color: var(--forest-800); border-color: var(--border-subtle); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--mint-50); color: var(--forest-900); border-color: var(--mint-200); box-shadow: var(--shadow-sm); }

.btn-ghost { background: transparent; color: var(--text-secondary); box-shadow: none; }
.btn-ghost:hover { background: rgba(0,0,0,0.04); color: var(--text-primary); box-shadow: none; }

.btn-danger-ghost { background: transparent; color: var(--red-600); box-shadow: none; }
.btn-danger-ghost:hover { background: var(--red-50); color: var(--red-600); box-shadow: none; }

.btn-sm { min-height: 34px; padding: 6px 14px; font-size: 0.82rem; }
.btn-block { width: 100%; }

.btn-annuler {
    background: none; border: 0; cursor: pointer; font: inherit;
    color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 600;
    padding: 10px 14px; border-radius: var(--radius-pill);
}
.btn-annuler:hover { color: var(--text-primary); background: rgba(0,0,0,0.04); }

.link-strong { font-weight: 700; color: var(--emerald-700); text-decoration: none; font-size: 0.88rem; }
.link-strong:hover { text-decoration: underline; }
.link-muted { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.link-muted:hover { color: var(--emerald-700); }

/* ══════════════════════════════════════════
   Titres & en-têtes de page
   ══════════════════════════════════════════ */
h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--forest-900);
    letter-spacing: -0.4px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.page-head { margin-bottom: 20px; }
.page-head h2 { margin: 4px 0 0; }
.page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.page-sub { color: var(--text-secondary); font-size: 0.92rem; margin-top: 2px; }
.back-link { display: inline-block; color: var(--text-secondary); font-size: 0.88rem; font-weight: 600; text-decoration: none; padding: 4px 0; }
.back-link:hover { color: var(--emerald-700); }

.search-input {
    min-height: 42px;
    padding: 9px 16px 9px 38px;
    border: 1.5px solid var(--border-input);
    border-radius: var(--radius-pill);
    font: inherit; font-size: 0.9rem;
    background: var(--surface-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a978f' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat 14px center;
    width: 220px;
}
.search-input:focus { outline: none; border-color: var(--emerald-500); box-shadow: var(--ring); }

/* ══════════════════════════════════════════
   Tableau de bord
   ══════════════════════════════════════════ */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.hero-title { font-size: 1.6rem; margin: 0; }
.hero-sub { color: var(--text-secondary); font-size: 0.95rem; }

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}
.stat {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.stat:hover { border-color: var(--mint-200); box-shadow: var(--shadow-md); }
.stat-value { font-size: 1.8rem; font-weight: 800; color: var(--forest-900); line-height: 1.1; letter-spacing: -0.5px; }
.stat-label { font-size: 0.82rem; color: var(--text-secondary); font-weight: 600; }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-chip {
    --c: var(--forest-900);
    border: 1px solid var(--border-subtle);
    background: var(--surface-card);
    color: var(--text-secondary);
    font: inherit; font-size: 0.84rem; font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--transition);
}
.filter-chip:hover { border-color: var(--c); color: var(--text-primary); }
.filter-chip.active { background: var(--c); border-color: var(--c); color: #fff; }

.event-group { margin-bottom: 28px; scroll-margin-top: 16px; }
.group-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
summary.group-title { cursor: pointer; list-style: none; padding: 6px 0; user-select: none; }
summary.group-title::-webkit-details-marker { display: none; }
summary.group-title::before { content: '▸'; font-size: 0.9rem; transition: transform var(--transition); }
details[open] > summary.group-title::before { transform: rotate(90deg); }
.group-count {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0;
    background: var(--mint-100); color: var(--forest-800);
    padding: 1px 8px; border-radius: var(--radius-pill);
}

/* ── Cartes d'événements ── */
.events-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.event-item {
    --c: var(--emerald-500);
    position: relative;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 14px 14px 18px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition);
}
.event-item::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--c);
}
.event-item:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--c) 30%, var(--border-subtle)); }
/* Case « fait » */
.check {
    flex-shrink: 0;
    align-self: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--c) 55%, #cfd8d2);
    background: var(--surface-card);
    cursor: pointer;
    display: grid; place-items: center;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.check::after {
    content: '';
    width: 6px; height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: translateY(-1px) rotate(45deg) scale(0);
    transition: transform .15s ease-out;
}
.check:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, white); }
.check:hover::after { border-color: var(--c); transform: translateY(-1px) rotate(45deg) scale(1); }
.check[aria-pressed="true"] { background: var(--c); border-color: var(--c); }
.check[aria-pressed="true"]::after { border-color: #fff; transform: translateY(-1px) rotate(45deg) scale(1); }
.check:active { transform: scale(0.9); }
.check:disabled { cursor: progress; }

.event-item.is-done { background: #fbfcfb; }
.event-item.is-done::before { opacity: 0.35; }
.event-item.is-done .event-title { text-decoration: line-through; text-decoration-color: var(--text-muted); color: var(--text-muted); }
.event-item.is-done .date-badge,
.event-item.is-done .event-desc,
.event-item.is-done .thumbs { opacity: 0.6; }

.event-recur { font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.event-rel.late { color: #c2410c; }
.group-title.group-late { color: #c2410c; }
.group-late .group-count { background: #ffedd5; color: #c2410c; }
.stat-alert { border-color: #fed7aa; background: #fff7ed; }
.stat-alert .stat-value { color: #c2410c; }
.group-more { display: inline-block; margin-top: 10px; }

.date-badge {
    flex-shrink: 0;
    width: 56px;
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 0;
    background: var(--bg-app);
    border-radius: var(--radius-md);
    line-height: 1.1;
}
.date-badge-wd { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.4px; }
.date-badge-d  { font-size: 1.35rem; font-weight: 800; color: var(--forest-900); }
.date-badge-m  { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); }

.event-info { flex: 1; min-width: 0; }
.event-title {
    display: inline-block;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}
.event-title:hover { color: var(--emerald-700); }
.event-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.event-rel { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.event-desc { color: var(--text-secondary); font-size: 0.9rem; margin-top: 8px; overflow-wrap: anywhere; }

.badge {
    --c: var(--emerald-500);
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--c) 13%, white);
    color: color-mix(in srgb, var(--c) 70%, black);
    white-space: nowrap;
}

.plante-link-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.78rem; font-weight: 600;
    color: var(--forest-800);
    background: var(--mint-50);
    border: 1px solid var(--mint-200);
    padding: 1px 10px;
    border-radius: var(--radius-pill);
    text-decoration: none;
}
.plante-link-tag:hover { background: var(--mint-100); }

.event-actions { display: flex; gap: 4px; flex-shrink: 0; }
.action-icon {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 700;
    transition: background var(--transition), color var(--transition);
}
.action-icon:hover { background: var(--mint-100); color: var(--forest-800); }
.action-delete:hover { background: var(--red-50); color: var(--red-600); }
button.action-icon { border: 0; background: none; cursor: pointer; padding: 0; }
button.action-icon:hover { background: var(--mint-100); }
.event-actions { position: relative; }
.share-menu {
    position: absolute; top: 40px; right: 0; z-index: 20;
    min-width: 170px; padding: 6px;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--mint-100);
    border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.share-menu a, .share-menu button {
    padding: 9px 12px; border: 0; background: none; text-align: left;
    font: inherit; color: var(--text); text-decoration: none;
    border-radius: var(--radius-md); cursor: pointer;
}
.share-menu a:hover, .share-menu button:hover { background: var(--mint-100); }

/* ── Vignettes photo ── */
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.photo-thumb {
    display: block;
    width: 84px; height: 84px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    cursor: zoom-in;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.photo-thumb:hover img { transform: scale(1.06); }

/* ── États vides ── */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    background: var(--surface-card);
    border: 1.5px dashed var(--border-input);
    border-radius: var(--radius-xl);
}
.empty-icon { font-size: 2.6rem; margin-bottom: 8px; }
.empty-state h3 { font-size: 1.1rem; color: var(--forest-900); margin-bottom: 4px; }
.empty-state p { color: var(--text-secondary); margin-bottom: 18px; font-size: 0.92rem; }

.vide { color: var(--text-muted); text-align: center; padding: 32px 0; font-size: 0.95rem; }

/* ══════════════════════════════════════════
   Formulaires
   ══════════════════════════════════════════ */
.card-form {
    background: var(--surface-card);
    padding: 28px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}

label, .label {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 20px 0 7px;
}
.card-form > label:first-of-type,
.card-form > .form-row:first-of-type label,
.card-form > input[type=hidden] + label { margin-top: 0; }
.optional { font-weight: 500; color: var(--text-muted); font-size: 0.8rem; margin-left: 4px; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="search"], select, textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1.5px solid var(--border-input);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--surface-card);
    transition: border-color var(--transition), box-shadow var(--transition);
}
textarea { resize: vertical; min-height: 100px; }
input:hover, select:hover, textarea:hover { border-color: #c9d3cd; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--emerald-500); box-shadow: var(--ring); }
::placeholder { color: #a8b3ad; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-row input[type="number"] { width: 100%; }
.form-subtitle {
    margin: 28px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--forest-900);
}
.form-row-sub label { margin-top: 12px; }

input[type="number"] {
    min-height: 46px;
    padding: 10px 12px;
    border: 1.5px solid var(--border-input);
    border-radius: var(--radius-md);
    font: inherit; font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--surface-card);
}
.recurrence-perso { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.9rem; color: var(--text-secondary); }
.recurrence-perso input { width: 80px; }
.recurrence-perso select { flex: 1; }

.form-check-cell { display: flex; align-items: flex-end; }
.checkbox-line {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 1.5px solid var(--border-input);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
}
.checkbox-line:hover { border-color: #c9d3cd; }
.checkbox-line input { width: 18px; height: 18px; accent-color: var(--emerald-600); }
.checkbox-line:has(input:checked) { border-color: var(--mint-200); background: var(--mint-50); color: var(--forest-800); }

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}
.form-actions .spacer { flex: 1; }

/* Sélecteur de catégorie */
.cat-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip { margin: 0; cursor: pointer; }
.cat-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cat-chip span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--border-input);
    border-radius: var(--radius-pill);
    font-size: 0.86rem; font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface-card);
    transition: all var(--transition);
}
.cat-chip:hover span { border-color: var(--c); color: var(--text-primary); }
.cat-chip input:checked + span {
    border-color: var(--c);
    background: color-mix(in srgb, var(--c) 12%, white);
    color: color-mix(in srgb, var(--c) 70%, black);
    box-shadow: 0 0 0 1px var(--c) inset;
}
.cat-chip input:focus-visible + span { box-shadow: var(--ring); }

/* Zone de dépôt photos */
.dropzone {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 22px 16px;
    border: 2px dashed var(--border-input);
    border-radius: var(--radius-lg);
    background: var(--bg-app);
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    transition: all var(--transition);
}
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropzone:hover, .dropzone.drag-over { border-color: var(--emerald-500); background: var(--mint-50); color: var(--forest-800); }
.dropzone.has-files { border-style: solid; border-color: var(--mint-200); background: var(--mint-50); }
.dropzone-icon { font-size: 1.6rem; }
.photo-upload { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.photo-upload .btn { cursor: pointer; }
.dropzone-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dropzone-preview:empty { display: none; }
.dropzone-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); }

.thumbs-edit { margin: 0 0 12px; }
.thumb-wrap { position: relative; }
.thumb-delete {
    position: absolute; top: -6px; right: -6px;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--red-600); color: #fff;
    font-size: 15px; font-weight: 700; line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    border: 2px solid #fff;
}
.thumb-delete:hover { background: #b91c1c; }

.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: 0; background: none; cursor: pointer;
    border-radius: var(--radius-sm); font-size: 1rem;
}
.password-toggle:hover { background: var(--bg-app); }

/* ══════════════════════════════════════════
   Calendrier
   ══════════════════════════════════════════ */
.calendar-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.calendar-nav h2 { margin: 0; min-width: 190px; justify-content: center; font-size: 1.4rem; }
.cal-arrow {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    color: var(--forest-900);
    font-size: 1.4rem; font-weight: 700; line-height: 1;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.cal-arrow:hover { background: var(--forest-900); color: #fff; border-color: var(--forest-900); }
.cal-today {
    margin-left: auto;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--mint-100);
    color: var(--forest-800);
    font-weight: 700; font-size: 0.85rem;
    text-decoration: none;
}
.cal-today:hover { background: var(--mint-200); }
.calendar-hint { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 16px; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-header {
    text-align: center;
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    padding: 6px 0;
}
.calendar-day {
    position: relative;
    min-height: 108px;
    padding: 6px;
    background: var(--surface-card);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.calendar-day:not(.empty):hover { border-color: var(--mint-200); box-shadow: var(--shadow-md); }
.calendar-day:not(.empty):hover .day-number::after {
    content: '+'; position: absolute; right: 6px; bottom: 4px;
    font-size: 1.1rem; font-weight: 700; color: var(--emerald-600);
}
.calendar-day.empty { background: transparent; border-color: transparent; cursor: default; }
.calendar-day.past { background: #fafbfa; }
.calendar-day.past .day-num { color: var(--text-muted); }
.calendar-day.today { border-color: var(--emerald-500); background: var(--mint-50); }
.calendar-day.drag-over { background: var(--mint-100); border: 2px dashed var(--emerald-500); }

.day-number { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.day-num {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-weight: 700; font-size: 0.85rem;
    color: var(--text-primary);
}
.calendar-day.today .day-num { background: var(--emerald-600); color: #fff; font-weight: 800; }
.moon-info { font-size: 0.8rem; opacity: 0.75; cursor: help; }

.day-event {
    --c: var(--emerald-500);
    display: flex; align-items: center; gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 6px;
    margin-bottom: 3px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--c) 14%, white);
    color: color-mix(in srgb, var(--c) 65%, black);
    border-left: 3px solid var(--c);
    text-decoration: none;
    cursor: grab;
    transition: background var(--transition);
}
.day-event:hover { background: color-mix(in srgb, var(--c) 24%, white); }
.day-event.dragging { opacity: 0.4; }
.day-event.done { opacity: 0.5; }
.day-event.done .day-event-text { text-decoration: line-through; }
.day-panel-item.done { opacity: 0.55; text-decoration: line-through; }
.day-event-icon { flex-shrink: 0; font-size: 0.7rem; }
.day-event-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.day-panel {
    margin-top: 14px;
    padding: 16px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.day-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--forest-900); }
.day-panel-item {
    --c: var(--emerald-500);
    display: block;
    padding: 11px 14px;
    margin-bottom: 6px;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--c);
    background: color-mix(in srgb, var(--c) 10%, white);
    color: var(--text-primary);
    font-weight: 600; font-size: 0.92rem;
    text-decoration: none;
}
.day-panel-empty { color: var(--text-muted); font-size: 0.9rem; padding: 4px 0 8px; }
.day-panel-moon { font-size: 0.8rem; color: var(--text-secondary); margin-top: 8px; }
.calendar-day.selected { border-color: var(--forest-900); box-shadow: 0 0 0 1px var(--forest-900); }

.legend-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-top: 24px; }
.legend-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 16px 20px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    font-size: 0.84rem;
}
.legend-card strong { color: var(--forest-900); font-size: 0.9rem; margin-bottom: 2px; }
.legend-cats { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.legend-item { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.legend-dot { --c: #999; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }

/* ══════════════════════════════════════════
   Plantes
   ══════════════════════════════════════════ */
.plantes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

.plante-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.plante-card:hover { box-shadow: var(--shadow-md); border-color: var(--mint-200); }
.plante-card-main { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.plante-card-text { min-width: 0; }
.plante-card h3 { font-size: 1.05rem; font-weight: 800; color: var(--forest-900); line-height: 1.25; }
.plante-card-main:hover h3 { color: var(--emerald-700); }
.variete { display: block; font-size: 0.84rem; color: var(--text-muted); font-style: italic; }
.plante-card-meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; color: var(--text-secondary); }

.plante-avatar {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--mint-100), var(--mint-200));
    color: var(--forest-800);
    font-weight: 800; font-size: 1.15rem;
}
.plante-avatar-lg { width: 60px; height: 60px; font-size: 1.6rem; border-radius: var(--radius-lg); }

.plante-card .actions {
    display: flex; align-items: center; gap: 4px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}
.plante-card .actions .link-strong { flex: 1; }

.plante-header {
    padding: 24px;
    margin-bottom: 28px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}
.plante-header-top { display: flex; align-items: center; gap: 16px; }
.plante-header-text { flex: 1; min-width: 0; }
.plante-header h2 { margin: 0; font-size: 1.6rem; }
.plante-header .meta { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 16px; font-size: 0.88rem; color: var(--text-secondary); }
.plante-header .notes {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--bg-app);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    color: var(--text-secondary);
}

/* ══════════════════════════════════════════
   Journal
   ══════════════════════════════════════════ */
.journal-timeline { max-width: 760px; margin: 0 auto; }
.journal-month {
    position: sticky; top: var(--sticky-top); z-index: 2;
    font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-muted);
    padding: 10px 0;
    background: linear-gradient(var(--bg-app) 70%, transparent);
}
.journal-entry {
    --c: var(--emerald-500);
    position: relative;
    padding: 20px 22px;
    margin-bottom: 16px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.journal-entry::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.journal-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.journal-date { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.journal-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.12rem; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.journal-desc { font-size: 0.98rem; color: var(--text-secondary); line-height: 1.65; overflow-wrap: anywhere; }
.journal-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.journal-gallery .photo-thumb { width: 100%; height: 150px; }
.journal-gallery.single { grid-template-columns: 1fr; }
.journal-gallery.single .photo-thumb { height: auto; max-height: 420px; }
.journal-footer { margin-top: 12px; text-align: right; }

/* ══════════════════════════════════════════
   Visionneuse photo
   ══════════════════════════════════════════ */
.lightbox {
    position: fixed; inset: 0; z-index: 3000;
    display: none; align-items: center; justify-content: center;
    background: rgba(8, 20, 14, 0.9);
    padding: 24px;
}
.lightbox.open { display: flex; animation: fade-in .15s; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox button {
    position: absolute;
    width: 48px; height: 48px;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,0.12); color: #fff;
    font-size: 1.8rem; line-height: 1;
    cursor: pointer;
}
.lightbox button:hover { background: rgba(255,255,255,0.25); }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox.single .lightbox-prev, .lightbox.single .lightbox-next { display: none; }
@keyframes fade-in { from { opacity: 0; } }

/* ══════════════════════════════════════════
   Connexion / inscription
   ══════════════════════════════════════════ */
.auth-page { display: grid; place-items: center; padding: 24px 16px; }
.auth-container { width: 100%; max-width: 420px; }
.auth-header { text-align: center; margin-bottom: 24px; }
.auth-header .brand-logo { margin: 0 auto 14px; width: 72px; height: 72px; border-radius: 18px; box-shadow: var(--shadow-md); }
.auth-header h1 { font-size: 1.6rem; }
.auth-header p { color: var(--text-secondary); margin-top: 2px; }
.auth-page .btn-block { margin-top: 26px; min-height: 48px; font-size: 0.98rem; }
.oauth-sep { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--text-muted); font-size: 0.82rem; }
.oauth-sep::before, .oauth-sep::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }
.oauth-boutons { display: grid; gap: 10px; }
.btn-oauth {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 46px; padding: 10px 16px;
    border: 1.5px solid var(--border-input);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-primary);
    font-weight: 700; font-size: 0.92rem;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
}
.btn-oauth:hover { background: var(--mint-50); border-color: #c9d3cd; }
.btn-oauth-x { background: #000; border-color: #000; color: #fff; }
.btn-oauth-x:hover { background: #222; border-color: #222; }
.btn-oauth.is-lie { color: var(--emerald-700); border-style: dashed; cursor: default; }
.btn-oauth.is-lie:hover { background: var(--surface-card); }
.auth-footer { text-align: center; margin-top: 20px; font-size: 0.9rem; color: var(--text-secondary); }
.auth-footer a { color: var(--emerald-700); font-weight: 700; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════ */
/* ── Lien compte ── */
.user-link { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 3px 10px 3px 3px; border-radius: var(--radius-pill); transition: background var(--transition); }
.user-link:hover { background: var(--mint-50); }

/* ══════════════════════════════════════════
   Alertes météo
   ══════════════════════════════════════════ */
.meteo-previsions {
    margin-bottom: 14px;
    padding: 10px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}
.previsions-liste {
    display: grid;
    grid-template-columns: repeat(7, minmax(76px, 1fr));
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.prevision {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 4px;
    border-radius: var(--radius-lg);
    font-size: 0.8rem;
    text-align: center;
}
.prevision.is-today { background: var(--mint-50); }
.prevision-jour { font-weight: 700; color: var(--text-secondary); text-transform: capitalize; white-space: nowrap; }
.prevision-icon { font-size: 1.6rem; line-height: 1.2; }
.prevision-temp { display: flex; gap: 6px; }
.prevision-temp strong { color: var(--text-primary); }
.prevision-temp span { color: var(--text-muted); }
.prevision-pluie { min-height: 1.2em; color: #0e7490; font-size: 0.74rem; white-space: nowrap; }

.ciel-card { margin: 0 0 20px; }
.ciel-top { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; margin-bottom: 16px; }
.ciel-meteo #meteo-jour { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; }
.ciel-meteo #meteo-jour h3 { grid-column: 1 / -1; font-size: 1.15rem; }
.ciel-meteo-icon { grid-row: 2 / 5; font-size: 4.5rem; line-height: 1; }
.ciel-meteo #meteo-jour p { grid-column: 2; }
.ciel-meteo .ciel-vide { grid-column: 1 / -1; }
.ciel-meteo .ciel-desc { font-size: 1.05rem; }
.ciel-meteo .ciel-details { font-size: 0.95rem; }
.ciel-card .previsions-liste { grid-template-columns: repeat(7, minmax(88px, 1fr)); gap: 8px; }
.ciel-card .prevision { padding: 12px 6px; font-size: 0.9rem; }
.ciel-card .prevision-icon { font-size: 2.2rem; }
.ciel-card .prevision-pluie { font-size: 0.8rem; }
.ciel-card .prevision-meteo { min-height: 6em; }
.ciel-col h3 { font-size: 1.05rem; color: var(--forest-900); margin-bottom: 6px; }
.ciel-lune { padding-left: 20px; border-left: 1px solid var(--border-subtle); }
.ciel-lune .month-card-head { margin-bottom: 8px; }
.ciel-temp { font-size: 3.2rem; font-weight: 800; line-height: 1.1; color: var(--text-primary); }
.ciel-desc { color: var(--text-secondary); font-weight: 600; }
.ciel-details, .ciel-vide { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; }
.ciel-card .meteo-alertes { margin: 12px 0 0; gap: 6px; }
.ciel-card .meteo-alerte { padding: 8px 12px; gap: 10px; font-size: 0.82rem; }
.ciel-card .meteo-alerte strong { font-size: 0.86rem; }
.ciel-card .meteo-alerte-icon { font-size: 1.2rem; }
.ciel-card .previsions-liste { margin-bottom: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.prevision-meteo { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 4.6em; }
.prevision-lune { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--border-subtle); width: 100%; font-size: 0.78rem; color: var(--text-secondary); }
.prevision-lune.is-defav { color: #9a3412; }
.prevision-lune-icon { font-size: 1.3rem; line-height: 1.2; }
@media (max-width: 640px) {
    .ciel-top { grid-template-columns: 1fr; }
    .ciel-lune { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--border-subtle); }
}

.meteo-alertes { display: grid; gap: 8px; margin-bottom: 20px; }
.meteo-alerte {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid;
    font-size: 0.88rem;
}
.meteo-alerte strong { display: block; font-size: 0.94rem; }
.meteo-alerte span:not(.meteo-alerte-icon) { color: var(--text-secondary); }
.meteo-alerte-icon { font-size: 1.5rem; line-height: 1; }
.meteo-alerte-froid { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.meteo-alerte-chaud { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.meteo-alerte-pluie { background: #ecfeff; border-color: #a5f3fc; color: #155e75; }
.meteo-alerte-sec   { background: #fefce8; border-color: #fde68a; color: #854d0e; }
.meteo-alerte-vent  { background: #f5f3ff; border-color: #ddd6fe; color: #5b21b6; }

/* ══════════════════════════════════════════
   Ce mois-ci / calendrier des semis
   ══════════════════════════════════════════ */
.month-card {
    margin-top: 8px;
    padding: 20px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.month-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.month-card-head h3 { font-size: 1.05rem; color: var(--forest-900); }
.month-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.month-col-title { display: block; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); margin-bottom: 8px; }
.veg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.veg-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg-app);
    color: var(--text-primary);
    font-size: 0.82rem; font-weight: 600;
    text-decoration: none;
}
.veg-chip:hover { background: var(--mint-100); }

.sowing-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 12px; }
.sowing-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sowing-legend .lane { width: 18px; height: 6px; }

.sowing-table {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.sowing-row {
    display: grid;
    grid-template-columns: minmax(130px, 200px) 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
}
.sowing-head { border-bottom: 1px solid var(--border-subtle); background: var(--bg-app); position: sticky; top: 0; z-index: 1; }
.sowing-head .sowing-months span { font-size: 0.7rem; font-weight: 800; color: var(--text-muted); text-align: center; }
.sowing-head .sowing-months span.is-now { color: var(--forest-900); }
.sowing-item { border-bottom: 1px solid var(--border-subtle); }
.sowing-item:last-child { border-bottom: 0; }
.sowing-item > summary { list-style: none; cursor: pointer; }
.sowing-item > summary::-webkit-details-marker { display: none; }
.sowing-item > summary:hover { background: #fafcfb; }
.sowing-item[open] > summary { background: var(--mint-50); }
.sowing-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; min-width: 0; }
.sowing-name > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sowing-icon { font-size: 1.15rem; }
.stock-dot { font-size: 0.8rem; }
.sowing-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.sowing-cell { display: flex; flex-direction: column; gap: 2px; padding: 3px 0; border-radius: 4px; }
.sowing-cell.is-now { background: var(--mint-100); }
.lane { display: block; height: 5px; border-radius: 3px; }
.lane-semis   { background: #6b8a22; }
.lane-abri    { background: repeating-linear-gradient(135deg, #6b8a22 0 3px, #cfe0a0 3px 5px); }
.lane-plant   { background: #3b82f6; }
.lane-recolte { background: #d4a017; }
.lane-fleur   { background: #d946ef; }
.lane-taille  { background: #0d9488; }
.sowing-detail { padding: 6px 14px 16px; background: var(--mint-50); }
.sowing-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: 0.86rem; margin-bottom: 10px; }
.sowing-detail dt { font-weight: 700; color: var(--text-secondary); }
.sowing-tip { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 12px; }

/* ══════════════════════════════════════════
   Formulaires : champs liés à une catégorie
   ══════════════════════════════════════════ */
.inline-fields { display: flex; gap: 8px; }
.inline-fields input[type=number] { width: 120px; flex-shrink: 0; }
.inline-fields select { flex: 1; }
.cat-extra { padding: 2px 0 0; }
.event-qty { font-size: 0.76rem; font-weight: 700; color: #8a6d0b; background: #fef9e7; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.journal-badges { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.checkbox-block { align-items: flex-start; padding: 12px 14px; min-height: 0; }
.checkbox-block input { margin-top: 3px; flex-shrink: 0; }
.checkbox-block small { display: block; color: var(--text-muted); font-weight: 500; margin-top: 2px; }
.install-card { margin-top: 18px; }
.install-card h3 { color: var(--forest-900); margin-bottom: 6px; }
.install-card .btn { margin-top: 12px; }
.install-card p + p { margin-top: 10px; font-size: 0.88rem; }

.btn-danger { background: #dc2626; color: #fff; box-shadow: none; }
.btn-danger:hover { background: #b91c1c; color: #fff; box-shadow: none; }
.btn-danger:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ══════════════════════════════════════════
   Récoltes : graphiques
   ══════════════════════════════════════════ */
.year-nav { display: flex; align-items: center; gap: 10px; }
.year-nav strong { font-size: 1.05rem; color: var(--forest-900); min-width: 56px; text-align: center; }
.stat-value-text { font-size: 1.25rem; padding: 6px 0 4px; overflow-wrap: anywhere; }
.delta { display: block; font-weight: 700; font-size: 0.76rem; margin-top: 2px; }
.delta.up { color: var(--emerald-700); }
.delta.down { color: #c2410c; }

.chart-card {
    margin-bottom: 18px;
    padding: 20px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.chart-title { font-size: 0.98rem; font-weight: 800; color: var(--forest-900); margin-bottom: 14px; }
.chart-head .chart-title { margin: 0; }
.chart-legend { display: flex; gap: 14px; font-size: 0.82rem; color: var(--text-secondary); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw-year { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-now { background: #6b8a22; }
.sw-prev { background: #d4a017; }
.summary-toggle { cursor: pointer; margin: 0; }
details[open] > .summary-toggle { margin-bottom: 12px; }

/* Infobulle générique au survol / focus */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
    background: var(--forest-900); color: #fff;
    font-size: 0.76rem; font-weight: 600; white-space: nowrap;
    padding: 5px 9px; border-radius: 6px;
    pointer-events: none; z-index: 5;
}

.month-chart {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px;
    height: 200px;
    align-items: end;
    border-bottom: 1px solid var(--border-input);
    padding-top: 20px;
}
.month-bar-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; cursor: default; outline: none; }
.month-bar-col:hover .month-bar { background: var(--emerald-700); }
.month-bar { width: 100%; max-width: 34px; background: #6b8a22; border-radius: 4px 4px 0 0; min-height: 0; transition: background var(--transition); }
.month-bar-val { font-size: 0.68rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; white-space: nowrap; }
.month-bar-label { position: relative; top: 22px; height: 0; font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.month-chart + * { margin-top: 28px; }
.chart-card:has(.month-chart) { padding-bottom: 36px; }

.hbar-chart { display: flex; flex-direction: column; gap: 12px; }
.hbar-row { display: grid; grid-template-columns: minmax(110px, 170px) 1fr; gap: 12px; align-items: center; }
.hbar-name { font-size: 0.88rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-bars { display: flex; flex-direction: column; gap: 2px; }
.hbar-line { display: flex; align-items: center; gap: 8px; outline: none; }
.hbar { display: block; height: 12px; border-radius: 0 4px 4px 0; min-width: 2px; }
.hbar-now { background: #6b8a22; }
.hbar-prev { background: #d4a017; height: 8px; }
.hbar-val { font-size: 0.76rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.hbar-val-muted { color: var(--text-muted); font-weight: 600; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.data-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); }
.data-table td { padding: 8px; border-bottom: 1px solid var(--border-subtle); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table a { color: var(--text-primary); font-weight: 600; text-decoration: none; }
.data-table a:hover { color: var(--emerald-700); }

/* ══════════════════════════════════════════
   Plan 2D
   ══════════════════════════════════════════ */
.planner-layout { display: flex; gap: 20px; align-items: flex-start; }
.palette {
    flex: 0 0 240px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    position: sticky; top: calc(var(--sticky-top) + 8px);
    padding: 14px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.palette h3 { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); margin: 14px 0 8px; }
.palette-search { width: 100%; min-height: 38px; }
.palette-hint { font-size: 0.78rem; color: var(--text-muted); margin: -4px 0 10px; }
.plant-list { display: flex; flex-direction: column; gap: 5px; }
.plant-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px;
    background: var(--bg-app);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 0.88rem; font-weight: 600;
    cursor: grab;
    transition: background var(--transition), border-color var(--transition);
}
.plant-item:hover, .plant-item:focus-visible { background: var(--mint-50); border-color: var(--mint-200); }
.plant-icon { font-size: 1.3rem; line-height: 1; }
.plant-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-area {
    margin-top: 14px; padding: 16px;
    border: 2px dashed #fca5a5; border-radius: var(--radius-md);
    text-align: center; color: #dc2626; font-weight: 700; font-size: 0.86rem;
    transition: background var(--transition);
}
.trash-area.drag-over { background: #fee2e2; }

.grid-container {
    flex: 1; min-width: 0;
    padding: 20px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow-x: auto;
}
.parcelle-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.parcelle-header h2 { margin: 0; }
.parcelle-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.parcelle-select { width: auto; min-height: 42px; }
.save-state { font-size: 0.75rem; font-weight: 700; color: #b45309; background: #fef3c7; padding: 3px 10px; border-radius: var(--radius-pill); }
.season-bar { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 12px; }
.toggle-line { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.toggle-line input { accent-color: var(--emerald-600); width: 16px; height: 16px; }
.companion-legend { display: flex; gap: 6px 18px; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 14px; flex-wrap: wrap; }
.companion-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.sw-good { box-shadow: 0 0 0 2px #89ad32 inset; }
.sw-bad { box-shadow: 0 0 0 2px #ef4444 inset; }
.sw-rot { background: #f59e0b; border-radius: 50% !important; }

.garden-grid {
    display: grid; gap: 4px;
    width: fit-content; margin: 0 auto;
    padding: 8px;
    background: #8b5a2b;
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.grid-cell {
    position: relative;
    width: 60px; height: 60px;
    display: grid; place-items: center;
    background: #a06b38;
    border-radius: 5px;
    font-size: 2rem;
    cursor: pointer;
    transition: background var(--transition);
}
.grid-cell:hover { background: #b17b48; }
.grid-cell.drag-over { background: #c38f5a; outline: 2px dashed #fff; }
.grid-cell.is-selected { background: #c9995f; outline: 3px solid #fde047; outline-offset: -3px; }
.garden-grid { user-select: none; -webkit-user-select: none; }
.garden-grid.mode-selection { touch-action: none; cursor: crosshair; }
.garden-grid.mode-selection .grid-cell, .garden-grid.mode-selection .plant-in-grid { cursor: crosshair; }
.selection-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; min-height: 36px; }
.selection-bar #mode-selection.active { background: var(--forest-900); color: #fff; border-color: var(--forest-900); }
.selection-hint { font-size: 0.8rem; color: var(--text-muted); }
.selection-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.selection-actions[hidden] { display: none; }
.selection-actions strong { font-size: 0.86rem; color: var(--forest-900); margin-right: 4px; }
.plant-in-grid { cursor: grab; line-height: 1; }
.grid-cell.good-companion { box-shadow: 0 0 0 3px #89ad32 inset; }
.grid-cell.bad-companion { box-shadow: 0 0 0 3px #ef4444 inset; }
.grid-cell.rotation-warn::after {
    content: '↻';
    position: absolute; top: 2px; right: 2px;
    width: 16px; height: 16px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #f59e0b; color: #fff;
    font-size: 0.7rem; font-weight: 800;
}
.show-prev .grid-cell:empty::before { content: attr(data-prev); opacity: 0.3; filter: grayscale(0.6); font-size: 1.6rem; }
.cell-tooltip {
    position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%);
    background: rgba(6, 30, 22, 0.92); color: #fff;
    padding: 5px 9px; border-radius: 6px;
    font-size: 0.76rem; line-height: 1.4; white-space: nowrap;
    pointer-events: none; opacity: 0; transition: opacity var(--transition);
    z-index: 10;
}
.grid-cell:hover .cell-tooltip { opacity: 1; }
.tip-good { color: #c4dc8a; }
.tip-bad { color: #fca5a5; }
.tip-rot { color: #fcd34d; }

.modal-overlay { display: none; position: fixed; inset: 0; z-index: 1500; background: rgba(8, 20, 14, 0.5); align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; }
.modal-content {
    position: relative;
    width: 92%; max-width: 440px; max-height: 88vh; overflow-y: auto;
    padding: 24px;
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    animation: modal-in .18s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-content h3 { margin: 0 40px 14px 0; font-size: 1.1rem; color: var(--forest-900); }
.modal-content form { display: flex; flex-direction: column; }
.modal-content label { margin: 10px 0 5px; }
.modal-subform { border: 1px solid var(--border-subtle); padding: 14px; border-radius: var(--radius-md); margin-bottom: 16px; background: var(--bg-app); }
.modal-content .form-row { gap: 0 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-footer-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border-subtle); padding-top: 16px; }
.modal-close {
    position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px;
    border: 0; border-radius: 50%;
    background: var(--bg-app); color: var(--text-secondary);
    font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: var(--mint-100); color: var(--forest-900); }
.picker-fiche { display: inline-block; margin-bottom: 10px; }
.picker-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.picker-actions[hidden] { display: none; }
.picker-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-height: 50vh; overflow-y: auto; }
.picker-group { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); margin: 8px 0 2px; }
.picker-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    background: var(--surface-card);
    font: inherit; font-size: 0.88rem; text-align: left;
    cursor: pointer;
}
.picker-item:hover { background: var(--mint-50); border-color: var(--emerald-500); }

/* ══════════════════════════════════════════
   Grainothèque
   ══════════════════════════════════════════ */
.graines-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.graine-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: 20px;
}
.graine-card:target { border-color: var(--emerald-500); box-shadow: var(--ring); }
.graine-top { display: flex; align-items: center; gap: 12px; }
.graine-text { flex: 1; min-width: 0; }
.graine-text h3 { font-size: 1rem; font-weight: 800; color: var(--forest-900); }
.graine-meta { display: flex; flex-direction: column; gap: 3px; font-size: 0.82rem; color: var(--text-secondary); }
.graine-etat { align-self: flex-start; font-weight: 700; font-size: 0.74rem; padding: 2px 9px; border-radius: var(--radius-pill); }
.etat-perime .graine-etat { background: #fee2e2; color: #b91c1c; }
.etat-vide .graine-etat { background: #f3f4f6; color: #4b5563; }
.etat-bientot .graine-etat { background: #fef3c7; color: #92400e; }
.etat-perime, .etat-vide { opacity: 0.8; }
.graine-saison { color: var(--emerald-700); font-weight: 700; }
.graine-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-app); border-radius: var(--radius-pill); padding: 3px; }
.stepper button {
    width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: var(--surface-card); color: var(--forest-900);
    font-size: 1.1rem; font-weight: 700; cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.stepper button:hover:not(:disabled) { background: var(--mint-100); }
.stepper button:disabled { opacity: 0.4; cursor: default; }
.stepper span { min-width: 64px; text-align: center; font-weight: 800; font-size: 0.95rem; }
.stepper small { font-weight: 600; color: var(--text-muted); font-size: 0.76rem; }

input[type="month"] {
    width: 100%; min-height: 46px; padding: 11px 14px;
    border: 1.5px solid var(--border-input); border-radius: var(--radius-md);
    font: inherit; font-size: 0.95rem; background: var(--surface-card); color: var(--text-primary);
}

/* ══════════════════════════════════════════
   Jardiner avec la lune
   ══════════════════════════════════════════ */
.lune-card {
    margin: 0 0 24px;
    padding: 20px 22px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.lune-today { background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%); }
.lune-card.is-defav, .lune-dash.is-defav { border-color: #fed7aa; }
.lune-kicker { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); margin-bottom: 10px; }
.lune-h3 { font-size: 1.05rem; color: var(--forest-900); margin-bottom: 12px; }
.lune-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.lune-big { font-size: 3rem; line-height: 1; }
.lune-detail-head strong { display: block; font-size: 1.25rem; color: var(--forest-900); }
.lune-detail-head span { color: var(--text-secondary); font-size: 0.88rem; }

.lune-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lune-badge {
    --c: #4f46e5;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--c) 12%, white);
    color: color-mix(in srgb, var(--c) 70%, black);
    font-size: 0.84rem; font-weight: 700;
}
.lune-alerte {
    margin: 8px 0;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 0.88rem; font-weight: 600;
}
.lune-evenements { list-style: none; margin: 10px 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.lune-ev-heure { display: inline-block; min-width: 52px; font-weight: 800; color: var(--forest-900); font-variant-numeric: tabular-nums; }
.lune-conseils { margin: 12px 0 4px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
.lune-sugg-titre { margin: 16px 0 8px; font-weight: 800; color: var(--forest-900); font-size: 0.92rem; }
.lune-suggestions { gap: 12px; }
.lune-day-detail .btn { margin-top: 14px; }
.lune-dash-conseil { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; margin: 6px 0 12px; }

.lune-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 28px; }
.lune-week-day {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 4px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-top: 4px solid var(--c);
    border-radius: var(--radius-md);
    text-decoration: none; color: var(--text-primary);
    font-size: 0.76rem; text-align: center;
    transition: box-shadow var(--transition);
}
.lune-week-day:hover { box-shadow: var(--shadow-md); }
.lune-week-wd { font-weight: 800; color: var(--forest-900); }
.lune-week-icon { font-size: 1.6rem; line-height: 1.2; }
.lune-week-type { font-weight: 700; color: color-mix(in srgb, var(--c) 75%, black); }
.lune-week-dir { color: var(--text-muted); }
.lune-week-warn { color: #c2410c; font-weight: 700; }
.lune-week-day.is-defav { background: #fffaf5; }

.lune-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 12px; }
.lune-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lune-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }

.lune-grid { margin-bottom: 16px; }
.calendar-day.lune-day {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    width: 100%; min-height: 96px;
    font: inherit; text-align: left; color: inherit;
    border-bottom: 4px solid var(--c);
}
.lune-day-dir { font-weight: 800; color: var(--text-muted); font-size: 0.85rem; }
.lune-day-icon { font-size: 1.5rem; line-height: 1.1; text-align: center; }
.lune-day-type { font-size: 0.74rem; font-weight: 700; color: color-mix(in srgb, var(--c) 75%, black); text-align: center; }
.lune-day-warn { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; }
.calendar-day.lune-day.is-defav { background: #fffaf5; }
.calendar-day.lune-day:hover .day-number::after { content: none; }
.calendar-day.lune-day:hover, .calendar-day.lune-day.today, .calendar-day.lune-day.selected { border-bottom-color: var(--c); }

.lune-cles { list-style: none; display: flex; flex-direction: column; }
.lune-cles li { display: flex; gap: 14px; padding: 8px 0; border-top: 1px solid var(--border-subtle); font-size: 0.9rem; }
.lune-cles li:first-child { border-top: 0; }
.lune-cles li.is-defav { color: #9a3412; }
.lune-cles-date { min-width: 110px; font-weight: 700; color: var(--forest-900); font-variant-numeric: tabular-nums; }

.lune-guide { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.lune-guide details {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
}
.lune-guide summary { cursor: pointer; font-weight: 800; color: var(--forest-900); }
.lune-guide details[open] summary { margin-bottom: 10px; }
.lune-guide p, .lune-guide li { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; }
.lune-guide p { margin: 8px 0; }
.lune-guide ul { margin: 8px 0 8px 18px; display: flex; flex-direction: column; gap: 6px; }
.lune-guide strong { color: var(--text-primary); }
.lune-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 12px 0; }
.lune-type-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--c);
    background: color-mix(in srgb, var(--c) 7%, white);
    font-size: 0.86rem; color: var(--text-secondary);
}
.lune-type-card strong { color: color-mix(in srgb, var(--c) 75%, black); }
.lune-type-elem { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.lune-note { font-size: 0.84rem !important; color: var(--text-muted) !important; }
.lune-table-wrap { overflow-x: auto; }
.lune-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.lune-table th, .lune-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.lune-table th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); }
.lune-table td:first-child { font-weight: 700; color: var(--text-primary); }

/* Calendrier principal et fiche plante */
.moon-info { display: inline-flex; align-items: center; gap: 3px; }
.moon-type { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.moon-warn { font-size: 0.65rem; }
.day-panel-moon a { color: inherit; }
.lune-plante {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--c);
    background: color-mix(in srgb, var(--c) 6%, white);
    font-size: 0.9rem;
}
.lune-plante p { margin-bottom: 8px; }
.lune-plante-hint { margin: 8px 0 0 !important; font-size: 0.8rem; color: var(--text-muted); }

@media (max-width: 860px) {
    .user-name, .logout-link span { display: none; }
    .user-link { padding: 3px; }
}

@media (max-width: 760px) {
    .planner-layout { flex-direction: column; }
    .palette { position: static; flex: none; width: 100%; max-height: none; }
    .plant-list { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
    .plant-item { flex: none; }
    .palette-hint, .trash-area { display: none; }
    .grid-container { width: 100%; padding: 14px; }
    .grid-cell { width: 44px; height: 44px; font-size: 1.5rem; }
}

@media (max-width: 640px) {
    .container { padding: 12px 16px calc(96px + var(--bottom-nav-h)); }

    .topbar { gap: 10px; padding: 8px 8px 8px 10px; border-radius: var(--radius-lg); }
    .topbar .brand-name { display: none; }
    .meteo-chip { justify-content: flex-start; }
    .meteo-chip-text span { display: none; }

    .sowing-row { grid-template-columns: 104px 1fr; gap: 6px; padding: 7px 10px; }
    .sowing-name { font-size: 0.8rem; gap: 5px; }
    .sowing-icon { font-size: 1rem; }
    .lane { height: 4px; }
    .sowing-detail dl { grid-template-columns: 1fr; gap: 0; }
    .sowing-detail dd { margin-bottom: 6px; }

    .month-bar-val { display: none; }
    .month-chart { height: 160px; gap: 3px; }
    .hbar-row { grid-template-columns: 1fr; gap: 4px; }
    .inline-fields input[type=number] { width: 96px; }

    .hero .btn-group { display: none; }
    .hero-title { font-size: 1.35rem; }
    .stats { gap: 8px; }
    .stat { padding: 12px; }
    .stat-value { font-size: 1.45rem; }
    .stat-label { font-size: 0.74rem; }

    .event-item { gap: 12px; padding: 12px 10px 12px 14px; }
    .date-badge { width: 48px; }
    .event-actions { flex-direction: column; }
    .action-icon { width: 34px; height: 34px; }

    .card-form { padding: 20px 16px; border-radius: var(--radius-lg); }
    .form-row { grid-template-columns: 1fr; }
    .form-row > div + div label { margin-top: 20px; }
    .form-actions { flex-wrap: wrap; }
    .form-actions .btn:not(.btn-ghost):not(.btn-danger-ghost) { flex: 1; }

    .search-input { width: 100%; }
    .page-head-actions { width: 100%; }
    .page-head-actions .search-input { flex: 1; width: auto; }

    /* Calendrier compact : pastilles colorées à la place des titres */
    .calendar-nav h2 { font-size: 1.15rem; min-width: 0; flex: 1; }
    .calendar-hint { display: none; }
    .calendar-grid { gap: 3px; }
    .calendar-day { min-height: 62px; padding: 3px; border-radius: var(--radius-sm); }
    .calendar-day:not(.empty):hover .day-number::after { display: none; }
    .day-number { flex-direction: column; gap: 0; margin-bottom: 2px; }
    .day-num { width: 22px; height: 22px; font-size: 0.75rem; }
    .moon-info { font-size: 0.6rem; }
    .day-event { display: inline-block; width: 8px; height: 8px; padding: 0; margin: 1px; border: 0; border-radius: 50%; background: var(--c); vertical-align: top; }
    .day-event-icon, .day-event-text { display: none; }
    .legend-grid { grid-template-columns: 1fr; }
    .moon-type, .moon-warn { display: none; }

    .lune-card { padding: 16px; }
    .lune-big { font-size: 2.4rem; }
    .lune-week { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 92px; overflow-x: auto; padding-bottom: 4px; }
    .calendar-day.lune-day { min-height: 70px; padding: 3px; border-bottom-width: 3px; }
    .lune-day-dir { font-size: 0.7rem; }
    .lune-day-icon { font-size: 1.1rem; }
    .lune-day-type-txt { display: none; }
    .lune-day-warn { top: auto; bottom: 2px; left: auto; right: 2px; transform: none; font-size: 0.6rem; }
    .lune-cles li { flex-direction: column; gap: 2px; }

    .plante-header { padding: 18px; }
    .plante-header-top { flex-wrap: wrap; }
    .plante-header h2 { font-size: 1.3rem; }

    .journal-entry { padding: 16px; }
    .journal-gallery { grid-template-columns: repeat(2, 1fr); }
    .journal-gallery .photo-thumb { height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ══════════════════════════════════════════
   Éléments communs aux pages Bilan, Problèmes, Courses
   ══════════════════════════════════════════ */
a.filter-chip { text-decoration: none; }
.muted { color: var(--text-muted); }
.table-scroll { overflow-x: auto; }
.stats-6 { grid-template-columns: repeat(3, 1fr); }
.stats-6 .stat-value { font-size: 1.45rem; }
.checkbox-inline { width: auto; display: inline-flex; margin-bottom: 12px; min-height: 40px; }
.print-only { display: none; }

/* Stade d'une culture */
.stade {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.76rem; font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: #f3f4f6; color: #4b5563;
    white-space: nowrap;
}
.stade-seme { background: #f3f7e6; color: #486014; }
.stade-croissance { background: var(--mint-100); color: var(--forest-800); }
.stade-production { background: #fef3c7; color: #92400e; }
.stade-termine { background: #f3f4f6; color: #6b7280; }
.plante-card-meta .stade { margin-bottom: 4px; }

/* ── Fiche culture ── */
.cycle-card { margin-top: 18px; }
.cycle-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; position: relative; }
.cycle-step {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-align: center;
    padding-top: 4px;
}
/* Trait reliant les étapes */
.cycle-step + .cycle-step::before {
    content: '';
    position: absolute; top: 25px; right: calc(50% + 22px); width: calc(100% - 36px);
    height: 3px; border-radius: 2px;
    background: var(--border-subtle);
}
.cycle-step.is-done + .cycle-step.is-done::before { background: var(--emerald-500); }
.cycle-dot {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 1.3rem;
    background: var(--bg-app);
    border: 2px dashed var(--border-input);
    filter: grayscale(1); opacity: 0.6;
}
.cycle-step.is-done .cycle-dot { background: var(--mint-50); border: 2px solid var(--emerald-500); filter: none; opacity: 1; }
.cycle-lib { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); margin-top: 4px; }
.cycle-date { font-size: 0.8rem; color: var(--text-secondary); }
a.cycle-add { color: var(--emerald-700); font-weight: 700; text-decoration: none; }
a.cycle-add:hover { text-decoration: underline; }
/* Nombre de jours entre deux étapes, au-dessus du trait */
.cycle-gap {
    position: absolute; top: 6px; right: calc(50% + 22px); width: calc(100% - 36px);
    text-align: center;
    font-size: 0.68rem; font-weight: 700; color: var(--emerald-700);
    white-space: nowrap;
}
.cycle-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 18px; }
.cycle-facts:empty { display: none; }
.cycle-facts div { padding: 10px 12px; background: var(--bg-app); border-radius: var(--radius-md); }
.cycle-facts dt { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.cycle-facts dd { font-weight: 800; color: var(--forest-900); }
.cycle-facts small { font-weight: 600; color: var(--text-muted); }
.cycle-card > .page-sub { margin-top: 14px; }
.cycle-history { margin-top: 16px; }
.cycle-history .summary-toggle { font-size: 0.88rem; font-weight: 700; color: var(--emerald-700); }

/* ── Problèmes ── */
.pb-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.pb-card {
    --c: #6b7280;
    position: relative;
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 14px 14px 18px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.pb-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.pb-card.is-resolu { background: #fbfcfb; }
.pb-card.is-resolu::before { opacity: 0.35; }
.pb-icon {
    flex-shrink: 0;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    font-size: 1.6rem;
    background: color-mix(in srgb, var(--c) 10%, white);
}
.pb-photo { flex-shrink: 0; width: 56px; height: 56px; }
.pb-body { flex: 1; min-width: 0; }
.pb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pb-statut { font-size: 0.76rem; font-weight: 700; color: #c2410c; }
.is-resolu .pb-statut { color: var(--emerald-700); }
.pb-gravite { font-size: 0.74rem; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); }
.pb-gravite.g1 { background: #f0fdf4; color: #15803d; }
.pb-gravite.g2 { background: #fff7ed; color: #c2410c; }
.pb-gravite.g3 { background: #fef2f2; color: #b91c1c; }
.pb-solution { margin-top: 8px; font-size: 0.88rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.pb-solution strong { color: var(--text-primary); }
.pb-eff { display: inline-block; margin-left: 6px; font-size: 0.76rem; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); background: #f3f4f6; color: #374151; }
.pb-eff-efficace { background: var(--mint-100); color: var(--forest-800); }
.pb-eff-partiel { background: #fff7ed; color: #9a3412; }
.pb-eff-inefficace { background: #fef2f2; color: #b91c1c; }
.pb-conseil {
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 0.86rem; color: #713f12;
    background: #fefce8; border: 1px solid #fef08a;
    border-radius: var(--radius-md);
}
.pb-none { margin: -8px 0 24px; }

.memo-list { display: flex; flex-direction: column; gap: 14px; }
.memo-item strong { color: var(--forest-900); }
.memo-item ul { list-style: none; margin-top: 4px; display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; color: var(--text-secondary); }
.memo-meta { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-left: 6px; }

/* ── Courses ── */
.suggest-card { border-color: #fde68a; background: linear-gradient(135deg, #fffbeb 0%, #fff 60%); }
.suggest-list { list-style: none; display: flex; flex-direction: column; }
.suggest-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.suggest-list li:first-child { border-top: 0; padding-top: 0; }
.suggest-icon { font-size: 1.3rem; }
.suggest-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.suggest-text small { color: var(--text-muted); font-size: 0.78rem; overflow-wrap: anywhere; }
.suggest-actions { display: flex; gap: 4px; flex-shrink: 0; }

.course-add { padding: 14px; margin-bottom: 22px; }
.course-add-row { display: flex; gap: 8px; }
.course-add-row input[name=libelle] { flex: 1; min-width: 0; }
.course-add-row .course-qte { width: 90px; flex-shrink: 0; }
.course-add-row select { width: 170px; flex-shrink: 0; }
.course-group { margin-bottom: 20px; }
.course-list { list-style: none; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.course-item { --c: var(--emerald-500); display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; border-top: 1px solid var(--border-subtle); }
.course-item:first-child { border-top: 0; }
.course-item form { display: flex; }
.course-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.course-lib { font-weight: 600; overflow-wrap: anywhere; }
.course-q { margin-left: 6px; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.course-text small { font-size: 0.76rem; color: var(--text-muted); }
.course-item.is-done .course-lib { text-decoration: line-through; color: var(--text-muted); }
.course-vider { text-align: center; }

/* ── Bilan ── */
.rang { width: 36px; text-align: center; font-weight: 800; color: var(--text-muted); }
.delta-inline { font-size: 0.7rem; }
.delta-inline.up { color: var(--emerald-700); }
.delta-inline.down { color: #c2410c; }
.month-bar-alt { background: #3b82f6; }
.month-bar-col:hover .month-bar-alt { background: #2563eb; }
.cat-totaux { display: flex; flex-wrap: wrap; gap: 6px; }
.conclusions textarea { min-height: 110px; }
.conclusions label { margin-top: 0; }

/* ── Export (Mon compte) ── */
.export-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 14px; }
.export-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary); text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
}
.export-item:hover { background: var(--mint-50); border-color: var(--mint-200); }
.export-item > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.88rem; }
.export-item small { color: var(--text-muted); font-size: 0.76rem; }
.export-icon { font-size: 1.3rem; }
.export-fmt { font-size: 0.68rem; font-weight: 800; color: var(--emerald-700); background: var(--mint-100); padding: 2px 6px; border-radius: 4px; }
.export-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.export-actions .btn { margin-top: 14px; }
.install-card p.export-hint { font-size: 0.8rem; }

@media (max-width: 640px) {
    .stats-6 { grid-template-columns: repeat(2, 1fr); }
    .cycle-steps { gap: 2px; }
    .cycle-dot { width: 38px; height: 38px; font-size: 1.1rem; }
    .cycle-step + .cycle-step::before, .cycle-gap { right: calc(50% + 19px); width: calc(100% - 36px); }
    .cycle-step + .cycle-step::before { top: 22px; }
    .cycle-gap { top: 4px; }
    .cycle-lib, .cycle-date { font-size: 0.7rem; }
    .pb-icon, .pb-photo { width: 44px; height: 44px; font-size: 1.3rem; }
    .pb-card { gap: 10px; padding: 12px 10px 12px 14px; }
    .suggest-list li { flex-wrap: wrap; }
    .suggest-actions { width: 100%; justify-content: flex-end; }
    .course-add-row { flex-wrap: wrap; }
    .course-add-row input[name=libelle] { flex-basis: 100%; }
    .course-add-row select { flex: 1; width: auto; }
}

/* ══════════════════════════════════════════
   Impression / PDF (journal, bilan, courses, récoltes)
   ══════════════════════════════════════════ */
@media print {
    @page { margin: 14mm; }
    body { background: #fff; font-size: 11pt; padding-left: 0 !important; }
    .container { max-width: none; padding: 0; }
    .topbar, .nav-wrap, .toast, .no-print, .lightbox,
    .page-head-actions, .event-actions, .journal-footer, .filter-bar, .form-actions, .back-link { display: none !important; }
    .print-only { display: block; }
    .chart-card, .stat, .journal-entry, .pb-card, .course-list, .card-form {
        box-shadow: none !important;
        break-inside: avoid;
    }
    .chart-card, .stat, .journal-entry { border-color: #ccc; }
    .journal-gallery .photo-thumb, .photo-thumb { width: 70px; height: 70px; }
    .journal-gallery { display: flex; flex-wrap: wrap; gap: 6px; }
    .journal-month { break-after: avoid; }
    textarea { border: 0; padding: 0; min-height: 0; resize: none; overflow: visible; }
    a { color: inherit; text-decoration: none; }
    [data-tip]::after { display: none !important; }
    .month-bar-val { display: block !important; }
}

/* ══════════════════════════════════════════
   Page d'accueil publique (accueil.php)
   ══════════════════════════════════════════ */
.landing-wrap { max-width: 860px; }
.landing-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 36px; }
.landing-top .brand-logo { width: 44px; height: 44px; }
.landing-top .brand-by { color: var(--emerald-700); }
.landing-hero { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.landing-hero h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1.15; letter-spacing: -0.8px; color: var(--forest-900); margin-bottom: 14px; }
.landing-hero > p { color: var(--text-secondary); font-size: 1.05rem; }
.landing-cta { justify-content: center; margin-top: 24px; }
.landing-cta .btn { min-height: 48px; padding-inline: 24px; }
.landing-note { margin-top: 14px; font-size: 0.82rem; color: var(--text-muted); }

.landing-apercu { margin-bottom: 56px; text-align: center; }
.landing-apercu h2, .landing-atouts h2, .landing-final h2 { font-size: 1.45rem; color: var(--forest-900); letter-spacing: -0.3px; }
.landing-apercu-sub { color: var(--text-secondary); margin: 4px 0 20px; }
.landing-demo {
    position: relative; text-align: left; overflow: hidden;
    max-height: 640px;
    background: var(--bg-app); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.landing-demo-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); }
.landing-demo-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-input); }
.landing-demo-bar em { margin-left: auto; font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--emerald-700); background: var(--mint-100); padding: 2px 10px; border-radius: var(--radius-pill); }
.landing-demo-body { padding: 16px; pointer-events: none; user-select: none; }
.landing-demo-body .stats { margin-bottom: 16px; }
.landing-demo-body .month-card { margin-bottom: 16px; }
.landing-demo-fade {
    position: absolute; inset: auto 0 0 0; height: 170px;
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px;
    background: linear-gradient(to bottom, transparent, var(--bg-app) 70%);
}

.landing-atouts { margin-bottom: 56px; text-align: center; }
.landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 22px; text-align: left; }
.landing-atout { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.landing-atout-icon { display: grid; place-items: center; width: 44px; height: 44px; font-size: 1.4rem; background: var(--mint-100); border-radius: var(--radius-md); margin-bottom: 12px; }
.landing-atout h3 { font-size: 1rem; color: var(--forest-900); margin-bottom: 4px; }
.landing-atout p { font-size: 0.9rem; color: var(--text-secondary); }

.landing-final { text-align: center; padding: 36px 20px; background: var(--forest-900); color: #fff; border-radius: var(--radius-xl); }
.landing-final h2 { color: #fff; }
.landing-final p { color: rgba(255,255,255,0.8); margin-top: 6px; }
.landing-final .btn:not(.btn-secondary) { background: var(--emerald-500); }

.landing-sticky { display: none; }
@media (max-width: 640px) {
    .landing-wrap { padding-inline: 16px; }
    .landing-demo { max-height: 520px; }
    .landing-cta .btn { flex: 1 1 100%; }
    .landing-sticky {
        display: block; position: fixed; inset: auto 0 0 0; z-index: 50;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: var(--surface-glass); backdrop-filter: blur(10px);
        border-top: 1px solid var(--border-subtle);
    }
    .landing-sticky .btn { margin: 0; }
}

/* ══════════════════════════════════════════
   Administration : liste des utilisateurs
   ══════════════════════════════════════════ */
.admin-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.admin-search input[type=search] { flex: 1; min-width: 200px; max-width: 360px; margin: 0; }
.admin-table-wrap { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th { text-align: left; font-size: 0.76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.admin-table td { padding: 12px 14px; border-top: 1px solid var(--border-subtle); vertical-align: middle; }
.admin-table tbody tr:first-child td { border-top: 0; }
.admin-table td small { display: block; color: var(--text-secondary); overflow-wrap: anywhere; }
.admin-table tr.is-suspendu { background: var(--red-50); }
.admin-statut { font-weight: 700; white-space: nowrap; }
.admin-statut.is-suspendu { color: var(--red-600); }
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }

@media (max-width: 800px) {
    .admin-table thead { display: none; }
    .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; }
    .admin-table tr { padding: 10px 14px; border-top: 1px solid var(--border-subtle); }
    .admin-table tbody tr:first-child { border-top: 0; }
    .admin-table td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; }
    .admin-table td::before { content: attr(data-label); color: var(--text-muted); font-size: 0.78rem; font-weight: 600; flex-shrink: 0; }
    .admin-table td:first-child { display: block; }
    .admin-table td:first-child::before { display: none; }
}

/* Bandeau de consultation d'un compte par l'admin */
.readonly-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; background: #92400e; color: #fff; font-size: 0.88rem; text-align: center; }
.readonly-banner a { color: #fff; font-weight: 800; text-decoration: underline; }
body:has(.readonly-banner) { padding-top: 40px; }