/* =========================================================
   PAGE PORTFOLIO ILLUSTRATIONS - PHOENIX STUDIO
   ========================================================= */

/* =========================================================
   HERO PORTFOLIO ILLUSTRATIONS - VERSION PLUS VISIBLE
   ========================================================= */

.sub-header {
    min-height: 620px;
    padding-top: 95px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Voile sombre pour détacher le texte de l’image */
.sub-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(5, 8, 15, 0.92) 0%,
            rgba(5, 8, 15, 0.76) 42%,
            rgba(5, 8, 15, 0.42) 100%
        ),
        radial-gradient(circle at 18% 45%, rgba(0, 245, 255, 0.12), transparent 32%);
    z-index: 1;
}

/* Le menu reste au-dessus du voile */
.sub-header nav {
    position: fixed;
    z-index: 9999;
}

/* Bloc complet : badge + titre + texte */
.contact-header-text.illustration-header-text {
    position: relative;
    z-index: 2;
    width: min(90%, 960px);
    max-width: 960px;
    margin-left: 6%;
    margin-top: 20px;
    padding: 38px 42px;
    text-align: left;

    background: linear-gradient(
        135deg,
        rgba(10, 14, 22, 0.78),
        rgba(10, 14, 22, 0.42)
    );
    border: 1px solid rgba(0, 245, 255, 0.16);
    border-radius: 28px;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
}

/* Petit trait décoratif à gauche */
.contact-header-text.illustration-header-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 38px;
    width: 5px;
    height: 110px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(to bottom, #00f5ff, #d4af37, #ff4b3e);
    box-shadow: 0 0 22px rgba(0, 245, 255, 0.35);
}

/* Badge Portfolio artistique */
.illustration-header-text .page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 12px 24px;

    border-radius: 999px;
    background: rgba(0, 245, 255, 0.16);
    border: 1px solid rgba(0, 245, 255, 0.55);
    color: #00f5ff;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;

    box-shadow:
        0 0 0 1px rgba(0, 245, 255, 0.08),
        0 0 22px rgba(0, 245, 255, 0.25);
}

/* Petite étoile avant le badge */
.illustration-header-text .page-kicker::before {
    content: "✦";
    color: #ffffff;
    font-size: 13px;
}

/* Titre principal beaucoup plus lisible */
.illustration-header-text h1 {
    max-width: 820px;
    margin: 0 0 24px 0;

    font-size: clamp(3.2rem, 6vw, 6.4rem);
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -2px;
    text-align: left;

    background: linear-gradient(120deg, #ffe45c, #ff9b3d, #ff4b3e);
    background-size: 250% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: illustrationTitleGlow 7s ease-in-out infinite;
}

/* Texte descriptif */
.illustration-header-text p {
    max-width: 780px;
    margin: 0;
    padding: 0;

    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 17px;
    line-height: 1.9;
    text-align: left;
}




@media (max-width: 768px) {
    .sub-header {
        min-height: 620px;
        padding-top: 95px;
        align-items: center;
    }

    .contact-header-text.illustration-header-text {
        width: 88%;
        margin-left: 6%;
        margin-top: 30px;
        padding: 28px 24px;
        border-radius: 22px;
    }

    .contact-header-text.illustration-header-text::before {
        top: 28px;
        height: 80px;
        width: 4px;
    }

    .illustration-header-text .page-kicker {
        font-size: 10px;
        letter-spacing: 1.5px;
        padding: 9px 16px;
        margin-bottom: 18px;
    }

    .illustration-header-text h1 {
        font-size: 2.8rem;
        line-height: 1;
        letter-spacing: -1px;
        margin-bottom: 18px;
    }

    .illustration-header-text p {
        font-size: 14px;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .sub-header {
        min-height: 580px;
    }

    .contact-header-text.illustration-header-text {
        width: 90%;
        margin-left: 5%;
        padding: 24px 20px;
    }

    .illustration-header-text h1 {
        font-size: 2.35rem;
    }

    .illustration-header-text p {
        font-size: 13px;
    }
}

/* Animation du titre */
@keyframes illustrationTitleGlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes illustrationTitleGlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.illustration-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(0, 245, 255, 0.12), transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(244, 67, 54, 0.12), transparent 28%),
        radial-gradient(circle at 50% 80%, rgba(212, 175, 55, 0.08), transparent 30%),
        #0b0d12;
    color: #f0f0f0;
    padding: 90px 6%;
}

/* Correction contre les anciens styles globaux de Portfolio.css */
.illustration-page p,
.illustration-page h1,
.illustration-page h2,
.illustration-page h3,
.illustration-page span,
.illustration-page a {
    margin-left: 0;
}

.illustration-intro {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    gap: 40px;
    max-width: 1250px;
    margin: 0 auto 70px;
}

.section-badge {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(0, 245, 255, 0.08);
    border: 1px solid rgba(0, 245, 255, 0.22);
    color: #00f5ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.intro-left h2 {
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.05;
    margin-bottom: 20px;
    color: #ffffff;
}

.intro-left p {
    max-width: 680px;
    color: #aeb7c2 !important;
    font-size: 15px;
    line-height: 1.9;
}

.intro-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.stat-box {
    position: relative;
    min-height: 140px;
    padding: 24px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.stat-box::before {
    content: "";
    position: absolute;
    inset: auto -30px -30px auto;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(0, 245, 255, 0.12);
    filter: blur(4px);
}

.stat-box strong {
    display: block;
    font-size: 2.4rem;
    color: #00f5ff;
    margin-bottom: 8px;
}

.stat-box span {
    color: #ffffff;
    font-size: 13px;
}

.portfolio-filter-section {
    max-width: 1250px;
    margin: 0 auto 35px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.filter-header h3 {
    color: #ffffff;
    font-size: 1.35rem;
    margin-bottom: 5px;
    text-align: left;
}

.filter-header p {
    color: #aeb7c2 !important;
    font-size: 13px;
    padding: 0;
}

.portfolio-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-btn {
    border: 1px solid rgba(0, 245, 255, 0.18);
    background: rgba(0, 245, 255, 0.06);
    color: #f0f0f0;
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: #00f5ff;
    color: #071016;
    box-shadow: 0 0 20px rgba(0, 245, 255, 0.28);
    transform: translateY(-2px);
}

.illustration-gallery {
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 270px;
    gap: 20px;
}

.art-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #11141b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    isolation: isolate;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.art-card.featured {
    grid-column: span 2;
    grid-row: span 2;
}

.art-card.wide {
    grid-column: span 2;
}

.art-card.tall {
    grid-row: span 2;
}

.art-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.03);
    transition: transform 0.7s ease, filter 0.4s ease;
}

.art-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.25), transparent),
        linear-gradient(135deg, rgba(0, 245, 255, 0.15), transparent 45%);
    opacity: 0.95;
}

.art-card::after {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 2;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: scale(0.96);
    transition: all 0.35s ease;
    pointer-events: none;
}

.art-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 245, 255, 0.35);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.55);
}

.art-card:hover img {
    transform: scale(1.14);
    filter: saturate(1.15) contrast(1.05);
}

.art-card:hover::after {
    opacity: 1;
    transform: scale(1);
}

.art-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 24px;
    transform: translateY(12px);
    transition: transform 0.35s ease;
}

.art-card:hover .art-overlay {
    transform: translateY(0);
}

.art-category {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 245, 255, 0.14);
    border: 1px solid rgba(0, 245, 255, 0.25);
    color: #00f5ff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.art-overlay h3 {
    color: #ffffff;
    font-size: 1.35rem;
    line-height: 1.2;
    margin-bottom: 6px;
    text-align: left;
}

.art-overlay p {
    color: rgba(255, 255, 255, 0.78) !important;
    padding: 0;
    margin-bottom: 16px;
    font-size: 13px;
}

.view-art-btn {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s ease;
}

.art-card:hover .view-art-btn {
    opacity: 1;
    transform: translateY(0);
}

.view-art-btn:hover {
    background: #00f5ff;
    color: #071016;
}

.art-card.is-hidden {
    display: none;
}

.illustration-process {
    max-width: 1250px;
    margin: 90px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.process-card {
    padding: 30px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.3s ease, background 0.3s ease;
}

.process-card:hover {
    transform: translateY(-6px);
    background: rgba(0, 245, 255, 0.06);
}

.process-card span {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 14px;
    background: rgba(0, 245, 255, 0.1);
    border: 1px solid rgba(0, 245, 255, 0.24);
    color: #00f5ff;
    font-weight: 800;
}

.process-card h3 {
    color: #ffffff;
    text-align: left;
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.process-card p {
    color: #aeb7c2 !important;
    padding: 0;
    line-height: 1.7;
}

.illustration-cta {
    max-width: 1250px;
    margin: 90px auto 0;
    padding: 45px;
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(0, 245, 255, 0.16), rgba(244, 67, 54, 0.12)),
        rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 245, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.illustration-cta h2 {
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 3rem);
    margin-bottom: 14px;
}

.illustration-cta p {
    color: #d8dee8 !important;
    max-width: 760px;
    line-height: 1.8;
    padding: 0;
}

.illustration-cta-btn {
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 999px;
    background: #00f5ff;
    color: #071016 !important;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s ease;
}

.illustration-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 245, 255, 0.28);
}

/* =========================
   LIGHTBOX
   ========================= */

.art-lightbox {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.art-lightbox.active {
    display: flex;
}

.art-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 5, 9, 0.86);
    backdrop-filter: blur(10px);
}

.art-lightbox-content {
    position: relative;
    z-index: 2;
    width: min(1100px, 96vw);
    max-height: 88vh;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    overflow: hidden;
    border-radius: 28px;
    background: #11141b;
    border: 1px solid rgba(0, 245, 255, 0.18);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.art-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.art-lightbox-close:hover {
    background: #00f5ff;
    color: #071016;
}

.lightbox-image {
    min-height: 520px;
    background: #05070b;
}

.lightbox-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lightbox-info {
    padding: 45px 35px;
    overflow-y: auto;
}

.lightbox-category {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(0, 245, 255, 0.12);
    color: #00f5ff;
    border: 1px solid rgba(0, 245, 255, 0.24);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lightbox-info h2 {
    color: #ffffff;
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1.05;
    margin-bottom: 18px;
}

.lightbox-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.lightbox-meta span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #d8dee8;
    font-size: 12px;
}

.lightbox-info p {
    color: #aeb7c2 !important;
    line-height: 1.85;
    padding: 0;
    margin-bottom: 24px;
}

.lightbox-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lightbox-tags span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.1);
    color: #d4af37;
    border: 1px solid rgba(212, 175, 55, 0.16);
    font-size: 12px;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1050px) {
    .illustration-intro {
        grid-template-columns: 1fr;
    }

    .illustration-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 260px;
    }

    .art-card.featured,
    .art-card.wide,
    .art-card.tall {
        grid-column: span 1;
        grid-row: span 1;
    }

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

    .portfolio-filters {
        justify-content: flex-start;
    }

    .illustration-process {
        grid-template-columns: 1fr;
    }

    .illustration-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .illustration-page {
        padding: 70px 20px;
    }

    .intro-stats {
        grid-template-columns: 1fr;
    }

    .portfolio-filter-section {
        padding: 20px;
    }

    .illustration-gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: 360px;
        gap: 18px;
    }

    .art-overlay {
        padding: 20px;
    }

    .view-art-btn {
        opacity: 1;
        transform: translateY(0);
    }

    .illustration-cta {
        padding: 30px 22px;
    }

    .art-lightbox {
        padding: 16px;
    }

    .art-lightbox-content {
        grid-template-columns: 1fr;
        max-height: 92vh;
    }

    .lightbox-image {
        min-height: 320px;
    }

    .lightbox-info {
        padding: 28px 22px;
    }
}

@media (max-width: 480px) {
    .illustration-gallery {
        grid-auto-rows: 300px;
    }

    .portfolio-filters {
        width: 100%;
    }

    .filter-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}




/* =====================================================================
   PORTFOLIO ILLUSTRATIONS — COUCHE DE STABILISATION RESPONSIVE V2
   Cette couche finale est volontairement ciblée sur cette page. Elle
   neutralise les règles historiques de style.css sans modifier leur base.
   ===================================================================== */

:root {
    --site-scrollbar-width: 0px;
}

html {
    min-height: 100%;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body.illustration-page-body {
    --illustration-nav-height: 78px;
    min-width: 0;
    overflow-x: clip;
    background: #0b0d12;
    color: #f0f0f0;
}

body.illustration-page-body.menu-is-open,
body.illustration-page-body.art-lightbox-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.illustration-page-body *,
body.illustration-page-body *::before,
body.illustration-page-body *::after {
    box-sizing: border-box;
}

body.illustration-page-body .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------
   BARRE DE DÉFILEMENT + NAVIGATION FIXE
   La largeur réelle de la scrollbar est calculée dans SmallResolution.js.
   La navigation s'arrête donc avant elle, sur Chrome comme Firefox.
   --------------------------------------------------------------------- */
body.illustration-page-body nav.sticky-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: var(--site-scrollbar-width) !important;
    z-index: 1000000 !important;
    width: auto !important;
    min-width: 0;
    height: var(--illustration-nav-height) !important;
    min-height: var(--illustration-nav-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(12px, 2vw, 30px);
    padding: 10px clamp(20px, 3.1vw, 48px) !important;
    background: rgba(8, 11, 18, 0.93) !important;
    border-bottom: 1px solid rgba(0, 245, 255, 0.17);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.illustration-page-body nav.sticky-nav > a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}

body.illustration-page-body nav.sticky-nav #logoNav {
    display: block;
    width: clamp(116px, 10vw, 142px) !important;
    max-width: 100%;
    height: auto;
}

/* Le hero garde l'identité actuelle mais son contenu ne passe jamais sous le menu. */
body.illustration-page-body .sub-header {
    min-height: clamp(580px, 72svh, 760px) !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    padding: calc(var(--illustration-nav-height) + clamp(52px, 7vh, 86px)) 0 clamp(62px, 8vh, 100px) !important;
    overflow: hidden;
    isolation: isolate;
    background-position: center !important;
}

body.illustration-page-body .sub-header::before {
    z-index: -1 !important;
}

body.illustration-page-body .contact-header-text.illustration-header-text {
    width: min(1080px, calc(100% - 64px)) !important;
    max-width: 1080px;
    margin: 0 auto !important;
    padding: clamp(28px, 4vw, 46px) clamp(26px, 4vw, 50px) !important;
}

body.illustration-page-body .illustration-header-text h1 {
    font-size: clamp(3rem, 5.6vw, 6.15rem) !important;
}

/* ---------------------------------------------------------------------
   NAVIGATION DESKTOP
   --------------------------------------------------------------------- */
body.illustration-page-body .mobile-menu-toggle,
body.illustration-page-body .mobile-menu-close {
    display: none;
    appearance: none;
    border: 0;
    font: inherit;
}

body.illustration-page-body .site-menu-backdrop {
    display: none;
}

@media (min-width: 1121px) {
    body.illustration-page-body .nav-links {
        position: static !important;
        right: auto !important;
        display: block !important;
        flex: 1 1 auto;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        transition: none !important;
    }

    body.illustration-page-body .nav-links > ul {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.illustration-page-body .nav-links > ul > li {
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 8px clamp(5px, 0.65vw, 11px) !important;
    }

    body.illustration-page-body .nav-links > ul > li > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        color: #edf6fa !important;
        font-size: clamp(0.66rem, 0.73vw, 0.82rem) !important;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap !important;
    }

    body.illustration-page-body .nav-links > ul > li::after {
        margin-top: 5px;
    }

    body.illustration-page-body .nav-links .dropdown-content,
    body.illustration-page-body .nav-links .services-dropdown-content,
    body.illustration-page-body .nav-links .portfolio-dropdown-content {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
        display: none !important;
        width: min(390px, calc(100vw - 36px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 36px) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 11px !important;
        overflow: visible !important;
        background: rgba(13, 18, 29, 0.98) !important;
        border: 1px solid rgba(0, 245, 255, 0.18) !important;
        border-radius: 16px !important;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.56) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
    }

    body.illustration-page-body .nav-links > ul > li.dropdown:hover > .dropdown-content,
    body.illustration-page-body .nav-links > ul > li.dropdown:focus-within > .dropdown-content {
        display: block !important;
    }

    body.illustration-page-body .nav-links .dropdown-content > li {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.illustration-page-body .nav-links .dropdown-content > li::after {
        display: none !important;
    }

    body.illustration-page-body .nav-links .services-dropdown-content > li > a,
    body.illustration-page-body .nav-links .portfolio-dropdown-content > li > a {
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 12px 13px !important;
        gap: 12px !important;
        border-radius: 11px !important;
        color: #f4f8fa !important;
        font-size: 0.85rem !important;
        line-height: 1.35 !important;
        text-align: left !important;
        white-space: normal !important;
        transform: none !important;
    }

    body.illustration-page-body .nav-links .service-icon,
    body.illustration-page-body .nav-links .portfolio-icon {
        display: grid !important;
        place-items: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        margin: 0 !important;
        border-radius: 11px !important;
    }

    body.illustration-page-body .nav-links .service-text,
    body.illustration-page-body .nav-links .portfolio-text {
        display: block !important;
        min-width: 0;
        text-align: left;
    }

    body.illustration-page-body .nav-links .service-text strong,
    body.illustration-page-body .nav-links .portfolio-text strong,
    body.illustration-page-body .nav-links .service-text small,
    body.illustration-page-body .nav-links .portfolio-text small {
        display: block !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    body.illustration-page-body .nav-links .service-text strong,
    body.illustration-page-body .nav-links .portfolio-text strong {
        margin-bottom: 3px;
        color: #ffffff !important;
        font-size: 0.84rem;
        line-height: 1.3;
    }

    body.illustration-page-body .nav-links .service-text small,
    body.illustration-page-body .nav-links .portfolio-text small {
        color: #b7c3cd !important;
        font-size: 0.7rem;
        line-height: 1.4;
    }

    body.illustration-page-body .nav-links .services-dropdown-content > li > a:hover,
    body.illustration-page-body .nav-links .portfolio-dropdown-content > li > a:hover {
        padding-left: 17px !important;
        background: linear-gradient(135deg, rgba(0, 245, 255, 0.18), rgba(244, 67, 54, 0.15)) !important;
        transform: translateX(3px) !important;
    }

    body.illustration-page-body .nav-links .dropdown:hover .dropdown-arrow,
    body.illustration-page-body .nav-links .dropdown:focus-within .dropdown-arrow {
        transform: rotate(180deg);
    }
}

/* 13–16 pouces : navigation compacte, sans chevauchement des libellés. */
@media (min-width: 1121px) and (max-width: 1460px) {
    body.illustration-page-body nav.sticky-nav {
        padding-inline: clamp(16px, 2vw, 30px) !important;
        gap: 12px;
    }

    body.illustration-page-body nav.sticky-nav #logoNav {
        width: clamp(112px, 9vw, 128px) !important;
    }

    body.illustration-page-body .nav-links > ul > li {
        padding-inline: clamp(4px, 0.45vw, 7px) !important;
    }

    body.illustration-page-body .nav-links > ul > li > a {
        font-size: clamp(0.61rem, 0.66vw, 0.74rem) !important;
    }

    body.illustration-page-body .illustration-page {
        padding-inline: clamp(30px, 4vw, 64px) !important;
    }
}

/* ---------------------------------------------------------------------
   MENU BURGER TABLETTE / MOBILE
   Le panneau se déplace par transform. Sa transition est activée seulement
   pendant un clic utilisateur par SmallResolution.js.
   --------------------------------------------------------------------- */
@media (max-width: 1120px) {
    body.illustration-page-body {
        --illustration-nav-height: 72px;
    }

    body.illustration-page-body nav.sticky-nav {
        padding: 9px 18px !important;
    }

    body.illustration-page-body .mobile-menu-toggle,
    body.illustration-page-body .mobile-menu-close {
        display: inline-grid !important;
        place-items: center;
        flex: 0 0 auto;
        cursor: pointer;
    }

    body.illustration-page-body .mobile-menu-toggle {
        position: relative;
        z-index: 3;
        width: 46px;
        height: 46px;
        border: 1px solid rgba(0, 245, 255, 0.34);
        border-radius: 14px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.07);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.27);
        transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
    }

    body.illustration-page-body .mobile-menu-toggle:hover,
    body.illustration-page-body .mobile-menu-toggle:focus-visible {
        border-color: #00f5ff;
        background: rgba(0, 245, 255, 0.14);
        transform: translateY(-2px);
        outline: none;
    }

    body.illustration-page-body .mobile-menu-toggle .fa,
    body.illustration-page-body .mobile-menu-close .fa {
        display: block !important;
        margin: 0 !important;
        color: inherit !important;
        font-size: 1.32rem;
    }

    body.illustration-page-body .nav-links {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 1000002 !important;
        display: block !important;
        width: min(88vw, 390px) !important;
        max-width: 390px !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 0 0 calc(28px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        text-align: left !important;
        background: linear-gradient(180deg, rgba(10, 16, 27, 0.995), rgba(5, 8, 16, 0.995)) !important;
        border-left: 1px solid rgba(0, 245, 255, 0.22);
        box-shadow: -18px 0 52px rgba(0, 0, 0, 0.52);
        transform: translate3d(104%, 0, 0) !important;
        transition: none !important;
        will-change: auto;
        overscroll-behavior: contain;
    }

    body.illustration-page-body .nav-links.menu-motion-ready {
        transition: transform 0.32s cubic-bezier(.2, .8, .2, 1) !important;
        will-change: transform;
    }

    body.illustration-page-body .nav-links.menu-transition-disabled,
    body.illustration-page-body.is-resizing .nav-links,
    body.illustration-page-body.is-resizing .site-menu-backdrop {
        transition: none !important;
        will-change: auto;
    }

    body.illustration-page-body .nav-links.menu-open {
        transform: translate3d(0, 0, 0) !important;
    }

    body.illustration-page-body .mobile-menu-close {
        position: sticky;
        top: 16px;
        left: calc(100% - 64px);
        z-index: 4;
        width: 46px;
        height: 46px;
        margin: 16px 16px 0 auto;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 14px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.09);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    }

    body.illustration-page-body .mobile-menu-close:hover,
    body.illustration-page-body .mobile-menu-close:focus-visible {
        color: #071016;
        border-color: #a8ffff;
        background: #a8ffff;
        outline: none;
    }

    body.illustration-page-body .nav-links > ul {
        display: block !important;
        padding: 14px 20px 30px !important;
        margin: 0 !important;
    }

    body.illustration-page-body .nav-links > ul > li {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 0 7px !important;
    }

    body.illustration-page-body .nav-links > ul > li::after {
        display: none !important;
    }

    body.illustration-page-body .nav-links > ul > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 48px;
        padding: 12px 13px !important;
        border-radius: 12px;
        color: #ffffff !important;
        font-size: 0.9rem !important;
        font-weight: 700;
        line-height: 1.35;
        text-decoration: none;
    }

    body.illustration-page-body .nav-links > ul > li:not(.dropdown) > a:hover,
    body.illustration-page-body .nav-links > ul > li:not(.dropdown) > a:focus-visible {
        background: rgba(0, 245, 255, 0.12);
        outline: none;
    }

    body.illustration-page-body .nav-links .dropdown:hover > .dropdown-content,
    body.illustration-page-body .nav-links .services-dropdown:hover > .services-dropdown-content,
    body.illustration-page-body .nav-links .portfolio-dropdown:hover > .portfolio-dropdown-content {
        display: none !important;
    }

    body.illustration-page-body .nav-links .dropdown.open > .dropdown-content,
    body.illustration-page-body .nav-links .dropdown.open:hover > .dropdown-content {
        display: block !important;
    }

    body.illustration-page-body .nav-links .dropdown.open > .dropdown-link .dropdown-arrow {
        transform: rotate(180deg);
    }

    body.illustration-page-body .nav-links .dropdown-content,
    body.illustration-page-body .nav-links .services-dropdown-content,
    body.illustration-page-body .nav-links .portfolio-dropdown-content {
        position: static !important;
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 5px 0 12px !important;
        padding: 8px !important;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.11) !important;
        border-radius: 13px !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    body.illustration-page-body .nav-links .dropdown-content li {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.illustration-page-body .nav-links .dropdown-content li::after {
        display: none !important;
    }

    body.illustration-page-body .nav-links .services-dropdown-content li a,
    body.illustration-page-body .nav-links .portfolio-dropdown-content li a {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        align-items: start !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        gap: 10px !important;
        border-radius: 10px !important;
        color: #ffffff !important;
        white-space: normal !important;
        transform: none !important;
    }

    body.illustration-page-body .nav-links .portfolio-dropdown-content li a:hover,
    body.illustration-page-body .nav-links .services-dropdown-content li a:hover {
        padding-left: 10px !important;
        background: rgba(255, 255, 255, 0.10) !important;
        transform: none !important;
    }

    body.illustration-page-body .nav-links .service-icon,
    body.illustration-page-body .nav-links .portfolio-icon {
        display: grid !important;
        place-items: center !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 1rem;
    }

    body.illustration-page-body .nav-links .service-text,
    body.illustration-page-body .nav-links .portfolio-text {
        display: block !important;
        min-width: 0;
    }

    body.illustration-page-body .nav-links .service-text strong,
    body.illustration-page-body .nav-links .portfolio-text strong {
        display: block !important;
        color: #ffffff !important;
        font-size: 0.82rem;
        line-height: 1.3;
    }

    body.illustration-page-body .nav-links .service-text small,
    body.illustration-page-body .nav-links .portfolio-text small {
        display: block !important;
        margin-top: 3px;
        color: rgba(255, 255, 255, 0.78) !important;
        font-size: 0.69rem;
        line-height: 1.4;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    body.illustration-page-body .nav-links ul li.active-menu > a,
    body.illustration-page-body .nav-links ul li.active-parent > a {
        color: #ffffff !important;
        background: linear-gradient(90deg, rgba(0, 245, 255, 0.18), rgba(0, 245, 255, 0.045));
        border: 1px solid rgba(0, 245, 255, 0.22);
        text-shadow: none;
    }

    body.illustration-page-body .site-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 999999 !important;
        display: block;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        background: rgba(0, 0, 0, 0.67);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: opacity 0.28s ease, visibility 0s linear 0.28s;
    }

    body.illustration-page-body .site-menu-backdrop.is-visible {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.28s ease;
    }
}

@media (max-width: 700px) {
    body.illustration-page-body {
        --illustration-nav-height: 68px;
    }

    body.illustration-page-body nav.sticky-nav {
        padding: 8px 14px !important;
    }

    body.illustration-page-body nav.sticky-nav #logoNav {
        width: 112px !important;
    }

    body.illustration-page-body .mobile-menu-toggle {
        width: 43px;
        height: 43px;
        border-radius: 13px;
    }

    body.illustration-page-body .sub-header {
        min-height: 560px !important;
        padding: calc(var(--illustration-nav-height) + 42px) 0 52px !important;
    }

    body.illustration-page-body .contact-header-text.illustration-header-text {
        width: calc(100% - 28px) !important;
        padding: 26px 22px !important;
        border-radius: 23px;
    }

    body.illustration-page-body .contact-header-text.illustration-header-text::before {
        top: 28px;
        height: 84px;
    }

    body.illustration-page-body .illustration-header-text h1 {
        font-size: clamp(2.5rem, 11.7vw, 3.48rem) !important;
        letter-spacing: -0.055em !important;
    }

    body.illustration-page-body .illustration-header-text p {
        font-size: 0.94rem !important;
        line-height: 1.7 !important;
    }

    body.illustration-page-body .nav-links {
        width: min(90vw, 390px) !important;
    }
}

@media (max-width: 380px) {
    body.illustration-page-body .nav-links {
        width: 94vw !important;
    }
}

/* ---------------------------------------------------------------------
   CONTENU — GRILLES STABLES SUR TABLETTES, LAPTOPS ET ÉCRANS EXTERNES
   --------------------------------------------------------------------- */
body.illustration-page-body .illustration-page {
    min-width: 0;
    padding: clamp(72px, 7vw, 108px) clamp(24px, 6vw, 96px) !important;
}

body.illustration-page-body .illustration-intro,
body.illustration-page-body .portfolio-filter-section,
body.illustration-page-body .illustration-gallery,
body.illustration-page-body .illustration-process,
body.illustration-page-body .illustration-cta {
    width: min(100%, 1400px);
}

body.illustration-page-body .illustration-intro,
body.illustration-page-body .portfolio-filter-section,
body.illustration-page-body .illustration-gallery,
body.illustration-page-body .illustration-process,
body.illustration-page-body .illustration-cta,
body.illustration-page-body .lightbox-info,
body.illustration-page-body .footer-block {
    min-width: 0;
}

body.illustration-page-body .intro-left p,
body.illustration-page-body .process-card p,
body.illustration-page-body .illustration-cta p,
body.illustration-page-body .lightbox-info p {
    overflow-wrap: anywhere;
}

@media (min-width: 1500px) {
    body.illustration-page-body .illustration-gallery {
        grid-auto-rows: 310px;
        gap: 24px;
    }
}

@media (max-width: 1120px) {
    body.illustration-page-body .illustration-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    body.illustration-page-body .intro-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.illustration-page-body .portfolio-filter-section {
        align-items: flex-start;
        flex-direction: column;
    }

    body.illustration-page-body .portfolio-filters {
        justify-content: flex-start;
    }

    body.illustration-page-body .illustration-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(240px, 31vw, 330px);
    }

    body.illustration-page-body .art-card.featured,
    body.illustration-page-body .art-card.wide,
    body.illustration-page-body .art-card.tall {
        grid-column: span 1;
        grid-row: span 1;
    }

    body.illustration-page-body .illustration-process {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    body.illustration-page-body .process-card {
        padding: 24px;
    }
}

@media (max-width: 820px) {
    body.illustration-page-body .illustration-page {
        padding: 62px 20px !important;
    }

    body.illustration-page-body .intro-stats,
    body.illustration-page-body .illustration-process {
        grid-template-columns: minmax(0, 1fr);
    }

    body.illustration-page-body .stat-box {
        min-height: 112px;
    }

    body.illustration-page-body .illustration-gallery {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: clamp(300px, 75vw, 450px);
        gap: 18px;
    }

    body.illustration-page-body .art-overlay {
        padding: 20px;
        transform: none;
    }

    body.illustration-page-body .art-card:hover {
        transform: none;
    }

    body.illustration-page-body .art-card:hover img {
        transform: scale(1.05);
    }

    body.illustration-page-body .view-art-btn {
        opacity: 1;
        transform: none;
    }

    body.illustration-page-body .illustration-cta {
        padding: 30px 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    body.illustration-page-body .illustration-cta-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    body.illustration-page-body .illustration-page {
        padding: 52px 14px !important;
    }

    body.illustration-page-body .portfolio-filter-section {
        padding: 18px;
        border-radius: 20px;
    }

    body.illustration-page-body .portfolio-filters {
        width: 100%;
        gap: 8px;
    }

    body.illustration-page-body .filter-btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        padding-inline: 12px;
    }

    body.illustration-page-body .illustration-gallery {
        grid-auto-rows: clamp(270px, 92vw, 390px);
    }

    body.illustration-page-body .art-overlay h3 {
        font-size: 1.18rem;
    }

    body.illustration-page-body .process-card {
        padding: 24px 20px;
    }
}

/* ---------------------------------------------------------------------
   LIGHTBOX — fermeture toujours visible, même sur petits écrans
   --------------------------------------------------------------------- */
body.illustration-page-body .art-card:focus-visible {
    outline: 3px solid #00f5ff;
    outline-offset: 4px;
}

body.illustration-page-body .art-lightbox {
    z-index: 1000010 !important;
    padding: clamp(12px, 3vw, 30px);
}

body.illustration-page-body .art-lightbox-content {
    width: min(1160px, calc(100vw - 32px));
    max-height: min(88vh, calc(100dvh - 28px));
}

body.illustration-page-body .art-lightbox-close {
    top: 16px;
    right: 16px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(4, 9, 15, 0.82);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

body.illustration-page-body .art-lightbox-close:focus-visible {
    outline: 3px solid #00f5ff;
    outline-offset: 3px;
}

@media (max-width: 820px) {
    body.illustration-page-body .art-lightbox-content {
        grid-template-columns: minmax(0, 1fr);
        overflow-y: auto;
    }

    body.illustration-page-body .lightbox-image {
        min-height: 0;
        height: min(42dvh, 350px);
    }

    body.illustration-page-body .lightbox-image img {
        object-fit: contain;
    }

    body.illustration-page-body .lightbox-info {
        overflow: visible;
        padding: 26px 22px 30px;
    }
}

/* Footer : évite toute largeur forcée sur les petits écrans. */
@media (max-width: 700px) {
    body.illustration-page-body .main-footer {
        padding-inline: 14px;
    }

    body.illustration-page-body .footer-container,
    body.illustration-page-body .footer-block {
        min-width: 0;
    }

    body.illustration-page-body .footer-block {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.illustration-page-body *,
    body.illustration-page-body *::before,
    body.illustration-page-body *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================================
   PORTFOLIO ILLUSTRATIONS — HOTFIX V3
   - un seul conteneur de défilement pour Chrome / Firefox
   - navigation dans la pile principale, toujours au-dessus des sections
   - statistiques visibles dès le début de la galerie, y compris mobile
   - panneau burger réellement défilable quand les sous-menus sont longs
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) UN SEUL SCROLL VERTICAL
   Les styles historiques donnent une hauteur + overflow à html ET body.
   Chrome peut alors afficher une gouttière supplémentaire. Ici html est le
   seul scroller ; body laisse le contenu remonter vers la racine.
   --------------------------------------------------------------------- */
html {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    scrollbar-gutter: auto !important;
}

body.illustration-page-body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    scrollbar-gutter: auto !important;
}

html.site-menu-locked,
html.site-lightbox-locked {
    overflow: hidden !important;
}

/* La largeur de la barre est toujours mesurée par SmallResolution.js.
   La barre fixe s'arrête donc juste avant la scrollbar réelle, sans créer
   une seconde gouttière sur Chrome. */
body.illustration-page-body nav.sticky-nav {
    right: var(--site-scrollbar-width, 0px) !important;
    z-index: 2147483000 !important;
    isolation: isolate;
}

/* ---------------------------------------------------------------------
   2) HIERARCHIE DES CALQUES
   L'ancien isolation:isolate du hero enfermait le nav dans le calque du
   header. Les sections suivantes pouvaient alors le recouvrir. On le retire
   et l'on garde le décor du hero sous son texte.
   --------------------------------------------------------------------- */
body.illustration-page-body .sub-header {
    isolation: auto !important;
    z-index: auto !important;
}

body.illustration-page-body .sub-header::before {
    z-index: 0 !important;
}

body.illustration-page-body .contact-header-text.illustration-header-text {
    z-index: 1 !important;
}

body.illustration-page-body .illustration-page,
body.illustration-page-body .main-footer {
    position: relative;
    z-index: 1 !important;
}

/* La modale reste volontairement la seule couche qui peut passer au-dessus
   de la navigation : elle doit pouvoir afficher son bouton Fermer. */
body.illustration-page-body .art-lightbox {
    z-index: 2147483500 !important;
}

/* ---------------------------------------------------------------------
   3) HERO + INTRO : les 3 statistiques apparaissent dès l'arrivée dans la
   page. On réduit le vide vertical, sans réduire la lisibilité du header.
   --------------------------------------------------------------------- */
body.illustration-page-body .sub-header {
    min-height: clamp(520px, 62svh, 680px) !important;
    padding-top: calc(var(--illustration-nav-height) + clamp(38px, 5vh, 62px)) !important;
    padding-bottom: clamp(42px, 5vh, 64px) !important;
}

body.illustration-page-body .illustration-page {
    padding-top: clamp(46px, 4vw, 68px) !important;
}

body.illustration-page-body .illustration-intro {
    margin-bottom: clamp(42px, 4vw, 58px) !important;
    align-items: start !important;
}

body.illustration-page-body .intro-stats {
    align-self: start;
}

@media (min-width: 821px) {
    body.illustration-page-body .intro-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.illustration-page-body .stat-box {
        min-height: 124px;
        padding: 20px;
    }
}

/* Sur téléphone et tablette étroite, les chiffres viennent avant le long
   titre introductif. Ils restent en une rangée compacte et sont visibles
   immédiatement au début de la galerie. */
@media (max-width: 820px) {
    body.illustration-page-body .sub-header {
        min-height: 0 !important;
        padding-top: calc(var(--illustration-nav-height) + 34px) !important;
        padding-bottom: 40px !important;
    }

    body.illustration-page-body .illustration-page {
        padding-top: 34px !important;
    }

    body.illustration-page-body .illustration-intro {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    body.illustration-page-body .intro-stats {
        order: -1;
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.illustration-page-body .stat-box {
        min-height: 106px !important;
        padding: 14px 10px !important;
        border-radius: 17px !important;
    }

    body.illustration-page-body .stat-box strong {
        margin-bottom: 7px !important;
        font-size: clamp(1.55rem, 7.5vw, 2.18rem) !important;
        line-height: 1 !important;
    }

    body.illustration-page-body .stat-box span {
        display: block;
        color: #ffffff !important;
        font-size: clamp(0.62rem, 2.55vw, 0.76rem) !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 420px) {
    body.illustration-page-body .intro-stats {
        gap: 6px !important;
    }

    body.illustration-page-body .stat-box {
        min-height: 98px !important;
        padding: 13px 8px !important;
    }

    body.illustration-page-body .stat-box strong {
        font-size: 1.45rem !important;
    }

    body.illustration-page-body .stat-box span {
        font-size: 0.62rem !important;
    }
}

/* ---------------------------------------------------------------------
   4) BURGER : le panneau est son propre scroller, même avec les deux
   sous-menus développés. Le bouton Fermer reste accessible en haut.
   --------------------------------------------------------------------- */
@media (max-width: 1120px) {
    body.illustration-page-body .site-menu-backdrop {
        z-index: 2147482998 !important;
    }

    body.illustration-page-body .nav-links {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 100svh !important;
        z-index: 2147483001 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        scroll-padding-top: 18px;
        scroll-padding-bottom: 92px;
        padding-bottom: max(92px, calc(44px + env(safe-area-inset-bottom))) !important;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 245, 255, 0.76) rgba(4, 9, 15, 0.78);
    }

    body.illustration-page-body .nav-links::-webkit-scrollbar {
        width: 10px;
    }

    body.illustration-page-body .nav-links::-webkit-scrollbar-track {
        background: rgba(4, 9, 15, 0.78);
    }

    body.illustration-page-body .nav-links::-webkit-scrollbar-thumb {
        min-height: 48px;
        border: 2px solid rgba(4, 9, 15, 0.78);
        border-radius: 999px;
        background: rgba(0, 245, 255, 0.72);
    }

    body.illustration-page-body .nav-links > ul {
        padding-bottom: 54px !important;
    }

    body.illustration-page-body .mobile-menu-close {
        z-index: 6 !important;
    }

    body.illustration-page-body .nav-links .dropdown-content,
    body.illustration-page-body .nav-links .services-dropdown-content,
    body.illustration-page-body .nav-links .portfolio-dropdown-content {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* =====================================================================
   PORTFOLIO ILLUSTRATIONS — HOTFIX V4
   1. Les statistiques restent entièrement visibles au premier écran des
      laptops 13 / 14 / 16 pouces, même avec une hauteur réduite.
   2. Le panneau burger est déplacé au niveau du document sur mobile par
      SmallResolution.js : aucune section ne peut donc passer au-dessus.
   3. La tête du panneau et son bouton Fermer restent accessibles pendant
      le défilement des sous-menus.
   ===================================================================== */

/* Toute section de la page reste sous la pile de navigation. */
body.illustration-page-body .sub-header,
body.illustration-page-body .illustration-page,
body.illustration-page-body .main-footer {
    position: relative !important;
    z-index: 0 !important;
}

body.illustration-page-body nav.sticky-nav {
    z-index: 2147483000 !important;
}

/* ---------------------------------------------------------------------
   LAYOUT LAPTOP / ÉCRANS EXTERNES
   Les cartes 25+ / 04 / 100% remontent juste après le hero afin que leur
   hauteur complète soit visible sans devoir descendre la page.
   --------------------------------------------------------------------- */
@media (min-width: 821px) {
    body.illustration-page-body .illustration-page {
        padding-top: clamp(16px, 1.7vw, 28px) !important;
    }

    body.illustration-page-body .illustration-intro {
        margin-top: 0 !important;
        margin-bottom: clamp(34px, 3vw, 52px) !important;
    }

    body.illustration-page-body .intro-stats {
        align-self: start !important;
    }

    body.illustration-page-body .stat-box {
        min-height: 118px !important;
        padding: 18px !important;
    }
}

/* 13/14 pouces et laptops de faible hauteur : hero compact sans toucher
   à la structure, afin de rendre le bloc de statistiques totalement visible. */
@media (min-width: 1121px) and (max-height: 980px) {
    body.illustration-page-body .sub-header {
        min-height: 520px !important;
        padding-top: calc(var(--illustration-nav-height) + clamp(26px, 3.6vh, 40px)) !important;
        padding-bottom: clamp(28px, 3.8vh, 42px) !important;
    }

    body.illustration-page-body .contact-header-text.illustration-header-text {
        padding: clamp(24px, 2.5vw, 34px) clamp(28px, 3.3vw, 44px) !important;
    }

    body.illustration-page-body .illustration-header-text .page-kicker {
        margin-bottom: 16px !important;
        padding: 9px 19px !important;
    }

    body.illustration-page-body .illustration-header-text h1 {
        margin-bottom: 16px !important;
        font-size: clamp(3.05rem, 4.7vw, 4.9rem) !important;
        line-height: 0.96 !important;
    }

    body.illustration-page-body .illustration-header-text p {
        font-size: clamp(0.92rem, 1.08vw, 1.03rem) !important;
        line-height: 1.58 !important;
    }

    body.illustration-page-body .illustration-page {
        padding-top: 14px !important;
    }

    body.illustration-page-body .stat-box {
        min-height: 112px !important;
        padding: 16px !important;
    }
}

/* Hauteurs très réduites : on préserve les cartes sans faire déborder le hero. */
@media (min-width: 1121px) and (max-height: 800px) {
    body.illustration-page-body .sub-header {
        min-height: 486px !important;
        padding-top: calc(var(--illustration-nav-height) + 22px) !important;
        padding-bottom: 24px !important;
    }

    body.illustration-page-body .contact-header-text.illustration-header-text {
        padding: 22px 30px !important;
    }

    body.illustration-page-body .illustration-header-text h1 {
        font-size: clamp(2.7rem, 4.45vw, 4.25rem) !important;
    }

    body.illustration-page-body .illustration-header-text p {
        font-size: 0.92rem !important;
        line-height: 1.5 !important;
    }
}

/* ---------------------------------------------------------------------
   PANNEAU BURGER AU-DESSUS DE TOUT
   Le panneau est un enfant direct de <body> sur mobile. Il ne dépend plus
   du contexte d'empilement du hero ni de celui de la navbar fixe.
   --------------------------------------------------------------------- */
@media (max-width: 1120px) {
    body.illustration-page-body .site-menu-backdrop {
        z-index: 2147483600 !important;
    }

    body.illustration-page-body > .nav-links,
    body.illustration-page-body .nav-links {
        position: fixed !important;
        inset: 0 0 0 auto !important;
        z-index: 2147483646 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: min(88vw, 390px) !important;
        max-width: 390px !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        background: linear-gradient(180deg, rgba(10, 16, 27, 0.998), rgba(5, 8, 16, 0.998)) !important;
        border-left: 1px solid rgba(0, 245, 255, 0.25) !important;
        box-shadow: -18px 0 56px rgba(0, 0, 0, 0.62) !important;
        transform: translate3d(104%, 0, 0) !important;
        transition: none !important;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 245, 255, 0.78) rgba(4, 9, 15, 0.86);
    }

    body.illustration-page-body > .nav-links.menu-motion-ready,
    body.illustration-page-body .nav-links.menu-motion-ready {
        transition: transform 0.32s cubic-bezier(.2, .8, .2, 1) !important;
    }

    body.illustration-page-body > .nav-links.menu-open,
    body.illustration-page-body .nav-links.menu-open {
        transform: translate3d(0, 0, 0) !important;
    }

    body.illustration-page-body > .nav-links::-webkit-scrollbar,
    body.illustration-page-body .nav-links::-webkit-scrollbar {
        width: 9px;
    }

    body.illustration-page-body > .nav-links::-webkit-scrollbar-track,
    body.illustration-page-body .nav-links::-webkit-scrollbar-track {
        background: rgba(4, 9, 15, 0.86);
    }

    body.illustration-page-body > .nav-links::-webkit-scrollbar-thumb,
    body.illustration-page-body .nav-links::-webkit-scrollbar-thumb {
        min-height: 48px;
        border: 2px solid rgba(4, 9, 15, 0.86);
        border-radius: 999px;
        background: rgba(0, 245, 255, 0.76);
    }

    /* En-tête du panneau : le bouton Fermer ne recouvre plus ACCUEIL. */
    body.illustration-page-body > .nav-links .mobile-menu-close,
    body.illustration-page-body .nav-links .mobile-menu-close {
        position: sticky !important;
        top: 14px !important;
        right: auto !important;
        left: auto !important;
        z-index: 20 !important;
        display: grid !important;
        place-items: center !important;
        align-self: flex-end !important;
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 46px !important;
        margin: 14px 14px 12px 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 14px !important;
        color: #ffffff !important;
        background: rgba(21, 28, 40, 0.96) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38) !important;
    }

    body.illustration-page-body > .nav-links > ul,
    body.illustration-page-body .nav-links > ul {
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 20px calc(88px + env(safe-area-inset-bottom)) !important;
    }

    body.illustration-page-body > .nav-links > ul > li:first-child,
    body.illustration-page-body .nav-links > ul > li:first-child {
        margin-top: 0 !important;
    }

    /* Le bouton hamburger reste au-dessus de toutes les sections avant ouverture. */
    body.illustration-page-body nav.sticky-nav .mobile-menu-toggle {
        position: relative !important;
        z-index: 2147483002 !important;
    }
}

@media (max-width: 700px) {
    body.illustration-page-body > .nav-links,
    body.illustration-page-body .nav-links {
        width: min(92vw, 390px) !important;
    }

    body.illustration-page-body > .nav-links > ul,
    body.illustration-page-body .nav-links > ul {
        padding-inline: 16px !important;
    }
}

@media (max-width: 380px) {
    body.illustration-page-body > .nav-links,
    body.illustration-page-body .nav-links {
        width: 94vw !important;
    }
}

/* =====================================================================
   CORRECTION UNIQUE — NAVBAR FIXE PENDANT LE SCROLL
   Ce bloc ne touche ni au hero, ni aux cartes, ni aux images, ni aux popups.
   Les règles précédentes étaient ciblées sur body.illustration-page-body,
   alors que la page actuelle utilise simplement <body>.
   ===================================================================== */
html body > .sub-header > nav.sticky-nav,
html body nav.sticky-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    z-index: 2147483647 !important;
    transform: none !important;
}


/* =====================================================================
   FIX UNIQUE — NAVIGATION FIXE PENDANT LE DÉFILEMENT
   Le nav est maintenant un enfant direct de <body> dans Port_Illustration.html.
   Cette règle est limitée à cette page et ne modifie ni les cartes, ni les
   images, ni les popups, ni le menu burger.
   ===================================================================== */
body.illustration-page-body > nav.sticky-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    z-index: 2147483647 !important;
}

/* =====================================================================
   CORRECTION CIBLÉE — POPUP ILLUSTRATION ENTIÈREMENT VISIBLE
   - La popup commence sous la navbar fixe.
   - Sa hauteur est limitée à la zone réellement visible du navigateur.
   - L'image entière est affichée sans rognage (object-fit: contain).
   - Aucun changement de structure HTML, des cartes ou du menu.
   ===================================================================== */

body.illustration-page-body .art-lightbox {
    /* La navbar reste fixe au-dessus ; la popup ne passe plus dessous. */
    inset: var(--illustration-nav-height, 78px) 0 0 0 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px clamp(12px, 2vw, 28px) 22px !important;
}

body.illustration-page-body .art-lightbox.active {
    display: flex !important;
}

body.illustration-page-body .art-lightbox-content {
    width: min(1120px, 100%) !important;
    height: min(760px, calc(100dvh - var(--illustration-nav-height, 78px) - 38px)) !important;
    max-height: min(760px, calc(100dvh - var(--illustration-nav-height, 78px) - 38px)) !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr) !important;
    overflow: hidden !important;
}

body.illustration-page-body .lightbox-image {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background: #05070b !important;
}

body.illustration-page-body .lightbox-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

body.illustration-page-body .lightbox-info {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

@media (max-width: 820px) {
    body.illustration-page-body .art-lightbox {
        padding: 12px !important;
    }

    body.illustration-page-body .art-lightbox-content {
        width: 100% !important;
        height: calc(100dvh - var(--illustration-nav-height, 68px) - 24px) !important;
        max-height: calc(100dvh - var(--illustration-nav-height, 68px) - 24px) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(210px, 43dvh) minmax(0, 1fr) !important;
    }

    body.illustration-page-body .lightbox-image {
        height: auto !important;
    }

    body.illustration-page-body .lightbox-info {
        height: auto !important;
        padding: 24px 20px 30px !important;
    }
}

/* =====================================================================
   AJUSTEMENT POPUP — IMAGE À L'ÉCHELLE NATURELLE
   Cette règle annule tout remplissage forcé de la zone image.
   L'image garde son ratio, n'est ni zoomée ni rognée.
   ===================================================================== */
body.illustration-page-body .art-lightbox .lightbox-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #05070b !important;
}

body.illustration-page-body .art-lightbox .lightbox-image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

/* =====================================================================
   CORRECTION CIBLÉE — PANNEAU BURGER AU-DESSUS DE LA NAVBAR
   Le panneau mobile est déplacé au niveau de <body> par SmallResolution.js
   au premier clic. Cette règle laisse la navbar sous le panneau seulement
   pendant son ouverture : le bouton Fermer reste donc toujours visible.
   ===================================================================== */
@media (max-width: 1120px) {
    body.illustration-page-body.menu-is-open > nav.sticky-nav {
        z-index: 2147483000 !important;
    }

    body.illustration-page-body > .nav-links {
        z-index: 2147483647 !important;
    }

    body.illustration-page-body > .nav-links .mobile-menu-close {
        z-index: 2147483647 !important;
    }
}