/* Styles applicatifs (direction « Forêt profonde », Sprint D1). Coquille + composants ; classes du
   markup existant conservées, valeurs pilotées par les tokens (deux thèmes). */
#app { min-height: 100dvh; display: flex; flex-direction: column; }

.app-header {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-4);
  background: var(--c-header-grad); color: var(--c-header-ink);
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: 10;
}
.app-header__title { font-family: var(--font-title); font-size: var(--fs-lg); font-weight: 700; }

/* Marque (Sprint B1) : picto + nom. Le SVG est inline et en `currentColor` — il prend donc la
   couleur d'encre de l'en-tête, dans les deux thèmes, sans règle dédiée. */
.brand { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex: 0 0 auto; }
/* Nom de la structure : zone CENTRALE dominante (Sprint U3.1). `flex: 1` + centrage ; l'ellipse
   protège les noms longs sans jamais pousser la pastille de statut hors de l'écran. */
.app-header__structure {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-family: var(--font-title); font-size: var(--fs-lg); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 var(--sp-3);
}
.brand__mark { display: inline-flex; flex: 0 0 auto; }
.brand__picto { width: 26px; height: 26px; display: block; }

.app-main { flex: 1; padding: var(--sp-4); max-width: 960px; width: 100%; margin: 0 auto; }

/* Pastille de statut (en-tête) : en ligne / hors ligne / lecture seule. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 600;
  padding: 4px var(--sp-3); border-radius: var(--radius-pill);
  background: var(--c-success-bg); color: var(--c-accent);
}
.badge--offline { background: var(--c-warn-bg); color: var(--c-warn-ink); }
.badge--readonly { background: var(--c-danger); color: var(--c-danger-ink); }

/* Navigation — mobile-first : barre d'onglets EN BAS (zone du pouce, usage battue).
   Une seule liste de nav (js/app.js NAV) et un seul DOM (#tabbar) : le placement est purement
   CSS (P2 : même code, rendu adapté — pas de navigation dupliquée). */
.tabbar {
  display: flex; border-top: 1px solid var(--c-border);
  background: var(--c-nav); position: sticky; bottom: 0;
  /* Réserve la zone de sécurité basse (encoche/indicateur iOS) uniquement en bas de page. */
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* Filet DUR (Sprint U5.1c) : la barre ne déborde JAMAIS horizontalement — même pendant la passe de
     mesure (onglets rendus à largeur naturelle) — donc la page ne glisse jamais, quelle que soit la
     taille de texte. La navigation prioritaire (js/app.js) garantit qu'en régime établi rien ne
     dépasse ; ceci est la ceinture par-dessus la bretelle. */
  overflow-x: hidden;
}
/* Passe de MESURE (U5.1c/d) : le temps de mesurer combien d'onglets tiennent, ils sont à largeur
   NATURELLE (et non étirés en cellules égales) — sinon impossible de connaître leur largeur réelle.
   Double classe `.tabbar.tabbar--measuring` (spécificité (0,2,1)) pour GAGNER sur `.tabbar a { flex:1 }`
   et sur la règle desktop (toutes deux (0,1,1)) — sinon la mesure se ferait sur des cellules étirées. */
.tabbar.tabbar--measuring a, .tabbar.tabbar--measuring button { flex: 0 0 auto; }
/* Onglets : liens ET le bouton « Plus » (Sprint U5.1b) partagent le même gabarit. Le bouton reçoit
   un reset (fond/bordure/police) pour être indistinguable d'un onglet-lien. */
.tabbar a, .tabbar button {
  flex: 1; min-height: var(--tap-min); padding: var(--sp-3) 0;
  color: var(--c-text-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  background: transparent; border: 0; border-top: 2px solid transparent;
  font-family: inherit; cursor: pointer;
  /* Icône AU-DESSUS du libellé (Sprint B1.3a). Le libellé reste toujours affiché : jamais d'icône
     seule. La largeur reste pilotée par le texte — les cibles tactiles ne rétrécissent pas. */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.tabbar a[aria-current='page'], .tabbar button[aria-current='page'] { color: var(--c-accent); font-weight: 700; border-top-color: var(--c-primary); }

/* Icônes d'interface (Sprint B1) : dimension par la CSS, couleur héritée (`currentColor`). */
.icon-wrap { display: inline-flex; align-items: center; flex: 0 0 auto; }
.icon { width: 20px; height: 20px; display: block; }
.btn .icon { width: 18px; height: 18px; }
.tabbar .icon { width: 22px; height: 22px; }

.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
/* Boutons — hiérarchie conservée : .btn nu = secondaire, .btn--primary = plein, .btn--ghost = discret. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap-min);
  border: 1px solid var(--c-border-strong); background: var(--c-surface-2); color: var(--c-text);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--fs-base); font-weight: 600; cursor: pointer;
}
/* CTA PRINCIPAL (Sprint U5.2) : plus haut (56 px) que les boutons secondaires (48 px) — l'action
   principale se vise sans effort, gants compris. */
.btn--primary { min-height: var(--tap-cta); border-color: transparent; background: var(--c-primary); color: var(--c-text-inverse); }
.btn--primary:hover { background: var(--c-primary-600); }
.btn--primary:active { background: var(--c-primary-700); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--c-text-muted); font-weight: 700; }
/* Bouton destructif (Sprint U2.4) — distinct du terrain (.terrain__btn--alert). */
.btn--danger { border-color: transparent; background: var(--c-danger); color: var(--c-danger-ink); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.toast {
  /* CORRECTIF U5.6 : sans `pointer-events: none`, le toast — fixe, en bas au centre — INTERCEPTE
     les clics pendant 3,5 s. C'est un piège général : il a contribué au bug du dessin de traque,
     où le message d'aide s'affichait juste avant que l'utilisateur ne clique sur la carte. */
  pointer-events: none;
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-border-strong);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  z-index: 100; max-width: 90vw;
}
.toast--error { background: var(--c-danger); color: var(--c-danger-ink); border-color: transparent; }

/* Composants UI */
.app-header__status { display: flex; gap: var(--sp-2); align-items: center; }
.page__title { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-xl); line-height: var(--lh-tight); margin: 0 0 var(--sp-4); }
.page { display: flex; flex-direction: column; gap: var(--sp-4); }
.page__section { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-lg); line-height: var(--lh-tight); margin: var(--sp-2) 0 0; }

/* Météo (Sprint 20.5) — rangée d'accueil (place pour l'éphéméride 20.6 à côté) + ligne de faits. */
.weather-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.weather-line { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); }
.weather-line__glyph { font-size: var(--fs-lg); }
.weather-line--compact { font-size: var(--fs-sm); }
/* Ligne éphéméride (Sprint 20.6) — même gabarit que la météo, dans la .weather-row. */
.eph-line { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--c-text-muted); }
.eph-line--compact { font-size: var(--fs-sm); }
/* Flèche de vent Leaflet (glyphe roté) — halo pour la lisibilité sur les tuiles, cible tap ≥ 36 px. */
.wind-arrow-icon { background: none; border: none; }
.wind-arrow {
  width: 36px; height: 36px; line-height: 36px; text-align: center; font-size: 26px; font-weight: 700;
  color: var(--c-accent);
  text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 2px #000; /* halo sombre : lisible sur tuiles claires ET sombres */
}
.card h2 { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-lg); line-height: var(--lh-tight); margin: 0 0 var(--sp-3); }
.card h3 { font-family: var(--font-title); font-weight: 600; font-size: var(--fs-base); line-height: var(--lh-tight); margin: var(--sp-3) 0 var(--sp-2); }
.field { display: block; margin-bottom: var(--sp-3); }
.field__label { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: 500; margin-bottom: var(--sp-1); }
.field__req { color: var(--c-danger-line); font-weight: 700; } /* marqueur « obligatoire » (Sprint U2.3) */
.form-legend { margin: 0 0 var(--sp-2); }
.input, input, select, textarea {
  width: 100%; min-height: var(--tap-min); box-sizing: border-box;
  padding: var(--sp-3) var(--sp-3); border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); background: var(--c-field); color: var(--c-text);
  font-family: inherit; font-size: var(--fs-base);
}
input[type='checkbox'], input[type='radio'] { width: auto; min-height: 0; }
::placeholder { color: var(--c-text-muted); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1; min-width: 120px; }
/* Les boutons dans une rangée ne s'étirent pas (largeur naturelle, comme la galerie) ; les champs
   continuent de remplir (cas hybride « champ + bouton » : le champ s'étire, le bouton reste naturel). */
.row > .btn { flex: 0 0 auto; }
/* Variante opt-in : rangée d'actions VOULUES pleine largeur (ex. confirmation de restauration). */
.row--fill > .btn { flex: 1 1 auto; }
.link { color: var(--c-accent); text-decoration: none; font-weight: 600; }
.link:hover { text-decoration: underline; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid var(--c-border); padding: var(--sp-2) var(--sp-3); text-align: left; font-size: var(--fs-sm); }
.table th { color: var(--c-text-muted); font-weight: 600; }
.muted { color: var(--c-text-muted); font-size: var(--fs-sm); }
.box { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: var(--sp-3); white-space: pre-wrap; background: var(--c-surface-2); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--sp-2); border-radius: var(--radius-pill); background: var(--c-surface-2); color: var(--c-text); font-size: var(--fs-sm); }
.chip--ok { background: var(--c-success-bg); color: var(--c-accent); }
.chip--warn { background: var(--c-warn-bg); color: var(--c-warn-ink); }
/* Niveau ALERTE (vs --warn = attention) : ex. résultat trichine POSITIF, jamais silencieux (décision
   sprint 19). Variante propre aux tokens danger — ne détourne pas .badge--readonly (sémantique distincte). */
.chip--danger { background: var(--c-danger); color: var(--c-danger-ink); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
/* Croix de suppression d'une puce (Sprint U5.2) : vraie cible tactile ≥ 48 px (la puce concernée
   grandit en conséquence — c'est voulu : supprimer d'un tremblement ne doit pas rater). */
.chip__x { cursor: pointer; color: var(--c-danger-line); font-weight: bold;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap-min); min-height: var(--tap-min); }
/* Rangée de case à cocher (Sprint U5.2) : toute la ligne (case + libellé) est la cible, ≥ 48 px. */
.checkbox { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-min); }
/* Jauge PMA (Sprint 20.1) : barre CSS pure, sans lib graphique. */
.gauge { height: 8px; background: var(--c-surface-2); border-radius: var(--radius-pill); overflow: hidden; margin: var(--sp-1) 0 var(--sp-2); }
.gauge__fill { height: 100%; background: var(--c-primary); border-radius: var(--radius-pill); transition: width .2s; }
.gauge__fill--full { background: var(--c-danger-line); }
/* Rappel PMA discret dans les formulaires de prélèvement (cliquable → #/quotas). */
.pma-reminder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); text-decoration: none; }
.quick-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
/* Puces de filtre par type (Sprint U5.1f) — vue registre en mode mixte. Cibles tactiles pleines
   (≥ --tap-min) ; état actif via aria-pressed (pas une classe de plus à tenir synchronisée). */
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.filter-chip {
  min-height: var(--tap-min); padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-pill);
  background: var(--c-surface-2); color: var(--c-text); font: inherit; font-weight: 600; cursor: pointer;
}
.filter-chip[aria-pressed='true'] { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-accent); }
.details { margin-bottom: var(--sp-3); }
.details > summary { cursor: pointer; padding: var(--sp-2) 0; color: var(--c-accent); font-weight: 600;
  min-height: var(--tap-min); display: flex; align-items: center; } /* U5.2 : repli = cible ≥ 48 px */
/* Barres de statistiques perso (Sprint 20.3) — CSS pur, sans lib graphique. */
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) 2fr auto; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.stat-row__label { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-row__value { font-variant-numeric: tabular-nums; font-weight: 600; }
.stat-bar { height: 10px; background: var(--c-surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.stat-bar__fill { height: 100%; background: var(--c-primary); border-radius: var(--radius-pill); }
/* Assistant battue — fil « prochaine étape » (Sprint U2.1). Couche de lecture, non modale. */
.fil-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2);
  background: var(--c-primary-soft); border-radius: var(--radius-sm); padding: var(--sp-3); margin-bottom: var(--sp-3); }
.fil { list-style: none; margin: 0; padding: 0; }
.fil__row { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border); cursor: pointer; }
.fil__row:last-child { border-bottom: none; }
.fil__icon { flex: 0 0 1.4em; text-align: center; font-weight: 700; color: var(--c-text-muted); }
.fil__label { flex: 1; }
.fil__detail { flex: 0 0 auto; }
.fil__row--done .fil__icon { color: var(--c-success); }
.fil__row--current .fil__icon { color: var(--c-accent); }
.fil__row--current .fil__label { font-weight: 700; color: var(--c-accent); }
.subheader { margin-bottom: var(--sp-3); }
.subheader h2 { margin: var(--sp-1) 0 0; }
.map { height: 320px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); margin-bottom: var(--sp-3); background: var(--c-surface-2); }
/* Dessin d'une traque (U5.6) — l'état du mode doit se VOIR sur la carte elle-même. */
.map--drawing { cursor: crosshair; outline: 3px solid var(--c-danger); outline-offset: -3px; }
/* Marqueur numéroté posé à chaque clic : LE retour visuel qui manquait (un polygone à un seul
   sommet ne dessine rien). Pastille lisible sur les tuiles, jamais une cible tactile. */
/* Prise de 48 px (U5.2) : l'icône Leaflet fait 48x48 — transparente — et ne montre qu'une pastille
   de 28 px centrée. On saisit ainsi un sommet au pouce sans agrandir le point à l'écran. */
.traque-point { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: none; border: 0; }
.traque-point__dot {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-danger); color: var(--c-danger-ink);
  font-family: var(--font-title); font-weight: 800; font-size: var(--fs-sm);
  border: 2px solid var(--c-surface); box-shadow: var(--shadow);
}
/* Sommet déplaçable : le curseur l'annonce sur les appareils qui en ont un. */
.leaflet-marker-draggable .traque-point__dot { cursor: grab; }
/* Consigne d'étape du dessin : lisible, jamais un simple compteur. */
.draw-status { font-weight: 600; margin: var(--sp-2) 0; }
/* Plus de défilement horizontal (Sprint U5.1b) : mobile = « 4 + Plus » (5 cibles flex:1 qui tiennent
   toujours), desktop = retour à la ligne si nécessaire (voir bloc ≥1024). La barre ne défile jamais. */
.tabbar a, .tabbar button { white-space: nowrap; padding: var(--sp-3) var(--sp-3); }

/* Mode terrain (§4-M4) : très gros boutons (gants, plein soleil, une main), contraste élevé.
   L'écran passe en fond « terrain » (plus sombre en sombre, quasi-blanc en clair). */
body.is-terrain { background: var(--c-bg-terrain); }
.terrain__topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.terrain__theme { min-width: var(--tap-min); min-height: var(--tap-min); font-size: var(--fs-lg); padding: var(--sp-2) var(--sp-3); }
.terrain__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.terrain__btn {
  min-height: var(--tap-terrain); font-family: var(--font-title); font-size: var(--fs-terrain); font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase;
  justify-content: center; width: 100%; border-radius: var(--radius-terrain);
  background: var(--c-primary); border-color: transparent; color: var(--c-text-inverse);
}
.terrain__btn--alert { background: var(--c-danger); border-color: transparent; color: var(--c-danger-ink); }
.terrain__species { margin-bottom: var(--sp-3); }
.terrain__species .input { min-height: 56px; font-size: var(--fs-lg); }
.terrain__audio-on { font-weight: 700; color: var(--c-accent); margin: 0; }
.terrain__journal { list-style: none; margin: 0; padding: 0; }
.terrain__row {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border);
}
.terrain__time { font-variant-numeric: tabular-nums; font-weight: 700; }
.terrain__type { font-weight: 600; }
.terrain__author { color: var(--c-text-muted); }
.terrain__detail { color: var(--c-text-muted); }
/* Notification discrète de nouveaux événements reçus au polling (13.4). */
.terrain__new { background: var(--c-primary); color: var(--c-text-inverse); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); font-weight: 600; }

/* ≥1024px (desktop) : navigation EN HAUT, sous le header. Même #tabbar, placement CSS only.
   Le header (nom de structure + statut « En ligne ») reste sticky et visible au-dessus. */
@media (min-width: 1024px) {
  /* Réordonne la coquille en flex : header (0) → onglets (1) → contenu (2). */
  .app-header { order: 0; }
  .tabbar { order: 1; }
  .app-main { order: 2; }

  .tabbar {
    position: sticky; top: var(--header-h); bottom: auto; z-index: 9;
    border-top: none; border-bottom: 1px solid var(--c-border);
    /* Groupe d'onglets RECENTRÉ dans la barre (Sprint U5.1e — rétablit le centrage de l'avant-U5.1b,
       état U3.1). Purement visuel : la mesure (js/app.js) raisonne sur clientWidth − padding, donc
       indépendante de l'alignement — un onglet centré ne re-déclenche jamais « Plus ». */
    justify-content: center; padding-bottom: 0;
    /* UNE seule ligne (Sprint U5.1c) : plus de flex-wrap. Les onglets qui ne tiennent pas basculent
       dans « Plus » (mesure JS), jamais sur une deuxième ligne, jamais en défilement. */
    flex-wrap: nowrap;
    /* PLEINE LARGEUR du header, marges simples (Sprint U5.1d). L'ancien centrage sur 960px bornait la
       barre à cette colonne : en très grand, 9 onglets (~1300px) débordaient 960 et basculaient dans
       « Plus » alors qu'un large espace restait libre à droite. La largeur mesurée (js/app.js) suit
       désormais la largeur RÉELLE utilisable → « Plus » n'apparaît que si la fenêtre est vraiment
       trop étroite. Le groupe d'onglets est recentré dans cette largeur (U5.1e ci-dessus). */
    padding-inline: var(--sp-4);
  }
  .tabbar a {
    flex: 0 0 auto; padding: var(--sp-3) var(--sp-3);
    /* Onglet actif souligné ; bordure transparente au repos pour éviter le saut de mise en page. */
    border-top: none; border-bottom: 2px solid transparent;
  }
  .tabbar a[aria-current='page'] { color: var(--c-accent); border-top-color: transparent; border-bottom-color: var(--c-primary); }
}

/* ── Combobox (composant unique — Sprint 15) ─────────────────────────────────── */
.combobox { position: relative; }
.combobox__field { width: 100%; text-align: left; cursor: pointer; }
.combobox__panel[hidden] { display: none; }
.combobox__panel {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius, 8px); box-shadow: 0 8px 24px rgba(0,0,0,.16);
  max-height: 60vh; overflow: auto; padding: var(--sp-2);
}
.combobox__search { width: 100%; margin-bottom: var(--sp-2); }
.combobox__group-head {
  width: 100%; text-align: left; background: transparent; border: none;
  padding: var(--sp-2); font-weight: 600; cursor: pointer; color: var(--c-text);
  display: flex; justify-content: space-between; align-items: center;
}
.combobox__group-head.is-open { color: var(--c-accent); }
.combobox__pin { font-weight: 600; opacity: .7; }
.combobox__count { color: var(--c-text-muted); font-weight: 400; }
.combobox__row {
  display: flex; flex-direction: column; justify-content: center;
  min-height: var(--tap-min); padding: var(--sp-2) var(--sp-3); cursor: pointer; border-radius: 6px; /* U5.2 : ≥ 48 px */
}
.combobox__row:hover, .combobox__row.is-active { background: var(--c-primary-soft); }
.combobox__row-sub { font-size: var(--fs-sm); color: var(--c-text-muted); }
.combobox__row--free, .combobox__row--other { color: var(--c-accent); font-style: italic; }
.combobox__row--default { font-weight: 600; }
.combobox__empty { padding: var(--sp-3); }

/* Mobile : bottom-sheet plein écran (lignes tactiles ≥ 44 px). */
@media (max-width: 640px) {
  /* En-tête étroit (U3.1) : le picto suffit à identifier l'app — le mot-symbole cède la place au
     nom de la structure, qui est l'information utile sur le terrain. */
  .app-header__title { display: none; }
  .app-header__structure { font-size: var(--fs-base); }
  /* Statut (U5.1b, point 4) : « En ligne » est l'état normal et redondant — on le masque sous 640 px
     pour laisser la largeur au nom de structure ; « Hors ligne » et « Lecture seule » restent visibles
     (ce sont les exceptions qui doivent se voir). Masquage propre, au seuil CSS existant. */
  .app-header__status .badge--net:not(.badge--offline) { display: none; }

  .combobox__panel.is-open {
    position: fixed; inset: auto 0 0 0; top: 20vh; max-height: 80vh;
    border-radius: var(--radius) var(--radius) 0 0; padding: var(--sp-3);
    box-shadow: var(--shadow-sheet);
  }
  /* Poignée de bottom-sheet (repère tactile). */
  .combobox__panel.is-open::before {
    content: ""; display: block; width: 44px; height: 5px; border-radius: 3px;
    background: var(--c-border-strong); margin: 0 auto var(--sp-3);
  }
}

/* ── Lignes de graphique du tableau de bord (Sprint U3.2) ─────────────────────────────────────
   Aucune bibliothèque : la barre est un div, la jauge celle de la PMA. Un en-tête libellé/valeur
   au-dessus de chaque barre — la valeur est TOUJOURS écrite, la barre ne fait qu'illustrer. */
.chart-row { margin-bottom: var(--sp-3); }
.chart-row__head { display: flex; align-items: center; gap: var(--sp-2); justify-content: space-between; }
.chart-row__head > span:first-child { font-weight: 600; }

/* ── Tirage public (Sprint 16.3) : révélation séquentielle en gros caractères au rond ─────────── */
.draw-public { text-align: center; padding: var(--sp-3); }
.draw-public__row { font-size: 1.6rem; font-weight: 700; margin: var(--sp-2) 0; }

/* ── Bandeau « repères indicatifs » (Sprint 16.4) : rappel permanent, non intrusif ────────────── */
.banner {
  background: var(--c-primary-soft); border-left: 3px solid var(--c-primary);
  padding: var(--sp-2) var(--sp-3); border-radius: 6px; font-size: var(--fs-sm);
}

/* ── Invitations : QR + overlay plein écran (Sprint 18) ───────────────────────── */
.qr-wrap { display: flex; justify-content: center; padding: var(--sp-3); }
.qr-wrap canvas { image-rendering: pixelated; max-width: 100%; height: auto; }
/* Fond BLANC volontaire (les deux thèmes) : quiet-zone du QR — la scannabilité prime sur le thème. */
.qr-overlay {
  position: fixed; inset: 0; z-index: 100; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  cursor: pointer;
}
.qr-overlay canvas { image-rendering: pixelated; max-width: 92vw; max-height: 80vh; }
.hidden { display: none; }

/* Confirmation de suppression (Sprint U2.4) — overlay modal léger. */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
}
.confirm-box {
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--radius); padding: var(--sp-5); max-width: 420px; width: 100%;
  box-shadow: var(--shadow-lg);
}
.confirm-box__msg { margin: 0 0 var(--sp-4); font-size: var(--fs-body-lg); }

/* Bottom-sheet de capture rapide terrain (Sprint U2.6b). */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .5);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-box {
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-sheet);
  padding: var(--sp-5); width: 100%; max-width: 560px;
}

/* ── Menu « Plus » (Sprint U5.1b) : grille de grandes cibles pour les rubriques hors des 4 onglets
   fixes du mobile. Icône + libellé, cibles ≥ 56 px, ordre constant. ─────────────────────────────── */
.more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.more-grid__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 56px; padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface-2); color: var(--c-text); text-decoration: none; font-weight: 600;
  text-align: center;
}
.more-grid__item[aria-current='page'] { border-color: var(--c-primary); color: var(--c-accent); }
.more-grid .icon { width: 26px; height: 26px; }

/* Filet global anti-chevauchement (Sprint U5.1b, point 3) : un lien placé DIRECTEMENT dans une carte
   est un accès autonome (gérer les saisons, aller aux réglages…) — il passe en bloc, sur sa propre
   ligne, et ne partage donc jamais sa ligne avec un bouton voisin (le cas du chevauchement en texte
   très grand). Les actions côte à côte VOULUES passent par .row (qui gère gap + retour à la ligne) ;
   les liens en ligne (dans une cellule, un <span>, un <p>) ne sont pas des enfants directs de .card. */
.card > .link { display: block; }

/* ── Impression des PAGES DE L'APP uniquement (Sprint D1.2) ─────────────────────────────────────
   Les documents PDF (carnet de battue, émargement) sont générés par shared/pdf/render-html.js comme
   documents AUTONOMES (window.open + <style> inline) : ils ne référencent jamais cette feuille, donc
   ce bloc ne peut pas les affecter (golden PDF inchangés). Il ne sert qu'à une impression directe de
   l'app depuis le navigateur. */
@media print {
  :root {
    --c-bg: #ffffff; --c-surface: #ffffff; --c-field: #ffffff; --c-nav: #ffffff;
    --c-text: #1a1a1a; --c-text-strong: #000; --c-text-muted: #555; --c-accent: #2f4529;
    --c-border: #bbb; --c-border-strong: #888;
    --c-header-grad: none; --c-header-ink: #1a1a1a;
  }
  body { background: #fff; color: #1a1a1a; }
  .app-header, .tabbar, .btn, .toast, .qr-overlay { display: none; }
  .card { border: 1px solid #bbb; box-shadow: none; break-inside: avoid; }
}

/* Cartes de navigation par type (Sprint A1.2) — toute la carte est la cible : on ne vise pas un
   petit lien, on tape la carte. Cible tres au-dela des 48 px exiges (U5.2). */
.card--nav { display: block; text-decoration: none; color: inherit; }
.card--nav:hover, .card--nav:focus-visible { border-color: var(--c-border-strong); }
.card__nav-title { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-lg); margin: 0; }
/* Tuiles de choix du type a l'ajout : grandes, une decision par ecran. */
.type-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
.type-tile {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 96px; padding: var(--sp-4);
  background: var(--c-surface); border: 2px solid var(--c-border); border-radius: var(--radius);
  font-family: var(--font-title); font-weight: 700; font-size: var(--fs-lg);
  color: inherit; text-decoration: none;
}
.type-tile:hover, .type-tile:focus-visible { border-color: var(--c-primary); }

/* Critères de mot de passe cochés en direct (décision 2026-07-22). Discret au repos, lisible en
   texte agrandi — aucune taille sous 16 px (contrainte U5.1). */
.pwd-rules__box { margin: var(--sp-2) 0; }
.pwd-rules { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pwd-rule { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-muted); }
.pwd-rule--ok { color: var(--c-text); }
.pwd-rule__mark { font-weight: 800; width: 1.25em; text-align: center; }
.pwd-rule--ok .pwd-rule__mark { color: var(--c-primary); }