:root {
    --ink:#182431;
    --muted:#5d6b78;
    --navy:#17324d;
    --navy-2:#244b70;
    --paper:#fff;
    --soft:#f4f7f9;
    --line:#dbe3e9;
    --radius:18px;
    --shadow:0 18px 50px rgba(22,50,77,.10)
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.65
}

img {
    max-width:100%;
    display:block
}

a {
    color:var(--navy-2)
}

h1,h2,h3,p {
    margin-top:0
}

h1,h2,h3 {
    line-height:1.15;
    letter-spacing:-.025em
}

h1 {
    font-size:clamp(2.35rem,6vw,4.7rem);
    max-width:15ch
}

h2 {
    font-size:clamp(1.8rem,3.5vw,3rem)
}

h3 {
    font-size:1.35rem
}

.container {
    width:min(1120px,calc(100% - 40px));
    margin:auto
}

.narrow {
    max-width:780px
}

.section {
    padding:88px 0
}

.section-muted {
    background:var(--soft)
}

.eyebrow {
    font-size:.78rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-weight:800;
    color:var(--navy-2);
    margin-bottom:14px
}

.lead {
    font-size:clamp(1.08rem,2vw,1.35rem);
    color:var(--muted);
    max-width:62ch
}

.skip-link {
    position:absolute;
    left:-9999px
}

.skip-link:focus {
    left:20px;
    top:20px;
    background:#fff;
    padding:10px;
    z-index:999
}

.site-header {
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(219,227,233,.8)
}

.header-inner {
    min-height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px
}

.brand {
    text-decoration:none;
    color:var(--ink);
    display:flex;
    flex-direction:column;
    line-height:1.1
}

.brand-name {
    font-weight:800;
    font-size:1.08rem
}

.brand-tagline {
    font-size:.78rem;
    color:var(--muted);
    margin-top:6px
}

.main-nav {
    display:flex;
    gap:30px
}

.main-nav a {
    text-decoration:none;
    color:var(--muted);
    font-weight:650
}

.main-nav a:hover,.main-nav a.active {
    color:var(--navy)
}

.menu-toggle {
    display:none;
    border:1px solid var(--line);
    background:#fff;
    padding:9px 13px;
    border-radius:10px
}

.hero {
    padding-top:64px
}

.hero-grid {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:center;
    gap:70px
}

.hero-portrait-wrap {
    width:100%;
    max-width:820px;
    justify-self:end
}

.hero-portrait {
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    border-radius:26px;
    box-shadow:var(--shadow)
}

.actions {
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    margin-top:30px
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--navy);
    background:var(--navy);
    color:#fff;
    text-decoration:none;
    padding:13px 20px;
    border-radius:999px;
    font-weight:750;
    cursor:pointer
}

.button:hover {
    background:var(--navy-2)
}

.button-secondary {
    background:#fff;
    color:var(--navy)
}

.button-light {
    background:#fff;
    color:var(--navy);
    border-color:#fff
}

.button-outline-light {
    background:transparent;
    color:#fff;
    border-color:rgba(255,255,255,.55)
}

.section-heading {
    max-width:760px;
    margin-bottom:34px
}

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

.project-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 8px 24px rgba(22,50,77,.05)
}

.project-card img,.project-feature img,.detail-hero img {
    aspect-ratio:16/10;
    object-fit:cover
}

.project-card-body {
    padding:25px
}

.project-category {
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:800;
    color:var(--navy-2)
}

.text-link {
    font-weight:800;
    text-decoration:none
}

.section-action {
    text-align:center;
    margin-top:36px
}

.split-panel,.detail-grid,.timeline-grid {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:80px
}

.callout-section {
    padding-top:0
}

.callout {
    background:var(--navy);
    color:#fff;
    border-radius:26px;
    padding:48px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px
}

.callout .eyebrow,.callout p {
    color:#d9e6f2
}

.page-hero {
    padding-bottom:58px
}

.project-list {
    display:grid;
    gap:40px
}

.project-feature {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:46px;
    align-items:center;
    background:#fff;
    border:1px solid var(--line);
    padding:26px;
    border-radius:24px
}

.project-feature img {
    border-radius:16px
}

.detail-hero {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:60px
}

.detail-hero img {
    border-radius:24px;
    box-shadow:var(--shadow)
}

.feature-box,.contact-card,.form-panel,.support-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:30px
}

.check-list {
    list-style:none;
    padding:0;
    margin:0
}

.check-list li {
    padding:10px 0 10px 30px;
    position:relative;
    border-bottom:1px solid var(--line)
}

.check-list li:before {
    content:'✓';
    position:absolute;
    left:0;
    color:var(--navy-2);
    font-weight:900
}

.centered-cta {
    text-align:center
}

.centered-cta h1,.centered-cta h2,.centered-cta .lead {
    margin-left:auto;
    margin-right:auto
}

.about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 70px;
}

.about-hero img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.timeline {
    display:grid;
    gap:20px
}

.timeline article {
    padding:0 0 20px 25px;
    border-left:2px solid var(--line)
}

.timeline span {
    font-size:.8rem;
    font-weight:800;
    color:var(--navy-2)
}

.skill-list {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-content:flex-start
}

.skill-list span {
    padding:11px 16px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--soft);
    font-weight:750
}

.contact-grid {
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:30px
}

.field {
    display:grid;
    gap:7px;
    margin-bottom:18px
}

.field label,.checkbox {
    font-weight:700
}

.field input,.field select,.field textarea {
    width:100%;
    font:inherit;
    border:1px solid #bcc9d3;
    border-radius:11px;
    padding:12px 14px;
    background:#fff
}

.field input:focus,.field select:focus,.field textarea:focus {
    outline:3px solid rgba(36,75,112,.16);
    border-color:var(--navy-2)
}

.checkbox {
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin:6px 0 22px;
    font-weight:500
}

.honeypot {
    position:absolute;
    left:-9999px
}

.alert {
    padding:13px 16px;
    border-radius:10px;
    margin-bottom:20px
}

.success {
    background:#eaf7ee;
    color:#1f5c31
}

.error {
    background:#fff0f0;
    color:#7f2626
}

.form-note {
    font-size:.88rem;
    color:var(--muted);
    margin-top:14px
}

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

.legal-content {
    max-width:820px
}

.legal-content h2 {
    font-size:1.45rem;
    margin-top:42px
}

.site-footer {
    background:#101d2a;
    color:#d6dee5;
    padding:58px 0 24px
}

.footer-grid {
    display:grid;
    grid-template-columns:1.4fr repeat(3,1fr);
    gap:40px
}

.footer-grid>div {
    display:flex;
    flex-direction:column;
    gap:7px
}

.footer-grid a {
    color:#d6dee5;
    text-decoration:none
}

.footer-title {
    color:#fff;
    font-weight:800;
    margin-bottom:7px
}

.footer-bottom {
    margin-top:42px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.13);
    font-size:.9rem;
    color:#9eb0bf
}

@media(max-width:860px) {
    .menu-toggle {
        display:block
    }
    .main-nav {
        display:none;
        position:absolute;
        left:20px;
        right:20px;
        top:72px;
        flex-direction:column;
        gap:0;
        background:#fff;
        border:1px solid var(--line);
        border-radius:14px;
        padding:8px;
        box-shadow:var(--shadow)
    }
    .main-nav.open {
        display:flex
    }
    .main-nav a {
        padding:12px
    }
    .hero-grid,.detail-hero,.about-hero,.project-feature,.split-panel,.detail-grid,.timeline-grid,.contact-grid {
        grid-template-columns:1fr;
        gap:34px
    }

    .about-hero img {
        max-width: 720px;
    }
    .hero-portrait-wrap {
        justify-self:start;
        max-width:100%
    }
    .project-grid {
        grid-template-columns:1fr
    }
    .project-feature:nth-child(even) img {
        order:0
    }
    .callout {
        align-items:flex-start;
        flex-direction:column
    }
    .footer-grid {
        grid-template-columns:1fr 1fr
    }
}

@media(max-width:560px) {
    .container {
        width:min(100% - 28px,1120px)
    }
    .section {
        padding:64px 0
    }
    .header-inner {
        min-height:70px
    }
    .brand-tagline {
        font-size:.72rem
    }
    .hero {
        padding-top:42px
    }
    .callout {
        padding:30px
    }
    .footer-grid,.support-grid {
        grid-template-columns:1fr
    }
    .project-feature {
        padding:16px
    }
    .button {
        width:100%
    }
    .actions {
        width:100%
    }
}


/* Captures d’écran des projets */
.project-card img,
.project-feature img,
.detail-hero img,
.project-gallery img {
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #f4f7f9;
}

.project-card img {
    aspect-ratio: 16 / 10;
}

.project-feature img,
.detail-hero img {
    aspect-ratio: auto;
}

.project-gallery {
    display: grid;
    gap: 28px;
}

.project-gallery img {
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

@media (max-width: 860px) {
    .project-feature img,
    .detail-hero img {
        width: 100%;
    }
}