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;
}
.article-callout > *:first-child { margin-top: 0; }
.article-callout > *:last-child { margin-bottom: 0; }
/* ==========================================================================
PHASE 3 — MENU DE PRÉSENTATION (sélecteur de thème visiteur, voir audit §3)
==========================================================================
Réutilise / (§2.8) : pas de JS pour l'ouverture/
fermeture du panneau, seulement pour appliquer le thème choisi et le
mémoriser (voir public_html/js/aca-theme-switcher.js + le script inline
dans templates/default.php). Le panneau lui-même reprend .aca-card.
Le bouton ⚙️ reste dans le habillage sombre existant de la navbar
(.navbar-inverse, non retouché aux Phases 1-2) : pas de couleur de
thème forcée dessus, il hérite du blanc de la navbar comme les autres
liens de nav.
========================================================================== */
.aca-theme-switcher {
position: relative;
}
.aca-theme-switcher__toggle {
display: block;
padding: 15px;
}
.aca-theme-switcher__panel {
position: absolute;
right: 0;
top: 100%;
z-index: 1040;
min-width: 220px;
max-width: calc(100vw - 2rem);
}
.aca-theme-switcher__heading {
margin: 0 0 .5rem;
font-family: var(--font-display);
font-weight: 700;
font-size: .9rem;
color: var(--text);
}
.aca-theme-switcher__option {
display: flex;
align-items: center;
gap: .5rem;
padding: .35rem .4rem;
margin: 0 -0.4rem;
border-radius: var(--radius);
font-family: var(--font-body);
font-weight: 400;
color: var(--text);
cursor: pointer;
}
/* Indication du thème actif au-delà du simple point radio coché —
dégradation gracieuse : sans support de :has(), le point radio coché
reste l'indicateur, ce qui suffit fonctionnellement. */
.aca-theme-switcher__option:has(input:checked) {
background: rgba(var(--accent-rgb), .14);
}
.aca-theme-switcher__option input[type="radio"] {
accent-color: var(--accent);
margin: 0;
}
.aca-theme-switcher__swatch {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,.15);
flex-shrink: 0;
}
/* ==========================================================================
PHASE 4 — NAV PRINCIPALE (bandeau plein contraste, voir audit §2.3)
==========================================================================
La nav suit maintenant --text (pas --accent) comme couleur de fond,
avec --bg en contraste pour le texte/liens. Choix délibéré, voir le
raisonnement ci-dessous — c'est directement la leçon retenue de la
Phase 1 sur les liens (Yin et Yang / Eau-Harmonie) :
- --accent seul aurait posé deux problèmes concrets : pour Eau/Harmonie,
le ratio de contraste blanc-sur-accent tombe autour de 4.5:1 (limite
AA, pas de marge) ; pour Yin et Yang, --accent EST --text (#1A1A1A) —
un fond de nav en --accent aurait été identique au token qu'on
s'apprêtait à utiliser pour le texte, et surtout aurait rendu le
bouton Connexion (fond --accent) invisible sur la nav (même couleur).
- --text/--bg est la paire déjà éprouvée sur tout le site pour un
contraste fort garanti, quel que soit le thème (y compris Feu du
combat, seul thème où --text est clair et --bg sombre — le sens
s'inverse mais la paire reste toujours fortement contrastée).
--bg-rgb sert au survol : un lavis semi-transparent de --bg par-dessus
un fond --text reste visible quel que soit le thème, y compris Feu du
combat où --text est déjà clair (un lavis sombre l'assombrit au lieu de
l'éclaircir, mais reste perceptible dans les deux sens).
========================================================================== */
/* 2026-07-16 (3e itération) : les classes Bootstrap .navbar/.navbar-inverse
sont retirées du HTML (plus de fond/bordure/rayon Bootstrap non désirés,
et plus aucune règle Bootstrap résiduelle — position, min-height,
margin-bottom — pouvant interférer avec la largeur). .aca-navbar-row
porte maintenant seule tout ce qui était nécessaire (fond du thème actif,
position pour ancrer les panneaux déroulants en absolute). */
.aca-ds .aca-navbar-row {
background-color: var(--text);
border: none;
font-family: var(--font-display);
}
/* refonte simplifiée : les liens principaux (Accueil/Horaires/.../
catégories) ne sont plus affichés inline dans la nav — ils vivent
tous dans le panneau ☰ (.aca-nav-overflow__panel, fond clair .aca-card),
donc plus besoin d'y forcer une couleur claire pensée pour un fond de nav
sombre : ils héritent simplement de la couleur de lien standard du site
(.aca-ds a, --accent), lisible sur fond clair. Seul le toggle du
sélecteur de thème reste concerné ici (bouton directement sur le fond
sombre de la nav). */
.aca-ds .aca-navbar-row .aca-theme-switcher__toggle {
color: var(--bg);
font-family: var(--font-display);
}
.aca-ds .aca-navbar-row .aca-theme-switcher__toggle:hover,
.aca-ds .aca-navbar-row .aca-theme-switcher__toggle:focus {
color: var(--bg);
background-color: rgba(var(--bg-rgb), .15);
}
/* Bouton Connexion/Déconnexion/nom d'utilisateur : garde son habillage
.btn-success existant (fond --accent, Phase 1), on ajoute juste une
bordure --bg pour qu'il reste visible même quand --accent est proche ou
identique à --text (donc au fond de la nav) — cas de Yin et Yang. */
.aca-ds .aca-navbar-row .btn-success {
border-color: var(--bg);
}
/* -- Refonte simplifiée de la nav (2026-07-16) --------------------------
Logo seul à gauche, tout le reste à droite (Présentation icône seule,
Connexion/Déconnexion, puis ☰ à l'extrémité). Remplace l'ancien découpage
Bootstrap .navbar-header/.navbar-collapse (float) par un flex simple —
plus besoin du composant JS de mesure d'espace (aca-nav-overflow.js,
supprimé) : tous les liens principaux et catégories vivent en permanence
dans le panneau ☰, sans condition de largeur d'écran. -- */
/* 2026-07-16 (2e itération) : appliqué directement sur .navbar.navbar-inverse
(plus de imbriqué à l'intérieur) — la tentative
précédente neutralisait .container via width:100%/max-width:none, mais
malgré une spécificité et un ordre de cascade corrects sur le papier
(vérifiés), le rendu réel restait centré/étroit. Plutôt que de continuer
à contrer les règles Bootstrap de .container (width fixe par palier
750/970/1170px + margin:0 auto), le conteneur .container est supprimé du
HTML : plus aucune classe Bootstrap de largeur à neutraliser.
3e itération : .navbar/.navbar-inverse retirés du HTML aussi (fond/bordure
Bootstrap non désirés) — .aca-navbar-row reprend maintenant seule tout ce
que .navbar fournissait (position pour ancrer les panneaux déroulants en
absolute, hauteur mini, marge basse), plus aucune classe Bootstrap du
tout sur cet élément. */
.aca-navbar-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 15px;
box-sizing: border-box;
position: relative;
min-height: 50px;
margin-bottom: 20px;
}
.aca-navbar-brand {
display: flex;
align-items: center;
}
.aca-navbar-right-group {
display: flex;
align-items: center;
gap: .5rem;
}
/* ☰ : même mécanisme que .aca-theme-switcher (details/summary natif, pas de
JS pour ouvrir/fermer — voir §2.8) — remplace l'ancien bouton Bootstrap
.navbar-toggle (8 barres, jugé trop grand/haut) et son comportement
conditionné par point de rupture, permanent désormais. */
.aca-nav-overflow {
position: relative;
}
.aca-nav-overflow__toggle {
display: block;
background: transparent;
border: 2px solid var(--bg);
border-radius: var(--radius);
color: var(--bg);
font-size: 1.1rem;
line-height: 1;
padding: .3em .5em;
cursor: pointer;
}
.aca-nav-overflow__toggle:hover,
.aca-nav-overflow__toggle:focus {
background-color: rgba(var(--bg-rgb), .15);
}
/* Panneau : même mécanisme que .aca-theme-switcher__panel (dropdown
position:absolute, masqué/affiché nativement par , pas de
display:none/is-open à gérer ici), réutilise .aca-card pour fond/bordure/
ombre — le texte hérite de var(--text)/--accent (couleurs standard du
site, lisibles sur fond clair). */
.aca-nav-overflow__panel {
position: absolute;
right: 0;
top: 100%;
z-index: 1040;
min-width: 220px;
max-width: calc(100vw - 2rem);
margin: 0;
padding: .5rem;
list-style: none;
}
.aca-nav-overflow__panel > li {
list-style: none;
}
.aca-nav-overflow__panel > li > a {
display: block;
padding: .5rem;
}
/* Séparateur entre les liens principaux et le bloc "Menu" rapatrié
(2026-07-16, voir templates/default.php). */
.aca-nav-overflow__separator hr {
margin: .35rem 0;
border: none;
border-top: 1px solid var(--border);
}
/* Easter egg (footer, 🐉) : du texte brut dans un hérite du curseur
"text" (I-beam) du navigateur au survol, comme n'importe quel texte
sélectionnable — ça trahissait visuellement que l'icône était spéciale.
Neutralisé explicitement : ni curseur ni sélection, l'icône doit rester
indiscernable du reste du footer. */
.aca-easter-egg {
cursor: default;
user-select: none;
-webkit-user-select: none;
}
/* Recherche globale (2026-07-16) : réutilise .aca-theme-switcher/__panel
(dropdown , même mécanisme que Présentation) — seul le contenu
du panneau change, un formulaire au lieu d'une liste de thèmes. */
.aca-search-panel {
min-width: 260px;
}
.aca-search-form {
display: flex;
gap: .5rem;
}
.aca-search-form .form-control {
flex: 1;
min-width: 0;
}
/* Export "impression/PDF" du bilan de présences (2026-07-16) : masque la nav,
la sidebar et les contrôles de filtre/impression au moment d'imprimer —
l'impression navigateur ("Enregistrer en PDF") suffit, pas de dépendance
PDF ajoutée. .aca-no-print est réutilisable ailleurs si besoin. */
@media print {
.aca-navbar-row,
footer,
.aca-no-print {
display: none !important;
}
}
/* Focus clavier : la règle globale (§6 point 7) utilise --accent, invisible
sur la nav quand --accent == --text (Yin et Yang). On force --bg ici. */
.aca-ds .aca-navbar-row a:focus-visible,
.aca-ds .aca-navbar-row summary:focus-visible,
.aca-ds .aca-navbar-row button:focus-visible {
outline-color: var(--bg);
}
/* ==========================================================================
MIGRATION HORS BOOTSTRAP (audit §8) — CSS natif, page par page
==========================================================================
`.aca-native` marque le conteneur d'une page (ou d'une partie de page)
dont le contenu interne n'utilise plus les classes de grille Bootstrap
(.col-*), remplacées par grid/flexbox natif appuyé sur les tokens
.aca-ds. bootstrap-3.2.0.min.css reste chargé globalement tant que
toutes les pages n'ont pas été traitées — .aca-native ne fait QUE
marquer/documenter l'avancement, il n'a aucune règle visuelle propre.
Pages migrées à ce jour, à l'intérieur de leur colonne de contenu — le
wrapper .row.row-offcanvas et la sidebar (menu.php) restent en
Bootstrap, partagés par presque toutes les pages donc hors scope d'une
migration "une page à la fois" :
- FAQ (app/Views/FAQ/index.php)
- Horaires (app/Views/horaires/index.php)
- piedDePages (app/Views/piedDePages/index.php) — Contactez-nous /
Mentions légales / Liens, sert 3 catégories différentes (id=8/9/10)
- S'inscrire (app/Views/sInscrires/index.php)
- Archives (app/Views/archives/index.php)
- Sidebars de filtrage par catégorie (.aca-filter-list, remplace
.list-group/.list-group-item) : articles/index.php,
articles/category.php, images/index.php, images/category.php,
videos/index.php, videos/category.php
- accueil (app/Views/accueil/index.php) — page la plus complexe à ce
jour. Le carrousel (carousel.php, composant JS Bootstrap réel) est
volontairement INCHANGÉ, hors scope d'une migration de grille/CSS.
- Contenu principal des 6 pages articles/images/vidéos ci-dessus
(dernier morceau) : articles/index.php et articles/category.php
réutilisent .aca-media-item (le déjà en
place depuis la Phase 2 devient l'item "texte" du grid) ; images et
vidéos utilisent une .aca-card par élément (titre + média), voir
.aca-gallery-image/.aca-gallery-video. Le carrousel de
images/index.php et images/category.php (require carousel.php) est
lui aussi volontairement inchangé, même raison que sur l'accueil.
Toutes ces pages sont maintenant migrées site public dans leur
intégralité (hors menu.php et le carrousel Bootstrap JS).
========================================================================== */
/* -- .aca-media-item (pattern titre + texte + illustration en 2 colonnes)
a été retiré (2026-07-15) : la colonne image dédiée par article a été
supprimée (redondante avec les images insérées directement dans le
texte via TinyMCE, voir plus bas) sur les 7 pages qui la partageaient
(FAQ, Horaires, S'inscrire, Accueil, articles/index.php, category.php,
articles/show.php) — chaque article est maintenant une simple .aca-card
pleine largeur, plus de grid 2 colonnes ni de breakpoint dédié ici. -- */
/* -- .aca-filter-list : sidebar de filtrage par catégorie (articles,
images, vidéos — 6 fichiers, même composant répété), remplace
.list-group/.list-group-item. Reprend EXACTEMENT le même traitement
visuel que .aca-ds .list-group-item (couleurs, état actif) — seule la
structure (display/padding/bordures, fournie par Bootstrap jusqu'ici)
est maintenant native, rien ne change à l'écran. Le wrapper de
positionnement (.col-xs-6.col-sm-3.sidebar-offcanvas) reste en
Bootstrap, comme le wrapper de contenu principal sur les autres pages
migrées — il doit continuer à cohabiter avec la sidebar menu.php,
elle-même toujours flottée en Bootstrap juste à côté. -- */
.aca-filter-list {
display: flex;
flex-direction: column;
}
.aca-filter-list__item {
display: block;
padding: 10px 15px;
background: var(--panel);
border: 1px solid var(--border);
border-top: none;
color: var(--text);
font-family: var(--font-body);
text-decoration: none;
}
/* :first-of-type/:last-of-type plutôt que :first-child/:last-child
(2026-07-17) : le panneau admin insère désormais des titres de groupe
(.aca-filter-list__heading) entre les liens — avec :first-child, le
premier VRAI lien perdrait son arrondi/bordure du haut dès qu'un titre
le précède (il ne serait plus le premier enfant). :first-of-type ignore
les autres types d'éléments intercalés, cible bien le premier/dernier
.aca-filter-list__item quel que soit ce qui l'entoure. */
.aca-filter-list__item:first-of-type {
border-top: 1px solid var(--border);
border-radius: var(--radius) var(--radius) 0 0;
}
.aca-filter-list__item:last-of-type {
border-radius: 0 0 var(--radius) var(--radius);
}
.aca-filter-list__item:hover,
.aca-filter-list__item:focus {
background: var(--border);
color: var(--panel);
}
.aca-filter-list__item.is-active,
.aca-filter-list__item.is-active:hover,
.aca-filter-list__item.is-active:focus {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-contrast);
}
/* Titre du panneau ("Administrer") et sous-titres de groupe (2026-07-17,
réorganisation du menu admin) : texte seul, ni lien ni bouton, pas de
fond/bordure/hover — se distingue visuellement des vrais liens. */
.aca-filter-list__title {
margin: 0;
padding: 10px 15px 4px;
font-family: var(--font-display);
font-weight: 700;
color: var(--text);
}
.aca-filter-list__heading {
margin: 0;
padding: 8px 15px 2px;
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text);
opacity: .65;
}
/* -- .aca-hero : bandeau club switcher tout en haut de l'accueil,
remplace .jumbotron. Réutilise .aca-card pour fond/bordure/ombre
(donc aussi son margin-bottom), ajoute juste la mise en page interne
et un peu plus de padding vertical pour garder une allure de bandeau
(le padding par défaut de .aca-card est plus modeste). Tailles de logo
(100px) reprises à l'identique de l'ancien style inline, pas de
redesign — seul le mécanisme change. -- */
.aca-hero {
padding: 2rem 1.25rem;
text-align: center;
}
.aca-hero__clubs {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem;
}
/* RÉGRESSION CORRIGÉE : width+height fixes sans object-fit forçaient
l'image à remplir exactement la boîte, l'étirant si son ratio naturel
ne correspond pas (logoACV.png fait 800×600, pas carré — le cercle
yin-yang s'affichait en ovale). object-fit:contain garde le ratio
naturel de l'image à l'intérieur de la même boîte 100×100 — même
principe déjà utilisé pour le carrousel (aikido-v2.css). */
/* 2026-07-16 : agrandi ×1.5 (100px→150px) sur demande — .aca-hero__clubs a
déjà flex-wrap:wrap (dégrade en passage à la ligne plutôt qu'un
débordement), mais repli explicite en dessous de 480px pour revenir à la
taille d'origine, où l'agrandissement risque le plus de forcer un retour
à la ligne non désiré (option de repli proposée par Corentin lui-même). */
.aca-hero__logo {
width: 150px;
height: 150px;
object-fit: contain;
display: block;
border-radius: var(--radius);
}
.aca-hero__title {
margin: 0;
font-size: 2.25rem;
}
@media (max-width: 480px) {
.aca-hero__logo {
width: 100px;
height: 100px;
}
.aca-hero__title {
font-size: 1.5rem;
}
}
/* -- .aca-club-picker : les 3 cartes de sélection de club (logo + texte
d'accès : ACV, AMV, ACA depuis le 2026-07-16), remplace les
.modal-content détournés en boîtes stylées — tailles de logo (200px)
reprises à l'identique.
RÉGRESSION CORRIGÉE : auto-fit + minmax(220px, 1fr) donnait des largeurs
inégales entre les cartes (le texte de chaque club a une longueur
différente, donc un min-width automatique différent par colonne) —
voir le commentaire détaillé sur .aca-media-item, même cause, même
correctif : repeat(3, minmax(0, 1fr)) pour un nombre d'éléments fixe. -- */
.aca-club-picker {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
align-items: stretch; /* déjà la valeur par défaut de CSS Grid (voir plus
bas pour la vraie cause de la régression), gardé explicite pour que
l'intention reste claire même si quelque chose change ailleurs. */
}
/* Carte active (2026-07-16) : surbrillance légère de l'encadré correspondant
au club actuellement consulté, même teinte que le sélecteur de thème
(.aca-theme-switcher__option:has(input:checked)) pour rester cohérent. */
.aca-club-picker__card--active {
background: rgba(var(--accent-rgb), .14);
}
/* RÉGRESSION CORRIGÉE : .aca-card porte un margin-bottom de base (pour les
listes de cartes empilées type Archives/piedDePages) avec un reset
:last-child pour éviter l'espace en trop en fin de liste. Dans une
grille à 2 colonnes, seule la carte de DROITE est :last-child — la
carte de gauche gardait donc son margin-bottom de 1.5rem, invisible en
soi, mais qui gonflait la hauteur de ligne que align-items:stretch
utilise pour étirer les deux cartes : la carte de droite (sans marge)
devait alors étirer sa boîte visible (fond/bordure) plus loin que la
carte de gauche pour remplir cette même hauteur de ligne — d'où
l'impression qu'elle était plus haute. Le gap de la grille gère déjà
l'espacement, le margin-bottom individuel n'a pas lieu d'être ici. */
.aca-club-picker > .aca-card {
margin-bottom: 0;
}
/* ==========================================================================
COMPOSANT : grille de cartes-liens d'articles (2026-07-15, v5) — remplace
l'ancien système / + résumé HTML clippé en CSS
(.aca-band, .aca-article__summary/__preview/__body), abandonné après
plusieurs bugs d'affichage non résolus (carte vide selon le contenu,
fiabilité de -webkit-line-clamp et du masquage natif de — voir
l'historique dans le git log si besoin). Nouveau pattern volontairement
plus simple et standard du web (Medium/BBC/dev.to) : une carte non
interactive, un seul vrai lien (le titre), le reste de la carte cliquable
via une astuce CSS "stretched link" plutôt qu'un unique enveloppant
tout le contenu (celui-ci créerait un lien géant peu accessible : nom
accessible pollué par l'alt de l'image, impossible de distinguer titre et
texte au clavier/lecteur d'écran).
========================================================================== */
.aca-article-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
/* padding:0 + overflow:hidden : l'image (si présente) touche les 4 bords de
la carte, le padding vit uniquement dans .aca-article-card__body. Le
overflow:hidden clippe aussi les coins de l'image au border-radius de la
carte. margin-bottom:0 : le gap de la grille gère déjà l'espacement (même
principe déjà appliqué à .aca-club-picker > .aca-card ci-dessus). Hauteur
uniforme entre cartes d'une même ligne : align-items:stretch, la valeur
par défaut de CSS Grid — déjà utilisé avec succès par .aca-club-picker,
contrairement au flex-grow dans un conteneur à hauteur indéfinie qui avait
causé les bugs de l'ancien composant. */
.aca-article-card {
position: relative;
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
margin-bottom: 0;
}
/* object-position:top (2026-07-16) : par défaut (center) le recadrage
16/9 coupait souvent le haut des photos (visages/têtes), le sujet
principal d'une photo de dojo/stage étant en général cadré vers le haut
plutôt qu'au centre strict. Ancre l'image en haut plutôt qu'au centre,
quitte à couper davantage en bas — à ajuster (ex. 50% 20%) si ça s'avère
trop agressif sur certaines photos une fois vu en vrai. */
.aca-article-card__image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: top;
display: block;
}
.aca-article-card__body {
padding: 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
}
/* Astuce "stretched link" : le lien réel reste le titre (.aca-card__title
a, classe déjà utilisée ailleurs pour un simple titre non cliquable en
entier — archives/piedDePages — donc le ::after ci-dessous est scopé à
.aca-article-card pour ne rien changer à ces autres usages), son ::after
couvre toute la carte (position:relative ci-dessus) pour capter le clic
n'importe où sur la carte. */
.aca-article-card .aca-card__title a {
text-decoration: none;
color: inherit;
}
.aca-article-card .aca-card__title a::after {
content: "";
position: absolute;
inset: 0;
}
.aca-article-card__categorie {
margin: 0 0 .5rem;
font-size: .85rem;
color: var(--muted);
text-transform: uppercase;
}
.aca-article-card__resume {
margin: 0;
flex: 1;
font-family: var(--font-body);
line-height: 1.5;
color: var(--text);
}
@media (max-width: 480px) {
.aca-club-picker {
grid-template-columns: 1fr;
}
}
.aca-club-picker__card {
text-align: center;
min-width: 0;
}
/* RÉGRESSION CORRIGÉE : même cause qu'.aca-hero__logo juste au-dessus —
width+height fixes sans object-fit étiraient logoACV.png (800×600) et,
dans une moindre mesure, logoAMV.jpg (1417×1276, presque carré mais pas
tout à fait) puisqu'aucun des deux logos n'est réellement carré. */
.aca-club-picker__logo {
width: 200px;
height: 200px;
max-width: 100%;
object-fit: contain;
display: block;
margin: 0 auto .75rem;
border-radius: var(--radius);
}
/* -- Galerie images/vidéos (images/index.php, images/category.php,
videos/index.php, videos/category.php) : chaque élément = une
.aca-card (titre + média), plus de .img-responsive/dimensions figées
en HTML — juste du CSS natif responsive. -- */
.aca-gallery-image {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--radius);
}
.aca-gallery-video {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--radius);
}
/* ==========================================================================
PARTIALS PARTAGÉS (audit §8, dernière étape) — menu.php, wrapper
.container et .row.row-offcanvas de templates/default.php.
==========================================================================
Contrairement aux pages précédentes, ces classes sont utilisées sur
QUASIMENT TOUTES les pages publiques à la fois : le risque d'une
régression silencieuse est plus élevé, d'où un luxe de vérifications
après ce changement (voir le suivi des tests).
Trouvaille en creusant .row-offcanvas/.sidebar-offcanvas avant de les
remplacer : le mécanisme "off-canvas" (panneau qui glisse sur mobile)
ne fonctionne pas et n'a probablement jamais fonctionné — offcanvas.js
n'écoute que les clics sur [data-toggle="offcanvas"], attribut qui
n'existe nulle part dans le code. offcanvas.css/offcanvas.js sont
donc retirés de templates/default.php avec ce changement (plus aucune
page ne référence .row-offcanvas/.sidebar-offcanvas après migration).
========================================================================== */
/* -- .aca-container : remplace .container (contenu principal + pied de
page uniquement — la nav garde son .container Bootstrap pour
l'instant, sa structure interne n'est pas dans le scope de cette
migration, seule sa couleur a été retouchée). Largeur fluide avec un
seul max-width plutôt que les 4 paliers fixes de Bootstrap — plus
simple, cohérent avec "peu de breakpoints" (§6 point 8 de l'audit). -- */
.aca-container {
box-sizing: border-box;
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
/* -- .aca-container--full (2026-07-15) : variante pleine largeur, appliquée
uniquement sur l'accueil (Core\Controller\Controller::$containerClass, voir
AccueilController::show()). max-width:none suffit : box-sizing:border-box +
padding déjà présents ci-dessus restent utiles pour ne pas coller le
contenu aux bords de l'écran. -- */
.aca-container--full {
max-width: none;
}
/* -- .aca-page-layout : remplace .row.row-offcanvas.row-offcanvas-right,
la structure contenu+sidebar de presque toutes les pages publiques.
Flexbox avec wrap : le sidebar passe sous le contenu dès que la place
manque, sans media query dédiée (contrairement aux 4 paliers Bootstrap
qu'utilisait .row/.col-*). -- */
.aca-page-layout {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: flex-start;
}
.aca-page-layout__content {
flex: 3 1 480px;
min-width: 0;
}
.aca-page-layout__sidebar {
flex: 1 1 220px;
}
/* Scopé à .aca-container--full uniquement (accueil) : la sidebar garde sa
largeur actuelle au lieu de grossir avec l'espace libéré par le conteneur
pleine largeur — .aca-page-layout__content (flex-grow:3 ci-dessus) absorbe
alors tout cet espace, ce qui pousse mécaniquement la sidebar contre le
bord droit du conteneur élargi, sans avoir besoin de la positionner
explicitement. Ne change rien sur les autres pages (toujours flex-grow:1
par la règle générale ci-dessus). */
.aca-container--full .aca-page-layout__sidebar {
flex-grow: 0;
}
/* -- Menu latéral (menu.php) : réutilise .aca-filter-list pour les deux
listes de liens (menu principal + sous-menu admin), espacement entre
blocs successifs (listes, puis widget météo). -- */
.aca-filter-list + .aca-filter-list,
.aca-page-layout__sidebar > .aca-filter-list + * {
margin-top: 1rem;
}
/* ==========================================================================
Administrer > Catégories — page fusionnée avec l'ancienne page Menus
(refonte Lot 2, chantier visibilité par rôle, 2026-07-17).
========================================================================== */
/* Bouton "Ajouter" unique en : même mécanisme zéro-JS
que .aca-appel-popover ci-dessus, pas de style de liste par défaut. */
.aca-categories-admin__ajouter {
margin-bottom: 1rem;
padding: .75rem 1rem;
}
.aca-categories-admin__ajouter summary {
list-style: none;
cursor: pointer;
}
.aca-categories-admin__ajouter summary::-webkit-details-marker {
display: none;
}
.aca-categories-admin__ajouter-form {
margin-top: .75rem;
}
/* Cases à cocher "rôles autorisés" par ligne : garde les 9 cases toujours
visibles (choix explicite, voir le plan de cette tâche) sur une seule
ligne (retour de Corentin, 2026-07-17 : le flex-wrap forçait 3 lignes
par catégorie malgré une largeur de colonne largement suffisante —
un conteneur flex autorisé à wrapper annonce une largeur intrinsèque
réduite au calcul auto des colonnes, qui ne l'élargit donc jamais
jusqu'à l'espace réellement disponible). "Tous les rôles" rejoint la
ligne au lieu d'être forcé sur width:100%, séparé par une bordure
verticale plutôt qu'horizontale. */
.aca-roles-cell {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: .15rem .6rem;
font-size: .85rem;
}
.aca-roles-cell label {
white-space: nowrap;
font-weight: 400;
}
.aca-roles-cell__tous {
white-space: nowrap;
padding-right: .6rem;
margin-right: .1rem;
border-right: 1px solid var(--border);
}
/* Repli responsive des rôles en popover (round 9, 2026-07-18, retour de
Corentin — usage habituel en 2 fenêtres côte à côte, demi-écran) : sous
1024px, les 9 cases + "Tous les rôles" ci-dessus poussaient
Modifier/Supprimer/↑↓ hors du cadre visible (table plus large que le
viewport, aucun conteneur scrollable dédié sur cette colonne). Piloté par
la classe `.is-collapsed` (JS dans aca-categories-admin.js, posée par
défaut dans le HTML — replié = compact dès le chargement sous la largeur
de bascule) plutôt que par /[open] : Chrome masque le contenu
d'un fermé via `content-visibility: hidden` sur un pseudo-
élément interne (::details-content), jamais surmontable depuis un
descendant en CSS pur — un aurait donc affiché la colonne
Rôles vide même au-dessus de la largeur de bascule (bug constaté en
vérification CDP avant tout affichage à Corentin). Au-dessus de cette
largeur, `.aca-roles-cell` garde son affichage normal (`display:flex`
ci-dessus, jamais touché par ce bloc) et le bouton "Rôles ▾" est cascade
masqué : comportement actuel identique en grand écran, aucune
régression. 1024px choisi comme largeur de bascule "raisonnable"
(demande de Corentin) : confortablement au-dessus des ~950px de demi-
écran testés, sous lesquels le débordement était signalé. */
.aca-roles-cell-popover {
position: relative;
display: inline-block;
}
/* Sélecteur qualifié par le parent (pas juste `.aca-roles-cell-popover__toggle`
seul) : `.aca-btn { display: inline-block; ... }` a la même spécificité
qu'une classe seule et vient avant dans la feuille de style — sans ce
renfort de spécificité, le bouton "Rôles ▾" resterait visible même en
grand écran. */
.aca-roles-cell-popover .aca-roles-cell-popover__toggle {
display: none;
}
@media (max-width: 1024px) {
.aca-roles-cell-popover .aca-roles-cell-popover__toggle {
display: inline-block;
}
.aca-roles-cell-popover.is-collapsed .aca-roles-cell {
display: none;
}
.aca-roles-cell-popover:not(.is-collapsed) .aca-roles-cell {
display: flex;
flex-wrap: wrap;
position: absolute;
z-index: 1040;
top: 100%;
left: 0;
margin-top: .25rem;
width: max-content;
max-width: 260px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: .6rem .75rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.aca-roles-cell-popover:not(.is-collapsed) .aca-roles-cell__tous {
padding-right: 0;
margin-right: 0;
border-right: none;
border-bottom: 1px solid var(--border);
padding-bottom: .3rem;
margin-bottom: .2rem;
width: 100%;
}
}
/* Sections groupées par menu (2026-07-17, retour de Corentin sur la 1ère
version de cette page — voir Admin\CategoriesController::index()).
#aca-table-categories est le seul tableau du site avec plusieurs
et est exclu du tri au clic générique (voir js/aca-table-sort.js) :
son ordre est fixe, donc zébrage dédié ici, qui exclut en plus les
lignes de section (`.aca-table-section`) que la règle générique
:nth-child(even) ci-dessus (2026-07-18) ne connaît pas. */
#aca-table-categories tbody tr:nth-child(even):not(.aca-table-section) > td {
background-color: rgba(var(--accent-rgb), .05);
}
.aca-ds table.table1#aca-table-categories tr.aca-table-section td {
background-color: rgba(var(--accent-rgb), .22);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
font-size: .8rem;
border-top: 2px solid var(--border);
}
.aca-table-section__compte {
font-weight: 400;
text-transform: none;
letter-spacing: normal;
opacity: .75;
}
.aca-table-section__vide td {
color: var(--border);
font-style: italic;
}
/* Séparateur visuel de menu (correctifs post-test, point 6 ; généralisé au
☰ public au round 2) : ligne pointillée, pour rester visuellement
distinct d'une vraie entrée. Règle de base scopée à `li`/`span`
(contextes ☰/pied de page, éléments bruts hors tableau) ; `td` ciblé
séparément en plus pour la page dédiée (tableau), `.aca-admin-live-panel`
en plus pour le panneau Administrer (moins de padding, pas de bordure
haute) — voir plus bas dans ce fichier.
Sélecteur volontairement scopé à `li`/`span` (pas de classe nue,
correctifs round 6, 2026-07-18) : appliqué tel quel à la `` du
tableau Catégories, `display: block` sortait la ligne du modèle de mise
en page tableau — ses `| ` (restés `display: table-cell`) ne
participaient plus à la grille de colonnes réelle, d'où un texte décalé
à gauche et wrappé caractère par caractère au lieu de s'aligner sous
"Titre". Sans cette règle sur la ` | `, elle garde son
`display: table-row` natif. */
li.aca-categories-admin__separateur,
span.aca-categories-admin__separateur {
display: block;
text-align: center;
font-style: italic;
opacity: .75;
padding: .35rem 0;
border-top: 1px dashed var(--border);
border-bottom: 1px dashed var(--border);
}
/* Alignée à gauche (pas centrée) pour matcher l'alignement par défaut des
`| ` normaux de ce tableau (round 6) : les flèches ↑/↓ ont été
déplacées dans cette même cellule (voir admin/categories/index.php), la
règle couvre donc aussi leur espacement avec le texte du titre. */
.aca-categories-admin__separateur td {
border-top: 1px dashed var(--border);
border-bottom: 1px dashed var(--border);
text-align: left;
font-style: italic;
opacity: .75;
}
.aca-categories-admin__separateur form.deplacer {
margin-right: .5rem;
}
/* ==========================================================================
Édition en direct des menus sur le site réel (point 3, refonte Lot 2,
2026-07-17). Le HTML des poignées/+ ajouter n'existe que pour un
visiteur ayant le rôle admin (rendu côté PHP), toujours visible pour lui
— pas de bouton "Mode édition" (retiré le même jour, correctifs
post-test : il n'avait aucun effet réel, le glisser-déposer marchait déjà
qu'il soit activé ou non). Poignée ⁝⁝ retirée visuellement (correctifs
round 2) : `draggable` était déjà posé sur la ligne entière, jamais sur
la poignée elle-même — la retirer du HTML ne change rien au mécanisme,
seul l'indice visuel (curseur "grab") se déplace ici sur la ligne.
========================================================================== */
.aca-live-edit__draggable {
cursor: grab;
}
.aca-live-edit__draggable:active {
cursor: grabbing;
}
[data-live-menu] [data-element-id] {
transition: opacity .1s ease;
}
[data-live-menu] [data-element-id][draggable="true"]:active {
opacity: .6;
}
.aca-live-edit-modale {
display: none;
position: fixed;
inset: 0;
z-index: 1050;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .5);
}
.aca-live-edit-modale__panneau {
max-width: 360px;
margin: 1rem;
}
.aca-live-edit-modale__texte {
margin-bottom: 1rem;
}
/* 2e icône ☰ dédiée au menu Administrer (point 6, correctifs post-test) :
couleur distincte de la 1ère icône ☰ pour que les deux ne se confondent
jamais au premier coup d'œil, sur --danger plutôt qu'une teinte inventée
(déjà un token existant, lisible sur le fond sombre de la nav comme
--bg l'est pour l'icône ☰ normale). */
.aca-admin-live-toggle__icon {
border-color: var(--danger);
color: var(--danger);
}
.aca-admin-live-toggle__icon:hover,
.aca-admin-live-toggle__icon:focus {
background-color: var(--danger);
color: var(--danger-contrast);
}
.aca-admin-live-panel {
min-width: 260px;
max-height: 70vh;
overflow-y: auto;
}
.aca-admin-live-panel__titre {
margin: 0 0 .5rem;
font-family: var(--font-display);
font-weight: 700;
}
.aca-admin-live-panel ul[data-live-menu] {
list-style: none;
margin: 0;
padding: 0;
}
.aca-admin-live-panel li[data-element-id] {
padding: .35rem .25rem;
border-bottom: 1px solid var(--border);
}
.aca-admin-live-panel .aca-categories-admin__separateur {
padding: .35rem .25rem;
border-top: none;
border-bottom: 1px dashed var(--border);
}
| |