/* Mise en page : carnet de terrain — barre d'onglets collante, grille de fiches, fiche détaillée en panneau. */
/* Mise en page : guide de terrain vivant — en-tête vert forêt, bannière photo, bandes crème, actions terracotta. */
:root {
  --fond: #F8F9FA;
  --creme: #FEFAE0;
  --surface: #ffffff;
  --encre: #1B4332;
  --doux: #4F6458;
  --trait: #DCE6DF;
  --accent: #2D6A4F;
  --accent-pale: #E2F3EA;
  --anis: #52B788;
  --anis-clair: #74C69D;
  --foret: #1B4332;
  --sur-foret: #FEFAE0;
  --terracotta: #A85A1C;
  --terracotta-vif: #BC6C25;
  --ocre: #D4A373;
  --sur-terracotta: #ffffff;
  --impact-eleve: #BC6C25; --impact-modere: #B88A2E; --impact-faible: #3E9B6E;
  --f-titre: "Literata", Georgia, "Times New Roman", serif;
  --f-texte: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  /* couleurs sémantiques par catégorie */
  --c-champignon: #8a5a2b; --c-oomycete: #6b4f8a; --c-bacterie: #9a3b3b; --c-virus: #b0477a;
  --c-protiste: #5d6b2f; --c-insecte: #2f6d8a; --c-acarien: #b0532a; --c-mollusque: #57707a;
  --c-nematode: #7a6a2f; --c-carence: #3f7a3a; --c-physiologique: #6a6a6a;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fond: #0F1A15; --creme: #1A261F; --surface: #16231C; --encre: #E8F1EC; --doux: #A3B8AC; --trait: #26372D;
  --accent: #74C69D; --accent-pale: #1C3328; --anis: #52B788; --anis-clair: #74C69D; --foret: #0B2419; --sur-foret: #FEFAE0;
  --terracotta: #E09A5C; --terracotta-vif: #E9A86C; --ocre: #D4A373; --sur-terracotta: #1F1308;
  --impact-eleve: #E9A86C; --impact-modere: #D9B860; --impact-faible: #74C69D;
  --c-champignon: #d7a26c; --c-oomycete: #b7a0d8; --c-bacterie: #e08a8a; --c-virus: #e48cb8;
  --c-protiste: #b5c477; --c-insecte: #7fc0dd; --c-acarien: #eb9a72; --c-mollusque: #9fbcc6;
  --c-nematode: #cfbd77; --c-carence: #93cf8c; --c-physiologique: #b3b3b3; color-scheme: dark; } }
:root[data-theme="dark"] {
  --fond: #0F1A15; --creme: #1A261F; --surface: #16231C; --encre: #E8F1EC; --doux: #A3B8AC; --trait: #26372D;
  --accent: #74C69D; --accent-pale: #1C3328; --anis: #52B788; --anis-clair: #74C69D; --foret: #0B2419; --sur-foret: #FEFAE0;
  --terracotta: #E09A5C; --terracotta-vif: #E9A86C; --ocre: #D4A373; --sur-terracotta: #1F1308;
  --impact-eleve: #E9A86C; --impact-modere: #D9B860; --impact-faible: #74C69D;
  --c-champignon: #d7a26c; --c-oomycete: #b7a0d8; --c-bacterie: #e08a8a; --c-virus: #e48cb8;
  --c-protiste: #b5c477; --c-insecte: #7fc0dd; --c-acarien: #eb9a72; --c-mollusque: #9fbcc6;
  --c-nematode: #cfbd77; --c-carence: #93cf8c; --c-physiologique: #b3b3b3; color-scheme: dark; }

* { box-sizing: border-box; }
body { background: var(--fond); color: var(--encre); font: 16px/1.5 var(--f-texte); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--foret); }
.enveloppe { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

header.tete { background: var(--foret); border-bottom: 3px solid var(--anis); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.tete .enveloppe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-block: 12px; }
.marque { font-family: var(--f-titre); font-weight: 700; font-size: 1.35rem; color: var(--sur-foret); text-decoration: none; display: flex; gap: 10px; align-items: center; }
.marque svg { width: 34px; height: 34px; flex: none; }
.marque span { display: grid; }
.marque small { display: block; font: 400 .78rem/1.2 var(--f-texte); color: var(--anis-clair); letter-spacing: .02em; }
nav.onglets { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
nav.onglets a { padding: 9px 14px; border-radius: 999px; text-decoration: none; color: var(--sur-foret); opacity: .85; font-weight: 600; font-size: .95rem; }
nav.onglets a:hover { opacity: 1; background: rgb(255 255 255 / .08); }
nav.onglets a[aria-current="page"] { background: var(--anis); color: #0B2419; opacity: 1; }

main { padding-block: 24px 56px; }
h1 { font-family: var(--f-titre); font-weight: 500; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.2; margin: 0 0 6px; text-wrap: balance; }
.chapeau { color: var(--doux); margin: 0 0 20px; max-width: 65ch; }

.filtres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; margin-bottom: 14px; }
@media (max-width: 720px) { .filtres { grid-template-columns: 1fr; } }
.filtres input, .filtres select { width: 100%; padding: 11px 12px; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); }
.compte { align-self: center; color: var(--doux); font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.puce { border: 1px solid var(--trait); background: var(--surface); border-radius: 999px; padding: 5px 12px; font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.puce:hover { border-color: var(--anis); }
.puce[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-pale); color: var(--accent); font-weight: 600; }
.pastille { width: 9px; height: 9px; border-radius: 50%; flex: none; }

h2.groupe { font-family: var(--f-titre); font-weight: 500; font-size: 1.15rem; margin: 28px 0 10px; display: flex; align-items: center; gap: 10px; }
h2.groupe span.n { font: 600 .8rem var(--f-texte); color: var(--doux); }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.fiche-btn { text-align: left; background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 0; cursor: pointer; display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; }
.fiche-btn:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgb(0 0 0 / .08); }
.fiche-btn .photo { aspect-ratio: 4 / 3; max-width: 100%; }
.fiche-btn .photo img { transition: transform .4s; }
.fiche-btn:hover .photo img { transform: scale(1.04); }
.fiche-btn .txt { padding: 10px 13px 12px; display: grid; gap: 2px; align-content: start; }
.fiche-btn .cat { position: absolute; left: 8px; top: 8px; background: var(--surface); border-radius: 999px; padding: 3px 9px 3px 7px; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; display: inline-flex; gap: 5px; align-items: center; }
.fiche-btn b { font-weight: 600; }
.fiche-btn i { font-family: var(--f-titre); color: var(--doux); font-size: .88rem; overflow-wrap: anywhere; }
.fiche-btn .meta { font-size: .78rem; color: var(--doux); margin-top: 4px; }
.vide { color: var(--doux); padding: 24px 0; }

/* Photos */
.photo { position: relative; overflow: hidden; background: var(--accent-pale); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo.sans { display: grid; place-items: center; }
.photo.sans span { font-family: var(--f-titre); font-size: 2.2rem; font-weight: 700; color: var(--surface); opacity: .9; }
.credit { font-size: .72rem; color: var(--doux); line-height: 1.35; }
.credit a { color: inherit; }

/* Bandeau d'accueil */
.accueil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: center; margin-bottom: 26px; }
@media (max-width: 820px) { .accueil { grid-template-columns: 1fr; } }
.mosaique { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 130px 130px; gap: 6px; border-radius: 14px; overflow: hidden; }
.mosaique .photo:first-child { grid-row: span 2; }
@media (max-width: 520px) { .mosaique { grid-template-rows: 96px 96px; } }
.stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
.stats div { display: grid; }
.stats b { font-family: var(--f-titre); font-size: 1.6rem; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stats span { font-size: .8rem; color: var(--doux); }

/* Bannière culture */
.banniere { display: grid; grid-template-columns: 220px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; margin: 6px 0 4px; }
.banniere .photo { min-height: 150px; }
.banniere div.txt { padding: 16px 20px; display: grid; align-content: center; gap: 2px; }
.banniere h2 { font-family: var(--f-titre); font-weight: 700; font-size: 1.4rem; margin: 0; }
.banniere i { font-family: var(--f-titre); color: var(--doux); }
.banniere p { margin: 6px 0 0; color: var(--doux); font-size: .92rem; }
@media (max-width: 560px) { .banniere { grid-template-columns: 1fr; } .banniere .photo { height: 160px; } }


/* Panneau fiche */
dialog#fiche { border: none; padding: 0; width: min(760px, calc(100% - 24px)); max-height: calc(100% - 32px); border-radius: 14px; background: var(--surface); color: var(--encre); }
dialog#fiche::backdrop { background: rgb(0 0 0 / .45); }
.fiche-photo { aspect-ratio: 16 / 9; max-width: 100%; max-height: 340px; width: 100%; }
.fiche-photo-credit { padding: 6px 24px 0; }
.ref-photo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; margin: 10px 24px 0; padding: 10px; background: var(--creme); border-radius: 10px; }
.ref-photo .photo { width: 120px; height: 90px; border-radius: 8px; }
.ref-photo b { display: block; font-size: .9rem; }
.ref-photo span { display: block; font-size: .85rem; color: var(--doux); }
.fiche-tete { padding: 16px 24px 14px; border-bottom: 1px solid var(--trait); position: relative; }
.fiche-tete h3 { font-family: var(--f-titre); font-weight: 700; font-size: 1.45rem; margin: 6px 0 2px 0; line-height: 1.2; text-wrap: balance; }
.fiche-tete i { font-family: var(--f-titre); color: var(--doux); }
.fermer { position: absolute; z-index: 2; top: 12px; right: 12px; box-shadow: 0 2px 8px rgb(0 0 0 / .2); width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--trait); background: var(--surface); cursor: pointer; font-size: 1.2rem; line-height: 1; }
.etiquette { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fiche-corps { padding: 18px 24px 24px; display: grid; gap: 18px; }
.fiche-corps h4 { margin: 0 0 6px; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--doux); }
.fiche-corps p { margin: 0; max-width: 65ch; }
.fiche-corps ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.mois { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; max-width: 520px; }
.mois span { text-align: center; font-size: .72rem; padding: 6px 0; border-radius: 4px; background: var(--fond); color: var(--doux); font-variant-numeric: tabular-nums; }
.mois span.actif { background: var(--anis); color: #0B2419; font-weight: 700; }
.liens-cultures { display: flex; flex-wrap: wrap; gap: 6px; }
.liens-cultures button { border: 1px solid var(--trait); background: var(--fond); border-radius: 999px; padding: 3px 10px; font-size: .85rem; cursor: pointer; }
.avert { font-size: .85rem; color: var(--doux); border-top: 1px solid var(--trait); padding-top: 12px; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .deux { grid-template-columns: 1fr; } }

/* Diagnostic */
.diag { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .diag { grid-template-columns: 1fr; } }
.bloc { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 18px; }
.bloc h2 { font-family: var(--f-titre); font-weight: 500; font-size: 1.1rem; margin: 0 0 12px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.champs label { display: grid; gap: 4px; font-size: .85rem; color: var(--doux); }
.champs select { padding: 9px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); }
fieldset { border: none; padding: 0; margin: 0 0 12px; }
legend { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--doux); margin-bottom: 6px; font-weight: 700; }
.case { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: .93rem; cursor: pointer; }
.case input { margin-top: 4px; accent-color: var(--accent); flex: none; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; position: sticky; bottom: 0; background: var(--surface); padding-top: 10px; }
.btn { border: 1px solid var(--terracotta); background: var(--terracotta); color: var(--sur-terracotta); border-radius: 8px; padding: 9px 16px; font-weight: 600; cursor: pointer; }
.btn.sec { background: transparent; color: var(--accent); border-color: var(--anis); }
.btn:hover { filter: brightness(1.06); }
.btn.sec:hover { background: var(--accent-pale); }
.hyp { border: 1px solid var(--trait); border-radius: 10px; padding: 10px; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; margin-bottom: 10px; }
.hyp .photo { width: 76px; height: 76px; border-radius: 8px; }
.hyp .corps { display: grid; gap: 6px; min-width: 0; }
.hyp-tete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.hyp-tete button { background: none; border: none; padding: 0; font-weight: 700; font-size: 1rem; color: var(--accent); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.score { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; }
.jauge { height: 6px; border-radius: 3px; background: var(--fond); overflow: hidden; }
.jauge div { height: 100%; background: linear-gradient(90deg, var(--anis), var(--accent)); }
.hyp small { color: var(--doux); }

/* Calendrier */
.table-cal { overflow-x: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: .88rem; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--trait); text-align: left; }
thead th { position: sticky; top: 0; background: var(--surface); font-size: .75rem; color: var(--doux); text-align: center; font-weight: 700; }
thead th:first-child { text-align: left; }
td.m { text-align: center; padding: 4px 2px; }
td.m span { display: block; height: 14px; border-radius: 3px; }
td.m.cur { background: var(--accent-pale); }
td.nom button { background: none; border: none; padding: 0; cursor: pointer; text-align: left; font-weight: 600; display: flex; gap: 8px; align-items: center; }
tbody tr:hover { background: var(--fond); }
.mois-choix { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: end; }
.mois-choix label { display: grid; gap: 4px; font-size: .85rem; color: var(--doux); }
.mois-choix select { padding: 9px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); }

/* Intérieur : bascule, pattes, sections */
.bascule { border: 1px solid var(--trait); background: var(--surface); border-radius: 8px; padding: 10px 14px; cursor: pointer; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.bascule[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.bascule:hover { border-color: var(--anis); }
.filtres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; }
@media (max-width: 720px) { .filtres { grid-template-columns: 1fr; } .bascule { justify-content: center; } }
.patte { width: 1em; height: 1em; flex: none; fill: currentColor; }
.badge-animaux { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); color: var(--c-acarien); display: grid; place-items: center; font-size: .85rem; }
.encadre { background: var(--accent-pale); border-radius: 10px; padding: 12px 14px; }
.encadre.alerte { background: color-mix(in srgb, var(--c-acarien) 14%, var(--surface)); }
.encadre h4 { display: flex; gap: 6px; align-items: center; }
.conseils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin-top: 10px; font-size: .9rem; }
.conseils div { min-width: 0; }
.conseils b { display: block; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--doux); }
@media (max-width: 560px) { .conseils { grid-template-columns: 1fr; } }
.banniere .animaux { margin-top: 8px; font-size: .88rem; display: flex; gap: 6px; align-items: flex-start; color: var(--encre); }

/* Onglet Intérieur */
.facteurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 30px; }
.facteur { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.facteur h3 { font-family: var(--f-titre); font-weight: 500; font-size: 1.1rem; margin: 0 0 4px; }
.facteur .chiffre { font-family: var(--f-titre); font-size: 1.5rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.facteur ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: .93rem; }
.recettes { width: 100%; min-width: 0; border-collapse: collapse; font-size: .9rem; margin-top: 6px; }
.recettes td { border-bottom: 1px solid var(--trait); padding: 6px 4px; vertical-align: top; }
.recettes td:first-child { font-weight: 600; width: 38%; }
.profils { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.profil { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.profil .photo { aspect-ratio: 16 / 9; max-width: 100%; }
.profil .corps { padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.profil h3 { font-family: var(--f-titre); font-weight: 700; font-size: 1.05rem; margin: 0; }
.profil .actions-profil { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.lien-btn { background: none; border: 1px solid var(--trait); border-radius: 999px; padding: 5px 12px; font-size: .85rem; cursor: pointer; color: var(--accent); font-weight: 600; }
.lien-btn:hover { border-color: var(--accent); }
.toxique { color: var(--c-bacterie); }
.sans-danger { color: var(--c-carence); }

/* Carnet */
.carnet { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .carnet { grid-template-columns: 1fr; } }
.form-col { display: grid; gap: 10px; }
.form-col label { display: grid; gap: 4px; font-size: .85rem; color: var(--doux); }
.form-col input, .form-col select, .form-col textarea { padding: 9px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); width: 100%; }
.plantes { display: grid; gap: 14px; }
.plante { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; display: grid; grid-template-columns: 120px minmax(0, 1fr); overflow: hidden; }
.plante > .photo { min-height: 100%; }
@media (max-width: 520px) { .plante { grid-template-columns: 1fr; } .plante > .photo { height: 140px; } }
.plante .corps { padding: 14px 16px; display: grid; gap: 10px; }
.plante-tete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.plante-tete h3 { margin: 0; font-family: var(--f-titre); font-size: 1.1rem; }
.etiq-ex { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--fond); border: 1px dashed var(--trait); border-radius: 4px; padding: 1px 6px; color: var(--doux); }
.derniers { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.derniers div { background: var(--fond); border-radius: 8px; padding: 6px 9px; font-size: .8rem; }
.derniers b { display: block; font-size: .95rem; font-variant-numeric: tabular-nums; }
.derniers .retard b { color: var(--c-acarien); }
.historique { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .88rem; }
.historique li { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; border-bottom: 1px solid var(--trait); padding: 4px 0; }
.historique time { color: var(--doux); font-variant-numeric: tabular-nums; }
.historique button, .petit { background: none; border: none; color: var(--doux); cursor: pointer; font-size: .8rem; text-decoration: underline; }
.ajout-evt { display: grid; grid-template-columns: 130px 140px minmax(0, 1fr) auto; gap: 6px; }
.ajout-evt input, .ajout-evt select { padding: 7px 8px; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface); min-width: 0; }
@media (max-width: 640px) { .ajout-evt { grid-template-columns: 1fr 1fr; } }
.btn.petit-btn { padding: 6px 12px; font-size: .88rem; }
.btn.danger { background: var(--c-bacterie); border-color: var(--c-bacterie); }
textarea#k-sauvegarde { font: .8rem/1.4 ui-monospace, Consolas, monospace; min-height: 110px; }
.note-stockage { font-size: .82rem; color: var(--doux); }

/* Impact */
.impact { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; border-radius: 999px; padding: 2px 9px 2px 7px; border: 1px solid currentColor; white-space: nowrap; }
.impact::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.impact.eleve { color: var(--impact-eleve); } .impact.modere { color: var(--impact-modere); } .impact.faible { color: var(--impact-faible); }
.fiche-btn .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Accueil : bannière, accès rapides, saison, cultures */
.heros { position: relative; border-radius: 18px; overflow: hidden; color: #FEFAE0; background: var(--foret) center / cover no-repeat; margin-bottom: 18px; }
.heros::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgb(27 67 50 / .93) 0%, rgb(27 67 50 / .78) 48%, rgb(27 67 50 / .35) 100%); }
.heros-contenu { position: relative; padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 48px); max-width: 680px; display: grid; gap: 14px; }
.surtitre { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--anis-clair); }
.heros h1 { color: #FEFAE0; font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 700; margin: 0; }
.heros p { margin: 0; font-size: 1.08rem; color: #E9F2EC; max-width: 52ch; }
.recherche-heros { display: flex; background: #fff; border-radius: 12px; padding: 5px; gap: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.recherche-heros input { flex: 1; min-width: 0; border: none; padding: 11px 12px; font-size: 1.02rem; background: transparent; color: #1B4332; }
.recherche-heros input:focus { outline: none; }
.recherche-heros:focus-within { outline: 3px solid var(--anis); }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }
.cta .btn { padding: 12px 20px; font-size: 1rem; }
.btn.clair { background: transparent; color: #FEFAE0; border-color: rgb(254 250 224 / .6); }
.btn.clair:hover { background: rgb(255 255 255 / .1); }
.heros .stats b { color: #FEFAE0; } .heros .stats span { color: var(--anis-clair); }
.heros .credit { position: absolute; right: 12px; bottom: 8px; color: rgb(254 250 224 / .7); }
.acces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; }
@media (max-width: 900px) { .acces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .acces { grid-template-columns: 1fr; } }
.acces button, .acces a { text-align: left; background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 16px; cursor: pointer; display: grid; gap: 6px; align-content: start; color: inherit; text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
.acces button:hover, .acces a:hover { transform: translateY(-2px); border-color: var(--anis); box-shadow: 0 6px 18px rgb(27 67 50 / .1); }
.acces .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-pale); color: var(--accent); }
.acces .ico.chaud { background: color-mix(in srgb, var(--ocre) 30%, var(--surface)); color: var(--terracotta); }
.acces .ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acces b { font-size: 1.02rem; }
.acces span.t { font-size: .88rem; color: var(--doux); }
.bande { background: var(--creme); border-radius: 18px; padding: 22px clamp(16px, 3vw, 28px) 26px; margin-bottom: 30px; }
.bande-tete { display: flex; justify-content: space-between; align-items: end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.bande-tete h2 { font-family: var(--f-titre); font-weight: 700; font-size: 1.35rem; margin: 0; }
.bande-tete p { margin: 2px 0 0; color: var(--doux); font-size: .92rem; }
.etiq-saison { background: var(--terracotta); color: var(--sur-terracotta); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; }
.cultures-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tuile { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; max-width: 100%; display: block; border: none; padding: 0; cursor: pointer; color: #fff; text-align: left; background: var(--accent); }
.tuile .photo { position: absolute; inset: 0; }
.tuile .photo img { transition: transform .4s; }
.tuile:hover .photo img { transform: scale(1.06); }
.tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(11 36 25 / .85)); }
.tuile .nom { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 1; font-weight: 700; line-height: 1.2; font-size: .95rem; }
.tuile .nom small { display: block; font-weight: 400; font-size: .76rem; opacity: .85; }
h2.section-titre { font-family: var(--f-titre); font-weight: 700; font-size: 1.35rem; margin: 28px 0 12px; }

footer { color: var(--doux); font-size: .85rem; border-top: 1px solid var(--trait); padding-block: 18px 28px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Pages statiques */
a.fiche-btn { text-decoration: none; color: inherit; }
.fil { font-size: .88rem; color: var(--doux); margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.fil a { color: var(--accent); text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.page-fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .page-fiche { grid-template-columns: 1fr; } }
.page-fiche figure { margin: 0; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); }
@media (max-width: 860px) { .page-fiche figure { position: static; } }
.page-fiche figure .photo { border-radius: 14px; aspect-ratio: 4 / 3; max-width: 100%; }
.page-fiche figcaption { margin-top: 6px; }
.page-fiche .ref-photo { margin: 12px 0 0; }
.page-fiche .corps { display: grid; gap: 20px; min-width: 0; }
.page-fiche h1 { margin-top: 6px; }
.page-fiche .latin { font-family: var(--f-titre); font-style: italic; color: var(--doux); margin: -2px 0 0; }
.page-fiche h2 { margin: 0 0 6px; font: 700 .78rem var(--f-texte); letter-spacing: .07em; text-transform: uppercase; color: var(--doux); }
.page-fiche p { margin: 0; max-width: 65ch; }
.page-fiche ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.liens-cultures a { border: 1px solid var(--trait); background: var(--surface); border-radius: 999px; padding: 3px 10px; font-size: .88rem; color: inherit; text-decoration: none; }
.liens-cultures a:hover { border-color: var(--accent); }
.outils { display: flex; gap: 8px; flex-wrap: wrap; }
a.btn { text-decoration: none; display: inline-block; }
.voisines { margin-top: 36px; }
.lien-page { display: inline-block; margin-top: 4px; font-weight: 600; color: var(--accent); }
.id-rapide { background: var(--creme); border-radius: 14px; padding: 16px 18px; display: grid; gap: 10px; }
.id-rapide h2 { color: var(--terracotta) !important; }
.id-rapide dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: .95rem; }
.id-rapide dt { font-weight: 700; }
.id-rapide dd { margin: 0; }
@media (max-width: 520px) { .id-rapide dl { grid-template-columns: 1fr; } .id-rapide dd { margin-bottom: 6px; } }
.methodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .methodes { grid-template-columns: 1fr; } }
.methode { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.methode h3 { margin: 0 0 8px; font: 700 1rem var(--f-texte); display: flex; gap: 8px; align-items: center; }
.methode h3 .num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; background: var(--accent-pale); color: var(--accent); flex: none; }
.methode.chaude h3 .num { background: color-mix(in srgb, var(--ocre) 35%, var(--surface)); color: var(--terracotta); }
.methode ul { padding-left: 18px; }
.methode p { font-size: .93rem; }
.page-culture { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 22px; }
@media (max-width: 860px) { .page-culture { grid-template-columns: 1fr; } .sommaire { position: static !important; } }
.sommaire { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 88px); background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 14px; }
.sommaire b { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); margin-bottom: 6px; }
.sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sommaire a { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 6px; text-decoration: none; color: inherit; font-size: .92rem; }
.sommaire a:hover { background: var(--accent-pale); }
.table-risques { overflow-x: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; }
.table-risques table { min-width: 640px; }
.table-risques td.nom a { font-weight: 600; color: inherit; text-decoration: none; display: flex; gap: 8px; align-items: center; }
.table-risques td.nom a:hover { color: var(--accent); text-decoration: underline; }
.table-risques td.m span { height: 12px; }
h2.groupe, .page-culture h2 { scroll-margin-top: 100px; }

/* ---------- Diagnostic par photo ---------- */
nav.onglets a.nav-ia { background: var(--terracotta); color: var(--sur-terracotta); opacity: 1; }
nav.onglets a.nav-ia[aria-current="page"] { outline: 2px solid var(--anis); }
.dp-entete { margin-bottom: 18px; display: grid; gap: 6px; }
.dp-entete .surtitre { color: var(--terracotta); }
.dp-grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 880px) { .dp-grille { grid-template-columns: 1fr; } }
.dp-form { background: var(--surface); border: 1px solid var(--trait); border-radius: 18px; padding: clamp(16px, 3vw, 26px); display: grid; gap: 20px; }
.dp-etape-titre { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 1.05rem; margin: 0 0 10px; }
.dp-etape-titre .num { width: 28px; height: 28px; border-radius: 50%; background: var(--foret); color: var(--sur-foret); display: grid; place-items: center; font-size: .85rem; flex: none; }
.dp-zone { border: 2px dashed var(--anis); border-radius: 14px; background: var(--accent-pale); padding: 26px 16px; text-align: center; cursor: pointer; display: grid; gap: 10px; justify-items: center; transition: background .15s, border-color .15s; }
.dp-zone:hover, .dp-zone.survol { background: color-mix(in srgb, var(--anis) 22%, var(--surface)); border-color: var(--accent); }
.dp-zone svg { width: 46px; height: 46px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dp-zone b { font-size: 1.02rem; }
.dp-zone .dp-petit { margin: 0; }
.dp-boutons-photo { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dp-boutons-photo .btn { min-height: 46px; display: inline-flex; align-items: center; gap: 8px; }
.dp-boutons-photo svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dp-apercu { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--accent-pale); border-radius: 14px; padding: 10px; }
.dp-apercu img { width: 140px; height: 105px; object-fit: cover; border-radius: 10px; display: block; }
@media (max-width: 420px) { .dp-apercu { grid-template-columns: 1fr; } .dp-apercu img { width: 100%; height: 190px; } }
.dp-champ { display: grid; gap: 6px; }
.dp-champ input[type="text"], .dp-champ textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); font-size: 1rem; }
.dp-champ input[type="text"]:focus, .dp-champ textarea:focus { outline: 2px solid var(--anis); border-color: var(--anis); }
.dp-champ textarea { min-height: 80px; resize: vertical; }
.dp-organes { display: flex; flex-wrap: wrap; gap: 8px; border: none; padding: 0; margin: 0; }
.dp-organes label { position: relative; }
.dp-organes input { position: absolute; opacity: 0; inset: 0; }
.dp-organes span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--trait); background: var(--surface); cursor: pointer; font-weight: 600; min-height: 44px; }
.dp-organes input:checked + span { background: var(--foret); border-color: var(--foret); color: var(--sur-foret); }
.dp-organes input:focus-visible + span { outline: 2px solid var(--anis); outline-offset: 2px; }
.dp-envoyer { width: 100%; padding: 15px 20px !important; font-size: 1.08rem !important; border-radius: 12px !important; }
.dp-envoyer:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.dp-erreur { background: color-mix(in srgb, var(--c-bacterie) 12%, var(--surface)); color: var(--encre); border: 1px solid color-mix(in srgb, var(--c-bacterie) 40%, var(--surface)); border-radius: 10px; padding: 12px 14px; }
.dp-attente { display: flex; gap: 12px; align-items: center; background: var(--creme); border-radius: 12px; padding: 14px; font-weight: 600; }
.dp-roue { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--anis); border-top-color: transparent; animation: dp-tourne .9s linear infinite; flex: none; }
@keyframes dp-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dp-roue { animation-duration: 3s; } }
.dp-petit { font-size: .86rem; color: var(--doux); }
.dp-lien-btn { background: none; border: none; padding: 0; color: var(--accent); font-weight: 600; text-decoration: underline; cursor: pointer; justify-self: start; }
.dp-cote { display: grid; gap: 14px; }
.dp-cote .bloc { border-radius: 14px; }
.dp-cote ol, .dp-cote ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.dp-cote h2 { margin: 0 0 10px !important; }
.dp-bonne-photo { background: var(--creme) !important; border: none !important; }
#dp-resultat { margin-top: 28px; display: grid; gap: 14px; scroll-margin-top: 90px; }
.dp-exemple-etiq { margin: 0; justify-self: start; background: var(--ocre); color: #2B1A08; font-weight: 700; font-size: .8rem; border-radius: 999px; padding: 4px 12px; }
.dp-bilan { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; border-radius: 16px; padding: 14px; background: var(--foret); color: var(--sur-foret); }
.dp-bilan img { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; }
.dp-bilan h2 { margin: 0; font-family: var(--f-titre); font-size: 1.4rem; color: inherit; }
.dp-bilan p { margin: 2px 0 0; }
.dp-bilan .dp-petit { color: var(--anis-clair); }
.dp-bilan a { color: inherit; }
.dp-bilan.dp-moyenne { background: color-mix(in srgb, var(--foret) 75%, var(--ocre)); }
.dp-bilan.dp-faible { background: color-mix(in srgb, var(--foret) 55%, var(--terracotta)); }
@media (max-width: 460px) { .dp-bilan { grid-template-columns: 1fr; } .dp-bilan img { width: 100%; height: 160px; } }
.dp-carte { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 16px 18px; display: grid; gap: 10px; }
.dp-carte h3 { margin: 0; font-family: var(--f-titre); font-size: 1.2rem; }
.dp-carte h4 { margin: 4px 0 0; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--doux); }
.dp-carte p { margin: 0; max-width: 70ch; }
.dp-carte ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.dp-carte i { font-family: var(--f-titre); color: var(--doux); }
.dp-principale { border: 2px solid var(--anis); }
.dp-principale .btn { justify-self: start; }
.dp-ligne { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dp-cat { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--terracotta); }
.dp-score { text-align: right; display: grid; }
.dp-pct { font-family: var(--f-titre); font-weight: 700; font-size: 1.6rem; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.dp-secondaire .dp-pct { font-size: 1.1rem; }
.dp-jauge { height: 8px; border-radius: 4px; background: var(--accent-pale); overflow: hidden; }
.dp-jauge div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--anis), var(--accent)); }
.dp-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .dp-deux { grid-template-columns: 1fr; } }
.dp-conseils { background: var(--creme); border-color: transparent; }
.dp-sous-titre { margin: 8px 0 0; font-family: var(--f-titre); font-size: 1.1rem; }
.dp-alerte { border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--ocre) 25%, var(--surface)); }
.dp-expert { background: color-mix(in srgb, var(--terracotta) 15%, var(--surface)); }
.dp-lien { color: var(--accent); font-weight: 600; justify-self: start; }
.dp-avert { font-size: .84rem; color: var(--doux); margin: 0; }
.dp-actions-fin { display: flex; gap: 10px; flex-wrap: wrap; }