:root{
  --vert:#2f6d3f;
  --vert-fonce:#1f4d2c;
  --vert-clair:#e7f3ea;
  --ambre:#c98a1c;
  --gris:#6b6f6a;
  --fond:#f6f7f4;
  --carte:#ffffff;
  --danger:#b3492f;
  --bordure:#e6e6e2;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--fond);
  color:#222;
}
a{color:var(--vert-fonce);}

/* Barre du haut */
.barre-haut{
  background:var(--vert-fonce);
  color:#fff;
  padding:12px 16px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  position:sticky;
  top:0;
  z-index:10;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.barre-titre{font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:8px;}
.logo-titre{width:24px; height:24px; border-radius:6px; background:#fff; object-fit:contain;}
.barre-nav{display:flex; gap:14px; flex-wrap:wrap;}
.barre-nav a{color:#fff; text-decoration:none; font-size:.85rem; opacity:.9;}
.barre-nav a:hover{opacity:1; text-decoration:underline;}
.barre-utilisateur{font-size:.8rem; opacity:.85;}

/* Menu déroulant "Mon compte / Déconnexion" sous le nom de l'utilisateur */
.menu-utilisateur{position:relative; font-size:.8rem;}
.menu-compte{position:relative;}
.menu-compte summary{
  cursor:pointer;
  color:#fff;
  opacity:.9;
  list-style:none;
  display:flex;
  align-items:center;
  gap:5px;
}
.menu-compte summary:hover{opacity:1;}
.menu-compte summary::-webkit-details-marker{display:none;}
.menu-compte summary::after{content:'▾'; font-size:.65rem;}
.menu-compte[open] summary::after{content:'▴';}
.menu-compte-liste{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  padding:6px;
  display:flex;
  flex-direction:column;
  min-width:160px;
  z-index:20;
}
.menu-compte-liste a{
  color:#222;
  text-decoration:none;
  padding:8px 10px;
  border-radius:6px;
  font-size:.85rem;
  white-space:nowrap;
}
.menu-compte-liste a:hover{background:var(--vert-clair);}

.contenu{
  max-width:820px;
  margin:0 auto;
  padding:14px 12px 60px;
}
.pied{
  text-align:center;
  font-size:.72rem;
  color:var(--gris);
  padding:20px 12px 30px;
}

/* Cartes génériques */
.card{
  background:var(--carte);
  border-radius:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  padding:16px;
  margin-bottom:16px;
  overflow-x:auto;
}
h1{font-size:1.2rem; color:var(--vert-fonce); margin:6px 0 14px;}
h2{font-size:1rem; color:var(--vert-fonce); margin:0 0 12px;}
.sous-titre{font-size:.8rem; color:var(--gris); margin:-8px 0 12px;}

/* Formulaires */
form label{
  display:block;
  font-size:.8rem;
  color:var(--gris);
  margin-bottom:10px;
}
input[type=text], input[type=password], input[type=date], input[type=email], textarea, select{
  width:100%;
  margin-top:4px;
  border:1px solid #ddd;
  border-radius:8px;
  padding:9px 10px;
  font-size:.9rem;
  font-family:inherit;
  background:#fcfcfb;
}
textarea{resize:vertical; min-height:44px;}
button{
  cursor:pointer;
  border:none;
  border-radius:9px;
  padding:10px 14px;
  font-weight:700;
  font-size:.85rem;
  background:var(--vert);
  color:#fff;
}
button.bouton-discret{
  background:#f0efe9;
  color:var(--danger);
}
.mini-form{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed var(--bordure);
}

/* Messages */
.alerte{background:#fbeae5; color:var(--danger); padding:10px 12px; border-radius:8px; font-size:.85rem;}
.succes{background:var(--vert-clair); color:var(--vert-fonce); padding:10px 12px; border-radius:8px; font-size:.85rem;}
.info{background:#fff2dd; color:#7a5410; padding:10px 12px; border-radius:8px; font-size:.85rem;}

/* Page de connexion */
.login-card{max-width:360px; margin:40px auto;}

.barre-lien{margin-bottom:14px; font-size:.85rem;}

/* Liste des cultures (accueil) */
.grille-cultures{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
  margin-bottom:16px;
}
.carte-culture{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  background:var(--carte);
  border-radius:14px;
  border-top:4px solid var(--vert);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  padding:18px 10px;
  text-decoration:none;
  color:#222;
  text-align:center;
}
.carte-culture-emoji{font-size:2rem;}
.carte-culture-nom{font-weight:700; color:var(--vert-fonce);}
.carte-culture-local{font-size:.72rem; color:var(--gris);}

/* En-tête culture + onglets */
.entete-culture{display:flex; align-items:center; gap:12px; margin-top:6px;}
.entete-culture-emoji{font-size:2.2rem;}
.onglets{
  display:flex;
  gap:4px;
  overflow-x:auto;
  margin-bottom:14px;
  border-bottom:1px solid var(--bordure);
}
.onglet{
  flex:0 0 auto;
  padding:8px 12px;
  font-size:.8rem;
  font-weight:600;
  text-decoration:none;
  color:var(--gris);
  border-bottom:3px solid transparent;
  white-space:nowrap;
}
.onglet.actif{color:var(--vert-fonce); border-bottom-color:var(--vert);}

/* Tableaux */
table{width:100%; border-collapse:collapse; font-size:.82rem;}
th, td{text-align:left; padding:7px 8px; border-bottom:1px solid var(--bordure); vertical-align:top;}
th{color:var(--gris); font-weight:700; font-size:.72rem; text-transform:uppercase;}
.cellule-note{color:var(--gris); font-size:.76rem; max-width:280px;}
.cellule-date{font-weight:700; color:var(--vert-fonce); white-space:nowrap;}
.texte-attenue{color:var(--gris); font-weight:400;}

.puce-niveau{
  display:inline-block;
  font-size:.68rem;
  font-weight:700;
  padding:3px 8px;
  border-radius:20px;
  white-space:nowrap;
}

/* Préparation */
.liste-prep{display:flex; flex-direction:column; gap:8px;}
.ligne-prep{display:flex; align-items:center; gap:10px; font-size:.85rem;}
.puce-type{
  color:#fff;
  font-size:.68rem;
  font-weight:700;
  padding:3px 8px;
  border-radius:8px;
  white-space:nowrap;
}

/* Cycles */
.bloc-cycle{border-top:1px solid var(--bordure); padding:10px 0; font-size:.85rem;}
.bloc-cycle:first-of-type{border-top:none; padding-top:0;}
.bloc-cycle-nom{font-weight:700; color:var(--vert-fonce); margin-bottom:4px;}
.bloc-cycle-detail{margin:2px 0; color:#333;}

.champ-superficie{display:flex; gap:8px;}
.champ-superficie input{flex:1;}
.champ-superficie select{flex:0 0 auto; width:auto;}

/* Calculateur */
.quick-picks{margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.quick-picks-label{font-size:.78rem; color:var(--gris); width:100%;}
.puce-choix{
  display:inline-block;
  background:var(--vert-clair);
  color:var(--vert-fonce);
  font-size:.76rem;
  font-weight:600;
  padding:5px 10px;
  border-radius:20px;
  text-decoration:none;
}
.puce-choix:hover{background:#d7ecdc;}

.timeline{display:flex; flex-direction:column; gap:0; margin:10px 0;}
.timeline-etape{
  position:relative;
  padding:8px 0 8px 20px;
  border-left:2px solid var(--bordure);
  font-size:.85rem;
}
.timeline-etape::before{
  content:'';
  position:absolute;
  left:-6px;
  top:14px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--vert);
}
.timeline-etape.timeline-recolte::before{background:var(--ambre);}
.timeline-etape:last-child{border-left-color:transparent;}
.timeline-date{display:block; font-weight:700; color:var(--vert-fonce);}
.estimate-chip{display:inline-block; background:#f0efe9; padding:6px 12px; border-radius:20px; font-size:.8rem; font-weight:600;}

/* Achats / sources */
.liste-achats, .liste-sources{margin:0; padding-left:20px; font-size:.85rem; line-height:1.7;}

/* Admin */
.cases-fermes{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 12px;}
.case{display:flex; align-items:center; gap:6px; font-size:.8rem; background:#f4f5f2; padding:6px 10px; border-radius:8px;}
.case input{width:auto; margin:0;}
.tableau-edit input, .tableau-edit select, .tableau-edit textarea{font-size:.78rem; padding:5px 6px; min-width:70px;}
.tableau-edit textarea{min-height:32px;}
.ligne-admin{border-top:1px solid var(--bordure); padding:12px 0;}
.ligne-admin:first-of-type{border-top:none; padding-top:0;}
.selecteur-culture{margin-bottom:16px; display:flex; flex-wrap:wrap; gap:6px;}
.selecteur-culture a{
  display:inline-block;
  padding:6px 12px;
  border-radius:20px;
  background:#f0efe9;
  color:var(--vert-fonce);
  text-decoration:none;
  font-size:.8rem;
  font-weight:600;
}
.selecteur-culture a.actif{background:var(--vert); color:#fff;}

@media (min-width:600px){
  .contenu{padding:20px 24px 60px;}
}