Modèle:Card/styles.css

/* =============================================================================

   HOME CARD COMPONENT

   Composant de carte stylisé pour affichage de contenu avec image

   Compatible dark/light mode avec Citizen skin

   ============================================================================= */



/* -----------------------------------------------------------------------------

   STRUCTURE DE BASE

   ----------------------------------------------------------------------------- */



.home-card {

    /* Layout */

    display: flex;

    flex-direction: column;

    height: 100%; /* Assure que la carte prend toute la hauteur disponible dans sa cellule de grille */

    overflow: hidden;

    

    /* Style */

    background: var(--color-surface-1);

    border: 1px solid var(--border-color-base, rgba(0, 0, 0, 0.1));

    border-radius: var(--radius-lg, 12px); /* Utilisation des variables de `Accueil/shared/styles.css` */

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    

    /* Animation */

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

}



.home-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

    border-color: var(--color-primary, #36c); /* Utilisation des variables */

}



/* Dark mode - Card base */

.skin-theme-clientpref-night .home-card {

    border-color: var(--border-color-subtle, rgba(255, 255, 255, 0.1));

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);

}



.skin-theme-clientpref-night .home-card:hover {

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);

}



/* -----------------------------------------------------------------------------

   IMAGE - Section supérieure PLEINE LARGEUR

   ----------------------------------------------------------------------------- */



.home-card__image {

    position: relative;

    width: 100%;

    height: 250px; /* Hauteur par défaut */

    flex-shrink: 0;

    overflow: hidden;

    margin: 0; /* Assure qu'il n'y a pas de marge non désirée */

    padding: 0;

    background: var(--color-surface-2); /* Utilisation des variables */

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Forcer TOUS les éléments MediaWiki à être en pleine largeur */

.home-card__image * {

    margin: 0 !important;

    padding: 0 !important;

    border: none !important;

    background: transparent !important;

}



.home-card__image .thumb,

.home-card__image .thumbinner,

.home-card__image .thumbcaption,

.home-card__image .magnify {

    display: block !important;

    width: 100% !important;

    height: 100% !important;

    object-fit: cover; /* Assure que l'image couvre la zone sans déformation */

}



/* -----------------------------------------------------------------------------

   CONTENU - Section inférieure

   ----------------------------------------------------------------------------- */



.home-card__content {

    padding: var(--space-lg, 1rem) var(--space-md, 1rem); /* Utilisation des variables */

    flex-grow: 1; /* Permet au contenu de prendre l'espace restant */

    display: flex;

    flex-direction: column;

}



.home-card__title {

    font-size: 1.25rem; /* Taille de police plus lisible */

    font-weight: 700;

    color: var(--color-base); /* Utilisation des variables */

    margin-bottom: var(--space-sm, 0.5rem); /* Utilisation des variables */

}



.home-card__subtitle {

    font-size: 0.875rem;

    color: var(--color-subtle); /* Utilisation des variables */

    margin-bottom: var(--space-md, 1rem); /* Utilisation des variables */

    font-style: italic;

}



.home-card__text {

    font-size: 0.9375rem; /* Taille légèrement plus petite pour le corps du texte */

    color: var(--color-subtle); /* Utilisation des variables */

    line-height: 1.6;

    flex-grow: 1; /* Permet au texte de pousser le reste si nécessaire */

}



/* -----------------------------------------------------------------------------

   BADGE OPTIONNEL

   ----------------------------------------------------------------------------- */



.home-card__badge {

    display: inline-block;

    margin-bottom: var(--space-md, 1rem); /* Utilisation des variables */

    padding: 0.25rem 0.75rem;

    background: var(--color-primary); /* Utilisation des variables */

    color: var(--color-surface-0); /* Utilisation des variables */

    border-radius: var(--radius-sm, 4px); /* Utilisation des variables */

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



/* -----------------------------------------------------------------------------

   MODIFICATEURS

   ----------------------------------------------------------------------------- */



/* Classe optionnelle pour cards plus compactes */

.home-card-compact .home-card__content {

    padding: var(--space-md, 1rem) !important; /* Utilisation des variables */

}



.home-card-compact .home-card__image {

    height: 160px !important;

    margin-bottom: var(--space-sm, 0.5rem) !important; /* Utilisation des variables */

}



.home-card-compact .home-card__title {

    margin-bottom: var(--space-xs, 0.25rem) !important; /* Utilisation des variables */

    font-size: 1.1rem !important;

}

/* =============================================================================

   RESPONSIVE - Adaptation mobile

   ============================================================================= */



@media (max-width: 1024px) {

    /* Grille 3 colonnes → 2 colonnes */

    .home-cards-grid-3 {

        grid-template-columns: repeat(2, 1fr);

    }

    

    /* Layout sidebar → empilé */

    .home-layout-with-sidebar {

        grid-template-columns: 1fr;

        gap: var(--space-md, 1rem); /* Utilisation des variables */

    }

    

    .home-sidebar {

        position: static;

        order: -1; /* Sidebar en haut sur tablette */

    }

}



@media (max-width: 768px) {

    /* Toutes les grilles → 1 colonne */

    .home-cards-grid,

    .home-cards-grid-2, /* S'assure que la grille de 2 colonnes devient 1 colonne */

    .home-cards-grid-3 {

        grid-template-columns: 1fr;

        gap: var(--space-md, 1rem); /* Utilisation des variables */

    }

    

    .home-layout-with-sidebar,

    .home-main-content,

    .home-sidebar {

        gap: var(--space-md, 1rem); /* Utilisation des variables */

    }

    

    .home-card__image {

        height: 200px;

    }

    

    .home-card__content {

        padding: var(--space-md, 1rem); /* Utilisation des variables */

    }

    

    .home-card__title {

        font-size: 1.25rem;

    }

}



@media (max-width: 480px) {

    /* Mobile très petit → espacement minimal */

    .home-cards-grid,

    .home-cards-grid-1,

    .home-cards-grid-2, /* S'assure que la grille de 2 colonnes a un petit gap */

    .home-cards-grid-3 {

        gap: var(--space-sm, 0.5rem); /* Utilisation des variables */

    }

    

    .home-layout-with-sidebar,

    .home-main-content,

    .home-sidebar {

        gap: var(--space-sm, 0.5rem); /* Utilisation des variables */

    }

    

    .home-card__image {

        height: 180px;

    }

    

    .home-card__content {

        padding: var(--space-md, 1rem); /* Utilisation des variables */

    }

}



/* =============================================================================

   NETTOYAGE FINAL - FORCE TOUT À 0 SI PROBLÈME PERSISTE

   ============================================================================= */



/* Décommenter si l'espacement persiste malgré tout */

/*

.home-layout-with-sidebar,

.home-layout-with-sidebar *,

.home-main-content,

.home-main-content *,

.home-sidebar,

.home-sidebar * {

    margin-top: 0 !important;

    margin-bottom: 0 !important;

}

*/