@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Franklin:wght@500;600;700;800&display=swap');

/* ==========================================================
   1. VARIABLES GLOBALES
========================================================== */
:root {
    --blue:#0879be;
    --dark:#073b68;
    --deep:#052d50;
    --yellow:#f6d20b;
    --red:#ce1126;
    --ink:#172b3c;
    --muted:#657684;
    --line:#dce5eb;
    --soft:#f3f7fa;
    --white:#fff;
    --width:min(1180px,calc(100% - 48px))
}

/* ==========================================================
   2. RÉINITIALISATION ET STYLES GÉNÉRAUX
========================================================== */
* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    color:var(--ink);
    background:#fff;
    font:16px/1.65 'DM Sans',Arial,sans-serif
}

a {
    color:inherit;
    text-decoration:none
}

img {
    display:block;
    width:100%
}

button,input,select,textarea {
    font:inherit
}

.page-width {
    width:var(--width);
    margin-inline:auto
}

.skip-link {
    position:fixed;
    left:18px;
    top:-70px;
    z-index:100;
    padding:12px 18px;
    color:#fff;
    background:var(--deep)
}

.skip-link:focus {
    top:12px
}

/* ==========================================================
   3. EN-TÊTE ET NAVIGATION
========================================================== */
.site-header {
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.98);
    box-shadow:0 4px 22px rgba(7,59,104,.09);
    backdrop-filter:blur(12px)
}

.national-stripe {
    height:5px;
    background:linear-gradient(90deg,var(--blue) 0 72%,var(--yellow) 72% 86%,var(--red) 86%)
}

.header-inner {
    width:var(--width);
    min-height:88px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    flex:none
}

/* Logo officiel INPACT-RDC */
.brand-logo {
    display:block;
    width:auto;
    height:64px;
    object-fit:contain
}

.brand-mark {
    position:relative;
    width:49px;
    height:49px;
    overflow:hidden;
    background:var(--blue);
    border-radius:50%;
    box-shadow:0 0 0 4px #edf4f8
}

.brand-letter {
    position:absolute;
    left:16px;
    top:4px;
    z-index:2;
    color:var(--yellow);
    font:800 24px/1.7 'Libre Franklin'
}

.brand-band {
    position:absolute;
    width:70px;
    height:13px;
    left:-10px;
    bottom:8px;
    transform:rotate(-35deg);
    background:var(--red);
    border-block:4px solid var(--yellow)
}

.brand-copy strong {
    display:block;
    color:var(--deep);
    font:800 19px 'Libre Franklin';
    letter-spacing:.01em
}

.brand-copy small {
    display:block;
    color:var(--muted);
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase
}

.desktop-nav {
    display:flex;
    align-items:center;
    gap:23px;
    margin-left:auto
}

.desktop-nav a {
    position:relative;
    padding:34px 0 29px;
    color:#596773;
    font-size:13px;
    font-weight:600;
    white-space:nowrap
}

.desktop-nav a:after {
    content:'';
    position:absolute;
    left:0;
    right:100%;
    bottom:23px;
    height:2px;
    background:var(--blue);
    transition:.25s
}

.desktop-nav a:hover,.desktop-nav a.active {
    color:var(--blue)
}

.desktop-nav a:hover:after,.desktop-nav a.active:after {
    right:0
}

.header-tools {
    display:flex
}

.search-button,.menu-button {
    border:0;
    background:transparent;
    color:var(--deep);
    cursor:pointer
}

.search-button {
    width:40px;
    height:40px;
    padding:9px
}

.search-button svg {
    fill:none;
    stroke:currentColor;
    stroke-width:1.8
}

.menu-button {
    display:none;
    width:42px;
    height:42px;
    padding:10px
}

.menu-button span {
    display:block;
    width:22px;
    height:2px;
    margin:5px 0;
    background:currentColor
}

.mobile-panel {
    display:none
}

/* ==========================================================
   4. PANNEAU DE RECHERCHE
========================================================== */
.search-panel {
    position:fixed;
    inset:93px 0 auto;
    z-index:45;
    max-height:0;
    overflow:hidden;
    background:#fff;
    box-shadow:0 18px 30px rgba(6,44,77,.12);
    transition:.3s
}

.search-panel.open {
    max-height:180px
}

.search-panel-inner {
    width:var(--width);
    padding:28px 0 34px
}

.search-panel label {
    display:block;
    margin-bottom:10px;
    font-weight:700
}

.search-field {
    display:flex
}

.search-field input {
    width:100%;
    min-height:52px;
    padding:0 16px;
    border:1px solid var(--line)
}

.search-field button {
    min-width:130px;
    border:0;
    color:#fff;
    background:var(--red);
    font-weight:700
}

.return-link {
    color:var(--dark);
    font-weight:700
}

/* ==========================================================
   5. CARROUSEL / BANNIÈRE PRINCIPALE
========================================================== */
.hero {
    position:relative;
    min-height:790px;
    margin-bottom:168px;
    color:#fff;
    background:linear-gradient(120deg,#042b4b,#075b91)
}

.hero:before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 12% 20%,rgba(8,121,190,.42),transparent 36%)
}

.hero-shade {
    position:absolute;
    inset:0;
    background:linear-gradient(115deg,rgba(3,35,61,.15),rgba(3,35,61,.58))
}

.hero-layout {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.03fr .97fr;
    align-items:center;
    gap:70px;
    padding-top:90px
}

.hero-content {
    padding-bottom:100px
}

.eyebrow,.section-label {
    margin:0 0 15px;
    color:var(--blue);
    font-size:12px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase
}

.hero .eyebrow,.form-intro .eyebrow {
    color:var(--yellow)
}

.hero h1 {
    margin:0;
    font:800 clamp(2.7rem,5vw,4.8rem)/1 'Libre Franklin';
    letter-spacing:-.045em
}

.hero-subtitle {
    max-width:650px;
    margin:24px 0 0;
    font:500 clamp(1.25rem,2.1vw,2rem)/1.3 'Libre Franklin'
}

.hero-intro {
    max-width:630px;
    margin:24px 0 30px;
    color:#d9e8f2;
    font-size:17px
}

.primary-button,.secondary-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:52px;
    padding:0 25px;
    border:0;
    color:#fff;
    background:var(--red);
    font-weight:700;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(206,17,38,.24);
    transition:.2s
}

.primary-button:hover {
    background:#a80d1e;
    transform:translateY(-2px)
}

.hero-image-wrap {
    position:relative
}

.hero-image-wrap:before {
    content:'';
    position:absolute;
    left:-17px;
    top:-17px;
    width:95px;
    height:95px;
    border-left:6px solid var(--yellow);
    border-top:6px solid var(--yellow)
}

.hero-image-wrap img {
    position:relative;
    height:500px;
    object-fit:cover;
    box-shadow:0 28px 60px rgba(0,0,0,.28)
}

/* Cartes des publics concernés */
.priority-grid {
    position:absolute;
    z-index:2;
    left:50%;
    bottom:-125px;
    transform:translateX(-50%);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}

.priority-card {
    min-height:255px;
    padding:30px;
    color:var(--ink);
    background:#fff;
    box-shadow:0 20px 50px rgba(2,31,55,.17);
    border-bottom:4px solid transparent;
    transition:.25s
}

.priority-card:hover {
    transform:translateY(-7px);
    border-color:var(--yellow)
}

.card-index {
    color:var(--blue);
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em
}

.priority-card h2 {
    margin:22px 0 13px;
    color:var(--deep);
    font:700 22px/1.25 'Libre Franklin'
}

.priority-card p {
    margin:0;
    color:var(--muted);
    font-size:14px
}

/* ==========================================================
   6. PRÉSENTATION DE LA PLATEFORME
========================================================== */
.ministry-section {
    padding:90px 0 120px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:80px
}

.ministry-image {
    position:relative
}

.ministry-image:before {
    content:'';
    position:absolute;
    left:-22px;
    top:-22px;
    width:105px;
    height:105px;
    border-left:6px solid var(--yellow);
    border-top:6px solid var(--yellow)
}

.ministry-image img {
    position:relative;
    height:430px;
    object-fit:cover;
    box-shadow:0 20px 46px rgba(7,59,104,.16)
}

.ministry-image span {
    position:absolute;
    right:-22px;
    bottom:-22px;
    padding:15px 20px;
    color:#fff;
    background:var(--deep);
    font-size:12px
}

.ministry-copy h2,.section-heading h2,.commitment-layout h2 {
    margin:0 0 24px;
    color:var(--deep);
    font:700 clamp(2rem,4vw,3.25rem)/1.08 'Libre Franklin';
    letter-spacing:-.035em
}

.ministry-copy p:not(.section-label) {
    color:var(--muted)
}

.text-link {
    display:inline-flex;
    gap:12px;
    margin-top:18px;
    color:var(--deep);
    font-size:14px;
    font-weight:700
}

.text-link span {
    color:var(--red)
}

/* ==========================================================
   7. PRÉSENTATION DU FOGEC
========================================================== */
.policy-section {
    overflow:hidden;
    color:#fff;
    background:var(--deep)
}

.policy-layout {
    display:grid;
    grid-template-columns:.94fr 1.06fr;
    min-height:610px
}

.policy-copy {
    padding:88px 70px 80px 0;
    align-self:center
}

.section-label.light {
    color:var(--yellow)
}

.policy-copy h2 {
    margin:0 0 25px;
    font:700 clamp(2rem,3.8vw,3.2rem)/1.08 'Libre Franklin';
    letter-spacing:-.035em
}

.policy-copy>p:not(.section-label) {
    color:#cbdce8
}

.policy-links {
    margin-top:34px;
    display:grid
}

.policy-links span {
    padding:15px 0;
    border-top:1px solid rgba(255,255,255,.16);
    font-size:14px;
    font-weight:600
}

.policy-links span:last-child {
    border-bottom:1px solid rgba(255,255,255,.16)
}

.policy-image {
    width:calc(100% + (100vw - min(1180px,calc(100vw - 48px)))/2)
}

.policy-image img {
    height:610px;
    object-fit:cover
}

/* ==========================================================
   8. PARCOURS DE SOUMISSION
========================================================== */
.process-section {
    padding:115px 0
}

.section-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:50px;
    margin-bottom:46px
}

.section-heading h2 {
    margin-bottom:0
}

.section-note {
    max-width:440px;
    margin:0;
    color:var(--muted)
}

.steps-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px
}

.step-card {
    padding:34px;
    background:var(--soft);
    border-top:4px solid var(--blue)
}

.step-card b {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    color:var(--deep);
    background:var(--yellow);
    border-radius:50%
}

.step-card h3 {
    margin:24px 0 10px;
    color:var(--deep);
    font:700 21px 'Libre Franklin'
}

.step-card p {
    margin:0;
    color:var(--muted);
    font-size:14px
}

.process-action {
    margin-top:42px;
    display:flex;
    align-items:center;
    gap:28px
}

.process-action p {
    color:var(--muted);
    font-size:13px
}

.commitment-section {
    padding:85px 0;
    color:#fff;
    background:linear-gradient(120deg,#075b91,#0879be)
}

.commitment-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:90px
}

.commitment-layout h2 {
    color:#fff;
    margin:0
}

.commitment-layout>p {
    color:#e4f1f8;
    font-size:17px
}

/* ==========================================================
   9. PIED DE PAGE ET ÉLÉMENTS FLOTTANTS
========================================================== */
.site-footer {
    color:#c7d6e0;
    background:#031f35
}

.footer-grid {
    padding:72px 0 58px;
    display:grid;
    grid-template-columns:1.5fr repeat(3,1fr);
    gap:55px
}

.footer-brand strong {
    color:#fff;
    font:700 24px 'Libre Franklin'
}

.footer-brand p {
    max-width:330px
}

.site-footer h2 {
    margin:3px 0 17px;
    color:#fff;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.08em
}

.site-footer a {
    display:block;
    margin:8px 0;
    font-size:13px
}

.site-footer a:hover {
    color:var(--yellow)
}

.site-footer p {
    font-size:13px
}

.footer-bottom {
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    border-top:1px solid rgba(255,255,255,.1);
    font-size:12px
}

.back-to-top {
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:20;
    width:46px;
    height:46px;
    border:0;
    border-radius:50%;
    color:#fff;
    background:var(--red);
    box-shadow:0 8px 22px rgba(0,0,0,.2);
    cursor:pointer;
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
    transition:.2s
}

.back-to-top.visible {
    opacity:1;
    transform:none;
    pointer-events:auto
}

.reveal {
    opacity:0;
    transform:translateY(24px);
    transition:.65s
}

.reveal.visible {
    opacity:1;
    transform:none
}

/* ==========================================================
   10. FORMULAIRE DE DEMANDE
========================================================== */
.form-page {
    background:var(--soft)
}

.application-main {
    padding-bottom:90px
}

.form-intro {
    padding:68px 0 42px
}

.form-intro {
    color:#fff;
    width:100%;
    max-width:none;
    padding-inline:max(24px,calc((100% - 1180px)/2));
    background:linear-gradient(120deg,var(--deep),#086aa5)
}

.form-intro h1 {
    margin:0;
    font:700 clamp(2.4rem,5vw,4.5rem)/1 'Libre Franklin';
    letter-spacing:-.04em
}

.form-intro p:last-child {
    max-width:650px;
    color:#d8e8f2
}

.form-shell {
    margin-top:42px;
    padding:0 55px 45px;
    background:#fff;
    box-shadow:0 18px 48px rgba(7,59,104,.12)
}

.progress-wrap {
    padding:32px 0;
    border-bottom:1px solid var(--line)
}

.progress-head {
    display:flex;
    justify-content:space-between;
    font-size:13px
}

.progress-head strong {
    color:var(--blue)
}

.progress-track {
    height:5px;
    margin:14px 0 24px;
    background:#e5edf2
}

.progress-track span {
    display:block;
    width:33.33%;
    height:100%;
    background:var(--red);
    transition:.3s
}

.step-nav {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    padding:0;
    margin:0;
    list-style:none
}

.step-nav li {
    display:flex;
    align-items:center;
    gap:10px;
    color:#8a98a3;
    font-size:13px;
    font-weight:600
}

.step-nav b {
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border:1px solid var(--line);
    border-radius:50%
}

.step-nav li.active {
    color:var(--deep)
}

.step-nav li.active b {
    color:#fff;
    background:var(--blue);
    border-color:var(--blue)
}

#loan-form {
    padding-top:38px
}

.form-step {
    display:none;
    margin:0;
    padding:0;
    border:0
}

.form-step.active {
    display:block
}

.form-step legend {
    padding:0;
    color:var(--deep);
    font:700 clamp(1.6rem,3vw,2.2rem) 'Libre Franklin'
}

.step-description {
    margin:7px 0 30px;
    color:var(--muted)
}

.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px 28px
}

.form-grid label {
    display:grid;
    gap:8px;
    color:var(--ink);
    font-size:14px;
    font-weight:600
}

.form-grid .full {
    grid-column:1/-1
}

.form-grid input,.form-grid select,.form-grid textarea {
    width:100%;
    min-height:50px;
    padding:11px 13px;
    border:1px solid #cad6dd;
    background:#fff;
    color:var(--ink);
    outline:none
}

.form-grid textarea {
    resize:vertical
}

.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus {
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(8,121,190,.12)
}

.form-grid input.invalid,.form-grid select.invalid,.form-grid textarea.invalid {
    border-color:var(--red)
}

.upload-label small {
    color:var(--muted);
    font-weight:400
}

.check-label {
    display:flex!important;
    grid-template-columns:22px 1fr;
    align-items:start
}

.check-label input {
    width:18px!important;
    min-height:18px;
    margin-top:3px
}

.check-label span {
    font-weight:500
}

.form-actions {
    display:flex;
    justify-content:flex-end;
    gap:14px;
    margin-top:35px;
    padding-top:25px;
    border-top:1px solid var(--line)
}

.secondary-button {
    color:var(--deep);
    background:#e9f0f4;
    box-shadow:none
}

.form-message {
    min-height:24px;
    margin-top:15px;
    color:var(--red);
    font-size:14px;
    font-weight:600
}

.success-panel {
    padding:65px 20px;
    text-align:center
}

.success-mark {
    display:grid;
    place-items:center;
    width:64px;
    height:64px;
    margin:auto;
    color:#fff;
    background:var(--blue);
    border-radius:50%;
    font-size:30px
}

.success-panel h2 {
    margin:25px 0 10px;
    color:var(--deep);
    font:700 2rem 'Libre Franklin'
}

.success-panel p {
    max-width:620px;
    margin:0 auto 28px;
    color:var(--muted)
}

.compact-footer {
    margin-top:0
}

/* ==========================================================
   11. RESPONSIVE : TABLETTES ET PETITS ORDINATEURS
========================================================== */
@media(max-width:1050px) {
    .desktop-nav {
        display:none
    }

    .menu-button {
        display:block
    }

    .mobile-panel {
        display:block;
        max-height:0;
        overflow:hidden;
        background:#fff;
        transition:.3s
    }

    .mobile-panel.open {
        max-height:430px
    }

    .mobile-panel nav {
        width:var(--width);
        margin:auto;
        padding:12px 0 28px;
        display:grid
    }

    .mobile-panel a {
        padding:12px 0;
        border-bottom:1px solid var(--line);
        font-weight:600
    }

    .hero-layout {
        gap:40px
    }

    .priority-card {
        padding:25px 21px
    }

    .ministry-section {
        gap:50px
    }

}

/* ==========================================================
   12. RESPONSIVE : TABLETTES ET TÉLÉPHONES
========================================================== */
@media(max-width:800px) {
    :root {
        --width:min(100% - 30px,1180px)
    }

    .header-inner {
        min-height:76px
    }

    .search-panel {
        inset:81px 0 auto
    }

    .hero {
        min-height:0;
        margin-bottom:0;
        padding-bottom:55px
    }

    .hero-layout {
        grid-template-columns:1fr;
        padding-top:70px
    }

    .hero-content {
        padding-bottom:0
    }

    .hero-image-wrap img {
        height:360px
    }

    .priority-grid {
        position:relative;
        left:auto;
        bottom:auto;
        transform:none;
        margin-top:55px;
        grid-template-columns:1fr
    }

    .priority-card {
        min-height:auto
    }

    .ministry-section,.policy-layout,.commitment-layout {
        grid-template-columns:1fr
    }

    .ministry-section {
        padding:85px 0
    }

    .ministry-image img {
        height:340px
    }

    .policy-copy {
        padding:75px 0 45px
    }

    .policy-image {
        width:100%
    }

    .policy-image img {
        height:400px
    }

    .section-heading {
        align-items:flex-start;
        flex-direction:column
    }

    .steps-grid {
        grid-template-columns:1fr
    }

    .commitment-layout {
        gap:20px
    }

    .footer-grid {
        grid-template-columns:1fr 1fr
    }

    .form-shell {
        padding:0 25px 35px
    }

    .form-grid {
        grid-template-columns:1fr
    }

    .form-grid .full {
        grid-column:auto
    }

}

/* ==========================================================
   13. RESPONSIVE : PETITS TÉLÉPHONES
========================================================== */
@media(max-width:520px) {
    .brand-mark {
        width:43px;
        height:43px
    }

    .brand-logo {
        width:auto;
        height:46px;
        max-width:210px
    }

    .brand-copy strong {
        font-size:16px
    }

    .brand-copy small {
        display:none
    }

    .hero h1 {
        font-size:2.5rem;
        letter-spacing:-.035em
    }

    .hero-image-wrap img {
        height:290px
    }

    .ministry-image:before {
        left:-8px;
        top:-12px
    }

    .ministry-image span {
        right:0
    }

    .process-action {
        align-items:flex-start;
        flex-direction:column
    }

    .footer-grid {
        grid-template-columns:1fr
    }

    .footer-bottom {
        padding:20px 0;
        align-items:flex-start;
        flex-direction:column
    }

    .search-field {
        flex-direction:column
    }

    .search-field input {
        border-right:1px solid var(--line)
    }

    .step-nav li {
        align-items:flex-start;
        flex-direction:column
    }

    .step-nav span {
        font-size:11px
    }

    .form-shell {
        width:100%;
        margin-top:0;
        box-shadow:none
    }

    .form-actions {
        flex-wrap:wrap
    }

    .return-link {
        font-size:13px
    }

}

/* ==========================================================
   14. ACCESSIBILITÉ : RÉDUCTION DES ANIMATIONS
========================================================== */
@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        scroll-behavior:auto!important;
        transition:none!important
    }

    .reveal {
        opacity:1;
        transform:none
    }

}