/* ==========================================================================
   Coquelicot — composants
   Conversion en CSS vanilla du design system Claude Design (ui_kits/mobile-app).
   Toutes les valeurs proviennent de tokens.css : ne pas coder de couleur en dur.
   ========================================================================== */

:root { color-scheme: light; }

/* ==========================================================================
   Ajustements de thème
   Le fond de page reste celui du design system (papier beige). Seuls les
   encadrés mis en avant, dorés à l'origine, passent en vert profond.

   Ces variables écrasent volontairement celles de tokens.css : on ne modifie
   pas l'export du design system, qui peut être régénéré.
   ========================================================================== */
:root {
  /* Grain de papier : bruit fractal généré en SVG, encodé dans la feuille de
     styles. Aucun fichier image à charger, et il se répète sans raccord
     (stitchTiles). Posé sur le FOND uniquement : les cartes, opaques, restent
     lisses, donc le texte n'est jamais lu à travers une texture.

     Appliqué en `soft-light` et non en superposition simple : un bruit gris
     posé par-dessus délaverait la couleur. En soft-light, le gris moyen est
     neutre — seules les variations texturent, la teinte moyenne est conservée. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Encadrés mis en avant et fiches plantes : dégradé de vert profond,
     construit sur la rampe « feuille » du design system. */
  --wash-foret: linear-gradient(158deg, var(--green-700) 0%, var(--green-800) 55%, var(--green-900) 100%);

  /* Bleu de nuit, réservé au bloc climat de « Mon sol ». Le froid et l'hiver
     se lisent mieux en bleu qu'en rouge. */
  --bleu-900: #0C2634;
  --bleu-800: #123648;
  --bleu-700: #1B4B5E;
  --bleu-300: #9EC4D2;
  --wash-nuit: linear-gradient(158deg, var(--bleu-700) 0%, var(--bleu-800) 55%, var(--bleu-900) 100%);

  /* Beige profond de l'action principale (« Ajouter à mon jardin »). Le point
     le plus clair du dégradé est choisi assez sombre pour que le texte ivoire
     y reste lisible (4,7:1). */
  --beige-700: #826F58;
  --beige-800: #74624D;
  --beige-900: #675644;
  --wash-terre: linear-gradient(158deg, var(--beige-700) 0%, var(--beige-800) 55%, var(--beige-900) 100%);

  /* Le repos sous la barre d'onglets suit l'encoche du téléphone quand il y en
     a une, et reste discret sinon — la valeur fixe de 22 px du kit remontait
     inutilement les icônes sur les appareils sans encoche. */
  --safe-bottom: max(8px, env(safe-area-inset-bottom, 8px));
}

html, body { height: 100%; }
body {
  background: var(--surface-page);
  overscroll-behavior-y: none;
  /* Filet de sécurité : aucun élément ne doit pouvoir décaler la page. */
  overflow-x: hidden;
}

/* iOS Safari zoome automatiquement sur un champ dont la police fait moins de
   16 px, et la page reste zoomée : l'utilisateur doit alors faire défiler
   latéralement. Tous les champs de saisie sont donc forcés à 16 px. */
input, select, textarea { font-size: 16px; }

/* Cadre applicatif : plein écran sur mobile, colonne centrée sur grand écran. */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  /* Le grain se superpose au vert. Les cartes étant opaques, il ne transparaît
     que sur le fond exposé — jamais derrière un texte. */
  background-color: var(--surface-page);
  background-image: var(--grain);
  background-size: 160px 160px;
  background-blend-mode: soft-light;
}
@media (min-width: 560px) {
  /* Sur grand écran, le pourtour est un avocat plus soutenu que la colonne,
     pour détacher l'application de la page. */
  body {
    background-color: var(--paper-100);
    background-image: var(--grain);
    background-size: 160px 160px;
    background-blend-mode: soft-light;
  }
  #app {
    min-height: 100dvh;
    box-shadow: 0 0 0 1px var(--paper-200), var(--shadow-raised);
  }
}

/* Zone défilante : laisse la place à la TabBar fixe. */
#screen {
  flex: 1;
  padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom));
}

/* --- Utilitaires ---------------------------------------------------------- */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gutter { padding-left: var(--gutter-screen); padding-right: var(--gutter-screen); }
.eyebrow {
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  letter-spacing: var(--type-eyebrow-track);
  text-transform: var(--eyebrow-transform);
  font-weight: var(--weight-bold);
  color: var(--text-gold);
}
.latin { font-family: var(--font-display); font-style: italic; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.icon svg { display: block; width: 100%; height: 100%; }

/* --- AppBar --------------------------------------------------------------- */
.appbar {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: var(--appbar-height);
  padding: var(--space-12) var(--gutter-screen);
  /* Transparent, et non le vert uni : sinon la barre de titre repeindrait un
     aplat sans grain par-dessus le fond texturé, laissant une couture visible
     juste sous l'en-tête. Le fond grainé de #app doit courir d'un bord à l'autre. */
  background: transparent;
}
.appbar__text { flex: 1; min-width: 0; }
.appbar__logo { height: 42px; width: auto; flex: 0 0 auto; margin-right: -2px; }

/* Bloc de marque : logo complet, sur l'écran de chargement et les états vides. */
.brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.brand__lockup { height: 110px; width: auto; }
.brand__mark { height: 76px; width: auto; }
.appbar__title {
  font-family: var(--font-display);
  font-size: var(--type-display-3-size);
  line-height: var(--type-display-3-line);
  letter-spacing: var(--type-display-3-track);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  margin: 2px 0 0;
}
.appbar__btn {
  display: grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  margin: calc(var(--space-12) * -1) 0;
  border: 0; background: none; cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  transition: background var(--duration-fast) var(--ease-standard);
}
.appbar__btn:hover { background: var(--surface-sunken); color: var(--text-strong); }
/* Les fiches plantes reprennent le vert profond des encadrés. */
.appbar--accent { background: var(--wash-foret); }
.appbar--accent .appbar__title { color: var(--text-on-accent); }
.appbar--accent .eyebrow { color: var(--gold-300); }
.appbar--accent .appbar__btn { color: var(--gold-200); }
.appbar--accent .appbar__btn:hover { background: rgba(255,253,248,.14); color: var(--paper-0); }

/* --- TabBar --------------------------------------------------------------- */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  max-width: 480px;
  margin: 0 auto;
  height: calc(var(--tabbar-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  /* Flex plutôt qu'une grille à nombre de colonnes figé : les onglets se
     répartissent d'eux-mêmes, quel qu'en soit le nombre (utile quand
     « Reconnaître » et « Actualités » arriveront). */
  display: flex;
  background: var(--surface-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-top: var(--border-width-hair) solid var(--border-hairline);
}
.tabbar__item {
  flex: 1 1 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-4);
  border: 0; background: none; cursor: pointer;
  /* Le gris pâle du kit tombait à 2,7:1 sur la barre : trop faible pour des
     libellés de navigation, que l'on doit pouvoir lire d'un coup d'œil. */
  color: var(--ink-600);
  font-size: var(--type-caption-size);
  font-weight: var(--weight-semibold);
  transition: color var(--duration-fast) var(--ease-standard);
}
.tabbar__item[aria-selected="true"] { color: var(--text-accent); }
.tabbar__dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--red-700);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.tabbar__item[aria-selected="true"] .tabbar__dot { opacity: 1; }

/* --- Card ----------------------------------------------------------------- */
.card {
  background: var(--surface-card);
  border: var(--border-width-hair) solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
}
.card--lg { padding: var(--pad-card-lg); }
/* Encadré mis en avant : vert profond au lieu du doré pâle d'origine.
   Les jetons de texte sont redéfinis ICI, sur la carte : comme les propriétés
   personnalisées s'héritent, les textes écrits en style inline dans app.js
   (qui pointent vers var(--text-strong), var(--text-muted)…) basculent
   automatiquement en clair, sans une seule retouche du JavaScript. */
.card--foil {
  background: var(--wash-foret);
  border-color: var(--green-900);
  box-shadow: var(--shadow-raised), inset 0 0 0 1px rgba(226, 207, 166, .22);
  color: var(--paper-0);

  --text-strong: var(--paper-0);
  --text-body:   var(--green-100);
  --text-muted:  var(--green-100);
  --text-faint:  var(--green-300);
  --text-gold:   var(--gold-300);
  --text-accent: var(--gold-300);   /* les grands chiffres du récapitulatif */
  --border-gold-soft: rgba(226, 207, 166, .32);
  --rule-gold: linear-gradient(90deg, transparent, var(--gold-500) 18%, var(--gold-400) 50%, var(--gold-500) 82%, transparent);
}

/* Le rouge coquelicot et le vert profond ont presque la même luminosité
   (1,01:1) : posé tel quel sur une carte verte, le bouton s'y fondrait, seule
   la teinte le distinguant — illisible pour un œil peu sensible au rouge-vert.
   Un filet clair et une ombre portée lui redonnent son contour, sans toucher
   à la couleur voulue. Le texte, lui, reste ivoire sur rouge : très lisible. */
.card--foil .btn--primary,
.card--foil .btn--foil,
.detail__hero .btn--primary,
.detail__hero .btn--foil {
  border-color: rgba(255, 253, 248, .45);
  box-shadow: 0 8px 20px -10px rgba(10, 20, 8, .85);
}
.card--green { background: var(--surface-green-soft); border-color: var(--green-100); }
/* Mise en garde des plantes toxiques, en tête de fiche. Fond rouge très pâle
   plutôt que rouge plein : l'encadré doit s'imposer au regard sans transformer
   la fiche en panneau de danger — on consulte aussi ces plantes pour les
   planter. Le filet gauche épais suffit à le distinguer d'une carte ordinaire. */
.card--danger {
  background: var(--red-50);
  border-color: var(--red-100);
  border-left: 3px solid var(--red-600);
}
.warn { display: flex; gap: var(--space-10); align-items: flex-start; }
.warn__icon { color: var(--red-600); flex: 0 0 auto; margin-top: 1px; }
.warn__text { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.warn__label {
  font-size: var(--type-caption-size);
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red-700);
}
.warn__text p {
  margin: 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-body);
}
/* Deux classes, pour passer devant « .warn__text p » sans recourir à !important. */
.warn__text .warn__poison { color: var(--text-muted); }
.warn__poison strong { color: var(--red-700); white-space: nowrap; }
/* Bloc climat de « Mon sol » : bleu de nuit. */
.card--accent { background: var(--wash-nuit); border-color: var(--bleu-900); color: var(--text-on-accent); }
.card--accent .eyebrow { color: var(--bleu-300); }

/* --- Filet doré ----------------------------------------------------------- */
.gold-rule { height: 1px; background: var(--rule-gold); border: 0; margin: var(--space-14) 0; }
.gold-rule--ornament {
  display: flex; align-items: center; gap: var(--space-8);
  height: auto; background: none;
}
.gold-rule--ornament::before,
.gold-rule--ornament::after {
  content: ""; flex: 1; height: 1px; background: var(--rule-gold);
}
.gold-rule--ornament span { color: var(--gold-500); font-size: 10px; line-height: 1; }

/* --- SectionHeader -------------------------------------------------------- */
.section-header { display: flex; align-items: flex-end; gap: var(--space-12); }
.section-header__text { flex: 1; min-width: 0; }
.section-header__title {
  font-family: var(--font-display);
  font-size: var(--type-display-3-size);
  line-height: var(--type-display-3-line);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  margin: 2px 0 0;
}
.section-header__action {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-family: var(--font-sans);
  font-size: var(--type-label-size);
  font-weight: var(--weight-semibold);
  color: var(--text-link);
}
.section-header__action:hover { color: var(--text-link-hover); text-decoration: underline; }

/* --- Button --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-8);
  min-height: var(--tap-min);
  padding: 0 var(--space-20);
  border-radius: var(--radius-pill);
  border: var(--border-width-hair) solid transparent;
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: transform var(--duration-instant) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: scale(var(--press-scale)); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: 50px; font-size: var(--type-subtitle-size); }
.btn--primary { background: var(--surface-accent); color: var(--text-on-accent); box-shadow: var(--shadow-accent); }
.btn--primary:hover { background: var(--red-800); }
.btn--secondary { background: var(--surface-card); color: var(--text-strong); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface-sunken); }
/* Action principale des fiches (« Ajouter à mon jardin ») : beige profond,
   posé sur le vert de la fiche. */
.btn--foil { background: var(--wash-terre); color: var(--text-on-accent); border-color: var(--beige-900); }
.btn--foil:hover { filter: brightness(1.06); }
.btn--ghost { background: none; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-sunken); color: var(--text-strong); }
.btn--danger { background: none; color: var(--status-danger-fg); border-color: var(--red-100); }
.btn--danger:hover { background: var(--status-danger-bg); }

/* --- Chip ----------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-6);
  flex: 0 0 auto;
  height: 34px;
  padding: 0 var(--space-14);
  border-radius: var(--radius-chip);
  border: var(--border-width-hair) solid var(--border-hairline);
  background: var(--surface-card);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--type-label-size);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}
.chip:hover { border-color: var(--border-strong); }
/* Filtre actif (« Toutes ») et onglets de la fiche plante : vert profond,
   accordé aux encadrés et aux fiches. */
.chip[aria-pressed="true"] {
  background: var(--green-800); color: var(--text-on-accent);
  border-color: var(--green-900);
}
.chip--gold[aria-pressed="true"] { background: var(--gold-600); border-color: var(--gold-600); color: var(--paper-0); }
.chip--green { background: var(--surface-green-soft); border-color: var(--green-100); color: var(--text-green); }
/* Filtre « Toxiques » : le seul en rouge, pour qu'il ne se lise pas comme les
   autres — on ne le choisit pas par envie, mais par prudence. */
.chip--danger { border-color: var(--red-100); color: var(--status-danger-fg); }
.chip--danger[aria-pressed="true"] { background: var(--red-700); border-color: var(--red-800); color: var(--paper-0); }
.chip--static { cursor: default; }

/* Rangée de chips défilante, qui déborde jusqu'aux bords de l'écran. */
.chip-row {
  display: flex; gap: var(--space-8);
  overflow-x: auto;
  margin: 0 calc(var(--gutter-screen) * -1);
  padding: var(--space-4) var(--gutter-screen);
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }

/* --- Badge ---------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-4);
  padding: 3px var(--space-8);
  border-radius: var(--radius-pill);
  font-size: var(--type-caption-size);
  font-weight: var(--weight-bold);
  line-height: var(--type-caption-line);
  white-space: nowrap;
}
.badge--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.badge--gold    { background: var(--surface-gold-soft); color: var(--text-gold); }
.badge--info    { background: var(--status-info-bg); color: var(--status-info-fg); }
.badge--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.badge--danger  { background: var(--status-danger-bg); color: var(--status-danger-fg); }

/* --- SearchField ---------------------------------------------------------- */
.search {
  display: flex; align-items: center; gap: var(--space-10);
  height: 48px;
  padding: 0 var(--space-14);
  border-radius: var(--radius-field);
  background: var(--surface-card);
  border: var(--border-width-hair) solid var(--border-hairline);
  box-shadow: var(--shadow-hair);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.search:focus-within { border-color: var(--border-gold); box-shadow: var(--focus-ring); }
.search input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font-family: var(--font-sans);
  font-size: 16px; /* pas moins : voir la note sur le zoom iOS en haut du fichier */
  color: var(--text-strong);
}
.search input::placeholder { color: var(--text-faint); }
.search__clear {
  display: grid; place-items: center;
  width: 26px; height: 26px; border: 0; cursor: pointer;
  border-radius: 50%;
  background: var(--surface-sunken); color: var(--text-muted);
}

/* --- PlantCard (grille 2 colonnes) ---------------------------------------- */
.plant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-card); }
.plant-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius-card);
  background: var(--surface-card);
  border: var(--border-width-hair) solid var(--border-hairline);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  font-family: inherit;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.plant-card:hover { transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-raised); }
.plant-card:active { transform: scale(var(--press-scale)); }
/* Format carré, identique à celui des photos téléchargées : aucun recadrage
   supplémentaire. L'image est en position absolue, sinon elle impose sa propre
   hauteur au conteneur et le ratio n'est pas respecté. */
.plant-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--surface-sunken); }
.plant-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.plant-card__badge { position: absolute; top: var(--space-8); left: var(--space-8); }
.plant-card__save {
  position: absolute; top: var(--space-6); right: var(--space-6);
  display: grid; place-items: center;
  width: 32px; height: 32px; border: 0; cursor: pointer;
  border-radius: 50%;
  background: var(--surface-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-standard);
}
.plant-card__save[aria-pressed="true"] { color: var(--text-accent); }
.plant-card__body { padding: var(--space-10) var(--space-12) var(--space-12); }
.plant-card__name {
  font-family: var(--font-display);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-line);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  margin: 0;
}
.plant-card__latin {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--text-faint);
  margin: 1px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plant-card__stats {
  display: flex; flex-direction: column; gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: var(--border-width-hair) solid var(--border-hairline);
}
.plant-card__stat {
  display: flex; align-items: center; gap: var(--space-6);
  font-size: var(--type-caption-size);
  color: var(--text-muted);
}
.plant-card__stat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- PlantListItem -------------------------------------------------------- */
.plant-item {
  display: flex; align-items: center; gap: var(--space-12);
  width: 100%;
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: var(--border-width-hair) solid var(--border-hairline);
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: background var(--duration-fast) var(--ease-standard);
}
.plant-item:hover { background: var(--surface-sunken); }
.plant-item__thumb {
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-sunken);
}
.plant-item__text { flex: 1; min-width: 0; }
.plant-item__name {
  font-size: var(--type-body-size);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plant-item__latin {
  font-size: var(--type-caption-size);
  color: var(--text-faint);
  margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plant-item__meta {
  font-size: var(--type-caption-size);
  color: var(--text-muted);
  margin: 2px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- CareStat ------------------------------------------------------------- */
.care-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-14); }
.care-stat { display: flex; gap: var(--space-10); align-items: flex-start; }
.care-stat__icon {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--surface-gold-soft);
  color: var(--text-gold);
}
.care-stat--green .care-stat__icon { background: var(--surface-green-soft); color: var(--text-green); }
.care-stat__label {
  display: block;
  font-size: var(--type-caption-size);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .3px;
  font-weight: var(--weight-bold);
}
.care-stat__value {
  display: block;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  margin-top: 1px;
}

/* --- SeasonBar (12 mois) -------------------------------------------------- */
/* Fougères et graminées de feuillage : pas de barre des douze mois, une phrase.
   Une rangée entièrement grise se lit comme une donnée manquante, alors que
   l'absence de fleurs est ici une caractéristique de la plante. */
.season__none {
  margin: 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-muted);
}
.season { display: flex; flex-direction: column; gap: var(--space-6); }
.season__head { display: flex; align-items: center; justify-content: space-between; }
.season__label {
  font-size: var(--type-caption-size);
  text-transform: uppercase; letter-spacing: .3px;
  font-weight: var(--weight-bold);
  color: var(--text-faint);
}
.season__months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.season__month {
  height: 26px;
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  display: grid; place-items: center;
  font-size: 9px;
  font-weight: var(--weight-bold);
  color: var(--text-faint);
}
.season__month--on { background: var(--surface-accent); color: var(--text-on-accent); }
.season__month--gold { background: var(--gold-500); color: var(--ink-900); }
.season__month--green { background: var(--green-600); color: var(--paper-0); }

/* --- SoilAttribute -------------------------------------------------------- */
.soil-attr {
  display: flex; align-items: center; gap: var(--space-12);
  width: 100%;
  padding: var(--space-12) var(--space-14);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: var(--border-width-hair) solid var(--border-hairline);
  text-align: left; cursor: pointer;
  font-family: inherit;
}
.soil-attr:hover { background: var(--surface-sunken); }
.soil-attr__icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--surface-green-soft);
  color: var(--text-green);
}
.soil-attr__text { flex: 1; min-width: 0; }
.soil-attr__label {
  font-size: var(--type-caption-size);
  text-transform: uppercase; letter-spacing: .3px;
  font-weight: var(--weight-bold);
  color: var(--text-faint);
}
.soil-attr__value {
  font-size: var(--type-body-size);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.soil-attr__note { font-size: var(--type-caption-size); color: var(--text-muted); font-weight: var(--weight-regular); }
.soil-attr__level { display: flex; gap: 3px; flex: 0 0 auto; }
.soil-attr__pip { width: 6px; height: 6px; border-radius: 50%; background: var(--paper-200); }
.soil-attr__pip--on { background: var(--gold-600); }

/* --- Score de compatibilité sol ------------------------------------------ */
.fit {
  display: inline-flex; align-items: center; gap: var(--space-6);
  padding: 4px var(--space-10);
  border-radius: var(--radius-pill);
  font-size: var(--type-caption-size);
  font-weight: var(--weight-bold);
  cursor: pointer;
  border: var(--border-width-hair) solid transparent;
}
.fit--good    { background: var(--status-success-bg); color: var(--status-success-fg); }
.fit--average { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.fit--poor    { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.fit--unknown { background: var(--surface-sunken); color: var(--text-muted); }
.fit-detail { display: flex; flex-direction: column; gap: var(--space-10); }
.fit-line { display: flex; gap: var(--space-10); align-items: flex-start; }
.fit-line__mark { flex: 0 0 auto; margin-top: 2px; }
.fit-line__text { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); color: var(--text-body); }
.fit-line__text strong { color: var(--text-strong); }

/* --- EmptyState ----------------------------------------------------------- */
.empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-10);
  padding: var(--space-40) var(--space-20);
  text-align: center;
}
.empty__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-faint);
}
.empty__title {
  font-family: var(--font-display);
  font-size: var(--type-display-3-size);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  margin: 0;
}
.empty__desc {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-muted);
  margin: 0;
  max-width: 30ch;
  text-wrap: pretty;
}

/* --- SegmentedControl ----------------------------------------------------- */
.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.segmented__item {
  height: 36px; border: 0; cursor: pointer;
  border-radius: var(--radius-pill);
  background: none;
  font-family: var(--font-sans);
  font-size: var(--type-label-size);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease-standard);
}
.segmented__item[aria-selected="true"] {
  background: var(--surface-card);
  color: var(--text-strong);
  box-shadow: var(--shadow-hair);
}

/* --- MassifCard ----------------------------------------------------------- */
.massif-card {
  display: flex; align-items: center; gap: var(--space-12);
  width: 100%;
  padding: var(--pad-card);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  border: var(--border-width-hair) solid var(--border-hairline);
  box-shadow: var(--shadow-card);
  cursor: pointer; text-align: left;
  font-family: inherit;
}
.massif-card:hover { box-shadow: var(--shadow-raised); }
.massif-card__swatch {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: var(--paper-0);
}
.massif-card__text { flex: 1; min-width: 0; }
.massif-card__name {
  font-family: var(--font-display);
  font-size: var(--type-subtitle-size);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.massif-card__meta { font-size: var(--type-caption-size); color: var(--text-muted); margin: 1px 0 0; }
.massif-card__thumbs { display: flex; }
.massif-card__thumbs img {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--surface-card);
  margin-left: -8px;
  background: var(--surface-sunken);
}

/* --- Champs de formulaire ------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-6); }
.field__label {
  font-size: var(--type-label-size);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8);
}
.field__value { font-size: var(--type-body-sm-size); color: var(--text-accent); font-weight: var(--weight-bold); }
.field__hint { font-size: var(--type-caption-size); color: var(--text-muted); text-wrap: pretty; }
.field input[type="text"], .field textarea, .field select {
  width: 100%;
  padding: var(--space-12) var(--space-14);
  border-radius: var(--radius-field);
  border: var(--border-width-hair) solid var(--border-hairline);
  background: var(--surface-card);
  font-family: var(--font-sans);
  font-size: 16px; /* pas moins : voir la note sur le zoom iOS en haut du fichier */
  color: var(--text-strong);
  outline: none;
}
.field textarea { resize: vertical; min-height: 80px; line-height: var(--type-body-line); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--border-gold); box-shadow: var(--focus-ring);
}
/* Curseurs du questionnaire « Décrire ma terre ». La pastille par défaut du
   navigateur fait 12 à 16 px : trop petite pour se viser au doigt, sur un
   téléphone. On dessine donc la piste et la pastille à la main — 28 px de
   pastille sur une piste de 10 px — et on donne 32 px de hauteur au champ
   pour élargir la zone tactile sans épaissir le trait à l'écran.
   `box-sizing` est répété : la règle universelle de tokens.css ne s'applique
   pas aux pseudo-éléments des curseurs. */
.field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 32px;
  margin: var(--space-4) 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

/* Piste — Chrome, Safari, Edge */
.field input[type="range"]::-webkit-slider-runnable-track {
  box-sizing: border-box;
  height: 10px;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-sunken);
  border: var(--border-width-hair) solid var(--border-hairline);
}
/* Pastille — Chrome, Safari, Edge. La marge négative la recentre sur la
   piste : (10 px de piste − 28 px de pastille) / 2 = −9 px. */
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box;
  width: 28px; height: 28px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--red-700);
  border: 3px solid var(--paper-0);
  box-shadow: var(--shadow-accent);
}
/* Piste et pastille — Firefox */
.field input[type="range"]::-moz-range-track {
  box-sizing: border-box;
  height: 10px;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-sunken);
  border: var(--border-width-hair) solid var(--border-hairline);
}
.field input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--red-700);
  border: 3px solid var(--paper-0);
  box-shadow: var(--shadow-accent);
}
.field input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.field input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }
.field__scale {
  display: flex; justify-content: space-between;
  font-size: var(--type-caption-size); color: var(--text-faint);
}
.field__options { display: flex; flex-wrap: wrap; gap: var(--space-8); }

/* --- Feuille modale (bottom sheet) ---------------------------------------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: var(--surface-overlay);
  display: flex; flex-direction: column; justify-content: flex-end;
  animation: fade var(--duration-fast) var(--ease-standard);
}
.sheet {
  width: 100%; max-width: 480px; margin: 0 auto;
  max-height: 88dvh; overflow-y: auto;
  background: var(--surface-card);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: var(--shadow-sheet);
  padding: var(--space-10) var(--gutter-screen) calc(var(--space-24) + var(--safe-bottom));
  display: flex; flex-direction: column; gap: var(--space-16);
  animation: slide-up var(--duration-sheet) var(--ease-out-soft);
}
.sheet__grab {
  width: 44px; height: 4px; border-radius: 2px;
  background: var(--paper-200);
  margin: 0 auto var(--space-4);
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes slide-up { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }

/* --- Écran fiche plante --------------------------------------------------- */
.detail__hero { background: var(--wash-foret); padding: 0 var(--gutter-screen) var(--space-20); }
/* Nom latin à gauche, famille à droite. `baseline` et non le milieu des blocs :
   les deux textes n'ont ni la même taille ni la même police, seule la ligne
   d'écriture les accorde. `flex-wrap` fait passer la famille en dessous quand
   le nom latin est trop long pour les deux. */
.detail__latin {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0 var(--space-12);
  font-family: var(--font-display); font-style: italic;
  font-size: var(--type-subtitle-size);
  color: var(--gold-200);
  margin: 0 0 var(--space-12);
}
.detail__famille {
  margin-left: auto;
  font-family: var(--font-sans); font-style: normal;
  font-size: var(--type-caption-size);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gold-300);
  white-space: nowrap;
}
.detail__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--wash-paper);
  box-shadow: var(--shadow-inset-foil);
}
.detail__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.detail__photo .badge { position: absolute; top: var(--space-12); left: var(--space-12); }
.detail__credit {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--space-6) var(--space-10);
  font-size: 10px;
  color: var(--paper-0);
  background: linear-gradient(transparent, rgba(34,26,20,.62));
  text-align: right;
}
/* Le bandeau d'attribution est posé sur la photo : le seul contraste sûr est
   le blanc, et le soulignement suffit à signaler le lien sans ajouter une
   couleur qui deviendrait illisible sur une photo claire. */
.detail__credit a {
  color: var(--paper-0);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.detail__credit a:hover { text-decoration-thickness: 2px; }
.detail__body {
  padding: var(--space-16) var(--gutter-screen) var(--space-28);
  display: flex; flex-direction: column; gap: var(--space-16);
}
.prose {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-body);
  margin: 0;
  text-wrap: pretty;
}

/* --- Divers --------------------------------------------------------------- */
.count-block { text-align: center; }
.count-block__n {
  font-family: var(--font-display);
  font-size: 34px; line-height: 1;
  font-weight: var(--weight-semibold);
  color: var(--text-accent);
}
.count-block__l { font-size: var(--type-caption-size); color: var(--text-muted); }
.divider-v { width: 1px; height: 44px; background: var(--border-gold-soft); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 12px);
  transform: translateX(-50%);
  z-index: 50;
  padding: var(--space-10) var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--ink-900); color: var(--paper-0);
  font-size: var(--type-body-sm-size);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-raised);
  animation: fade var(--duration-fast) var(--ease-standard);
}

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