|
|
| (7 versions intermédiaires par le même utilisateur non affichées) |
| Ligne 601 : |
Ligne 601 : |
|
| |
|
| .home-stats__number { | | .home-stats__number { |
| font-size: 2.5rem; | | font-size: 1.5rem; |
| font-weight: 700; | | font-weight: 700; |
| color: var(--color-primary); | | color: var(--color-primary); |
| Ligne 618 : |
Ligne 618 : |
| ==================================== */ | | ==================================== */ |
|
| |
|
| .home-social {
| |
| padding: 1.5rem;
| |
| background: var(--color-surface-0);
| |
| border: 2px solid var(--border-color-base);
| |
| border-radius: var(--radius-xl);
| |
| }
| |
|
| |
| .home-social__title {
| |
| font-size: 1.25rem;
| |
| font-weight: 700;
| |
| color: var(--color-base);
| |
| margin-bottom: 1rem;
| |
| }
| |
|
| |
| .home-social__grid {
| |
| display: grid;
| |
| gap: 0.75rem;
| |
| }
| |
|
| |
| .home-social-btn {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 0.75rem;
| |
| padding: 0.875rem 1rem;
| |
| background: var(--color-surface-1);
| |
| border: 2px solid var(--border-color-base);
| |
| border-radius: var(--radius-lg);
| |
| text-decoration: none;
| |
| color: var(--color-base);
| |
| font-weight: 600;
| |
| transition: all 0.3s;
| |
| }
| |
|
| |
| .home-social-btn:hover {
| |
| transform: translateX(4px);
| |
| border-color: currentColor;
| |
| }
| |
|
| |
| .home-social-btn__icon {
| |
| font-size: 1.5rem;
| |
| }
| |
|
| |
| .home-social-btn--discord {
| |
| color: #5865f2;
| |
| }
| |
|
| |
| .home-social-btn--patreon {
| |
| color: #ff424d;
| |
| }
| |
|
| |
| .home-social-btn--kofi {
| |
| color: #ff5e5b;
| |
| }
| |
|
| |
| .home-social-btn--reddit {
| |
| color: #ff4500;
| |
| }
| |
|
| |
| #home-card-discord {
| |
| background: #5865f2;
| |
| }
| |
|
| |
| #home-card-patreon {
| |
| background: #ff424d;
| |
| }
| |
|
| |
|
| | /* ==================================== |
| | SUPPRESSION DES STYLES CONFLICTUELS |
| | Les règles suivantes ont été SUPPRIMÉES car elles |
| | entraient en conflit avec le modèle ButtonLink : |
| | |
| | - #home-card-discord, #home-card-patreon, #home-card-gitlab |
| | - min-height forcé |
| | - display: flex !important |
| | - Centrage forcé des images |
| | |
| | Le modèle ButtonLink gère maintenant tout automatiquement. |
| | ==================================== */ |
|
| |
|
| /* ==================================== | | /* ==================================== |
| Ligne 724 : |
Ligne 671 : |
| background: var(--color-surface-2); | | background: var(--color-surface-2); |
| border-color: var(--color-primary); | | border-color: var(--color-primary); |
| }
| |
|
| |
| /* ====================================
| |
| 12. UTILITIES
| |
| ==================================== */
| |
|
| |
| .home-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
| |
| gap: 0.5rem;
| |
| }
| |
|
| |
| .home-grid--col2 {
| |
| grid-template-columns: 1fr 1fr;
| |
| }
| |
|
| |
| .home-grid a.external {
| |
| background-image: none;
| |
| }
| |
|
| |
| /* ====================================
| |
| GRILLES DE CARDS - VARIANTES
| |
| ==================================== */
| |
|
| |
| /* Grille 3 colonnes */
| |
| .home-cards-grid-3 {
| |
| display: grid !important;
| |
| grid-template-columns: repeat(3, 1fr) !important;
| |
| gap: 20px;
| |
| margin: 20px 0;
| |
| width: 100%;
| |
| }
| |
|
| |
| /* Grille 2 colonnes */
| |
| .home-cards-grid-2 {
| |
| display: grid !important;
| |
| grid-template-columns: repeat(2, 1fr) !important;
| |
| gap: 20px;
| |
| margin: 20px 0;
| |
| width: 100%;
| |
| }
| |
|
| |
| /* Grille 1 colonne (pleine largeur) */
| |
| .home-cards-grid-1 {
| |
| display: grid !important;
| |
| grid-template-columns: 1fr !important;
| |
| gap: 20px;
| |
| margin: 20px 0;
| |
| width: 100%;
| |
| }
| |
|
| |
| /* Force les cards enfants à respecter la grille */
| |
| .home-cards-grid-3 > *,
| |
| .home-cards-grid-2 > *,
| |
| .home-cards-grid-1 > * {
| |
| width: 100% !important;
| |
| max-width: none !important;
| |
| margin: 0 !important;
| |
| }
| |
|
| |
| /* ====================================
| |
| RESPONSIVE
| |
| ==================================== */
| |
|
| |
| /* Tablette : 3 colonnes → 2 colonnes */
| |
| @media (max-width: 1024px) {
| |
| .home-cards-grid-3 {
| |
| grid-template-columns: repeat(2, 1fr) !important;
| |
| }
| |
| }
| |
|
| |
| /* Mobile : tout passe en 1 colonne */
| |
| @media (max-width: 768px) {
| |
| .home-cards-grid-2,
| |
| .home-cards-grid-3 {
| |
| grid-template-columns: 1fr !important;
| |
| }
| |
| } | | } |
|
| |
|
