/* * theme-botanica.css * Style herbier/édition botanique — activé via le bouton switch. * * Police requise dans votre : * */ /* ============================================================ VARIABLES ============================================================ */ :root { --bg-page: #f5f3ee; --bg-card: #ffffff; --bg-card-image: #f0ede6; --bg-tag-dark: #2c3a2e; --bg-tag-light: #f0ede6; --text-primary: #1a1a18; --text-secondary:#6b6b60; --text-muted: #9a9a8e; --accent: #2c3a2e; --border: #dedad3; --border-light: #ebe8e1; --font-d: 'Playfair Display', Georgia, serif; --font-b: 'Lato', 'Helvetica Neue', Arial, sans-serif; --radius: 10px; --transition: 0.2s ease; } /* ============================================================ BASE ============================================================ */ body { background-color: var(--bg-page); color: var(--text-primary); font-family: var(--font-b); font-size: 15px; line-height: 1.65; } /* ============================================================ SOUS-MENU ============================================================ */ .nav-tabs { border-bottom: 1px solid var(--border); gap: 0; flex-wrap: wrap; } .nav-tabs .nav-link { font-family: var(--font-b); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 9px 14px; background: transparent; transition: color var(--transition), border-color var(--transition); } .nav-tabs .nav-link:hover { color: var(--text-primary); border-color: var(--border); background: transparent; } .nav-tabs .nav-link.active { color: var(--accent); border-color: var(--accent); font-weight: 700; background: transparent; } /* ============================================================ TITRE DE SECTION ============================================================ */ h4.section-title { font-family: var(--font-b) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--text-muted) !important; font-style: normal !important; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; } h4.section-title small, h4.section-title em { font-family: inherit; font-style: normal; font-size: inherit; } /* ============================================================ NOM LATIN ============================================================ */ .fiche-nom-latin-wrap p, p[style*="font-size:35px"] { font-family: var(--font-d) !important; font-style: italic !important; font-size: clamp(32px, 4.5vw, 58px) !important; font-weight: 400 !important; line-height: 1.1 !important; color: var(--text-primary) !important; margin-left: 0 !important; margin-bottom: 6px !important; letter-spacing: -0.01em; } /* ============================================================ TABLEAU DE CLASSIFICATION ============================================================ */ table[align="center"] { width: 100%; border-collapse: collapse; margin: 0; } table[align="center"] tr { border-bottom: 1px solid var(--border-light); } table[align="center"] tr:last-child { border-bottom: none; } table[align="center"] td { padding: 10px 0; font-family: var(--font-b); font-size: 14px; vertical-align: middle; color: var(--text-primary); } table[align="center"] td[align="right"] { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); width: 140px; padding-right: 16px; white-space: nowrap; text-align: right; } table[align="center"] td:not([align="right"]) { font-family: var(--font-d); font-style: italic; font-size: 15px; } table[align="center"] td a { color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border); transition: color var(--transition), border-color var(--transition); } table[align="center"] td a:hover { color: var(--accent); border-color: var(--accent); } .Style7 { font-family: var(--font-d); font-style: italic; font-size: 15px; } /* ============================================================ TEXTE STATUT / DISTRIBUTION ============================================================ */ span[style*="color:#000000"] { color: var(--text-primary) !important; font-family: var(--font-d); font-style: italic; } /* ============================================================ SÉPARATEUR (remplace les img saut.png) ============================================================ */ img[src*="saut.png"] { display: block; width: 100%; max-width: none; height: 1px; margin: 16px 0; opacity: 0; /* invisible — la ligne est gérée par border-bottom sur les tr */ } /* Règle visuelle à la place */ .col-md-6 > img[src*="saut.png"] + br, .col-md-6 > img[src*="saut.png"] { display: block; content: ''; border-top: 1px solid var(--border-light); margin: 16px 0; height: 0; } /* ============================================================ PHOTO ============================================================ */ img.right { display: block; max-width: 100%; height: auto; border-radius: 16px; background: var(--bg-card-image); padding: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); } #photo { margin-bottom: 8px; } /* ============================================================ ICÔNES D'ACTION ============================================================ */ #punaise { cursor: pointer; opacity: 0.65; transition: opacity var(--transition), transform var(--transition); } #punaise:hover { opacity: 1; transform: scale(1.15); } /* Icônes de navigation et action */ img[src*="icones_svg"], img[src*="icones/"] { opacity: 0.7; transition: opacity var(--transition), transform var(--transition); } img[src*="icones_svg"]:hover, img[src*="icones/"]:hover { opacity: 1; transform: scale(1.08); } /* ============================================================ TOOLTIPS (#sub1 … #sub8) ============================================================ */ #sub1 p, #sub2 p, #sub3 p, #sub4 p, #sub5 p, #sub6 p, #sub7 p, #sub8 p { margin: 0 0 8px 0 !important; font-size: 13px !important; font-family: var(--font-b) !important; color: var(--text-primary) !important; line-height: 1.6 !important; } #sub1 span, #sub2 span, #sub3 span, #sub4 span, #sub5 span, #sub6 span, #sub7 span, #sub8 span { font-family: var(--font-b); font-size: 13px; color: var(--text-primary); line-height: 1.6; } /* ============================================================ CARTE PHOTO (wrapper autour de l'image principale) ============================================================ */ .col-md-6 > #photo + img { background: var(--bg-card-image); border-radius: 20px; padding: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.09); } /* ============================================================ BOUTONS D'ACTION (liens icônes existants) ============================================================ */ a[href*="Export/Fiche.php"], a[href*="Inventaire/"], a[href*="Manage/"] { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); transition: background var(--transition), transform var(--transition); } a[href*="Export/Fiche.php"]:hover, a[href*="Inventaire/"]:hover, a[href*="Manage/"]:hover { background: var(--bg-tag-light); transform: translateY(-1px); } a[href*="Export/Fiche.php"] img, a[href*="Inventaire/"] img, a[href*="Manage/"] img { opacity: 1; transform: none !important; } /* ============================================================ BOUTON SWITCH (commun aux deux thèmes — copié ici aussi pour garantir sa visibilité même si theme-classique n'est pas chargé en premier) ============================================================ */ #theme-toggle-btn { position: fixed; bottom: 20px; right: 20px; z-index: 9999; padding: 8px 16px; background: var(--accent); color: #fff; border: none; border-radius: 20px; font-family: var(--font-b); font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: background 0.2s, transform 0.2s; letter-spacing: 0.06em; } #theme-toggle-btn:hover { background: #3d5040; transform: translateY(-1px); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { table[align="center"] td[align="right"] { width: 90px; font-size: 10px; } img.right { padding: 10px; border-radius: 12px; } } /* ============================================================ SECTIONS EXTRA : SYNTHÈSE, PHÉNOLOGIE, ÉTYMOLOGIE, CONFUSIONS (style herbier) ============================================================ */ .fiche-section-extra { margin-top: 32px; } /* Carte générique */ .fiche-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 16px; } .fiche-card__label { font-family: var(--font-b); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px 0; } .fiche-card__titre { font-family: var(--font-d); font-size: 22px; font-weight: 400; font-style: normal; color: var(--text-primary); margin: 0 0 14px 0; line-height: 1.25; } .fiche-card__texte { font-family: var(--font-b); font-size: 14.5px; color: var(--text-secondary); line-height: 1.8; margin: 0; } .fiche-card__texte em { font-family: var(--font-d); font-style: italic; color: var(--text-primary); } /* Phénologie */ .fiche-pheno-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .fiche-pheno-pic { font-family: var(--font-b); font-size: 13px; color: var(--text-muted); font-style: italic; } .fiche-calendrier { display: flex; gap: 5px; flex-wrap: nowrap; overflow-x: auto; } .fiche-mois { flex: 1; min-width: 28px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .fiche-mois__label { font-family: var(--font-b); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; } /* Barre colorée sous le label */ .fiche-mois::after { content: ''; display: block; width: 100%; height: 40px; border-radius: 6px; background: var(--bg-tag-light); transition: background 0.2s; } .fiche-mois--actif::after { background: #7a9e82; } .fiche-mois--pic::after { background: var(--accent); } /* Étymologie */ .fiche-card--etymologie .fiche-card__label, .fiche-card--confusions .fiche-card__label { margin-bottom: 16px; } .fiche-etym-item { margin-bottom: 14px; } .fiche-etym-mot { font-family: var(--font-d); font-style: italic; font-size: 17px; color: var(--text-primary); margin: 0 0 4px 0; } .fiche-etym-desc { font-family: var(--font-b); font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.55; } .fiche-etym-sep { border: none; border-top: 1px solid var(--border-light); margin: 14px 0; } /* Confusions */ .fiche-confusion-item { margin-bottom: 12px; } .fiche-confusion-nom { font-family: var(--font-d); font-style: italic; font-size: 15px; color: var(--text-primary); margin: 0 0 3px 0; } .fiche-confusion-fr { font-family: var(--font-b); font-size: 12px; color: var(--text-secondary); margin: 0 0 2px 0; } .fiche-confusion-detail { font-family: var(--font-b); font-size: 12px; color: var(--text-muted); margin: 0; } /* Responsive calendrier */ @media (max-width: 576px) { .fiche-calendrier { gap: 3px; } .fiche-mois::after { height: 30px; border-radius: 4px; } .fiche-mois__label { font-size: 8px; } } /* ============================================================ BADGES DE PROPRIÉTÉS (Indigène, Médicinale, Mellifère…) ============================================================ */ .fiche-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .badge-prop { display: inline-block; padding: 5px 14px; border-radius: 20px; font-family: var(--font-b); font-size: 13px; font-weight: 400; background: var(--bg-tag-light); color: var(--text-primary); border: 1px solid var(--border); letter-spacing: 0.02em; } .badge-prop--dark { background: var(--bg-tag-dark); color: #ffffff; border: none; } /* Badge cliquable */ a.badge-prop { text-decoration: none; cursor: pointer; transition: opacity var(--transition), transform var(--transition); } a.badge-prop:hover { opacity: 0.8; transform: translateY(-1px); }