qui enveloppait auparavant le contenu d'un article encadré par un
(HTML invalide sinon si
l'article contient des balises de niveau bloc — voir le commentaire dans
le partial). Reporte ici le margin-bottom que de contenu visible à styler (celui d'Accueil est
.sr-only, celui d'articles/show.php restait nu) — reprend le langage
visuel de .aca-card__title ci-dessus (même border-bottom en --accent),
agrandi pour un titre de PAGE plutôt qu'un titre de carte. Utilisée par
articles/index.php, articles/category.php et pages/afficher.php. */
.aca-page-title {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 700;
color: var(--text);
margin: 0 0 1.5rem;
padding-bottom: .5rem;
border-bottom: 2px solid var(--accent);
}
/* ==========================================================================
COMPOSANT : Boutons (.aca-btn) — hiérarchie à 3 niveaux, voir audit §2.4
Primaire (validation) / Secondaire (neutre) / Danger (irréversible).
Pas de dégradés ni d'ombres internes prononcées (garder ça pour le
fantasy) — sobre et contemporain, voir §7.
========================================================================== */
.aca-btn {
display: inline-block;
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
line-height: 1.2;
padding: .6em 1.4em;
border-radius: var(--radius);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
text-align: center;
transition: background-color .15s ease, border-color .15s ease,
color .15s ease, opacity .15s ease;
}
/* -- Primaire / validation -- */
.aca-btn--primary {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-contrast);
}
.aca-btn--primary:hover { opacity: .88; }
.aca-btn--primary:active { opacity: .78; }
/* -- Secondaire / neutre -- */
.aca-btn--secondary {
background: transparent;
border-color: var(--border);
color: var(--text);
}
.aca-btn--secondary:hover { background: var(--border); color: var(--panel); }
.aca-btn--secondary:active { opacity: .82; }
/* État "actif" (2026-08-09, bouton "Exporter" en mode sélection — voir
aca-categories-admin.js) : fond plus foncé, persistant (contrairement à
:hover) tant que le mode sélection reste ouvert. Générique (pas
spécifique à --secondary) au cas où réutilisé sur un autre bouton. */
.aca-btn--actif {
background: var(--border) !important;
color: var(--panel) !important;
}
/* -- Danger / irréversible -- */
.aca-btn--danger {
background: var(--danger);
border-color: var(--danger);
color: var(--danger-contrast);
}
.aca-btn--danger:hover { opacity: .88; }
.aca-btn--danger:active { opacity: .78; }
/* -- Succès / création (2026-07-16) : n'existait pas encore, nécessaire pour
remplacer le vert Bootstrap (btn-success) des boutons "Ajouter" côté admin. -- */
.aca-btn--success {
background: var(--success);
border-color: var(--success);
color: var(--success-contrast);
}
.aca-btn--success:hover { opacity: .88; }
.aca-btn--success:active { opacity: .78; }
/* -- État désactivé, commun aux 4 niveaux -- */
.aca-btn:disabled,
.aca-btn[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
}
/* -- Modifier "outline" (2026-07-16, admin) : fond transparent par défaut,
bordure/texte colorés, remplissage au survol — se combine avec un des
niveaux ci-dessus (.aca-btn--primary/--danger/--success). Ne modifie pas
ces classes seules, donc n'affecte aucun bouton public existant (aucun
n'utilise --outline aujourd'hui, uniquement l'admin). Rayon d'angle et
transition (150ms) déjà hérités de .aca-btn, rien à redéfinir ici. -- */
.aca-btn--outline {
background: transparent;
}
.aca-btn--outline.aca-btn--primary { border-color: var(--accent); color: var(--accent); }
.aca-btn--outline.aca-btn--danger { border-color: var(--danger); color: var(--danger); }
.aca-btn--outline.aca-btn--success { border-color: var(--success); color: var(--success); }
.aca-btn--outline.aca-btn--primary:hover { background: var(--accent); color: var(--accent-contrast); opacity: 1; }
.aca-btn--outline.aca-btn--danger:hover { background: var(--danger); color: var(--danger-contrast); opacity: 1; }
.aca-btn--outline.aca-btn--success:hover { background: var(--success); color: var(--success-contrast); opacity: 1; }
/* -- Discret (2026-08-09, stylisation validée par Corentin — maquette
proposition-style-tableaux-admin) : neutre au repos, la couleur de
statut (--accent/--danger) n'apparaît qu'au survol — déjà le
comportement des règles :hover ci-dessus, seul l'état de repos change
ici. Pour les actions PAR LIGNE d'un tableau (ex. Modifier/Retirer des
blocs CMP) plutôt que les boutons d'action principaux d'un bandeau
(Créer/Ajouter▾...), qui restent pleins pour rester repérables. 3
classes (au lieu de 2 pour --primary/--danger seuls) : l'emporte sur
les règles ci-dessus quel que soit l'ordre des règles dans la feuille,
pas seulement par chance de position. -->
.aca-btn--outline.aca-btn--primary.aca-btn--discret {
border-color: var(--border);
color: var(--muted);
}
.aca-btn--outline.aca-btn--danger.aca-btn--discret {
border-color: var(--border);
color: var(--muted);
}
/* -- Taille compacte (2026-07-16) : flèches ↑/↓ de réordonnancement
(admin/articles/index.php), remplace btn-xs de Bootstrap. -- */
.aca-btn--sm {
padding: .2em .6em;
font-size: .8rem;
}
/* -- Message d'aide inline (2026-07-23, H1 obligatoire) : à côté d'un
bouton, ex. avertir que Sauvegarder est grisé tant qu'aucun H1 n'est
présent (voir web/app/Views/admin/articles/edit.php,
web/editor-app/src/main.tsx). -- */
.aca-form-hint {
margin-left: .5rem;
font-size: .85rem;
}
.aca-form-hint--warning {
color: var(--danger);
}
/* -- Espacement entre boutons adjacents (2026-07-16, v2 plus directe) :
.aca-btn n'a aucune marge par défaut, contrairement aux .btn-* Bootstrap
qu'il remplace en admin — sans ça, "Modifier" et le formulaire
"Supprimer" se touchent. La 1ère version (combinateur .aca-btn + form)
était correcte sur le papier mais signalée comme toujours chevauchée en
conditions réelles (admin/utilisateurs/index.php) — remplacée par une
marge posée DIRECTEMENT sur les classes de formulaire connues
(.supprimer, .deplacer), sans dépendre d'un élément précédent ni d'un
combinateur, pour éliminer toute ambiguïté de correspondance de
sélecteur. Couvre les 7 tableaux admin partageant ce motif. -- */
form.supprimer,
form.deplacer {
margin-left: .5rem;
}
form.deplacer:first-child {
margin-left: 0;
}
/* ==========================================================================
RETOUCHE DES COMPOSANTS BOOTSTRAP EXISTANTS (pages publiques uniquement)
Applique les tokens du thème actif aux vrais boutons/cartes déjà présents
dans le HTML (`.btn-*`, `.jumbotron`, `.modal-content`, `.panel`,
`.list-group[-item]`), sans toucher au balisage PHP. Tout est scopé sous
`.aca-ds` (posé sur par templates/default.php) : n'affecte que les
pages publiques qui chargent design-system.css, jamais l'admin
(templates/tablesorter.php, non concerné à ce stade, voir §6 point 10
de l'audit — tableaux admin traités dans une phase ultérieure).
========================================================================== */
/* -- Boutons existants (hiérarchie à 3 niveaux appliquée aux classes déjà en place) -- */
.aca-ds .btn {
font-family: var(--font-display);
font-weight: 700;
border-radius: var(--radius);
transition: background-color .15s ease, border-color .15s ease,
color .15s ease, opacity .15s ease;
}
.aca-ds .btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Primaire / validation — le site utilise `.btn-success` pour Connexion/
Déconnexion et `.btn-primary` pour les formulaires : les deux sont des
actions de validation, pas des confirmations de succès (ça, c'est
`.alert-success`, non concerné ici). */
.aca-ds .btn-primary,
.aca-ds .btn-success {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-contrast);
}
.aca-ds .btn-primary:hover, .aca-ds .btn-primary:focus,
.aca-ds .btn-success:hover, .aca-ds .btn-success:focus {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-contrast);
opacity: .88;
}
.aca-ds .btn-primary:active, .aca-ds .btn-success:active { opacity: .78; }
/* Secondaire / neutre */
.aca-ds .btn-default {
background: transparent;
border-color: var(--border);
color: var(--text);
}
.aca-ds .btn-default:hover, .aca-ds .btn-default:focus {
background: var(--border);
color: var(--panel);
}
/* Danger / irréversible */
.aca-ds .btn-danger {
background: var(--danger);
border-color: var(--danger);
color: var(--danger-contrast);
}
.aca-ds .btn-danger:hover, .aca-ds .btn-danger:focus { opacity: .88; }
.aca-ds .btn-danger:active { opacity: .78; }
/* -- Cartes existantes : conteneurs déjà utilisés comme des cartes
(jumbotron d'accueil, encarts logos, panneaux d'article/contact,
menu latéral) — même traitement que .aca-card : fond, bordure, ombre,
radius, voir §2.3 et §6 point 3 de l'audit. -- */
.aca-ds .jumbotron,
.aca-ds .modal-content,
.aca-ds .panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--card-shadow);
color: var(--text);
}
.aca-ds .list-group-item {
background: var(--panel);
border-color: var(--border);
color: var(--text);
font-family: var(--font-body);
}
.aca-ds .list-group-item:hover,
.aca-ds .list-group-item:focus {
background: var(--border);
color: var(--panel);
}
.aca-ds .list-group-item.active,
.aca-ds .list-group-item.active:hover,
.aca-ds .list-group-item.active:focus {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-contrast);
}
/* -- Titres et liens existants : Bootstrap ne fixe pas de couleur sur
h1-h6 mais les pages publiques les passent presque toutes en
`.text-info` (bleu Bootstrap, #31708f), et tous les liens `` héritent
du bleu Bootstrap par défaut (#428bca) — aucun des deux n'était couvert
par la retouche boutons/cartes précédente. `.text-info` est utilisé ici
comme simple utilitaire de couleur de texte (titres, intro), pas au
sens sémantique "info" de Bootstrap : on le fait pointer vers --text
comme le reste du corps de texte ; les liens, eux, gardent une couleur
distincte (--accent) pour rester repérables comme cliquables. -- */
.aca-ds h1, .aca-ds h2, .aca-ds h3,
.aca-ds h4, .aca-ds h5, .aca-ds h6 {
color: var(--text);
font-family: var(--font-display);
}
.aca-ds .text-info {
color: var(--text);
}
.aca-ds a {
color: var(--accent);
}
.aca-ds a:hover,
.aca-ds a:focus {
color: var(--accent);
opacity: .78;
}
/* Sur Yin et Yang, --accent est identique à --text (palette volontairement
monochrome, voir §7 de l'audit) : un lien en couleur seule s'y
confondrait avec le texte courant. On rajoute un soulignement pour les
liens en contexte de lecture (paragraphes, contenu de carte) — profite
aussi à Eau/Harmonie où les deux teintes de bleu restent proches, sans
toucher les liens de nav/menu/boutons qui ont déjà leur propre
traitement visuel. */
.aca-ds p a,
.aca-ds .aca-card__body a {
text-decoration: underline;
}
/* ==========================================================================
CARROUSEL (accueil.index / carousel.php / bloc BlockNote "carousel",
scopé sur la classe .carousel — 2026-07-25, pas un id fixe, voir
aikido-v2.css) — lisibilité de la légende et des flèches par-dessus des
photos au contenu imprévisible (certaines contiennent déjà du texte,
ex. "Stage Le Vigan 2013").
========================================================================== */
/* Légende : bandeau plein en bas plutôt qu'un texte flottant sans fond —
utilise --scrim (version semi-transparente de --text, donc le contraste
avec le texte de légende en --bg reste garanti quel que soit le thème,
indépendamment de la photo affichée derrière). */
.aca-ds .carousel .carousel-caption {
left: 0;
right: 0;
bottom: 0;
padding: .6rem 1rem;
background: var(--scrim);
text-align: left;
text-shadow: none;
}
.aca-ds .carousel .carousel-caption h2 {
margin: 0;
font-size: 1.1rem;
font-family: var(--font-display);
color: var(--bg);
}
/* Flèches : fond circulaire sombre fixe, volontairement PAS lié aux tokens
du thème (contrairement à la légende) — doit rester lisible sur
n'importe quelle photo, y compris sur Feu du combat où --scrim est clair. */
.aca-ds .carousel .carousel-control {
opacity: .85;
}
.aca-ds .carousel .carousel-control:hover,
.aca-ds .carousel .carousel-control:focus {
opacity: 1;
}
.aca-ds .carousel .carousel-control .glyphicon-chevron-left,
.aca-ds .carousel .carousel-control .glyphicon-chevron-right {
width: 40px;
height: 40px;
margin-top: -20px;
line-height: 40px;
font-size: 20px;
text-align: center;
background: rgba(0,0,0,.45);
border-radius: 50%;
}
.aca-ds .carousel .carousel-control .glyphicon-chevron-left {
left: 50%;
margin-left: -20px;
}
.aca-ds .carousel .carousel-control .glyphicon-chevron-right {
right: 50%;
margin-right: -20px;
}
/* ==========================================================================
PHASE 2 — TABLEAUX ADMIN (voir audit §2.5 et §6 point 10)
==========================================================================
Cible `table.table1` (classe statique déjà présente dans le HTML de
toutes les vues admin.*.index). Depuis le 2026-07-18, le tri au clic est
assuré par js/aca-table-sort.js (JS vanilla, remplace jQuery +
jquery.tablesorter.js/theme.blue.css) : les classes `.aca-th-sortable`/
`.aca-th-sort--asc`/`.aca-th-sort--desc` sont posées par ce script, le
CSS ci-dessous se contente de leur donner une apparence (curseur,
flèche ▲/▼/⇅), sans toucher au JS. ========================================================================== */
.aca-ds table.table1 {
/* `width: auto` (2026-08-09, retour de Corentin — colonnes trop larges,
espace gaspillé) : chaque colonne épouse son contenu le plus large au
lieu d'être étirée pour occuper 100% du conteneur. `table-layout` reste
`auto` (valeur par défaut, pas posée en dur) : le navigateur continue
de faire passer le contenu à la ligne dans une colonne si la table
dépasserait la largeur disponible, comme avant — width:100% forçait
seulement un étirement quand il y avait de la place EN PLUS, jamais un
garde-fou contre le débordement.
Contour/ombre/centrage PAS posés ici (2026-08-09, retour de Corentin —
ne s'affichait pas correctement sur #aca-table-categories, le seul
tableau du site avec plusieurs : bug connu, border-radius +
overflow:hidden sur un
portait par défaut (Bootstrap, `p{margin:0 0 10px}`, bootstrap-3.2.0.min.css) pour ne rien changer visuellement aux articles en texte simple. */ .aca-article-liste__contenu { margin-bottom: 10px; } .aca-card__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text); margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--accent); } .aca-card__body { line-height: 1.6; } .aca-card__body :first-child { margin-top: 0; } .aca-card__body :last-child { margin-bottom: 0; } /* .aca-page-title (2026-08-09, retour de Corentin après le diagnostic "rendu Horaires/Accès aux dojos/S'inscrire") : aucune page du site n'avait jusqu'ici de
de contenu visible à styler (celui d'Accueil est
.sr-only, celui d'articles/show.php restait nu) — reprend le langage
visuel de .aca-card__title ci-dessus (même border-bottom en --accent),
agrandi pour un titre de PAGE plutôt qu'un titre de carte. Utilisée par
articles/index.php, articles/category.php et pages/afficher.php. */
.aca-page-title {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 700;
color: var(--text);
margin: 0 0 1.5rem;
padding-bottom: .5rem;
border-bottom: 2px solid var(--accent);
}
/* ==========================================================================
COMPOSANT : Boutons (.aca-btn) — hiérarchie à 3 niveaux, voir audit §2.4
Primaire (validation) / Secondaire (neutre) / Danger (irréversible).
Pas de dégradés ni d'ombres internes prononcées (garder ça pour le
fantasy) — sobre et contemporain, voir §7.
========================================================================== */
.aca-btn {
display: inline-block;
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
line-height: 1.2;
padding: .6em 1.4em;
border-radius: var(--radius);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
text-align: center;
transition: background-color .15s ease, border-color .15s ease,
color .15s ease, opacity .15s ease;
}
/* -- Primaire / validation -- */
.aca-btn--primary {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-contrast);
}
.aca-btn--primary:hover { opacity: .88; }
.aca-btn--primary:active { opacity: .78; }
/* -- Secondaire / neutre -- */
.aca-btn--secondary {
background: transparent;
border-color: var(--border);
color: var(--text);
}
.aca-btn--secondary:hover { background: var(--border); color: var(--panel); }
.aca-btn--secondary:active { opacity: .82; }
/* État "actif" (2026-08-09, bouton "Exporter" en mode sélection — voir
aca-categories-admin.js) : fond plus foncé, persistant (contrairement à
:hover) tant que le mode sélection reste ouvert. Générique (pas
spécifique à --secondary) au cas où réutilisé sur un autre bouton. */
.aca-btn--actif {
background: var(--border) !important;
color: var(--panel) !important;
}
/* -- Danger / irréversible -- */
.aca-btn--danger {
background: var(--danger);
border-color: var(--danger);
color: var(--danger-contrast);
}
.aca-btn--danger:hover { opacity: .88; }
.aca-btn--danger:active { opacity: .78; }
/* -- Succès / création (2026-07-16) : n'existait pas encore, nécessaire pour
remplacer le vert Bootstrap (btn-success) des boutons "Ajouter" côté admin. -- */
.aca-btn--success {
background: var(--success);
border-color: var(--success);
color: var(--success-contrast);
}
.aca-btn--success:hover { opacity: .88; }
.aca-btn--success:active { opacity: .78; }
/* -- État désactivé, commun aux 4 niveaux -- */
.aca-btn:disabled,
.aca-btn[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
}
/* -- Modifier "outline" (2026-07-16, admin) : fond transparent par défaut,
bordure/texte colorés, remplissage au survol — se combine avec un des
niveaux ci-dessus (.aca-btn--primary/--danger/--success). Ne modifie pas
ces classes seules, donc n'affecte aucun bouton public existant (aucun
n'utilise --outline aujourd'hui, uniquement l'admin). Rayon d'angle et
transition (150ms) déjà hérités de .aca-btn, rien à redéfinir ici. -- */
.aca-btn--outline {
background: transparent;
}
.aca-btn--outline.aca-btn--primary { border-color: var(--accent); color: var(--accent); }
.aca-btn--outline.aca-btn--danger { border-color: var(--danger); color: var(--danger); }
.aca-btn--outline.aca-btn--success { border-color: var(--success); color: var(--success); }
.aca-btn--outline.aca-btn--primary:hover { background: var(--accent); color: var(--accent-contrast); opacity: 1; }
.aca-btn--outline.aca-btn--danger:hover { background: var(--danger); color: var(--danger-contrast); opacity: 1; }
.aca-btn--outline.aca-btn--success:hover { background: var(--success); color: var(--success-contrast); opacity: 1; }
/* -- Discret (2026-08-09, stylisation validée par Corentin — maquette
proposition-style-tableaux-admin) : neutre au repos, la couleur de
statut (--accent/--danger) n'apparaît qu'au survol — déjà le
comportement des règles :hover ci-dessus, seul l'état de repos change
ici. Pour les actions PAR LIGNE d'un tableau (ex. Modifier/Retirer des
blocs CMP) plutôt que les boutons d'action principaux d'un bandeau
(Créer/Ajouter▾...), qui restent pleins pour rester repérables. 3
classes (au lieu de 2 pour --primary/--danger seuls) : l'emporte sur
les règles ci-dessus quel que soit l'ordre des règles dans la feuille,
pas seulement par chance de position. -->
.aca-btn--outline.aca-btn--primary.aca-btn--discret {
border-color: var(--border);
color: var(--muted);
}
.aca-btn--outline.aca-btn--danger.aca-btn--discret {
border-color: var(--border);
color: var(--muted);
}
/* -- Taille compacte (2026-07-16) : flèches ↑/↓ de réordonnancement
(admin/articles/index.php), remplace btn-xs de Bootstrap. -- */
.aca-btn--sm {
padding: .2em .6em;
font-size: .8rem;
}
/* -- Message d'aide inline (2026-07-23, H1 obligatoire) : à côté d'un
bouton, ex. avertir que Sauvegarder est grisé tant qu'aucun H1 n'est
présent (voir web/app/Views/admin/articles/edit.php,
web/editor-app/src/main.tsx). -- */
.aca-form-hint {
margin-left: .5rem;
font-size: .85rem;
}
.aca-form-hint--warning {
color: var(--danger);
}
/* -- Espacement entre boutons adjacents (2026-07-16, v2 plus directe) :
.aca-btn n'a aucune marge par défaut, contrairement aux .btn-* Bootstrap
qu'il remplace en admin — sans ça, "Modifier" et le formulaire
"Supprimer" se touchent. La 1ère version (combinateur .aca-btn + form)
était correcte sur le papier mais signalée comme toujours chevauchée en
conditions réelles (admin/utilisateurs/index.php) — remplacée par une
marge posée DIRECTEMENT sur les classes de formulaire connues
(.supprimer, .deplacer), sans dépendre d'un élément précédent ni d'un
combinateur, pour éliminer toute ambiguïté de correspondance de
sélecteur. Couvre les 7 tableaux admin partageant ce motif. -- */
form.supprimer,
form.deplacer {
margin-left: .5rem;
}
form.deplacer:first-child {
margin-left: 0;
}
/* ==========================================================================
RETOUCHE DES COMPOSANTS BOOTSTRAP EXISTANTS (pages publiques uniquement)
Applique les tokens du thème actif aux vrais boutons/cartes déjà présents
dans le HTML (`.btn-*`, `.jumbotron`, `.modal-content`, `.panel`,
`.list-group[-item]`), sans toucher au balisage PHP. Tout est scopé sous
`.aca-ds` (posé sur par templates/default.php) : n'affecte que les
pages publiques qui chargent design-system.css, jamais l'admin
(templates/tablesorter.php, non concerné à ce stade, voir §6 point 10
de l'audit — tableaux admin traités dans une phase ultérieure).
========================================================================== */
/* -- Boutons existants (hiérarchie à 3 niveaux appliquée aux classes déjà en place) -- */
.aca-ds .btn {
font-family: var(--font-display);
font-weight: 700;
border-radius: var(--radius);
transition: background-color .15s ease, border-color .15s ease,
color .15s ease, opacity .15s ease;
}
.aca-ds .btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Primaire / validation — le site utilise `.btn-success` pour Connexion/
Déconnexion et `.btn-primary` pour les formulaires : les deux sont des
actions de validation, pas des confirmations de succès (ça, c'est
`.alert-success`, non concerné ici). */
.aca-ds .btn-primary,
.aca-ds .btn-success {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-contrast);
}
.aca-ds .btn-primary:hover, .aca-ds .btn-primary:focus,
.aca-ds .btn-success:hover, .aca-ds .btn-success:focus {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-contrast);
opacity: .88;
}
.aca-ds .btn-primary:active, .aca-ds .btn-success:active { opacity: .78; }
/* Secondaire / neutre */
.aca-ds .btn-default {
background: transparent;
border-color: var(--border);
color: var(--text);
}
.aca-ds .btn-default:hover, .aca-ds .btn-default:focus {
background: var(--border);
color: var(--panel);
}
/* Danger / irréversible */
.aca-ds .btn-danger {
background: var(--danger);
border-color: var(--danger);
color: var(--danger-contrast);
}
.aca-ds .btn-danger:hover, .aca-ds .btn-danger:focus { opacity: .88; }
.aca-ds .btn-danger:active { opacity: .78; }
/* -- Cartes existantes : conteneurs déjà utilisés comme des cartes
(jumbotron d'accueil, encarts logos, panneaux d'article/contact,
menu latéral) — même traitement que .aca-card : fond, bordure, ombre,
radius, voir §2.3 et §6 point 3 de l'audit. -- */
.aca-ds .jumbotron,
.aca-ds .modal-content,
.aca-ds .panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--card-shadow);
color: var(--text);
}
.aca-ds .list-group-item {
background: var(--panel);
border-color: var(--border);
color: var(--text);
font-family: var(--font-body);
}
.aca-ds .list-group-item:hover,
.aca-ds .list-group-item:focus {
background: var(--border);
color: var(--panel);
}
.aca-ds .list-group-item.active,
.aca-ds .list-group-item.active:hover,
.aca-ds .list-group-item.active:focus {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-contrast);
}
/* -- Titres et liens existants : Bootstrap ne fixe pas de couleur sur
h1-h6 mais les pages publiques les passent presque toutes en
`.text-info` (bleu Bootstrap, #31708f), et tous les liens `` héritent
du bleu Bootstrap par défaut (#428bca) — aucun des deux n'était couvert
par la retouche boutons/cartes précédente. `.text-info` est utilisé ici
comme simple utilitaire de couleur de texte (titres, intro), pas au
sens sémantique "info" de Bootstrap : on le fait pointer vers --text
comme le reste du corps de texte ; les liens, eux, gardent une couleur
distincte (--accent) pour rester repérables comme cliquables. -- */
.aca-ds h1, .aca-ds h2, .aca-ds h3,
.aca-ds h4, .aca-ds h5, .aca-ds h6 {
color: var(--text);
font-family: var(--font-display);
}
.aca-ds .text-info {
color: var(--text);
}
.aca-ds a {
color: var(--accent);
}
.aca-ds a:hover,
.aca-ds a:focus {
color: var(--accent);
opacity: .78;
}
/* Sur Yin et Yang, --accent est identique à --text (palette volontairement
monochrome, voir §7 de l'audit) : un lien en couleur seule s'y
confondrait avec le texte courant. On rajoute un soulignement pour les
liens en contexte de lecture (paragraphes, contenu de carte) — profite
aussi à Eau/Harmonie où les deux teintes de bleu restent proches, sans
toucher les liens de nav/menu/boutons qui ont déjà leur propre
traitement visuel. */
.aca-ds p a,
.aca-ds .aca-card__body a {
text-decoration: underline;
}
/* ==========================================================================
CARROUSEL (accueil.index / carousel.php / bloc BlockNote "carousel",
scopé sur la classe .carousel — 2026-07-25, pas un id fixe, voir
aikido-v2.css) — lisibilité de la légende et des flèches par-dessus des
photos au contenu imprévisible (certaines contiennent déjà du texte,
ex. "Stage Le Vigan 2013").
========================================================================== */
/* Légende : bandeau plein en bas plutôt qu'un texte flottant sans fond —
utilise --scrim (version semi-transparente de --text, donc le contraste
avec le texte de légende en --bg reste garanti quel que soit le thème,
indépendamment de la photo affichée derrière). */
.aca-ds .carousel .carousel-caption {
left: 0;
right: 0;
bottom: 0;
padding: .6rem 1rem;
background: var(--scrim);
text-align: left;
text-shadow: none;
}
.aca-ds .carousel .carousel-caption h2 {
margin: 0;
font-size: 1.1rem;
font-family: var(--font-display);
color: var(--bg);
}
/* Flèches : fond circulaire sombre fixe, volontairement PAS lié aux tokens
du thème (contrairement à la légende) — doit rester lisible sur
n'importe quelle photo, y compris sur Feu du combat où --scrim est clair. */
.aca-ds .carousel .carousel-control {
opacity: .85;
}
.aca-ds .carousel .carousel-control:hover,
.aca-ds .carousel .carousel-control:focus {
opacity: 1;
}
.aca-ds .carousel .carousel-control .glyphicon-chevron-left,
.aca-ds .carousel .carousel-control .glyphicon-chevron-right {
width: 40px;
height: 40px;
margin-top: -20px;
line-height: 40px;
font-size: 20px;
text-align: center;
background: rgba(0,0,0,.45);
border-radius: 50%;
}
.aca-ds .carousel .carousel-control .glyphicon-chevron-left {
left: 50%;
margin-left: -20px;
}
.aca-ds .carousel .carousel-control .glyphicon-chevron-right {
right: 50%;
margin-right: -20px;
}
/* ==========================================================================
PHASE 2 — TABLEAUX ADMIN (voir audit §2.5 et §6 point 10)
==========================================================================
Cible `table.table1` (classe statique déjà présente dans le HTML de
toutes les vues admin.*.index). Depuis le 2026-07-18, le tri au clic est
assuré par js/aca-table-sort.js (JS vanilla, remplace jQuery +
jquery.tablesorter.js/theme.blue.css) : les classes `.aca-th-sortable`/
`.aca-th-sort--asc`/`.aca-th-sort--desc` sont posées par ce script, le
CSS ci-dessous se contente de leur donner une apparence (curseur,
flèche ▲/▼/⇅), sans toucher au JS. ========================================================================== */
.aca-ds table.table1 {
/* `width: auto` (2026-08-09, retour de Corentin — colonnes trop larges,
espace gaspillé) : chaque colonne épouse son contenu le plus large au
lieu d'être étirée pour occuper 100% du conteneur. `table-layout` reste
`auto` (valeur par défaut, pas posée en dur) : le navigateur continue
de faire passer le contenu à la ligne dans une colonne si la table
dépasserait la largeur disponible, comme avant — width:100% forçait
seulement un étirement quand il y avait de la place EN PLUS, jamais un
garde-fou contre le débordement.
Contour/ombre/centrage PAS posés ici (2026-08-09, retour de Corentin —
ne s'affichait pas correctement sur #aca-table-categories, le seul
tableau du site avec plusieurs : bug connu, border-radius +
overflow:hidden sur un ne clippe fiablement QUE le 1er
fragment/tbody dans certains moteurs de rendu, le reste du tableau
"dépassait" du cadre sans bordure ni ombre visibles au-delà). Portés
par `.aca-table-card` à la place — voir ce wrapper plus bas, qui
enveloppe chaque `` dans les 14 vues admin — un
classique clippe toujours correctement quelle que soit la
structure interne du tableau qu'il contient. */
width: auto;
max-width: 100%;
border-collapse: collapse;
background-color: var(--panel);
font-family: var(--font-body);
}
/* Carte (2026-08-09, stylisation validée par Corentin — maquette
proposition-style-tableaux-admin, corrigée le même jour pour le bug
multi-tbody ci-dessus) : enveloppe chaque ``.
`width: fit-content` (pas `auto`, qui prendrait toute la largeur
disponible) : le cadre épouse la largeur réelle de la table (elle-même
`width: auto`, cf. ci-dessus) au lieu de s'étirer inutilement à
`max-width` quand le contenu est plus étroit — nécessaire pour que
`margin: auto` centre effectivement quelque chose (un bloc `width: auto`
classique occupe déjà 100% de son parent, `margin: auto` n'aurait alors
aucun espace à répartir). `overflow-x: auto` (jamais `hidden`, qui
masquerait le contenu) : si un tableau reste malgré tout plus large que
1100px (beaucoup de colonnes), défilement horizontal DANS la carte
plutôt qu'un débordement de la mise en page — `overflow-y: hidden`
suffit pour clipper les coins arrondis. */
.aca-table-card {
width: fit-content;
max-width: min(1100px, 100%);
margin: 1.5rem auto;
border: 1px solid var(--border);
border-radius: 14px;
overflow-x: auto;
overflow-y: hidden;
box-shadow: var(--card-shadow);
}
/* Miniature de la colonne "Aperçu/Détail" de l'écran Contenus (chantier
fusion admin, Lot 6, 2026-08-14) — même principe que .aca-cmp-thumb
(hauteur fixe, largeur libre) mais sans le scale() dynamique (pas
d'iframe ici, juste une ![]()
). */
.aca-contenus-apercu-miniature {
max-height: 48px;
max-width: 80px;
object-fit: cover;
border-radius: 4px;
vertical-align: middle;
}
/* En-têtes : petites capitales, fond légèrement teinté d'accent, bordures
horizontales seulement. Couvre `th` ET `td` car certaines vues admin
utilisent `` dans le `` (markup existant, pas de notre fait). */
.aca-ds table.table1 thead th,
.aca-ds table.table1 thead td {
background-color: rgba(var(--accent-rgb), .14);
color: var(--text);
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
font-size: .78rem;
border: none;
border-top: 1px solid var(--border);
border-bottom: 2px solid var(--border);
padding: .5rem .6rem;
}
/* En-têtes triables (classe posée par aca-table-sort.js sur les cellules
sans champ de formulaire imbriqué, ex. la case "tout sélectionner" reste
non triable) : curseur pointeur + flèche ⇅ discrète au repos. */
.aca-ds table.table1 thead th.aca-th-sortable,
.aca-ds table.table1 thead td.aca-th-sortable {
cursor: pointer;
user-select: none;
}
.aca-ds table.table1 thead th.aca-th-sortable::after,
.aca-ds table.table1 thead td.aca-th-sortable::after {
content: "⇅";
display: inline-block;
margin-left: .35em;
opacity: .35;
font-size: .85em;
}
/* États de tri (classes posées/retirées dynamiquement par
aca-table-sort.js) : fond légèrement plus accentué que l'en-tête au
repos + flèche pleine opacité indiquant la direction active. */
.aca-ds table.table1 thead th.aca-th-sort--asc,
.aca-ds table.table1 thead th.aca-th-sort--desc,
.aca-ds table.table1 thead td.aca-th-sort--asc,
.aca-ds table.table1 thead td.aca-th-sort--desc {
background-color: rgba(var(--accent-rgb), .28);
}
.aca-ds table.table1 thead th.aca-th-sort--asc::after,
.aca-ds table.table1 thead td.aca-th-sort--asc::after {
content: "▲";
opacity: 1;
}
.aca-ds table.table1 thead th.aca-th-sort--desc::after,
.aca-ds table.table1 thead td.aca-th-sort--desc::after {
content: "▼";
opacity: 1;
}
.aca-ds table.table1 tbody td {
border: none;
border-bottom: 1px solid var(--border);
/* .5rem .6rem -> .85rem 1rem (2026-08-09, stylisation validée par
Corentin — lignes trop denses). */
padding: .85rem 1rem;
color: var(--text);
background-color: transparent;
vertical-align: middle;
}
/* Lignes alternées, à peine teintées. Calculées en :nth-child plutôt que
via une classe .odd/.even posée par du JS (comme avant le passage au
tri vanilla, 2026-07-18) : le tri au clic déplace les dans le DOM,
:nth-child se recalcule donc automatiquement après un tri, sans code JS
dédié. #aca-table-categories exclue : elle a déjà sa propre règle
plus bas (plusieurs par groupe + lignes de détail bloc/fiche
Corbeille intercalées entre 2 lignes "réelles" — un simple :nth-child
compterait aussi ces lignes cachées et décalerait l'alternance de façon
imprévisible selon l'état déplié/replié ; calculé côté PHP à la place,
voir admin/cmp/_content.php et admin/corbeille/_content.php).
Couleur : indigo fixe de la palette admin (2026-08-09) plutôt que
--accent-rgb (dépendant du thème public actif) — même teinte partout,
cohérent avec le zébrage CMP ci-dessous. */
.aca-ds table.table1:not(#aca-table-categories):not([id^="aca-table-corbeille-"]) tbody tr:nth-child(even) > td {
background-color: rgba(var(--admin-indigo-rgb), .035);
}
/* Zébrage calculé côté PHP pour CMP/Corbeille (voir commentaire ci-dessus)
— même teinte que la règle :nth-child générique, posée directement sur
la ligne concernée (classe .aca-zebra) plutôt que déduite en CSS. */
.aca-ds table.table1 tbody tr.aca-zebra > td {
background-color: rgba(var(--admin-indigo-rgb), .035);
}
.aca-ds table.table1 tbody tr:hover > td {
background-color: rgba(var(--admin-indigo-rgb), .10);
}
/* Renommage en ligne + ouverture au clic (2026-07-31, Spec_SEO.md §2.3,
voir aca-inline-title.js) : clic simple = ouvre (toute la ligne, y
compris le titre), double-clic sur le titre = renomme — même curseur
partout, le title="" natif détaille l'interaction au survol du titre. */
.aca-ds table[data-inline-title] tbody tr[data-open-url] {
cursor: pointer;
}
.aca-inline-title__input {
display: inline-block;
width: auto;
min-width: 12ch;
padding: .15rem .3rem;
height: auto;
cursor: text;
}
/* Aperçu pré-envoi du formulaire d'import d'images (2026-07-31,
Spec_SEO.md §2.3, voir aca-images-upload-preview.js) : simple curseur
texte sur le nom, pas d'ouverture au clic possible ici (rien n'est
encore enregistré) contrairement aux tableaux [data-inline-title]. */
#aca-images-upload-preview {
margin-top: 1.5rem;
}
.aca-images-upload-preview__nom {
cursor: text;
}
/* Formulaire "Ajouter une propriété" schema.org (2026-07-31, Spec_SEO.md
§2.6, voir admin/schemaOrg/_content.php) : select + valeur + bouton sur
une ligne plutôt qu'empilés verticalement. */
.aca-schemaorg-ajouter {
display: flex;
gap: .5rem;
align-items: center;
margin: .5rem 0 2rem;
}
.aca-schemaorg-ajouter select {
flex: 0 0 auto;
width: auto;
}
.aca-schemaorg-ajouter input[type="text"] {
flex: 1 1 auto;
}
/* Code couleur sémantique en bordure gauche de cellule (§2.5), plutôt
qu'en fond plein — réservé aux colonnes qui reflètent un vrai état
binaire existant (ex. `certificatMedical` Oui/Non dans admin.utilisateurs,
présence/absence d'image dans admin.articles) : classes posées côté PHP
au cas par cas, pas de code couleur inventé sur des colonnes purement
descriptives (titre, grade, catégorie...). */
/* Jade/rouge fixes (2026-08-09, stylisation validée par Corentin — palette
admin, voir --admin-* dans :root) plutôt que --success/--danger : ces 2
tokens varient selon le thème public actif (5 rendus différents pour le
même statut Oui/Non), la palette admin reste elle identique partout. */
.aca-ds table.table1 td.aca-flag-ok {
box-shadow: inset 3px 0 0 var(--admin-jade);
}
.aca-ds table.table1 td.aca-flag-danger {
box-shadow: inset 3px 0 0 var(--admin-rouge);
}
/* Pastille présent/absent (2026-07-17, Faire l'appel + Suivi des
présences) : remplace le ✓/✗ texte brut, peu lisible sur une grille
dense. Couleur ET symbole conservés ensemble (accessibilité daltonisme
— ne pas se fier uniquement à la couleur) ; var(--success)/var(--danger)
s'adaptent automatiquement aux 5 thèmes du site. */
.aca-presence-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.4em;
height: 1.4em;
border-radius: 50%;
font-weight: 700;
line-height: 1;
}
.aca-presence-badge--present {
background: var(--success);
color: var(--success-contrast);
}
.aca-presence-badge--absent {
background: var(--danger);
color: var(--danger-contrast);
}
/* Vue mensuelle de Faire l'appel (2026-07-17) : une colonne étroite par
jour du mois, table large -> défilement horizontal plutôt que de casser
la mise en page (cohérent avec les autres tableaux larges du site). */
.aca-appel-mensuel-wrapper {
overflow-x: auto;
}
.aca-appel-jour {
text-align: center;
min-width: 2.4em;
}
/* Bordure d'indication "commentaire présent" — inset comme .aca-flag-ok/
danger, mais sur --accent pour ne pas se confondre avec le sens
présent/absent (déjà porté par --success/--danger sur la pastille). */
.aca-appel-jour--commente {
box-shadow: inset 0 0 0 2px var(--accent);
}
/* Le de chaque jour passé sert de popover cliquable (même
mécanisme zéro-JS que Présentation/☰/Catégorie dans la navbar) — le
ne doit porter aucun style de liste par défaut. */
.aca-appel-popover summary {
list-style: none;
cursor: pointer;
}
.aca-appel-popover summary::-webkit-details-marker {
display: none;
}
.aca-appel-popover__panel {
position: absolute;
z-index: 1040;
margin-top: .25rem;
padding: .75rem;
min-width: 220px;
text-align: left;
}
.aca-appel-vide {
color: var(--border);
}
/* Largeur commune pour les boutons Modifier/Supprimer de la colonne
Actions — sans ça, "Modifier" et "Supprimer" ont des largeurs
différentes d'une ligne à l'autre (texte + police d'emphase en gras),
ce qui donne un alignement irrégulier. 100px couvre "Supprimer" (le
plus long des deux) avec un peu de marge, quelle que soit la table.
Sélecteur corrigé le 2026-07-17 : ciblait `.btn` (classe Bootstrap),
mais tous les boutons admin utilisent `.aca-btn` (voir plus haut) —
cette règle ne s'appliquait donc encore nulle part. */
.aca-ds table.table1 td .aca-btn:not(.aca-btn--sm) {
min-width: 100px;
text-align: center;
}
/* Empêche "Modifier"/le formulaire "Supprimer" de retomber chacun sur sa
propre ligne dans la colonne Actions. Généralisée à `td:last-child` sur
tous les tableaux admin (correctifs round 7, 2026-07-18 : le même
empilement, initialement corrigé uniquement sur #aca-table-categories
via `.aca-categories-admin__actions`, existait aussi de façon identique
sur Administrer les utilisateurs — et par construction sur les 8 autres
tableaux admin partageant strictement le même motif HTML, Actions
toujours en dernière colonne : images, vidéos, articles, techniques,
attaques, formesTravail, nomsTechniques, informationsPersonnelles).
Exclusion des lignes `.aca-table-section`/`.aca-table-section__vide`
(catégories) : leur dernière — et unique — cellule est un `` de titre de section, pas une colonne Actions ; forcer
nowrap dessus risquerait de la faire déborder sur petit écran. */
.aca-ds table.table1 tbody tr:not(.aca-table-section):not(.aca-table-section__vide) > td:last-child {
white-space: nowrap;
}
.aca-ds table.table1 tbody tr > td:last-child form {
margin-left: .5rem;
}
/* Empêche "↑"/"↓" (colonne Réordonner) de retomber chacun sur sa propre
ligne (correctifs round 6, 2026-07-18) : `min-width: 100px` ci-dessus ne
visait que Modifier/Supprimer, mais son sélecteur (`.aca-btn` générique)
s'appliquait aussi par erreur aux petits boutons `.aca-btn--sm` de
réordonnancement, sans qu'aucun `white-space: nowrap` ne protège cette
colonne (contrairement à la colonne Actions, protégée ci-dessus) —
la colonne réelle (~117px) ne pouvant contenir 2 boutons artificiellement
élargis à 100px chacun, "↓" wrappait sous "↑". Exclusion de `--sm` du
`min-width` (règle du dessus) + `nowrap` ici : les deux traitent la même
cause, l'un empêchant l'élargissement artificiel, l'autre empêchant le
retour à la ligne si jamais la colonne redevient étroite. */
form.deplacer {
white-space: nowrap;
}
/* ==========================================================================
Réinitialisation générique de (triangle natif masqué, curseur
pointeur, sans puce) — encore utilisée par le du sélecteur de
thème (.aca-theme-switcher, voir templates/default.php). L'ancien
composant "bandeau + articles déroulants" qui utilisait aussi ce reset
(.aca-band, articles repliables) a été abandonné le 2026-07-15 au profit
d'une grille de cartes-liens, voir plus bas dans ce fichier.
========================================================================== */
.aca-ds summary {
display: block;
cursor: pointer;
list-style: none;
}
.aca-ds summary::-webkit-details-marker { display: none; }
.aca-ds summary::marker { display: none; }
/* ==========================================================================
Alignement d'images dans le contenu d'article (TinyMCE, natif) — classes
posées par la config `formats` de aca-article-editor.js, jamais présentes
dans un article existant avant ce chantier : règles ciblées sur des noms
de classe inédits, zéro risque de régression sur le contenu déjà en base.
========================================================================== */
.aca-ds img.aca-img-left,
.aca-ds img.aca-img-right {
max-width: 45%;
height: auto;
margin-bottom: 1rem;
border-radius: var(--radius);
}
.aca-ds img.aca-img-left {
float: left;
margin-right: 1.5rem;
}
.aca-ds img.aca-img-right {
float: right;
margin-left: 1.5rem;
}
.aca-ds img.aca-img-center {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto 1rem;
border-radius: var(--radius);
}
/* Clearfix sur les conteneurs réels où le contenu brut d'un article
s'affiche (articles/show.php, seule page à afficher .contenu directement
dans une .aca-card depuis l'abandon du système /résumé) — évite
qu'une image flottante déborde de son bloc. Inoffensif si aucune image
flottante n'est présente. Scopé à .aca-card en général (plutôt qu'un
sélecteur par page) : ::after vide ne coûte rien sur les .aca-card qui
n'ont jamais de contenu flottant (thème switcher, club-picker, cartes-liens
d'articles...). */
.aca-ds .aca-card::after {
content: "";
display: table;
clear: both;
}
@media (max-width: 480px) {
.aca-ds img.aca-img-left,
.aca-ds img.aca-img-right {
float: none;
max-width: 100%;
margin: 0 0 1rem;
}
}
/* ==========================================================================
COMPOSANT : Encadré d'article (.article-callout) — seul bloc personnalisé
conservé (le bloc .article-figure "texte/image côte à côte figé" a été
abandonné au profit de l'alignement d'image natif ci-dessus). Fond en
`--bg` (pas `--panel`) et pas d'ombre, délibérément : ambiance "fiche
papier" chaleureuse plutôt qu'une carte web classique, cf. la fiche de
personnage JDR de l'audit design (§6) donnée en référence par Corentin.
`--bg` diffère de `--panel` (fond de .aca-card) sur les 5 thèmes, donc
reste visuellement distinct sans teinte supplémentaire.
========================================================================== */
.article-callout {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
margin: 1.5rem 0;
font-family: var(--font-body);
color: var(--text);
clear: both;
/* Correctif de largeur (2026-08-07, retour de Corentin — correctif ciblé,
PAS le traitement visuel complet prévu au chantier séparé "Tableaux et
encadrés"/charte graphique) : un encadré court ("Lundi & Mercredi")
s'étirait sur toute la largeur du bloc parent (comportement par défaut
d'un block-level), disproportionné par rapport à son contenu.
width: fit-content + min-width pour éviter l'inverse (un encadré ridicule
sur un mot très court) + max-width: 100% pour ne jamais déborder du
conteneur sur un contenu long (article, ou colonne étroite en mobile).
.calloutBlock.tsx (éditeur BlockNote) réutilise cette même classe, voir
son commentaire — ce correctif s'applique donc aussi à l'édition, pas
seulement au rendu public. */
width: fit-content;
min-width: 12rem;
max-width: 100%;
}
.article-callout > *:first-child { margin-top: 0; }
.article-callout > *:last-child { margin-bottom: 0; }
/* ==========================================================================
COMPOSANT : Carte Google Maps (.aca-google-maps) — 2026-08-09, même
diagnostic que ci-dessus : googleMapsBlock.tsx exportait un
| ` dans le `` (markup existant, pas de notre fait). */
.aca-ds table.table1 thead th,
.aca-ds table.table1 thead td {
background-color: rgba(var(--accent-rgb), .14);
color: var(--text);
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
font-size: .78rem;
border: none;
border-top: 1px solid var(--border);
border-bottom: 2px solid var(--border);
padding: .5rem .6rem;
}
/* En-têtes triables (classe posée par aca-table-sort.js sur les cellules
sans champ de formulaire imbriqué, ex. la case "tout sélectionner" reste
non triable) : curseur pointeur + flèche ⇅ discrète au repos. */
.aca-ds table.table1 thead th.aca-th-sortable,
.aca-ds table.table1 thead td.aca-th-sortable {
cursor: pointer;
user-select: none;
}
.aca-ds table.table1 thead th.aca-th-sortable::after,
.aca-ds table.table1 thead td.aca-th-sortable::after {
content: "⇅";
display: inline-block;
margin-left: .35em;
opacity: .35;
font-size: .85em;
}
/* États de tri (classes posées/retirées dynamiquement par
aca-table-sort.js) : fond légèrement plus accentué que l'en-tête au
repos + flèche pleine opacité indiquant la direction active. */
.aca-ds table.table1 thead th.aca-th-sort--asc,
.aca-ds table.table1 thead th.aca-th-sort--desc,
.aca-ds table.table1 thead td.aca-th-sort--asc,
.aca-ds table.table1 thead td.aca-th-sort--desc {
background-color: rgba(var(--accent-rgb), .28);
}
.aca-ds table.table1 thead th.aca-th-sort--asc::after,
.aca-ds table.table1 thead td.aca-th-sort--asc::after {
content: "▲";
opacity: 1;
}
.aca-ds table.table1 thead th.aca-th-sort--desc::after,
.aca-ds table.table1 thead td.aca-th-sort--desc::after {
content: "▼";
opacity: 1;
}
.aca-ds table.table1 tbody td {
border: none;
border-bottom: 1px solid var(--border);
/* .5rem .6rem -> .85rem 1rem (2026-08-09, stylisation validée par
Corentin — lignes trop denses). */
padding: .85rem 1rem;
color: var(--text);
background-color: transparent;
vertical-align: middle;
}
/* Lignes alternées, à peine teintées. Calculées en :nth-child plutôt que
via une classe .odd/.even posée par du JS (comme avant le passage au
tri vanilla, 2026-07-18) : le tri au clic déplace les | par groupe + lignes de détail bloc/fiche
Corbeille intercalées entre 2 lignes "réelles" — un simple :nth-child
compterait aussi ces lignes cachées et décalerait l'alternance de façon
imprévisible selon l'état déplié/replié ; calculé côté PHP à la place,
voir admin/cmp/_content.php et admin/corbeille/_content.php).
Couleur : indigo fixe de la palette admin (2026-08-09) plutôt que
--accent-rgb (dépendant du thème public actif) — même teinte partout,
cohérent avec le zébrage CMP ci-dessous. */
.aca-ds table.table1:not(#aca-table-categories):not([id^="aca-table-corbeille-"]) tbody tr:nth-child(even) > td {
background-color: rgba(var(--admin-indigo-rgb), .035);
}
/* Zébrage calculé côté PHP pour CMP/Corbeille (voir commentaire ci-dessus)
— même teinte que la règle :nth-child générique, posée directement sur
la ligne concernée (classe .aca-zebra) plutôt que déduite en CSS. */
.aca-ds table.table1 tbody tr.aca-zebra > td {
background-color: rgba(var(--admin-indigo-rgb), .035);
}
.aca-ds table.table1 tbody tr:hover > td {
background-color: rgba(var(--admin-indigo-rgb), .10);
}
/* Renommage en ligne + ouverture au clic (2026-07-31, Spec_SEO.md §2.3,
voir aca-inline-title.js) : clic simple = ouvre (toute la ligne, y
compris le titre), double-clic sur le titre = renomme — même curseur
partout, le title="" natif détaille l'interaction au survol du titre. */
.aca-ds table[data-inline-title] tbody tr[data-open-url] {
cursor: pointer;
}
.aca-inline-title__input {
display: inline-block;
width: auto;
min-width: 12ch;
padding: .15rem .3rem;
height: auto;
cursor: text;
}
/* Aperçu pré-envoi du formulaire d'import d'images (2026-07-31,
Spec_SEO.md §2.3, voir aca-images-upload-preview.js) : simple curseur
texte sur le nom, pas d'ouverture au clic possible ici (rien n'est
encore enregistré) contrairement aux tableaux [data-inline-title]. */
#aca-images-upload-preview {
margin-top: 1.5rem;
}
.aca-images-upload-preview__nom {
cursor: text;
}
/* Formulaire "Ajouter une propriété" schema.org (2026-07-31, Spec_SEO.md
§2.6, voir admin/schemaOrg/_content.php) : select + valeur + bouton sur
une ligne plutôt qu'empilés verticalement. */
.aca-schemaorg-ajouter {
display: flex;
gap: .5rem;
align-items: center;
margin: .5rem 0 2rem;
}
.aca-schemaorg-ajouter select {
flex: 0 0 auto;
width: auto;
}
.aca-schemaorg-ajouter input[type="text"] {
flex: 1 1 auto;
}
/* Code couleur sémantique en bordure gauche de cellule (§2.5), plutôt
qu'en fond plein — réservé aux colonnes qui reflètent un vrai état
binaire existant (ex. `certificatMedical` Oui/Non dans admin.utilisateurs,
présence/absence d'image dans admin.articles) : classes posées côté PHP
au cas par cas, pas de code couleur inventé sur des colonnes purement
descriptives (titre, grade, catégorie...). */
/* Jade/rouge fixes (2026-08-09, stylisation validée par Corentin — palette
admin, voir --admin-* dans :root) plutôt que --success/--danger : ces 2
tokens varient selon le thème public actif (5 rendus différents pour le
même statut Oui/Non), la palette admin reste elle identique partout. */
.aca-ds table.table1 td.aca-flag-ok {
box-shadow: inset 3px 0 0 var(--admin-jade);
}
.aca-ds table.table1 td.aca-flag-danger {
box-shadow: inset 3px 0 0 var(--admin-rouge);
}
/* Pastille présent/absent (2026-07-17, Faire l'appel + Suivi des
présences) : remplace le ✓/✗ texte brut, peu lisible sur une grille
dense. Couleur ET symbole conservés ensemble (accessibilité daltonisme
— ne pas se fier uniquement à la couleur) ; var(--success)/var(--danger)
s'adaptent automatiquement aux 5 thèmes du site. */
.aca-presence-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.4em;
height: 1.4em;
border-radius: 50%;
font-weight: 700;
line-height: 1;
}
.aca-presence-badge--present {
background: var(--success);
color: var(--success-contrast);
}
.aca-presence-badge--absent {
background: var(--danger);
color: var(--danger-contrast);
}
/* Vue mensuelle de Faire l'appel (2026-07-17) : une colonne étroite par
jour du mois, table large -> défilement horizontal plutôt que de casser
la mise en page (cohérent avec les autres tableaux larges du site). */
.aca-appel-mensuel-wrapper {
overflow-x: auto;
}
.aca-appel-jour {
text-align: center;
min-width: 2.4em;
}
/* Bordure d'indication "commentaire présent" — inset comme .aca-flag-ok/
danger, mais sur --accent pour ne pas se confondre avec le sens
présent/absent (déjà porté par --success/--danger sur la pastille). */
.aca-appel-jour--commente {
box-shadow: inset 0 0 0 2px var(--accent);
}
/* Le ` de titre de section, pas une colonne Actions ; forcer
nowrap dessus risquerait de la faire déborder sur petit écran. */
.aca-ds table.table1 tbody tr:not(.aca-table-section):not(.aca-table-section__vide) > td:last-child {
white-space: nowrap;
}
.aca-ds table.table1 tbody tr > td:last-child form {
margin-left: .5rem;
}
/* Empêche "↑"/"↓" (colonne Réordonner) de retomber chacun sur sa propre
ligne (correctifs round 6, 2026-07-18) : `min-width: 100px` ci-dessus ne
visait que Modifier/Supprimer, mais son sélecteur (`.aca-btn` générique)
s'appliquait aussi par erreur aux petits boutons `.aca-btn--sm` de
réordonnancement, sans qu'aucun `white-space: nowrap` ne protège cette
colonne (contrairement à la colonne Actions, protégée ci-dessus) —
la colonne réelle (~117px) ne pouvant contenir 2 boutons artificiellement
élargis à 100px chacun, "↓" wrappait sous "↑". Exclusion de `--sm` du
`min-width` (règle du dessus) + `nowrap` ici : les deux traitent la même
cause, l'un empêchant l'élargissement artificiel, l'autre empêchant le
retour à la ligne si jamais la colonne redevient étroite. */
form.deplacer {
white-space: nowrap;
}
/* ==========================================================================
Réinitialisation générique de (triangle natif masqué, curseur
pointeur, sans puce) — encore utilisée par le /résumé) — évite
qu'une image flottante déborde de son bloc. Inoffensif si aucune image
flottante n'est présente. Scopé à .aca-card en général (plutôt qu'un
sélecteur par page) : ::after vide ne coûte rien sur les .aca-card qui
n'ont jamais de contenu flottant (thème switcher, club-picker, cartes-liens
d'articles...). */
.aca-ds .aca-card::after {
content: "";
display: table;
clear: both;
}
@media (max-width: 480px) {
.aca-ds img.aca-img-left,
.aca-ds img.aca-img-right {
float: none;
max-width: 100%;
margin: 0 0 1rem;
}
}
/* ==========================================================================
COMPOSANT : Encadré d'article (.article-callout) — seul bloc personnalisé
conservé (le bloc .article-figure "texte/image côte à côte figé" a été
abandonné au profit de l'alignement d'image natif ci-dessus). Fond en
`--bg` (pas `--panel`) et pas d'ombre, délibérément : ambiance "fiche
papier" chaleureuse plutôt qu'une carte web classique, cf. la fiche de
personnage JDR de l'audit design (§6) donnée en référence par Corentin.
`--bg` diffère de `--panel` (fond de .aca-card) sur les 5 thèmes, donc
reste visuellement distinct sans teinte supplémentaire.
========================================================================== */
.article-callout {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
margin: 1.5rem 0;
font-family: var(--font-body);
color: var(--text);
clear: both;
/* Correctif de largeur (2026-08-07, retour de Corentin — correctif ciblé,
PAS le traitement visuel complet prévu au chantier séparé "Tableaux et
encadrés"/charte graphique) : un encadré court ("Lundi & Mercredi")
s'étirait sur toute la largeur du bloc parent (comportement par défaut
d'un block-level), disproportionné par rapport à son contenu.
width: fit-content + min-width pour éviter l'inverse (un encadré ridicule
sur un mot très court) + max-width: 100% pour ne jamais déborder du
conteneur sur un contenu long (article, ou colonne étroite en mobile).
.calloutBlock.tsx (éditeur BlockNote) réutilise cette même classe, voir
son commentaire — ce correctif s'applique donc aussi à l'édition, pas
seulement au rendu public. */
width: fit-content;
min-width: 12rem;
max-width: 100%;
}
.article-callout > *:first-child { margin-top: 0; }
.article-callout > *:last-child { margin-bottom: 0; }
/* ==========================================================================
COMPOSANT : Carte Google Maps (.aca-google-maps) — 2026-08-09, même
diagnostic que ci-dessus : googleMapsBlock.tsx exportait un |