/* =========================================================
   YCPD — Youth Center for Peace and Development
   Design tokens
   Brand colors are fixed (from the logo). Surface/text tokens
   flip between [data-theme="light"] and [data-theme="dark"].
   ========================================================= */

:root {
    /* Fixed brand palette — pulled directly from the YCPD mark */
    --brand-navy: #0a1b45;
    --brand-blue: #1c3fb8;
    --brand-magenta: #e31c79;
    --brand-yellow: #f5c518;
    --brand-teal: #17a398;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --ease: cubic-bezier(.22, .68, 0, 1);
}

[data-theme="light"] {
    --bg: #f6f7fc;
    --surface: #ffffff;
    --surface-2: #eef1f9;
    --text: #0e1530;
    --text-muted: #5a6178;
    --border: rgba(10, 27, 69, .10);
    --shadow: 0 22px 60px rgba(10, 27, 69, .12);
    --shadow-lg: 0 34px 90px rgba(10, 27, 69, .18);
    --hero-bg: radial-gradient(120% 140% at 82% 0%, #163a8f 0%, #0a1b45 46%, #060f2c 100%);
    --hero-text: #ffffff;
    --hero-muted: rgba(255, 255, 255, .78);
    --img-fade: .12;
    --scrim: rgba(10, 27, 69, .95);
    /* Pillars are uniform in each theme: dark pink in light mode */
    --pillar-bg: #a90d5c;
    --pillar-bg-2: #8f0a4c;
}

[data-theme="dark"] {
    --bg: #05070f;
    --surface: #0c1226;
    --surface-2: #101833;
    --text: #eef1fb;
    --text-muted: #99a2c4;
    --border: rgba(255, 255, 255, .09);
    --shadow: 0 22px 60px rgba(0, 0, 0, .55);
    --shadow-lg: 0 34px 90px rgba(0, 0, 0, .6);
    --hero-bg: radial-gradient(120% 140% at 82% 0%, #12296e 0%, #060d24 46%, #03050d 100%);
    --hero-text: #f5f7ff;
    --hero-muted: rgba(245, 247, 255, .74);
    --img-fade: .30;
    --scrim: rgba(3, 6, 16, .96);
    /* Pillars are uniform in each theme: dark blue in dark mode */
    --pillar-bg: #0f2668;
    --pillar-bg-2: #0a1b45;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--text);
    background: var(--bg);
    font-family: "DM Sans", Arial, sans-serif;
    line-height: 1.6;
    transition: background-color .35s var(--ease), color .35s var(--ease);
}
h1, h2, h3, h4 { margin: 0; font-family: "Manrope", Arial, sans-serif; line-height: 1.06; letter-spacing: -.03em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1180px, 91%); margin: 0 auto; }
::selection { background: var(--brand-magenta); color: #fff; }

/* Ribbon — the recurring signature: the logo's 4-color sequence,
   used as a structural accent instead of decoration. */
.ribbon { display: inline-flex; gap: 4px; height: 4px; }
.ribbon span { width: 18px; height: 100%; border-radius: 2px; }
.ribbon span:nth-child(1) { background: var(--brand-yellow); }
.ribbon span:nth-child(2) { background: var(--brand-magenta); }
.ribbon span:nth-child(3) { background: var(--brand-blue); }
.ribbon span:nth-child(4) { background: var(--brand-teal); }

/* =========================================================
   Topbar + Header
   ========================================================= */
.topbar { background: var(--brand-navy); color: rgba(255,255,255,.72); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.topbar-inner { display: flex; justify-content: space-between; gap: 24px; padding: 9px 0; }

.site-header {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(18px);
    transition: box-shadow .3s ease, background-color .35s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(7,27,74,.10); }

.nav-wrap { min-height: 108px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }

/* Logo — enlarged and given real breathing room, per brief */
.brand-logo { display: inline-flex; align-items: center; gap: 18px; color: var(--text); }
.brand-logo img { height: 84px; width: auto; max-width: 280px; object-fit: contain; }
.brand-mark {
    display: grid; place-items: center; width: 76px; height: 76px;
    color: #fff; background: linear-gradient(150deg, var(--brand-blue), var(--brand-magenta));
    font: 800 1.5rem "Manrope", sans-serif; border-radius: 18px 18px 18px 5px;
    letter-spacing: -.02em;
}
.brand-divider { width: 1px; height: 46px; background: var(--border); }
.brand-text { font-size: .78rem; line-height: 1.28; color: var(--brand-blue); }
.brand-text strong { display: block; color: var(--text); font-size: 1.02rem; font-family: "Manrope", sans-serif; font-weight: 800; letter-spacing: -.02em; }

.main-nav { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; }
.main-nav a:not(.nav-cta) { position: relative; padding: 10px 14px; color: var(--text); border-radius: 999px; transition: background-color .2s ease, color .2s ease; }
.main-nav a:not(.nav-cta):hover { background: var(--surface-2); }
.nav-cta { margin-left: 8px; padding: 12px 22px !important; color: #fff !important; background: var(--brand-magenta); border-radius: 999px; box-shadow: 0 10px 24px rgba(227,28,121,.28); transition: transform .25s var(--ease), box-shadow .25s ease; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(227,28,121,.34); }

.nav-toggle { display: none; border: 0; background: transparent; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--text); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }

/* Theme toggle switch */
.theme-toggle {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    width: 56px; height: 30px; padding: 3px; margin-left: 10px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
    cursor: pointer; flex-shrink: 0;
}
.theme-toggle .knob {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(150deg, var(--brand-blue), var(--brand-navy));
    color: var(--brand-yellow); font-size: .8rem;
    transition: transform .3s var(--ease), background .3s ease;
    transform: translateX(0);
}
[data-theme="dark"] .theme-toggle .knob { transform: translateX(26px); background: linear-gradient(150deg, #182449, #060a17); }
.theme-toggle .knob svg { width: 13px; height: 13px; }
.theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* =========================================================
   Hero
   ========================================================= */
.hero-slider { position: relative; min-height: 700px; overflow: hidden; color: var(--hero-text); background: var(--hero-bg); }
.hero-slide {
    position: absolute; inset: 0; display: flex; align-items: center;
    visibility: hidden; opacity: 0; background-position: center; background-size: cover;
    transform: scale(1.04);
    transition: opacity .8s ease, visibility .8s ease, transform 1.4s ease;
}
.hero-slide.is-active { position: relative; visibility: visible; opacity: 1; transform: scale(1); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, var(--scrim), color-mix(in srgb, var(--scrim) 55%, transparent) 55%, transparent 92%); }
.hero-content { position: relative; z-index: 2; max-width: 740px; padding: 150px 0 160px; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; color: var(--brand-yellow); font-size: .74rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow.blue { color: var(--brand-blue); }
.eyebrow.yellow { color: var(--brand-yellow); }
.hero-content h1 { max-width: 780px; font-size: clamp(2.6rem, 5.6vw, 5.4rem); }
.hero-subtitle { max-width: 580px; margin: 28px 0 36px; color: var(--hero-muted); font-size: 1.12rem; }

.btn { display: inline-flex; align-items: center; gap: 15px; padding: 16px 25px; border-radius: 999px; font-weight: 700; font-size: .96rem; transition: transform .25s var(--ease), box-shadow .25s ease; border: 1px solid transparent; }
.btn span { transition: transform .25s ease; }
.btn:hover { transform: translateY(-3px); }
.btn:hover span { transform: translate(3px, -3px); }
.btn-primary { color: #fff; background: var(--brand-magenta); box-shadow: 0 16px 36px rgba(227,28,121,.30); }
.btn-outline { color: var(--hero-text); background: transparent; border-color: rgba(255,255,255,.35); }
.btn-outline:hover { background: rgba(255,255,255,.08); }
.btn-light { color: var(--brand-navy); background: #fff; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }

.slider-controls { position: absolute; z-index: 5; bottom: 34px; left: 50%; display: flex; align-items: center; justify-content: space-between; gap: 20px; transform: translateX(-50%); }
.slider-controls button { color: var(--hero-text); background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; width: 42px; height: 42px; cursor: pointer; transition: background .2s ease; }
.slider-controls button:hover { background: rgba(255,255,255,.12); }
.slider-dots { display: flex; gap: 8px; margin: 0 auto; }
.slider-dots button { width: 30px; height: 3px; border: 0; border-radius: 2px; background: rgba(255,255,255,.4); cursor: pointer; }
.slider-dots button.is-active { background: var(--brand-yellow); }

.hero-glow { position: absolute; z-index: 1; width: 320px; height: 320px; border-radius: 50%; filter: blur(60px); opacity: .28; animation: float 9s ease-in-out infinite; }
.hero-glow-one { top: 8%; right: 6%; background: var(--brand-teal); }
.hero-glow-two { bottom: -16%; left: 30%; background: var(--brand-magenta); animation-delay: -3s; }

.hero-ribbon { position: absolute; z-index: 3; right: 8%; bottom: 40px; display: none; flex-direction: column; gap: 5px; }
.hero-ribbon span { width: 64px; height: 6px; border-radius: 3px; }
.hero-ribbon span:nth-child(1) { background: var(--brand-yellow); }
.hero-ribbon span:nth-child(2) { background: var(--brand-magenta); width: 46px; }
.hero-ribbon span:nth-child(3) { background: var(--brand-blue); width: 64px; }
.hero-ribbon span:nth-child(4) { background: var(--brand-teal); width: 34px; }
.language-switcher select {
    padding: 8px 28px 8px 10px;
    color: var(--navy);
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--line);
    border-radius: 999px;
    font: 600 .78rem "DM Sans", sans-serif;
    cursor: pointer;
}

.language-switcher select:focus {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

@media (max-width: 850px) {
    .language-switcher { padding: 8px 12px; }
}

/* =============================
   FORMULAIRES CPD
   ============================= */
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
    align-items: start;
    gap: clamp(42px, 7vw, 92px);
}

.detail-content {
    min-width: 0;
}

.application-card,
.form-card {
    width: 100%;
    min-width: 0;
    padding: clamp(26px, 4vw, 42px);
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(18, 58, 140, .12);
    border-radius: 22px;
    box-shadow: 0 22px 60px rgba(7, 27, 74, .13);
}

.application-card form,
.form-card form {
    width: 100%;
}

.styled-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-section-title {
    margin: 10px 0 0;
    padding-bottom: 10px;
    color: var(--navy);
    border-bottom: 1px solid var(--line);
    font-family: "Manrope", Arial, sans-serif;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.form-row {
    display: grid;
    width: 100%;
    gap: 16px;
}

.form-row-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-field,
.file-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 8px;
}

.form-field label,
.file-field label {
    display: block;
    min-height: 20px;
    color: var(--navy);
    font-size: .78rem;
    font-weight: 700;
}

.form-field input:not([type="checkbox"]),
.form-field select,
.form-field textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 13px 15px;
    color: var(--ink);
    background: #f8fafd;
    border: 1px solid rgba(18, 58, 140, .18);
    border-radius: 10px;
    outline: none;
    font: 500 .88rem "DM Sans", Arial, sans-serif;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.form-field input:not([type="checkbox"]),
.form-field select {
    height: 48px;
}

.form-field textarea {
    min-height: 132px;
    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    background: #fff;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(18, 58, 140, .10);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #9aa5b5;
}

.file-dropzone {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 96px;
    gap: 12px;
    padding: 14px;
    background: #f8fafd;
    border: 1px dashed rgba(18, 58, 140, .35);
    border-radius: 12px;
    transition: background .2s ease, border-color .2s ease;
}

.file-dropzone:hover {
    background: #eef4ff;
    border-color: var(--magenta);
}

.file-dropzone > div {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.file-dropzone input[type="file"] {
    width: 100%;
    max-width: 100%;
    color: var(--muted);
    font-size: .72rem;
}

.file-dropzone strong {
    color: var(--navy);
    font-size: .78rem;
}

.file-dropzone small {
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.35;
}

.file-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--white);
    background: var(--magenta);
    border-radius: 50%;
    font-weight: 800;
}

.consent-field {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin-top: 2px;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.45;
}

.consent-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--magenta);
}

.consent-field label {
    cursor: pointer;
}

.form-error {
    display: block;
    color: #c52858;
    font-size: .72rem;
    line-height: 1.35;
}

.helptext,
.form-field .helptext {
    color: var(--muted);
    font-size: .7rem;
}

.form-submit {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    border: 0;
    cursor: pointer;
}

@media (max-width: 980px) {
    .detail-layout {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .application-card,
    .form-card {
        max-width: 720px;
        margin: 0 auto;
    }
}

@media (max-width: 580px) {
    .form-row-two {
        grid-template-columns: 1fr;
    }

    .application-card,
    .form-card {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .file-dropzone {
        align-items: flex-start;
    }

    .file-dropzone input[type="file"] {
        font-size: .68rem;
    }
}


/* =========================================================
   Sections (shared)
   ========================================================= */
.section { padding: 116px 0; }
.intro-section { display: grid; grid-template-columns: .7fr 1.4fr; gap: 90px; align-items: start; }
.intro-label { display: flex; align-items: center; gap: 12px; color: var(--brand-blue); font-size: .74rem; font-weight: 700; letter-spacing: .16em; }
.intro-copy h2, .section-heading h2, .impact-section h2, .cta-section h2 { font-size: clamp(2.2rem, 3.8vw, 3.9rem); color: var(--text); }
.impact-section h2, .cta-section h2 { color: #fff; }
em { color: var(--brand-magenta); font-style: normal; }
.intro-copy p { max-width: 680px; margin: 28px 0; color: var(--text-muted); font-size: 1.08rem; }
.text-link, .outline-link { display: inline-flex; gap: 12px; align-items: center; color: var(--brand-blue); font-weight: 700; }
.text-link span, .outline-link span { transition: transform .2s ease; }
.text-link:hover span, .outline-link:hover span { transform: translate(3px, -3px); }

.pillars-section { background: var(--surface); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 50px; }
.section-heading > p { max-width: 370px; color: var(--text-muted); }
.section-heading.compact { align-items: center; }

.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pillar-card {
    position: relative; min-height: 300px; padding: 30px; overflow: hidden; border-radius: var(--radius-lg);
    color: #fff;
    background: linear-gradient(155deg, var(--pillar-bg), var(--pillar-bg-2));
    transition: transform .3s var(--ease), box-shadow .3s ease;
}
.pillar-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.pillar-card h3 { margin: 50px 0 13px; font-size: 1.85rem; color: #fff; }
.pillar-card p { max-width: 190px; font-size: .9rem; color: rgba(255,255,255,.78); }
.pillar-number { font-size: .74rem; font-weight: 800; letter-spacing: .1em; color: var(--brand-yellow); }
.pillar-icon { position: absolute; right: 26px; bottom: 18px; font-size: 4.3rem; opacity: .22; color: var(--brand-yellow); }

.action-grid, .activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.action-card, .activity-card {
    position: relative; min-height: 340px; overflow: hidden; color: #fff;
    border-radius: var(--radius-md); background: var(--brand-navy);
    box-shadow: var(--shadow);
}
.action-card img, .activity-card img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; opacity: calc(1 - var(--img-fade)); transition: transform .6s var(--ease); }
.action-card:hover img, .activity-card:hover img { transform: scale(1.08); }
.action-card::after, .activity-card::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(6,13,32,.96)); }
.action-card-content, .activity-card > div { position: absolute; z-index: 2; right: 24px; bottom: 22px; left: 24px; }
.action-card-content > span, .activity-meta { color: var(--brand-yellow); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.action-card h3, .activity-card h3 { margin: 9px 0; font-size: 1.55rem; color: #fff; }
.action-card p, .activity-card p { margin: 0; color: rgba(255,255,255,.78); font-size: .9rem; }
.action-card b { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 42px; height: 42px; color: var(--brand-navy); background: var(--brand-yellow); border-radius: 50%; font-style: normal; }

.impact-section { color: #fff; background: linear-gradient(120deg, var(--brand-navy), var(--brand-blue)); position: relative; overflow: hidden; }
.impact-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.2fr; gap: 70px; align-items: center; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 35px; }
.stats-grid div { padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.2); }
.stats-grid strong { display: block; color: var(--brand-yellow); font: 800 3.3rem "Manrope", sans-serif; }
.stats-grid span { color: rgba(255,255,255,.78); font-size: .88rem; }

.cta-section { padding-top: 0; padding-bottom: 116px; }
.cta-inner {
    display: flex; justify-content: space-between; align-items: center; gap: 30px;
    padding: 64px; color: #fff; border-radius: var(--radius-lg);
    background: linear-gradient(120deg, var(--brand-magenta), #a90d5c);
    box-shadow: var(--shadow-lg);
}

.site-footer { color: rgba(255,255,255,.72); background: #060d24; }
[data-theme="dark"] .site-footer { background: #020408; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 60px; padding: 72px 0 50px; }
.footer-brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.footer-brand-row img { height: 52px; width: auto; }
.footer-brand-row strong { color: #fff; font-family: "Manrope", sans-serif; font-size: 1.1rem; letter-spacing: -.02em; }
.footer-grid h4 { margin-bottom: 20px; color: #fff; font-size: .98rem; }
.footer-grid a, .footer-grid p { display: block; margin: 9px 0; color: rgba(255,255,255,.68); }
.footer-grid a:hover { color: var(--brand-yellow); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: .75rem; }

.messages { position: fixed; z-index: 100; top: 118px; right: 5%; left: 5%; }
.message { padding: 13px 18px; color: var(--brand-navy); background: var(--brand-yellow); border-radius: 10px; box-shadow: var(--shadow); }

/* Language suggestion banner */
.lang-banner {
    display: none; position: relative; z-index: 61;
    background: var(--brand-navy); color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.lang-banner.is-visible { display: block; }
.lang-banner-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 11px 0; font-size: .86rem; text-align: center; }
.lang-banner-actions { display: inline-flex; gap: 8px; }
.lang-banner button { cursor: pointer; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 700; font-size: .78rem; transition: background .2s ease; }
.lang-banner button:hover { background: rgba(255,255,255,.14); }
.lang-banner button.lang-dismiss { border-color: transparent; color: rgba(255,255,255,.6); padding: 6px 8px; }

/* "Qui sommes-nous" intro copy — words cascade in like a game dialogue box */
.intro-copy p.is-typing span.word {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
    filter: blur(2px);
    animation: word-in .5s var(--ease) forwards;
    animation-delay: calc(var(--i) * 45ms);
}

/* =========================================================
   Motion utilities
   ========================================================= */
.reveal-on-scroll { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.reveal { opacity: 0; transform: translateY(20px); animation: reveal .8s .25s forwards; }
.hero-slide.is-active .reveal:nth-child(2) { animation-delay: .35s; }
.hero-slide.is-active .reveal:nth-child(3) { animation-delay: .5s; }
.hero-slide.is-active .reveal:nth-child(4) { animation-delay: .65s; }

@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes word-in { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-20px, 24px) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-on-scroll, .hero-glow, .hero-slide, .action-card img, .activity-card img { animation: none !important; transition: none !important; }
    .reveal, .reveal-on-scroll { opacity: 1 !important; transform: none !important; }
    .intro-copy p.is-typing span.word { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
}

:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 3px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1000px) {
    .hero-ribbon { display: flex; }
}
@media (max-width: 850px) {
    .topbar-inner span:last-child { display: none; }
    .nav-toggle { display: block; order: 3; }
    .theme-toggle { order: 2; }
    .brand-text { display: none; }
    .brand-divider { display: none; }
    .brand-logo img { height: 58px; }
    .nav-wrap { min-height: 84px; }
    .main-nav {
        position: absolute; top: 100%; right: 5%; left: 5%; display: none;
        flex-direction: column; align-items: stretch; gap: 4px; padding: 18px;
        background: var(--surface); box-shadow: var(--shadow-lg); border-radius: 0 0 var(--radius-md) var(--radius-md);
        border: 1px solid var(--border); border-top: none;
    }
    .main-nav.is-open { display: flex; }
    .main-nav a { padding: 12px 14px; }
    .nav-cta { margin-left: 0; text-align: center; justify-content: center; }
    .intro-section, .impact-inner { grid-template-columns: 1fr; gap: 35px; }
    .pillar-grid { grid-template-columns: repeat(2, 1fr); }
    .action-grid, .activity-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .hero-slider, .hero-slide { min-height: 620px; }
    .hero-content { padding: 120px 0 130px; }
    .section { padding: 78px 0; }
    .section-heading, .cta-inner { align-items: flex-start; flex-direction: column; }
    .pillar-grid, .action-grid, .activity-grid, .stats-grid, .footer-grid { grid-template-columns: 1fr; }
    .cta-inner { padding: 36px 26px; }
    .footer-bottom { flex-direction: column; }
    .brand-logo img { height: 48px; }
}

/* =============================
   CORRECTION MODE CLAIR — FORMULAIRES
   ============================= */
body {
    background: #f8fafd;
    color: #14213d;
}

.application-card,
.application-card.form-card,
.form-card {
    color: #14213d !important;
    background: #ffffff !important;
    border: 1px solid #d9e2f0 !important;
    box-shadow: 0 24px 70px rgba(7, 27, 74, .14) !important;
}

.application-card h2,
.form-card h2,
.application-card p,
.form-card p,
.application-card label,
.form-card label,
.form-section-title {
    color: #071b4a !important;
}

.application-card .form-field input:not([type="checkbox"]),
.application-card .form-field textarea,
.application-card .form-field select,
.form-card .form-field input:not([type="checkbox"]),
.form-card .form-field textarea,
.form-card .form-field select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    color: #14213d !important;
    background: #ffffff !important;
    border: 1px solid #aebed3 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.application-card .form-field input:not([type="checkbox"]),
.form-card .form-field input:not([type="checkbox"]),
.application-card .form-field select,
.form-card .form-field select {
    height: 48px !important;
}

.application-card .form-field textarea,
.form-card .form-field textarea {
    min-height: 132px !important;
    resize: vertical !important;
}

.application-card input::placeholder,
.application-card textarea::placeholder,
.form-card input::placeholder,
.form-card textarea::placeholder {
    color: #667085 !important;
    opacity: 1 !important;
}

.application-card input:focus,
.application-card textarea:focus,
.application-card select:focus,
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus {
    background: #ffffff !important;
    border-color: #123a8c !important;
    box-shadow: 0 0 0 4px rgba(18, 58, 140, .12) !important;
    outline: none !important;
}

.application-card .file-dropzone,
.form-card .file-dropzone {
    color: #14213d !important;
    background: #f5f8fc !important;
    border: 1px dashed #8fa5c0 !important;
}

.application-card .file-dropzone strong,
.form-card .file-dropzone strong {
    color: #071b4a !important;
}

.application-card .file-dropzone small,
.form-card .file-dropzone small,
.application-card .helptext,
.form-card .helptext {
    color: #667085 !important;
}

.application-card .consent-field,
.form-card .consent-field {
    color: #475467 !important;
}

.application-card .consent-field label,
.form-card .consent-field label {
    color: #475467 !important;
}

.application-card .form-error,
.form-card .form-error {
    color: #b42318 !important;
}

.application-card .form-submit,
.form-card .form-submit {
    color: #ffffff !important;
    background: #d91673 !important;
    border: 0 !important;
}

.application-card .form-submit:hover,
.form-card .form-submit:hover {
    background: #b81260 !important;
}