, | , |
et dans TOUT contenu enrichi. N'importe quel site Artaweb peut
donc produire un tableau depuis un module Texte — et jusqu'ici il sortait
sans bordure ni marge. Ce n'était pas un besoin d'un site en particulier,
c'était un trou du cœur.
CE QUI EST VISÉ, ET CE QUI NE L'EST PAS
`table:not([class])` ne touche QUE les tableaux écrits dans du contenu, qui
n'ont jamais de classe. Les tableaux du CMS portent la leur et gardent leur
habillage : .events-cal__table (calendrier) et .admin-table (back-office,
qui vit de toute façon dans admin.css, jamais chargée ici). `.block-table`
est réservée au futur module « Tableau » : il héritera de tout ceci sans
qu'une ligne soit à réécrire.
TOUT VIENT DE LA CHARTE
Aucune couleur en dur : la teinte des lignes paires alterne --color-bg et
--color-surface, deux jetons qui diffèrent légèrement dans les deux thèmes.
Le tableau suit donc la palette du client et bascule seul en mode sombre,
sans une seule règle @media prefers-color-scheme.
DÉBORDEMENT SANS CONTENEUR
Un tableau écrit dans le WYSIWYG n'a pas de div autour de lui : il doit donc
savoir déborder tout seul. `display: block` + `overflow-x: auto` sur le
lui-même le rend défilant sans casser la mise en page interne des
lignes. C'est le corps de la page qui ne doit JAMAIS défiler latéralement.
---------------------------------------------------------------------- */
.block-table,
table:not([class]) {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
width: 100%;
border-collapse: collapse;
margin: var(--space-lg) 0;
font-size: 0.95rem;
line-height: 1.45;
}
.block-table caption,
table:not([class]) caption {
caption-side: top;
text-align: left;
font-family: var(--font-heading);
font-weight: 600;
color: var(--color-heading);
padding: 0 0 var(--space-sm);
}
.block-table th,
.block-table td,
table:not([class]) th,
table:not([class]) td {
padding: 0.7rem var(--space-md);
text-align: left;
vertical-align: top;
border: 0;
}
/* En-tête de COLONNE — discret, en capitales, posé sur un filet net. */
.block-table thead th,
table:not([class]) thead th {
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--color-muted);
white-space: nowrap;
border-bottom: 2px solid var(--color-border);
background: var(--color-bg);
}
/* Zébrures — la « légère teinte » : deux jetons de la charte qui ne diffèrent
que d'un souffle, en clair comme en sombre. Pas de filet entre les lignes :
l'alternance suffit à guider l'œil, et la page reste épurée. */
.block-table tbody tr:nth-child(odd),
table:not([class]) tbody tr:nth-child(odd) { background: var(--color-bg); }
.block-table tbody tr:nth-child(even),
table:not([class]) tbody tr:nth-child(even) { background: var(--color-surface); }
/* En-tête de LIGNE — première colonne. Un peu plus affirmée que les cellules,
sans crier. Collée à gauche pour rester lisible pendant le défilement
horizontal : sans elle, on ne sait plus de quelle ligne on lit la valeur. */
.block-table th[scope="row"],
table:not([class]) th[scope="row"] {
font-weight: 600;
color: var(--color-heading);
position: sticky;
left: 0;
background: inherit;
min-width: 12rem;
}
/* Pied de tableau : un filet qui referme, rien de plus. */
.block-table tfoot td,
.block-table tfoot th,
table:not([class]) tfoot td,
table:not([class]) tfoot th {
border-top: 2px solid var(--color-border);
font-weight: 600;
}
@media (max-width: 40rem) {
.block-table,
table:not([class]) { font-size: 0.88rem; }
.block-table th,
.block-table td,
table:not([class]) th,
table:not([class]) td { padding: 0.6rem 0.7rem; }
.block-table th[scope="row"],
table:not([class]) th[scope="row"] { min-width: 10rem; }
}
/* ============================================================================
BOUTON « HAUT DE PAGE »
Réglé dans l'admin (Réglages → Navigation), affiché par défaut.
POURQUOI IL NE MASQUE PAS LE PIED DE PAGE
Un bouton simplement collé en bas à droite recouvre le pied dès qu'on
l'atteint — c'est-à-dire exactement au moment où l'on descend y lire une
adresse ou cliquer un lien. `js/back-to-top.js` mesure la part visible du
pied et la reporte dans `--btt-offset` : le bouton remonte au-dessus au
lieu de passer par-dessus.
========================================================================== */
.back-to-top {
position: fixed;
right: 1.25rem;
bottom: calc(1.25rem + var(--btt-offset, 0px));
z-index: 95; /* sous l'en-tête collant (100) et le bandeau cookies (1000) */
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-heading);
box-shadow: var(--shadow-md);
cursor: pointer;
/* Absent du flux tant qu'on n'a pas défilé : `visibility` retire aussi le
bouton de l'ordre de tabulation, ce qu'une simple opacité ne fait pas. */
opacity: 0;
visibility: hidden;
transform: translateY(0.5rem);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus-visible {
background: var(--color-accent);
color: var(--color-bg);
border-color: var(--color-accent);
}
.back-to-top svg { width: 1.15rem; height: 1.15rem; display: block; }
@media (max-width: 640px) {
.back-to-top { right: .85rem; bottom: calc(.85rem + var(--btt-offset, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
.back-to-top { transition: opacity .2s ease, visibility .2s; transform: none; }
.back-to-top.is-visible { transform: none; }
}
|