/* ==========================================================================
ARTAWEB — Administration · admin-aide.css
--------------------------------------------------------------------------
Aide : page dédiée, encadrés, bouton « ? » et sa bulle, panneau latéral.
CE FICHIER EST UNE PART D'UN TOUT. `admin.css` faisait 8 026 lignes et
274 Ko : impossible à parcourir, impossible à situer. Il a été DÉCOUPÉ le
2026-09-09 — découpé, pas réécrit : la concaténation des cinq parts, dans
l'ordre où adminStylesheetLinks() les charge, redonne l'original CARACTÈRE
POUR CARACTÈRE. L'audit le demandait dans ces termes : « le découper, oui ;
le réécrire, non — le risque dépasse largement le gain ».
L'ORDRE COMPTE. Ces feuilles se surchargent l'une l'autre ; les charger
dans un autre ordre change le rendu. Elles sont donc listées en UN seul
endroit : adminStylesheetLinks(), dans includes/admin-assets.php.
========================================================================== */
/* =========================================================================
AIDE — page /admin/help.php + encadrés contextuels helpHint()
========================================================================= */
/* Badge « redirige vers la 1re sous-page » dans la liste des pages. */
.admin-badge--redirect {
display: inline-flex;
align-items: center;
gap: 4px;
}
.admin-badge--redirect .lt-icon { width: 13px; height: 13px; }
/* =========================================================================
AIDE — page help.php, panneau latéral, exergues, infobulles
Le rendu vient de admin/includes/help-render.php ; le texte, lui, vit
uniquement dans admin/includes/help-content.php.
========================================================================= */
/* --- Page d'aide : intro & recherche ------------------------------------- */
/* Paragraphe d'ouverture de la page d'aide. Il portait la classe
`admin-form__hint` (11,5 px, la taille des notes sous un champ) : à cette
taille, la mesure ne faisait que ~493 px et le texte semblait étriqué.
À la taille du corps, la MÊME mesure donne ~578 px — plus large ET plus
lisible, sans changer le nombre de caractères par ligne. */
.admin-help__intro {
max-width: var(--ad-measure);
margin: 0 0 var(--ad-space-4);
color: var(--ad-text-soft);
font-size: var(--ad-fs-md);
line-height: 1.6;
}
.admin-help__search { position: relative; max-width: 480px; margin-bottom: var(--ad-space-3); }
.admin-help__search .admin-form__input { padding-left: 38px; padding-right: 38px; }
/* La croix native de ferait doublon avec la nôtre. */
.admin-help__search .admin-form__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.admin-help__search-icon {
position: absolute;
top: 50%;
left: 12px;
display: inline-flex;
color: var(--ad-text-mute);
transform: translateY(-50%);
pointer-events: none;
}
.admin-help__search-clear {
position: absolute;
top: 50%;
right: 8px;
display: inline-flex;
padding: 4px;
background: none;
border: 0;
border-radius: var(--ad-r-xs);
color: var(--ad-text-mute);
cursor: pointer;
transform: translateY(-50%);
}
.admin-help__search-clear:hover { color: var(--ad-text); background: var(--ad-bg-sunk); }
.admin-help__search-empty {
margin: 0 0 var(--ad-space-4);
color: var(--ad-text-mute);
font-size: var(--ad-fs-sm);
}
/* --- Page d'aide : sommaire groupé par familles -------------------------- */
.admin-help__toc { margin-bottom: var(--ad-space-6); }
.admin-help__toc-group + .admin-help__toc-group { margin-top: var(--ad-space-5); }
/* Préfixé `body.admin-body` à dessein : cette étiquette est posée sur un titre,
et la remise à zéro des titres (`body.admin-body h1…h6 { letter-spacing: 0 }`)
l'emporterait sinon en spécificité — l'interlettrage serait perdu en silence. */
body.admin-body .admin-help__toc-group-title {
margin: 0 0 var(--ad-space-2);
color: var(--ad-text-mute);
font-size: var(--ad-fs-label);
font-weight: var(--ad-fw-label);
text-transform: uppercase;
letter-spacing: var(--ad-ls-label);
}
.admin-help__toc-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--ad-space-2);
margin: 0;
padding: 0;
list-style: none;
}
.admin-help__toc-link {
display: flex;
align-items: flex-start;
gap: var(--ad-space-2);
height: 100%;
padding: 10px var(--ad-space-3);
background: var(--ad-bg);
border: 1px solid var(--ad-border);
border-radius: var(--ad-r-sm);
color: var(--ad-text);
font-size: var(--ad-fs-sm);
font-weight: 500;
text-decoration: none;
transition: border-color .12s, background .12s;
}
.admin-help__toc-link:hover {
border-color: var(--ad-accent);
background: var(--ad-accent-sf);
}
.admin-help__toc-icon {
display: inline-flex;
flex: 0 0 auto;
margin-top: 1px;
color: var(--ad-accent);
}
.admin-help__toc-label { min-width: 0; }
.admin-help__toc-sub {
display: block;
margin-top: 2px;
color: var(--ad-text-mute);
font-size: var(--ad-fs-xs);
font-weight: 400;
line-height: 1.4;
}
/* --- Page d'aide : grille de lecture + rail des rubriques -----------------
POURQUOI une grille, et pas un `position: fixed`.
Deux variables INDÉPENDANTES déplacent le bord droit de la colonne de texte,
et un `right:` figé n'en suit aucune :
1. `.admin-content` a `max-width: 1440px` SANS `margin: 0 auto` — elle est
calée à gauche, donc au-delà de ~1676 px de fenêtre la gouttière droite
grandit et un rail `fixed` s'en va tout seul vers le bord de l'écran ;
2. `--ad-sidebar-w` bascule de 236 px à 66 px dès qu'on replie le menu
(état persisté, appliqué avant peinture) — le rail sauterait de 170 px.
Les compenser demanderait de mesurer en JS et de recalculer au `resize` ET
au repli : une classe de bugs entière, pour un problème que la mise en page
résout gratuitement.
Surtout : une piste de grille garantit PAR CONSTRUCTION que le rail ne
recouvre jamais le texte — pas par un calcul qu'il faudrait maintenir juste.
Même patron que `.design-layout` (Charte) ; ce qui change ici, c'est que la
grille n'enveloppe qu'une TRANCHE de l'écran et non l'écran entier, pour
laisser au sommaire en tuiles sa pleine largeur.
------------------------------------------------------------------------ */
.admin-help__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
gap: var(--ad-space-5);
/* Sans `start`, la piste du rail s'étire sur toute la hauteur de la grille
et `position: sticky` n'a plus de course : le rail ne colle plus. */
align-items: start;
}
.admin-help__col { min-width: 0; }
.admin-help__rail {
position: sticky;
/* MÊME valeur que le `scroll-margin-top` des rubriques (ci-dessous) : le
rail se cale exactement sur la ligne où une rubrique vient s'arrêter
après un clic. Deux valeurs différentes ici et là-bas, et l'entrée
surlignée serait systématiquement la précédente. */
top: calc(var(--ad-header-h) + var(--ad-space-4));
max-height: calc(100vh - var(--ad-header-h) - var(--ad-space-5) * 2);
overflow-y: auto;
/* Le rail arrivé en butée ne doit pas entraîner la page derrière lui. */
overscroll-behavior: contain;
/* Ni cadre ni fond, à dessein : quand la recherche masque toutes les
familles, le rail devient invisible SANS qu'aucun code n'ait à le
masquer — la recherche ne connaît que les groupes et les
. */
opacity: 0;
/* `visibility` en plus de l'opacité : un rail à opacité nulle resterait
cliquable et présent dans l'ordre de tabulation. Le délai sur
`visibility` lui laisse le temps du fondu. */
visibility: hidden;
transition: opacity .18s ease, visibility 0s linear .18s;
}
/* Posée par js/admin-help.js dès que la 1re rubrique atteint la ligne de
détection. Plus haut, le sommaire en tuiles fait déjà le travail : le rail
y ferait doublon. */
.admin-help__rail.is-visible {
opacity: 1;
visibility: visible;
transition: opacity .18s ease;
}
.admin-help__rail-group + .admin-help__rail-group { margin-top: var(--ad-space-4); }
/* Préfixé `body.admin-body` : sans cela la remise à zéro des titres
(`body.admin-body h1…h6`, spécificité 0-1-2) l'emporterait sur la simple
classe (0-1-0), et marge comme interlettrage seraient perdus en silence.
Même parade que .admin-help__toc-group-title. */
body.admin-body .admin-help__rail-group-title {
margin: 0 0 var(--ad-space-1);
color: var(--ad-text-mute);
font-size: var(--ad-fs-label);
font-weight: var(--ad-fw-label);
text-transform: uppercase;
letter-spacing: var(--ad-ls-label);
}
.admin-help__rail-list { margin: 0; padding: 0; list-style: none; }
.admin-help__rail-link {
display: flex;
align-items: flex-start;
gap: var(--ad-space-2);
padding: 5px var(--ad-space-2);
/* Liseré réservé dès l'état neutre : passer à l'état actif ne décale rien. */
border-left: 2px solid transparent;
border-radius: 0 var(--ad-r-xs) var(--ad-r-xs) 0;
color: var(--ad-text-soft);
font-size: var(--ad-fs-sm);
line-height: 1.35;
text-decoration: none;
}
.admin-help__rail-link:hover {
background: var(--ad-bg-alt);
color: var(--ad-text);
}
.admin-help__rail-link:focus-visible {
outline: 2px solid var(--ad-accent); outline-offset: 2px;
box-shadow: 0 0 0 3px var(--ad-focus);
}
.admin-help__rail-icon { flex: 0 0 auto; margin-top: 1px; color: var(--ad-text-mute); }
.admin-help__rail-icon .lt-icon { width: 15px; height: 15px; }
.admin-help__rail-label { min-width: 0; }
/* L'entrée courante. Le liseré porte l'information à lui seul : elle reste
lisible en niveaux de gris et pour un daltonien — le fond doux et la graisse
ne font que la renforcer. */
.admin-help__rail-link.is-active {
border-left-color: var(--ad-accent);
background: var(--ad-accent-sf);
color: var(--ad-text);
font-weight: 600;
}
.admin-help__rail-link.is-active .admin-help__rail-icon { color: var(--ad-accent); }
/* Seuil CALCULÉ, pas choisi au jugé. La chaîne de largeurs fixes vaut
236 (menu) + 72 (marges du contenu) + 240 (rail) + 24 (gouttière) + 72
(marges de la carte) = 644 px. Pour que le texte garde sa mesure de 68ch
(≈ 578 px), il faut donc 1222 px de fenêtre — vérifié : à 1210 px il tombait
à 548 px. La coupure est posée à 1240 px, la première valeur ronde au-dessus,
qui laisse aussi le rail aux écrans de 1280 px (portables courants).
En dessous, le rail cède la place ; le sommaire en tuiles, lui, reste en
haut de page. `display: none` le retire aussi du parcours clavier et de
l'arbre d'accessibilité, ce qu'un simple masquage visuel ne ferait pas. */
@media (max-width: 1240px) {
.admin-help__layout { display: block; }
.admin-help__rail { display: none; }
}
/* --- Un sujet ------------------------------------------------------------ */
.admin-help__topic { margin-bottom: 32px; } /* deux fiches voisines se distinguent (16 px jusqu'au 2026-10-22) */
/* L'en-tête de l'admin est sticky : sans cette marge, les ancres
atterriraient DERRIÈRE la barre de titre. */
.admin-help__topic,
.admin-help__sec { scroll-margin-top: calc(var(--ad-header-h) + var(--ad-space-4)); }
.admin-help__topic-title {
display: flex;
align-items: center;
gap: var(--ad-space-2);
}
.admin-help__topic-icon { display: inline-flex; color: var(--ad-accent); }
.admin-help__topic-intro {
max-width: var(--ad-measure);
/* Marge basse 16 px, et non 0. Sur la PAGE elle ne change rien : elle
fusionne (marges adjacentes) avec les 16 px de `.admin-help__sec`.
Dans le VOLET cette marge-là est annulée (cf. .help-drawer__body
.admin-help__sec:first-of-type) — l'intro et le premier titre de fiche
s'y touchaient donc à 0 px. */
margin: var(--ad-space-3) 0 var(--ad-space-4);
color: var(--ad-text-soft);
line-height: 1.6;
}
/* DEUX THÈMES VOISINS SE SÉPARENT NETTEMENT (2026-10-22, demande de Patrick) : le même
rythme qu'entre deux groupes de réglages — de l'air, un filet, de l'air (16 + 16 px
jusque-là, les thèmes se lisaient d'un seul tenant). */
.admin-help__sec {
margin-top: var(--ad-rythme-groupe);
padding-top: 28px;
border-top: 1px solid var(--ad-border);
}
.admin-help__topic--drawer .admin-help__sec:first-of-type {
border-top: 0;
padding-top: 0;
}
/* Préfixé `body.admin-body` — ce n'est PAS décoratif. La remise à zéro des
titres (`body.admin-body h1…h6 { margin: 0 }`, spécificité 0-1-2) battait la
simple classe (0-1-0) : cette marge basse ne s'est JAMAIS appliquée, et
l'écart sous un titre de fiche valait 0 px, page comme volet — d'où
l'impression de texte tassé. Même piège, même parade que
.admin-help__toc-group-title. */
body.admin-body .admin-help__sec-title {
/* 18 px et le trait d'accent des intertitres de groupe (2026-10-22) : à 15 px, la
taille du texte, le titre d'un thème se lisait comme la première ligne de son
paragraphe. */
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 var(--ad-space-4);
color: var(--ad-text);
font-size: 18px;
font-weight: 650;
line-height: 1.3;
}
body.admin-body .admin-help__sec-title::before {
content: "";
flex: none;
width: 4px;
height: 1.05em;
border-radius: 2px;
background: var(--ad-accent);
}
.admin-help__sec.is-target { animation: help-flash 1.4s ease; }
@keyframes help-flash {
0%, 60% { background: var(--ad-accent-sf); box-shadow: 0 0 0 8px var(--ad-accent-sf); }
100% { background: transparent; box-shadow: 0 0 0 8px transparent; }
}
/* --- Corps d'une fiche --------------------------------------------------- */
.admin-help__body {
/* C'est ICI que se fait la lecture suivie (100 fiches) : sans mesure, les
paragraphes s'étalaient sur toute la largeur de l'écran, bien au-delà de
ce que l'intro — trois lignes — était seule à respecter. */
max-width: var(--ad-measure);
color: var(--ad-text-soft);
}
.admin-help__body p { margin: 0 0 var(--ad-space-3); line-height: 1.6; }
.admin-help__body strong { color: var(--ad-text); }
.admin-help__body code {
padding: 1px 5px;
background: var(--ad-bg-sunk);
border-radius: var(--ad-r-xs);
font-size: .92em;
/* Une adresse ou un paramètre (« ?utm_source=…&utm_campaign=… ») n'a pas
d'espace où couper : sans ceci, il élargissait la page sur un téléphone. */
overflow-wrap: anywhere;
}
/* Même correction de spécificité que .admin-help__sec-title, une taille en
dessous : un intertitre dans une fiche d'aide. (Cette règle avait un jumeau,
.admin-help__topic-body h3, retiré le 2026-09-08 : cette classe n'était plus
posée par aucun écran.) */
body.admin-body .admin-help__sub {
margin: var(--ad-space-5) 0 var(--ad-space-3);
color: var(--ad-text);
font-size: 16px; /* un cran sous le titre du thème, au-dessus du texte (15 px jusqu'au 2026-10-22) */
font-weight: 650;
}
/* Étapes : la numérotation est le signal « il y a un ordre à respecter ». */
.admin-help__steps {
margin: 0 0 var(--ad-space-3);
padding: 0;
list-style: none;
counter-reset: help-step;
}
.admin-help__steps > li {
position: relative;
margin-bottom: var(--ad-space-2);
padding-left: 30px;
line-height: 1.55;
counter-increment: help-step;
}
.admin-help__steps > li::before {
content: counter(help-step);
position: absolute;
top: 1px;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 21px;
height: 21px;
background: var(--ad-accent);
border-radius: 50%;
color: #fff;
font-size: var(--ad-fs-badge);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.admin-help__list { margin: 0 0 var(--ad-space-3); padding-left: 1.15rem; }
.admin-help__list > li { margin-bottom: 5px; line-height: 1.55; }
/* Options : un terme, sa description. Plus lisible qu'une puce « Terme — … ». */
.admin-help__options { margin: 0 0 var(--ad-space-3); }
.admin-help__options dt {
margin-top: var(--ad-space-2);
color: var(--ad-text);
font-size: var(--ad-fs-sm);
font-weight: 600;
}
.admin-help__options dt:first-child { margin-top: 0; }
.admin-help__options dd {
margin: 1px 0 0;
padding-left: var(--ad-space-3);
border-left: 2px solid var(--ad-border);
line-height: 1.5;
}
/* --- Libellés d'interface & chemins --------------------------------------
[[Enregistrer]] et [[Pages > Sections]] dans help-content.php.
Le mot exact lu à l'écran ne s'écrit PLUS : l'emphase et la
citation d'interface se ressemblaient, et il devenait impossible de
survoler une fiche pour n'y trouver que les boutons à cliquer.
Volontairement DISCRET — une aide en compte des centaines : une pastille
marquée transformerait chaque paragraphe en damier.
-------------------------------------------------------------------- */
.admin-help__ui {
padding: 1px 5px;
background: var(--ad-bg-sunk);
border-radius: var(--ad-r-xs);
color: var(--ad-text);
font-weight: 600;
/* Police du texte, pas celle de : c'est un mot de l'interface,
pas une valeur à recopier. C'est leur SEULE différence visuelle. */
font-family: inherit;
white-space: nowrap;
}
/* Dans un exergue coloré, la pastille grise jurerait avec le fond. */
.admin-help__note .admin-help__ui {
padding: 0;
background: none;
color: inherit;
}
/* Un chemin : les segments restent des pastilles, le CSS pose les chevrons.
Générés ici et non dans le HTML — sur des centaines de chemins, cela
économise autant de balises que de séparateurs. */
.admin-help__path > .admin-help__ui + .admin-help__ui::before {
content: "\203A";
margin: 0 6px 0 -1px;
color: var(--ad-text-mute);
font-weight: 400;
}
.admin-help__path > .admin-help__ui + .admin-help__ui {
/* Le chevron appartient au segment suivant : il ne doit pas se retrouver
seul en fin de ligne. */
white-space: nowrap;
}
/* DANS UN ESPACE ÉTROIT, UNE ÉTIQUETTE PASSE À LA LIGNE (2026-09-28).
Le `nowrap` garde « Pages & menu » d'un seul tenant — mais « Afficher sous le
bouton les moyens de paiement acceptés » mesure 420px : sur un téléphone il
élargissait la page, que le navigateur réduisait alors en entier ; dans le
panneau d'aide (~400px), il débordait de la fiche. Là, et là seulement, on
laisse couper ; la pastille se referme proprement de part et d'autre. Le
chevron reste collé au segment qu'il précède (aucune espace entre eux). */
@media (max-width: 640px) {
.admin-help__ui,
.admin-help__path > .admin-help__ui + .admin-help__ui {
white-space: normal;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
}
.help-drawer__body .admin-help__ui,
.help-drawer__body .admin-help__path > .admin-help__ui + .admin-help__ui {
white-space: normal;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* Surlignage du mot pivot d'une fiche. Le fond vient de la Charte, le texte
NON : l'accent peut être trop clair pour rester lisible (même règle que
.admin-help__note--tip). */
.admin-help__body mark {
padding: 0 3px;
background: var(--ad-accent-sf);
border-radius: var(--ad-r-xs);
color: var(--ad-text);
font-weight: 600;
}
/* --- Tableaux comparatifs ------------------------------------------------
Pour ce qu'une liste d'options ne sait pas porter : deux informations ou
plus par entrée (une colonne d'import, son caractère obligatoire, son
exemple). Le wrapper défile horizontalement — le panneau latéral fait
~400 px, et un tableau ne doit jamais déborder de la fiche.
-------------------------------------------------------------------- */
.admin-help__table-wrap {
margin: 0 0 var(--ad-space-3);
}
.admin-help__table {
width: 100%;
border-collapse: collapse;
font-size: var(--ad-fs-sm);
line-height: 1.45;
text-align: left;
}
body.admin-body .admin-help__table th,
body.admin-body .admin-help__table td {
padding: 6px 10px 6px 0;
border-bottom: 1px solid var(--ad-border);
vertical-align: top;
}
body.admin-body .admin-help__table thead th {
padding-top: 0;
border-bottom-color: var(--ad-border-str);
color: var(--ad-text-mute);
font-size: var(--ad-fs-label);
font-weight: var(--ad-fw-label);
text-transform: uppercase;
letter-spacing: var(--ad-ls-label);
white-space: nowrap;
}
body.admin-body .admin-help__table tbody th {
color: var(--ad-text);
font-weight: 600;
}
.admin-help__table tbody tr:last-child th,
.admin-help__table tbody tr:last-child td { border-bottom: 0; }
/* --- Exergues ------------------------------------------------------------
Trois natures, distinctes sur la FORME autant que sur la couleur : elles
restent discernables en niveaux de gris et pour un daltonien.
tip -> barre latérale + ampoule + accent de marque
warn -> encadré complet + triangle + ambre
danger -> encadré complet + octogone + rouge (destructif UNIQUEMENT,
conformément à la règle « Supprimer toujours rouge »)
-------------------------------------------------------------------- */
.admin-help__note {
display: flex;
align-items: flex-start;
gap: var(--ad-space-2);
margin: var(--ad-space-3) 0;
padding: var(--ad-space-3) var(--ad-space-4);
border-radius: var(--ad-r-md);
font-size: var(--ad-fs-sm);
line-height: 1.55;
}
.admin-help__note p { margin: 0; }
.admin-help__note-body { min-width: 0; }
.admin-help__note-icon { flex: 0 0 auto; display: inline-flex; margin-top: 1px; }
.admin-help__note-label {
display: block;
margin-bottom: 2px;
font-size: var(--ad-fs-label);
font-weight: var(--ad-fw-label);
text-transform: uppercase;
letter-spacing: var(--ad-ls-label);
}
.admin-help__note--tip {
background: var(--ad-accent-sf);
/* Le texte NE prend pas l'accent : celui-ci est piloté par la Charte
et peut être trop clair pour rester lisible. */
color: var(--ad-text-soft);
border-left: 3px solid var(--ad-accent);
border-radius: 0 var(--ad-r-md) var(--ad-r-md) 0;
}
.admin-help__note--tip .admin-help__note-icon,
.admin-help__note--tip .admin-help__note-label { color: var(--ad-accent); }
.admin-help__note--tip strong { color: var(--ad-text); }
.admin-help__note--warn {
background: var(--ad-warn-sf);
border: 1px solid #ecd79a;
color: var(--ad-warn);
}
.admin-help__note--warn strong { color: inherit; }
.admin-help__note--danger {
background: var(--ad-danger-sf);
border: 1px solid #f2c6c2;
color: var(--ad-danger);
}
.admin-help__note--danger strong { color: inherit; }
/* --- Renvois croisés ----------------------------------------------------- */
.admin-help__see {
margin: var(--ad-space-3) 0 0;
padding: 0;
list-style: none;
}
.admin-help__see-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 0;
color: var(--ad-accent);
font-size: var(--ad-fs-sm);
font-weight: 500;
text-decoration: none;
}
.admin-help__see-link:hover { text-decoration: underline; }
.admin-help__see-link .lt-icon { width: 15px; height: 15px; flex: 0 0 auto; }
/* --- Renvoi PROÉMINENT (['jump' => 'ref']) --------------------------------
Le contraire du renvoi ci-dessus, et volontairement : celui-là se pose en fin
de fiche pour qui en veut plus, celui-ci s'impose en tête pour qui ne sait pas
encore qu'une fiche existe. Il n'a de raison d'être que pour une
fonctionnalité SANS écran — donc sans bouton « ? » qui la désigne. */
.admin-help__jump {
display: flex;
align-items: center;
gap: var(--ad-space-3);
margin: 0 0 var(--ad-space-4);
padding: var(--ad-space-3) var(--ad-space-4);
background: var(--ad-accent-sf);
border: 1px solid color-mix(in srgb, var(--ad-accent) 25%, transparent);
border-radius: var(--ad-r-md);
color: var(--ad-accent-h);
font-weight: 600;
text-decoration: none;
transition: background var(--ad-trans) ease;
}
.admin-help__jump:hover { background: color-mix(in srgb, var(--ad-accent) 18%, #fff); }
.admin-help__jump-text { flex: 1 1 auto; }
.admin-help__jump .lt-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.admin-help__jump-icon { display: inline-flex; }
/* --- Schémas ------------------------------------------------------------- */
.admin-help__figure { margin: var(--ad-space-3) 0; }
.admin-help__figure img {
display: block;
max-width: 100%;
height: auto;
border: 1px solid var(--ad-border);
border-radius: var(--ad-r-sm);
}
.admin-help__figure figcaption {
margin-top: 6px;
color: var(--ad-text-mute);
font-size: var(--ad-fs-xs);
}
.admin-help__top {
display: inline-block;
margin-top: var(--ad-space-4);
color: var(--ad-text-mute);
font-size: var(--ad-fs-xs);
text-decoration: none;
}
.admin-help__top:hover { color: var(--ad-accent); }
/* =========================================================================
BOUTON « ? » CONTEXTUEL + SA BULLE (helpTip())
Remplace les paragraphes d'explication posés à demeure dans les écrans.
La bulle utilise l'attribut `popover` : rendue dans la top layer, elle
n'est JAMAIS rognée par un conteneur en overflow:hidden — contrairement
à une bulle en position:absolute (cf. .admin-block, .design-section,
.admin-table, .fb-field, qui rogneraient toutes).
========================================================================= */
/* LA MÊME DISTANCE PARTOUT : 8 px (2026-10-22, demande de Patrick). Elle est portée
par l'ENVELOPPE et non plus par le bouton (4 px) : dans un titre en flexbox
(Charte, sommaires repliables), l'écart du conteneur s'y ajoutait et le « ? »
tombait à 12 px. Mesuré sur vingt-six écrans : 54 à 4 px, 7 à 12, 1 à 9. */
.help-tip-wrap { display: inline; white-space: nowrap; margin-left: 8px; }
/* DANS UN TITRE, LE « ? » SE CENTRE SUR LE TEXTE (2026-10-20, relevé par
Patrick : « ? » et l'œil côte à côte, pas alignés). Posé sur la ligne de base,
il tombait de 4 px sous le milieu d'un titre de 17,5 px, alors que l'œil, à
côté, est centré par la flexbox de l'en-tête. Le décalage est en `em` DU TITRE
(porté par l'enveloppe, qui hérite de sa taille) : il suit chaque niveau. */
:is(h1, h2, h3, h4, summary, legend) > .help-tip-wrap { vertical-align: 0.18em; }
:is(h1, h2, h3, h4, summary, legend) > .help-tip-wrap .help-tip { vertical-align: middle; }
/* LES TITRES EN FLEXBOX (Charte, ses rubriques repliables, les cartes de côté d'une
galerie) : l'écart du conteneur s'ajoutait aux 8 px (16 mesurés), et la flexbox
centre le « ? » sur la BOÎTE du titre, 3 px plus bas que dans un titre ordinaire.
On retranche l'écart, et on remonte du même 0,18 em que ci-dessus (2026-10-22). */
:is(.design-section__title, .charte-rub__titre, .gal-cote-carte__titre) > .help-tip-wrap {
margin-left: calc(8px - var(--titre-flex-ecart, var(--ad-space-2)));
translate: 0 -0.18em;
}
body.admin-body .gal-cote-carte__titre { --titre-flex-ecart: .35em; }
/* Dans une rangée de boutons (en-tête d'un composant), la flexbox centre déjà : l'enveloppe suit. */
.admin-block__actions > .help-tip-wrap { display: inline-flex; margin-left: 0; } /* l'écart de la rangée suffit */
/* LA PASTILLE « ? » RESTE À 18 px, SA CIBLE PASSE À 24 (2026-09-08).
WCAG 2.2 AA, critère 2.5.8 « Taille de la cible » : un contrôle doit offrir
au moins 24 × 24 px à toucher. Celle-ci en offrait 18 — mesurable, pas une
préférence. L'agrandir à l'œil aurait déséquilibré chaque titre de champ
qu'elle accompagne : c'est une note en marge, elle doit rester discrète.
La zone sensible est donc étendue par un pseudo-élément transparent, qui ne
change rien à ce qu'on voit. `inset: -3px` sur 18 px donne exactement 24. */
.help-tip {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-left: 0;
padding: 0;
vertical-align: 1px;
background: none;
border: 1px solid var(--ad-btn-bd);
border-radius: 50%;
color: var(--ad-text-soft);
font-size: var(--ad-fs-badge);
font-weight: 700;
line-height: 1;
cursor: help;
transition: color .12s, border-color .12s, background .12s;
}
.help-tip::before {
content: '';
position: absolute;
/* L'inset part du bloc de PADDING, pas de la bordure : 18px de boîte moins
les deux bordures d'1px font 16, et il faut donc 4 de chaque côté pour
atteindre 24. Mesuré à 22 avec -3px — le témoin a rougi. */
inset: -4px;
}
.help-tip__mark { display: block; margin-top: -1px; }
.help-tip:hover,
.help-tip[aria-expanded="true"] {
background: var(--ad-accent-sf);
border-color: var(--ad-accent);
color: var(--ad-accent);
}
.help-tip:focus-visible {
outline: 2px solid var(--ad-accent); outline-offset: 2px;
box-shadow: 0 0 0 3px var(--ad-focus);
}
/* La bulle. `position: fixed` + coordonnées posées par le JS : dans la top
layer, il n'y a plus de parent positionné auquel se raccrocher. */
.help-tip__bubble {
/* Masquée par défaut : sur un navigateur qui ignore `popover`, la règle
:popover-open ci-dessous est invalide et donc ignorée — le texte reste
caché au lieu de s'afficher en clair au milieu de l'écran. */
display: none;
position: fixed;
width: max-content;
max-width: min(320px, calc(100vw - 24px));
margin: 0;
padding: 10px 12px;
background: var(--ad-text);
border: 0;
border-radius: var(--ad-r-sm);
box-shadow: var(--ad-shadow-md);
color: #fff;
/* Indispensable : plusieurs libellés de formulaire sont en majuscules
espacées, la bulle en hériterait. */
text-transform: none;
letter-spacing: 0;
text-align: left;
font-size: var(--ad-fs-xs);
font-weight: 400;
line-height: 1.5;
white-space: normal;
/* Une bulle très longue reste lisible : elle défile au lieu de dépasser.
Le plancher de 200px évite qu'elle se réduise à rien si `vh` dégénère
(fenêtre de hauteur nulle : onglet en arrière-plan, panneau replié…). */
max-height: min(max(200px, 60vh), 420px);
overflow-y: auto;
overscroll-behavior: contain;
}
.help-tip__bubble:popover-open { display: block; }
.help-tip__bubble::backdrop { background: transparent; }
.help-tip__text { display: block; }
.help-tip__text strong { color: #fff; font-weight: 600; }
.help-tip__text code {
padding: 1px 4px;
background: rgba(255, 255, 255, .16);
border-radius: var(--ad-r-xs);
}
.help-tip__more {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 7px;
color: #fff;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.help-tip__more .lt-icon { width: 13px; height: 13px; }
.help-tip__more:hover { opacity: .85; }
/* =========================================================================
PANNEAU LATÉRAL D'AIDE (le bouton « ? » de l'en-tête)
========================================================================= */
/* `hidden` seul (display:none) tuerait la transition : le JS retire d'abord
`hidden`, puis ajoute `.is-open` au cycle de rendu suivant. */
.help-drawer[hidden] { display: none; }
.help-drawer {
position: fixed;
inset: 0;
z-index: 1200; /* au-dessus des modales (1000) : l'aide peut les recouvrir */
}
.help-drawer__overlay {
position: absolute;
inset: 0;
background: rgba(15, 18, 24, .45);
opacity: 0;
transition: opacity .2s ease;
}
.help-drawer.is-open .help-drawer__overlay { opacity: 1; }
.help-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
width: min(430px, 92vw);
background: var(--ad-bg);
border-left: 1px solid var(--ad-border);
box-shadow: var(--ad-shadow-lg);
transform: translateX(100%);
transition: transform .22s ease;
}
.help-drawer.is-open .help-drawer__panel { transform: none; }
.help-drawer__panel:focus { outline: none; }
.help-drawer__head {
display: flex;
align-items: center;
gap: var(--ad-space-2);
flex: 0 0 auto;
padding: var(--ad-space-4) var(--ad-space-5);
border-bottom: 1px solid var(--ad-border);
}
.help-drawer__title {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-size: var(--ad-fs-lg);
font-weight: 600;
line-height: 1.3;
}
.help-drawer__title:focus { outline: none; }
.help-drawer__back,
.help-drawer__x {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
padding: 5px 8px;
background: none;
border: 0;
border-radius: var(--ad-r-sm);
color: var(--ad-text-mute);
font-size: var(--ad-fs-xs);
font-weight: 500;
cursor: pointer;
}
.help-drawer__back:hover,
.help-drawer__x:hover { background: var(--ad-bg-sunk); color: var(--ad-text); }
.help-drawer__back:focus-visible,
.help-drawer__x:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; box-shadow: 0 0 0 3px var(--ad-focus); }
.help-drawer__back[hidden] { display: none; }
.help-drawer__body {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--ad-space-5);
}
.help-drawer__body .admin-help__sec:first-of-type { margin-top: 0; }
/* ============================================================
VOLET — rythme vertical élargi
Le volet fait 430 px, soit 382 px de texte utile : les deux tiers de la
mesure de la page (68ch ≈ 578 px). Un même écart vertical y sépare une fois
et demie plus de lignes — à valeurs égales, la colonne paraît tassée alors
que la page respire.
Portée sur `.help-drawer__body`, le CONTENEUR, et non sur
`.admin-help__topic--drawer`, le contenu : c'est la LARGEUR qui justifie ces
valeurs, et la largeur est une propriété du conteneur. Le jour où le même
HTML est rendu dans une colonne large, il ne doit pas hériter du rythme
étroit.
Les règles visant un titre sont préfixées `body.admin-body` pour la même
raison qu'en amont : sans quoi la remise à zéro des titres les avalerait.
============================================================ */
.help-drawer__body .admin-help__sec {
margin-top: var(--ad-rythme-groupe); /* comme la page (2026-10-22) */
padding-top: 28px;
}
body.admin-body .help-drawer__body .admin-help__sec-title {
margin-bottom: var(--ad-space-4); /* 12 -> 16 */
}
.help-drawer__body .admin-help__topic-intro {
/* 16 -> 24 : ici l'intro n'a pas de filet au-dessous (il est annulé sur la
première fiche), l'écart est la seule séparation. */
margin-bottom: var(--ad-space-5);
}
body.admin-body .help-drawer__body .admin-help__sub {
margin-top: var(--ad-space-6); /* 24 -> 36 */
}
.help-drawer__body .admin-help__options dt { margin-top: var(--ad-space-3); } /* 8 -> 12 */
.help-drawer__body .admin-help__steps > li { margin-bottom: var(--ad-space-3); } /* 8 -> 12 */
.help-drawer__body .admin-help__note { margin: var(--ad-space-4) 0; } /* 12 -> 16 */
/* Le renvoi proéminent dans le panneau : plus étroit, donc plus compact. Il y
quitte le panneau pour la page d'aide complète — c'est voulu, la fiche visée
n'est atteignable que là. */
.help-drawer__body .admin-help__jump {
margin-bottom: var(--ad-space-3);
padding: var(--ad-space-2) var(--ad-space-3);
font-size: var(--ad-fs-sm);
}
.help-drawer__foot {
flex: 0 0 auto;
padding: var(--ad-space-3) var(--ad-space-5);
border-top: 1px solid var(--ad-border);
}
/* Empêche le fond de défiler quand le panneau est ouvert. */
.admin-body--help-open { overflow: hidden; }
@media (max-width: 480px) {
.help-drawer__panel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.help-drawer__panel,
.help-drawer__overlay { transition: none; }
.admin-help__sec.is-target { animation: none; }
/* Le rail apparaît alors d'un coup, sans fondu. Il reste piloté par la
même classe : c'est le mouvement qu'on supprime, pas la logique. */
.admin-help__rail,
.admin-help__rail.is-visible { transition: none; }
}
/* ----- Aide des composants de cette page (2026-10-13) : en tête du panneau, sur l'éditeur de contenu ----- */
.help-composants {
margin: 0 0 var(--ad-space-4);
padding: var(--ad-space-3);
background: color-mix(in srgb, var(--ad-accent) 6%, var(--ad-surface));
border: 1px solid var(--ad-border);
border-radius: var(--ad-radius);
}
.help-composants h3 { margin: 0 0 var(--ad-space-2); font-size: var(--ad-fs-sm); font-weight: 700; }
.help-composants ul { display: flex; flex-wrap: wrap; gap: var(--ad-space-1) var(--ad-space-3); margin: 0; padding: 0; list-style: none; }
.help-composants a { font-size: var(--ad-fs-sm); color: var(--ad-accent); }