/* ============================================================
   DESIGN SYSTEM — Salon National QHSE Cameroun 2027
   Ce fichier est la source unique de vérité pour l'identité
   visuelle : couleurs, typographie, espacements, composants.
   Toute page du site (public, formulaires, admin) l'inclut.
   ============================================================ */

/* ---------- Import typographique ---------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    /* ---------- Couleurs ---------- */
    --lime:          #B7E600;
    --lime-soft:     #E8F7B8;
    --lime-pale:     #F5FBE7;
    --forest-deep:   #123524;
    --forest-dark:   #0B2117;
    --white:         #FFFFFF;
    --off-white:     #F7F8F5;
    --text-dark:     #172019;
    --text-muted:    #68736B;
    --border:        #DDE4DC;
    --success:       #2E8B57;
    --warning:       #D99A00;
    --danger:        #C94B4B;
    --info:          #3D7EA6;

    /* ---------- Typographie ---------- */
    --police: 'Manrope', -apple-system, 'Segoe UI', sans-serif;

    /* ---------- Espacement (base 4px/8px) ---------- */
    --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
    --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px; --esp-9: 96px;

    /* ---------- Rayons (modérés, jamais "tout en pilule") ---------- */
    --rayon-sm: 4px; --rayon-md: 8px; --rayon-lg: 12px;

    /* ---------- Ombres (rares, subtiles) ---------- */
    --ombre-sm: 0 1px 3px rgba(11, 33, 23, .08);
    --ombre-md: 0 4px 16px rgba(11, 33, 23, .10);

    /* ---------- Transitions (rapides et naturelles) ---------- */
    --trans: 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Base ---------- */
.qhse-ds { font-family: var(--police); color: var(--text-dark); }
.qhse-ds h1, .qhse-ds h2, .qhse-ds h3, .qhse-ds h4 { font-family: var(--police); letter-spacing: -.01em; margin: 0; }
.qhse-ds h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.08; }
.qhse-ds h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; line-height: 1.2; }
.qhse-ds h3 { font-size: 1.15rem; font-weight: 700; }
.qhse-ds p { line-height: 1.65; color: var(--text-muted); }
.qhse-ds .eyebrow {
    font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--forest-deep);
}
.qhse-ds .eyebrow.eyebrow-clair { color: var(--lime); }
.qhse-ds .texte-muted { color: var(--text-muted); }

/* ---------- Boutons : 5 variantes seulement ---------- */
.qhse-ds .btn-qhse {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
    font-family: var(--police); font-weight: 700; font-size: .92rem; letter-spacing: .01em;
    padding: 13px 28px; border-radius: var(--rayon-md); border: 1px solid transparent;
    cursor: pointer; text-decoration: none; transition: transform var(--trans), box-shadow var(--trans), background var(--trans);
    line-height: 1;
}
.qhse-ds .btn-qhse svg { margin-right: var(--esp-2); }
.qhse-ds .btn-qhse:active { transform: scale(.98); }

.qhse-ds .btn-primary { background: var(--lime); color: var(--forest-dark); }
.qhse-ds .btn-primary:hover { box-shadow: var(--ombre-md); color: var(--forest-dark); transform: translateY(-1px); }

.qhse-ds .btn-secondary { background: transparent; color: var(--forest-deep); border-color: var(--border); }
.qhse-ds .btn-secondary:hover { border-color: var(--forest-deep); color: var(--forest-deep); }

.qhse-ds .btn-dark { background: var(--forest-dark); color: var(--white); }
.qhse-ds .btn-dark:hover { background: var(--forest-deep); color: var(--white); }

.qhse-ds .btn-ghost { background: transparent; color: var(--text-dark); border-color: transparent; }
.qhse-ds .btn-ghost:hover { background: var(--off-white); color: var(--text-dark); }

.qhse-ds .btn-danger { background: var(--danger); color: var(--white); }
.qhse-ds .btn-danger:hover { background: #b23e3e; color: var(--white); }

/* ---------- Badges de niveau : jamais la couleur seule, toujours le texte complet ---------- */
.qhse-ds .badge-niveau {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    font-size: .76rem; font-weight: 700; letter-spacing: .02em;
    padding: 6px 12px; border-radius: var(--rayon-sm); border: 1px solid transparent;
}
.qhse-ds .badge-niveau-a { background: var(--lime-pale); color: var(--forest-deep); border-color: var(--lime-soft); }
.qhse-ds .badge-niveau-b { background: var(--forest-deep); color: var(--white); }
.qhse-ds .badge-niveau-c { background: var(--forest-dark); color: var(--lime-soft); }
.qhse-ds .badge-niveau-d { background: var(--forest-dark); color: var(--white); border: 1px solid var(--lime); }
.qhse-ds .badge-niveau-e { background: var(--off-white); color: var(--text-muted); border-color: var(--border); }

/* ---------- États (succès/attention/danger/info) ---------- */
.qhse-ds .badge-etat { display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:700; padding:5px 11px; border-radius: var(--rayon-sm); }
.qhse-ds .badge-etat-succes  { background: #EAF5EE; color: var(--success); }
.qhse-ds .badge-etat-alerte  { background: #FBF1DC; color: var(--warning); }
.qhse-ds .badge-etat-danger  { background: #FBEAEA; color: var(--danger); }
.qhse-ds .badge-etat-info    { background: #E9F2F7; color: var(--info); }
.qhse-ds .badge-etat-neutre  { background: var(--off-white); color: var(--text-muted); }

/* ---------- Cartes : à utiliser avec parcimonie ---------- */
.qhse-ds .carte-qhse {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--rayon-lg);
    padding: var(--esp-5); box-shadow: var(--ombre-sm);
}

/* ---------- Champs de formulaire ---------- */
.qhse-ds .champ-qhse {
    font-family: var(--police); border: 1px solid var(--border); border-radius: var(--rayon-md);
    padding: 11px 14px; font-size: .94rem; color: var(--text-dark); background: var(--white);
    transition: border-color var(--trans), box-shadow var(--trans); width: 100%;
}
.qhse-ds .champ-qhse:focus { outline: none; border-color: var(--forest-deep); box-shadow: 0 0 0 3px var(--lime-soft); }
.qhse-ds label.label-qhse { font-size: .82rem; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; display: block; }
.qhse-ds .helper-text { font-size: .78rem; color: var(--text-muted); margin-top: 4px; }

/* ---------- Tableaux ---------- */
.qhse-ds table.table-qhse { width: 100%; border-collapse: collapse; font-size: .9rem; }
.qhse-ds table.table-qhse thead th {
    text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.qhse-ds table.table-qhse tbody td { padding: 14px; border-bottom: 1px solid var(--border); }
.qhse-ds table.table-qhse tbody tr { transition: background var(--trans); }
.qhse-ds table.table-qhse tbody tr:hover { background: var(--off-white); }

/* ---------- Alertes ---------- */
.qhse-ds .alerte-qhse { border-radius: var(--rayon-md); padding: 14px 18px; font-size: .88rem; border: 1px solid; }
.qhse-ds .alerte-succes { background: #EAF5EE; border-color: #cfe8d8; color: #1c5c39; }
.qhse-ds .alerte-danger { background: #FBEAEA; border-color: #f0cccc; color: #8f3232; }
.qhse-ds .alerte-info   { background: #E9F2F7; border-color: #c9dfe9; color: #2a5b73; }

/* ---------- États vides ---------- */
.qhse-ds .etat-vide { text-align: center; padding: var(--esp-8) var(--esp-4); color: var(--text-muted); }
.qhse-ds .etat-vide .icone { font-size: 2rem; margin-bottom: var(--esp-3); opacity: .5; }

/* ---------- Skeleton loading ---------- */
.qhse-ds .skeleton {
    background: linear-gradient(90deg, var(--off-white) 25%, #eef1ea 37%, var(--off-white) 63%);
    background-size: 400% 100%; animation: qhse-skeleton 1.4s ease infinite; border-radius: var(--rayon-sm);
}
@keyframes qhse-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Focus clavier visible (accessibilité) ---------- */
.qhse-ds a:focus-visible, .qhse-ds button:focus-visible, .qhse-ds input:focus-visible,
.qhse-ds select:focus-visible, .qhse-ds textarea:focus-visible {
    outline: 2px solid var(--forest-deep); outline-offset: 2px;
}