:root {
    --violet: #7b00f7;
    --violet-bright: #6045f9;
    --lavender: #ebb1fd;
    --red: #c63d32;
    --ink: #252436;
    --muted: #656476;
    --paper: #ffffff;
    --soft: #f7f6fb;
    --line: #e9e7f0;
    --font-display: 'Poppins', sans-serif;
    --font-text: 'DM Sans', sans-serif;
    --container: 1190px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--lavender); color: var(--ink); }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 5px; }
.container { width: min(var(--container), calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; left: 15px; top: -70px; z-index: 100; padding: 12px 18px; background: var(--ink); color: white; }
.skip-link:focus { top: 10px; }
.site-header { height: 90px; display: flex; align-items: center; position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.91); backdrop-filter: blur(20px); border-bottom: 1px solid transparent; transition: height .35s, border-color .35s; }
.site-header.scrolled { height: 72px; border-color: var(--line); }
.nav-wrap, .main-nav, .hero-actions, .footer-top, .footer-bottom, .project-meta { display: flex; justify-content: space-between; align-items: center; }
.brand { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.085em; white-space: nowrap; }
.brand span, .dot { color: var(--violet); }
.main-nav { gap: 31px; }
.main-nav a { font-size: 13px; font-weight: 700; transition: color .25s; }
.main-nav a:hover, .main-nav a.active { color: var(--violet); }
.main-nav .nav-contact { padding: 12px 20px; border-radius: 99px; background: var(--ink); color: #fff; }
.main-nav .nav-contact:hover { background: var(--violet); color: white; }
.menu-toggle { display: none; }
.hero { padding-top: 80px; text-align: center; }
.eyebrow { display: inline-block; color: var(--violet-bright); font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }
.hero-title { font-size: clamp(38px, 5.7vw, 78px); line-height: 1.13; letter-spacing: -.065em; font-weight: 600; margin: 21px 0 22px; }
.hero-title > span { font-weight: 500; }
.hero-lead { font-size: clamp(17px, 1.8vw, 22px); font-weight: 600; margin-bottom: 10px; }
.hero-description { font-size: 15px; line-height: 1.85; max-width: 690px; margin: 0 auto; color: var(--muted); }
.hero-actions { justify-content: center; gap: 12px; margin: 30px 0 55px; flex-wrap: wrap; }
.btn { min-height: 49px; display: inline-flex; gap: 28px; align-items: center; justify-content: space-between; border-radius: 99px; font-weight: 700; font-size: 13px; padding: 0 25px; transition: background .3s, color .3s, transform .3s, box-shadow .3s; }
.btn:hover { transform: translateY(-4px); box-shadow: 0 12px 25px rgba(40,30,70,.14); }
.btn-primary { color: white; background: var(--violet); }
.btn-primary:hover { background: #6200c8; }
.btn-dark { color: white; background: var(--ink); }
.btn-dark:hover { background: #40405c; }
.btn-outline { border: 1px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: white; }
.btn-white { background: white; color: var(--ink); }
.hero-visual { height: clamp(270px, 39vw, 520px); border-radius: 16px; overflow: hidden; position: relative; isolation: isolate; background: #06050a; }
.hero-visual img { height: 115%; width: 100%; object-fit: cover; transform: scale(1.05); will-change: transform; }
.visual-label { position: absolute; bottom: 24px; left: 28px; color: white; font-size: 10px; font-weight: 700; letter-spacing: .15em; z-index: 2; }
.visual-label span { color: #d7adff; font-size: 19px; vertical-align: middle; }
.section { padding: 118px 0; }
.center-heading { text-align: center; margin-bottom: 52px; }
h2 { font-weight: 600; line-height: 1.18; letter-spacing: -.055em; font-size: clamp(32px, 4vw, 51px); margin: 14px 0 19px; }
h2 em { font-style: normal; color: var(--violet-bright); }
.center-heading p { max-width: 640px; margin: 0 auto; font-size: 15px; line-height: 1.8; color: var(--muted); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.service-card { min-height: 286px; padding: 29px; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; position: relative; background: white; transition: box-shadow .35s, border-color .35s, transform .35s; }
.service-card:hover { border-color: #d4c7ef; box-shadow: 0 22px 55px rgba(39,28,68,.07); transform: translateY(-6px); }
.spark { color: var(--violet-bright); font-size: 27px; line-height: 1; margin-bottom: 10px; transition: transform .6s; }
.service-card:hover .spark { transform: rotate(130deg); }
.card-number { font-size: 10px; color: #858093; font-weight: 700; letter-spacing: .15em; margin-bottom: 12px; }
.service-card h3 { font-size: 18px; font-weight: 600; line-height: 1.4; margin-bottom: 12px; letter-spacing: -.035em; }
.service-card p { font-size: 13px; line-height: 1.75; color: var(--muted); margin-bottom: 25px; }
.card-link { width: 100%; padding: 13px 15px; margin-top: auto; background: var(--soft); display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; transition: background .25s, color .25s; }
.card-link:hover { background: var(--violet); color: white; }
.feature-card { background: var(--soft); }
.feature-card .card-number { margin-top: 42px; }
.feature-card h3 { font-size: 24px; }
.feature-card .card-link { background: var(--ink); color: white; }
.projects-section { background: var(--soft); }
.project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.project-image { overflow: hidden; aspect-ratio: 1.15; background: #ddd; }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1), filter .5s; }
.project-card:hover img { transform: scale(1.09); filter: saturate(.8); }
.project-meta { padding: 18px 2px; gap: 10px; }
.project-meta strong { font-family: var(--font-display); font-size: 15px; }
.project-meta span { font-size: 12px; color: var(--muted); }
.center-action { text-align: center; margin-top: 38px; }
.approach-layout { display: grid; grid-template-columns: .93fr 1.07fr; gap: clamp(40px,7vw,95px); align-items: center; }
.approach-photo { height: 630px; overflow: hidden; background: var(--soft); }
.approach-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); transition: transform 1s; }
.approach-photo:hover img { transform: scale(1.055); }
.approach-intro { color: var(--muted); line-height: 1.85; font-size: 15px; }
.benefits { margin: 33px 0; }
.benefit { border-top: 1px solid var(--line); padding: 18px 0; display: grid; grid-template-columns: 36px 1fr; gap: 15px; }
.benefit > span { background: var(--violet-bright); color: white; border-radius: 50%; height: 27px; width: 27px; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.benefit h3 { font-size: 17px; margin-bottom: 6px; }
.benefit p { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 0; }
.text-link { display: inline-flex; gap: 24px; border-bottom: 1px solid var(--ink); padding-bottom: 7px; font-size: 13px; font-weight: 700; }
.text-link:hover { color: var(--violet); border-color: var(--violet); }
.methodology-section { border-top: 1px solid var(--line); }
.methodology-header { margin-bottom: 38px; }
.steps-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.step { border: 1px solid var(--line); padding: 27px 23px; min-height: 228px; transition: transform .3s; }
.step:hover { transform: translateY(-5px); }
.step > span { color: var(--violet-bright); font-family: var(--font-display); font-weight: 700; font-size: 29px; }
.step h3 { margin: 22px 0 10px; font-size: 17px; }
.step p { font-size: 13px; line-height: 1.75; color: var(--muted); }
.editorial-section { background: var(--soft); }
.editorial-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.editorial-copy p { max-width: 450px; font-size: 15px; line-height: 1.8; color: var(--muted); margin-bottom: 25px; }
.editorial-photo { height: 410px; overflow: hidden; }
.editorial-photo img { height: 100%; width: 100%; object-fit: cover; }
.cta-section { background: #5945f5; padding: 100px 0 110px; color: white; text-align: center; overflow: hidden; position: relative; isolation: isolate; }
.cta-section .eyebrow { color: #e2dafe; }
.cta-inner { position: relative; z-index: 2; }
.cta-section h2 { font-size: clamp(38px,5vw,69px); }
.cta-section h2 em { color: #e9d7ff; }
.cta-section p { max-width: 550px; margin: 0 auto 30px; font-size: 15px; line-height: 1.8; }
.cta-decor { position: absolute; font-size: 600px; line-height: 1; opacity: .055; right: -100px; top: -190px; pointer-events: none; }
.site-footer { padding: 47px 0 25px; }
.footer-top { padding-bottom: 35px; border-bottom: 1px solid var(--line); }
.footer-top > span { font-size: 13px; color: var(--muted); }
.footer-bottom { padding-top: 25px; gap: 25px; }
.footer-bottom small { font-size: 11px; color: var(--muted); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-bottom nav a { font-size: 11px; color: var(--muted); }
.footer-bottom nav a:hover { color: var(--violet); }
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1); }
.js .reveal.in-view { opacity: 1; transform: translateY(0); }
/* Images must never depend on JavaScript to become visible. */
.image-reveal { overflow: hidden; clip-path: none !important; }
.image-reveal img { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
    .image-reveal img { transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
    .image-reveal.in-view img { transform: scale(1); }
}
.js .split-reveal { opacity: 0; transform: translateY(28px); transition: opacity .95s, transform .95s; }
.js .split-reveal.in-view { opacity: 1; transform: translateY(0); }
.cursor-glow { position: fixed; left: 0; top: 0; z-index: -1; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle,rgba(123,0,247,.045),transparent 70%); pointer-events: none; transform: translate3d(-500px,-500px,0); }
@media (max-width: 950px) {
    .container { width: min(var(--container),calc(100% - 40px)); }
    .service-grid, .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .approach-layout, .editorial-layout { gap: 35px; }
    .approach-photo { height: 500px; }
    .steps-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .site-header { height: 74px; }
    .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; }
    .menu-toggle span { display: block; height: 2px; width: 24px; background: var(--ink); }
    .main-nav { position: absolute; top: 73px; left: 0; width: 100%; padding: 25px 20px 30px; background: white; border-bottom: 1px solid var(--line); box-shadow: 0 14px 25px #25243610; display: none; align-items: stretch; flex-direction: column; gap: 22px; }
    .main-nav.open { display: flex; }
    .main-nav .nav-contact { text-align: center; }
    .hero { padding-top: 58px; }
    .hero-title { font-size: clamp(36px,8.2vw,55px); }
    .hero-title br { display: none; }
    .hero-description { font-size: 14px; }
    .hero-visual { height: 275px; border-radius: 10px; }
    .visual-label { left: 15px; bottom: 12px; font-size: 8px; }
    .section { padding: 79px 0; }
    .service-grid, .project-grid, .steps-grid, .approach-layout, .editorial-layout { grid-template-columns: 1fr; }
    .service-card { min-height: 260px; }
    .approach-photo { height: 360px; }
    .approach-content { padding-top: 8px; }
    .editorial-photo { order: -1; height: 290px; }
    .footer-top, .footer-bottom { align-items: flex-start; flex-direction: column; }
    .footer-bottom nav { gap: 14px 20px; }
    .cta-section { padding: 75px 0; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .js .reveal, .js .split-reveal { opacity: 1; transform: none; }
    .js .image-reveal { clip-path: none; }
}

/* Réseaux sociaux du pied de page */
.footer-social { display: flex; flex-wrap: wrap; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.footer-social a { font-size: 13px; font-weight: 700; transition: color .25s ease; }
.footer-social a:hover { color: var(--violet); }
.footer-social a span { color: var(--violet-bright); }
@media (max-width: 760px) { .footer-social { gap: 18px; } }


/* Page contact */
.contact-hero-section {
    padding-top: 86px;
}
.contact-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.88fr);
    gap: clamp(28px, 4vw, 80px);
    align-items: center;
    margin-bottom: 48px;
}
.contact-hero-copy h1 {
    font-size: clamp(42px, 5vw, 74px);
    line-height: 1.1;
    letter-spacing: -.065em;
    font-weight: 600;
    margin: 18px 0 20px;
}
.contact-hero-copy h1 > span {
    font-weight: 500;
}
.contact-hero-lead {
    max-width: 630px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
    margin: 0 0 26px;
}
.contact-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.contact-hero-points span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--soft);
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 700;
}
.contact-highlight {
    background: linear-gradient(135deg, #6045f9 0%, #4d39e2 100%);
    color: white;
    border-radius: 14px;
    padding: 46px 46px 40px;
    box-shadow: 0 24px 60px rgba(75, 56, 180, .18);
}
.contact-highlight-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.contact-highlight-top h2 {
    margin: 0;
    color: white;
    font-size: clamp(28px, 3vw, 42px);
}
.contact-highlight-top span {
    font-size: 13px;
    font-weight: 700;
    opacity: .86;
}
.contact-highlight p {
    font-size: 15px;
    line-height: 1.85;
    margin: 0 0 24px;
    color: rgba(255,255,255,.94);
}
.contact-highlight .btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 16px;
}
.contact-alt-link {
    display: block;
    color: rgba(255,255,255,.92);
    font-size: 14px;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.contact-banner {
    height: clamp(270px, 38vw, 470px);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: var(--soft);
}
.contact-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contact-main-section {
    background: var(--soft);
}
.contact-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .82fr);
    gap: 24px;
    align-items: start;
}
.contact-form-card,
.contact-info-card {
    background: white;
    border: 1px solid var(--line);
    padding: clamp(26px, 3vw, 42px);
}
.contact-form-card p,
.contact-info-card > p {
    color: var(--muted);
    line-height: 1.8;
    font-size: 15px;
}
.contact-form {
    margin-top: 28px;
}
.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.form-field label {
    font-size: 13px;
    font-weight: 700;
}
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font: inherit;
    border-radius: 0;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.form-field textarea {
    min-height: 170px;
    padding: 15px 16px;
    resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: rgba(96,69,249,.5);
    box-shadow: 0 0 0 4px rgba(96,69,249,.08);
    outline: none;
}
.form-consent {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    margin: 18px 0 24px;
}
.form-consent input {
    margin-top: 3px;
}
.form-consent label {
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
}
.contact-form button {
    border: 0;
    cursor: pointer;
}
.contact-info-list {
    margin-top: 28px;
    display: grid;
    gap: 16px;
}
.contact-info-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.contact-info-item span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--violet-bright);
    color: white;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
}
.contact-info-item strong {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    margin-bottom: 6px;
}
.contact-info-item a,
.contact-info-item p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}
.contact-info-item a:hover {
    color: var(--violet);
}
.contact-note {
    margin-top: 28px;
    padding: 20px 22px;
    background: var(--soft);
    border-left: 3px solid var(--violet);
}
.contact-note strong {
    font-family: var(--font-display);
    font-size: 15px;
}
.contact-note p {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.75;
}
@media (max-width: 950px) {
    .contact-hero-grid,
    .contact-main-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 700px) {
    .contact-hero-section {
        padding-top: 54px;
    }
    .field-grid {
        grid-template-columns: 1fr;
    }
    .contact-highlight {
        padding: 32px 24px 28px;
    }
    .contact-banner {
        height: 250px;
        border-radius: 10px;
    }
}

/* V05 : navigation et bandeau de contact */
.main-nav .nav-contact,
.main-nav .nav-contact.active,
.main-nav .nav-contact:visited {
    color: #ffffff;
}
.main-nav .nav-contact:hover,
.main-nav .nav-contact:focus-visible {
    color: #ffffff;
}
.contact-hero-image {
    min-height: 370px;
    height: 100%;
    max-height: 510px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--soft);
}
.contact-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 700px) {
    .contact-hero-image { min-height: 270px; height: 300px; }
}


/* Pages juridiques */
.legal-hero {
    padding: 94px 0 70px;
    background: var(--soft);
    overflow: hidden;
}
.legal-hero-inner { position: relative; }
.legal-title {
    font-size: clamp(42px, 6.3vw, 86px);
    letter-spacing: -.068em;
    font-weight: 600;
    line-height: 1.12;
    max-width: 900px;
    margin: 22px 0 23px;
}
.legal-intro { font-size: clamp(16px, 1.7vw, 21px); line-height: 1.65; color: var(--muted); max-width: 710px; }
.legal-hero-line { height: 1px; background: var(--line); margin-top: 68px; position: relative; }
.legal-hero-line span { position: absolute; right: 0; top: -27px; font-size: 51px; color: var(--violet-bright); }
.legal-layout { display: grid; grid-template-columns: minmax(195px,.31fr) minmax(0,1fr); gap: clamp(48px,7vw,110px); align-items: start; }
.legal-sidebar { position: sticky; top: 115px; }
.legal-toc { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 18px; }
.legal-toc a { display: flex; gap: 15px; align-items: baseline; font-size: 12px; font-weight: 600; line-height: 1.6; padding: 15px 0; border-bottom: 1px solid var(--line); transition: color .2s; }
.legal-toc a span { color: var(--violet-bright); font-weight: 800; }
.legal-toc a:hover, .legal-sidebar-contact:hover { color: var(--violet-bright); }
.legal-sidebar-contact { display: inline-flex; gap: 14px; margin-top: 30px; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--ink); padding-bottom: 9px; }
.legal-content { min-width: 0; }
.legal-article-section { scroll-margin-top: 112px; padding: 0 0 49px; margin-bottom: 49px; border-bottom: 1px solid var(--line); }
.legal-article-section:last-child { border-bottom: 0; margin-bottom: 0; }
.legal-index { color: var(--violet-bright); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.legal-article-section h2 { font-size: clamp(24px,3vw,36px); line-height: 1.3; letter-spacing: -.045em; margin: 12px 0 24px; text-transform: none; }
.legal-article-section p, .legal-article-section li { color: var(--muted); font-size: 14px; line-height: 1.95; overflow-wrap: anywhere; }
.legal-article-section p { margin: 0 0 16px; }
.legal-bullets { padding-left: 22px; margin: 12px 0 20px; }
.legal-bullets li { padding-left: 6px; margin-bottom: 9px; }
.legal-bullets li::marker { color: var(--violet-bright); }
.legal-content a { color: var(--violet-bright); text-decoration: underline; text-underline-offset: 3px; }
.legal-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); }
.legal-table { width: 100%; border-collapse: collapse; min-width: 650px; font-size: 13px; line-height: 1.7; }
.legal-table th { padding: 19px 17px; background: var(--violet-bright); color: #fff; text-align: left; font-weight: 700; }
.legal-table td { padding: 17px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.legal-table tr:nth-child(even) { background: var(--soft); }
@media (max-width: 800px) {
    .legal-hero { padding: 70px 0 48px; }
    .legal-hero-line { margin-top: 40px; }
    .legal-layout { grid-template-columns: 1fr; gap: 50px; }
    .legal-sidebar { position: static; }
    .legal-toc { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 22px; }
}
@media (max-width: 540px) {
    .legal-toc { grid-template-columns: 1fr; }
    .legal-article-section { padding-bottom: 34px; margin-bottom: 34px; }
}

/* PORTFOLIO — SITE 05 */
.portfolio-hero{padding-top:85px;padding-bottom:65px;text-align:center}
.portfolio-hero h1{font-size:clamp(42px,6.4vw,88px);letter-spacing:-.065em;line-height:1.13;margin:20px auto}
.portfolio-hero h1 span{font-weight:500}
.portfolio-hero h1 em{font-style:normal;color:var(--violet-bright)}
.portfolio-hero>p{max-width:660px;margin:0 auto 46px;color:var(--muted);line-height:1.8;font-size:16px}
.portfolio-hero-art{height:clamp(230px,32vw,430px);border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 78% 20%,#a18aff 0%,transparent 40%),linear-gradient(115deg,#252436,#6045f9 60%,#7b00f7);position:relative;display:flex;align-items:center;justify-content:center;color:white}
.portfolio-hero-art strong{font:700 clamp(65px,13vw,175px)/1 var(--font-display);letter-spacing:-.09em;transform:rotate(-4deg);white-space:nowrap}
.portfolio-hero-art strong span{color:#eab2fd}
.portfolio-hero-art>span,.portfolio-hero-art i{position:absolute;left:28px;font-size:11px;letter-spacing:.18em;font-style:normal}
.portfolio-hero-art>span{top:24px}.portfolio-hero-art i{bottom:24px}
.portfolio-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:35px}
.portfolio-heading h2{margin-bottom:0}
.portfolio-filters{display:flex;flex-wrap:wrap;gap:8px}
.filter-btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:12px 18px;border-radius:999px;cursor:pointer;font:700 12px var(--font-text);transition:background .25s,color .25s}
.filter-btn:hover,.filter-btn.is-active{background:var(--ink);color:white}
.portfolio-card{background:transparent;border:0;text-align:left;padding:0;cursor:pointer;color:var(--ink);font:inherit;min-width:0}
.portfolio-card[hidden]{display:none!important}
.portfolio-card .project-image{display:block}
.portfolio-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s}
.portfolio-card:hover img{transform:scale(1.08);filter:saturate(.75)}
.portfolio-card .project-meta{display:flex}
.project-dialog{position:fixed;max-width:min(1000px,calc(100vw - 36px));width:100%;padding:0;border:0;border-radius:14px;color:var(--ink);box-shadow:0 30px 100px #17132755;max-height:calc(100dvh - 40px)}
.project-dialog::backdrop{background:rgba(12,10,26,.78);backdrop-filter:blur(7px)}
.dialog-inner{display:grid;grid-template-columns:1.15fr 1fr;min-height:430px;position:relative}
.dialog-image{background:var(--soft);min-width:0;overflow:hidden}
.dialog-image img{width:100%;height:100%;object-fit:cover;min-height:400px}
.dialog-copy{padding:clamp(32px,4vw,65px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.dialog-copy h2{font-size:clamp(30px,3.5vw,48px)}
.dialog-type{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--violet-bright)}
.dialog-description{font-size:15px;line-height:1.8;color:var(--muted);margin:12px 0 25px}
.dialog-close{position:absolute;z-index:2;right:16px;top:14px;width:42px;height:42px;border:0;border-radius:50%;background:var(--ink);color:white;font-size:30px;cursor:pointer}
.dialog-unavailable{color:var(--muted);font-size:13px;line-height:1.6}
.dialog-copy [hidden]{display:none!important}
@media(max-width:950px){.portfolio-heading{align-items:start;flex-direction:column}}
@media(max-width:700px){.portfolio-hero{padding-top:55px}.portfolio-hero-art{height:230px}.portfolio-hero-art strong{font-size:clamp(50px,12vw,95px)}.dialog-inner{grid-template-columns:1fr}.dialog-image img{min-height:0;height:220px}.dialog-copy{padding:27px}.portfolio-filters{gap:7px}.filter-btn{padding:10px 13px}}


/* Réalisations — hero en deux colonnes, image à droite. */
.portfolio-hero {
    text-align: left;
}
.portfolio-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 85px);
    align-items: center;
}
.portfolio-hero-copy h1 {
    margin: 20px 0 22px;
    font-size: clamp(38px, 4.5vw, 70px);
}
.portfolio-hero-copy p {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}
.portfolio-hero-image {
    width: 100%;
    height: clamp(330px, 37vw, 510px);
    overflow: hidden;
    border-radius: 14px;
    background: var(--soft);
}
.portfolio-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
/* Conserver la partie supérieure des aperçus de sites dans toutes les cartes. */
.portfolio-card .project-image img,
.portfolio-grid .project-image img {
    object-position: center top;
}
/* La même règle dans les fenêtres de détail. */
.project-dialog .dialog-image img {
    object-position: center top;
}
@media (max-width: 700px) {
    .portfolio-hero-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .portfolio-hero-image {
        height: 285px;
    }
}


/* Page Prestations — cinq sections faciles à parcourir */
.service-hero { padding-block: 90px 96px; }
.service-hero-layout { display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,5vw,75px); }
.service-hero-text h1 {font-family:var(--font-display);font-weight:600;font-size:clamp(39px,4.75vw,70px);line-height:1.13;letter-spacing:-.06em;margin:20px 0 25px;}
.service-hero-text h1 em{font-style:normal;color:var(--violet-bright)}
.service-hero-text p{font-size:16px;line-height:1.85;color:var(--muted);max-width:540px;margin-bottom:28px}
.service-hero-picture{height:clamp(320px,38vw,480px);border-radius:14px;background:var(--soft);overflow:hidden}
.service-hero-picture img{height:100%;width:100%;object-fit:cover;object-position:center}
.service-detail { scroll-margin-top:84px; }
.service-detail-soft{background:var(--soft)}
.service-detail-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,6vw,95px)}
.service-detail-reverse .service-detail-copy{order:2}
.service-detail-reverse .service-detail-visual{order:1}
.service-detail-copy h2{margin:16px 0 20px;font-size:clamp(32px,3.7vw,51px)}
.service-detail-copy p{font-size:14px;line-height:1.85;color:var(--muted);max-width:570px}
.service-detail-copy .service-detail-lead{font-size:17px;font-weight:600;color:var(--ink);line-height:1.65}
.service-points{list-style:none;margin:26px 0 32px;padding:0;border-top:1px solid var(--line)}
.service-points li{font-size:13px;line-height:1.65;padding:13px 0 13px 23px;border-bottom:1px solid var(--line);position:relative}
.service-points li::before{content:'✳';color:var(--violet-bright);font-weight:700;position:absolute;left:0;top:12px}
.service-detail-visual{overflow:hidden;border-radius:12px;aspect-ratio:4/3;background:#efecf9;box-shadow:0 20px 55px #2524360a}
.service-detail-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.service-detail-visual:hover img{transform:scale(1.04)}
.service-detail-visual-photo img{object-position:center}
@media(max-width:850px){.service-hero-layout,.service-detail-layout{grid-template-columns:1fr}.service-detail-reverse .service-detail-copy,.service-detail-reverse .service-detail-visual{order:initial}.service-detail-visual{max-height:420px}.service-hero{padding-block:55px 70px}}
@media(max-width:700px){.service-detail{scroll-margin-top:74px}.service-hero-picture{height:270px}.service-detail-visual{aspect-ratio:1.35}}

/* Confirmation de l'envoi du formulaire */
.form-feedback { padding: 17px 20px; margin-bottom: 22px; border-left: 4px solid var(--violet-bright); font-size: 14px; line-height: 1.65; background: #f4f1ff; color: var(--ink); }
.form-feedback.is-error { background: #fff0f0; border-color: #ba3434; }
.contact-form button:disabled { opacity: .7; cursor: wait; }
.honeypot { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; overflow: hidden; }

.error-section { min-height: min(730px, 75vh); display: grid; place-items: center; background: var(--soft); text-align: center; }
.error-wrap { max-width: 850px; }
.error-number { font-family: var(--font-display); font-size: clamp(110px, 19vw, 230px); line-height: 1; letter-spacing: -.09em; font-weight: 700; margin: 15px 0 -20px; color: var(--ink); }
.error-number span { color: var(--violet-bright); }
.error-wrap h1 { font-family: var(--font-display); font-size: clamp(30px,5vw,54px); line-height: 1.12; letter-spacing: -.05em; }
.error-wrap > p:not(.error-number) { max-width: 570px; margin: 0 auto; color: var(--muted); line-height: 1.8; }