/* ==========================================================================
MMAS — Refonte visuelle globale (admin desktop + mobile).
Chargée EN DERNIER : couche de RECALIBRAGE, elle ne réécrit pas les
feuilles existantes. Retirer le dans _partials/head.html annule
toute la refonte, sans autre effet de bord.
Grammaire commune avec l'appli native (v1.3) :
- le violet de marque redevient un ACCENT ; il ne recouvre plus les
en-têtes, les bandeaux et les fonds pleins ;
- base neutre encrée de violet (jamais de gris froid ni de noir pur) ;
- une ombre = de l'encre diffuse, jamais un halo coloré ;
- dégradés décoratifs supprimés (le « dégradé violet-bleu » est la
signature visuelle qu'on veut quitter) ;
- hiérarchie portée par la typographie et l'espace, pas par la couleur ;
- Outfit pour les titres/chiffres, Inter conservé pour le texte dense
(tableaux, formulaires) où il reste plus lisible en petit corps.
Les couleurs de marque restent pilotées par la page Apparence
(branding.js écrit --primary / --secondary) : ce fichier ne fige AUCUNE
couleur de marque, il n'utilise que les variables.
========================================================================== */
:root {
/* Encre & filets — teintés de la marque, jamais de gris froid pur */
--ink: #1a1830;
--ink-soft: #4a4763;
--ink-faint: #6f6c88; /* 4.8:1 sur blanc — sûr pour le texte secondaire */
--hairline: rgba(26, 24, 48, 0.08);
--hairline-strong: rgba(26, 24, 48, 0.14);
--canvas: #f6f5fa;
--wash: rgba(67, 56, 202, 0.07);
/* Ombres : encre diffuse (aucune ombre colorée) */
--shadow-1: 0 2px 8px rgba(26, 24, 48, 0.04);
--shadow-2: 0 6px 18px rgba(26, 24, 48, 0.05);
--shadow-3: 0 14px 34px rgba(26, 24, 48, 0.10);
--r-sm: 10px;
--r-md: 14px;
--r-lg: 18px;
--font-display: 'Outfit', 'Inter', system-ui, sans-serif;
}
/* ---------- Fond général ---------- */
body { background: var(--canvas); color: var(--ink); }
/* ---------- Typographie : Outfit sur les titres, chiffres tabulaires ------ */
h1, h2, h3, h4,
.page-title, .section-title, .card-header h2, .card-header h3,
.stat-value, .kpi-value {
font-family: var(--font-display);
letter-spacing: -0.3px;
color: var(--ink);
}
.stat-value, .kpi-value, .amount, td.amount, .montant {
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
SURFACES
========================================================================== */
.card,
.stat-card,
.panel,
.widget,
.content-card {
background: var(--surface, #fff);
border: 1px solid var(--hairline);
border-radius: var(--r-lg);
box-shadow: var(--shadow-2);
transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.card:hover, .stat-card:hover { box-shadow: var(--shadow-3); }
/* En-têtes de carte : plus de dégradé de marque en fond plein */
.card-header,
.panel-header,
.widget-header {
background: #fff !important;
color: var(--ink) !important;
border-bottom: 1px solid var(--hairline);
}
.card-header h2, .card-header h3,
.card-header .card-title { color: var(--ink) !important; }
.card-header i { color: var(--primary-dark, #3730a3); }
/* Dégradés décoratifs neutralisés partout où ils servaient de fond plein */
.hero, .page-hero, .banner-brand, .header-gradient {
background: #fff !important;
color: var(--ink) !important;
border: 1px solid var(--hairline);
border-radius: var(--r-lg);
}
/* ==========================================================================
STATISTIQUES (tableau de bord)
========================================================================== */
.stat-card {
padding: 18px 20px;
}
.stat-card .stat-label,
.stat-card .stat-title {
color: var(--ink-faint);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.stat-card .stat-value {
color: var(--ink);
font-weight: 700;
letter-spacing: -1px;
}
/* L'icône devient une pastille lavée, pas un aplat de marque */
.stat-card .stat-icon,
.stat-card .icon-box {
background: var(--wash) !important;
color: var(--primary-dark, #3730a3) !important;
border-radius: 12px;
box-shadow: none !important;
}
/* ==========================================================================
BOUTONS — même géométrie partout, retour tactile, aucun halo
========================================================================== */
.btn {
border-radius: var(--r-md);
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.1px;
box-shadow: none !important;
transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease,
border-color 0.16s ease;
}
.btn:active { transform: scale(0.975); }
.btn-primary {
background: var(--primary, #4338ca);
border: 1px solid var(--primary, #4338ca);
color: #fff;
}
.btn-primary:hover { background: var(--primary-dark, #3730a3); }
.btn-ghost, .btn-secondary, .btn-outline {
background: #fff;
border: 1px solid var(--hairline-strong);
color: var(--ink-soft);
}
.btn-ghost:hover, .btn-secondary:hover, .btn-outline:hover {
background: var(--wash);
color: var(--primary-dark, #3730a3);
border-color: transparent;
}
.btn-danger { background: #b4392c; border-color: #b4392c; }
.btn-success { background: #147a45; border-color: #147a45; }
/* ==========================================================================
FORMULAIRES
========================================================================== */
.form-control, .form-select, input[type="text"], input[type="email"],
input[type="tel"], input[type="number"], input[type="date"], select, textarea {
border: 1px solid var(--hairline-strong);
border-radius: var(--r-md);
background: #fff;
color: var(--ink);
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--primary, #4338ca);
box-shadow: 0 0 0 3px var(--wash);
}
label, .form-label {
color: var(--ink-soft);
font-weight: 600;
font-size: 0.84rem;
}
/* ==========================================================================
TABLEAUX — filets, pas de dégradé d'en-tête, chiffres alignés
========================================================================== */
.table {
border-radius: var(--r-lg);
border: 1px solid var(--hairline);
overflow: hidden;
}
.table th {
background: #fbfbfe !important;
color: var(--ink-faint) !important;
font-family: var(--font-display);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
border-bottom: 1px solid var(--hairline-strong) !important;
}
.table td {
border-bottom: 1px solid var(--hairline);
color: var(--ink-soft);
}
.table tbody tr:hover { background: #fafaff; }
/* ==========================================================================
BADGES & PASTILLES — même géométrie, texte lisible (AA)
========================================================================== */
.badge, .chip, .pill, .status-badge, .summer-act-chip {
border-radius: 999px;
font-weight: 600;
font-size: 0.74rem;
letter-spacing: 0.1px;
padding: 4px 11px;
box-shadow: none;
}
.badge-success { background: #e7f6ec; color: var(--success-text, #047857); }
.badge-warning { background: #fbf0dc; color: var(--warning-text, #92400e); }
.badge-danger { background: #fae9e6; color: var(--danger-text, #b91c1c); }
.badge-info { background: var(--wash); color: var(--primary-dark, #3730a3); }
.badge-light { background: #f1f0f7; color: var(--ink-soft); }
/* ==========================================================================
NAVIGATION — barre latérale à plat (le dégradé était la signature à quitter)
========================================================================== */
.sidebar {
background: var(--primary-dark, #3730a3) !important;
border-right: none;
}
.sidebar .nav-item {
border-radius: var(--r-md);
transition: background 0.16s ease;
}
.sidebar .nav-item.active {
background: rgba(255, 255, 255, 0.16) !important;
font-weight: 600;
}
.sidebar .nav-section-title {
color: rgba(255, 255, 255, 0.55);
font-size: 0.68rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.topbar, .app-header {
background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--hairline);
box-shadow: none;
}
/* ==========================================================================
MODALES
========================================================================== */
.modal-content, .swal2-popup {
border-radius: var(--r-lg);
border: 1px solid var(--hairline);
box-shadow: var(--shadow-3);
}
.swal2-title { font-family: var(--font-display); color: var(--ink); }
.swal2-styled.swal2-confirm { border-radius: var(--r-md) !important; }
/* ==========================================================================
CARTES FAMILLES (page Familles)
========================================================================== */
.family-card {
border: 1px solid var(--hairline);
border-top: 1px solid var(--hairline); /* annule le liseré cyan de 4px */
border-radius: var(--r-lg);
box-shadow: var(--shadow-2);
overflow: hidden;
}
.family-card:hover, .family-card:focus-visible {
box-shadow: var(--shadow-3);
transform: translateY(-2px);
}
/* En-tête : le NOM porte la hiérarchie, plus le fond dégradé */
.family-card .family-card-header {
background: #fff;
color: var(--ink);
padding: 16px 18px 12px;
border-bottom: 1px solid var(--hairline);
}
.family-card .family-card-header .family-card-name,
.family-card .family-card-header .family-card-title {
color: var(--ink);
font-family: var(--font-display);
font-size: 1.02rem;
font-weight: 600;
}
.family-card .family-card-header .family-card-name i,
.family-card .family-card-header .family-card-title i { color: var(--ink-faint); }
.family-card .family-card-header .avatar,
.family-card .family-card-header .family-avatar {
background: var(--wash) !important;
color: var(--primary-dark, #3730a3) !important;
font-weight: 700;
box-shadow: none !important;
}
.family-card .family-card-body { padding: 16px 18px; }
.family-card .child-block {
background: #f8f8fc;
border: 1px solid var(--hairline);
border-left: 3px solid var(--primary, #4338ca);
border-radius: 12px;
padding: 11px 13px;
}
.family-card .child-block:hover {
background: var(--wash);
transform: none;
box-shadow: none;
}
/* « À valider » : liseré + bandeau, pas un encadré orange sur toute la carte */
.family-card-pending {
border: 1px solid var(--hairline) !important;
border-left: 4px solid var(--warning-dark, #d97706) !important;
box-shadow: var(--shadow-2) !important;
}
.family-pending-banner {
background: #fbf0dc;
color: #8a5209;
border-bottom: 1px solid rgba(180, 105, 14, 0.18);
border-radius: 0;
padding: 9px 14px;
font-weight: 600;
}
/* Barre d'actions : une barre d'outils, pas sept pastilles arc-en-ciel.
Les couleurs d'USAGE (vert WhatsApp, violet paiement, rouge suppression)
restent reconnaissables ; les autres ne se teintent qu'au survol. */
.family-card-actions {
display: flex;
flex-wrap: wrap;
gap: 7px;
padding: 12px 18px 16px;
border-top: 1px solid var(--hairline);
background: #fcfcfe;
}
.family-card-actions .action-btn {
width: 38px; height: 38px; min-width: 38px;
border-radius: 11px;
border: 1px solid var(--hairline);
background: #fff !important;
color: var(--ink-soft) !important;
box-shadow: none !important;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.92rem;
transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}
.family-card-actions .action-btn:hover {
background: var(--wash) !important;
color: var(--primary-dark, #3730a3) !important;
}
.family-card-actions .action-btn:active { transform: scale(0.94); }
.family-card-actions .action-btn.whatsapp {
background: #e7f6ec !important; color: #147a45 !important;
}
.family-card-actions .action-btn.whatsapp:hover {
background: #147a45 !important; color: #fff !important;
}
.family-card-actions .action-btn.payment {
background: var(--wash) !important; color: var(--primary-dark, #3730a3) !important;
}
.family-card-actions .action-btn.payment:hover {
background: var(--primary, #4338ca) !important; color: #fff !important;
}
.family-card-actions .action-btn.delete,
.family-card-actions .action-btn.danger {
background: #fff !important; color: #b4392c !important;
}
.family-card-actions .action-btn.delete:hover,
.family-card-actions .action-btn.danger:hover {
background: #b4392c !important; color: #fff !important;
}
.family-card-actions .action-btn[style] {
background: #fff !important; color: var(--ink-soft) !important;
}
.family-card-actions .action-btn[style]:hover {
background: var(--wash) !important; color: var(--primary-dark, #3730a3) !important;
}
.family-card .family-card-footer { padding: 0 18px 12px; border-top: none; }
/* ==========================================================================
MOBILE (≤ 768px) — doctrine du projet : listes, cibles 44px, pas de
défilement horizontal, pas d'ombres lourdes.
========================================================================== */
@media (max-width: 768px) {
body { background: var(--canvas); }
.card, .stat-card, .family-card, .panel {
border-radius: 16px;
box-shadow: var(--shadow-1);
}
.card:hover, .stat-card:hover, .family-card:hover {
box-shadow: var(--shadow-1);
transform: none; /* pas d'effet de survol au doigt */
}
/* Cibles tactiles */
.btn, .action-btn, .nav-item, .tabbar-item, .list-row {
min-height: 44px;
}
.family-card-actions .action-btn {
width: 42px; height: 42px; min-width: 42px;
}
/* Statistiques : 2 colonnes, chiffre lisible */
.stat-card { padding: 14px 15px; }
.stat-card .stat-value { font-size: 1.65rem; }
/* Barre du bas : calme, encoche respectée */
.bottom-nav {
background: rgba(255, 255, 255, 0.96);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-top: 1px solid var(--hairline);
box-shadow: 0 -1px 14px rgba(26, 24, 48, 0.06);
padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav .nav-item.active { color: var(--primary-dark, #3730a3); font-weight: 600; }
/* Tableaux denses : défilement contenu, jamais la page */
.table-wrapper, .table-responsive { overflow-x: auto; max-width: 100vw; }
}
/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
.card, .stat-card, .family-card, .btn, .action-btn { transition: none; }
.btn:active, .action-btn:active, .family-card:hover { transform: none; }
}
/* ==========================================================================
CORRECTIF LISIBILITÉ — en-tête des cartes familles.
mobile-polish force `color: var(--white) !important` sur tout l'en-tête
(héritage du bandeau dégradé). Une fois le fond passé en blanc, le nom de
la famille devenait invisible. On rétablit l'encre avec la même arme, et
on garantit le fond blanc quel que soit le viewport.
========================================================================== */
body.page-families .family-card-header,
body.page-families .family-card-header *,
body.page-families .family-card-title,
body.page-families .family-card-title span,
body.page-families .family-card-name,
body.page-families .family-card-name span,
.family-card .family-card-header,
.family-card .family-card-header * {
color: var(--ink) !important;
}
body.page-families .family-card-header { background: #fff !important; }
body.page-families .family-card-header i,
.family-card .family-card-header i { color: var(--ink-faint) !important; }
/* Pastille d'initiales (pseudo-élément sur mobile) : marque lavée + encre */
body.page-families .family-card-header::before {
background: var(--wash) !important;
color: var(--primary-dark, #3730a3) !important;
}
/* Garantie de visibilité des filtres (statut / activité / pays / tri) :
quelle qu'en soit la cause, un filtre ne doit jamais devenir invisible. */
.filters-grid .form-group select,
.filters-grid .form-group .form-select,
.filters-grid .form-group .form-input,
.filters-grid .form-group input {
display: block !important;
width: 100% !important;
min-height: 44px;
opacity: 1 !important;
visibility: visible !important;
color: var(--ink) !important;
background-color: #fff !important;
}
/* Avatar de l'en-tête (image ou initiales) */
.family-card .family-card-header .avatar,
.family-card .family-card-header .family-avatar,
body.page-families .family-card-header .avatar {
background: var(--wash) !important;
color: var(--primary-dark, #3730a3) !important;
}
/* Table Animateurs fusionnée : identité + contact + paie du mois sur une
seule ligne (le bloc « Heures & paie » ne relistait que les mêmes noms). */
.ic-hours { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hours-total-row {
background: #fbfbfe;
font-weight: 700;
border-top: 2px solid var(--hairline-strong);
}
.hours-total-row td { color: var(--ink); }
@media (max-width: 768px) {
/* Sur mobile la table défile horizontalement dans son conteneur : on ne
masque aucune colonne pour ne pas cacher la paie. */
.table-scroll-wrapper { overflow-x: auto; max-width: 100vw; }
}
/* ==========================================================================
MOBILE — LISIBILITÉ DES TABLES ET DES INDICATEURS
Sur petit écran, chaque ligne de table devient une carte. Le rendu par
défaut empilait ÉTIQUETTE au-dessus de VALEUR : une famille occupait un
écran entier. On passe en « étiquette à gauche / valeur à droite », le
premier champ servant de titre — deux fois plus compact, et on retrouve
le balayage vertical d'une vraie liste.
========================================================================== */
@media (max-width: 768px) {
/* ---- Indicateurs : compacts, alignés, sans vide au milieu ---- */
.stats-grid { gap: 10px; }
.stat-card {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px;
padding: 14px !important;
min-height: 84px;
}
.stat-card .stat-content { min-width: 0; }
.stat-card .stat-value { font-size: 1.6rem !important; line-height: 1.1; }
.stat-card .stat-label {
font-size: 0.68rem !important;
letter-spacing: 0.4px;
line-height: 1.25;
white-space: normal;
}
.stat-card .stat-icon {
width: 38px !important;
height: 38px !important;
flex: 0 0 38px;
font-size: 0.95rem !important;
}
/* ---- Bandeaux de carte : les actions passent à la ligne ---- */
.card-header {
flex-wrap: wrap !important;
gap: 10px;
align-items: flex-start !important;
}
.card-header-actions,
.card-header .card-actions { width: 100%; }
.card-header-actions .btn,
.card-header .card-actions .btn { flex: 1 1 auto; justify-content: center; }
/* ---- Note repliable : le mode d'emploi ne mange plus l'écran ---- */
.info-note {
border: 1px solid var(--hairline);
border-radius: var(--r-md);
padding: 10px 12px;
margin-bottom: 12px;
background: #fbfbfe;
}
.info-note > summary {
cursor: pointer;
font-size: 0.84rem;
font-weight: 600;
color: var(--primary-dark, #3730a3);
list-style-position: inside;
}
/* ---- Lignes de table : étiquette à gauche, valeur à droite ---- */
body.admin-app .card table.table tbody td {
display: block !important;
text-align: left;
padding: 6px 0 !important;
font-size: 0.88rem;
overflow-wrap: anywhere;
}
/* Étiquette EN LIGNE devant la valeur : une ligne par champ au lieu de
deux, sans jamais comprimer le texte (un affichage en flex écrasait
les valeurs longues à une lettre par ligne). */
body.admin-app .card table.table tbody td::before {
display: inline !important;
margin: 0 7px 0 0 !important;
white-space: nowrap;
}
/* Premier champ = titre de la carte (nom de famille, d'animateur…) */
body.admin-app .card table.table tbody td:first-child {
display: block !important;
text-align: left;
font-size: 1rem;
font-weight: 600;
color: var(--ink);
padding-bottom: 9px !important;
}
body.admin-app .card table.table tbody td:first-child::before { display: none !important; }
body.admin-app .card table.table tbody td:first-child a { color: var(--primary-dark, #3730a3); }
/* Dernier champ = actions : une rangée de boutons, pas une valeur */
body.admin-app .card table.table tbody td:last-child {
display: flex !important;
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
padding-top: 10px !important;
text-align: left;
}
body.admin-app .card table.table tbody td:last-child::before { display: none !important; }
body.admin-app .card table.table tbody td:last-child .btn { min-height: 40px; }
/* La ligne de total garde son alignement classique */
body.admin-app .card table.table tbody tr.hours-total-row td {
display: block !important;
}
}
/* ==========================================================================
SÉLECTEUR DE SAISON SUR MOBILE
style.css le masquait sous 768px (`display:none !important`) : sur
téléphone, impossible de changer de saison — bloquant en période de
bascule (la saison active peut être vide tant que les familles ne sont
pas réinscrites). On le rétablit en version compacte, avec un menu qui
tient dans l'écran.
========================================================================== */
@media (max-width: 768px) {
/* mobile-polish masque TOUT le conteneur d'actions de la barre
(`.header-actions { display:none !important }`) — c'est lui qui cachait
le sélecteur, pas seulement la pastille. On rouvre le conteneur et on
n'y laisse que la saison (recherche globale et bouton d'action restent
masqués par leurs propres règles). */
body.admin-app .main-header .header-actions {
display: flex !important;
align-items: center;
gap: 8px;
margin-left: auto;
}
body.admin-app .main-header .header-actions > *:not(#seasonIndicatorWrap) {
display: none !important;
}
body.admin-app .main-header #seasonIndicatorWrap {
display: inline-flex !important;
}
.season-indicator {
display: inline-flex !important;
padding: 7px 10px;
font-size: 0.74rem;
min-height: 40px; /* cible tactile confortable */
background: var(--wash);
border-color: transparent;
}
/* Sur très petit écran, l'icône calendrier suffit à identifier le contrôle :
on garde le libellé de saison, on masque le chevron. */
.season-indicator > i.fa-chevron-down { display: none; }
#seasonIndicatorWrap { position: static !important; }
/* Menu : feuille du bas (doctrine mobile du projet) — pas d'ancrage
fragile sous un bouton, et le pouce l'atteint sans effort. */
.season-picker-menu {
position: fixed !important;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
min-width: 0 !important;
max-height: 70vh;
overflow-y: auto;
border-radius: var(--r-lg) var(--r-lg) 0 0;
border: none;
box-shadow: 0 -12px 34px rgba(26, 24, 48, 0.18);
z-index: 2000;
padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
}
/* Poignée de préhension, comme les autres feuilles de l'app */
.season-picker-menu::before {
content: '';
display: block;
width: 38px;
height: 4px;
margin: 0 auto 12px;
border-radius: 999px;
background: var(--hairline-strong);
}
.season-picker-menu button,
.season-picker-menu a,
.season-picker-menu .season-option {
display: block;
width: 100%;
text-align: left;
min-height: 46px; /* doigt */
padding: 12px 14px;
border-radius: var(--r-md);
font-size: 0.92rem;
}
}
/* ==========================================================================
AUDIT — CORRECTIONS
========================================================================== */
/* Texte en dégradé : décoratif, jamais porteur de sens, et fragile (si le
dégradé ne peint pas, le texte devient invisible). Couleur pleine partout ;
l'emphase passe par la graisse et l'échelle. */
.sidebar-logo h1,
.page-title,
.total-amount,
.stat-value,
.kpi-value {
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: currentColor !important;
}
.sidebar-logo h1 { color: #fff !important; }
.page-title { color: var(--ink) !important; }
.total-amount { color: var(--primary-dark, #3730a3) !important; }
/* Le bandeau supérieur perd son dégradé horizontal (surface unie + filet). */
.main-header {
background: rgba(255, 255, 255, 0.92) !important;
box-shadow: none !important;
border-bottom: 1px solid var(--hairline);
}
/* Glassmorphisme : réservé aux barres fixes (haut / bas). Ailleurs, une
surface opaque — un flou décoratif coûte cher et vieillit mal. */
.card, .stat-card, .panel, .modal-content {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Largeurs fixes en style en ligne (24 dans les pages) : sur mobile elles
provoquent un défilement horizontal. On les plafonne sans les réécrire
page par page. */
@media (max-width: 768px) {
[style*="width:"], [style*="width :"] { max-width: 100% !important; }
.card, .card-body, .table-scroll-wrapper { max-width: 100%; }
}
/* ==========================================================================
VÉRIFIÉ AU NAVIGATEUR (dev, 390px) — corrections constatées
========================================================================== */
@media (max-width: 768px) {
/* Table Animateurs fusionnée : mobile-polish masquait les étiquettes de
colonnes pour cette table (héritage d'avant la fusion, quand elle ne
portait que Animateur/Contact/Actions). Les colonnes de paie
affichaient donc des « — » orphelins, sans dire de quoi il s'agit. */
body.page-instructors .card table.table tbody tr.instructor-row > td::before {
display: inline !important;
}
/* Le nom reste le titre de la carte, les actions n'ont pas d'étiquette. */
body.page-instructors .card table.table tbody tr.instructor-row > td:first-child::before,
body.page-instructors .card table.table tbody tr.instructor-row > td:last-child::before {
display: none !important;
}
/* Bandeaux de carte : le sélecteur de mois débordait de 85px (mesuré).
Les contrôles non-boutons prennent la largeur et passent à la ligne. */
.card-header input[type="month"],
.card-header input[type="date"],
.card-header .form-select,
.card-header .form-input {
flex: 1 1 100% !important;
width: 100% !important;
min-width: 0 !important;
}
.card-header { overflow: hidden; }
/* Tout conteneur d'actions du bandeau passe à la ligne et prend la
largeur, même sans classe dédiée (mesuré : 41px de débordement
restants sur la page Animateurs, dont le bloc est en style en ligne). */
.card-header > div {
flex-wrap: wrap !important;
width: 100%;
margin-left: 0 !important;
gap: 8px !important;
}
.card-header > div > .btn { flex: 1 1 auto; justify-content: center; }
/* Tables larges : le contenu d'une cellule pleine largeur (états vides,
« Chargement… ») ne doit pas forcer 568px dans un écran de 390px. */
body.admin-app .card table.table { min-width: 0 !important; width: 100% !important; }
body.admin-app .card table.table tbody td[colspan] {
max-width: calc(100vw - 60px);
white-space: normal !important;
overflow-wrap: anywhere;
}
/* Indicateurs : contenu réellement centré (la grille égalise les hauteurs,
le contenu restait collé en haut avec un vide sous lui). */
body.admin-app .stat-card { align-items: center !important; }
body.admin-app .stat-card .stat-content { flex: 1 1 auto; min-width: 0; }
/* Le bouton flottant ne doit pas masquer le dernier élément de la liste. */
body.admin-app .page-content { padding-bottom: 96px !important; }
}
/* ==========================================================================
CONTRASTE — corrections mesurées à l'exécution (axe-core, WCAG AA)
Le dépôt a déjà des jetons « -text » foncés prévus pour ça ; ils n'étaient
pas utilisés partout. Les couleurs VIVES restent pour les fonds et les
icônes, jamais pour du texte sur clair.
========================================================================== */
/* Barre latérale : le texte doit rester lisible quelle que soit la couleur de
marque configurée (mesuré à 2,13:1 avec une marque claire). */
.sidebar .nav-item,
.sidebar .nav-item-text,
.sidebar .user-name { color: #fff !important; }
.sidebar .nav-section-title,
.sidebar .user-role { color: rgba(255, 255, 255, 0.85) !important; }
.sidebar .nav-item i { color: rgba(255, 255, 255, 0.92) !important; }
/* Sémantique en TEXTE : versions foncées (les vives échouent sur blanc) */
.text-danger, .text-danger *,
[style*="color:#ef4444"], [style*="color: #ef4444"] { color: var(--danger-text, #b91c1c) !important; }
.text-success, .text-success *,
.activity-stat-revenue,
[style*="color:#10b981"], [style*="color: #10b981"] { color: var(--success-text, #047857) !important; }
[style*="color:#0ea5e9"], [style*="color: #0ea5e9"],
.slot-time-range { color: var(--secondary-text, #0369a1) !important; }
[style*="color:var(--primary)"] .badge,
.badge[style*="color:var(--primary)"] { color: var(--primary-dark, #3730a3) !important; }
/* Gris de texte sur fonds gris clairs : --gray-500 tombe à 4,34:1 sur
--gray-100. On passe au cran suivant sur ces surfaces. */
.cell-count,
.chip .count,
[style*="background:var(--gray-100)"],
[style*="background: var(--gray-100)"] { color: var(--gray-600, #475569) !important; }
.section-title, .section-title-plain { color: var(--ink) !important; }
/* Étiquette réservée aux lecteurs d'écran (le dépôt n'en avait pas). */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* .text-muted utilisait --gray-400 (4,48:1 sur --gray-50 : 0,02 sous le
seuil AA). On passe à l'encre pâle du système, sûre sur toutes les
surfaces claires du produit. */
.text-muted, .text-muted * { color: var(--ink-faint, #6f6c88) !important; }
/* --- Contrastes mesurés sur mobile (production) ------------------------- */
/* Titre du planning : blanc sur fond lavande très clair (1,17:1) — invisible.
Même famille de défaut que l'en-tête des cartes familles : un fond coloré
passé au clair sans que le texte suive. */
.planning-title,
#calendarWeekTitle,
.planning-header h3 { color: var(--ink) !important; }
/* Boutons pleins : les fonds vifs ne portent pas de texte blanc
(ambre 2,14:1, vert 2,53:1). Fonds foncés, texte blanc lisible. */
.btn-warning {
/* --warning-dark (#d97706) ne donne que 3,18:1 avec du blanc : on descend
à l'ambre du système (6,4:1). */
background: #8a5209 !important;
border-color: #8a5209 !important;
color: #fff !important;
}
.btn-success {
background: #147a45 !important;
border-color: #147a45 !important;
color: #fff !important;
}
/* Ambre en TEXTE sur clair → version foncée (note « Centre fermé »). */
[style*="color:#f59e0b"], [style*="color: #f59e0b"],
.text-warning { color: var(--warning-text, #92400e) !important; }
/* Gris de texte sur surfaces gris clair (capacité des salles). */
.room-capacity, .room-capacity * { color: var(--gray-600, #475569) !important; }
/* Pastilles de relance : rouge vif sur lavé rouge = 3,95:1. Version foncée. */
.reminder-badge-label,
.badge-danger .count,
.badge-danger * { color: #8f1d1d !important; }
/* Couleurs sémantiques VIVES employées comme couleur de TEXTE via un style en
ligne : elles échouent toutes sur fond clair (ambre 2,14:1, vert 2,42:1,
bleu 3,51:1). Le dépôt fournit des variantes « -text » foncées prévues pour
ça — on les substitue automatiquement, partout, sans toucher au HTML.
La parenthèse fermante empêche de matcher « var(--warning-text) ». */
[style*="color:var(--warning)"], [style*="color: var(--warning)"] {
color: var(--warning-text, #92400e) !important;
}
[style*="color:var(--success)"], [style*="color: var(--success)"] {
color: var(--success-text, #047857) !important;
}
[style*="color:var(--info)"], [style*="color: var(--info)"] {
color: var(--info-text, #1d4ed8) !important;
}
[style*="color:var(--danger)"], [style*="color: var(--danger)"] {
color: var(--danger-text, #b91c1c) !important;
}
[style*="color:var(--secondary)"], [style*="color: var(--secondary)"] {
color: var(--secondary-text, #0369a1) !important;
}
[style*="color:var(--accent)"], [style*="color: var(--accent)"] {
color: var(--accent-text, #6d28d9) !important;
}
/* Sélecteur de saison sur mobile : il vit dans le bandeau COLORÉ, où le
violet foncé hérité du desktop et les badges gris (« HISTO ») ou bleus
(« À VENIR ») deviennent illisibles. Pastille claire, texte blanc — même
traitement que le bouton menu. */
@media (max-width: 768px) {
.season-indicator {
background: rgba(255, 255, 255, 0.18) !important;
border: 1px solid rgba(255, 255, 255, 0.28) !important;
color: #fff !important;
}
.season-indicator i,
.season-indicator span,
.season-indicator span[style] {
color: #fff !important;
}
/* Le badge d'état (HISTO / À VENIR) reste lisible, en retrait. */
.season-indicator span[style] span,
#seasonIndicatorLabel span {
color: rgba(255, 255, 255, 0.82) !important;
font-weight: 700;
}
}
/* =========================================================
PLANNING — vue « Plan » sur mobile.
La grille est une matrice salles × créneaux : sur 390 px elle devient une
liste de créneaux. Chaque cours porte le nom de sa salle, l'en-tête de
colonnes n'ayant plus de sens.
Composition : un créneau = une carte blanche ; les cours y sont des
LIGNES séparées d'un filet, jamais des boîtes grises dans une boîte
blanche. Deux lignes par cours au lieu de cinq — l'intitulé et l'effectif
sur la première, la salle, le professeur et les places sur la seconde.
========================================================= */
.cell-room,
.row-free-label,
.cell-seats { display: none; }
@media (max-width: 768px) {
body.page-planning .planning-grid-header { display: none !important; }
body.page-planning .planning-grid {
display: block !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Grille à deux colonnes plutôt qu'un flux libre : les pastilles de salles
se dimensionnaient sur leur texte, d'où un bord droit en dents de scie. */
body.page-planning .planning-row {
display: grid !important;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 0 8px;
background: var(--white);
border: 1px solid var(--hairline);
border-radius: var(--r-lg, 18px);
box-shadow: var(--shadow-1);
padding: 4px 14px 12px !important;
margin: 0 0 12px !important;
}
/* En-tête du créneau : plus de boîte dans la boîte. L'heure en Outfit
tabulaire, seule ancre visuelle de la carte. */
body.page-planning .planning-slot-header {
order: 0;
grid-column: 1 / -1;
width: 100%;
min-width: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: space-between;
gap: 8px;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 0 2px !important;
}
body.page-planning .slot-time-range {
font-family: var(--font-display);
font-size: 1.02rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--ink) !important;
letter-spacing: -0.02em;
}
body.page-planning .slot-name {
font-size: 0.76rem;
color: var(--ink-faint);
margin-right: auto;
margin-left: 8px;
}
body.page-planning .slot-name:empty { display: none; }
body.page-planning .slot-delete-btn {
position: static !important;
opacity: 1 !important;
width: 44px !important;
height: 44px !important;
margin: 0 -12px 0 0;
color: var(--ink-faint) !important;
font-size: 0.85rem !important;
flex: 0 0 auto;
}
/* ---- Un cours : une ligne, pas une carte ---- */
body.page-planning .planning-cell,
body.page-planning .planning-cell.drop-zone {
position: relative;
display: grid !important;
grid-template-columns: auto 1fr auto;
align-items: center;
column-gap: 6px;
row-gap: 1px;
order: 1;
/* .planning-cell porte flex:1 pour la matrice du bureau : en liste, les
cours se partageaient la ligne et le titre cassait en trois. */
grid-column: 1 / -1;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 9px 0 9px 14px !important;
border: none !important;
border-top: 1px solid var(--hairline) !important;
border-radius: 0 !important;
background: transparent !important;
}
body.page-planning .planning-slot-header + .planning-cell {
border-top: none !important;
}
body.page-planning .planning-cell.draggable-session:active {
background: var(--canvas) !important;
}
/* Le liseré de salle : un jonc arrondi plutôt qu'un bord carré, et la
couleur de la salle — elle n'était posée que sur l'étiquette, si bien
que tous les cours ressortaient du même violet. */
body.page-planning .planning-cell.draggable-session::before {
content: '';
position: absolute;
left: 0;
top: 11px;
bottom: 11px;
width: 3px;
border-radius: 999px;
background: var(--room-color, var(--primary));
}
body.page-planning .planning-cell .drag-handle { display: none !important; }
body.page-planning .planning-cell .over-capacity-badge,
body.page-planning .planning-cell .cell-badge {
position: absolute !important;
top: 6px;
right: 0;
margin: 0 !important;
}
/* Ligne 1 — intitulé du cours et effectif. */
body.page-planning .cell-header {
grid-row: 1;
grid-column: 1 / -1;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
body.page-planning .cell-activity {
flex: 1 1 auto;
min-width: 0;
font-family: var(--font-display);
font-size: 0.97rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
}
/* L'effectif en pastille pleine (rouge, ambre) posait un problème de
contraste et alourdissait la ligne : chiffre nu, la couleur porte l'état. */
body.page-planning .cell-count {
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 0.84rem !important;
background: transparent !important;
padding: 0 !important;
color: var(--ink-soft) !important;
flex: 0 0 auto;
}
body.page-planning .cell-almost-full .cell-count { color: var(--warning-dark, #8a5209) !important; }
body.page-planning .cell-full .cell-count,
body.page-planning .cell-over-capacity .cell-count { color: var(--danger-dark, #b4392c) !important; }
/* Ligne 2 — salle, professeur, places. */
body.page-planning .cell-room {
display: block !important;
grid-row: 2;
grid-column: 1;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
/* !important : la substitution des couleurs sémantiques en texte
(plus haut) matche « color:var(--warning) » DANS l'attribut style,
donc aussi « --room-color:var(--warning) ». Le nom de salle sortait
ambre pour les seules salles dont la couleur est un jeton
sémantique. Le jonc et les pastilles portent la couleur. */
color: var(--ink-faint) !important;
margin: 0;
}
body.page-planning .cell-instructor {
grid-row: 2;
grid-column: 2;
font-size: 0.79rem;
color: var(--ink-soft);
margin: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.page-planning .cell-instructor i { display: none; }
body.page-planning .cell-instructor::before {
content: '·';
margin-right: 5px;
color: var(--hairline-strong);
}
/* La barre pleine largeur ne disait rien à 0 % et coûtait une ligne
entière ; les pastilles se lisent d'un coup d'œil et tiennent au bout
de la ligne du professeur. Le bureau garde sa barre. */
body.page-planning .cell-progress { display: none !important; }
body.page-planning .cell-seats {
display: flex !important;
grid-row: 2;
grid-column: 3;
align-items: center;
gap: 3px;
}
body.page-planning .cell-seats .seat {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--hairline-strong);
}
body.page-planning .cell-seats .seat--on { background: var(--room-color, var(--primary)); }
body.page-planning .cell-enrollments {
grid-row: 3;
grid-column: 1 / -1;
margin-top: 4px !important;
}
/* ---- Salles encore libres ---- */
/* Neuf grands cadres vides noyaient les cours : des pastilles compactes
en fin de carte, posées sur un lavis plutôt que cernées de pointillés,
qui donnaient à la carte un air de formulaire à remplir. */
body.page-planning .row-free-label {
display: block !important;
order: 2;
grid-column: 1 / -1;
width: 100%;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-faint);
margin: 12px 0 6px;
}
body.page-planning .planning-cell.cell-empty:not(.draggable-session) {
display: inline-flex !important;
/* .planning-cell est une colonne pour la matrice : sans cela le « + »
se pose au-dessus du nom de salle au lieu de le précéder. */
flex-direction: row !important;
align-items: center;
gap: 7px;
order: 3;
/* Les cours occupent les deux colonnes ; les pastilles, une seule. */
grid-column: auto !important;
justify-content: flex-start;
width: auto !important;
min-width: 0 !important;
min-height: 44px !important;
margin: 0 0 6px !important;
white-space: nowrap;
overflow: hidden;
padding: 0 14px !important;
border: none !important;
border-top: none !important;
border-radius: 999px !important;
background: var(--canvas) !important;
}
body.page-planning .planning-cell.cell-empty:not(.draggable-session)::before { content: none; }
body.page-planning .planning-cell.cell-empty:not(.draggable-session):active {
background: var(--wash) !important;
}
body.page-planning .planning-cell.cell-empty:not(.draggable-session) .cell-empty-content {
display: contents;
}
body.page-planning .planning-cell.cell-empty:not(.draggable-session) .cell-empty-content span { display: none; }
body.page-planning .planning-cell.cell-empty:not(.draggable-session) .cell-room {
display: inline !important;
grid-row: auto;
grid-column: auto;
margin: 0 !important;
font-size: 0.72rem;
letter-spacing: 0.03em;
color: var(--ink-soft) !important;
}
body.page-planning .planning-cell.cell-empty:not(.draggable-session) i {
color: var(--room-color, var(--primary));
font-size: 0.8rem;
}
}
/* Effectif d'une cellule de planning : la pastille pleine portait « blanc sur
ambre » (2,1:1) et, une fois la couleur de texte reprise par une couche
amont, « ardoise sur ambre » (3,52:1). Fond lavé + texte sémantique foncé. */
.cell-almost-full .cell-count {
background: var(--warning-wash, #fbf0dc) !important;
color: var(--warning-text, #8a5209) !important;
}
.cell-full .cell-count,
.cell-over-capacity .cell-count {
background: var(--danger-wash, #fae9e6) !important;
color: var(--danger-text, #b4392c) !important;
}
.cell-over-capacity .cell-count {
box-shadow: 0 0 0 2px rgba(180, 57, 44, 0.25) !important;
}
/* ==========================================================================
AUDIT MOBILE PROFOND — 26/08/2026
Corrections mesurées au navigateur sur les 33 pages de l'admin.
========================================================================== */
/* --- Jetons sémantiques « foncés » : ils servent de COULEUR DE TEXTE sur
leur propre lavis clair, où ils ne passaient pas (2,6 à 2,9:1). Recalés sur
la palette documentée dans DESIGN.md. Utilisés en fond, ils restent
valides : plus foncé ne dégrade jamais un texte blanc. */
:root {
--success-dark: #147a45;
--warning-dark: #8a5209;
--danger-dark: #b4392c;
--info-dark: #1d4ed8;
}
/* --- Bouton primaire : dégradé décoratif et halo coloré, tous deux proscrits
par la doctrine. mobile-polish les impose en !important. */
.btn-primary,
.btn-primary:hover:not(:disabled) {
background-image: none !important;
background-color: var(--primary, #4338ca) !important;
box-shadow: none !important;
}
.btn-primary:hover:not(:disabled) { background-color: var(--primary-dark, #3730a3) !important; }
@media (max-width: 768px) {
/* --- Pastilles de salles : 19 px de haut. Ma propre règle générale posait
min-height:0 !important, qui battait le 42 px des pastilles. */
body.page-planning .planning-cell.cell-empty:not(.draggable-session) {
min-height: 44px !important;
padding: 0 14px !important;
}
/* --- Bandeaux d'outils : 36 px, sous le seuil tactile. */
body.admin-app .btn-sm,
body.admin-app .comm-tab,
body.admin-app .tab-btn,
body.admin-app .summer-tab {
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
/* --- Micro-typographie : les pastilles descendaient à 10,8 px. */
body.admin-app .badge, body.admin-app .chip, body.admin-app .pill,
body.admin-app .status-badge, body.admin-app .day-chip,
body.admin-app .support-thread-count, body.admin-app .request-status-badge {
font-size: 12px !important;
line-height: 1.35;
}
/* --- Indications de formulaire trop pâles sur fond lavé. */
.apz-hint { color: var(--ink-faint, #6f6c88) !important; }
}
@media (max-width: 768px) {
/* ==========================================================================
PLAN DES SALLES
Les zones sont posées en pourcentage sur l'image du plan. Le faire
défiler n'en montrait que la moitié — on croyait l'interface cassée —
et remplacer les noms par une liste numérotée doublait la hauteur de
la page pour répéter « Disponible » huit fois.
Le plan tient donc ENTIER dans l'écran, et le nom qui n'entre pas en
largeur bascule d'un quart de tour (cf. _ajusterEtiquettes).
========================================================================== */
body.page-planning .fp-wrap { padding: var(--space-2) !important; }
body.page-planning .fp-stage { min-width: 0; width: 100%; }
/* Légende des états : quatre pastilles, une consigne, un bouton — quatre
lignes auparavant. */
body.page-planning .fp-legend {
gap: var(--space-2) var(--space-3) !important;
font-size: 12px !important;
margin-bottom: var(--space-2) !important;
padding-bottom: var(--space-2) !important;
}
body.page-planning .fp-legend .fp-dot {
width: 11px;
height: 11px;
margin-right: var(--space-1);
}
body.page-planning .fp-legend-hint {
margin-left: 0 !important;
flex-basis: 100%;
color: var(--ink-faint, #6f6c88) !important;
}
body.page-planning #fpEditBtn { margin-left: 0 !important; }
/* Le nom occupe toute la pièce et s'y centre : dans 40 px de large, une
bannière en haut ne laissait de place à rien. */
body.page-planning .fp-room-name {
position: absolute;
inset: 0;
display: flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 2px !important;
font-size: 9.5px !important;
line-height: 1.1;
letter-spacing: 0.02em;
white-space: nowrap !important;
text-shadow: 0 0 3px var(--white), 0 0 3px var(--white);
pointer-events: none;
}
body.page-planning .fp-room-name--pivot {
writing-mode: vertical-rl;
transform: rotate(180deg);
}
/* « Aucune session à venir » répété dans chaque pièce libre masquait le
nom : la couleur de la zone dit déjà qu'elle est disponible. En
revanche « Aucune salle assignée » signale une anomalie de
configuration et reste affiché. */
body.page-planning .fp-room:not(.fp-room--unassigned) .fp-room-body {
display: none !important;
}
/* La pièce non assignée garde son liseré violet distinctif ; son libellé
chevauchait le nom pivoté dans 44 px de large. Le nom prime. */
body.page-planning .fp-room--unassigned .fp-room-body { display: none !important; }
/* --- Micro-typographie. Plancher : 12 px pour le texte courant, 11,5 px
pour les étiquettes capitales (la taille documentée dans DESIGN.md).
Les valeurs relevées descendaient à 9,3 px.
ATTENTION À LA SPÉCIFICITÉ : mobile-polish pose
« body.page-dashboard .qa-label { font-size:.65rem !important } ».
Entre deux !important, c'est la spécificité qui tranche, pas l'ordre
de chargement — d'où le préfixe body.admin-app ici. */
body.admin-app #seasonIndicatorLabel,
body.admin-app small, body.admin-app .text-sm, body.admin-app .small {
font-size: 12px !important;
}
body.admin-app .qa-label,
body.admin-app .hero-rate-label,
body.admin-app .cell-room,
body.admin-app .row-free-label,
body.admin-app .chip-specialty,
body.admin-app .stat-label,
body.admin-app [style*="font-size:0.72rem"],
body.admin-app .it-table th {
font-size: 11.5px !important;
}
/* --- Cases à cocher enveloppées d'une étiquette : c'est l'étiquette
qu'on touche, elle doit donc porter la hauteur de cible. */
label.day-check,
label.switch,
.form-check-label,
label:not([class^="swal2"]):has(> input[type="checkbox"]),
label:not([class^="swal2"]):has(> input[type="radio"]) {
min-height: 44px;
display: inline-flex;
align-items: center;
gap: 8px;
}
}
@media (max-width: 768px) {
/* --- Débordements mesurés à l'audit.
Bandeau d'onglets Communications : il déborde lui-même (404 px) faute
d'être borné ; les chaînes techniques des journaux (« POST /api/… »)
n'ont aucun point de césure ; les