/* =====================================================================
   Portail membres Au-Potager de Nyon — design system (skill design-potager)
   Mode clair uniquement (v1) · fort contraste · cibles tactiles ≥ 44 px
   ===================================================================== */

:root {
  /* Charte officielle */
  --vert: #007C32;            /* Vert Au-Potager (Pantone 356) */
  --vert-fonce: #005A24;      /* hover */
  --vert-pale: #E3F1E7;       /* fonds sélection, zones libres */

  /* Neutres */
  --fond-page: #FFFFFF;
  --fond-section: #F4F7F2;
  --texte: #1F2A22;
  --texte-secondaire: #575756;
  --bordure: #DDE4DB;

  /* États fonctionnels */
  --succes: #2D7A31;       --succes-fond: #E5F2E6;
  --alerte: #95601B;       --alerte-fond: #FBF1E0;
  --erreur: #B3402E;       --erreur-fond: #F9E9E6;
  --info: #3E6B8C;         --info-fond: #E9F0F5;

  --rayon: 12px;
}

* { box-sizing: border-box; }

/* L'attribut [hidden] doit toujours l'emporter : sans cette règle, une classe
   comme .bouton (display:inline-flex) masque le display:none de l'agent
   utilisateur et un élément « hidden » resterait visible — c'est le cas du
   lien « Comité » de l'en-tête, qui ne doit apparaître que pour les admins. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fond-page);
  color: var(--texte);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px; /* minimum app — lisible dehors */
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: 'Antonio', sans-serif;
  font-weight: 600;
  color: var(--texte);
  margin: 0 0 0.5rem;
}

a { color: var(--vert); }

/* ---------- Header applicatif (fond vert, logo blanc) ---------- */
.entete-app {
  background: var(--vert);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
}
.entete-app .marque {
  font-family: 'Antonio', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
}
.entete-app .marque small {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  display: block;
  letter-spacing: 0;
}

/* ---------- Écran de connexion ---------- */
.page-connexion {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--fond-section);
}
.logo-connexion { text-align: center; margin-bottom: 1.5rem; }
.logo-connexion img { width: 140px; height: auto; }
.logo-connexion .logo-texte {
  font-family: 'Antonio', sans-serif;
  font-weight: 600;
  font-size: 2rem;
  color: var(--vert);
  letter-spacing: 0.05em;
}
.logo-connexion .baseline {
  /* Seul endroit où la baseline apparaît (règle charte) */
  color: var(--texte-secondaire);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* ---------- Cartes et formulaires ---------- */
.carte {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.5rem;
  width: 100%;
  max-width: 420px;
}

label {
  display: block;
  font-weight: 500;
  margin: 1rem 0 0.35rem;
}
label:first-of-type { margin-top: 0; }

input[type="text"],
input[type="password"] {
  width: 100%;
  min-height: 44px; /* cible tactile — gants de jardin */
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: #fff;
}
input:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 1px;
  border-color: var(--vert);
}

.aide {
  color: var(--texte-secondaire);
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}

/* ---------- Boutons (un seul primaire par écran) ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  padding: 0.6rem 1.25rem;
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 1.25rem;
}
.bouton-primaire {
  background: var(--vert);
  color: #fff;
  border: 1px solid var(--vert);
}
.bouton-primaire:hover:not(:disabled) { background: var(--vert-fonce); }
.bouton-primaire:disabled { opacity: 0.6; cursor: wait; }
.bouton-secondaire {
  background: #fff;
  color: var(--vert);
  border: 1px solid var(--vert);
  width: auto;
  margin-top: 0;
}
.bouton-secondaire:hover { background: var(--vert-pale); }

/* ---------- Messages ---------- */
.message { display: none; border-radius: 8px; padding: 0.75rem 1rem; margin-top: 1rem; }
.message.visible { display: block; }
.message-erreur { background: var(--erreur-fond); color: var(--erreur); }
.message-succes { background: var(--succes-fond); color: var(--succes); }
.message-info   { background: var(--info-fond); color: var(--info); }

/* ---------- Choix de la taille de parcelle (premier login) ---------- */
.choix-taille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.35rem;
}
.choix-taille input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choix-taille .option {
  display: block;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1rem 0.75rem;
  text-align: center;
  cursor: pointer;
  min-height: 44px;
  margin: 0;
}
.choix-taille .option .titre-option {
  font-family: 'Antonio', sans-serif;
  font-size: 1.2rem;
  display: block;
}
.choix-taille .option .detail-option {
  color: var(--texte-secondaire);
  font-size: 0.85rem;
}
.choix-taille input[type="radio"]:checked + .option {
  border-color: var(--vert);
  background: var(--vert-pale);
}
.choix-taille input[type="radio"]:focus-visible + .option {
  outline: 2px solid var(--vert);
  outline-offset: 1px;
}

/* ---------- Étape 2 : plan interactif ---------- */
.entete-droite { display: flex; align-items: center; gap: 0.75rem; }
.date-jour { font-size: 0.85rem; color: #fff; text-transform: capitalize; }
.bouton-entete {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.bande-mois {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  background: var(--vert);
  padding: 0 0.75rem 0.6rem;
  -webkit-overflow-scrolling: touch;
  /* Centré par rapport à la fenêtre ; « safe » évite de rogner le premier
     mois quand la bande dépasse la largeur (repli à gauche sinon). */
  justify-content: safe center;
}
.bande-mois .mois {
  min-width: 52px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  flex: 0 0 auto;
}
.bande-mois .mois.actif {
  background: #fff;
  color: var(--vert);
  font-weight: 600;
}

.titre-parcelle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.selecteur-saison {
  min-height: 44px;
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: #fff;
}
.titre-section { margin-top: 1.5rem; }

/* Interrupteur « Parcelle idéale » (calque des emplacements des légumes reçus) */
.bascule-ideale {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.4rem 0;
}
.interrupteur {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-weight: 600;
  color: var(--vert-fonce);
  cursor: pointer;
}
.interrupteur input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.interrupteur-piste {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: var(--bordure);
  transition: background 0.15s ease;
}
.interrupteur-bouton {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(31, 42, 34, 0.25);
  transition: transform 0.15s ease;
}
.interrupteur input:checked + .interrupteur-piste { background: var(--vert); }
.interrupteur input:checked + .interrupteur-piste .interrupteur-bouton { transform: translateX(20px); }
.interrupteur input:focus-visible + .interrupteur-piste {
  outline: 2px solid var(--vert-fonce);
  outline-offset: 2px;
}
.interrupteur-aide { color: var(--texte-secondaire); font-size: 0.85rem; }
/* Version compacte (sous la parcelle, à droite) : seulement l'interrupteur et
   sa mention — piste réduite, texte discret. La cible tactile reste >= 44 px
   (min-height du .interrupteur). */
.interrupteur-compact {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--texte-secondaire);
}
.interrupteur-compact .interrupteur-piste {
  width: 38px;
  height: 21px;
  border-radius: 11px;
}
.interrupteur-compact .interrupteur-bouton { width: 15px; height: 15px; }
.interrupteur-compact input:checked + .interrupteur-piste .interrupteur-bouton {
  transform: translateX(17px);
}
/* Rangée sous la parcelle : légende à gauche, interrupteur à droite. */
.sous-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  flex-wrap: wrap;
}
.sous-plan .legende-plan { margin-top: 0; }
.sous-plan .bascule-ideale { margin: 0 0 0 auto; }
.aide-plan { margin: 0 0 0.5rem; }

/* Repères géographiques : désormais SOUS la parcelle */
.reperes-parcelle {
  display: flex;
  justify-content: space-between;
  color: var(--texte-secondaire);
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0.5rem 0 0.25rem;
}
.plan-defilement {
  overflow-x: auto;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: #fff;
  padding: 0.5rem;
  -webkit-overflow-scrolling: touch;
}
/* Le plan est centré quand il est moins large que son conteneur
   (demi-parcelle, grand écran) ; sinon le conteneur défile horizontalement. */
#plan-conteneur svg { display: block; margin: 0 auto; }
.plan-defilement .culture { cursor: pointer; }
.plan-defilement .fond-bloc { cursor: crosshair; }
/* Le SVG gère lui-même le placement (toucher/glisser) : on neutralise le
   défilement natif dessus, repris manuellement dans parcelle.js pour ne pas
   entrer en conflit avec la sélection de zone. */
#plan-svg { touch-action: none; -webkit-user-select: none; user-select: none; }

.legende-plan {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  color: var(--texte-secondaire);
  font-size: 0.85rem;
}
.pastille {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  vertical-align: -2px;
  margin-right: 0.35rem;
}
.pastille-reel { background: var(--succes-fond); border: 2px solid var(--succes); }
.pastille-fantome { background: rgba(244, 247, 242, 0.7); border: 1.5px dashed var(--texte-secondaire); }
.pastille-libre { background: var(--vert-pale); border: 1px solid var(--bordure); }

/* Bandeau « À planter » */
.bandeau-a-planter {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  -webkit-overflow-scrolling: touch;
}
.carte-a-planter {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 92px;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  background: #fff;
  border: 2px solid var(--bordure);
  border-radius: var(--rayon);
  font: inherit;
  cursor: pointer;
}
.carte-a-planter img { width: 36px; height: 36px; }
.carte-a-planter .nom { font-weight: 600; font-size: 0.9rem; }
.carte-a-planter .qte { color: var(--texte-secondaire); font-size: 0.85rem; }
.carte-a-planter.selectionnee { background: var(--vert-pale); outline: 2px solid var(--vert); }

/* À récolter */
.ligne-recolte {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  margin-top: 0.4rem;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.ligne-recolte img { width: 32px; height: 32px; }
.ligne-recolte .indice { margin-left: auto; color: var(--vert); font-size: 0.85rem; }

/* Panneau (fiche) */
.voile {
  position: fixed;
  inset: 0;
  background: rgba(31, 42, 34, 0.45);
  z-index: 40;
}
.panneau {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 82vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--rayon) var(--rayon) 0 0;
  border: 1px solid var(--bordure);
  z-index: 50;
}
@media (min-width: 720px) {
  .panneau {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    border-radius: var(--rayon);
  }
}
.panneau-tete {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bordure);
}
.panneau-tete img { width: 48px; height: 48px; }
.panneau-tete h2 { margin: 0; }
.panneau-tete .fermer {
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--texte-secondaire);
}
.panneau-corps { padding: 1rem 1.25rem; }
.panneau-corps input[type="number"] {
  width: 100px;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  border: 1px solid var(--bordure);
  border-radius: 8px;
}
.etape { margin-top: 0.9rem; }
.etape strong { display: block; color: var(--vert-fonce); }
.etape p { margin: 0.25rem 0 0; white-space: pre-line; }

/* Fiche légume par sections dépliables (§4.7 : on n'atterrit plus directement
   sur les consignes ; l'utilisateur choisit une rubrique). */
.section-fiche { border-top: 1px solid var(--bordure); margin-top: 0.75rem; }
.section-fiche > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--vert-fonce);
  list-style: none;
  padding: 0.25rem 0;
}
.section-fiche > summary::-webkit-details-marker { display: none; }
.section-fiche > summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--texte-secondaire);
}
.section-fiche[open] > summary::after { content: '▴'; }
.section-fiche-corps { padding-bottom: 0.5rem; }

/* Catalogue « Planter autre chose » : grille qui passe à la ligne */
.catalogue-grille { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.catalogue-grille .carte-a-planter { min-width: 84px; }

/* Pop-up de sélection de carrés : d'abord le légume, puis la quantité */
.label-choix { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.choix-legumes { flex-wrap: wrap; margin-bottom: 0.75rem; }
.choix-legumes .carte-a-planter { min-width: 88px; }
.carte-generique { border-style: dashed; }
.icone-generique { width: 36px; height: 36px; }
#surface-selection { font-weight: 500; }
.panneau-corps input[type="text"] {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  border: 1px solid var(--bordure);
  border-radius: 8px;
}

/* Onglets de la liste complète (Catalogue / Autre) */
.onglets-catalogue { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; }
.onglet-catalogue {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: #fff;
  color: var(--texte);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.onglet-catalogue.actif {
  background: var(--vert-pale);
  border-color: var(--vert);
  color: var(--vert-fonce);
  font-weight: 600;
}
.panneau-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1.25rem 1.25rem;
}
.panneau-actions .bouton { margin-top: 0; width: 100%; }
.bouton-discret {
  background: transparent;
  border: 0;
  color: var(--texte-secondaire);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
  font: inherit;
}

/* ---------- Étape 3 : admin livraisons & stock ---------- */
.carte-admin {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
}
.carte-admin summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

.formulaire-en-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
  margin-top: 0.75rem;
}
.formulaire-en-ligne label { margin: 0; font-size: 0.85rem; }
.formulaire-en-ligne input, .formulaire-en-ligne select {
  display: block;
  min-height: 44px;
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: #fff;
}
.formulaire-en-ligne input[type="number"] { width: 90px; }
.formulaire-en-ligne .bouton { width: auto; margin-top: 0; }

.ligne-livraison {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0.6rem 0.9rem;
  margin-top: 0.5rem;
}
.ligne-livraison img { width: 32px; height: 32px; }
.ligne-livraison strong { min-width: 120px; }
.ligne-livraison label { margin: 0; font-size: 0.85rem; font-weight: 500; }
.ligne-livraison input[type="date"],
.ligne-livraison input[type="number"] {
  display: block;
  min-height: 44px;
  font: inherit;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--bordure);
  border-radius: 8px;
}
.ligne-livraison input[type="number"] { width: 80px; }
.ligne-livraison .bouton { width: auto; margin-top: 0; }
.bascule { display: flex; align-items: center; gap: 0.4rem; min-height: 44px; }
.bascule input { width: 22px; height: 22px; accent-color: var(--vert); }

.tableau-defilement { overflow-x: auto; }
.tableau-admin {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  margin-top: 0.5rem;
  font-size: 0.95rem;
}
.tableau-admin th, .tableau-admin td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--bordure);
  text-align: left;
  white-space: nowrap;
}
.tableau-admin th {
  font-family: 'Antonio', sans-serif;
  font-weight: 600;
  color: var(--vert-fonce);
  background: var(--fond-section);
}
.mini-icone { width: 22px; height: 22px; vertical-align: -5px; }
.badge-rab {
  background: var(--alerte-fond);
  color: var(--alerte);
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.liste-simple { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.liste-simple li { margin-top: 0.25rem; }

/* ---------- Étape 4 : admin membres & plan annuel ---------- */
.sous-nav {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  background: var(--vert);
  padding: 0 0.75rem 0.6rem;
}
.sous-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  white-space: nowrap;
}
.sous-nav a.actif { background: #fff; color: var(--vert); font-weight: 600; }

.bloc-copie {
  background: var(--fond-section);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1rem;
  font-size: 0.95rem;
  white-space: pre-wrap;
  user-select: all;
}
.ligne-inactive td { color: var(--texte-secondaire); background: var(--fond-section); }
.actions-membre { display: flex; gap: 0.4rem; align-items: center; }
.actions-membre .bouton { width: auto; margin-top: 0; padding: 0.35rem 0.7rem; }
.tableau-admin input[type="text"], .tableau-admin select {
  min-height: 40px;
  font: inherit;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: #fff;
}
.champ-numero { width: 70px; }

/* ---------- Pages Légumes & Conseils ---------- */
.section-famille { margin-top: 1.75rem; }
.section-famille:first-child { margin-top: 0.5rem; }

/* =====================================================================
   Conseils v2 — parcours pédagogiques, leçons & quiz
   (remplace l'ancien sommaire par thématique ; classes ligne-article /
   article-corps / sommaire-thematique retirées car devenues mortes).
   ===================================================================== */

/* Lien de retour (fil d'Ariane léger, en tête d'écran) */
.lien-retour {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0;
  min-height: 44px;
  line-height: 2;
  color: var(--vert-fonce);
  font-weight: 600;
  text-decoration: none;
}
.lien-retour:hover { text-decoration: underline; }

.conseils-bloc { margin-top: 1.5rem; }

/* Nouveau contenu */
.nouveau-liste { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.nouveau-carte {
  display: block;
  padding: 0.75rem 0.9rem;
  background: var(--vert-pale);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  text-decoration: none;
  color: var(--texte);
}
.nouveau-carte:hover { border-color: var(--vert); }
.nouveau-titre { display: block; font-weight: 600; color: var(--vert-fonce); }
.nouveau-soustitre { display: block; color: var(--texte-secondaire); font-size: 0.85rem; }

/* Cartes de parcours */
.parcours-liste { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }
.parcours-carte {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 44px;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  text-decoration: none;
  color: var(--texte);
}
.parcours-carte:hover { background: var(--fond-section); border-color: var(--vert); }
.parcours-icone {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vert-pale);
  color: var(--vert);
}
.parcours-icone svg { width: 24px; height: 24px; }
.parcours-icone-lg { width: 56px; height: 56px; }
.parcours-icone-lg svg { width: 30px; height: 30px; }
.parcours-texte { display: flex; flex-direction: column; gap: 0.1rem; }
.parcours-nom { font-weight: 600; }
.parcours-desc { color: var(--texte-secondaire); font-size: 0.85rem; }
.parcours-prog { color: var(--vert-fonce); font-size: 0.8rem; font-weight: 600; }
.parcours-prog-tete { margin: 0.5rem 0 0; }

.parcours-tete { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.25rem; }
.parcours-tete h1 { margin: 0; }

.badge-bonus {
  display: inline-block;
  vertical-align: middle;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--alerte-fond);
  color: var(--alerte);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
}

/* Liste des leçons dans un parcours */
.lecons-liste { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.lecon-ligne {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  text-decoration: none;
  color: var(--texte);
}
.lecon-ligne:hover { background: var(--vert-pale); border-color: var(--vert); }
.lecon-coche {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--bordure);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}
.lecon-ligne.lue .lecon-coche { background: var(--succes); border-color: var(--succes); }
.lecon-ligne-txt { flex: 1 1 auto; display: flex; flex-direction: column; }
.lecon-ligne-titre { font-weight: 600; }
.lecon-ligne-soustitre { color: var(--texte-secondaire); font-size: 0.85rem; }

/* Badges de niveau */
.badge-niveau {
  flex: 0 0 auto;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
}
.badge-debutant { background: var(--succes-fond); color: var(--succes); }
.badge-confirme { background: var(--info-fond); color: var(--info); }

/* Leçon */
.lecon-titre { margin-top: 0.25rem; }
.lecon-soustitre { color: var(--texte-secondaire); margin: 0 0 0.5rem; }
.lecon-meta { margin: 0 0 0.5rem; }
.lecon-section { border-top: 1px solid var(--bordure); }
.lecon-section > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: 'Antonio', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--vert-fonce);
  list-style: none;
  padding: 0.5rem 0;
}
.lecon-section > summary::-webkit-details-marker { display: none; }
.lecon-section > summary::after { content: '▾'; margin-left: auto; color: var(--texte-secondaire); }
.lecon-section[open] > summary::after { content: '▴'; }
.lecon-corps { white-space: pre-line; margin: 0 0 0.75rem; line-height: 1.6; }

/* Navigation précédent / suivant */
.lecon-nav { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; }
.lecon-nav .bouton { margin-top: 0; }

/* Légumes liés (leçon → fiche) */
.lecon-legumes { margin-top: 1.5rem; }
.lecon-legumes-liste { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.lecon-legume {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  text-decoration: none;
  color: var(--texte);
  font-size: 0.9rem;
  font-weight: 600;
}
.lecon-legume:hover { background: var(--vert-pale); border-color: var(--vert); }
.lecon-legume img { width: 28px; height: 28px; }

/* Renvoi croisé depuis la fiche légume (legumes.html) */
.fiche-conseils { margin-top: 1.25rem; border-top: 1px solid var(--bordure); padding-top: 0.75rem; }
.fiche-conseils-titre { font-weight: 600; color: var(--vert-fonce); margin: 0 0 0.5rem; }
.fiche-conseils .bouton { margin-top: 0.5rem; }

/* Quiz */
.quiz-progression { color: var(--texte-secondaire); font-size: 0.85rem; margin: 0.25rem 0; }
.quiz-question { font-size: 1.3rem; margin-bottom: 1rem; }
.quiz-choix { display: flex; flex-direction: column; gap: 0.6rem; }
.quiz-choix-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.75rem 0.9rem;
  background: #fff;
  border: 2px solid var(--bordure);
  border-radius: var(--rayon);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.quiz-choix-btn:hover:not(:disabled) { background: var(--vert-pale); border-color: var(--vert); }
.quiz-choix-btn:disabled { cursor: default; }
.quiz-choix-lettre {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fond-section);
  color: var(--vert-fonce);
  font-weight: 700;
}
.quiz-choix-txt { flex: 1 1 auto; }
.quiz-choix-btn.choix-juste { border-color: var(--succes); background: var(--succes-fond); }
.quiz-choix-btn.choix-juste .quiz-choix-lettre { background: var(--succes); color: #fff; }
.quiz-choix-btn.choix-faux { border-color: var(--erreur); background: var(--erreur-fond); }
.quiz-choix-btn.choix-faux .quiz-choix-lettre { background: var(--erreur); color: #fff; }

.quiz-feedback { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--rayon); }
.quiz-feedback.feedback-juste { background: var(--succes-fond); }
.quiz-feedback.feedback-faux { background: var(--alerte-fond); }
.quiz-feedback-titre { margin: 0 0 0.35rem; font-weight: 600; }
.feedback-juste .quiz-feedback-titre { color: var(--succes); }
.feedback-faux .quiz-feedback-titre { color: var(--alerte); }
.quiz-feedback-exp { margin: 0; line-height: 1.55; }

.quiz-final { text-align: center; padding: 1.5rem 0.5rem; }
.quiz-final-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--vert-pale);
  color: var(--vert);
  margin-bottom: 0.5rem;
}
.quiz-final-icone svg { width: 40px; height: 40px; }
.quiz-final .bouton { margin-top: 0.75rem; }
.quiz-final a.bouton-secondaire { display: inline-flex; width: auto; }

/* ---------- Contenu de page ---------- */
.contenu {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}
/* La page parcelle exploite tout l'espace : le plan est l'élément dominant
   (défilement horizontal au-delà), marges réduites, infos en dessous. */
.contenu-parcelle { max-width: 1320px; padding: 0.9rem 0.5rem; }
.contenu-parcelle .section-plan { margin-top: 0.25rem; }
/* Le plan prend toute la largeur disponible ; on serre son cadre pour le
   mettre en avant. */
.contenu-parcelle .plan-defilement { padding: 0.35rem; }
.section {
  background: var(--fond-section);
  border-radius: var(--rayon);
  padding: 1.25rem;
  margin-top: 1rem;
}

/* =====================================================================
   En-tête & navigation basse (v2)
   Feedback comité : logo dans l'en-tête (toutes les pages connectées) +
   barre de navigation basse fixe sur les 3 pages membres (parcelle,
   legumes, conseils), qui remplace la sous-nav haute. Les pages admin
   gardent leur sous-nav haute (.sous-nav, définie plus haut) : NE PAS la
   supprimer, elle reste utilisée par admin.html / admin-membres.html /
   admin-plan.html.
   ===================================================================== */

:root {
  /* Hauteur de la barre de navigation basse — réutilisée pour le
     dégagement du contenu et pour ne pas masquer le panneau (bottom sheet
     mobile) ; centralisée ici pour n'avoir qu'un chiffre à ajuster. */
  --hauteur-nav-basse: 60px;
}

/* ---------- Logo compact dans l'en-tête ---------- */
.entete-app .marque {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.marque-logo {
  display: inline-block;
  width: 39px;
  height: 36px;
  overflow: hidden;
  flex: 0 0 auto;
  line-height: 0;
}
/* Le fichier AU-POTAGER__Nyon_LOGO_PRINC.png (810 x 835 px) est le logo
   empilé complet (pictogramme cercle-semis + « AU-POTAGER » + « Nyon »
   écrits en toutes lettres). Comme ce texte est déjà affiché à côté, en
   clair, dans l'en-tête (balisage HTML, accessible), on n'affiche ici que
   le pictogramme : mise à l'échelle + décalage de l'image dans un cadre
   qui la rogne, plutôt que de générer un second fichier image à
   maintenir. Repère du pictogramme dans le fichier source :
   x 293..717 (largeur 424 px), y 81..472 (hauteur 391 px).
   Si le fichier source est un jour remplacé par une version compacte
   dédiée (pictogramme seul), supprimer ce recadrage et simplifier à
   `.marque-logo img { width:100%; height:100%; }`. */
.marque-logo img {
  display: block;
  width: 74.6px;
  height: 76.9px;
  max-width: none;
  transform: translate(-27px, -7.5px);
}

/* ---------- Navigation basse (pages membres uniquement) ---------- */
.nav-basse {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30; /* sous .voile (40) et .panneau (50) : un panneau ouvert
                  recouvre toujours la barre, jamais l'inverse */
  display: flex;
  height: var(--hauteur-nav-basse);
  background: #fff;
  border-top: 1px solid var(--bordure);
  box-shadow: 0 -2px 6px rgba(31, 42, 34, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0px); /* encoche iPhone */
}
.nav-basse-lien {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 44px;
  min-height: 44px; /* cible tactile */
  color: var(--texte-secondaire);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
}
.nav-basse-lien svg { width: 24px; height: 24px; }
/* Icônes d'onglets illustrées (style des icônes légumes, assets/img/ui/) :
   ce sont des images en couleur, l'état actif ne peut donc plus passer par
   `color` — l'onglet actif montre l'icône en couleur, les autres l'affichent
   atténuée en gris. */
.nav-basse-lien img {
  width: 26px;
  height: 26px;
  filter: grayscale(1) opacity(0.55);
}
.nav-basse-lien.actif { color: var(--vert); font-weight: 600; }
.nav-basse-lien.actif img { filter: none; }
.nav-basse-lien:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: -2px;
}

/* Dégagement : le contenu ne doit jamais passer sous la barre basse fixe.
   Portée à `.contenu` seulement sur les pages qui affichent la barre
   (`:has(.nav-basse)`), pour ne pas ajouter d'espace inutile en bas des
   pages admin (qui partagent la même classe `.contenu` mais n'ont pas de
   barre basse). */
body:has(.nav-basse) .contenu {
  padding-bottom: calc(var(--hauteur-nav-basse) + env(safe-area-inset-bottom, 0px) + 1.5rem);
}

/* Le panneau (fiche de plantation / légume / article) est aussi en
   position fixe, collé en bas d'écran sur mobile (< 720px, cf. règle
   .panneau plus haut) : on le relève au-dessus de la barre basse pour
   qu'elle ne le masque jamais. Surcharge ciblée uniquement (on ne modifie
   pas la définition de .panneau elle-même). */
@media (max-width: 719.98px) {
  .panneau {
    bottom: calc(var(--hauteur-nav-basse) + env(safe-area-inset-bottom, 0px));
  }
}