« Modèle:Accueil/tiles/styles.css » : différence entre les versions

/* ============================================================
 * Infothèque — Accueil : tiles (catégories, ressources, actualités)
 *
 * Grille 2 colonnes stricte (au lieu d'un flow inline-block) pour
 * un alignement propre sans décalage entre les tuiles. Largeur
 * totale (1100px) alignée sur la barre de recherche et les panels.
 * ============================================================ */

.ith-tiles {
    box-sizing: border-box;
    max-width: 1100px;
    margin: 18px auto 30px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    text-align: left;
}

.ith-tile {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    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; margin-right: 10px; }
.ith-tile__icon img { display: block; }
.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; }

/* Même seuil que les panels (Modèle:Accueil/panels/styles.css) pour
   que tout le monde bascule en une colonne en même temps. */
@media (max-width: 900px) {
    .ith-tiles { grid-template-columns: 1fr; }
}

@media (max-width: 1140px) {
    .ith-tiles { max-width: 92%; }
}