/* ========================================================================== BAOBAB AGROBUSINESS — Thème front-end professionnel Couche de surcouche par-dessus Bootstrap 5. N'altère ni le HTML ni la logique. Conserve la charte verte d'origine (Bootstrap "success" #198754). Tout est piloté par des variables CSS pour rester évolutif et maintenable. ========================================================================== */ /* ---- Police moderne (chargée via le thème, sans toucher au ) ------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ---- Jetons de design (design tokens) ------------------------------------ */ :root { /* Charte verte d'origine conservée comme couleur primaire */ --brand-green: #198754; /* Bootstrap success — couleur historique */ --brand-green-dark: #136c43; --brand-green-darker: #0f5a37; --brand-green-light: #e7f6ef; --brand-green-soft: #d5efe2; --ink: #1d2b24; /* texte principal, vert-anthracite doux */ --ink-muted: #5b6b63; /* texte secondaire */ --line: #e6eae8; /* bordures discrètes */ --surface: #ffffff; /* fond des cartes */ --bg: #f6f9f7; /* fond de page légèrement teinté vert */ --radius-sm: .5rem; --radius: .85rem; --radius-lg: 1.25rem; --shadow-xs: 0 1px 2px rgba(16, 40, 30, .06); --shadow-sm: 0 2px 8px rgba(16, 40, 30, .07); --shadow: 0 8px 24px rgba(16, 40, 30, .09); --shadow-lg: 0 18px 48px rgba(16, 40, 30, .14); --transition: 200ms cubic-bezier(.4, 0, .2, 1); /* On réaligne aussi les variables Bootstrap pour une cohérence parfaite */ --bs-primary: var(--brand-green); --bs-success: var(--brand-green); --bs-body-color: var(--ink); --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* ---- Base ---------------------------------------------------------------- */ body { font-family: var(--bs-body-font-family); color: var(--ink); background-color: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .navbar-brand .company-name { letter-spacing: -.012em; } h1, h2, h3 { font-weight: 700; } a { transition: color var(--transition); } /* ---- Barre de navigation -------------------------------------------------- */ .navbar.bg-success { background: linear-gradient(180deg, var(--brand-green) 0%, var(--brand-green-dark) 100%) !important; box-shadow: var(--shadow-sm); padding-top: .4rem; padding-bottom: .4rem; backdrop-filter: saturate(1.1); } .navbar .nav-link { font-weight: 500; border-radius: var(--radius-sm); padding-left: .85rem !important; padding-right: .85rem !important; position: relative; overflow: hidden; /* contient le reflet et le soulignement animés */ isolation: isolate; transition: background-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition); } /* Reflet lumineux qui balaie le lien au survol */ .navbar .nav-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 105deg, transparent 20%, rgba(255, 255, 255, .18) 45%, rgba(213, 239, 226, .38) 50%, rgba(255, 255, 255, .18) 55%, transparent 80% ); transform: translateX(-110%) skewX(-12deg); transition: transform 550ms cubic-bezier(.22, .61, .36, 1); pointer-events: none; } /* Soulignement vert clair qui se déploie depuis le centre (hors menus déroulants : Bootstrap utilise ::after pour la flèche) */ .navbar .nav-link:not(.dropdown-toggle)::after { content: ""; position: absolute; left: 50%; bottom: .3rem; width: calc(100% - 1.7rem); height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-green-soft), #ffffff, var(--brand-green-soft)); transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform 320ms cubic-bezier(.22, .61, .36, 1); pointer-events: none; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: #ffffff; background-color: rgba(255, 255, 255, .12); transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 14px rgba(15, 90, 55, .35); } .navbar .nav-link:hover::before, .navbar .nav-link:focus::before { transform: translateX(110%) skewX(-12deg); } .navbar .nav-link:not(.dropdown-toggle):hover::after, .navbar .nav-link:not(.dropdown-toggle):focus::after { transform: translateX(-50%) scaleX(1); } /* Les menus déroulants gardent un repère visuel quand ils sont ouverts */ .navbar .nav-link.show, .navbar .nav-link[aria-expanded="true"] { background-color: rgba(255, 255, 255, .16); color: #ffffff; } @media (prefers-reduced-motion: reduce) { .navbar .nav-link::before, .navbar .nav-link::after { transition: none; } .navbar .nav-link:hover, .navbar .nav-link:focus { transform: none; } } /* Menus déroulants : z-index / opacité / ombre → static/css/overlays.css */ .navbar .dropdown-menu { border-radius: var(--radius); padding: .4rem; } .navbar .dropdown-item { border-radius: var(--radius-sm); padding: .5rem .75rem; font-weight: 500; transition: background-color var(--transition), color var(--transition); } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background-color: var(--brand-green-light); color: var(--brand-green-darker); } .navbar .dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); font-weight: 700; } /* ---- Boutons ------------------------------------------------------------- */ .btn { font-weight: 600; border-radius: var(--radius-sm); padding: .55rem 1.1rem; transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition); } .btn:active { transform: translateY(1px); } .btn-success, .btn-primary { background: linear-gradient(180deg, var(--brand-green) 0%, var(--brand-green-dark) 100%); border-color: var(--brand-green-dark); box-shadow: var(--shadow-xs); } .btn-success:hover, .btn-primary:hover { background: linear-gradient(180deg, var(--brand-green-dark) 0%, var(--brand-green-darker) 100%); border-color: var(--brand-green-darker); box-shadow: var(--shadow-sm); } .btn-outline-success, .btn-outline-primary { color: var(--brand-green-dark); border-color: var(--brand-green); } .btn-outline-success:hover, .btn-outline-primary:hover { background-color: var(--brand-green); border-color: var(--brand-green); } /* ---- Cartes -------------------------------------------------------------- */ .card, .seed-card { border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .card:hover, .seed-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-green-soft); } .card-header { background-color: #fff; border-bottom: 1px solid var(--line); font-weight: 600; } .card-img-top { transition: transform 350ms ease; } .card:hover .card-img-top { transform: scale(1.03); } /* ---- Formulaires --------------------------------------------------------- */ .form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--line); padding: .55rem .8rem; transition: border-color var(--transition), box-shadow var(--transition); } .form-control:focus, .form-select:focus { border-color: var(--brand-green); box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .18); } .form-label { font-weight: 600; color: var(--ink); margin-bottom: .35rem; } /* ---- Badges & pills ------------------------------------------------------ */ .badge { font-weight: 600; letter-spacing: .01em; padding: .4em .7em; border-radius: 999px; } /* ---- Alertes (cohérent avec la charte) ----------------------------------- */ .alert { border-radius: var(--radius); border-width: 1px; } .alert-success, .alert-success-light { background-color: var(--brand-green-light); border-color: var(--brand-green-soft); color: var(--brand-green-darker); } /* ---- Tableaux ------------------------------------------------------------ */ .table { --bs-table-hover-bg: var(--brand-green-light); } .table thead th { text-transform: uppercase; font-size: .76rem; letter-spacing: .04em; color: var(--ink-muted); border-bottom: 2px solid var(--line); } /* ---- Liens utilitaires --------------------------------------------------- */ a { color: var(--brand-green-dark); } a:hover { color: var(--brand-green-darker); } .text-success { color: var(--brand-green-dark) !important; } /* ---- Pied de page -------------------------------------------------------- */ .footer { background-color: #fff !important; border-top: 1px solid var(--line); margin-top: 4rem; } .footer h5 { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: .9rem; } .footer a { color: var(--ink-muted); } .footer a:hover { color: var(--brand-green-dark); } /* ---- Petites finitions --------------------------------------------------- */ hr { border-color: var(--line); opacity: 1; } ::selection { background: var(--brand-green-soft); color: var(--brand-green-darker); } /* Défilement fluide et focus visible accessible */ html { scroll-behavior: smooth; } :focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; } /* Respecte la préférence de mouvement réduit */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }