/* 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: 12.5px; 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); } .tabbar a { flex: 1; min-height: var(--tap-min); padding: var(--sp-3) 0; color: var(--c-text-muted); text-decoration: none; font-size: 12.5px; font-weight: 500; border-top: 2px solid transparent; /* 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'] { 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; } .btn--primary { 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 { 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); 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); 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: 13px; } /* 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: 13px; } /* 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); margin: 0 0 var(--sp-3); } .card h3 { font-family: var(--font-title); font-weight: 600; font-size: var(--fs-base); 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); } .chip__x { cursor: pointer; color: var(--c-danger-line); font-weight: bold; } .checkbox { display: flex; align-items: center; gap: var(--sp-2); } /* 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); } .details { margin-bottom: var(--sp-3); } .details > summary { cursor: pointer; padding: var(--sp-2) 0; color: var(--c-accent); font-weight: 600; } /* 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); } .tabbar { overflow-x: auto; } .tabbar a { 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); justify-content: flex-start; padding-bottom: 0; /* Onglets alignés sur la colonne de contenu (max 960px) tout en gardant un fond pleine largeur. */ padding-inline: max(var(--sp-4), calc((100% - 960px) / 2)); } .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: 44px; padding: var(--sp-2) var(--sp-3); cursor: pointer; border-radius: 6px; } .combobox__row:hover, .combobox__row.is-active { background: var(--c-primary-soft); } .combobox__row-sub { font-size: .8em; } .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); } .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: .9em; } /* ── 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; } /* ── 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 +