/* =====================================================================
   Interface terrain — pensée pour un téléphone tenu d'une seule main,
   en plein soleil : contrastes forts, cibles tactiles larges, peu de texte.
   ===================================================================== */

:root {
  --paddy:        #EEF3E8;
  --paddy-fonce:  #DCE7D3;
  --papier:       #FFFFFF;
  --encre:        #13231A;
  --encre-doux:   #5C6E62;

  --vert:         #1F6B3B;
  --vert-fonce:   #14502B;
  --vert-pale:    #E1EFE2;

  --laterite:     #B4441F;
  --laterite-pale:#FBE6DC;

  --ocre:         #DE9412;
  --ocre-pale:    #FBEED3;

  --indigo:       #24405E;
  --alerte:       #A32020;

  --r-s: 10px;
  --r-m: 18px;
  --r-l: 26px;
  --ombre: 0 2px 0 rgba(19,35,26,.08), 0 8px 22px -12px rgba(19,35,26,.45);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100dvh;
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.45;
  color: var(--encre);
  background: var(--paddy);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .affiche {
  font-family: "Bricolage Grotesque", "Public Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.chiffre {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

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

.enveloppe { max-width: 560px; margin: 0 auto; padding: 0 16px 96px; }

.barre {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--vert);
  color: #fff;
  box-shadow: 0 2px 12px -4px rgba(0,0,0,.4);
}
.barre__titre { font-size: 1.05rem; font-weight: 700; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "Bricolage Grotesque", sans-serif; }
.barre a, .barre button { color: #fff; }

.retour {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); text-decoration: none; flex: none;
  border: 0; cursor: pointer;
}
.retour:active { background: rgba(255,255,255,.3); }

/* ---------- Sélecteur de langue ------------------------------------- */

.langues { display: inline-flex; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.16); flex: none; }
.langues a {
  padding: 7px 13px; font-size: .8rem; font-weight: 700; text-decoration: none;
  color: #fff; letter-spacing: .04em;
}
.langues a[aria-current="true"] { background: #fff; color: var(--vert-fonce); }

/* ---------- Écran de connexion -------------------------------------- */

.connexion {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px 20px 40px;
  background:
    radial-gradient(120% 60% at 50% 0%, #F7FAF2 0%, var(--paddy) 55%, var(--paddy-fonce) 100%);
}
.connexion__entete { text-align: center; margin-bottom: 22px; }
.connexion__titre { font-size: 1.55rem; }
.connexion__soustitre { color: var(--encre-doux); font-size: .95rem; margin-top: 4px; }

.avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr));
  gap: 14px; width: 100%; max-width: 460px; }
.avatar {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px; background: var(--papier); border: 2px solid transparent;
  border-radius: var(--r-m); text-decoration: none; color: var(--encre);
  box-shadow: var(--ombre); transition: transform .12s ease, border-color .12s ease;
}
.avatar:active { transform: scale(.96); border-color: var(--vert); }
.avatar__image {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  background: var(--vert-pale); display: grid; place-items: center;
  font-family: "Bricolage Grotesque", sans-serif; font-size: 1.4rem; font-weight: 700;
  color: var(--vert-fonce); border: 3px solid var(--paddy-fonce);
}
.avatar__nom { font-size: .82rem; font-weight: 600; text-align: center; line-height: 1.2; }
.avatar__role { font-size: .68rem; color: var(--encre-doux); text-transform: uppercase;
  letter-spacing: .06em; }

.profil-actif { display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: 18px; }
.profil-actif .avatar__image { width: 92px; height: 92px; font-size: 2rem; }
.profil-actif__nom { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.25rem;
  font-weight: 700; }

/* Signature : les 6 chiffres du code sont des graines qui germent */
.graines { display: flex; gap: 12px; margin: 6px 0 22px; }
.graine { width: 22px; height: 26px; }
.graine__corps { fill: var(--paddy-fonce); transition: fill .2s ease; }
.graine__pousse { transform-origin: 11px 21px; transform: scaleY(0); opacity: 0;
  transition: transform .28s cubic-bezier(.2,1.4,.5,1), opacity .2s ease; }
.graine.remplie .graine__corps { fill: var(--vert-fonce); }
.graine.remplie .graine__pousse { transform: scaleY(1); opacity: 1; }

.clavier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  width: 100%; max-width: 320px; }
.touche {
  height: 68px; border: 0; border-radius: var(--r-m); background: var(--papier);
  font-family: "IBM Plex Mono", monospace; font-size: 1.6rem; font-weight: 600;
  color: var(--encre); box-shadow: var(--ombre); cursor: pointer;
  transition: transform .08s ease, background .08s ease;
}
.touche:active { transform: translateY(2px); background: var(--vert-pale); }
.touche--action { font-family: "Public Sans", sans-serif; font-size: .95rem; font-weight: 700; }
.touche--effacer { background: var(--ocre-pale); color: #8A5A05; }
.touche--valider { background: var(--vert); color: #fff; }
.touche:disabled { opacity: .45; }

.erreur-pin {
  margin: 14px 0 0; padding: 10px 16px; border-radius: var(--r-s);
  background: #FBE0E0; color: var(--alerte); font-weight: 600; font-size: .9rem;
  text-align: center; max-width: 340px;
}
.secousse { animation: secousse .4s; }
@keyframes secousse {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-9px); } 40% { transform: translateX(9px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(5px); }
}

/* ---------- Panneaux d'accueil -------------------------------------- */

.salutation { padding: 22px 0 6px; }
.salutation h1 { font-size: 1.45rem; }
.salutation p { margin: 4px 0 0; color: var(--encre-doux); font-size: .92rem; }

.panneaux { display: grid; gap: 16px; margin: 18px 0 26px; }

.panneau {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 20px; border-radius: var(--r-l); text-decoration: none;
  color: #fff; box-shadow: var(--ombre); position: relative; overflow: hidden;
  min-height: 116px; transition: transform .12s ease;
}
.panneau:active { transform: scale(.985); }
.panneau--semis  { background: linear-gradient(135deg, #247A45 0%, #14502B 100%); }
.panneau--recolte{ background: linear-gradient(135deg, #C6522A 0%, #8E3315 100%); }
.panneau__texte { flex: 1; }
.panneau__titre { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.3rem;
  font-weight: 700; line-height: 1.15; }
.panneau__desc { font-size: .87rem; opacity: .85; margin-top: 5px; }
.panneau__icone { width: 62px; height: 62px; flex: none; opacity: .95; }
.panneau__fond { position: absolute; right: -34px; bottom: -46px; width: 168px;
  height: 168px; border-radius: 50%; background: rgba(255,255,255,.08); }

/* ---------- Listes -------------------------------------------------- */

.section-titre { display: flex; align-items: baseline; justify-content: space-between;
  margin: 26px 0 10px; }
.section-titre h2 { font-size: 1.05rem; }
.section-titre a { color: var(--vert); font-size: .85rem; font-weight: 600; }

.carte {
  display: block; background: var(--papier); border-radius: var(--r-m);
  padding: 14px 16px; margin-bottom: 10px; text-decoration: none; color: inherit;
  box-shadow: 0 1px 0 rgba(19,35,26,.06), 0 6px 16px -12px rgba(19,35,26,.5);
  border-left: 5px solid var(--vert);
}
.carte--elevage { border-left-color: var(--ocre); }
.carte--recolte { border-left-color: var(--laterite); }
.carte__haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.carte__titre { font-weight: 700; font-size: 1rem; }
.carte__meta { color: var(--encre-doux); font-size: .84rem; margin-top: 3px; }
.carte__valeur { font-family: "IBM Plex Mono", monospace; font-weight: 600;
  font-size: .95rem; white-space: nowrap; }

.etiquette { display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.etiquette--en_cours { background: var(--vert-pale); color: var(--vert-fonce); }
.etiquette--prevu    { background: var(--ocre-pale); color: #8A5A05; }
.etiquette--termine  { background: #E4E8EA; color: #46545C; }
.etiquette--abandonne{ background: #F2DEDE; color: #8B2020; }

.vide { padding: 26px 18px; text-align: center; color: var(--encre-doux);
  background: var(--papier); border-radius: var(--r-m); border: 2px dashed var(--paddy-fonce); }

/* ---------- Formulaires --------------------------------------------- */

.formulaire { display: grid; gap: 16px; margin-top: 18px; }

.champ { display: block; }
.champ > span { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.champ .aide { font-weight: 400; color: var(--encre-doux); font-size: .8rem; }

input[type=text], input[type=number], input[type=date], input[type=tel], select, textarea {
  width: 100%; padding: 14px 14px; font-size: 1.05rem; font-family: inherit;
  color: var(--encre); background: var(--papier);
  border: 2px solid var(--paddy-fonce); border-radius: var(--r-s);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .touche:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--ocre); outline-offset: 2px;
}
input[type=number] { font-family: "IBM Plex Mono", monospace; }
select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6E62' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
  padding-right: 38px; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trio { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }

.bascule { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--papier); border-radius: var(--r-s); border: 2px solid var(--paddy-fonce);
  font-size: .92rem; cursor: pointer; }
.bascule input { width: 24px; height: 24px; accent-color: var(--vert); flex: none; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 17px 18px; border: 0; border-radius: var(--r-m);
  background: var(--vert); color: #fff; font-family: inherit; font-size: 1.05rem;
  font-weight: 700; cursor: pointer; text-decoration: none; box-shadow: var(--ombre);
}
.bouton:active { transform: translateY(2px); }
.bouton--recolte { background: var(--laterite); }
.bouton--doux { background: var(--papier); color: var(--encre); }
.bouton--danger { background: #F2DEDE; color: var(--alerte); }
.bouton--petit { width: auto; padding: 10px 16px; font-size: .9rem; border-radius: var(--r-s); }

.barre-basse {
  position: sticky; bottom: 0; padding: 12px 0 18px; margin-top: 20px;
  background: linear-gradient(to top, var(--paddy) 65%, rgba(238,243,232,0));
}

/* ---------- Répartition de la récolte -------------------------------- */

.repartition { background: var(--papier); border-radius: var(--r-m); padding: 16px;
  border: 2px solid var(--paddy-fonce); }
.repartition__jauge { height: 14px; border-radius: 999px; background: var(--paddy-fonce);
  overflow: hidden; display: flex; margin: 12px 0 8px; }
.repartition__part { height: 100%; transition: width .25s ease; }
.p-consommee { background: var(--vert); }
.p-vendue    { background: var(--ocre); }
.p-partagee  { background: var(--indigo); }
.p-stockee   { background: #7FA891; }
.p-perdue    { background: var(--laterite); }
.repartition__legende { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: .78rem;
  color: var(--encre-doux); }
.repartition__legende span::before { content: ""; display: inline-block; width: 10px;
  height: 10px; border-radius: 3px; margin-right: 5px; background: currentColor; }
.repartition__reste { font-family: "IBM Plex Mono", monospace; font-weight: 600;
  font-size: .9rem; }
.repartition.depasse { border-color: var(--alerte); }
.repartition.depasse .repartition__reste { color: var(--alerte); }

/* ---------- Lignes de dépenses --------------------------------------- */

.depense { background: var(--papier); border-radius: var(--r-m); padding: 14px;
  border: 2px solid var(--paddy-fonce); margin-bottom: 10px; }
.depense__entete { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; }
.depense__cat { font-weight: 700; font-size: .9rem; color: var(--vert-fonce); }
.depense__suppr { border: 0; background: none; color: var(--laterite); font-size: 1.3rem;
  cursor: pointer; line-height: 1; padding: 4px 8px; }
.total-ligne { display: flex; justify-content: space-between; align-items: center;
  padding: 16px; background: var(--vert-fonce); color: #fff; border-radius: var(--r-m);
  font-weight: 700; }
.total-ligne .chiffre { font-size: 1.2rem; }

/* ---------- Messages -------------------------------------------------- */

.flash { padding: 13px 16px; border-radius: var(--r-s); margin: 14px 0; font-weight: 600;
  font-size: .92rem; }
.flash--ok    { background: var(--vert-pale); color: var(--vert-fonce); }
.flash--erreur{ background: #FBE0E0; color: var(--alerte); }
.flash--info  { background: var(--ocre-pale); color: #8A5A05; }

/* ---------- Bandeau ménage (technicien) ------------------------------- */

.bandeau-menage {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 14px;
  background: var(--indigo); color: #fff; border-radius: var(--r-m); text-decoration: none;
}
.bandeau-menage__nom { font-weight: 700; flex: 1; }
.bandeau-menage__action { font-size: .8rem; opacity: .85; text-decoration: underline; }

.recherche { width: 100%; margin-bottom: 14px; }

/* ---------- Déclaration quotidienne d'autonomie ---------------------- */

.jour-choisi { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--papier); border-radius: var(--r-m);
  border: 2px solid var(--paddy-fonce); }
.jour-choisi__label { font-size: .8rem; color: var(--encre-doux); }
.jour-choisi__date { font-family: "IBM Plex Mono", monospace; font-size: 1.05rem; }
.jour-choisi__lien { margin-left: auto; font-size: .82rem; color: var(--indigo); }

.question { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.12rem;
  font-weight: 700; line-height: 1.3; margin: 4px 0 0; }

.parts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.part {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 3px 10px; border: 2px solid var(--paddy-fonce); border-radius: var(--r-m);
  background: var(--papier); cursor: pointer; font-family: inherit; color: var(--encre);
  transition: border-color .12s ease, transform .1s ease;
}
.part:active { transform: scale(.95); }
.part--actif { border-color: var(--teinte); background: color-mix(in srgb, var(--teinte) 9%, #fff); }
.part__bol { line-height: 0; }
.part__nom { font-size: .68rem; font-weight: 600; text-align: center; line-height: 1.15; }
.part__pct { font-size: .72rem; color: var(--encre-doux); }
@supports not (background: color-mix(in srgb, red 9%, #fff)) {
  .part--actif { background: var(--paddy); }
}

.details-fins { background: var(--papier); border: 2px solid var(--paddy-fonce);
  border-radius: var(--r-m); padding: 12px 14px; }
.details-fins summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--indigo); }

/* Calendrier des 30 derniers jours */
.suivi { background: var(--papier); border-radius: var(--r-m); padding: 14px;
  border: 2px solid var(--paddy-fonce); }
.suivi__compte { margin: 0 0 12px; font-size: .85rem; color: var(--encre-doux); }

.calendrier { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.case {
  position: relative; aspect-ratio: 1; border-radius: 7px; display: grid; place-items: center;
  font-size: .62rem; font-weight: 700; color: #fff; text-decoration: none;
  background: var(--paddy-fonce); overflow: hidden;
}
.case span { position: relative; z-index: 1; }
.case--haut  { background: var(--vert); }
.case--moyen { background: var(--ocre); }
.case--bas   { background: var(--laterite); }
.case--vide  { background: repeating-linear-gradient(45deg, #E6EBE1 0 4px, #D6DED0 4px 8px);
  color: var(--encre-doux); }
.case--action { outline: 2px dashed var(--laterite); outline-offset: -2px; }

.calendrier-legende { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px;
  font-size: .72rem; color: var(--encre-doux); }
.calendrier-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; }
.calendrier-legende .i-vide { background: repeating-linear-gradient(45deg, #E6EBE1 0 3px, #D6DED0 3px 6px); }

.panneau--autonomie { background: linear-gradient(135deg, #27466B 0%, #101F31 100%); }

/* ---------- Thème bleu de la page « Autonomie » ---------------------- */

.theme-autonomie {
  --paddy:       #D5DEE9;
  --paddy-fonce: #7A92B0;
  --encre:       #101F31;
  --encre-doux:  #4E6079;
  background:
    radial-gradient(120% 55% at 50% 0%, #E3EAF3 0%, #D5DEE9 55%, #C3CFDE 100%);
  background-attachment: fixed;
}
.theme-autonomie .barre { background: #16283D; }
.theme-autonomie .barre-basse {
  background: linear-gradient(to top, #D5DEE9 65%, rgba(213,222,233,0));
}
.theme-autonomie .langues a[aria-current="true"] { color: #16283D; }
.theme-autonomie .carte { border-left-color: var(--indigo); }
.theme-autonomie .section-titre a { color: #1B3049; }
.theme-autonomie .bouton { background: #16283D; }
.theme-autonomie .flash--info { background: #FBEED3; color: #7A4F04; }
.theme-autonomie .vide { border-color: #7A92B0; }
/* Le hachuré des jours oubliés suit la teinte de la page */
.theme-autonomie .case--vide {
  background: repeating-linear-gradient(45deg, #DCE3EC 0 4px, #B9C6D8 4px 8px);
  color: #46586F;
}
.theme-autonomie .calendrier-legende .i-vide {
  background: repeating-linear-gradient(45deg, #DCE3EC 0 3px, #B9C6D8 3px 6px);
}

.pastille-rappel {
  position: absolute; top: 12px; right: 14px; min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 999px; background: var(--laterite); color: #fff; font-size: .78rem;
  font-weight: 700; display: grid; place-items: center; z-index: 2;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.5);
}

@media (max-width: 360px) {
  .parts { grid-template-columns: repeat(3, 1fr); }
  .calendrier { grid-template-columns: repeat(7, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}