/* ============================================================
   MonAlternance — Design System CSS
   Tokens extraits de la maquette Figma (W7caDCUoHeFM6IHdgkUXcN)
   ============================================================ */

:root {
    /* Colors */
    --ma-primary:       #00B4FF;
    --ma-primary-dark:  #0090CC;
    --ma-primary-light: #E0F4FF;
    --ma-dark:          #1A1A2E;
    --ma-bg:            #F5F7FB;
    --ma-white:         #FFFFFF;
    --ma-text:          #4B5563;
    --ma-text-light:    #6B7280;
    --ma-text-dark:     #1F2937;
    --ma-accent:        #06B6D4;
    --ma-success:       #10B981;
    --ma-yellow:        #FBBF24;
    --ma-border:        #E5E7EB;
    --ma-card-shadow:   0 4px 20px rgba(0, 0, 0, 0.08);
    --ma-card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);

    /* Gradients */
    --ma-gradient-hero: linear-gradient(135deg, #00B4FF 0%, #06B6D4 100%);
    --ma-gradient-cta:  linear-gradient(90deg, #00B4FF 0%, #0EA5E9 100%);
    --ma-gradient-card: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);

    /* Typography */
    --ma-font-heading: 'Poppins', sans-serif;
    --ma-font-body:    'Inter', sans-serif;

    /* Radius */
    --ma-radius-sm:    8px;
    --ma-radius-md:    12px;
    --ma-radius-lg:    16px;
    --ma-radius-xl:    24px;
    --ma-radius-full:  9999px;

    /* Spacing */
    --ma-section-py:   80px;
    --ma-section-px:   24px;
}

/* ─── Global Reset ─── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--ma-font-body);
    color: var(--ma-text-dark);
    background: var(--ma-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.ma-page .site-header,
body.ma-page .site-footer {
    display: none;
}

/* ─── Typography ─── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ma-font-heading);
    line-height: 1.2;
    color: var(--ma-dark);
}

/* ─── Buttons ─── */
.ma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-family: var(--ma-font-body);
    font-weight: 600;
    font-size: 15px;
    border-radius: var(--ma-radius-full);
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    line-height: 1.4;
}

.ma-btn-primary {
    background: var(--ma-primary);
    color: var(--ma-white);
}
.ma-btn-primary:hover {
    background: var(--ma-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 180, 255, 0.35);
}

.ma-btn-outline {
    background: transparent;
    color: var(--ma-primary);
    border: 2px solid var(--ma-primary);
}
.ma-btn-outline:hover {
    background: var(--ma-primary);
    color: var(--ma-white);
}

.ma-btn-white {
    background: var(--ma-white);
    color: var(--ma-primary);
    border: 2px solid var(--ma-white);
}
.ma-btn-white:hover {
    background: transparent;
    color: var(--ma-white);
    border-color: var(--ma-white);
}

.ma-btn-sm {
    padding: 8px 20px;
    font-size: 13px;
}
.ma-btn-lg {
    padding: 16px 36px;
    font-size: 16px;
}

/* ─── Cards ─── */
.ma-card {
    background: var(--ma-white);
    border-radius: var(--ma-radius-lg);
    box-shadow: var(--ma-card-shadow);
    padding: 24px;
    transition: all 0.3s ease;
}
.ma-card:hover {
    box-shadow: var(--ma-card-shadow-hover);
    transform: translateY(-2px);
}

/* ─── Badge Vérifié ─── */
.ma-badge-verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: var(--ma-white);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--ma-radius-full);
    letter-spacing: 0.02em;
}
.ma-badge-verified::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    font-size: 10px;
}

/* ─── Tags / Pills ─── */
.ma-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: var(--ma-radius-full);
    font-family: var(--ma-font-body);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.ma-pill-blue {
    background: var(--ma-primary-light);
    color: var(--ma-primary);
    border: 1px solid rgba(0, 180, 255, 0.2);
}
.ma-pill-blue:hover {
    background: var(--ma-primary);
    color: var(--ma-white);
}

/* ─── Section Backgrounds ─── */
.ma-section-white {
    background: var(--ma-white);
}
.ma-section-light {
    background: var(--ma-bg);
}
.ma-section-blue {
    background: var(--ma-gradient-hero);
    color: var(--ma-white);
}
.ma-section-blue h2,
.ma-section-blue h3,
.ma-section-blue p {
    color: var(--ma-white);
}

/* ─── Stars Rating ─── */
.ma-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--ma-yellow);
}

/* ─── Testimonial Card ─── */
.ma-testimonial {
    background: var(--ma-white);
    border-radius: var(--ma-radius-lg);
    padding: 32px;
    box-shadow: var(--ma-card-shadow);
    position: relative;
}
.ma-testimonial::before {
    content: '"';
    font-family: var(--ma-font-heading);
    font-size: 72px;
    color: var(--ma-primary);
    opacity: 0.15;
    position: absolute;
    top: 12px;
    left: 20px;
    line-height: 1;
}

/* ─── Établissement Card ─── */
.ma-etablissement-card {
    background: var(--ma-white);
    border-radius: var(--ma-radius-lg);
    overflow: hidden;
    box-shadow: var(--ma-card-shadow);
    transition: all 0.3s ease;
    border: 1px solid var(--ma-border);
}
.ma-etablissement-card:hover {
    box-shadow: var(--ma-card-shadow-hover);
    transform: translateY(-4px);
}
.ma-etablissement-card__img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.ma-etablissement-card__body {
    padding: 16px;
}
.ma-etablissement-card__name {
    font-family: var(--ma-font-heading);
    font-weight: 600;
    font-size: 16px;
    color: var(--ma-dark);
    margin: 0 0 8px;
}
.ma-etablissement-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ma-text-light);
}
.ma-etablissement-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* ─── Formation Card ─── */
.ma-formation-card {
    background: var(--ma-white);
    border-radius: var(--ma-radius-md);
    overflow: hidden;
    box-shadow: var(--ma-card-shadow);
    transition: all 0.3s ease;
}
.ma-formation-card:hover {
    box-shadow: var(--ma-card-shadow-hover);
    transform: translateY(-3px);
}
.ma-formation-card__img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.ma-formation-card__body {
    padding: 16px;
}
.ma-formation-card__title {
    font-weight: 600;
    font-size: 14px;
    color: var(--ma-dark);
    margin: 0 0 4px;
}
.ma-formation-card__type {
    font-size: 12px;
    color: var(--ma-text-light);
}

/* ─── Verification Process Bar ─── */
.ma-process-bar {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    padding: 40px 0;
}
.ma-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 200px;
    text-align: center;
}
.ma-process-step__icon {
    width: 56px;
    height: 56px;
    background: var(--ma-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ma-process-step__icon img {
    width: 28px;
    height: 28px;
}
.ma-process-step__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ma-text);
}

/* ─── Diploma Pills Section ─── */
.ma-diplomas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

/* ─── Footer CTA ─── */
.ma-footer-cta {
    background: var(--ma-gradient-hero);
    padding: 60px 24px;
    text-align: center;
    border-radius: var(--ma-radius-xl);
    margin: 40px auto;
    max-width: 1200px;
}
.ma-footer-cta h2 {
    color: var(--ma-white);
    margin-bottom: 16px;
}
.ma-footer-cta p {
    color: rgba(255,255,255,0.85);
    margin-bottom: 24px;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    :root {
        --ma-section-py: 48px;
    }
    .ma-process-bar {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
}

/* ─── Elementor Overrides ─── */
.elementor-section.elementor-section-full_width > .elementor-container {
    max-width: 100%;
}

.elementor h1, .elementor h2, .elementor h3 {
    font-family: var(--ma-font-heading);
}

.elementor-widget-text-editor {
    font-family: var(--ma-font-body);
}

.elementor-button {
    font-family: var(--ma-font-body) !important;
    font-weight: 600 !important;
    border-radius: var(--ma-radius-full) !important;
}