/* ================================================================
BIOSTART — components.css
Catalogue visuel : boutons, icônes, images & badges
À lier APRÈS biostart.css :
================================================================ */
/* ================================================================
1. BOUTONS
Classe de base : .btn (déjà dans biostart.css)
Variantes : .btn--primary .btn--secondary .btn--white
+ nouvelles variantes ci-dessous
================================================================
UTILISÉ DANS VOS FICHIERS
─────────────────────────
.btn.btn--primary → CTA principaux (hero, sections)
.btn.btn--secondary → lien "Contact" dans le header
.btn.btn--white → CTA sur fond bleu foncé (techno-teaser)
USAGE HTML
──────────
Découvrir notre technologie
Contact
Découvrir →
================================================================ */
/* ── Rappel des variantes existantes (ne pas modifier ici) ──────
.btn--primary : fond bleu clair (#008AC1) → survol bleu foncé
.btn--secondary : contour bleu clair, fond transparent
.btn--white : fond blanc → survol gris clair
──────────────────────────────────────────────────────────────── */
/* ── Nouvelle variante : bouton vert ────────────────────────────
Usage : actions environnementales, CTA secondaires verts */
.btn--green {
background: var(--color-primary-green-dark);
color: #fff;
border-color: var(--color-primary-green-dark);
}
.btn--green:hover {
background: #004d26;
border-color: #004d26;
text-decoration: none;
color: #fff;
}
/* ── Nouvelle variante : bouton jaune (accent) ──────────────────
Usage : CTA fort sur fond sombre, urgence, mise en avant */
.btn--yellow {
background: var(--color-primary-yellow);
color: var(--color-primary-blue-dark);
border-color: var(--color-primary-yellow);
font-weight: var(--font-weight-bold);
}
.btn--yellow:hover {
background: #b8cc0d;
border-color: #b8cc0d;
text-decoration: none;
color: var(--color-primary-blue-dark);
}
/* ── Contour blanc (sur fonds sombres) ──────────────────────────
Usage : sections .techno-teaser, .location-section */
.btn--outline-white {
background: transparent;
color: #fff;
border-color: rgba(255,255,255,0.5);
}
.btn--outline-white:hover {
background: rgba(255,255,255,0.1);
border-color: #fff;
text-decoration: none;
color: #fff;
}
/* ── Tailles supplémentaires ────────────────────────────────────
.btn--sm : header nav, badges, actions compactes
.btn--lg : hero principal, CTA section finale */
.btn--sm {
padding: 8px 18px;
font-size: var(--font-size-sm);
}
.btn--lg {
padding: 16px 40px;
font-size: var(--font-size-lg);
}
/* ── Bouton pleine largeur ──────────────────────────────────────
Usage : formulaire contact (.submit-btn) */
.btn--full {
width: 100%;
justify-content: center;
}
/* ── Bouton désactivé ─────────────────────────────────────────── */
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
/* ================================================================
2. ICONES (SVG inline)
Format utilisé dans vos fichiers :