/* =====================================================================
   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; }
/* Défilement transversal de la parcelle — NATIF (correctif du 01.09.2026).
   `pan-x pan-y` laisse le navigateur faire défiler le conteneur en X et la
   page en Y, avec l'inertie du système, tout en excluant double-tap et
   pincement qui fausseraient le placement au carré. La sélection
   maintien-glisse reprend la main en annulant le `touchmove` (parcelle.js) —
   ce n'est possible QUE tant que le défilement n'a pas démarré, c'est-à-dire
   après 350 ms de doigt immobile : exactement le cas du maintien.
   ⚠️ NE JAMAIS revenir à `touch-action: none` ici : la parcelle devenait
   totalement immobile au doigt (aucun défilement possible sur le SVG, qui
   couvre tout le plan), et le défilement manuel censé le remplacer ne
   partait que depuis un carré libre. */
#plan-svg {
  touch-action: pan-x pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* pas de menu système sur le maintien (iOS) */
}
/* Contexte LECTURE SEULE — parcelle idéale du mode Simple et saisons passées.
   Aucun geste de placement n'y est possible : on ne contraint presque rien —
   `manipulation` = tout le natif (défilement + pincement pour agrandir le
   plan), sans le zoom au double-tap qui gênerait le tap sur une culture.
   La classe est posée sur le CONTENEUR par parcelle.js
   (rendrePlanDansPage), au même endroit que le rendu du SVG. */
.plan-defilement.plan-lecture #plan-svg { touch-action: manipulation; }
.plan-defilement.plan-lecture .fond-bloc { cursor: default; }

.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));
  }
}

/* =====================================================================
   Commande annuelle (page comité admin-commande.html)
   Suivi du prévisionnel de plantons présenté PAR LIVRAISON : une carte
   pliable par date prévue (accordéon), qui déplie un tableau des variétés
   attendues ce jour-là. Réutilise .tableau-admin / .carte-admin ; n'ajoute
   que les badges de statut, les cartes de livraison et les mini-formulaires
   (ligne et groupe).
   ===================================================================== */

.commande-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
}

/* Badges de statut — uniquement des couleurs de la charte (variables) */
.badge-statut {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-prevu      { background: var(--fond-section); color: var(--texte-secondaire); }
.badge-livre      { background: var(--succes-fond);  color: var(--succes); }
.badge-retard     { background: var(--alerte-fond);  color: var(--alerte); }
.badge-non-livre  { background: var(--erreur-fond);  color: var(--erreur); }

/* Ligne destinée à la zone commune : hors quotas des membres */
.badge-zone {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  background: var(--info-fond);
  color: var(--info);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.commande-note { color: var(--texte-secondaire); font-size: 0.75rem; }

/* ---------- Une carte pliable par livraison (accordéon) ---------- */
.livraison-carte {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  margin-top: 0.75rem;
  overflow: hidden;
}
/* Livraison entièrement livrée : liseré vert + fond de titre succès */
.livraison-terminee { border-color: var(--succes); }
.livraison-terminee .livraison-bascule { background: var(--succes-fond); }

.livraison-tete { margin: 0; font-size: 1rem; }

/* Le bouton EST l'en-tête cliquable (aria-expanded + aria-controls) */
.livraison-bascule {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  background: #fff;
  border: 0;
  border-radius: var(--rayon);
  font: inherit;
  text-align: left;
  color: var(--texte);
  cursor: pointer;
}
.livraison-bascule:hover { background: var(--fond-section); }
.livraison-bascule:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; }

.livraison-chevron {
  display: inline-flex;
  color: var(--vert);
  transition: transform 0.15s ease-out;
}
.livraison-bascule[aria-expanded="true"] .livraison-chevron { transform: rotate(90deg); }

.livraison-intitule { flex: 1 1 14rem; }
.livraison-date {
  display: block;
  font-family: 'Antonio', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--vert-fonce);
}
.livraison-resume {
  display: block;
  font-size: 0.8rem;
  color: var(--texte-secondaire);
}
.livraison-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}

.livraison-corps {
  padding: 0 0.9rem 0.9rem;
  border-top: 1px solid var(--bordure);
}

/* Actions au niveau de la livraison (aucun bouton primaire : le seul
   bouton primaire de l'écran reste « Importer la commande ») */
.livraison-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.livraison-actions .bouton { width: auto; margin-top: 0; min-height: 44px; }
.livraison-actions .aide { margin: 0; }

/* Mini-formulaire de groupe : même habillage que celui des lignes */
.groupe-edition {
  background: var(--fond-section);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin-top: 0.5rem;
}

/* Légume : icône + nom, sur une seule ligne */
.cellule-legume { font-weight: 600; }

/* Commentaires du prestataire : colonne large mais bornée */
.cellule-commentaire {
  white-space: normal;
  max-width: 260px;
  color: var(--texte-secondaire);
  font-size: 0.85rem;
}

.commande-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.commande-actions .bouton {
  width: auto;
  margin-top: 0;
  padding: 0.3rem 0.7rem;
  min-height: 44px;
}
.commande-actions .bouton-discret { padding: 0 0.4rem; }

/* Mini-formulaires de ligne (marquer livré / retard / modifier) */
.ligne-edition > td { background: var(--fond-section); white-space: normal; }
.edition-corps {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
}
.edition-titre {
  flex: 1 0 100%;
  font-weight: 600;
  color: var(--vert-fonce);
}
.edition-corps label { margin: 0; font-size: 0.85rem; font-weight: 500; }
.edition-corps input {
  display: block;
  min-height: 44px;
  font: inherit;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: #fff;
}
.edition-corps input[type="number"] { width: 100px; }
.edition-corps .champ-large { flex: 1 1 260px; }
.edition-corps .champ-large input { width: 100%; }
.edition-corps .aide { flex: 1 0 100%; margin: 0; }
.edition-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.edition-actions .bouton { width: auto; margin-top: 0; }

/* =====================================================================
   Back office v2 (squelette)
   Sous-nav portée à 5 entrées (Stock · Parcelle · Livraison · Membres ·
   Plan annuel, cf. Spec_UX_BackOffice_v2 §2). Trois ajouts pour que 5
   entrées tiennent sur un téléphone tenu d'une main, sans casser le
   défilement horizontal déjà en place (display:flex + overflow-x:auto,
   règle .sous-nav existante plus haut) :
   1) les items ne se compriment plus (sinon « Plan annuel » passe sur
      deux lignes au lieu de déclencher le défilement) — le
      white-space:nowrap est déjà posé sur .sous-nav a, on ajoute juste
      l'insécabilité de la largeur ;
   2) défilement tactile fluide, sans barre de défilement visible sur le
      vert de la charte ;
   3) marge de calage pour le centrage JS de l'onglet actif au chargement
      (voir assets/js/api.js, DOMContentLoaded).
   ===================================================================== */
.sous-nav a { flex: 0 0 auto; }
.sous-nav {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-padding-inline: 0.75rem;
}
.sous-nav::-webkit-scrollbar { display: none; }

/* ===== Onglet Stock (lot B) =====
   Tableau de stock enrichi (ligne cliquable + colonne d'action), panneau
   rapide et éditeur de fiche légume — Spec_UX_BackOffice_v2 §3.1 à §3.3.
   Aucun composant nouveau : tout dérive de l'existant (.bouton-discret,
   .catalogue-grille, .carte-a-planter.selectionnee, .formulaire-en-ligne).
   Uniquement des couleurs de la charte (variables de :root en tête de fichier).
   ================================================================= */

/* Libellé réservé aux lecteurs d'écran (en-tête de la colonne d'action,
   légende des tableaux) — jamais un en-tête vide. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Tableau de stock : ligne cliquable + colonne d'action ---------- */
#tableau-stock tbody tr { cursor: pointer; }
#tableau-stock tbody tr:hover { background: var(--fond-section); }

/* Le nom du légume EST un bouton : c'est lui la cible accessible au clavier,
   le clic sur la ligne n'est qu'un confort tactile. */
.lien-legume {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 500;
  color: var(--texte);
  text-align: left;
  cursor: pointer;
}
.lien-legume:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }

.cellule-actions {
  width: 56px;
  text-align: right;
}

/* Bouton carré contenant un SVG (crayon de la colonne d'action) */
.bouton-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--vert);
  cursor: pointer;
}
.bouton-icone:hover { background: var(--vert-pale); }
.bouton-icone:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; }

/* ---------- Panneau large (éditeur de fiche) ---------- */
/* En mobile, le panneau reste la feuille montante plein écran de .panneau. */
@media (min-width: 720px) {
  .panneau-large {
    width: 720px;
    max-width: calc(100vw - 2rem);
  }
}

/* Lien d'action discret à l'intérieur d'un panneau (« Voir dans Livraison ») */
.panneau a.bouton-discret {
  display: inline-flex;
  align-items: center;
  padding: 0;
}

/* ---------- Panneau rapide : quotas d'une ligne de livraison ---------- */
.ligne-quota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.5rem;
}
.ligne-quota-date { flex: 1 1 10rem; font-weight: 500; }
.ligne-quota label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
}
.ligne-quota input[type="number"] { width: 90px; }
.interrupteur-libelle { font-weight: 600; }

/* ---------- Éditeur de fiche ---------- */
.champ-long {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--texte);
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  resize: vertical;
}
.champ-long:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 1px;
  border-color: var(--vert);
}
.compteur-champ { text-align: right; font-size: 0.75rem; }

/* Statut publiée / brouillon : deux radios, sans habillage de fieldset */
.choix-statut {
  border: 0;
  padding: 0;
  margin: 1rem 0 0;
}
.choix-statut legend { font-weight: 500; padding: 0; }

/* ---------- Section « Icône » ---------- */
.icone-actuelle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.apercu-icone {
  width: 64px;
  height: 64px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: var(--fond-section);
}
.icone-actuelle p { margin: 0; font-size: 0.85rem; color: var(--texte-secondaire); }

/* Grille de choix : reprend .catalogue-grille, sélection traitée comme
   .carte-a-planter.selectionnee (outline vert + fond pâle). */
.grille-icones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.icone-choix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  cursor: pointer;
}
.icone-choix img { width: 40px; height: 40px; }
.icone-choix.selectionnee { background: var(--vert-pale); outline: 2px solid var(--vert); }
.icone-choix:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }

/* =====================================================================
   Double mode (lot UI) — Potager Simple / Potager Virtuel
   Spec UX Double Mode du 01.09.2026, §2 (sélecteur), §3 (mode Simple),
   §4 (carte « à placer »). Aucun composant inédit : tout dérive de
   l'existant (.bouton*, .carte-a-planter, .badge-statut, .carte-admin) et
   n'utilise que les variables de la charte déclarées en tête de fichier.
   ===================================================================== */

/* ---------- Sélecteur « Simple | Virtuel » (§2) ----------
   Un segmented control, PAS un interrupteur : les deux modes sont deux
   expériences de rang égal, sans état « éteint ». Rayon 10 px (charte §5 :
   cartes discrètes 8-12 px) — la pilule reste réservée aux badges, qui sont
   de l'information, pas des contrôles. */
.titre-parcelle { flex-wrap: wrap; }
.titre-actions  { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.segment {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: #fff;
  flex: 0 0 auto;
}
.segment button {
  min-height: 40px;              /* + 2 px de padding haut/bas = 44 px de cible */
  padding: 0 0.9rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--texte-secondaire);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
/* État, pas action : le segment actif ne compte pas comme bouton primaire. */
.segment button[aria-checked="true"] { background: var(--vert); color: #fff; font-weight: 600; }
.segment button:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }
/* Bascule pessimiste : pendant l'enregistrement, les deux boutons sont inertes. */
.segment[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* ---------- Icône générique (anneau du plan) ---------- */
.anneau-generique { color: var(--texte-secondaire); flex: 0 0 auto; }

/* ---------- Cartes « À confirmer » (§3.2) ----------
   Deux décisions par carte, aucun bouton primaire sur cet écran : une liste
   de 8 cartes portant chacune un « Je plante » vert plein ferait 8 primaires
   (charte §5 / guide §4.10). */
.carte-confirmer {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0.75rem 0.9rem;
  margin-top: 0.6rem;
}
.carte-confirmer-tete { display: flex; align-items: center; gap: 0.75rem; }
.carte-confirmer-icone { display: inline-flex; flex: 0 0 auto; width: 48px; height: 48px; }
.carte-confirmer-icone img { width: 48px; height: 48px; }
.carte-confirmer-texte { flex: 1 1 auto; min-width: 0; }
.carte-confirmer-nom {
  font-family: 'Antonio', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
}
.carte-confirmer-qte {
  flex: 0 0 auto;
  font-family: 'Antonio', sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--vert-fonce);
  white-space: nowrap;
}
.carte-confirmer .aide { margin-top: 0.2rem; }
.carte-confirmer-etat { margin: 0.4rem 0 0; font-size: 0.9rem; font-weight: 600; }
.carte-confirmer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.6rem;
}
.carte-confirmer-actions .bouton { width: auto; margin-top: 0; }
/* Confirmée : fond et bordure de succès. Contraste #2D7A31 sur #E5F2E6 =
   4,6:1 — juste au-dessus du seuil : ne pas descendre sous 13 px (0,9rem
   ci-dessus) ni poser ce texte sur un autre fond. */
.carte-confirmer.confirmee { background: var(--succes-fond); border-color: var(--succes); }
.carte-confirmer.confirmee .carte-confirmer-etat { color: var(--succes); }
.pastille-confirmee { font-weight: 700; }
/* Refusée : neutre, jamais culpabilisante. */
.carte-confirmer.refusee { background: var(--fond-section); }
.carte-confirmer.refusee .carte-confirmer-etat { color: var(--texte-secondaire); font-weight: 500; }

/* ---------- « Le rab est ouvert » (§3.3) ----------
   Stepper : deux cibles de 44 px encadrant un champ éditable — viser un
   champ numérique avec des gants et ouvrir le clavier pour taper « 2 » est
   pénible. Bornes 1..restant appliquées côté client ET côté serveur. */
.ligne-rab {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0.6rem 0.75rem;
  margin-top: 0.5rem;
}
.ligne-rab img { width: 32px; height: 32px; flex: 0 0 auto; }
.ligne-rab .nom { font-weight: 600; }
.ligne-rab .reste { color: var(--texte-secondaire); font-size: 0.85rem; }
.ligne-rab .bouton { width: auto; margin-top: 0; }
.ligne-rab .stepper { margin-left: auto; }
.stepper { display: flex; align-items: center; gap: 0.25rem; }
.stepper button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: #fff;
  color: var(--vert-fonce);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.stepper button:hover { background: var(--vert-pale); }
.stepper button:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }
.stepper input[type="number"] {
  width: 64px;
  min-height: 44px;
  padding: 0.4rem 0.5rem;
  text-align: center;
  font: inherit;
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: #fff;
}

/* ---------- « Ma saison » (§3.5) : un journal, aucun bouton ---------- */
#section-ma-saison { margin-top: 1rem; }
.ligne-saison {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--bordure);
  font-size: 0.95rem;
}
.ligne-saison:first-child { border-top: 0; }
.ligne-saison img { width: 28px; height: 28px; flex: 0 0 auto; }
.ligne-saison .nom { font-weight: 600; }
.ligne-saison .detail { color: var(--texte-secondaire); font-size: 0.85rem; }
.ligne-saison.renoncee .nom { font-weight: 500; color: var(--texte-secondaire); }

/* ---------- Mode Virtuel : carte « À placer » (§4.2) ----------
   Le tireté est déjà, sur le plan, la convention du « prévu, pas encore
   posé » (stroke-dasharray des fantômes) : même grammaire visuelle dans le
   bandeau et sur le plan. Le badge texte porte l'information — jamais la
   couleur seule. */
.carte-a-placer {
  border: 1.5px dashed var(--vert);
  background: var(--vert-pale);
}
.badge-a-placer {
  background: var(--fond-section);
  color: var(--texte-secondaire);
}
/* Les deux blocs de « À planter » : un intertitre discret par bloc. */
#section-a-planter h3 { margin: 1rem 0 0.15rem; }
#bloc-a-placer .aide { margin-bottom: 0.4rem; }
#bloc-a-confirmer .aide { margin-bottom: 0.4rem; }

/* =====================================================================
   Lot du 02.09.2026 — « montrer la différence entre les modes » +
   bandeau « Prochaine livraison ». Aucun composant inédit : tout dérive
   de l'existant (.panneau, accordéon de la page Commande, .carte-*) et
   n'utilise que les variables de la charte déclarées en tête de fichier.
   ===================================================================== */

/* ---------- « ? » d'aide, à côté du sélecteur de mode ----------
   Discret mais atteignable : cible de 44 px (charte, usage avec des gants),
   contour neutre pour ne surtout pas concurrencer le segment actif. */
.bouton-aide-modes {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: #fff;
  color: var(--texte-secondaire);
  font: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.bouton-aide-modes:hover { background: var(--fond-section); color: var(--vert-fonce); }
.bouton-aide-modes:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }

/* ---------- Panneau comparatif « Deux façons de suivre ta parcelle » ----------
   Deux colonnes ILLUSTRÉES : c'est la vignette qui porte l'explication, la
   phrase ne fait que la nommer. Une seule colonne sous 420 px (les vignettes
   deviendraient illisibles côte à côte sur un écran de 360 px). */
.comparatif-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
@media (max-width: 419.98px) {
  .comparatif-modes { grid-template-columns: 1fr; }
}
.colonne-mode {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0.75rem;
  background: #fff;
}
/* Le mode courant est signalé par un liseré ET un texte : jamais la couleur seule. */
.colonne-mode-actuelle { border-color: var(--vert); background: var(--vert-pale); }
.colonne-mode h3 { margin: 0.5rem 0 0.2rem; font-size: 1.15rem; }
.colonne-mode p { margin: 0; font-size: 0.9rem; color: var(--texte-secondaire); }
.colonne-mode-badge {
  margin-top: 0.4rem !important;
  font-weight: 600;
  color: var(--vert-fonce) !important;
  font-size: 0.8rem !important;
}
.vignette-mode { display: block; width: 100%; height: auto; }

/* ---------- Micro-transition à la bascule de mode ----------
   Le contenu se « re-pose » : 300 ms pour matérialiser que la page a changé
   de nature. Rien de plus — et rien du tout si le membre a demandé moins
   d'animations (réglage système). */
@keyframes bascule-mode-apparait {
  from { opacity: 0.35; transform: translateY(6px); }
  to   { opacity: 1;    transform: none; }
}
.contenu-parcelle.bascule-mode > section,
.contenu-parcelle.bascule-mode > details {
  animation: bascule-mode-apparait 0.3s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .contenu-parcelle.bascule-mode > section,
  .contenu-parcelle.bascule-mode > details { animation: none; }
}

/* ---------- Bandeau « Prochaine livraison » (les deux modes) ----------
   Le bandeau tient sur UNE ligne et n'affiche que la prochaine livraison ; il
   est entièrement cliquable et ouvre la pop-up « Les livraisons de la saison »
   (révision du 02.09.2026 : plus d'accordéon, le détail vit dans #panneau).
   Trois teintes, jamais plus : neutre (à venir), alerte DOUCE (retard), succès
   (fin de saison). Les styles des groupes de dates de la pop-up sont juste
   en dessous — même section, même vocabulaire. */
#section-prochaine-livraison { margin-top: 1rem; }

.bandeau-livraison {
  background: var(--fond-section);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}
/* Retard : teinte d'alerte DOUCE (jamais rouge — personne n'a fauté). */
.bandeau-livraison-retard { background: var(--alerte-fond); border-color: var(--alerte); }
/* Fin de saison : teinte de succès, la même que les messages de félicitation. */
.bandeau-livraison-terminee { background: var(--succes-fond); border-color: var(--succes); }

.livraison-bascule-membre {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--texte);
  cursor: pointer;
}
.livraison-bascule-membre:hover { background: rgba(0, 124, 50, 0.06); }
.livraison-bascule-membre:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; }
.livraison-titre { flex: 1 1 auto; font-weight: 600; }
.livraison-camion { display: inline-flex; flex: 0 0 auto; color: var(--vert); }
.bandeau-livraison-retard .livraison-camion { color: var(--alerte); }
.bandeau-livraison-terminee .livraison-camion { color: var(--succes); }
/* Chevron « › » : il annonce une pop-up, il ne pivote donc plus. */
.livraison-chevron-membre { display: inline-flex; flex: 0 0 auto; color: var(--vert); }

/* ---------- Pop-up « Les livraisons de la saison » (#panneau) ----------
   Un groupe par date : la date en titre, les variétés dessous, à plat. */
/* Pas de sélecteur `:last-of-type` ici : le dernier <div> du corps du panneau
   est la boîte de message (#message-panneau), la règle ne s'appliquerait
   jamais au dernier groupe. Le dernier écart est absorbé par le panneau. */
.groupe-livraison { margin: 0 0 1rem; }
.groupe-livraison-date {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin: 0 0 0.2rem;
  font-size: 1rem;
}
/* Déjà livrée : le groupe s'efface un peu, sans devenir illisible. */
.groupe-livraison-livree .groupe-livraison-date { color: var(--texte-secondaire); }
/* La prochaine livraison, celle du bandeau : un simple repère à gauche. */
.groupe-livraison-prochaine {
  padding-left: 0.6rem;
  border-left: 3px solid var(--vert);
}
.badge-livraison {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-livraison-livree { background: var(--succes-fond); color: var(--succes); }
.badge-livraison-retard { background: var(--alerte-fond); color: var(--alerte); }

.liste-livraison { list-style: none; margin: 0; padding: 0; }
.ligne-livraison {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--bordure);
}
.ligne-livraison:first-child { border-top: 0; }
.ligne-livraison img { width: 32px; height: 32px; flex: 0 0 auto; }
.ligne-livraison .nom { font-weight: 600; }
.ligne-livraison .detail { color: var(--texte-secondaire); font-size: 0.85rem; }

/* État vide : sobre, une seule ligne, aucun accordéon à ouvrir sur du vide. */
.livraison-vide {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.6rem 0.85rem;
  background: var(--fond-section);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte-secondaire);
  font-size: 0.9rem;
}

/* =====================================================================
   Lot « Mouvement » (27.09.2026) — couche d'animation du portail membre
   Pilotée par assets/js/mouvement.js (décor pur, facultatif) et par deux
   classes posées par login.js (.bouton-envol, .secousse). Règles :
   · couleurs = variables de la charte uniquement ;
   · rien ici ne change la mise en page au repos : chaque animation part
     d'un état visible et y revient (une capture figée reste complète) ;
   · pages du comité NON concernées (sélecteurs limités à la connexion et
     aux pages membre, qui portent la barre basse .nav-basse) ;
   · `prefers-reduced-motion` coupe tout, en fin de section.
   ===================================================================== */
:root {
  --ressort: cubic-bezier(.34, 1.56, .64, 1);   /* dépassement doux, « pousse » */
  --sortie: cubic-bezier(.16, 1, .3, 1);        /* décélération longue */
  --bascule: cubic-bezier(.65, 0, .35, 1);      /* aller-retour symétrique */
}

/* ---------- Connexion : entrée orchestrée ---------- */
.page-connexion { position: relative; overflow: hidden; }
.page-connexion > .logo-connexion,
.page-connexion > .carte { position: relative; z-index: 1; }
.graines-connexion { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.page-connexion .logo-connexion img {
  animation: mv-logo-pousse 1s var(--ressort) .1s both;
  transform-origin: 50% 80%;
}
.page-connexion .baseline { animation: mv-monte .7s var(--sortie) .6s both; }
.page-connexion > .carte { animation: mv-carte-arrive .9s var(--sortie) .75s both; }
.page-connexion > .carte > * { animation: mv-monte .6s var(--sortie) both; }
.page-connexion > .carte > *:nth-child(1) { animation-delay: .95s; }
.page-connexion > .carte > *:nth-child(2),
.page-connexion > .carte > *:nth-child(3) { animation-delay: 1.02s; }
.page-connexion > .carte > *:nth-child(4),
.page-connexion > .carte > *:nth-child(5) { animation-delay: 1.09s; }
.page-connexion > .carte > *:nth-child(n+6) { animation-delay: 1.16s; }
@keyframes mv-logo-pousse {
  from { opacity: 0; transform: scale(.55) translateY(14px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes mv-monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mv-carte-arrive {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* Champ actif : le liseré vert se déroule */
.page-connexion input[type="text"],
.page-connexion input[type="password"] { transition: border-color .25s, box-shadow .35s var(--sortie); }
.page-connexion input:focus-visible { box-shadow: 0 3px 0 -1px var(--vert); }

/* Le bouton « Se connecter » se replie en graine pendant l'appel */
.page-connexion .bouton-primaire {
  position: relative;
  transition: width .45s var(--bascule), margin-left .45s var(--bascule),
              border-radius .45s var(--bascule), background .2s, transform .2s;
}
.page-connexion .bouton-primaire:active:not(:disabled) { transform: scale(.98); }
.page-connexion .bouton-primaire.bouton-envol,
.page-connexion .bouton-primaire.bouton-envol:disabled {
  width: 48px;
  margin-left: calc(50% - 24px);
  border-radius: 24px;
  padding: 0;
  color: transparent;
  opacity: 1;
  overflow: hidden;
}
.page-connexion .bouton-primaire.bouton-envol::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  left: 50%; top: 50%;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: mv-tourne .8s linear infinite;
}
@keyframes mv-tourne { to { transform: rotate(360deg); } }
/* Refus : la carte secoue la tête (le message reste la vraie information) */
.carte.secousse { animation: mv-secousse .45s ease both; }
@keyframes mv-secousse {
  20% { transform: translateX(-8px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}

/* ---------- Volet vert (connexion → « Ma parcelle ») ---------- */
.mouvement-volet {
  position: fixed; inset: 0; z-index: 90;
  background: var(--vert);
  display: grid; place-items: center;
  pointer-events: none;
  clip-path: circle(0 at 50% 50%);
}
.mouvement-volet svg { opacity: 0; transform: scale(.4); transition: transform .6s var(--ressort), opacity .25s; }
.mouvement-volet.pousse svg { opacity: 1; transform: none; }
.mouvement-volet.pousse { clip-path: circle(150% at 50% 45%); }

/* ---------- Éclats (canvas plein écran, ne capte rien) ---------- */
.mouvement-eclats { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; }

/* ---------- « Ma parcelle » : les sections arrivent en cascade ---------- */
.mouvement-entree .contenu-parcelle > * { animation: mv-monte .6s var(--sortie) both; }
.mouvement-entree .contenu-parcelle > *:nth-child(2) { animation-delay: .06s; }
.mouvement-entree .contenu-parcelle > *:nth-child(3) { animation-delay: .12s; }
.mouvement-entree .contenu-parcelle > *:nth-child(4) { animation-delay: .18s; }
.mouvement-entree .contenu-parcelle > *:nth-child(5) { animation-delay: .24s; }
.mouvement-entree .contenu-parcelle > *:nth-child(n+6) { animation-delay: .3s; }

/* ---------- Ciel de saison (au-dessus du plan, décor) ----------
   Côté Jura à gauche, Léman et Alpes à droite : les mêmes repères que sous
   le plan. Le soleil traverse l'année ; la météo du mois tombe DANS le ciel
   seulement, jamais sur la parcelle. */
.ciel-saison {
  position: relative;
  height: 96px;
  margin-bottom: -1px;
  border: 1px solid var(--bordure);
  border-bottom: 0;
  border-radius: var(--rayon) var(--rayon) 0 0;
  overflow: hidden;
  background: var(--info-fond);
  isolation: isolate;
}
.ciel-saison + .plan-defilement { border-top-left-radius: 0; border-top-right-radius: 0; }
@media (min-width: 720px) { .ciel-saison { height: 112px; } }
.ciel-teinte { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.ciel-teinte.visible { opacity: 1; }
.ciel-teinte[data-saison="hiver"]     { background: linear-gradient(180deg, var(--info-fond), #fff); }
.ciel-teinte[data-saison="printemps"] { background: linear-gradient(180deg, var(--info-fond), var(--vert-pale)); }
.ciel-teinte[data-saison="ete"]       { background: linear-gradient(180deg, var(--info-fond), var(--alerte-fond)); }
.ciel-teinte[data-saison="automne"]   { background: linear-gradient(180deg, var(--fond-section), var(--alerte-fond)); }
.ciel-soleil {
  position: absolute; left: 70%; top: 40%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  transition: left 1.1s var(--sortie), top 1.1s var(--sortie);
  z-index: 1;
}
.ciel-soleil span {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--alerte-fond);
  box-shadow: 0 0 0 2px rgba(149, 96, 27, .35), 0 0 0 8px rgba(251, 241, 224, .6), 0 0 26px 8px rgba(251, 241, 224, .9);
  animation: mv-respire 5s ease-in-out infinite;
}
@keyframes mv-respire { 50% { transform: scale(1.08); } }
.ciel-paysage { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; z-index: 2; }
.ciel-reflet { stroke-dasharray: 14 22; animation: mv-reflet 3.5s linear infinite; }
.ciel-reflet.lent { animation-duration: 5.5s; }
@keyframes mv-reflet { to { stroke-dashoffset: -72; } }
.ciel-meteo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.ciel-lieu {
  position: absolute; bottom: 6px; z-index: 4;
  font-family: 'Antonio', sans-serif; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--info);
}
.ciel-lieu.jura { left: 10px; }
.ciel-lieu.leman { right: 10px; color: #fff; text-shadow: 0 0 6px rgba(62, 107, 140, .6); }
.ciel-joran {
  position: absolute; left: 10px; top: 8px; z-index: 4;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .8); color: var(--info);
  font-size: .75rem; font-weight: 600;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .4s, transform .6s var(--sortie);
}
.ciel-saison.joran .ciel-joran { opacity: 1; transform: none; }

/* ---------- Le plan : les cultures poussent en vague, du Jura au Léman ----
   plan.js n'est pas touché : mouvement.js pose --vague / --vent sur chaque
   <g class="culture"> après rendu. `transform-box: fill-box` fait pivoter
   chaque culture sur sa PROPRE base (pas sur l'origine du SVG). */
#plan-conteneur .culture { transform-box: fill-box; transform-origin: 50% 100%; }
#plan-conteneur .culture image { transform-box: fill-box; transform-origin: 50% 100%; }
#plan-conteneur.plan-vague .culture { animation: mv-culture-pousse .7s var(--ressort) both; animation-delay: var(--vague, 0ms); }
/* Pas d'opacité en fin de keyframe : la culture retrouve SA valeur (les
   cultures atténuées par plan.js portent opacity="0.25" — un `to {opacity:1}`
   les ferait clignoter en plein avant de retomber). */
@keyframes mv-culture-pousse {
  from { opacity: 0; transform: scaleY(.2) translateY(6px); }
  to   { transform: none; }
}
#plan-conteneur.joran .culture image { animation: mv-joran 1.8s ease-in-out both; animation-delay: var(--vent, 0ms); }
@keyframes mv-joran {
  0% { transform: none; } 30% { transform: rotate(12deg) skewX(-5deg); }
  55% { transform: rotate(-4deg); } 78% { transform: rotate(3deg); } 100% { transform: none; }
}
#plan-conteneur .culture.culture-plantee rect { animation: mv-halo 1.1s var(--sortie); }
@keyframes mv-halo {
  0%   { stroke-width: 6; stroke: var(--vert); }
  100% { stroke-width: 2; }
}
#plan-conteneur .culture.culture-plantee { animation: mv-culture-pousse .7s var(--ressort) both; }

/* Bande des mois : le mois choisi « saute » */
.bande-mois .mois { transition: background .25s, color .25s, transform .3s var(--ressort); }
.bande-mois .mois:hover:not(.actif) { background: rgba(255, 255, 255, .12); }
.bande-mois .mois.mois-saute { animation: mv-saute .45s var(--ressort); }
@keyframes mv-saute { 40% { transform: translateY(-4px) scale(1.08); } }

/* Carte confirmée / rab pris : une vague verte part de la carte */
.carte-celebree { animation: mv-celebre .9s var(--sortie); }
@keyframes mv-celebre {
  0%   { box-shadow: 0 0 0 0 rgba(45, 122, 49, .55); transform: scale(1.015); }
  100% { box-shadow: 0 0 0 16px rgba(45, 122, 49, 0); transform: none; }
}
.carte-celebree .carte-confirmer-icone img,
.carte-celebree > img { animation: mv-icone-rebond .7s var(--ressort); }
@keyframes mv-icone-rebond { 0% { transform: scale(.6) rotate(-12deg); } 100% { transform: none; } }

/* Panneau et voile des pages membre : le panneau glisse, le voile s'estompe.
   Propriétés individuelles `translate` / `scale` : elles se COMPOSENT avec le
   `transform: translate(-50%, -50%)` du panneau centré (≥ 720 px) au lieu de
   l'écraser. Le panneau reste un [hidden] basculé par parcelle.js : ces
   animations jouent d'elles-mêmes à chaque réapparition. */
body:has(.nav-basse) .voile:not([hidden]) { animation: mv-fondu .3s ease both; }
body:has(.nav-basse) .panneau:not([hidden]) { animation: mv-panneau-bas .45s var(--sortie) both; }
@media (min-width: 720px) {
  body:has(.nav-basse) .panneau:not([hidden]) { animation-name: mv-panneau-centre; }
}
@keyframes mv-fondu { from { opacity: 0; } }
@keyframes mv-panneau-bas { from { translate: 0 48px; opacity: .4; } }
@keyframes mv-panneau-centre { from { scale: .95; translate: 0 12px; opacity: 0; } }

/* Messages (aria-live) : ils arrivent au lieu d'apparaître d'un coup */
body:has(.nav-basse) .message.visible,
.page-connexion .message.visible { animation: mv-message .45s var(--ressort) both; }
@keyframes mv-message { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* ---------- Réduction des animations demandée par le système ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-connexion *, .page-connexion *::after,
  .mouvement-entree .contenu-parcelle > *,
  #plan-conteneur .culture, #plan-conteneur .culture *,
  .bande-mois .mois, .carte-celebree, .carte-celebree *,
  body:has(.nav-basse) .panneau, body:has(.nav-basse) .voile,
  body:has(.nav-basse) .message.visible, .carte.secousse,
  .ciel-saison, .ciel-saison * {
    animation: none !important;
    transition: none !important;
  }
  .ciel-saison { display: none; }   /* mouvement.js ne le crée pas ; ceinture de sécurité */
}