/* ==========================================================================
   Truffi — design system « calcaire et truffe »
   Les matières de la truffière donnent les couleurs : terre calcaire en fond,
   craie pour les surfaces, chair noire de la truffe (veinée de crème, motif
   --marbrure) pour la marque et les actions, vert chêne pour ce qui est
   sélectionné, ocre du « brûlé » réservé aux données de récolte.
   Règle de lecture : noir = agir, vert = état courant, ocre = récolte.
   Une seule famille, Lexend (dessinée pour la fluidité de lecture) : lisible au
   soleil, chiffres francs et zéro sans barre — « Ø-20 cm » se lirait comme un
   diamètre. Thème clair (usage en extérieur).
   Tokens d'abord, coquille, composants, pages à la fin.
   ========================================================================== */

/* Servie depuis vendor/ (licence OFL à côté), jamais de CDN (CSP).
   Variable 300→800, sous-ensemble latin (accents français, œ, espaces fines). */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('vendor/fonts/lexend-latin.woff2') format('woff2');
}

:root {
    /* Matières */
    --calcaire: #ecede7;
    /* fond de page */
    --craie: #fcfcfa;
    /* surfaces */
    --craie-2: #f4f4ef;
    /* surfaces en retrait : ligne dépliée, fond du plan */
    --trait: #dfdfd7;
    /* filets */
    --trait-fort: #c3c2b7;
    /* bordures de champs */

    --encre: #1f1b16;
    --encre-2: #57534a;
    --encre-3: #6c685f;

    --truffe: #1f1a15;
    /* chair de truffe : marque, actions principales */
    --truffe-2: #2c251e;
    --gleba: #efe7d8;
    /* veines crème sur fond truffe */
    --gleba-2: #b9ae9c;

    --chene: #2e5135;
    /* sélection, état courant */
    --chene-fonce: #243f2a;
    --lichen: #dfe6da;
    /* sélection douce */

    --brule: #b97a24;
    /* récolte (le « brûlé » au pied des chênes) */
    --brule-fonce: #7a4a16;
    --brule-pale: #f6ebd6;

    --succes: #2e6b3d;
    --succes-pale: #e3efe5;
    --erreur: #b3402f;
    --erreur-pale: #f9e7e3;

    /* Rampe ordinale des récoltes sur le plan (validée : une teinte, luminance
       monotone, extrémité claire à 2:1 sur --craie-2). 0 truffe = arbre neutre. */
    --recolte-1: #d9a441;
    --recolte-2: #b97a24;
    --recolte-3: #8a531b;
    --recolte-4: #55331a;
    --arbre: #d3cec3;
    --arbre-bord: #a39e92;

    /* Calque « évolution » du plan : divergent autour du gris des arbres (sans
       changement), bleu = mieux, brique = moins bien, foncé = extrême (premières
       truffes, plus rien). Validé daltonisme (ΔE ≥ 14 entre toutes les paires,
       gris compris) ; contraste < 3:1 pour les clairs, d'où le contour et le
       chiffre sur chaque arbre. « Pas encore de truffe » = arbre évidé. */
    --evolution-premieres: #1e5a96;
    --evolution-hausse: #5f9bd1;
    --evolution-baisse: #e0955a;
    --evolution-arret: #93361a;

    /* Séries des graphiques (validées daltonisme et contraste) — lues par les JS */
    --serie-pluie: #2f6db3;
    --serie-arrosage: #3f8f5f;
    /* Total de l'eau reçue (pluie + arrosage) : prune, validée avec les deux
       autres (ΔE ≥ 9 daltonisme, ≥ 18 vision normale, contraste ≥ 3:1) ; tracée
       plus épaisse, sous elles, pour rester visible quand elle se confond avec
       la pluie (aucun arrosage) */
    --serie-total: #8e3b7a;
    --serie-recolte: #b97a24;
    --grille: #e4e3dc;

    /* Marbrure de gleba : veines crème sur les surfaces truffe (signature) */
    --marbrure: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260' viewBox='0 0 420 260'%3E%3Cg fill='none' stroke='%23efe7d8' stroke-linecap='round'%3E%3Cpath d='M-20 42 C 60 18 96 88 154 68 S 252 12 322 44 S 424 92 452 62' stroke-width='1.6' opacity='.14'/%3E%3Cpath d='M-12 124 C 44 152 122 108 172 138 S 302 172 360 128 S 430 108 448 130' stroke-width='2.2' opacity='.10'/%3E%3Cpath d='M-18 204 C 70 182 132 232 212 210 S 330 168 434 212' stroke-width='1.4' opacity='.13'/%3E%3Cpath d='M64 -12 C 62 58 112 92 100 152 S 62 232 92 274' stroke-width='1.3' opacity='.09'/%3E%3Cpath d='M232 -18 C 242 60 190 112 212 172 S 262 238 242 282' stroke-width='1.8' opacity='.09'/%3E%3Cpath d='M352 -12 C 330 62 382 122 352 182 S 320 248 342 284' stroke-width='1.2' opacity='.11'/%3E%3Cpath d='M120 70 C 150 92 148 128 178 140' stroke-width='1' opacity='.10'/%3E%3Cpath d='M282 150 C 300 128 336 130 352 106' stroke-width='1' opacity='.10'/%3E%3C/g%3E%3C/svg%3E");
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2357534a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* Échelle typographique (base 16 px : Lexend est large, son œil est haut) */
    --t-xs: 0.78rem;
    --t-sm: 0.875rem;
    --t-md: 1rem;
    --t-lg: 1.25rem;
    --t-xl: 1.625rem;
    --t-2xl: 2.125rem;

    /* Géométrie : le rayon suit la hiérarchie (feuille > carte > contrôle) */
    --r-feuille: 22px;
    --r-carte: 16px;
    --r-ctrl: 11px;
    --ombre: 0 10px 30px rgba(31, 26, 21, 0.16), 0 1px 3px rgba(31, 26, 21, 0.10);

    --barre-h: 56px;
    --onglets-h: 64px;
    --nav-w: 248px;
    --bas-securite: env(safe-area-inset-bottom, 0px);

    --police: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--police);
    font-size: var(--t-md);
    line-height: 1.5;
    color: var(--encre);
    background-color: var(--calcaire);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 0.75em;
}

a {
    color: var(--chene);
    text-decoration-color: rgba(46, 81, 53, 0.35);
    text-underline-offset: 3px;
}

a:hover {
    text-decoration-color: currentColor;
}

svg {
    flex-shrink: 0;
}

[hidden] {
    display: none !important;
}

/* Focus clavier : un liseré ocre, partout le même */
:focus-visible {
    outline: 2.5px solid var(--brule);
    outline-offset: 2px;
}

.visuellement-cache {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Coquille connectée
   Un seul bloc .coquille dans le DOM (un seul formulaire de déconnexion) :
   sur mobile c'est la barre du haut, ses onglets se fixent en bas d'écran ;
   sur ordinateur, toute la coquille devient la barre latérale.
   Pas de transform/filter/backdrop-filter sur .coquille : ils feraient de
   la barre le bloc conteneur des onglets position: fixed.
   ========================================================================== */

.coquille {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--barre-h);
    padding: 0 8px 0 14px;
    background-color: var(--truffe);
    background-image: var(--marbrure);
    background-size: 420px 260px;
    color: var(--gleba);
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--gleba);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1875rem;
    letter-spacing: -0.02em;
}

/* Le logo (truffe noire) repose sur une tuile vert chêne, comme l'icône de l'app :
   posé tel quel sur le fond truffe, il disparaîtrait */
.marque-tuile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background-color: var(--chene);
    flex: none;
}

.marque-tuile svg {
    width: 25px;
    height: 25px;
}

.exploitation {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.exploitation-nom {
    font-weight: 600;
    font-size: var(--t-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exploitation-saison {
    font-size: var(--t-xs);
    color: var(--gleba-2);
}

/* Sur mobile, le mot « Truffi » laisse la place au nom de l'exploitation */
.coquille .marque-nom {
    display: none;
}

/* --- Onglets ------------------------------------------------------------ */

.onglets {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: calc(var(--onglets-h) + var(--bas-securite));
    padding: 0 4px var(--bas-securite);
    background-color: var(--craie);
    border-top: 1px solid var(--trait);
}

.onglet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--encre-3);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
}

.onglet .onglet-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 30px;
    border-radius: 999px;
    transition: background-color 0.15s, color 0.15s;
}

.onglet[aria-current="page"] {
    color: var(--chene-fonce);
}

.onglet[aria-current="page"] .onglet-icone {
    background-color: var(--lichen);
}

/* Liens secondaires (Plan de parcelle, Réglages) : dans la barre latérale
   seulement — sur mobile ils vivent dans le menu du compte */
.nav-secondaire {
    display: none;
}

/* --- Menu du compte ------------------------------------------------------- */

.compte {
    position: relative;
}

.compte > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    cursor: pointer;
    color: var(--gleba);
}

.compte > summary::-webkit-details-marker {
    display: none;
}

.compte > summary:hover,
.compte[open] > summary {
    background-color: rgba(239, 231, 216, 0.12);
}

.compte-texte,
.compte-chevron {
    display: none;
}

.compte-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 200;
    width: min(290px, calc(100vw - 24px));
    padding: 6px;
    background-color: var(--craie);
    color: var(--encre);
    border: 1px solid var(--trait);
    border-radius: var(--r-carte);
    box-shadow: var(--ombre);
}

.compte-email {
    padding: 10px 12px 8px;
    font-size: var(--t-sm);
    color: var(--encre-2);
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--trait);
    margin-bottom: 4px;
}

.compte-lien {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-ctrl);
    background: none;
    color: var(--encre);
    font: inherit;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.compte-lien:hover {
    background-color: var(--craie-2);
}

.compte-lien svg {
    color: var(--encre-3);
}

.compte-menu form {
    margin: 4px 0 0;
    padding-top: 4px;
    border-top: 1px solid var(--trait);
}

/* --- Contenu ------------------------------------------------------------ */

.contenu {
    padding: 18px 16px calc(var(--onglets-h) + var(--bas-securite) + 32px);
    max-width: 1180px;
    margin: 0 auto;
}

body.public .contenu {
    padding-bottom: 40px;
}

/* ==========================================================================
   Ordinateur (≥ 768 px) : la coquille devient la barre latérale
   ========================================================================== */

@media (min-width: 768px) {
    .coquille {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--nav-w);
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 20px 14px 14px;
        overflow-y: auto;
        background-image: linear-gradient(to bottom, transparent 0, transparent 140px, var(--truffe) 360px), var(--marbrure);
        background-repeat: no-repeat, repeat;
        background-size: auto, 420px 260px;
    }

    .coquille .marque {
        padding: 0 8px;
        font-size: 1.375rem;
    }


    .coquille .marque-nom {
        display: inline;
    }

    .exploitation {
        flex: none;
        margin: 18px 8px 22px;
        padding: 12px 14px;
        border-radius: var(--r-ctrl);
        background-color: rgba(239, 231, 216, 0.07);
        border: 1px solid rgba(239, 231, 216, 0.12);
    }

    .exploitation-nom {
        font-size: var(--t-md);
        white-space: normal;
    }

    .onglets,
    .nav-secondaire {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 2px;
        height: auto;
        padding: 0;
        background: none;
        border: 0;
    }

    .nav-secondaire {
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid rgba(239, 231, 216, 0.12);
    }

    .onglet {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        min-height: 44px;
        padding: 0 12px;
        border-radius: var(--r-ctrl);
        color: rgba(239, 231, 216, 0.74);
        font-size: var(--t-md);
        font-weight: 450;
    }

    .onglet .onglet-icone {
        width: auto;
        height: auto;
        border-radius: 0;
    }

    .onglet:hover {
        background-color: rgba(239, 231, 216, 0.08);
        color: var(--gleba);
    }

    .onglet[aria-current="page"] {
        background-color: var(--chene);
        color: #fff;
        font-weight: 600;
    }

    .onglet[aria-current="page"] .onglet-icone {
        background: none;
    }

    .compte {
        margin-top: auto;
        padding-top: 14px;
    }

    .compte > summary {
        width: 100%;
        height: auto;
        min-height: 52px;
        justify-content: flex-start;
        gap: 10px;
        padding: 8px 10px;
        border-radius: var(--r-ctrl);
        border: 1px solid rgba(239, 231, 216, 0.14);
    }

    .compte-texte {
        display: block;
        min-width: 0;
        flex: 1;
        font-size: var(--t-sm);
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .compte-chevron {
        display: inline-flex;
        color: var(--gleba-2);
        transform: rotate(180deg);
    }

    .compte[open] .compte-chevron {
        transform: none;
    }

    .compte-menu {
        top: auto;
        bottom: calc(100% + 6px);
        left: 0;
        right: auto;
        width: 100%;
    }

    /* Déjà dans .nav-secondaire sur ordinateur */
    .compte-lien-mobile {
        display: none;
    }

    .contenu {
        margin-left: var(--nav-w);
        margin-right: 0;
        max-width: none;
        padding: 34px 44px 56px;
    }

    .contenu > * {
        max-width: 1120px;
    }

    body.public .contenu {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================================
   En-tête de page
   ========================================================================== */

.entete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 20px;
}

.entete h1 {
    font-size: var(--t-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.entete-sous {
    margin: 6px 0 0;
    max-width: 62ch;
    color: var(--encre-2);
    font-size: var(--t-sm);
}

.entete-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

@media (min-width: 768px) {
    .entete h1 {
        font-size: var(--t-2xl);
    }

    .entete {
        margin-bottom: 26px;
    }
}

.section {
    margin-top: 32px;
}

.section:first-child {
    margin-top: 0;
}

.section-titre {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    font-size: var(--t-lg);
    font-weight: 650;
}

.section-note {
    font-size: var(--t-sm);
    font-weight: 400;
    color: var(--encre-3);
    letter-spacing: 0;
}

/* Deux colonnes sur grand écran : contenu principal + panneau */
.colonnes {
    display: grid;
    gap: 28px;
}

@media (min-width: 1080px) {
    .colonnes {
        grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
        align-items: start;
        gap: 36px;
    }

    .colonnes-egales {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .colle {
        position: sticky;
        top: 34px;
    }
}

/* ==========================================================================
   Composants
   ========================================================================== */

/* --- Cartes : filet fin, pas d'ombre (l'ombre est réservée au flottant) --- */

.card {
    background-color: var(--craie);
    border: 1px solid var(--trait);
    border-radius: var(--r-carte);
    padding: 18px;
}

.card + .card {
    margin-top: 16px;
}

.card-titre {
    margin-bottom: 12px;
    font-size: var(--t-md);
    font-weight: 650;
}

/* Encart : accueil, consignes, file hors connexion */
.encart {
    padding: 16px 18px;
    margin-bottom: 18px;
    background-color: var(--lichen);
    border-radius: var(--r-carte);
    color: var(--chene-fonce);
}

.encart strong {
    display: block;
    font-size: var(--t-md);
    margin-bottom: 4px;
    color: var(--encre);
}

.encart p {
    margin: 0 0 12px;
}

.encart p:last-child {
    margin-bottom: 0;
}

.encart-recolte {
    background-color: var(--brule-pale);
    color: var(--brule-fonce);
}

/* Saisies hors connexion refusées par le serveur, à reprendre (pwa.js) */
.encart-refusees {
    background-color: var(--erreur-pale);
    color: var(--erreur);
}

.encart-refusees .liste {
    margin-top: 12px;
}

/* Au téléphone, les actions passent sous le texte : le motif garde la largeur */
.encart-refusees .ligne {
    grid-template-columns: auto minmax(0, 1fr);
}

.encart-refusees .ligne-fin {
    grid-column: 2;
    justify-self: start;
}

/* Date et parcelle entières : c'est ce qui permet de retrouver la truffe */
.encart-refusees .ligne-titre > span {
    white-space: normal;
}

@media (min-width: 640px) {
    .encart-refusees .ligne {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .encart-refusees .ligne-fin {
        grid-column: auto;
        justify-self: end;
    }
}

/* --- Boutons -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--trait-fort);
    border-radius: var(--r-ctrl);
    background-color: var(--craie);
    color: var(--encre);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}

.btn:hover {
    background-color: var(--craie-2);
    border-color: var(--encre-3);
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled {
    opacity: 0.45;
    cursor: default;
    transform: none;
}

/* Action principale : le noir truffe */
.btn-primary {
    background-color: var(--truffe);
    border-color: var(--truffe);
    color: var(--gleba);
}

.btn-primary:hover {
    background-color: var(--truffe-2);
    border-color: var(--truffe-2);
}

.btn-danger {
    background-color: var(--craie);
    border-color: rgba(179, 64, 47, 0.45);
    color: var(--erreur);
}

.btn-danger:hover {
    background-color: var(--erreur-pale);
    border-color: var(--erreur);
}

.btn-danger-plein {
    background-color: var(--erreur);
    border-color: var(--erreur);
    color: #fff;
}

.btn-danger-plein:hover {
    background-color: #96351f;
}

.btn-discret {
    border-color: transparent;
    background-color: transparent;
}

.btn-discret:hover {
    background-color: rgba(31, 26, 21, 0.06);
    border-color: transparent;
}

.btn-sm {
    min-height: 38px;
    padding: 0 13px;
    font-size: var(--t-sm);
}

.btn-bloc {
    width: 100%;
    min-height: 58px;
    font-size: 1.125rem;
    border-radius: 14px;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-ctrl);
    background: none;
    color: var(--encre-2);
    cursor: pointer;
    text-decoration: none;
}

.icon-btn:hover {
    background-color: rgba(31, 26, 21, 0.06);
    color: var(--encre);
}

.icon-btn-danger:hover {
    background-color: var(--erreur-pale);
    color: var(--erreur);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.actions-fin {
    justify-content: flex-end;
}

.actions .pousse {
    margin-right: auto;
}

/* --- Champs ----------------------------------------------------------------- */

/* Styles de base des champs sous :where() (spécificité nulle) : tout composant
   (.compteur input, .plan-recherche input…) les surcharge d'une seule classe */
:where(input:not([type="radio"]):not([type="checkbox"]):not([type="color"]):not([type="hidden"]), select, textarea) {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    font: inherit;
    font-size: 1rem;
    color: var(--encre);
    background-color: var(--craie);
    border: 1px solid var(--trait-fort);
    border-radius: var(--r-ctrl);
    transition: border-color 0.15s;
}

:where(input:not([type="radio"]):not([type="checkbox"]):not([type="color"]), select, textarea):hover {
    border-color: var(--encre-3);
}

:where(input:not([type="radio"]):not([type="checkbox"]), select, textarea):focus {
    outline: 2px solid var(--chene);
    outline-offset: 0;
    border-color: var(--chene);
}

:where(select) {
    appearance: none;
    padding-right: 36px;
    background-image: var(--chevron);
    background-repeat: no-repeat;
    background-position: right 13px center;
    cursor: pointer;
}

:where(textarea) {
    resize: vertical;
}

::placeholder {
    color: var(--encre-3);
    opacity: 0.8;
}

input[type="color"] {
    width: 52px;
    height: 46px;
    padding: 4px;
    border: 1px solid var(--trait-fort);
    border-radius: var(--r-ctrl);
    background-color: var(--craie);
    cursor: pointer;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.field > label,
.field-label {
    font-weight: 600;
    font-size: var(--t-sm);
}

.field-hint {
    font-size: var(--t-xs);
    color: var(--encre-3);
    font-weight: 400;
}

.field-error {
    color: var(--erreur);
    font-size: var(--t-sm);
    font-weight: 500;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}

.form-grid .field {
    margin-bottom: 0;
}

.form-grid .field-wide {
    grid-column: 1 / -1;
}

/* Champ + bouton sur une ligne (renommage, ajout de valeur, mot de passe…) */
.en-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.en-ligne > input:not([type="color"]),
.en-ligne > select {
    flex: 1 1 180px;
    width: auto;
}

/* Groupes de choix (fieldset + legend) */
.groupe {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.groupe > legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: var(--t-sm);
}

.groupe > legend + * {
    clear: both;
}

/* --- Choix segmentés (radios en gros boutons) ---------------------------------- */

.segmented {
    display: grid;
    grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
    gap: 6px;
}

.segmented input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 52px;
    padding: 6px 4px;
    border: 1.5px solid var(--trait-fort);
    border-radius: var(--r-ctrl);
    background-color: var(--craie);
    color: var(--encre);
    font-weight: 600;
    font-size: var(--t-md);
    text-align: center;
    line-height: 1.15;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.12s, background-color 0.12s, color 0.12s;
}

.segmented label:hover {
    border-color: var(--chene);
}

.segmented input[type="radio"]:checked + label {
    background-color: var(--chene);
    border-color: var(--chene);
    color: #fff;
}

.segmented input[type="radio"]:focus-visible + label {
    outline: 2.5px solid var(--brule);
    outline-offset: 2px;
}

/* Cinq choix sur une ligne de téléphone (tailles) : texte resserré */
.segmented-serre label {
    padding: 6px 2px;
    font-size: var(--t-sm);
    letter-spacing: -0.01em;
}

/* --- Pastilles (filtres, calques) --------------------------------------------- */

.chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0;
    margin: -2px 0;
}

.chips::-webkit-scrollbar {
    display: none;
}

.chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid var(--trait-fort);
    border-radius: 999px;
    background-color: var(--craie);
    color: var(--encre-2);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.chip:hover {
    border-color: var(--chene);
    color: var(--chene-fonce);
}

.chip.active,
.chip[aria-pressed="true"],
.chips input[type="radio"]:checked + label.chip {
    background-color: var(--chene);
    border-color: var(--chene);
    color: #fff;
}

.chips input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chips input[type="radio"]:focus-visible + label.chip {
    outline: 2.5px solid var(--brule);
    outline-offset: 2px;
}

/* --- Badges & pastilles de couleur ---------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background-color: var(--craie-2);
    border: 1px solid var(--trait);
    color: var(--encre-2);
    font-size: var(--t-xs);
    font-weight: 600;
    white-space: nowrap;
}

.badge-recolte {
    background-color: var(--brule-pale);
    border-color: transparent;
    color: var(--brule-fonce);
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
    vertical-align: -1px;
    flex-shrink: 0;
}

/* --- Filtres (une rangée au-dessus de ce qu'ils filtrent) ------------------------- */

.filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 20px;
}

.filtres form {
    display: contents;
}

.filtre {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--encre-2);
}

.filtre select,
.filtre input {
    min-height: 42px;
    font-size: var(--t-sm);
    font-weight: 500;
}

.filtre {
    flex: 1 1 150px;
}

.filtre-saison {
    flex: 1 1 210px;
    max-width: 300px;
}

.filtre-court {
    flex: 0 1 120px;
}

.filtre-large {
    flex: 3 1 100%;
    min-width: 0;
}

/* Sélecteur de saison compact dans un en-tête */
.choix-saison {
    min-height: 42px;
    width: auto;
    max-width: 100%;
    font-size: var(--t-sm);
    font-weight: 600;
}

/* --- Panneaux repliables (formulaires d'ajout) --------------------------------------- */

details.panneau {
    background-color: var(--craie);
    border: 1px solid var(--trait);
    border-radius: var(--r-carte);
    margin-bottom: 20px;
}

details.panneau > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 0 18px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

details.panneau > summary::-webkit-details-marker {
    display: none;
}

details.panneau > summary .panneau-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background-color: var(--truffe);
    color: var(--gleba);
}

details.panneau > summary .chevron {
    margin-left: auto;
    color: var(--encre-3);
    transition: transform 0.15s;
}

details.panneau[open] > summary .chevron {
    transform: rotate(180deg);
}

details.panneau > .panneau-corps {
    padding: 4px 18px 18px;
}

/* --- Listes à lignes dépliables (remplacent les tableaux empilés) --------------------- */

.liste {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--craie);
    border: 1px solid var(--trait);
    border-radius: var(--r-carte);
    overflow: hidden;
}

.liste > li + li {
    border-top: 1px solid var(--trait);
}

.ligne {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 14px;
    min-height: 58px;
    padding: 10px 14px 10px 16px;
}

.ligne-sans-tete {
    grid-template-columns: minmax(0, 1fr) auto;
}

details.ligne-det > summary {
    list-style: none;
    cursor: pointer;
}

details.ligne-det > summary::-webkit-details-marker {
    display: none;
}

details.ligne-det > summary:hover {
    background-color: var(--craie-2);
}

details.ligne-det[open] > summary {
    background-color: var(--craie-2);
}

details.ligne-det > summary .chevron {
    color: var(--encre-3);
    transition: transform 0.15s;
}

details.ligne-det[open] > summary .chevron {
    transform: rotate(180deg);
}

.ligne-edition {
    padding: 14px 16px 16px;
    background-color: var(--craie-2);
    border-top: 1px dashed var(--trait-fort);
}

.ligne-tete {
    min-width: 3.4em;
    font-weight: 700;
    font-size: var(--t-md);
    font-variant-numeric: tabular-nums;
}

.ligne-corps {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ligne-titre {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    min-width: 0;
}

.ligne-titre > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ligne-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    color: var(--encre-2);
    font-size: var(--t-sm);
}

.ligne-fin {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-self: end;
}

.liste-vide {
    padding: 22px 18px;
    color: var(--encre-2);
}

.liste-pied {
    padding: 12px 16px;
    font-size: var(--t-sm);
    color: var(--encre-2);
    background-color: var(--craie-2);
}

/* --- Bilan chiffré (une bande, cellules séparées par des filets) ------------------------ */

.bilan {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 24px;
    background-color: var(--craie);
    border: 1px solid var(--trait);
    border-radius: var(--r-carte);
    overflow: hidden;
}

.bilan > div {
    padding: 14px 16px;
    border-top: 1px solid var(--trait);
}

.bilan > div:nth-child(-n+2) {
    border-top: 0;
}

.bilan > div:nth-child(2n) {
    border-left: 1px solid var(--trait);
}

.bilan dt {
    font-size: var(--t-sm);
    color: var(--encre-2);
}

.bilan dd {
    margin: 2px 0 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.bilan dd small {
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--encre-2);
    letter-spacing: 0;
}

@media (min-width: 640px) {
    .bilan {
        grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    }

    .bilan > div {
        border-top: 0;
    }

    .bilan > div + div {
        border-left: 1px solid var(--trait);
    }
}

/* --- Barres horizontales (répartitions) : une série, valeur au bout ----------------------- */

/* Une grille pour toute la liste : les barres partent du même bord même
   quand les libellés (noms de parcelles) n'ont pas la même longueur */
.barres {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(4.5em, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 9px 12px;
    font-size: var(--t-sm);
}

.barres li {
    display: contents;
}

.barre-label {
    max-width: 12em;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--encre-2);
    white-space: nowrap;
}

.barre-label small {
    margin-left: 4px;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--encre-3);
}

a.barre-label {
    color: var(--chene);
    font-weight: 600;
}

.barre-piste {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Données : 14 px d'épaisseur, bout arrondi 4 px, carré sur la ligne de base */
.barre {
    height: 14px;
    width: calc(var(--v, 0) * (100% - 3.2em));
    min-width: 2px;
    border-radius: 0 4px 4px 0;
    background-color: var(--serie-recolte);
}

/* Valeurs en poids (« 1,3 kg ») : plus larges qu'un nombre de truffes */
.barres-poids .barre {
    width: calc(var(--v, 0) * (100% - 4.6em));
}

.card-note {
    margin: 12px 0 0;
}

.barre-valeur {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--encre);
}

.repartitions {
    display: grid;
    gap: 16px;
}

@media (min-width: 640px) {
    .repartitions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.colonnes .repartitions {
    grid-template-columns: minmax(0, 1fr);
}

/* Graphiques Chart.js : le conteneur inclut la bande d'axe x */
.graphique {
    position: relative;
    height: 240px;
}

.graphique-lg {
    height: 320px;
}

/* --- Messages (toasts) ---------------------------------------------------------- */

.toast-zone {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    width: min(calc(100vw - 24px), 480px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 14px;
    background-color: var(--craie);
    border: 1px solid var(--trait);
    box-shadow: var(--ombre);
    font-weight: 500;
    font-size: var(--t-sm);
    pointer-events: auto;
    animation: toast-entree 0.22s ease-out;
    transition: opacity 0.35s, transform 0.35s;
}

.flash::before {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.flash.success::before {
    content: "✓";
    background-color: var(--succes);
}

.flash.error {
    border-color: rgba(179, 64, 47, 0.35);
}

.flash.error::before {
    content: "!";
    background-color: var(--erreur);
}

.flash.hide {
    opacity: 0;
    transform: translateY(-8px);
}

@keyframes toast-entree {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ==========================================================================
   Saisie d'une truffe
   ========================================================================== */

.saisie {
    background-color: var(--craie);
    border: 1px solid var(--trait);
    border-radius: var(--r-feuille);
    padding: 18px 16px 6px;
}

.saisie-arbre {
    margin-bottom: 20px;
}

.saisie-arbre > label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: var(--t-sm);
}

.compteur {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 60px;
    gap: 8px;
}

.compteur-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    border: 1.5px solid var(--trait-fort);
    border-radius: var(--r-ctrl);
    background-color: var(--craie-2);
    color: var(--encre);
    cursor: pointer;
}

.compteur-btn:hover {
    border-color: var(--encre-3);
}

.compteur-btn:active {
    background-color: var(--trait);
}

.saisie .compteur input[type="number"] {
    min-height: 64px;
    padding: 4px 8px;
    border-width: 1.5px;
    font-size: 2.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    -moz-appearance: textfield;
}

.compteur input::-webkit-outer-spin-button,
.compteur input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.saisie-arbre .field-hint {
    display: block;
    margin-top: 6px;
}

.saisie-raccourcis {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* « Même chêne que la dernière : n°288, La combe du haut » : avec le nom de la
   parcelle, le raccourci passe à la ligne au lieu d'élargir la page */
.saisie-raccourcis .chip {
    flex: 0 1 auto;
    padding-block: 8px;
    white-space: normal;
    text-align: left;
}

/* Boussole : de quel côté de l'arbre ? N/O/E/S autour du houppier */
.boussole {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, 52px);
    grid-template-areas:
        ".     nord  ."
        "ouest arbre est"
        ".     sud   .";
    gap: 6px;
}

.boussole label[for$="_n"] {
    grid-area: nord;
}

.boussole label[for$="_o"] {
    grid-area: ouest;
}

.boussole label[for$="_e"] {
    grid-area: est;
}

.boussole label[for$="_s"] {
    grid-area: sud;
}

.boussole-arbre {
    grid-area: arbre;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Le houppier vu du dessus, avec le numéro saisi au centre */
.boussole-arbre::before {
    content: "";
    position: absolute;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: var(--lichen);
    box-shadow: 0 0 0 6px rgba(223, 230, 218, 0.45);
}

.boussole-numero {
    position: relative;
    font-weight: 700;
    font-size: var(--t-sm);
    color: var(--chene-fonce);
    font-variant-numeric: tabular-nums;
}

.saisie-envoi {
    position: sticky;
    bottom: calc(var(--onglets-h) + var(--bas-securite));
    z-index: 10;
    margin: 4px -16px 0;
    padding: 12px 16px 14px;
    background: linear-gradient(to top, var(--craie) 72%, rgba(252, 252, 250, 0));
    border-radius: 0 0 var(--r-feuille) var(--r-feuille);
}

/* Journal du jour à côté du formulaire */
.journal-heure {
    color: var(--encre-3);
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .saisie {
        padding: 24px 24px 8px;
    }

    .saisie-envoi {
        position: static;
        margin: 6px 0 0;
        padding: 0 0 16px;
        background: none;
    }

    .saisie-paires {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0 20px;
    }
}

/* ==========================================================================
   Plan de la truffière (lecture) et éditeur de parcelle
   ========================================================================== */

/* Page plein écran : le plan occupe toute la hauteur disponible. Hauteur
   minimale, et non fixe, avec la place des onglets réservée en bas : sur un
   petit téléphone, le plan s'arrête à sa hauteur minimale et la page défile
   juste assez pour atteindre les liens du dessous, au lieu de les laisser
   sous les onglets. */
body.plein-ecran .contenu {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--barre-h));
    padding: 14px 12px calc(var(--onglets-h) + var(--bas-securite) + 12px);
}

body.plein-ecran .entete {
    margin-bottom: 12px;
}

body.plein-ecran .entete h1 {
    font-size: var(--t-xl);
}

body.plein-ecran .entete-sous {
    margin-top: 2px;
}

.plan-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 12px;
}

/* Parcelle (s'il y en a plusieurs) et saison : deux listes côte à côte */
.plan-choix {
    display: flex;
    gap: 8px;
    flex: 1 1 200px;
    max-width: 300px;
}

.plan-choix:has(select + label + select) {
    flex-basis: 320px;
    max-width: 520px;
}

.plan-barre .choix-saison {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}

/* La parcelle prend la largeur de son nom : la saison garde la sienne lisible */
.plan-barre #parcelle-select {
    flex: 0 1 auto;
    width: auto;
    max-width: 50%;
}

/* Les calques passent sous la saison, en pleine largeur (défilement
   horizontal sur téléphone), et à côté d'elle sur grand écran */
.plan-barre .chips {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 1100px) {
    .plan-barre .chips {
        flex-basis: 0;
    }
}

.plan {
    position: relative;
    flex: 1;
    min-height: 300px;
    border: 1px solid var(--trait);
    border-radius: var(--r-carte);
    overflow: hidden;
    background-color: var(--craie-2);
}

.map-container {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(31, 26, 21, 0.09) 1px, transparent 1px);
    background-size: 24px 24px;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}

.map-container:active {
    cursor: grabbing;
}

#panzoom-canvas {
    position: relative;
}

.map-hint {
    position: absolute;
    left: 12px;
    bottom: 14px;
    z-index: 5;
    max-width: calc(100% - 90px);
    padding: 7px 14px;
    border-radius: 999px;
    background-color: rgba(31, 26, 21, 0.86);
    color: var(--gleba);
    font-size: var(--t-xs);
    font-weight: 500;
    text-align: center;
    pointer-events: none;
    animation: hint-fondu 6s ease forwards;
}

@keyframes hint-fondu {

    0%,
    78% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Outils flottants : zoom, recentrer */
.plan-outils {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    background-color: var(--craie);
    border: 1px solid var(--trait);
    border-radius: 14px;
    box-shadow: var(--ombre);
    overflow: hidden;
}

.plan-outils button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    background: none;
    color: var(--encre);
    cursor: pointer;
}

.plan-outils button + button {
    border-top: 1px solid var(--trait);
}

.plan-outils button:hover {
    background-color: var(--craie-2);
}

.plan-outils button:disabled {
    color: var(--trait-fort);
    cursor: default;
}

/* Recherche d'un chêne, flottante en haut à droite */
.plan-recherche {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 7;
    display: flex;
    background-color: var(--craie);
    border: 1px solid var(--trait);
    border-radius: 14px;
    box-shadow: var(--ombre);
    overflow: hidden;
}

.plan-recherche input[type="number"] {
    width: 104px;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    font-size: var(--t-sm);
    font-weight: 600;
    -moz-appearance: textfield;
}

.plan-recherche input::-webkit-outer-spin-button,
.plan-recherche input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.plan-recherche button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    border: 0;
    border-left: 1px solid var(--trait);
    background: none;
    color: var(--encre);
    cursor: pointer;
}

.plan-recherche button:hover {
    background-color: var(--craie-2);
}

/* Légende flottante */
.plan-legende {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 6;
    max-width: calc(100% - 184px);
    padding: 10px 12px;
    background-color: rgba(252, 252, 250, 0.96);
    border: 1px solid var(--trait);
    border-radius: 14px;
    box-shadow: var(--ombre);
    font-size: var(--t-xs);
}

.plan-legende summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.plan-legende summary::-webkit-details-marker {
    display: none;
}

.plan-legende[open] summary {
    margin-bottom: 8px;
}

.plan-legende[open] summary .chevron {
    transform: rotate(180deg);
}

.legende-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    max-width: 420px;
}

.legende-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--encre-2);
}

.legende-echelle {
    display: flex;
    gap: 2px;
}

.legende-echelle span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 34px;
    color: var(--encre-2);
    font-variant-numeric: tabular-nums;
}

.legende-echelle i {
    width: 100%;
    height: 10px;
    border-radius: 2px;
}

/* Arbres */
.tree {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    background-color: var(--arbre);
    box-shadow: inset 0 0 0 1.5px var(--arbre-bord);
    color: var(--truffe);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

/* Calques de soins : la couleur vient du style inline, le contour s'efface */
.tree[style*="background-color"] {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

.tree[data-niveau="1"] {
    background-color: var(--recolte-1);
    box-shadow: none;
}

.tree[data-niveau="2"] {
    background-color: var(--recolte-2);
    box-shadow: none;
}

.tree[data-niveau="3"] {
    background-color: var(--recolte-3);
    box-shadow: none;
    color: #fff;
}

.tree[data-niveau="4"] {
    background-color: var(--recolte-4);
    box-shadow: none;
    color: #fff;
}

/* Calque évolution : mêmes couleurs sur l'arbre et dans la légende */
[data-evolution="premieres"] {
    background-color: var(--evolution-premieres);
    color: #fff;
}

[data-evolution="hausse"] {
    background-color: var(--evolution-hausse);
}

[data-evolution="stable"] {
    background-color: var(--arbre);
}

[data-evolution="baisse"] {
    background-color: var(--evolution-baisse);
}

[data-evolution="arret"] {
    background-color: var(--evolution-arret);
    color: #fff;
}

[data-evolution="jamais"] {
    background-color: var(--craie);
    box-shadow: inset 0 0 0 1.5px var(--arbre-bord);
}

.legende-item small {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--encre-3);
}

.tree .tree-id {
    display: none;
}

.tree:hover {
    outline: 2px solid var(--truffe);
    outline-offset: 2px;
    z-index: 4;
}

.tree.selected {
    outline: 3px solid var(--truffe);
    outline-offset: 3px;
    z-index: 5;
}

/* Fiche d'un arbre : feuille au bas du plan (mobile), carte à droite (ordinateur) */
.fiche-arbre {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 8;
    padding: 16px 16px 14px;
    background-color: var(--craie);
    border: 1px solid var(--trait);
    border-radius: var(--r-feuille);
    box-shadow: var(--ombre);
    animation: fiche-entree 0.18s ease-out;
}

@keyframes fiche-entree {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

.fiche-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fiche-tete h2 {
    font-size: var(--t-lg);
    font-weight: 700;
}

.fiche-sous {
    margin: 2px 0 0;
    color: var(--encre-2);
    font-size: var(--t-sm);
}

.fiche-tete .icon-btn {
    margin: -8px -8px 0 0;
}

.fiche-evolution {
    margin: 10px 0 0;
    font-size: var(--t-sm);
    font-weight: 500;
}

/* Ses dernières saisons : saison, barre des truffes notées et leur nombre, poids estimé */
.fiche-saisons {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    gap: 4px 10px;
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    color: var(--encre-2);
}

.fiche-saisons li {
    display: contents;
}

.fiche-saisons li.choisie {
    font-weight: 650;
    color: var(--encre);
}

.fiche-saisons .piste {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.fiche-saisons .barre {
    height: 10px;
    width: calc(var(--v, 0) * (100% - 2.6em));
}

.fiche-saisons .poids {
    text-align: right;
}

.fiche-soins {
    margin: 12px 0 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    font-size: var(--t-sm);
}

.fiche-soins dt {
    color: var(--encre-2);
}

.fiche-soins dd {
    margin: 0;
    font-weight: 500;
}

.fiche-arbre .actions {
    margin-top: 14px;
}

.fiche-arbre .actions .btn {
    flex: 1 1 140px;
}

@media (min-width: 768px) {
    body.plein-ecran .contenu {
        height: 100dvh;
        padding: 26px 32px 24px;
    }

    body.plein-ecran .contenu > * {
        max-width: none;
    }

    .fiche-arbre {
        left: auto;
        right: 70px;
        bottom: 12px;
        width: 330px;
    }
}

/* --- Éditeur de parcelle --- */

#panzoom-canvas.grille {
    background-color: #fbfbf8;
    /* Lignes fines à chaque pas, appuyées toutes les 5 cellules (épaisses en
       coordonnées canevas : elles restent visibles plan dézoomé). Grille
       carrée : le même pas --pas, posé par parcelle.html, dans les deux sens. */
    background-image:
        repeating-linear-gradient(to right, rgba(46, 81, 53, 0.42) 0 3px, transparent 3px calc(var(--pas) * 5)),
        repeating-linear-gradient(to bottom, rgba(46, 81, 53, 0.42) 0 3px, transparent 3px calc(var(--pas) * 5)),
        repeating-linear-gradient(to right, rgba(46, 81, 53, 0.22) 0 2px, transparent 2px var(--pas)),
        repeating-linear-gradient(to bottom, rgba(46, 81, 53, 0.22) 0 2px, transparent 2px var(--pas));
}

/* En édition, les numéros restent lisibles en permanence */
.parcelle-edit .tree {
    background-color: var(--truffe);
    box-shadow: none;
    color: var(--gleba);
    font-size: 10px;
}

.parcelle-edit .tree .tree-id {
    display: inline;
}

.tree.draft {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--brule);
}

.map-container[data-mode="tracer"] {
    cursor: crosshair;
}

.map-container[data-mode="effacer"] {
    cursor: not-allowed;
}

/* Palette d'outils flottante (modes de l'éditeur) */
.editeur-modes {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    gap: 4px;
    padding: 4px;
    background-color: var(--craie);
    border: 1px solid var(--trait);
    border-radius: 14px;
    box-shadow: var(--ombre);
}

.mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--encre-2);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    cursor: pointer;
}

.mode-btn:hover {
    background-color: var(--craie-2);
    color: var(--encre);
}

.mode-btn.active {
    background-color: var(--chene);
    color: #fff;
}

.editeur-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 14px;
    margin-top: 12px;
}

.etat-brouillon {
    margin-right: auto;
    color: var(--encre-2);
    font-size: var(--t-sm);
    font-weight: 500;
}

#panneau-arbre .en-ligne input {
    flex: 1 1 90px;
}

@media (max-width: 420px) {
    .mode-btn {
        padding: 0 10px;
    }
}

/* ==========================================================================
   Récoltes : sorties et répartitions
   ========================================================================== */

.sortie-poids {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Jour importé d'un carnet sans pesée : ni pesé, ni « à peser » */
.sortie-non-pesee {
    font-size: var(--t-sm);
    color: var(--encre-3);
    white-space: nowrap;
}

/* Truffes d'une sortie en cours de chargement (recoltes.js), ou introuvables */
.sortie-chargement {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--trait);
    font-size: var(--t-sm);
    color: var(--encre-2);
}

.sortie-truffes {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    border-top: 1px solid var(--trait);
}

.sortie-truffes > li {
    border-bottom: 1px solid var(--trait);
}

.sortie-truffes .ligne {
    padding-left: 0;
    padding-right: 0;
    min-height: 50px;
}

.sortie-truffes details.ligne-det > summary:hover,
.sortie-truffes details.ligne-det[open] > summary {
    background: none;
}

.sortie-truffes .ligne-edition {
    border: 0;
    border-radius: var(--r-ctrl);
    background-color: var(--craie);
    margin-bottom: 10px;
}

/* ==========================================================================
   Eau
   ========================================================================== */

/* Le formulaire vient en premier sur mobile, en colonne de droite sur ordinateur */
@media (min-width: 1080px) {
    .colonnes-eau > .eau-ajout {
        grid-column: 2;
        grid-row: 1;
    }

    .colonnes-eau > .eau-principal {
        grid-column: 1;
        grid-row: 1;
    }
}

.eau-principal > .card + .card {
    margin-top: 16px;
}

.eau-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.eau-pluie {
    background-color: #e2ebf5;
    color: var(--serie-pluie);
}

.eau-arrosage {
    background-color: #e2eee6;
    color: var(--serie-arrosage);
}

.filtres > .chips {
    flex: 1 1 100%;
}

/* ==========================================================================
   Soins
   ========================================================================== */

/* Choix du type dans un formulaire : les pastilles passent à la ligne */
.chips-choix {
    flex-wrap: wrap;
    overflow: visible;
}

.tous-les-chenes {
    align-self: flex-start;
    margin-top: 4px;
}

.resume-soins {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px 32px;
}

.resume-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.resume-liste li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    border-top: 1px solid var(--trait);
    font-size: var(--t-sm);
}

.resume-liste li:first-child {
    border-top: 0;
}

.resume-label {
    flex: 1;
    min-width: 0;
    color: var(--encre-2);
}

.resume-liste strong {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Réglages
   ========================================================================== */

.reglage-type + .reglage-type {
    margin-top: 16px;
}

.reglage-type .liste {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.reglage-entete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.reglage-entete h3 {
    flex: 1;
    font-size: var(--t-md);
    font-weight: 650;
}

.reglage-type .ajout-valeur {
    margin-top: 14px;
}

details.renommer {
    margin: -6px 0 12px;
}

details.renommer > summary {
    list-style: none;
    margin-left: -13px;
    color: var(--encre-2);
}

details.renommer > summary::-webkit-details-marker {
    display: none;
}

li.liste-vide {
    font-size: var(--t-sm);
}

.card .liste {
    margin: 0 -18px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.zone-sensible {
    border-color: rgba(179, 64, 47, 0.3);
}

.zone-sensible summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--erreur);
}

/* ==========================================================================
   Authentification
   ========================================================================== */

.auth {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100dvh;
}

.auth-marque {
    padding: 22px 20px 26px;
    background-color: var(--truffe);
    background-image: radial-gradient(120% 140% at 85% -20%, var(--truffe-2) 0%, transparent 60%), var(--marbrure);
    background-size: auto, 420px 260px;
    color: var(--gleba);
}

.auth-marque .marque {
    font-size: 1.5rem;
}

.auth-marque .marque-tuile {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.auth-marque .marque-tuile svg {
    width: 31px;
    height: 31px;
}

.auth-accroche {
    margin: 14px 0 0;
    max-width: 30ch;
    font-size: var(--t-lg);
    font-weight: 500;
    line-height: 1.3;
    color: var(--gleba);
}

.auth-points {
    display: none;
}

.auth-form {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 28px 20px 40px;
}

.auth-form h1 {
    font-size: var(--t-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.auth-form .entete-sous {
    margin-bottom: 22px;
}

.auth-alt {
    margin-top: 20px;
    color: var(--encre-2);
    font-size: var(--t-sm);
}

@media (min-width: 900px) {
    .auth {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: none;
    }

    .auth-marque {
        display: flex;
        flex-direction: column;
        padding: 44px 56px;
    }

    .auth-accroche {
        margin-top: auto;
        font-size: 2.125rem;
        font-weight: 650;
        letter-spacing: -0.02em;
        line-height: 1.15;
    }

    .auth-points {
        display: grid;
        gap: 10px;
        margin: 26px 0 0;
        padding: 0;
        list-style: none;
        color: var(--gleba-2);
        max-width: 42ch;
    }

    .auth-points li {
        padding-left: 18px;
        position: relative;
    }

    .auth-points li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.6em;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: var(--brule);
    }

    .auth-form {
        align-self: center;
        padding: 48px 40px;
    }
}

body.public.page-auth .contenu {
    padding: 0;
    max-width: none;
}

body.public.page-auth .contenu > * {
    max-width: none;
}

/* ==========================================================================
   Pages d'erreur, texte légal, coquille hors connexion
   ========================================================================== */

.erreur-page {
    max-width: 520px;
    padding: 8vh 0;
}

.erreur-code {
    margin: 0 0 6px;
    font-size: 4rem;
    font-weight: 700;
    color: var(--trait-fort);
    letter-spacing: -0.03em;
    line-height: 1;
}

.texte-legal {
    max-width: 68ch;
}

.texte-legal h2 {
    margin: 28px 0 8px;
    font-size: var(--t-lg);
    font-weight: 650;
}

.texte-legal h2:first-child {
    margin-top: 0;
}

.texte-legal li {
    margin-bottom: 6px;
}

.hors-ligne-barre {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--barre-h);
    padding: 0 16px;
    background-color: var(--truffe);
    background-image: var(--marbrure);
    color: var(--gleba);
    font-weight: 600;
}

body.hors-ligne .contenu {
    max-width: 640px;
    padding-bottom: 40px;
}

body.hors-ligne .saisie-envoi {
    bottom: 0;
}

/* ==========================================================================
   Mes parcelles
   ========================================================================== */

.parcelles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    align-items: start;
    gap: 16px;
}

.parcelles > .card + .card {
    margin-top: 0;
}

.parcelle-carte {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
}

.parcelle-carte h2 {
    font-size: var(--t-lg);
    font-weight: 650;
    letter-spacing: -0.01em;
}

.parcelle-meta {
    margin: 2px 0 0;
    color: var(--encre-2);
    font-size: var(--t-sm);
}

.parcelle-carte .actions {
    margin-top: 0;
}

.parcelle-carte details.renommer {
    margin: -4px 0 0;
}

.parcelle-carte details.renommer > summary .chevron {
    display: inline-flex;
    transition: transform 0.15s;
}

.parcelle-carte details.renommer[open] > summary {
    margin-bottom: 10px;
}

.parcelle-carte details.renommer[open] > summary .chevron {
    transform: rotate(180deg);
}

.parcelle-suppression {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--trait);
}

.parcelle-suppression .field-hint {
    margin: 0;
}

/* Petit plan : la forme de la parcelle d'un coup d'œil, ses chênes colorés
   selon leurs truffes de la saison (même rampe que le plan) */
.parcelle-apercu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: 16 / 9;
    padding: 12px;
    border-radius: var(--r-ctrl);
    background-color: var(--craie-2);
    background-image: radial-gradient(rgba(31, 26, 21, 0.08) 1px, transparent 1px);
    background-size: 14px 14px;
    overflow: hidden;
    transition: background-color 0.15s;
}

a.parcelle-apercu:hover {
    background-color: var(--lichen);
}

.parcelle-apercu .apercu-plan {
    display: block;
    width: 100%;
    height: 100%;
}

.parcelle-apercu circle {
    fill: var(--arbre);
    stroke: var(--arbre-bord);
    stroke-width: 3;
}

.parcelle-apercu circle[data-niveau] {
    stroke: none;
}

.parcelle-apercu circle[data-niveau="1"] { fill: var(--recolte-1); }
.parcelle-apercu circle[data-niveau="2"] { fill: var(--recolte-2); }
.parcelle-apercu circle[data-niveau="3"] { fill: var(--recolte-3); }
.parcelle-apercu circle[data-niveau="4"] { fill: var(--recolte-4); }

.parcelle-apercu-vide {
    border: 1.5px dashed var(--trait-fort);
    background-image: none;
    color: var(--encre-2);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
}

/* Confirmation d'un déplacement : ce que deviennent les numéros */
.confirmation {
    max-width: 760px;
}

.confirmation-liste {
    margin: 8px 0 0;
    padding-left: 1.2em;
}

.confirmation-liste li + li {
    margin-top: 4px;
}

.confirmation-conseil {
    margin-top: 10px !important;
    font-size: var(--t-sm);
    font-weight: 600;
}

.confirmation .actions {
    margin-top: 14px;
}

/* Liens sous le plan : modifier le tracé, les autres parcelles */
.plan-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 10px 0 0;
}

/* ==========================================================================
   Import d'un carnet (Excel, CSV) : trois étapes
   ========================================================================== */

.import-etapes {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: var(--t-sm);
    color: var(--encre-3);
}

.import-etapes li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.import-etapes span {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--trait-fort);
    font-size: var(--t-xs);
    font-weight: 700;
}

.import-etapes li.faite span {
    border-color: var(--chene);
    color: var(--chene);
}

.import-etapes li[aria-current="step"] {
    color: var(--encre);
    font-weight: 650;
}

.import-etapes li[aria-current="step"] span {
    background-color: var(--chene);
    border-color: var(--chene);
    color: #fff;
}

/* Carnet type : trois lignes, comme dans un tableur */
.import-exemple {
    width: 100%;
    margin: 4px 0 14px;
    border-collapse: collapse;
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
}

.import-exemple th,
.import-exemple td {
    padding: 5px 8px;
    border: 1px solid var(--trait);
    text-align: left;
}

.import-exemple th {
    background-color: var(--craie-2);
    font-weight: 600;
}

.import-historique {
    margin-top: 24px;
}

.import-consigne {
    margin: -4px 0 12px;
}

/* Une colonne du fichier par ligne : au téléphone, le choix passe dessous */
.import-colonnes .ligne {
    grid-template-columns: auto minmax(0, 1fr);
}

.import-colonnes .ligne-fin {
    grid-column: 2;
    justify-self: stretch;
}

.import-colonnes select {
    width: 100%;
}

/* Colonne ignorée : en retrait, pour voir d'un coup d'œil ce qui sera importé */
.import-colonnes .ligne:has(option[value=""]:checked) .ligne-corps {
    opacity: 0.55;
}

@media (min-width: 640px) {
    .import-colonnes .ligne {
        grid-template-columns: auto minmax(0, 1fr) 15em;
    }

    .import-colonnes .ligne-fin {
        grid-column: auto;
    }
}

.import-formulaire > section + section,
.import-formulaire > .card + section,
.import-formulaire > section + .card {
    margin-top: 20px;
}

.import-feuilles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.import-feuilles label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    font-weight: 500;
}

.import-feuilles input {
    width: 20px;
    height: 20px;
    accent-color: var(--chene);
}

.import-feuilles small {
    color: var(--encre-3);
}

.import-periode {
    margin: -10px 0 24px;
    max-width: 70ch;
    color: var(--encre-2);
}

.import-bloc {
    margin-top: 24px;
}

.import-conseil {
    margin: 0 0 8px;
    font-weight: 500;
}

.import-lignes {
    margin: 0;
    padding-left: 18px;
    font-size: var(--t-sm);
    color: var(--encre-2);
}

.import-actions {
    margin-top: 28px;
}

.import-actions form {
    display: contents;
}

/* ==========================================================================
   Invitation à installer l'app (dialog[data-installer], installation.js) :
   feuille posée en bas de l'écran du téléphone, centrée sur tablette
   ========================================================================== */

dialog.installer {
    width: min(calc(100vw - 24px), 440px);
    max-width: none;
    margin: auto auto calc(var(--bas-securite) + 12px);
    padding: 0;
    border: 0;
    border-radius: var(--r-carte);
    background-color: var(--craie);
    color: var(--encre);
    box-shadow: var(--ombre);
}

dialog.installer::backdrop {
    background-color: rgba(31, 26, 21, 0.45);
}

.installer-corps {
    padding: 14px 14px 16px 18px;
}

.installer-tete {
    display: flex;
    align-items: center;
    gap: 12px;
}

.installer-tete h2 {
    flex: 1;
    font-size: var(--t-md);
}

.installer-tete h2:focus {
    outline: none;
}

.installer-tete .icon-btn {
    margin: -6px -4px -6px 0;
}

.installer-texte {
    margin: 12px 4px 0 0;
    color: var(--encre-2);
}

.installer-etapes {
    display: grid;
    gap: 8px;
    margin: 12px 4px 0 0;
    padding-left: 1.4em;
}

.installer-icone {
    display: inline-flex;
    vertical-align: -3px;
    color: var(--chene);
}

.installer .actions {
    justify-content: flex-end;
    margin-right: 4px;
}

@media (min-width: 768px) {
    dialog.installer {
        margin-bottom: auto;
    }
}