:root {
    /* 1. Couleurs Primaires */
    --orange: #EE7800;
    --gris-bleu: #80959F;
    --gris-clair: #BFC8CD;

    /* 2. Couleurs Pro (B2B) */
    --bleu-pro: #25346C;
    --jaune-pro: #FFEA29;

    /* 3. Textes & Lisibilité */
    --bleu-nuit: #18214D;
    --gris-moyen: #718096;
    --white: #FFFFFF;

    /* 4. Fonds Pastels / Neutres */
    --bg-blanc-casse: #F8F8F8;
    --bg-gris-nuage: #EEF0F1;
    --bg-beige: #FFF2E4;
    --bg-bleu-pale: #F1F3FA;
    --bg-jaune-pale: #FEFDBF;

    /* 5. Sémantique UI (Statuts) */
    --success-bg: #D9EDD9;
    --success-text: #00AA19;

    --error-bg: #F8E7E7;
    --error-text: #C82727;

    --neutral-bg: #EEF0F1;
    --neutral-text: #495262;

    /* 6. Formes et Ombres */
    --radius-btn: 15px;
    --radius-card: 20px;
    --radius-badge: 50px;

    /* Ombre très légère à 2% dictée par la charte */
    --shadow-soft: 0 10px 25px rgba(26, 32, 44, 0.02);
    --shadow-hover: 0 12px 30px rgba(26, 32, 44, 0.05);
    --shadow-glow-orange: 0 10px 25px rgba(238, 120, 0, 0.2);
    --shadow-glow-bleu: 0 10px 25px rgba(37, 52, 108, 0.2);

    /* 7. Typographie */
    --font-title: 'Poppins', sans-serif;
    --font-body: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;

    /* 8. Interlignage Unique */
    --lh-normal: 1.5;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, .wrapper {
    font-family: var(--font-body);
    color: var(--bleu-nuit);
    background-color: var(--bg-blanc-casse);
    line-height: var(--lh-normal);
    font-size: 12pt;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    color: var(--bleu-nuit);
    font-weight: 700;
    line-height: var(--lh-normal);
    margin-bottom: 8px;
}

.title {
    font-family: var(--font-title);
    color: var(--bleu-nuit);
}

/* Tailles de police en pt avec clamp pour la fluidité (sans rem/em) */
h1, .h1 { font-size: clamp(24pt, 4vw, 28pt); font-weight: 700; line-height: var(--lh-normal); }
h2, .h2 { font-size: clamp(20pt, 3vw, 22pt); font-weight: 700; line-height: var(--lh-normal); }
h3, .h3 { font-size: clamp(16pt, 2vw, 18pt); font-weight: 700; line-height: var(--lh-normal); }

p, .text-body {
    font-family: var(--font-body);
    font-size: clamp(11pt, 1.5vw, 12pt);
    color: var(--bleu-nuit);
    line-height: var(--lh-normal);
    margin-bottom: 16px;
}

.text-secondary, small {
    font-family: var(--font-body);
    font-size: 10pt;
    line-height: var(--lh-normal);
    color: var(--gris-moyen);
}

/* Classes Utilitaires Interlignage */
.lh-normal { line-height: var(--lh-normal) !important; }

/* Classes Utilitaires Couleurs Texte */
.text-orange { color: var(--orange) !important; }
.text-bleu-pro { color: var(--bleu-pro) !important; }
.text-gris { color: var(--gris-moyen) !important; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: var(--radius-btn);
    font-family: var(--font-title);
    font-weight: 500;
    font-size: 12pt;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn svg { margin-left: 10px; transition: transform 0.3s ease; flex-shrink: 0; }
.btn:hover svg { transform: translateX(4px); }

.btn-primary {
    background-color: var(--orange);
    color: var(--white);
    box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
    background-color: #DE6F00;
    box-shadow: var(--shadow-glow-orange);
    transform: translateY(-2px);
}

.btn-primary-pro {
    background-color: var(--bleu-nuit);
    color: var(--white);
    box-shadow: var(--shadow-soft);
}
.btn-primary-pro:hover {
    box-shadow: var(--shadow-glow-bleu);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--bleu-nuit);
    border: 1px solid var(--gris-clair);
}
.btn-secondary:hover {
    border-color: var(--orange);
    color: var(--orange);
    background-color: var(--bg-blanc-casse);
}

.btn-ghost {
    background-color: transparent;
    color: var(--gris-moyen);
    padding: 14px 20px;
}
.btn-ghost:hover {
    color: var(--bleu-nuit);
    background-color: var(--bg-gris-nuage);
}

.btn-disabled, .btn:disabled {
    background-color: var(--bg-gris-nuage);
    color: var(--gris-clair);
    cursor: not-allowed;
    box-shadow: none;
    transform: none !important;
}

.btn-filter {
    display: inline-flex;
    padding: 8px 16px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: var(--radius-btn);
    background-color: var(--bg-blanc-casse);
    border: 1px solid var(--gris-clair);
    color: var(--gris-moyen);
    font-family: var(--font-body);
    font-size: 11pt;
    line-height: var(--lh-normal);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-filter:hover {
    background-color: var(--bg-gris-nuage);
    color: var(--bleu-nuit);
}
.btn-filter-active {
    background-color: var(--bg-beige);
    border-color: var(--orange);
    color: var(--orange);
}
.btn-filter-active-blue {
    background-color: var(--bg-bleu-pale);
    border-color: var(--bleu-pro);
    color: var(--bleu-pro);
}

.card {
    background-color: var(--white);
    border-radius: var(--radius-card);
    padding: 30px;
    margin-top: 16px;
    margin-bottom: 24px;
    box-shadow: 0 10px 25px rgba(26, 32, 44, 0.02);
    border: 1px solid transparent;
}

.card-grey { background-color: var(--bg-gris-nuage); box-shadow: none; }
.card-beige { background-color: var(--bg-beige); box-shadow: none; }
.card-blue { background-color: var(--bg-bleu-pale); box-shadow: none; }
.card-outlined {
    background-color: transparent;
    border: 1px solid var(--bg-gris-nuage);
    box-shadow: none;
}

.alert {
    display: flex;
    align-items: flex-start;
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: var(--radius-btn);
    font-family: var(--font-body);
    line-height: var(--lh-normal);
}

.alert-icon {
    margin-right: 15px;
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

.alert-icon svg {
    display: block;
}

.alert-content h4 {
    margin: 0 0 5px 0;
    font-family: var(--font-title);
    font-size: 12pt;
    font-weight: 700;
    line-height: var(--lh-normal);
}

.alert-content p {
    margin: 0;
    font-size: 11pt;
    line-height: var(--lh-normal);
}

.alert-success { background-color: var(--success-bg); color: var(--success-text); }
.alert-success h4, .alert-success .alert-icon { color: var(--success-text); }

.alert-error { background-color: var(--error-bg); color: var(--error-text); }
.alert-error h4, .alert-error .alert-icon { color: var(--error-text); }

.alert-info { background-color: var(--neutral-bg); color: var(--neutral-text); }
.alert-info h4, .alert-info .alert-icon { color: var(--neutral-text); }

.alert-warning { background-color: var(--bg-jaune-pale); color: var(--bleu-nuit); }
.alert-warning h4, .alert-warning .alert-icon { color: var(--bleu-nuit); }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: var(--radius-badge);
    font-family: var(--font-title);
    font-size: 9pt;
    font-weight: 700;
    line-height: var(--lh-normal);
    text-transform: uppercase;
    letter-spacing: 0px;
}

.badge-orange {
    background-color: var(--bg-beige);
    color: var(--orange);
    border: 1px solid rgba(238, 120, 0, 0.25);
}
.badge-grey { background-color: var(--bg-gris-nuage); color: var(--bleu-nuit); }
.badge-success { background-color: var(--success-bg); color: var(--success-text); }

.section-title {
    border-bottom: 2px solid var(--bg-gris-nuage);
    padding-bottom: 8px;
    margin-bottom: 32px;
    margin-top: 48px;
    font-weight: 700;
    line-height: var(--lh-normal);
}

.py-5 { padding-top: 48px; padding-bottom: 48px; }
.mb-5 { margin-bottom: 48px; }
.mb-3 { margin-bottom: 16px; }

@media (max-width: 768px) {
    body, p, .ma-text-body {
        font-size: 11pt;
    }
    .text-secondary, small {
        font-size: 9pt;
    }
    .card {
        padding: 20px;
        margin-top: 12px;
        margin-bottom: 16px;
    }
    .btn {
        padding: 10px 20px;
        margin-bottom: 8px;
        margin-right: 8px;
    }
    .btn-filter {
        padding: 6px 12px;
        margin-bottom: 8px;
        margin-right: 8px;
    }
    .alert {
        padding: 12px 15px;
    }

    .row {
        margin-left: -8px;
        margin-right: -8px;
    }
    .row > * {
        padding-left: 8px;
        padding-right: 8px;
    }

    .py-5 { padding-top: 32px; padding-bottom: 32px; }
    .mb-5 { margin-bottom: 32px; }

    .section-title {
        margin-bottom: 24px;
        margin-top: 32px;
    }
}