/* ==========================================================================
LYANE — Patch v7 Design & Accessibilité (07/04/2026)
Convergence audits design-critique + accessibility-review
À inclure dans les 5 pages prescripteur via :
========================================================================== */
/* --------------------------------------------------------------------------
1. CONTRASTE — Gold (#9ab81a = 2.27:1 ❌) → Gold-dim (#7a9812 = 3.32:1)
Override de toutes les utilisations de --gold comme couleur de texte
sur fond clair. Les usages background/border restent inchangés.
-------------------------------------------------------------------------- */
/* Sidebar : position relative pour ancrer le ::before (barre gold) */
.nav-item {
position: relative !important;
}
/* Sidebar : item actif — Variante B (blanc pur + barre latérale gold)
Contraste texte blanc sur sage : 12.6:1 ✅ WCAG AAA
Barre verticale gold = signal iOS élégant */
.nav-item.active,
.sidebar-menu-item.active {
background: rgba(154, 184, 26, .15) !important;
color: #ffffff !important;
font-weight: 600;
position: relative;
}
.nav-item.active::before,
.sidebar-menu-item.active::before {
content: '';
position: absolute;
left: -8px; top: 4px; bottom: 4px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--gold, #9ab81a);
}
.nav-item.active .icon {
opacity: 1 !important;
}
/* KPI valeurs en gold sur fond blanc */
.kpi-card.highlight .kpi-value,
.kpi-value.text-gold,
.cloture-banner .amt {
color: var(--gold-dim) !important;
}
/* Tout texte explicitement marqué gold */
.text-gold,
.gold-text {
color: var(--gold-dim);
}
/* Compte : labels d'entête en gold (espacement letter-spacing) */
.profil-eyebrow,
[style*="color:var(--gold)"]:not([class*="bg-"]):not([class*="border"]) {
/* Note : les inline styles seront patchés directement dans le HTML.
Ce sélecteur est un filet de sécurité. */
}
/* --------------------------------------------------------------------------
2. FOCUS VISIBLE — WCAG 2.4.7
Indicateur de focus clavier cohérent sur tous les éléments interactifs.
-------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.nav-item:focus-visible,
.sidebar-menu-item:focus-visible,
.reco-pill:focus-visible,
.f-pill:focus-visible,
.rang-pill:focus-visible,
.rang-pill-mini:focus-visible,
.ctrl-btn:focus-visible,
.dcard:focus-visible {
outline: 3px solid var(--gold-dim);
outline-offset: 2px;
border-radius: 6px;
}
/* Désactive l'outline par défaut uniquement quand on a un focus-visible */
:focus:not(:focus-visible) {
outline: none;
}
/* --------------------------------------------------------------------------
3. SCREEN READER ONLY — WCAG 1.1.1 / 4.1.2
Classe utilitaire pour textes alternatifs invisibles visuellement.
-------------------------------------------------------------------------- */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* --------------------------------------------------------------------------
4. TOUCH TARGETS — WCAG 2.5.5 (≥ 44×44 CSS pixels)
Garantit que les éléments cliquables atteignent la taille minimale
sur mobile sans casser le design existant (utilise pseudo-element).
-------------------------------------------------------------------------- */
.nav-item,
.sidebar-menu-item,
.reco-pill,
.f-pill,
.ctrl-btn {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* Petits badges/pills : zone de clic étendue sans changer la taille visuelle */
.rang-pill-mini,
.reco-pill-count {
position: relative;
}
.rang-pill-mini::after,
.reco-pill-count::after {
content: '';
position: absolute;
inset: -12px;
/* zone tactile invisible de 44px min */
}
/* --------------------------------------------------------------------------
5. EMPTY STATES — UX (audit design-critique)
Composant standardisé pour les listes/tables vides.
-------------------------------------------------------------------------- */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 32px 16px;
background: #f7f6f2 !important; /* fallback explicite — --parchment non défini sur toutes les pages */
border: 2px dashed #cce5d6;
border-radius: 16px;
color: #6b6b60;
margin: 8px;
box-sizing: border-box;
width: calc(100% - 16px); /* s'adapte aux colonnes étroites */
word-break: break-word;
}
.empty-state__icon {
font-size: 2.5rem;
margin-bottom: 12px;
opacity: 0.6;
}
.empty-state__title {
font-family: var(--ff-serif, 'Playfair Display', serif);
font-size: 1.25rem;
color: var(--sage, #1a4a3a);
margin: 0 0 8px;
font-weight: 600;
}
.empty-state__desc {
font-size: 0.95rem;
margin: 0 0 20px;
max-width: 360px;
line-height: 1.5;
}
.empty-state__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--sage, #1a4a3a);
color: #fff;
text-decoration: none;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
border: none;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
min-height: 44px;
}
.empty-state__cta:hover {
background: var(--sage-mid, #2d7a5f);
transform: translateY(-1px);
}
.empty-state__cta:focus-visible {
outline: 3px solid var(--gold-dim);
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
6. SIDEBAR LANDMARK — WCAG 1.3.1 / 4.1.2
Style appliqué quand