/* DR MICROBE : STYLES PERSONNALISÉS Ce fichier est chargé APRÈS argon.css (le thème), donc les règles ci-dessous l'emportent sur celles du thème. Il évite de modifier argon.css directement. */ /* ------------------------------------------------------------------ 1. POLICE DU SITE Nunito : une police aux formes arrondies, assortie aux icônes rondes du site. Elle est chargée depuis Google Fonts (graisses 300 / 400 / 600 / 700, en normal et en italique pour les noms latins). Pour changer de police : remplacer "Nunito" à 2 endroits (ici et plus bas). ------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600&display=swap"); /* Remplace "Open Sans" aux 4 endroits où le thème Argon l'impose */ body, .navbar-nav .nav-link, .tooltip, .popover { font-family: "Nunito", sans-serif; } /* ------------------------------------------------------------------ 2. MENUS DÉROULANTS : COULEURS PAR DISCIPLINE ET SURLIGNAGE SOUS LA SOURIS Chaque menu (classe ajoutée sur son
  • dans main_menu.php) définit 2 couleurs : --couleur-survol : fond de la ligne survolée --couleur-texte : écriture des lignes (le menu Bactéries garde l'indigo du thème) Pour changer une couleur, modifier uniquement ces valeurs. ------------------------------------------------------------------- */ .menu-bacteries { --couleur-survol: #88bfff; } /* bleu */ .menu-virus { --couleur-survol: #f7e9a0; --couleur-texte: #7a6a00; } /* jaune pastel */ .menu-parasites { --couleur-survol: #f7c4c0; --couleur-texte: #b03a35; } /* rouge pastel */ .menu-champignons { --couleur-survol: #8fe0a0; --couleur-texte: #1b6e34; } /* vert */ /* Écriture des menus Virus, Parasites et Champignons. !important est nécessaire : le thème impose ses couleurs (text-success, text-warning...) avec !important. */ .menu-virus .dropdown-menu .heading, .menu-virus .dropdown-menu a.description, .menu-parasites .dropdown-menu .heading, .menu-parasites .dropdown-menu a.description, .menu-champignons .dropdown-menu .heading, .menu-champignons .dropdown-menu a.description { color: var(--couleur-texte) !important; } /* Chaque ligne du menu : coins arrondis et changement de couleur en douceur */ .dropdown-menu a.media { border-radius: 0.5rem; transition: background-color 0.2s ease, box-shadow 0.2s ease; } /* Ligne survolée (souris) ou sélectionnée au clavier : fond de la couleur du menu. L'ombre de même couleur agrandit le surlignage de 0,5 rem tout autour, sans modifier la taille ni la position des lignes du menu. */ .dropdown-menu a.media:hover, .dropdown-menu a.media:focus { background-color: var(--couleur-survol); box-shadow: 0 0 0 0.5rem var(--couleur-survol); } /* ------------------------------------------------------------------ 3. ANIMATIONS DES IMAGES Uniquement au survol, et désactivées pour les personnes qui ont demandé de réduire les animations dans leur système (prefers-reduced-motion). ------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { /* Icônes rondes du menu et des onglets : transition douce */ .bact-nav, .icon-onglet { transition: transform 0.25s ease; } /* Quand on survole la ligne du menu, l'icône grossit et s'incline un peu */ .dropdown-menu a.media:hover .bact-nav { transform: scale(1.12) rotate(-6deg); } /* Idem pour les onglets des fiches. Le thème centre déjà cette icône avec translateY(-50%) : on le garde, sinon l'icône sauterait au survol. */ .list-group-item:hover .icon-onglet { transform: translateY(-50%) scale(1.12) rotate(-6deg); } /* Icônes rondes en haut des fiches : petit effet de rebond au survol */ .bact-img { transition: transform 0.25s ease; } .bact-img:hover { transform: translateY(-4px) scale(1.08); } /* Photos des galeries : léger zoom au survol */ .bact-gallerie { transition: transform 0.3s ease; } .bact-gallerie:hover { transform: scale(1.03); } } /* ------------------------------------------------------------------ 4. ONGLETS DES FICHES (Morphologie en culture, Examen direct...) Au survol, un onglet NON sélectionné prend un fond teinté et un texte plus foncé que sa couleur habituelle. Chaque discipline garde sa couleur : bactéries = bleu, virus = jaune, parasites = rouge pastel, champignons = vert. L'onglet sélectionné (classe "active") n'est pas concerné. ------------------------------------------------------------------- */ /* Bactéries */ div.bacterio-tab-menu div.list-group>a:not(.active):hover { background-color: #dbe8f7; color: #003c80; } /* Virus */ div.viro-tab-menu div.list-group>a:not(.active):hover { background-color: #faf3cf; color: #5c5000; } /* Parasites */ div.parasito-tab-menu div.list-group>a:not(.active):hover { background-color: #fbe0de; color: #a33a35; } /* Champignons */ div.myco-tab-menu div.list-group>a:not(.active):hover { background-color: #d9ecd8; color: #2f6a2c; } /* Animation des onglets : changement de couleur en douceur et léger décalage vers la droite (comme les lignes des menus déroulants). Désactivée si le visiteur a réduit les animations. */ @media (prefers-reduced-motion: no-preference) { div.bacterio-tab-menu div.list-group>a, div.viro-tab-menu div.list-group>a, div.parasito-tab-menu div.list-group>a, div.myco-tab-menu div.list-group>a { transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } div.bacterio-tab-menu div.list-group>a:not(.active):hover, div.viro-tab-menu div.list-group>a:not(.active):hover, div.parasito-tab-menu div.list-group>a:not(.active):hover, div.myco-tab-menu div.list-group>a:not(.active):hover { transform: translateX(4px); } } /* ------------------------------------------------------------------ 5. COULEURS DES ONGLETS : PARASITES (ROUGE PASTEL) ET CHAMPIGNONS (VERT) Pour être assortis aux menus, on remplace les couleurs du thème (parasites : vert, champignons : rouge). Pour chaque discipline : écriture des onglets non sélectionnés, onglet sélectionné, sa petite flèche, et les pastilles de titre dans le contenu (ex. « Culture : »). ------------------------------------------------------------------- */ /* Parasites : rouge pastel */ div.parasito-tab-menu div.list-group>a { color: #c9514b; } div.parasito-tab-menu div.list-group>a.active { background-color: #e0706b; border-color: #c95550; } div.parasito-tab-menu div.list-group>a.active:after { border-left-color: #e0706b; } div.parasito-tab-content span { background-color: #e0706b; } /* Champignons : vert */ div.myco-tab-menu div.list-group>a { color: #4C844A; } div.myco-tab-menu div.list-group>a.active { background-color: #359D31; border-color: #1C7E19; } div.myco-tab-menu div.list-group>a.active:after { border-left-color: #359D31; } div.myco-tab-content span { background-color: #359D31; } /* ------------------------------------------------------------------ 6. FONDS DES EN-TÊTES (bandeau en dégradé en haut des pages) Assortis aux menus et aux onglets : parasites = rouge pastel, champignons = vert. (bactéries = bleu : dégradé du thème, inchangé ; virus = jaune pastel, plus doux que le jaune du thème) Ces classes remplacent « bg-gradient-green » et « bg-gradient-orange » dans les en-têtes et les pages de catégories des parasites et des champignons. ------------------------------------------------------------------- */ .bg-gradient-parasites { background: linear-gradient(150deg, #d9615f 1%, #e8837f 70%, #f4b3ae 95%); } .bg-gradient-champignons { background: linear-gradient(150deg, #228514 1%, #48BF37 70%, #84C27C 95%); } /* Virus : écriture des onglets non sélectionnés, assortie au menu Virus (le jaune #DBD106 du thème est presque illisible sur fond blanc) */ div.viro-tab-menu div.list-group>a { color: #7a6a00; } .bg-gradient-virus { background: linear-gradient(150deg, #e9d36b 1%, #f1e08c 70%, #f8eeb4 95%); } /* Sur les pages de virus, le fond est clair : le texte blanc du menu du haut y serait illisible. On le passe en brun foncé (uniquement sur ces pages). */ body:has(.bg-gradient-virus) #navbar_global .navbar-nav > .nav-item > .nav-link { color: #5c5000; } /* ------------------------------------------------------------------ 7. ONGLETS DES FICHES DE VIRUS : JAUNE PASTEL Le jaune du thème (#DBD106) est très vif. On le remplace par un jaune doux ; l'écriture de l'onglet sélectionné et des pastilles passe en brun foncé pour rester lisible. ------------------------------------------------------------------- */ div.viro-tab-menu div.list-group>a.active, div.viro-tab-menu div.list-group>a.active .glyphicon, div.viro-tab-menu div.list-group>a.active .fa { background-color: #ecd978; border-color: #d6c25a; color: #5c5000; } div.viro-tab-menu div.list-group>a.active:after { border-left-color: #ecd978; } div.viro-tab-content span { background-color: #ecd978; color: #5c5000; }