/* ========================================================================== Carnet botanique — charte graphique Papier crème · Newsreader (noms de plantes, italique pour le latin) Work Sans (interface) · monospace (codes étiquette) Accent vert #3f6b4a · couleurs d'état dédiées ========================================================================== */ :root { --paper: #f6f1e4; --paper-raised: #fbf8f0; --ink: #2a241c; --ink-soft: #6b5f4e; --line: #ded2b8; --accent: #3f6b4a; --accent-dark: #2c4b34; --etat-plante: #4a6b8a; --etat-plante-bg: #e6edf3; --etat-en_pousse: #3f6b4a; --etat-en_pousse-bg: #e5efe6; --etat-en_production: #2f7a8c; --etat-en_production-bg: #dceef1; --etat-fini: #a8752f; --etat-fini-bg: #f4ead4; --etat-mort: #8a4a3f; --etat-mort-bg: #f3e3e0; --etat-en_pot: #b8763f; --etat-en_pot-bg: #f5e8d8; --etat-pleine_terre: #5c6b3f; --etat-pleine_terre-bg: #eaefdc; --etat-en_cours: #af8b2f; --etat-en_cours-bg: #f2ecd6; --etat-termine: #6b6b62; --etat-termine-bg: #eceae4; --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-body: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Roboto Mono", Menlo, Consolas, monospace; --radius: 10px; --shadow-card: 0 1px 2px rgba(42, 36, 28, 0.06), 0 4px 14px rgba(42, 36, 28, 0.05); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; } body { min-height: 100vh; padding-bottom: 84px; /* place pour la barre de nav mobile */ } a { color: var(--accent-dark); } /* --- Mise en page générale : sidebar (PC) + contenu -------------------- */ .layout { display: flex; align-items: stretch; min-height: 100vh; } .sidebar { display: none; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--paper); } @media (min-width: 900px) { body { padding-bottom: 0; } .nav-bas { display: none; } .sidebar { display: flex; flex-direction: column; width: 250px; flex: none; background: var(--paper-raised); border-right: 1px solid var(--line); padding: 26px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } } .sidebar-marque { display: block; text-decoration: none; color: inherit; } .sidebar-marque .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 4px; } .sidebar-marque h2 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin: 0 0 22px; color: var(--ink); } .menu-declencheur { position: relative; margin-bottom: 24px; } .sidebar-nouveau { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--accent); color: #fff; text-decoration: none; border: none; font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 11px 14px; border-radius: 10px; cursor: pointer; } .sidebar-nouveau:hover { background: var(--accent-dark); } /* --- Menus déroulants génériques (« + Nouveau », regroupement mobile « Jardin ») --- */ .menu-deroulant { /* Position réelle (top/left/bottom/transform) posée par app.js au clic, en `position: fixed` — voir le commentaire dans app.js : ce menu est déplacé en enfant direct de pour ne pas être rogné par un ancêtre comme `.nav-bas` (overflow-x: auto sur mobile, qui force aussi l'overflow-y à "auto" et rognait le menu quand il s'ouvrait vers le haut). Le `position: absolute` ci-dessous n'est qu'un repli avant que le JS n'ait tourné (jamais visible, le menu démarre `hidden`). */ position: absolute; z-index: 50; display: flex; flex-direction: column; min-width: 180px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(30, 30, 20, 0.12); padding: 6px; gap: 2px; } /* Le `display: flex` ci-dessus est une règle de la feuille de style de l'auteur : elle l'emporte toujours sur la règle `[hidden] { display: none }` du navigateur (règle de la feuille de style « user agent », de priorité plus faible dans la cascade, quelle que soit sa spécificité). Sans cette redéclaration explicite, l'attribut `hidden` posé/retiré par app.js n'a donc aucun effet visuel : le menu reste affiché en permanence. */ .menu-deroulant[hidden] { display: none; } .menu-deroulant a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; } .menu-deroulant a:hover { background: var(--paper); } /* Sous-titre de groupe (v21) : le menu « + Nouveau » propose désormais deux groupes de liens (Nouveau plant / Nouveau semis) plutôt qu'une seule liste plate. */ .menu-deroulant .menu-groupe-titre { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); padding: 6px 10px 2px; margin: 0; } .menu-deroulant .menu-separateur { border: none; border-top: 1px solid var(--line); margin: 4px 2px; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .sidebar-nav a, .sidebar-config { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--ink-soft); text-decoration: none; font-size: 14.5px; font-weight: 500; } .sidebar-nav a:hover, .sidebar-config:hover { background: var(--paper); } .sidebar-nav a.actif, .sidebar-config.actif { background: var(--etat-en_pousse-bg); color: var(--accent-dark); font-weight: 600; } .sidebar-config { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; } /* --- En-tête -------------------------------------------------------- */ .app-header { padding: 22px 20px 16px; border-bottom: 1px solid var(--line); } .app-header .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 4px; } .app-header h1 { font-family: var(--font-display); font-weight: 600; font-size: 26px; margin: 0; color: var(--ink); } .app-header p.subtitle { margin: 4px 0 0; color: var(--ink-soft); font-size: 13.5px; } @media (min-width: 900px) { .app-header { padding: 30px 40px 18px; } .app-header .kicker { display: none; } .app-header h1 { font-size: 29px; } } /* --- Contenu ---------------------------------------------------------- */ .content { padding: 16px 20px 28px; width: 100%; max-width: 1280px; } .content.conteneur-etroit { max-width: 620px; } .conteneur-etroit { max-width: 620px; } @media (min-width: 900px) { .content { padding: 22px 40px 48px; } } .entete-action { display: flex; justify-content: flex-end; margin-bottom: 14px; } .lien-retour { display: inline-block; font-size: 13px; color: var(--ink-soft); text-decoration: none; margin-bottom: 16px; } .lien-retour:hover { color: var(--accent-dark); } .section-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 22px 0 10px; } .section-title:first-child { margin-top: 0; } /* --- Flash messages ----------------------------------------------------- */ .flash { padding: 10px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 14px; border: 1px solid transparent; } .flash.succes { background: var(--etat-en_pousse-bg); color: var(--accent-dark); border-color: #cfe0d1; } .flash.erreur { background: var(--etat-mort-bg); color: var(--etat-mort); border-color: #e6c9c3; } /* --- Filtres par état ---------------------------------------------------- */ .filtres { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; } .filtre-chip { flex: none; font-family: var(--font-body); font-size: 13px; font-weight: 500; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink-soft); text-decoration: none; white-space: nowrap; } .filtre-chip .n { font-family: var(--font-mono); opacity: 0.7; margin-left: 4px; } .filtre-chip.actif { background: var(--ink); color: var(--paper); border-color: var(--ink); } .filtre-chip.actif.plante { background: var(--etat-plante); border-color: var(--etat-plante); } .filtre-chip.actif.en_production { background: var(--etat-en_production); border-color: var(--etat-en_production); } .filtre-chip.actif.en_pousse { background: var(--etat-en_pousse); border-color: var(--etat-en_pousse); } .filtre-chip.actif.fini { background: var(--etat-fini); border-color: var(--etat-fini); } .filtre-chip.actif.mort { background: var(--etat-mort); border-color: var(--etat-mort); } .filtre-chip.actif.en_pot { background: var(--etat-en_pot); border-color: var(--etat-en_pot); } .filtre-chip.actif.pleine_terre { background: var(--etat-pleine_terre); border-color: var(--etat-pleine_terre); } .filtre-chip.actif.en_cours { background: var(--etat-en_cours); border-color: var(--etat-en_cours); } .filtre-chip.actif.termine { background: var(--etat-termine); border-color: var(--etat-termine); } /* --- Cartes de plants ----------------------------------------------------- */ .liste-plants { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 640px) { .liste-plants { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .liste-plants { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1300px) { .liste-plants { grid-template-columns: repeat(4, 1fr); } } .carte-plant { display: flex; align-items: center; gap: 12px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; text-decoration: none; color: inherit; box-shadow: var(--shadow-card); } .carte-plant .vignette { width: 46px; height: 46px; border-radius: 8px; background: var(--etat-en_pousse-bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--accent-dark); flex: none; overflow: hidden; } .carte-plant .vignette img { width: 100%; height: 100%; object-fit: cover; } .carte-plant .infos { flex: 1; min-width: 0; } .carte-plant .nom-commun { font-family: var(--font-display); font-size: 17px; font-weight: 500; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .carte-plant .nom-latin { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--ink-soft); margin: 1px 0 0; } .carte-plant .meta-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; } .code-etiquette { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; color: var(--ink-soft); } .badge-etat { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; } .badge-etat.plante { background: var(--etat-plante-bg); color: var(--etat-plante); } .badge-etat.en_production { background: var(--etat-en_production-bg); color: var(--etat-en_production); } .badge-etat.en_pousse { background: var(--etat-en_pousse-bg); color: var(--etat-en_pousse); } .badge-etat.fini { background: var(--etat-fini-bg); color: var(--etat-fini); } .badge-etat.mort { background: var(--etat-mort-bg); color: var(--etat-mort); } .badge-etat.en_pot { background: var(--etat-en_pot-bg); color: var(--etat-en_pot); } .badge-etat.pleine_terre { background: var(--etat-pleine_terre-bg); color: var(--etat-pleine_terre); } .badge-etat.en_cours { background: var(--etat-en_cours-bg); color: var(--etat-en_cours); } .badge-etat.termine { background: var(--etat-termine-bg); color: var(--etat-termine); } .lieu-tag { font-size: 12px; color: var(--ink-soft); } a.lieu-tag { text-decoration: underline dotted; text-underline-offset: 2px; } a.lieu-tag:hover { color: var(--accent-dark); } .ligne-secondaire { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; color: var(--ink-soft); } .etat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; } .etat-dot.plante { background: var(--etat-plante); } .etat-dot.en_production { background: var(--etat-en_production); } .etat-dot.en_pousse { background: var(--etat-en_pousse); } .etat-dot.fini { background: var(--etat-fini); } .etat-dot.mort { background: var(--etat-mort); } .etat-dot.en_pot { background: var(--etat-en_pot); } .etat-dot.pleine_terre { background: var(--etat-pleine_terre); } .etat-empty { text-align: center; padding: 40px 20px; color: var(--ink-soft); } .etat-empty p { margin: 4px 0; } /* --- Accueil / tableau de bord ------------------------------------------ */ .grille-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; } .carte-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 10px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-card); text-align: center; } .carte-stat:hover { border-color: var(--accent); } .carte-stat .icone-stat { color: var(--accent-dark); } .carte-stat .nombre-stat { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1; } .carte-stat .libelle-stat { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; } .carte-honneur { display: flex; flex-direction: column; gap: 16px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-decoration: none; color: inherit; box-shadow: var(--shadow-card); } @media (min-width: 640px) { .carte-honneur { flex-direction: row; align-items: center; } } .honneur-visuel { flex: none; width: 100%; height: 200px; border-radius: 10px; background: var(--etat-en_pousse-bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: italic; font-size: 48px; color: var(--accent-dark); overflow: hidden; } @media (min-width: 640px) { .honneur-visuel { width: 240px; } } .honneur-visuel img { width: 100%; height: 100%; object-fit: cover; } .honneur-infos { display: flex; flex-direction: column; min-width: 0; } .honneur-infos .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 4px; } .honneur-nom { font-family: var(--font-display); font-size: 24px; font-weight: 600; } .honneur-infos .nom-latin { font-family: var(--font-display); font-style: italic; color: var(--ink-soft); font-size: 14px; } /* --- Partages de la communauté (page d'accueil) ---------------------------- */ .grille-partages { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .carte-partage { display: flex; flex-direction: column; gap: 8px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow-card); } .partage-visuel { width: 100%; height: 120px; border-radius: 8px; background: var(--etat-en_pousse-bg); overflow: hidden; } .partage-visuel img { width: 100%; height: 100%; object-fit: cover; } .partage-infos { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .partage-nom { font-weight: 600; font-size: 14px; } .partage-infos .badge-etat { align-self: flex-start; } .partage-infos .ligne-secondaire { font-size: 12px; color: var(--ink-soft); } /* --- Boutons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-body); font-size: 14.5px; font-weight: 600; padding: 11px 18px; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--accent); color: #fff; text-decoration: none; cursor: pointer; } .btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); } .btn.secondaire { background: transparent; color: var(--accent-dark); } .btn.secondaire:hover { background: var(--etat-en_pousse-bg); } .btn.danger { background: transparent; border-color: var(--etat-mort); color: var(--etat-mort); } .btn.danger:hover { background: var(--etat-mort-bg); } .btn.pleine-largeur { width: 100%; } .btn.icone-seul { padding: 8px; } /* --- Formulaires ------------------------------------------------------------ */ .champ { margin-bottom: 16px; } .champ label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .champ input[type="text"], .champ input[type="date"], .champ input[type="url"], .champ input[type="password"], .champ input[type="file"], .champ input[type="number"], .champ select, .champ textarea { width: 100%; font-family: var(--font-body); font-size: 15px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); } .champ textarea { resize: vertical; min-height: 70px; } .champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(63, 107, 74, 0.15); } .champ .aide { font-size: 12px; color: var(--ink-soft); margin-top: 5px; } .champ-nouveau { margin-top: 8px; } /* Ajout de photo : deux boutons explicites (caméra / fichiers) plutôt que de compter sur le sélecteur natif, qui sur Android récent (photo picker système depuis Android 13) n'offre plus l'appareil photo par défaut. */ .champ-photo-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .choix-source-photo { display: flex; gap: 8px; } .choix-source-photo .btn { flex: 1; } .nom-fichier-choisi { font-size: 13px; color: var(--ink-soft); margin: 8px 0 0; } /* Le bouton d'envoi manuel ne sert que si JavaScript est désactivé (voir le