881 px = 2,7 ecrans
/wiki/objets 648 px = 2,0 ecrans
/wiki/monstres 582 px
/classement/metiers 539 px
/classement/guildes 538 px
Faire defiler onze colonnes a l'aveugle, sans en-tete visible
une fois qu'on a quitte la premiere colonne, n'est pas une
lecture : c'est une devinette. On empile donc chaque ligne en
carte, et chaque cellule porte son libelle a gauche.
MARQUAGE ATTENDU
...
et sur chaque un attribut `data-l="Niveau"`.
Un `data-l` vide (ou absent) = cellule pleine largeur, sans
libelle : c'est le cas de la cellule d'identite (nom + icone)
et des cellules de pastilles.
ACCESSIBILITE — POINT IMPORTANT
Changer `display` sur un tableau lui fait PERDRE ses roles
implicites (table / row / cell) dans les trois moteurs. Les
vues concernees portent donc des `role=` explicites, qui les
lui rendent. Sans eux, la mise en cartes gagnerait a l'oeil
ce qu'elle ferait perdre au lecteur d'ecran.
=========================================================== */
@media (max-width: 560px){
/* Le cadre passe de la table a chaque ligne. */
.tw.cartes{
overflow-x: visible;
border: 0;
background: none;
box-shadow: none;
border-radius: 0;
}
.tw.cartes table{ display: block; width: 100%; font-size: .95rem; }
.tw.cartes tbody{ display: block; }
/* L'en-tete est retire, pas seulement masque : chaque cellule
porte desormais son propre libelle via td::before, et le
contenu genere par CSS est bien restitue par les lecteurs. Le
garder "visuellement masque" ferait annoncer le libelle deux fois
— une fois par l'en-tete de colonne, une fois par la cellule — et
laisserait une rangee de 800 px de large hors du cadre. */
.tw.cartes thead{ display: none; }
.tw.cartes tbody tr{
display: block;
position: relative;
margin-bottom: 10px;
padding: 13px 15px;
background: linear-gradient(180deg, #1c1d19, var(--surface) 60%);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow), var(--lip);
}
.tw.cartes tbody tr:last-child{ margin-bottom: 0; }
/* Le survol d'une ligne de tableau (fond + liseré a gauche) n'a
plus de sens sur une carte tactile. */
.tw.cartes tbody tr:hover{
background: linear-gradient(180deg, #1c1d19, var(--surface) 60%);
box-shadow: var(--shadow), var(--lip);
}
/* La ligne « c'est moi » garde sa mise en lumiere, en bordure. */
.tw.cartes tbody tr.me{
border-color: var(--gold-3);
box-shadow: var(--shadow), var(--lip), 0 0 30px -18px rgba(226,207,156,.9);
}
/* Une cellule = une ligne « libelle .......... valeur ».
`flex-wrap:wrap` est un filet de securite, pas une mise en page : une
cellule qui contiendrait plusieurs balises inline (une liste
d ingredients, deux pastilles) les verrait sinon alignees sur UNE
rangee que rien ne replie — 863 px de large sur la fiche d un metier
avant correction. Le cas normal (un libelle, une valeur) tient sur une
ligne et ne voit pas la difference. */
.tw.cartes tbody td{
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 16px;
padding: 4px 0;
border: 0;
text-align: right;
white-space: normal;
min-width: 0;
}
.tw.cartes tbody td::before{
content: attr(data-l);
flex: 0 1 auto;
text-align: left;
font-family: var(--f-mono);
font-size: .72rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--tx-3);
font-weight: 500;
}
/* Cellule sans libelle : pleine largeur, alignee a gauche.
C'est la cellule d'identite d'une carte — le nom, l'icone,
les pastilles — qui en fait le titre. */
.tw.cartes tbody td[data-l=""],
.tw.cartes tbody td:not([data-l]){
display: block;
text-align: left;
padding: 0 0 8px;
}
.tw.cartes tbody td[data-l=""]::before,
.tw.cartes tbody td:not([data-l])::before{ content: none; }
/* Un separateur discret entre le titre de la carte et ses
donnees, seulement s'il y a bien un titre au-dessus. */
.tw.cartes tbody td[data-l=""] + td[data-l]:not([data-l=""]),
.tw.cartes tbody td:not([data-l]) + td[data-l]:not([data-l=""]){
border-top: 1px solid var(--rule);
margin-top: 2px;
padding-top: 9px;
}
/* Une cellule vide (pastille absente : pas de boss, pas de
panoplie) ne doit pas laisser une ligne fantome. */
.tw.cartes tbody td:empty{ display: none; }
/* Les valeurs numeriques restent en chiffres tabulaires mais
n'ont plus a etre insecables : la carte leur laisse la place. */
.tw.cartes tbody td.num{ white-space: normal; }
/* Une suite de liens regroupee (les ingredients d'une recette) :
elle prend la largeur restante et se replie a l'interieur. */
.tw.cartes tbody td .liste-inline{ flex: 1 1 100%; text-align: right; }
/* Barre de progression (niveau, ratio). Dans une ligne
« libelle ... valeur », la barre serait un TROISIEME element
reparti par space-between : le nombre se retrouverait au
milieu de nulle part. On la renvoie sur sa propre ligne, sous
la paire libelle/valeur, ou elle prend toute la largeur. */
.tw.cartes tbody td.lvl,
.tw.cartes tbody td.ratio{ flex-wrap: wrap; }
.tw.cartes tbody td.lvl .bar,
.tw.cartes tbody td.ratio .bar{ flex: 1 0 100%; margin-top: 7px; }
.tw.cartes tbody td .lvl-n,
.tw.cartes tbody td .ratio-n{ margin-bottom: 0; }
/* ---- Variante « texte » : des valeurs en phrases ----
Le tableau des donnees collectees de /mentions ne contient pas des
nombres mais des paragraphes. Alignes a droite dans une ligne
« libelle ... valeur », ils forment un pave en drapeau inverse,
penible a lire. Le libelle passe donc au-dessus, et le texte
reprend un alignement a gauche sur toute la largeur. */
.tw.cartes.texte tbody td{
display: block;
text-align: left;
padding: 8px 0 0;
}
.tw.cartes.texte tbody td::before{
display: block;
margin-bottom: 3px;
}
/* ---- Variante « matrice » : beaucoup de colonnes courtes ----
Les caracteristiques d'un grade de monstre (PV, PA, PM, cinq
resistances, deux esquives) ou d'un palier de sort tiennent en
deux colonnes de paires libelle/valeur : la carte fait alors
six lignes au lieu de treize. */
.tw.cartes.matrice tbody tr{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
gap: 0 14px;
}
.tw.cartes.matrice tbody td{ padding: 4px 0; }
.tw.cartes.matrice tbody td[data-l=""],
.tw.cartes.matrice tbody td:not([data-l]){ grid-column: 1 / -1; }
.tw.cartes.matrice tbody td::before{ font-size: .68rem; letter-spacing: .06em; }
/* ---- Classement : le rang devient une pastille de coin ----
Dans un tableau le rang est une colonne ; dans une carte c'est
une decoration du titre. On le sort du flux pour qu'il ne
consomme pas une ligne entiere. */
.tw.cartes tbody td.rank{
position: absolute;
top: 10px; right: 13px;
width: auto;
padding: 0;
display: block;
text-align: right;
font-size: 1.15rem;
}
.tw.cartes tbody td.rank::before{ content: none; }
/* La cellule d'identite laisse la place a la pastille de rang. */
.tw.cartes tbody td.rank + td{ padding-right: 46px; }
/* Identite d'un joueur : l'avatar et le nom sur une ligne, la
classe et la guilde dessous — comme dans le tableau, mais la
colonne ne bride plus la largeur du nom. */
.tw.cartes .breed{ display: flex; align-items: center; gap: 10px; }
.tw.cartes .breed .who{ min-width: 0; }
.tw.cartes .breed .pname{ font-size: 1.02rem; }
.tw.cartes .breed .gname{ max-width: none; }
/* Nom + vignette d'un objet ou d'un monstre : meme logique. */
.tw.cartes .wk-nom a{ font-size: 1.02rem; }
/* Les taux de butin par grade forment leur propre grille : ils
ne s'alignent pas a droite comme un nombre. */
.tw.cartes tbody td .wk-rates{ justify-content: flex-end; }
}
/* ===========================================================
3. TAILLES DE TEXTE
-----------------------------------------------------------
Un texte sous 14 px se lit mal sur un telephone tenu a bout de
bras. On remonte ici les libelles de contenu qui descendaient
a 11–13 px, sans toucher a ceux qui sont deliberement
minuscules et decoratifs (surtitres `.eyebrow`, empreinte
SHA-256 : ce sont des etiquettes, pas de la lecture).
Les valeurs sont donnees en `rem` pour rester indexees sur le
reglage de taille de police du systeme : un visiteur qui a
agrandi le texte de son telephone garde son agrandissement.
=========================================================== */
@media (max-width: 760px){
/* --- wiki --- */
.wk-count{ font-size: .95rem; } /* 13,6 -> 15,2 px */
.wk-card p{ font-size: .95rem; }
.wk-card .n{ font-size: .82rem; } /* 12,0 -> 13,1 px */
.wk-specs .k{ font-size: .76rem; } /* 10,9 -> 12,2 px */
.wk-specs .v{ font-size: 1rem; }
.wk-tier h3, .wk-tier h4{ font-size: .8rem; } /* 11,5 -> 12,8 px */
.wk-rates b{ font-size: .84rem; } /* 11,8 -> 13,4 px */
.wk-effects li{ font-size: 1rem; }
.wk-range span{ font-size: .9rem; }
/* --- classement --- */
.breed .gname{ font-size: .84rem; } /* 11,8 -> 13,4 px */
.lf-count{ font-size: .88rem; } /* 12,5 -> 14,1 px */
.ladder-foot{ font-size: .88rem; }
.pager-note{ font-size: .88rem; }
.ratio-n{ font-size: .92rem; }
/* --- champs de formulaire ---
Sous 16 px, iOS zoome automatiquement sur le champ actif et
laisse la page decalee : 16 px pile evite ce saut. */
input[type=text], input[type=search], input[type=email],
input[type=password], input[type=number], select, textarea{
font-size: 16px;
}
/* L'aide sous un champ doit rester lisible : c'est souvent la
qu'est ecrit le format attendu. */
.field .hint{ font-size: .88rem; }
label, .field label{ font-size: .95rem; }
}
/* ===========================================================
4. TITRES ET EN-TETES DE PAGE
-----------------------------------------------------------
Le h1 est fixe par app.css a `clamp(2rem, 4.5vw, 3.1rem)` : sur
un telephone il reste donc a son plancher de 32 px, quelle que
soit la longueur du titre. « DOFORIA — l'endroit ou l'on se
sent le mieux » occupe alors cinq lignes sur 328 px utiles.
On desserre le plancher sous 420 px seulement.
=========================================================== */
@media (max-width: 420px){
h1{ font-size: 1.72rem; } /* 32 -> 27,5 px */
h2{ font-size: 1.32rem; }
}
@media (max-width: 560px){
/* Un fil d'Ariane (« Encyclopedie · Objets ») et un titre de
fiche ne se serrent plus l'un contre l'autre. */
.sec-title{ gap: 10px; }
/* La vignette d'en-tete d'une fiche wiki et son titre : le titre
doit pouvoir passer sous la vignette plutot que se comprimer
en colonne de trois lettres. */
.wk-entete{ flex-wrap: wrap; }
/* Sur une fiche, les listes en deux colonnes sont deja ramenees
a une colonne par wiki.css (700 px) ; on aligne ici les
grilles de caracteristiques, trop etroites a deux colonnes. */
.wk-specs{ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}
/* ===========================================================
5. NIVEAUX DE TITRE — SANS MEDIA QUERY
-----------------------------------------------------------
Seule section du fichier qui s'applique AUSSI sur ordinateur,
et elle ne fait que de la mise en forme : c'est la contrepartie
d'une correction de balisage.
Le probleme : sur la plupart des pages, l'en-tete d'une carte
etait un alors qu'aucun ne le precedait. Un lecteur
d'ecran annonce les niveaux de titre, et sa liste de titres —
le moyen le plus rapide de parcourir une page sans la voir —
affichait donc un trou : « titre 1, puis titre 3 ». Les moteurs
de recherche lisent la meme structure.
La correction est dans les vues : ces sont devenus des
. Mais app.css donne au la taille d'un titre de
section (jusqu'a 2,05 rem) : un en-tete de carte aurait double
de taille. On lui rend donc ici sa taille d'origine — celle du
— SANS toucher aux de `.sec-title`, qui sont de vrais
titres de section et gardent leur echelle.
Effet de bord assume : les deux qui vivaient deja dans un
`.card-head` (« Configuration requise » sur /telecharger,
« serveur-prive.net » sur /vote) passent eux aussi a 1,18 rem.
Ils s'alignent ainsi sur tous les autres en-tetes de carte du
site, ce qui etait de toute facon l'intention visuelle.
=========================================================== */
.card > .card-head h2,
.card-head h2,
.card > .card-pad h2,
.wk-card h2,
article.card h2{
font-size: 1.18rem;
line-height: 1.14;
}
/* Les sous-titres passes de a (paliers de panoplie,
« Objectifs » / « Recompenses » d une quete, « Coup critique »
d un sort) gardent leur apparence : ceux qui portaient un style
en ligne dans la vue l ont conserve, et le palier de panoplie
est desormais vise par « .wk-tier h3, .wk-tier h4 » dans
wiki.css. Rien a rattraper ici. */
|