/* ============================================================================ Correctifs de portage Joomla 5 — template gamersthings Causes récurrentes traitées ici : - le menu d'origine (méga-menu GrueMenu) supprimé → barre de nav recréée ; - markup J5 = Bootstrap 5, alors que template.css = Bootstrap 2/3 (boutons, pagination, classes utilitaires .visually-hidden/.sr-only/.text-muted absentes) ; - J5 sort le titre d'article en

que template.css masque (`.page-header h1{display:none}`). La police d'icônes IcoMoon (media/jui/fonts) a été restaurée → les `.icon-*` marchent nativement via les 227 règles de template.css (pas de remplacement FA ici). ============================================================================ */ /* ---------- Menu principal : barre claire, actif/hover violet #993399 ---------- */ #topmenu-menu ul.mod-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; background: #fff; border-bottom: 3px solid #993399; } #topmenu-menu ul.mod-menu > li.nav-item { position: relative; margin: 0; } #topmenu-menu ul.mod-menu > li.nav-item > a { display: block; padding: 18px 15px 21px 15px; color: #333; text-decoration: none; font-weight: bold; text-transform: uppercase; white-space: nowrap; } #topmenu-menu ul.mod-menu > li.nav-item > a:hover { color: #993399; } #topmenu-menu ul.mod-menu > li.nav-item.active > a, #topmenu-menu ul.mod-menu > li.nav-item.current > a { background: #993399; color: #fff; } #topmenu-menu ul.mod-menu ul { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; top: 100%; min-width: 210px; background: #993399; display: none; z-index: 99999; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); } #topmenu-menu ul.mod-menu li:hover > ul { display: block; } #topmenu-menu ul.mod-menu ul li a { display: block; padding: 10px 16px; color: #fff; text-decoration: none; white-space: nowrap; } #topmenu-menu ul.mod-menu ul li a:hover { background: #7d2a7d; } /* ---------- Classes utilitaires Bootstrap absentes du template ---------- */ /* Sans elles, le texte « lecteur d'écran » s'affiche (ex. pager « Article suivant : »). */ .visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-muted { color: #999 !important; } /* ---------- Titre principal de catégorie : police d'affichage « stranger » ---------- */ .com-content-category-blog > h1, .com-content-category > h1 { font-family: 'stranger'; font-size: 40px; line-height: 40px; font-weight: normal; } /* ---------- Titre d'article : J5 le sort en

(template masque .page-header h1) ---------- */ .item-page .page-header h1, .com-content-article .page-header h1 { display: block; padding: 5px 0; margin: 0 0 10px; border-bottom: 1px solid #ccc; font-size: 22px; line-height: 1.2; } /* ---------- Ligne d'infos article (auteur / catégorie / date / clics) : gris, plus petit, en ligne ---------- */ .item-page .article-info { color: #999; font-size: 0.85em; margin: 0 0 12px; } .item-page .article-info dt { display: none; } /* libellé « Détails » */ .item-page .article-info dd { display: inline-block; margin: 0 12px 0 0; } /* ---------- Champs personnalisés (Pochette, Réalisateur, Scénariste…) : pas de puces ---------- */ .fields-container, .fields-container .field-entry { list-style: none; margin-left: 0; padding-left: 0; } /* ---------- Boutons : J5 = .btn .btn-primary/.btn-secondary (BS5), non stylés par template.css (BS2/3) ---------- */ .btn, .btn-primary, .btn-secondary { display: inline-block; background: #993399; background-image: none; color: #fff; border: none; border-radius: 3px; padding: 6px 14px; font-size: 0.9em; font-weight: bold; line-height: normal; text-decoration: none; text-shadow: none; box-shadow: none; cursor: pointer; } .btn:hover, .btn-primary:hover, .btn-secondary:hover { background: #7d2a7d; color: #fff; } /* « Lire la suite » ET « Ajouter un commentaire » : exception → simples liens (petite police violette), pas des boutons. JComments produit DEUX structures : le compteur `.comments-readmore` et le lien d'ajout `.btn-group[aria-label="Comments link"]`. */ .readmore .btn, .com-content-category-blog__item .readmore a, .comments-readmore .btn, .comments-readmore a, [aria-label="Comments link"] a.btn { display: inline; float: none; background: none; border: none; border-radius: 0; padding: 0; margin: 0; color: #993399; font-size: 13px; font-weight: normal; box-shadow: none; } /* Le conteneur .btn-group hérite de font-size:0 (Bootstrap, anti-espaces) → on le rétablit, sinon tout `em` à l'intérieur s'effondre à 0. + neutraliser un éventuel float. */ .item-content [aria-label="Comments link"].btn-group { float: none; display: block; font-size: 13px; } .readmore .btn:hover, .comments-readmore .btn:hover, .comments-readmore a:hover, [aria-label="Comments link"] a.btn:hover { background: none; color: #7d2a7d; text-decoration: underline; } /* Les deux liens passent SOUS le bloc image/données, avec un léger retrait (pas collés au bord). */ .item-content .readmore, .item-content .comments-readmore, .item-content [aria-label="Comments link"], .item-content > .col-md-auto { clear: both; display: block; margin-top: 6px; padding-left: 12px; } .comments-readmore.container-fluid { padding-left: 12px; } /* ---------- Liste de films en 2 colonnes (classe J5 columns-2) ---------- */ .com-content-category-blog__items.columns-2 { display: flex; flex-wrap: wrap; margin: 0 -10px; } .com-content-category-blog__items.columns-2 > .com-content-category-blog__item { width: 50%; box-sizing: border-box; padding: 0 10px; } @media (max-width: 600px) { .com-content-category-blog__items.columns-2 > .com-content-category-blog__item { width: 100%; } } /* ---------- Disposition d'un item : image (pochette) à gauche, champs à droite ---------- */ .fields-container { overflow: hidden; } /* contient les flottants */ .fields-container .field-entry.pochette { float: left; margin: 0 15px 10px 0; } /* ---------- Icônes renommées en J5 et absentes d'IcoMoon → via Font Awesome 5 ---------- */ .icon-angle-left::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; content: "\f104"; } .icon-angle-right::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; content: "\f105"; } .icon-angle-double-left::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; content: "\f100"; } .icon-angle-double-right::before{ font-family: 'Font Awesome 5 Free'; font-weight: 900; content: "\f101"; } /* ---------- Zone membre : login (markup BS5 `input-group`/`form-check` non stylé) ---------- */ #zone-membre { box-sizing: border-box; } #zone-membre .mod-login, #zone-membre form { max-width: 100%; } #zone-membre .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; margin-bottom: 6px; max-width: 100%; } #zone-membre .input-group .form-control { flex: 1 1 auto; min-width: 0; width: auto; height: 34px; /* min-width:0 = clé anti-débordement flex */ box-sizing: border-box; padding: 5px 8px; border: 1px solid #ccc; } /* Icône user : à GAUCHE du champ (addon préfixe). */ #zone-membre .input-group-text { order: -1; display: flex; align-items: center; height: 34px; padding: 0 9px; background: #eee; color: #555; border: 1px solid #ccc; border-right: 0; box-shadow: none; font-size: 14px; } /* Cadenas à GAUCHE du champ mot de passe (IcoMoon, comme l'icône user — absent du markup J5). */ #zone-membre .mod-login__password .input-group::before { content: "\23"; font-family: 'IcoMoon'; font-style: normal; speak: none; order: -1; display: flex; align-items: center; height: 34px; padding: 0 9px; background: #eee; color: #555; border: 1px solid #ccc; border-right: 0; font-size: 14px; } /* Bouton afficher/masquer (œil) : à DROITE, visiblement cliquable (couleur accent + survol). */ #zone-membre .input-password-toggle { display: flex; align-items: center; height: 34px; padding: 0 9px; background: #993399; color: #fff; border: 1px solid #993399; border-left: 0; box-shadow: none; font-size: 14px; cursor: pointer; } #zone-membre .input-password-toggle:hover { background: #7d2a7d; border-color: #7d2a7d; } /* L'œil et son état basculé (icon-eye-slash absent d'IcoMoon) → via Font Awesome 5, cohérents. */ #zone-membre .input-password-toggle .icon-eye::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; content: "\f06e"; } #zone-membre .input-password-toggle .icon-eye-slash::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; content: "\f070"; } /* « Maintenir la connexion » : checkbox + libellé sur la même ligne. */ #zone-membre .form-check { display: flex; align-items: center; gap: 6px; margin: 6px 0; } #zone-membre .form-check-input { width: auto; margin: 0; flex: 0 0 auto; } #zone-membre .form-check-label { margin: 0; } #zone-membre button[type="submit"], #zone-membre .btn[type="submit"] { margin-top: 6px; } /* ---------- Fil d'Ariane : carets « › » entre les items (séparateur fourni par Bootstrap en temps normal) ---------- */ .mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; /* › */ padding: 0 8px; color: #999; } /* ---------- Bloc commentaires JComments (markup Bootstrap 5, non chargé par le template) ---------- Sans ça : champs pleine largeur collés à gauche, sans marge. On cale le bloc et on style les champs. */ #jc { margin: 25px 0 0; padding: 0 5px; } #jc .h6 { display: block; font-size: 16px; font-weight: bold; margin: 18px 0 10px; } /* Commentaires existants */ .comment-box { border: 1px solid #e5e5e5; border-radius: 4px; background: #fafafa; padding: 10px 12px; margin-bottom: 12px; } .comment-info { font-size: 0.85em; color: #999; margin-bottom: 5px; } .comment-body { font-size: 0.95em; } /* Formulaire (la grille BS5 row/col/d-grid n'a aucun effet ici → on remet en blocs) */ #comments-form { margin-top: 18px; max-width: 620px; } /* Le markup BS5 place le