Modèle:MiniCard/styles.css

/* =============================================================================
   MINICARD COMPONENT (100% Validé MediaWiki + Smooth Reveal)
   ============================================================================= */

/* 1. Base et État de départ : transparent et légèrement vers le bas */
.minicard {
    position: relative;
    display: block;
    height: 60px;
    border: 1px solid var(--border-color-base);
    border-radius: 6px;
    background-color: var(--color-surface-0);
    overflow: hidden;
    text-decoration: none !important;
    
    /* Variables d'animation */
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), 
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                filter 0.2s ease;
}

/* 2. État chargé (classe ajoutée par le JS) : visible et à sa place */
.minicard.is-loaded {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Survol uniquement quand la carte est chargée */
.minicard.is-loaded:hover {
    transform: translateY(-4px); /* Petit bond au survol */
    border-color: var(--color-progressive);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Sécurité : si le JS est désactivé */
.client-nojs .minicard {
    opacity: 1 !important;
    transform: none !important;
}

/* Sécurité : pour l'impression */
@media print {
    .minicard {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Thème Sombre */
.skin-theme-clientpref-night .minicard {
    background-color: var(--color-surface-1);
    border-color: var(--border-color-subtle);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* =============================================================================
   ARRIÈRE-PLAN IMAGE
   ============================================================================= */

.minicard-background {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* L'image ne bloque plus les clics ! */
}

/* Cache le texte rouge "Fichier:X.jpg" si l'image n'existe pas */
.minicard-background a.new {
    display: none !important;
}

/* Nettoyage des balises MediaWiki */
.minicard-background * {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.minicard-background img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    transition: transform 0.3s ease;
}

.minicard.is-loaded:hover .minicard-background img {
    transform: scale(1.05);
}

/* Filtre sombre pour lire le texte */
.minicard-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #000000;
    opacity: 0.6;
    z-index: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.minicard.is-loaded:hover .minicard-overlay {
    opacity: 0.4;
}

/* =============================================================================
   TEXTE ET LIENS
   ============================================================================= */

.minicard-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Étirement du lien sur toute la zone */
.minicard-content a,
.minicard-content .minicard-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-emphasized);
    text-decoration: none !important;
}

.minicard-content a:hover {
    color: var(--color-progressive);
}

/* Texte en BLANC si on affiche une image */
.minicard--image .minicard-content a,
.minicard--image .minicard-content .minicard-text {
    color: #ffffff !important;
    text-shadow: 0 2px 4px #000000;
}

/* =============================================================================
   COULEURS SÉMANTIQUES (Basées sur MediaWiki:Citizen.css)
   S'applique uniquement aux cartes sans image
   ============================================================================= */

/* -- Success -- */
.minicard-color-success.minicard--no-image {
    background-color: var(--nefald-success-bg);
    border-color: var(--nefald-success-border);
}
.minicard-color-success.minicard--no-image .minicard-content a,
.minicard-color-success.minicard--no-image .minicard-content .minicard-text {
    color: var(--nefald-success-text);
}

/* -- Danger -- */
.minicard-color-danger.minicard--no-image {
    background-color: var(--nefald-danger-bg);
    border-color: var(--nefald-danger-border);
}
.minicard-color-danger.minicard--no-image .minicard-content a,
.minicard-color-danger.minicard--no-image .minicard-content .minicard-text {
    color: var(--nefald-danger-text);
}

/* -- Warning -- */
.minicard-color-warning.minicard--no-image {
    background-color: var(--nefald-warning-bg);
    border-color: var(--nefald-warning-border);
}
.minicard-color-warning.minicard--no-image .minicard-content a,
.minicard-color-warning.minicard--no-image .minicard-content .minicard-text {
    color: var(--nefald-warning-text);
}

/* -- Info -- */
.minicard-color-info.minicard--no-image {
    background-color: var(--nefald-info-bg);
    border-color: var(--nefald-info-border);
}
.minicard-color-info.minicard--no-image .minicard-content a,
.minicard-color-info.minicard--no-image .minicard-content .minicard-text {
    color: var(--nefald-info-text);
}

/* -- Neutral -- */
.minicard-color-neutral.minicard--no-image {
    background-color: var(--nefald-neutral-bg);
    border-color: var(--nefald-neutral-border);
}
.minicard-color-neutral.minicard--no-image .minicard-content a,
.minicard-color-neutral.minicard--no-image .minicard-content .minicard-text {
    color: var(--nefald-neutral-text);
}

/* -- Tip -- */
.minicard-color-tip.minicard--no-image {
    background-color: var(--nefald-tip-bg);
    border-color: var(--nefald-tip-border);
}
.minicard-color-tip.minicard--no-image .minicard-content a,
.minicard-color-tip.minicard--no-image .minicard-content .minicard-text {
    color: var(--nefald-tip-text);
}

/* -- Question -- */
.minicard-color-question.minicard--no-image {
    background-color: var(--nefald-question-bg);
    border-color: var(--nefald-question-border);
}
.minicard-color-question.minicard--no-image .minicard-content a,
.minicard-color-question.minicard--no-image .minicard-content .minicard-text {
    color: var(--nefald-question-text);
}

/* Effet au survol des cartes colorées (uniquement si chargées) */
.minicard.minicard--no-image[class*="minicard-color-"].is-loaded:hover {
    filter: brightness(0.95);
}
:root.skin-theme-clientpref-night .minicard.minicard--no-image[class*="minicard-color-"].is-loaded:hover {
    filter: brightness(1.1);
}

/* =============================================================================
   SURFACES CITIZEN (0 à 4) & PROGRESSIVE
   S'applique uniquement aux cartes sans image
   ============================================================================= */

.minicard-color-surface-0.minicard--no-image { 
    background-color: var(--color-surface-0); 
    border-color: var(--color-surface-1); 
}
.minicard-color-surface-1.minicard--no-image { 
    background-color: var(--color-surface-1); 
    border-color: var(--color-surface-2); 
}
.minicard-color-surface-2.minicard--no-image { 
    background-color: var(--color-surface-2); 
    border-color: var(--color-surface-3); 
}
.minicard-color-surface-3.minicard--no-image { 
    background-color: var(--color-surface-3); 
    border-color: var(--color-surface-4); 
}
.minicard-color-surface-4.minicard--no-image { 
    background-color: var(--color-surface-4); 
    border-color: var(--border-color-base); 
}

.minicard[class*="minicard-color-surface-"] .minicard-content a,
.minicard[class*="minicard-color-surface-"] .minicard-content .minicard-text {
    color: var(--color-base);
}

.minicard-color-progressive.minicard--no-image {
    background-color: var(--nefald-accent-subtle);
    border-color: var(--nefald-accent);
}

.minicard-color-progressive.minicard--no-image .minicard-content a,
.minicard-color-progressive.minicard--no-image .minicard-content .minicard-text {
    color: var(--nefald-accent);
    font-weight: bold;
}

/* =============================================================================
   GRILLE (MINICARD GRID) - Mode Strict (Lignes identiques, tailles égales)
   ============================================================================= */

.minicard-grid {
    display: grid;
    /* FORCE exactement 5 colonnes de même largeur, peu importe la largeur Citizen */
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 1em 0;
}

.minicard-grid .minicard {
    margin: 0 !important;
    width: 100% !important; /* Le bouton remplit exactement sa case */
    max-width: none !important; /* Annule d'anciennes restrictions */
}

/* =============================================================================
   RESPONSIVE - Pour ne pas écraser les boutons sur mobile / tablette
   ============================================================================= */

@media screen and (max-width: 1100px) {
    .minicard-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 par ligne sur petits écrans */
    }
}

@media screen and (max-width: 768px) {
    .minicard-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 par ligne sur mobile */
    }
}

@media screen and (max-width: 480px) {
    .minicard-grid {
        grid-template-columns: 1fr; /* 1 seul par ligne sur très petit mobile */
    }
}


/* =============================================================================
   LIENS EXTERNES
   ============================================================================= */

.minicard-content a.external {
    padding-right: 0 !important;
}