/* =====================================================================
   CARNET DE CULTURE — feuille de style unique
   Direction : le sachet de graines. Papier gris-vert légèrement froid,
   titres à empattements doux et irréguliers, données en chasse fixe
   comme les informations imprimées au dos d'un sachet.
   Accent : bleuet — la fleur des bandes fleuries, pas la terre cuite.
   ===================================================================== */

:root {
    /* Palette */
    --encre:       #2A342E;   /* vert-noir, tout le texte                */
    --papier:      #E7EBE1;   /* fond de page, gris-vert froid           */
    --carte:       #FBFCF8;   /* surfaces posées sur le papier           */
    --trait:       #C8D0C2;   /* filets et séparations                   */
    --brume:       #7C8A7E;   /* texte secondaire, légendes              */
    --bleuet:      #3D5A9E;   /* accent : actions, liens, présent        */
    --bleuet-pale: #DDE4F2;
    --feuille:     #6E9155;   /* ce qui pousse, ce qui va bien           */
    --capucine:    #C4552E;   /* réservé aux alertes. Rien d'autre.      */
    --paille:      #D9C98A;   /* prévu, pas encore fait                  */

    /* Type */
    --display: 'Fraunces', Georgia, serif;
    --texte:   'Karla', system-ui, sans-serif;
    --donnee:  'IBM Plex Mono', ui-monospace, monospace;

    /* Rythme */
    --pas: 0.5rem;
    --largeur: 62rem;
    --rayon: 14px 4px 14px 4px;   /* volontairement dissymétrique */
}

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

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

body {
    margin: 0;
    padding: 0 0 5rem;
    background: var(--papier);
    /* Grain de papier : deux dégradés très légers, aucune image à charger */
    background-image:
        radial-gradient(circle at 15% 10%, rgba(110,145,85,.07), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(61,90,158,.05), transparent 45%);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 1rem;
    line-height: 1.55;
}

/* ---------- Typographie ---------------------------------------------- */

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 600;
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    line-height: 1.1;
    margin: 0 0 calc(var(--pas) * 1.5);
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
h2 { font-size: clamp(1.2rem, 3.5vw, 1.5rem); }
h3 { font-size: 1.05rem; }

a { color: var(--bleuet); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Les intitulés de champ, en petites capitales espacées */
.etiquette {
    font-family: var(--donnee);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brume);
}

/* Toute donnée chiffrée : date, quantité, écart */
.donnee { font-family: var(--donnee); font-size: .9rem; font-variant-numeric: tabular-nums; }

/* ---------- Ossature -------------------------------------------------- */

.enveloppe { max-width: var(--largeur); margin: 0 auto; padding: 0 1rem; }

.entete {
    padding: 1.25rem 0 .75rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.entete .marque {
    font-family: var(--display);
    font-variation-settings: 'SOFT' 60, 'WONK' 1;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--encre);
}
.entete .marque span { color: var(--feuille); }

/* ---------- Bande de saison — l'élément signature ---------------------
   Une année entière sur une ligne. Chaque culture y trace la durée
   prévue et la durée réelle. Le trait vertical, c'est aujourd'hui.      */

.bande {
    position: relative;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: .9rem .9rem .5rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.bande-mois {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    font-family: var(--donnee);
    font-size: .6rem;
    letter-spacing: .08em;
    color: var(--brume);
    text-transform: uppercase;
    border-bottom: 1px solid var(--trait);
    padding-bottom: .35rem;
    margin-bottom: .5rem;
}
.bande-mois span { text-align: center; }
/* Les mois de pleine saison respirent un peu plus */
.bande-mois span:nth-child(n+4):nth-child(-n+9) { color: var(--feuille); }

.bande-ligne {
    position: relative;
    height: 1.4rem;
    margin-bottom: .25rem;
}
.bande-ligne .nom {
    position: absolute;
    left: 0;
    font-size: .78rem;
    line-height: 1.4rem;
    white-space: nowrap;
    z-index: 2;
    padding-left: .3rem;
    mix-blend-mode: multiply;
}
.travee {
    position: absolute;
    top: .25rem;
    height: .9rem;
    border-radius: 999px;
    background: var(--paille);
    opacity: .55;
}
.travee.reelle { top: .45rem; height: .5rem; opacity: 1; background: var(--feuille); }

.aujourdhui {
    position: absolute;
    top: 2.2rem;
    bottom: .3rem;
    width: 1px;
    background: var(--bleuet);
    z-index: 3;
}
.aujourdhui::before {
    content: '';
    position: absolute;
    top: -4px; left: -3px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--bleuet);
}

/* ---------- Cartes ---------------------------------------------------- */

.grille { display: grid; gap: .75rem; }
@media (min-width: 40rem) { .grille.deux { grid-template-columns: 1fr 1fr; } }

.carte {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: .9rem 1rem;
    position: relative;
}
/* Le liseré de gauche porte la couleur de la famille botanique :
   c'est la donnée qui colore l'interface, pas l'inverse. */
.carte[data-famille] { border-left: 4px solid var(--famille, var(--trait)); }

.carte h3 { margin-bottom: .15rem; }
.carte .sous { color: var(--brume); font-size: .85rem; }

.bloc { margin: 0 0 2rem; }
.bloc > h2 { display: flex; align-items: baseline; gap: .6rem; }
.bloc > h2 .compte {
    font-family: var(--donnee);
    font-size: .75rem;
    color: var(--brume);
    font-weight: 400;
}

/* ---------- Prévu / réel : le tableau à deux colonnes ------------------ */

.confrontation {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: .3rem .9rem;
    align-items: baseline;
    font-family: var(--donnee);
    font-size: .85rem;
}
.confrontation .titre { grid-column: 1 / -1; }
.confrontation .prevu  { color: var(--brume); }
.confrontation .reel   { color: var(--encre); font-weight: 500; }
.ecart { font-size: .72rem; color: var(--brume); }
.ecart.retard  { color: var(--capucine); }
.ecart.avance  { color: var(--feuille); }

/* ---------- Journal --------------------------------------------------- */

.journal { list-style: none; margin: 0; padding: 0; }
.journal li {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--trait);
    align-items: baseline;
}
.journal li:last-child { border-bottom: 0; }
.journal .quand { font-family: var(--donnee); font-size: .75rem; color: var(--brume); }
.journal .quoi strong { font-weight: 600; }
.journal .note { display: block; color: var(--brume); font-size: .9rem; }

/* ---------- Pastilles ------------------------------------------------- */

.pastille {
    display: inline-block;
    font-family: var(--donnee);
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .18rem .5rem;
    border-radius: 999px;
    background: var(--bleuet-pale);
    color: var(--bleuet);
    white-space: nowrap;
}
.pastille.prevu   { background: #F2EBD4; color: #8A7434; }
.pastille.en_cours{ background: #E2EDDA; color: #4C6B39; }
.pastille.recolte { background: #DDE4F2; color: var(--bleuet); }
.pastille.echec   { background: #F6E0D8; color: var(--capucine); }
.pastille.termine { background: #E6E9E3; color: var(--brume); }

/* ---------- Alertes --------------------------------------------------- */

.alerte {
    border-left: 4px solid var(--capucine);
    background: #FAEDE7;
    padding: .7rem .9rem;
    border-radius: 4px 12px 12px 4px;
    font-size: .92rem;
}

/* ---------- Boutons et champs ----------------------------------------- */

.bouton {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--texte);
    font-size: .95rem;
    font-weight: 600;
    padding: .55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--bleuet);
    background: var(--bleuet);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton.discret { background: transparent; color: var(--bleuet); }
.bouton.large { width: 100%; justify-content: center; padding: .8rem; }

/* Saisie au jardin : cibles larges, une main, parfois des gants */
.gestes { display: flex; flex-wrap: wrap; gap: .5rem; }
.gestes button {
    flex: 1 1 8rem;
    min-height: 3rem;
    font-family: var(--texte);
    font-size: .95rem;
    border: 1px solid var(--trait);
    background: var(--carte);
    border-radius: var(--rayon);
    color: var(--encre);
    cursor: pointer;
}
.gestes button:hover { border-color: var(--bleuet); color: var(--bleuet); }

label { display: block; margin-bottom: .9rem; }
label .etiquette { display: block; margin-bottom: .25rem; }

input[type=text], input[type=date], input[type=number], input[type=email],
input[type=password], select, textarea {
    width: 100%;
    font-family: var(--texte);
    font-size: 1rem;
    padding: .55rem .7rem;
    border: 1px solid var(--trait);
    border-radius: 8px 3px 8px 3px;
    background: var(--carte);
    color: var(--encre);
}
textarea { min-height: 5rem; resize: vertical; }

:focus-visible {
    outline: 2px solid var(--bleuet);
    outline-offset: 2px;
}

/* ---------- Navigation basse (mobile) --------------------------------- */

.nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--carte);
    border-top: 1px solid var(--trait);
    padding: .4rem 0 max(.4rem, env(safe-area-inset-bottom));
    z-index: 10;
}
.nav a {
    text-align: center;
    text-decoration: none;
    color: var(--brume);
    font-size: .72rem;
    font-family: var(--donnee);
    letter-spacing: .04em;
    padding: .3rem 0;
}
.nav a.actif { color: var(--bleuet); }
.nav a::before {
    content: attr(data-signe);
    display: block;
    font-size: 1.1rem;
    line-height: 1.3;
}
@media (min-width: 48rem) {
    .nav {
        position: static;
        display: flex;
        gap: 1.25rem;
        border: 0;
        background: transparent;
        max-width: var(--largeur);
        margin: 0 auto 1rem;
        padding: 0 1rem;
    }
    .nav a { font-size: .8rem; }
    .nav a::before { display: none; }
    body { padding-bottom: 2rem; }
}

/* ---------- Vide et erreur -------------------------------------------- */

.vide {
    border: 1px dashed var(--trait);
    border-radius: var(--rayon);
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--brume);
}
.vide p { margin: 0 0 .8rem; }

/* ---------- Sélecteur d'année ----------------------------------------- */

.annees { display: flex; gap: .35rem; align-items: center; }
.annees a {
    font-family: var(--donnee);
    font-size: .78rem;
    text-decoration: none;
    color: var(--brume);
    padding: .15rem .45rem;
    border-radius: 999px;
}
.annees a.actif { background: var(--encre); color: var(--papier); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .bouton:hover { transform: none; }
}

/* ---------- Sélecteur de variété -------------------------------------- */

.liste-choix { list-style: none; margin: .6rem 0 0; padding: 0; }
.liste-choix li { margin-bottom: .3rem; }

.choix {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    width: 100%;
    text-align: left;
    font-family: var(--texte);
    font-size: .95rem;
    padding: .55rem .7rem;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-left: 4px solid var(--famille, var(--trait));
    border-radius: 4px 12px 12px 4px;
    color: var(--encre);
    cursor: pointer;
}
.choix:hover { border-color: var(--bleuet); border-left-color: var(--famille, var(--bleuet)); }
.choix span { color: var(--brume); }
.choix .sous { margin-left: auto; font-size: .7rem; }

.selecteur input[type=search] { font-size: 1.05rem; }