/* ═══════════════════════════════════════════════════════════ icons.css — disposition des raccourcis (le cadre est géré par .bloc-page) ═══════════════════════════════════════════════════════════ */ .icons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; } .icons a { flex-basis: calc(20% - 22px); max-width: calc(20% - 22px); display: flex; align-items: center; justify-content: center; transition: filter 0.25s, transform 0.2s; } .icons a:hover { filter: drop-shadow(0 0 10px rgba(240,235,220,0.7)) brightness(1.2); transform: translateY(-2px); } .icons a:active { transform: scale(0.97); } .icons img { max-width: 100%; height: auto; display: block; } @media (max-width: 720px) { .icons a { flex-basis: calc(33.333% - 22px); max-width: calc(33.333% - 22px); } } /* ===== Libellés superposés sur les icônes (ajout) ===== */ :root{ --icon-font:'Comic Neue','Comic Sans MS',cursive; --label-outline:#000; } .icons a{ position:relative; display:block; container-type:inline-size; } .icons a img{ display:block; width:100%; height:auto; } .icons a .lbl{ position:absolute; left:0; right:0; bottom:5%; margin:0; text-align:center; font-family:var(--icon-font); font-weight:700; color:#fff; pointer-events:none; white-space:nowrap; font-size:22px; font-size:clamp(16px,24cqw,39px); -webkit-text-stroke:.6px var(--label-outline); text-shadow: -2px -2px 0 var(--label-outline), 0 -2px 0 var(--label-outline), 2px -2px 0 var(--label-outline), -2px 0 0 var(--label-outline), 2px 0 0 var(--label-outline), -2px 2px 0 var(--label-outline), 0 2px 0 var(--label-outline), 2px 2px 0 var(--label-outline), 0 3px 6px rgba(0,0,0,.6); } /* lbl-multi-marker — libellés sur plusieurs lignes (Aide en ligne) */ .icons a .lbl-multi{ white-space:normal; line-height:1.05; } /* liens-externes-marker — titre du groupe externes (12/07), aligné sur .lbl */ .icons-titre{ width:100%; margin:26px 0 2px; text-align:center; font-family:var(--icon-font); font-weight:700; color:#fff; font-size:15px; opacity:.5; } /* ═══ affichage-modes-marker — toolbar + 4 modes d'affichage (14/07) ═══ */ .affichage-modes{ display:flex; justify-content:flex-end; gap:4px; max-width:1100px; margin:10px auto 0; padding:0 12px; } .affichage-modes button{ background:none; border:none; padding:5px; cursor:pointer; color:#fff; opacity:.45; border-radius:6px; transition:opacity .2s, background .2s; } .affichage-modes button svg{ width:20px; height:20px; display:block; } .affichage-modes button:hover{ opacity:.8; } .affichage-modes button.is-active{ opacity:1; background:rgba(255,255,255,.14); } /* affichage-modes-marker : toolbar rétractable — replié = bouton actif seul */ .affichage-modes button{ display:none; } .affichage-modes button.is-active, .affichage-modes.is-open button{ display:block; } .affichage-modes.is-open button.is-active{ background:rgba(255,255,255,.22); } /* ═══ icones-plus-petites-marker (13/09/2026) — BUG 20260913-123540 ═══ « réduire par défaut la taille des icônes de la page d'accueil en faisant évoluer le menu de la présentation des icônes en conséquence » L'échelle gagne un cran PAR LE BAS. Avant : icônes (4 colonnes) → grosses (3) → liste → détails, le plus petit étant déjà le défaut. Maintenant : icônes 6 colonnes paysage / 4 portrait ← le défaut, le nouveau cran moyennes 4 colonnes paysage / 3 portrait ← l'ancien défaut, conservé grosses 3 colonnes inchangé liste / détails inchangés POURQUOI redéfinir « icônes » au lieu d'ajouter un mode « petites » : le mode est retenu dans le cookie cizi_affichage. Un nouveau mode n'aurait rien changé pour qui a déjà choisi « icônes » — c'est-à-dire pour toi. En redéfinissant la case existante, la réduction s'applique tout de suite, et l'ancien réglage reste accessible sous son nouveau nom. L'écart entre icônes est aussi resserré dans ce mode : à 22 px il pesait plus lourd que les icônes elles-mêmes une fois celles-ci réduites. */ @media (orientation: landscape){ .icons.mode-icones{ max-width:860px; margin-left:auto; margin-right:auto; gap:14px; } .icons.mode-icones a{ flex-basis:calc(16.666% - 14px); max-width:calc(16.666% - 14px); } } @media (orientation: portrait){ .icons.mode-icones{ gap:14px; } .icons.mode-icones a{ flex-basis:calc(25% - 14px); max-width:calc(25% - 14px); } } /* — mode moyennes : l'ancien mode « icônes », 4 colonnes paysage, 3 portrait — */ @media (orientation: landscape){ .icons.mode-moyennes{ max-width:700px; margin-left:auto; margin-right:auto; } .icons.mode-moyennes a{ flex-basis:calc(25% - 22px); max-width:calc(25% - 22px); } } @media (orientation: portrait){ .icons.mode-moyennes a{ flex-basis:calc(33.333% - 22px); max-width:calc(33.333% - 22px); } } /* — mode grosses icônes : 3 colonnes quel que soit le mode — */ .icons.mode-grosses a{ flex-basis:calc(33.333% - 22px); max-width:calc(33.333% - 22px); } /* — modes liste et détail : rangées horizontales — */ .icons.mode-liste, .icons.mode-detail{ flex-direction:column; align-items:stretch; gap:6px; max-width:720px; margin-left:auto; margin-right:auto; } .icons.mode-liste a, .icons.mode-detail a{ flex-basis:auto; max-width:none; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; padding:6px 10px; border-radius:8px; } .icons.mode-liste a:hover, .icons.mode-detail a:hover{ transform:none; background:rgba(255,255,255,.08); } .icons.mode-liste a img, .icons.mode-detail a img{ width:28px; height:28px; object-fit:contain; } .icons.mode-liste a .lbl, .icons.mode-detail a .lbl{ position:static; text-align:left; font-size:17px; -webkit-text-stroke:0; text-shadow:0 1px 3px rgba(0,0,0,.6); } /* détail : colonne adresse (zéro php, attr(href)) */ .icons.mode-detail a::after{ content:attr(href); margin-left:auto; padding-left:14px; font-family:var(--icon-font); font-size:12px; color:#fff; opacity:.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:55%; } /* ═══ badge-externe-marker — pictogramme lien externe, groupe externes (14/07) ═══ */ .icons.icons-externes a::before{ content:""; position:absolute; top:5%; right:5%; width:16%; min-width:16px; max-width:30px; aspect-ratio:1; background:url('data:image/svg+xml;utf8,') center/contain no-repeat; filter:drop-shadow(0 1px 2px rgba(0,0,0,.8)); pointer-events:none; } /* en liste/détail : le badge quitte l'overlay et se range en bout de ligne */ .icons.mode-liste.icons-externes a::before, .icons.mode-detail.icons-externes a::before{ position:static; order:9; margin-left:6px; width:16px; min-width:16px; } .icons.mode-detail.icons-externes a::before{ margin-left:12px; } .icons.mode-detail.icons-externes a::after{ margin-left:auto; } /* ═══ nom-integre-marker (12/09/2026) — tuiles dont l'image porte déjà le nom ═══ Les vignettes des jeux (/jeux-data/vignettes/*.svg) dessinent le nom du jeu dans l'image, avec leur propre contour. En mode icônes, le libellé .lbl s'y superposait : le nom apparaissait deux fois, à deux hauteurs. On masque donc .lbl sur ces tuiles-là — mais SEULEMENT dans les modes où l'image est grande. En liste et en détail, l'image tombe à 28 px : le nom qu'elle contient devient illisible, et c'est .lbl qui fait le texte de la ligne. Il doit y revenir. Poser la classe `nom-integre` sur le suffit à en profiter ailleurs. */ .icons a.nom-integre .lbl { display: none; } .icons.mode-liste a.nom-integre .lbl, .icons.mode-detail a.nom-integre .lbl { display: inline; } /* ═══ icons-jeux-marker (12/09/2026) — libellés de la grille des jeux ═══ Les libellés de l'accueil sont taillés pour des mots courts : « Vision », « Sono », « Cartes ». Leur corps suit la largeur de la tuile (clamp(16px, 24cqw, 39px)) et ne revient jamais à la ligne. Les noms de jeux, eux, font trois ou quatre mots — « The Fancy Pants Adventure 2 » — et débordaient largement de la tuile, jusqu'à recouvrir la voisine (constaté au banc d'essai avec des noms longs). On ne touche donc pas au réglage de l'accueil : cette règle ne vaut que pour la grille des jeux, où le libellé revient à la ligne et où le corps est plafonné à 20 px. */ .icons-jeux a .lbl { white-space: normal; line-height: 1.05; font-size: clamp(11px, 13cqw, 20px); bottom: 4%; } /* En liste et en détail, la tuile n'a plus de largeur de conteneur à suivre : le libellé redevient le texte de la ligne, taille fixe. */ .icons-jeux.mode-liste a .lbl, .icons-jeux.mode-detail a .lbl { font-size: 17px; } /* ═══ jeux-detail-genre (12/09/2026) — colonne de droite du mode détail ═══ Le mode détail affiche l'adresse du lien en bout de ligne (content:attr(href), règle plus haut). Sur l'accueil c'est utile : les liens mènent ailleurs. Dans la grille des jeux, toutes les lignes diraient « /jeux/?j=… », ce qui n'apprend rien. On y met le genre à la place, quand il est connu ; sinon la colonne reste vide plutôt que de répéter une adresse inutile. */ .icons-jeux.mode-detail a::after { content: attr(data-genre); } /* ═══ outils-calques-marker (13/09/2026) — BUG 20260913-123701 ═══ « le système d'icône et de présentation doit être calqué de la page d'accueil cizi à jeux. Ainsi qu'à outils » Les outils ne peuvent pas devenir des icônes : chacun est un instrument avec son champ, son bouton et son résultat — une icône ne saurait rien en faire. Ce qui se calque, c'est la BARRE DES MODES et le rythme de la grille : le même réglage qui resserre ou élargit les icônes de l'accueil resserre ou élargit les panneaux d'outils, et « liste » les met en une seule colonne. La barre est le même gabarit des deux côtés (gabarits/affichage-modes.php). */ .tools-grid.mode-icones { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .tools-grid.mode-moyennes { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .tools-grid.mode-grosses { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); } .tools-grid.mode-liste, .tools-grid.mode-detail { grid-template-columns: 1fr; }