/* ==========================================================================
   Gestion de ferme avicole - feuille de style unique
   ========================================================================== */

:root {
    --vert-900: #14311a;
    --vert-700: #1f6b32;
    --vert-600: #2e7d32;
    --vert-500: #43a047;
    --vert-100: #e6f2e7;
    --vert-050: #f3f9f4;

    --ambre-600: #b26a00;
    --ambre-100: #fff3df;
    --rouge-600: #c62828;
    --rouge-100: #fdecec;
    --bleu-600:  #1565c0;
    --bleu-100:  #e7f0fb;

    --gris-900: #1b1d1c;
    --gris-700: #43494a;
    --gris-500: #6d7577;
    --gris-300: #cfd6d4;
    --gris-200: #e3e8e6;
    --gris-100: #f1f4f3;
    --blanc:    #ffffff;

    --fond:        #f5f7f6;
    --surface:     #ffffff;
    --bordure:     var(--gris-200);
    --texte:       var(--gris-900);
    --texte-doux:  var(--gris-500);

    --rayon:    10px;
    --rayon-sm: 6px;
    --ombre:    0 1px 2px rgba(16, 32, 20, .06), 0 2px 8px rgba(16, 32, 20, .05);
    --ombre-md: 0 4px 16px rgba(16, 32, 20, .10);

    --largeur-nav: 240px;
    --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
    margin: 0;
    font-family: var(--police);
    font-size: 15px;
    line-height: 1.55;
    color: var(--texte);
    background: var(--fond);
}

h1, h2, h3, h4 { margin: 0 0 .6rem; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .8rem; }

a { color: var(--vert-700); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ================================================================ layout */
.appli { display: flex; min-height: 100vh; }

.barre-laterale {
    width: var(--largeur-nav);
    flex: 0 0 var(--largeur-nav);
    background: var(--vert-900);
    color: #dbe7dc;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.marque {
    padding: 1.1rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.marque strong { display: block; color: #fff; font-size: 1.02rem; letter-spacing: .2px; }
.marque span   { display: block; font-size: .76rem; color: #9db8a2; margin-top: .1rem; }

.menu { padding: .6rem 0; flex: 1; }
.menu-groupe {
    padding: .9rem 1.15rem .3rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #7f9c86;
}
.menu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .52rem 1.15rem;
    color: #cfe0d2;
    font-size: .9rem;
    border-left: 3px solid transparent;
}
.menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.menu a.actif {
    background: rgba(67, 160, 71, .18);
    border-left-color: var(--vert-500);
    color: #fff;
    font-weight: 600;
}
.menu .ico { width: 18px; text-align: center; opacity: .9; flex: 0 0 18px; }

.pied-nav {
    padding: .85rem 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, .10);
    font-size: .8rem;
}
.pied-nav .qui { color: #fff; font-weight: 600; }
.pied-nav .role { color: #8fae96; font-size: .74rem; }
.pied-nav form { margin-top: .5rem; }
.pied-nav button {
    width: 100%;
    background: rgba(255, 255, 255, .08);
    border: 0;
    color: #dbe7dc;
    padding: .4rem;
    border-radius: var(--rayon-sm);
    cursor: pointer;
    font-size: .8rem;
    font-family: inherit;
}
.pied-nav button:hover { background: rgba(255, 255, 255, .16); }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.entete {
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}
.entete h1 { margin: 0; font-size: 1.22rem; }
.entete .sous-titre { color: var(--texte-doux); font-size: .84rem; }

.contenu { padding: 1.4rem 1.5rem 3rem; max-width: 1400px; width: 100%; }

/* ================================================================= cartes */
.carte {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    margin-bottom: 1.15rem;
    overflow: hidden;
}
.carte-entete {
    padding: .8rem 1.05rem;
    border-bottom: 1px solid var(--bordure);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
    background: var(--gris-100);
}
.carte-entete h2, .carte-entete h3 { margin: 0; font-size: .98rem; }
.carte-corps { padding: 1.05rem; }
.carte-corps.serre { padding: 0; }

/* ================================================================== KPI */
.grille-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .9rem;
    margin-bottom: 1.15rem;
}
.kpi {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: .9rem 1rem;
    box-shadow: var(--ombre);
}
.kpi .etiquette {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texte-doux);
    margin-bottom: .3rem;
}
.kpi .valeur { font-size: 1.6rem; font-weight: 680; line-height: 1.1; }
.kpi .detail { font-size: .78rem; color: var(--texte-doux); margin-top: .2rem; }
.kpi.vert  .valeur { color: var(--vert-600); }
.kpi.ambre .valeur { color: var(--ambre-600); }
.kpi.rouge .valeur { color: var(--rouge-600); }
.kpi.bleu  .valeur { color: var(--bleu-600); }

/* =============================================================== tableaux */
.tableau-conteneur { overflow-x: auto; }

table.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
table.tableau th {
    text-align: left;
    padding: .6rem .8rem;
    background: var(--gris-100);
    border-bottom: 1px solid var(--bordure);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gris-700);
    white-space: nowrap;
}
table.tableau td {
    padding: .58rem .8rem;
    border-bottom: 1px solid var(--gris-100);
    vertical-align: middle;
}
table.tableau tbody tr:hover { background: var(--vert-050); }
table.tableau tbody tr:last-child td { border-bottom: 0; }
table.tableau .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tableau .actions { text-align: right; white-space: nowrap; }
table.tableau tfoot td {
    padding: .6rem .8rem;
    border-top: 2px solid var(--bordure);
    font-weight: 650;
    background: var(--gris-100);
}

.vide {
    padding: 2.2rem 1rem;
    text-align: center;
    color: var(--texte-doux);
}
.vide .gros { font-size: 1.9rem; display: block; margin-bottom: .4rem; opacity: .55; }

/* ================================================================ badges */
.badge {
    display: inline-block;
    padding: .13rem .5rem;
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 620;
    line-height: 1.5;
    white-space: nowrap;
}
.badge.vert  { background: var(--vert-100);  color: var(--vert-700); }
.badge.gris  { background: var(--gris-200);  color: var(--gris-700); }
.badge.ambre { background: var(--ambre-100); color: var(--ambre-600); }
.badge.rouge { background: var(--rouge-100); color: var(--rouge-600); }
.badge.bleu  { background: var(--bleu-100);  color: var(--bleu-600); }

/* =============================================================== boutons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .48rem .9rem;
    border-radius: var(--rayon-sm);
    border: 1px solid transparent;
    background: var(--vert-600);
    color: #fff;
    font-size: .875rem;
    font-weight: 560;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--vert-700); text-decoration: none; color: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn.secondaire {
    background: var(--surface);
    color: var(--gris-700);
    border-color: var(--gris-300);
}
.btn.secondaire:hover { background: var(--gris-100); color: var(--gris-900); }

.btn.danger { background: var(--rouge-600); }
.btn.danger:hover { background: #a71d1d; }

.btn.petit { padding: .28rem .6rem; font-size: .8rem; }

.btn-lien {
    background: none;
    border: 0;
    padding: 0;
    color: var(--rouge-600);
    font-size: .82rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.btn-lien.neutre { color: var(--vert-700); }

.barre-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Sélecteur de ferme, dans l'en-tête */
.selecteur-ferme {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .5rem .2rem .6rem;
    background: var(--vert-050);
    border: 1px solid var(--vert-100);
    border-radius: var(--rayon-sm);
}
.selecteur-ferme label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vert-700);
    font-weight: 650;
    white-space: nowrap;
}
.selecteur-ferme select {
    width: auto;
    min-width: 150px;
    padding: .28rem .45rem;
    font-size: .85rem;
    font-weight: 560;
    border-color: var(--vert-100);
    background: var(--surface);
}

/* ============================================================ formulaires */
.grille-champs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .9rem;
}
.grille-champs .pleine-largeur { grid-column: 1 / -1; }

.champ { display: flex; flex-direction: column; gap: .28rem; }
.champ label { font-size: .81rem; font-weight: 600; color: var(--gris-700); }
.champ .aide { font-size: .75rem; color: var(--texte-doux); }
.champ .erreur { font-size: .76rem; color: var(--rouge-600); }

input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="password"], input[type="search"], input[type="tel"], select, textarea {
    width: 100%;
    padding: .48rem .6rem;
    border: 1px solid var(--gris-300);
    border-radius: var(--rayon-sm);
    font-size: .9rem;
    font-family: inherit;
    color: var(--texte);
    background: var(--surface);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--vert-500);
    box-shadow: 0 0 0 3px rgba(67, 160, 71, .16);
}
input.invalide, select.invalide, textarea.invalide { border-color: var(--rouge-600); }
textarea { min-height: 72px; resize: vertical; }

.case { display: flex; align-items: center; gap: .45rem; font-size: .87rem; }
.case input { width: auto; }

fieldset { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .9rem; margin: 0 0 1rem; }
legend { font-size: .8rem; font-weight: 650; padding: 0 .4rem; color: var(--gris-700); }

.filtres {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.filtres .champ { min-width: 150px; }

/* ================================================================ alertes */
.alerte {
    padding: .65rem .9rem;
    border-radius: var(--rayon-sm);
    margin-bottom: .8rem;
    font-size: .88rem;
    border: 1px solid transparent;
    display: flex;
    gap: .55rem;
    align-items: flex-start;
}
.alerte.success { background: var(--vert-100);  border-color: #bcdcc0; color: var(--vert-900); }
.alerte.error   { background: var(--rouge-100); border-color: #f3c9c9; color: #8c1f1f; }
.alerte.warning { background: var(--ambre-100); border-color: #f0dbb4; color: #7a4a00; }
.alerte.info    { background: var(--bleu-100);  border-color: #c5daf4; color: #10457f; }

/* ================================================================ onglets */
.onglets {
    display: flex;
    gap: .2rem;
    border-bottom: 1px solid var(--bordure);
    margin-bottom: 1.1rem;
    overflow-x: auto;
}
.onglets a {
    padding: .55rem .9rem;
    font-size: .875rem;
    color: var(--gris-700);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.onglets a:hover { color: var(--vert-700); text-decoration: none; }
.onglets a.actif { color: var(--vert-700); border-bottom-color: var(--vert-600); font-weight: 620; }

/* ============================================================== barres */
.barre-progression {
    height: 7px;
    background: var(--gris-200);
    border-radius: 999px;
    overflow: hidden;
    min-width: 70px;
}
.barre-progression span { display: block; height: 100%; background: var(--vert-500); border-radius: 999px; }
.barre-progression span.ambre { background: #f0a020; }
.barre-progression span.rouge { background: var(--rouge-600); }

/* Mini histogramme sans dépendance JS */
.histo { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.histo .colonne { flex: 1; background: var(--vert-100); border-radius: 3px 3px 0 0; position: relative; min-width: 6px; }
.histo .colonne i { display: block; background: var(--vert-500); border-radius: 3px 3px 0 0; width: 100%; position: absolute; bottom: 0; }

/* =============================================================== divers */
.pile     { display: flex; flex-direction: column; gap: 1.15rem; }
.rangee   { display: flex; gap: 1.15rem; flex-wrap: wrap; }
.rangee > * { flex: 1 1 320px; min-width: 0; }
.muet     { color: var(--texte-doux); }
.petit    { font-size: .8rem; }
.gras     { font-weight: 650; }
.droite   { text-align: right; }
.nowrap   { white-space: nowrap; }
.mono     { font-variant-numeric: tabular-nums; }
.mb0      { margin-bottom: 0; }
.mt1      { margin-top: 1rem; }

.fil-ariane { font-size: .82rem; color: var(--texte-doux); margin-bottom: .5rem; }
.fil-ariane a { color: var(--texte-doux); }

.liste-definitions { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: .88rem; }
.liste-definitions dt { color: var(--texte-doux); }
.liste-definitions dd { margin: 0; font-weight: 560; }

/* =============================================================== connexion */
.page-connexion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(145deg, var(--vert-900), var(--vert-700));
}
.boite-connexion {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border-radius: 14px;
    padding: 1.9rem 1.7rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .25);
}
.boite-connexion h1 { text-align: center; font-size: 1.3rem; margin-bottom: .2rem; }
.boite-connexion .accroche { text-align: center; color: var(--texte-doux); font-size: .86rem; margin-bottom: 1.3rem; }
.boite-connexion .btn { width: 100%; margin-top: .3rem; padding: .6rem; }

/* ============================================================= page erreur */
.page-erreur {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.page-erreur .boite {
    max-width: 680px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.8rem;
    box-shadow: var(--ombre-md);
}
.page-erreur pre {
    background: var(--gris-100);
    padding: .8rem;
    border-radius: var(--rayon-sm);
    overflow: auto;
    font-size: .78rem;
    max-height: 320px;
}

/* ============================================================== impression */
@media print {
    .barre-laterale, .entete .barre-actions, .btn, .onglets, form.ligne-action { display: none !important; }
    .appli { display: block; }
    .carte { box-shadow: none; page-break-inside: avoid; }
    body { background: #fff; font-size: 12px; }
    .contenu { padding: 0; }
}

/* ================================================================ mobile */
@media (max-width: 900px) {
    .appli { flex-direction: column; }

    .barre-laterale {
        width: 100%;
        flex: none;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
    }
    .marque { border-bottom: 0; border-right: 1px solid rgba(255,255,255,.1); white-space: nowrap; }
    .marque span { display: none; }
    .menu { display: flex; padding: 0; flex: 1; }
    .menu-groupe { display: none; }
    .menu a { border-left: 0; border-bottom: 3px solid transparent; padding: .8rem .75rem; }
    .menu a.actif { border-left: 0; border-bottom-color: var(--vert-500); }
    .menu a .texte { display: none; }
    .menu .ico { font-size: 1.15rem; }
    .pied-nav { border-top: 0; border-left: 1px solid rgba(255,255,255,.1); padding: .5rem .8rem; }
    .pied-nav .qui, .pied-nav .role { display: none; }
    .pied-nav form { margin: 0; }

    .entete { padding: .75rem 1rem; position: static; }
    .entete h1 { font-size: 1.05rem; }
    .contenu { padding: 1rem .85rem 2.5rem; }
    .grille-kpi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
    .kpi .valeur { font-size: 1.3rem; }
}