Modèle:Accueil/tiles/styles.css

/* ============================================================
 * Infothèque — Accueil : tiles (catégories, ressources, actualités)
 * Couleurs cohérentes avec les bandeaux des infobox.
 * ============================================================ */

.ith-tiles {
    max-width: 1100px;
    margin: 18px auto 30px auto;
    text-align: center;
}

.ith-tile {
    display: inline-block;
    vertical-align: top;
    width: 340px;
    max-width: 100%;
    margin: 10px;
    padding: 16px 18px;
    border: 1px solid #c9ced6;
    border-radius: 16px;
    background: #ffffff;
    color: #1f2328;
    text-align: left;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ith-tile__head { margin-bottom: 10px; }
.ith-tile__icon { display: inline-block; vertical-align: middle; font-size: 22px; margin-right: 10px; }
.ith-tile__title { display: inline-block; vertical-align: middle; font-size: 18px; font-weight: 800; }

.ith-tile__body ul { margin: 0; padding-left: 18px; }
.ith-tile__body li { margin: 6px 0; }
.ith-note { color: #6b7280; font-size: 12px; }

.ith-tile__footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    text-align: right;
    font-weight: 700;
}
.ith-tile__footer a { text-decoration: none; }
.ith-tile:hover { background: #f3f4f6; }

.ith-tile__body--scroll { max-height: 170px; overflow: auto; padding-right: 6px; }

/* Couleurs par catégorie, identiques aux bandeaux des infobox */
.ith-tile--ordinateur   { background: #fff0e0; border-color: #e6c9a8; }
.ith-tile--peripherique { background: #efefef; border-color: #d0d0d0; }
.ith-tile--logiciel     { background: #f8f8ff; border-color: #d6d6ee; }
.ith-tile--jeu          { background: #dfefdf; border-color: #bcdcbc; }
.ith-tile--ressources   { background: #fdf2d5; border-color: #e6d3a6; }
.ith-tile--actus        { background: #f5f8ff; border-color: #b6c7f2; }
.ith-tile--actus:hover  { background: #eef3ff; }

@media (max-width: 800px) {
    .ith-tile { width: 92%; margin: 10px auto; }
}