@font-face {
    font-family: 'QualyBold';
    src: url('../Font/QualyBold.ttf?v=20260810') format('truetype');
}

@font-face {
    font-family: 'CarvingSoft';
    src: url('../Font/CarvingSoft-Regular.otf?v=20260810') format('opentype');
}

:root {
    --ink: #110d1c;
    --surface: rgba(22, 16, 37, .84);
    --violet: #b58aff;
    --lilac: #ded0ff;
    --line: rgba(194, 158, 255, .68);
}

* { box-sizing: border-box; }

body, button, input, select, textarea { min-width: 0; }

html { min-height: 100%; background: var(--ink); }

img, video, iframe { max-width: 100%; }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: #fff;
    background: radial-gradient(circle at 50% 10%, #30204b 0, #171023 45%, #0f0b18 100%);
    font-family: 'CarvingSoft', system-ui, sans-serif;
}

button, a { font: inherit; }

.aurora {
    position: fixed;
    z-index: -1;
    width: 38vw;
    aspect-ratio: 1;
    filter: blur(70px);
    opacity: .22;
    pointer-events: none;
}

.aurora-one { top: -16vw; left: -8vw; background: #954bff; }
.aurora-two { right: -10vw; bottom: -18vw; background: #5377ff; }

.app-shell {
    position: relative;
    z-index: 1;
    width: min(1440px, 100%);
    min-height: 100vh;
    margin: auto;
    padding: clamp(1rem, 3vw, 3rem);
}

.site-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(2rem, 4vw, 5rem) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(82px, 1fr));
    gap: .85rem .5rem;
    min-height: clamp(185px, 29vh, 290px);
}

.site-navigation { display: contents; }

.nav-card {
    position: relative;
    display: flex;
    align-items: center;
    padding: 1rem clamp(1rem, 3vw, 3.6rem);
    border: 0;
    background: linear-gradient(125deg, rgba(25, 17, 43, .96), rgba(68, 41, 98, .74));
    box-shadow: inset 0 0 24px rgba(194, 158, 255, .12), 0 12px 30px rgba(0, 0, 0, .2), 0 0 22px rgba(131, 69, 214, .16);
    color: #fff;
    font-family: 'QualyBold', sans-serif;
    font-size: clamp(1rem, 1.7vw, 1.65rem);
    letter-spacing: .045em;
    isolation: isolate;
    overflow: hidden;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.nav-card::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-position: center;
    background-size: cover;
    content: '';
    opacity: .035;
    transition: opacity .25s ease, transform .35s ease;
}

.nav-card > span { position: relative; z-index: 1; }

body.is-panel .nav-about::before { background-image: url('../Image/Panel_Apropos.png'); }
body.is-panel .nav-commissions::before { background-image: url('../Image/Panel_Commission.jpg'); }
body.is-panel .nav-gallery::before { background-image: url('../Image/Panel_Realisation.jpg'); }
body.is-panel .nav-contact::before { background-image: url('../Image/Panel_Contact.jpg'); }

.nav-card:hover::before,
.nav-card:focus-visible::before { opacity: .25; transform: scale(1.03); }

.nav-card::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    border: 1px solid var(--line);
    border-radius: inherit;
    content: '';
    pointer-events: none;
}

.nav-about { grid-area: 1 / 1; border-radius: 3rem 1rem 1rem; }
.nav-commissions { grid-area: 1 / 3; justify-content: flex-end; border-radius: 1rem 3rem 1rem; }
.nav-gallery { grid-area: 2 / 1; border-radius: 1rem 1rem 1rem 3rem; }
.nav-contact { grid-area: 2 / 3; justify-content: flex-end; border-radius: 1rem 1rem 3rem 1rem; }

.nav-card:hover,
.nav-card:focus-visible,
.nav-card.is-active {
    border-color: var(--lilac);
    background: linear-gradient(125deg, rgba(102, 57, 160, .72), rgba(73, 43, 113, .6));
    outline: none;
}

.nav-card:hover::after,
.nav-card:focus-visible::after,
.nav-card.is-active::after { border-color: var(--lilac); }

.nav-card:hover,
.nav-card:focus-visible { transform: translateY(-2px); }

.menu-toggle { display: none; }

.fursona {
    position: absolute;
    z-index: 2;
    top: 53%;
    left: 50%;
    display: block;
    width: clamp(11rem, 21vw, 20rem);
    aspect-ratio: 1392 / 1466;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.fursona-art { position: relative; z-index: 3; display: block; width: 100%; height: auto; }
.fursona-tail {
    position: absolute;
    z-index: 1;
    right: -30%;
    bottom: -13%;
    display: block;
    width: 92%;
    height: auto;
    max-width: none;
    pointer-events: none;
    transform: rotate(-87deg);
    transform-origin: 50% 58%;
}
.fursona:focus-visible { outline: 2px solid var(--lilac); outline-offset: 5px; border-radius: 50%; }

.fursona::before {
    display: none;
    position: absolute;
    z-index: 0;
    top: 52%;
    left: 50%;
    width: 65%;
    aspect-ratio: 1;
    border: 4px solid var(--line);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(181, 138, 255, .16);
    content: '';
    transform: translate(-50%, -50%);
}

.fursona::after {
    position: absolute;
    z-index: 0;
    top: 52%;
    left: 50%;
    width: 67%;
    aspect-ratio: 1;
    border: 2px solid rgba(222, 208, 255, .48);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    box-shadow: -10px -8px 24px rgba(181, 138, 255, .16);
    content: '';
    transform: translate(-50%, -50%) rotate(-18deg);
    animation: frost-orbit 12s linear infinite;
}

@keyframes frost-orbit { to { transform: translate(-50%, -50%) rotate(342deg); } }

.fursona-eyes {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.fursona-eyes > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.fursona-eye-fond { z-index: 0; transform: translateY(-1.15%); }
.fursona-eye { z-index: 1; transform: translate(var(--eye-x, 0), calc(var(--eye-y, 0) - 1.15%)); transition: transform .13s ease-out; }
.fursona-pupil { z-index: 2; transform: translate(var(--pupil-x, 0), calc(var(--pupil-y, 0) - 1.15%)); transition: transform .13s ease-out; }

/* Sans souris, les yeux restent naturellement centrés sur le personnage. */
@media (hover: none), (pointer: coarse) {
    .fursona-eye { transform: translate(0, -1.15%); }
    .fursona-pupil { transform: translate(0, -1.15%); }
}

.language-toggle {
    position: fixed;
    z-index: 20;
    top: clamp(.65rem, 2vw, 1.5rem);
    right: clamp(.65rem, 2vw, 1.5rem);
    padding: .35rem .58rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(22, 16, 37, .8);
    color: #fff;
    cursor: pointer;
    font: .72rem/1 'QualyBold', sans-serif;
}

.language-toggle:hover,
.language-toggle:focus-visible { background: var(--violet); color: var(--ink); outline: none; }

.content-box {
    position: relative;
    min-height: 42vh;
    margin-top: clamp(2rem, 5vw, 5rem);
    padding: clamp(1.5rem, 5vw, 5rem);
    border: 1px solid rgba(194, 158, 255, .32);
    border-radius: 2rem;
    background: var(--surface);
    box-shadow: 0 25px 65px rgba(0, 0, 0, .24);
}

body.is-intro .app-shell {
    display: grid;
    min-height: 100svh;
    place-items: center;
}

body.is-intro .site-header { display: none; }

body.is-intro .content-box {
    width: min(100%, 960px);
    min-height: min(74vh, 680px);
    margin-top: 0;
    display: grid;
    align-items: center;
    box-shadow: inset 0 0 58px rgba(181, 138, 255, .2), inset 0 0 18px rgba(222, 208, 255, .12), 0 25px 65px rgba(0, 0, 0, .24);
}

body.is-panel .app-shell {
    width: min(1720px, 100%);
    min-height: 100svh;
    padding: clamp(.35rem, 1vw, 1rem);
    height: 100svh;
    overflow: hidden;
}

body.is-panel { height: 100svh; overflow: hidden; }

body.is-intro::before,
body.is-panel::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    background-image: linear-gradient(rgba(19, 12, 33, .72), rgba(19, 12, 33, .86)), url('../Image/IceMountain.png');
    background-position: center;
    background-size: cover;
    background-blend-mode: soft-light;
    content: '';
    opacity: .08;
    pointer-events: none;
}

body.is-intro::before { opacity: .2; }

/* Couche de neige entre le décor de montagne et les panneaux. */
body.is-panel::after {
    position: fixed;
    z-index: 0;
    inset: 0;
    background-image: radial-gradient(circle, rgba(239, 250, 255, .8) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(194, 218, 255, .62) 0 1.4px, transparent 2px), radial-gradient(circle, rgba(255, 255, 255, .48) 0 .8px, transparent 1.4px), radial-gradient(circle, rgba(223, 238, 255, .55) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(255, 255, 255, .35) 0 .7px, transparent 1.3px);
    background-position: 0 -110px, 45px -190px, 100px -65px, 20px -280px, 80px -145px;
    background-size: 170px 230px, 250px 310px, 115px 180px, 205px 270px, 92px 140px;
    content: '';
    opacity: .34;
    pointer-events: none;
    animation: snowfall 17s linear infinite;
}

@keyframes snowfall {
    to { background-position: 34px 350px, 0 430px, 72px 290px, 50px 390px, 116px 260px; }
}

body.is-panel .site-header {
    min-height: calc(100svh - clamp(2rem, 6vw, 6rem));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

body.is-panel .content-box { display: none; }

body.is-panel .fursona { top: auto; bottom: -23vh; left: 47%; width: clamp(25rem, 44vw, 52rem); transform: translateX(-50%); }
body.is-panel .fursona::after { left: 53%; }


body.is-panel .nav-card {
    justify-content: center;
    font-size: clamp(1.9rem, 3.3vw, 3.7rem);
    text-align: center;
}
body.is-panel .nav-home { display: none; }

body.is-panel-entering .nav-card { opacity: 0; transform: translateY(90px); animation: panel-arrival .62s cubic-bezier(.2, .8, .2, 1) forwards; }
body.is-panel-entering .nav-about { animation-delay: .05s; }
body.is-panel-entering .nav-commissions { animation-delay: .2s; }
body.is-panel-entering .nav-gallery { animation-delay: .35s; }
body.is-panel-entering .nav-contact { animation-delay: .5s; }
body.is-panel-entering .fursona { opacity: 0; transform: translate(-50%, 100px) scale(.94); animation: fursona-arrival .8s cubic-bezier(.2, .85, .2, 1) .78s forwards; }

@keyframes panel-arrival { to { opacity: 1; transform: translateY(0); } }
@keyframes fursona-arrival { to { opacity: 1; transform: translateX(-50%) scale(1); } }

/* Les angles tournés vers le fursona sont découpés : la bordure s'arrête avant lui. */
body.is-panel .nav-about::after {
    -webkit-mask-image: radial-gradient(ellipse clamp(12rem, 17vw, 21rem) clamp(18rem, 44vh, 34rem) at 100% 122%, transparent 0 67%, #000 68%);
    mask-image: radial-gradient(ellipse clamp(12rem, 17vw, 21rem) clamp(18rem, 44vh, 34rem) at 100% 122%, transparent 0 67%, #000 68%);
}

body.is-panel .nav-commissions::after {
    -webkit-mask-image: radial-gradient(ellipse clamp(12rem, 17vw, 21rem) clamp(18rem, 44vh, 34rem) at 0 122%, transparent 0 67%, #000 68%);
    mask-image: radial-gradient(ellipse clamp(12rem, 17vw, 21rem) clamp(18rem, 44vh, 34rem) at 0 122%, transparent 0 67%, #000 68%);
}

body.is-panel .nav-gallery::after {
    -webkit-mask-image: radial-gradient(ellipse clamp(12rem, 17vw, 21rem) clamp(12rem, 30vh, 22rem) at 100% 20%, transparent 0 67%, #000 68%);
    mask-image: radial-gradient(ellipse clamp(12rem, 17vw, 21rem) clamp(12rem, 30vh, 22rem) at 100% 20%, transparent 0 67%, #000 68%);
}

body.is-panel .nav-contact::after {
    -webkit-mask-image: radial-gradient(ellipse clamp(12rem, 17vw, 21rem) clamp(12rem, 30vh, 22rem) at 0 20%, transparent 0 67%, #000 68%);
    mask-image: radial-gradient(ellipse clamp(12rem, 17vw, 21rem) clamp(12rem, 30vh, 22rem) at 0 20%, transparent 0 67%, #000 68%);
}

/* Écran d'accueil : les quatre cadres restent complets autour du fursona. */
body.is-panel .nav-card::after {
    -webkit-mask-image: none;
    mask-image: none;
    box-shadow: inset 0 0 18px rgba(222, 208, 255, .2), inset 0 0 42px rgba(181, 138, 255, .12);
}

body.is-panel .nav-card {
    box-shadow: inset 0 0 56px rgba(181, 138, 255, .19), inset 0 0 16px rgba(222, 208, 255, .12), 0 12px 30px rgba(0, 0, 0, .2);
}

.content-box::before,
.content-box::after {
    position: absolute;
    width: clamp(2.8rem, 8vw, 6rem);
    height: clamp(2.8rem, 8vw, 6rem);
    content: '';
    pointer-events: none;
}

.content-box::before { top: -1px; left: -1px; border-top: 2px solid var(--violet); border-left: 2px solid var(--violet); border-radius: 2rem 0 0; }
.content-box::after { right: -1px; bottom: -1px; border-right: 2px solid var(--violet); border-bottom: 2px solid var(--violet); border-radius: 0 0 2rem; }

.content-box.is-changing { opacity: .3; transform: translateY(6px); }
.content-box { transition: opacity .16s ease, transform .16s ease; }

.view { max-width: 1050px; margin: auto; animation: reveal .35s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.eyebrow { margin: 0 0 .6rem; color: var(--violet); font-family: 'QualyBold', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.view h1 { max-width: 15ch; margin: 0; font-family: 'QualyBold', sans-serif; font-size: clamp(2.2rem, 6vw, 5.5rem); line-height: .96; }
.lead { max-width: 60ch; margin: 1.5rem 0 0; color: #eee9fa; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.65; }

.view-intro { text-align: center; }
.view-intro .eyebrow { position: relative; top: -1.1rem; }
.view-intro h1 { max-width: 12ch; margin-inline: auto; }
.view-intro .lead { margin-inline: auto; text-wrap: balance; }

.tutorial-arrow {
    display: grid;
    width: 3.65rem;
    aspect-ratio: 1;
    margin: clamp(2rem, 5vh, 4rem) auto 0;
    place-items: center;
    border: 1px solid var(--violet);
    border-radius: 50%;
    color: var(--lilac);
    font: 2rem/1 system-ui, sans-serif;
    text-decoration: none;
    animation: arrow-pulse 1.8s ease-in-out infinite;
}

.tutorial-arrow:hover,
.tutorial-arrow:focus-visible { background: var(--violet); color: var(--ink); outline: none; }

@keyframes arrow-pulse { 50% { transform: translateY(7px); box-shadow: 0 0 24px rgba(181, 138, 255, .5); } }

.home-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(15rem, .75fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }

.home-note {
    position: relative;
    padding: 1.5rem;
    border: 1px solid rgba(194, 158, 255, .46);
    border-radius: 1.5rem .75rem 1.5rem .75rem;
    background: linear-gradient(145deg, rgba(189, 145, 255, .13), rgba(34, 22, 57, .22));
}

.home-note::before { position: absolute; top: .7rem; right: .7rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--violet); box-shadow: 0 0 15px var(--violet); content: ''; }
.note-label { margin: 0 0 1rem; color: var(--lilac); font-family: 'QualyBold', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.home-note ul { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.home-note li { position: relative; padding-left: 1.25rem; line-height: 1.35; }
.home-note li::before { position: absolute; margin-left: -1.2rem; color: var(--violet); content: '✦'; }

.about-illustrations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(2rem, 5vw, 4rem); }
.about-illustrations div { min-height: 10rem; display: grid; place-items: center; border: 1px dashed rgba(194, 158, 255, .52); border-radius: 1.1rem; background: linear-gradient(145deg, rgba(172, 114, 255, .15), rgba(24, 16, 42, .2)); color: var(--lilac); font-family: 'QualyBold', sans-serif; }

.about-view { max-width: 1120px; }
.about-hero { max-width: 48rem; margin-bottom: clamp(3rem, 7vw, 6rem); }
.about-hero h1 { max-width: 19ch; text-wrap: balance; }
.about-hero .lead { max-width: 39rem; }
.about-chapter {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(15rem, .75fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    margin-top: clamp(3rem, 8vw, 7rem);
}
.about-chapter--huskagon { grid-template-columns: minmax(15rem, .75fr) minmax(0, 1.25fr); }
.about-copy h2,
.about-showreel h2,
.about-featured-work h2 { max-width: 24ch; margin: 0 0 1.2rem; color: var(--lilac); font-family: 'QualyBold', sans-serif; font-size: clamp(1.65rem, 3.5vw, 3rem); line-height: 1.03; text-wrap: balance; }
.about-copy p:not(.chapter-tag),
.about-showreel-copy > p:last-child,
.about-featured-copy > p:last-child { margin: 0 0 1rem; color: #eee9fa; font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.75; text-wrap: pretty; }
.chapter-tag { margin: 0 0 .85rem; color: var(--violet); font-family: 'QualyBold', sans-serif; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.about-portrait,
.about-mountains { position: relative; margin: 0; }
.about-portrait img,
.about-mountains img { display: block; width: 100%; object-fit: cover; border: 1px solid rgba(194, 158, 255, .7); box-shadow: inset 0 0 30px rgba(222, 208, 255, .12), 0 20px 40px rgba(0, 0, 0, .27); }
.about-portrait img,
.about-mountains img { aspect-ratio: 1; border-radius: 50%; object-position: center; }
.about-portrait figcaption,
.about-mountains figcaption { margin-top: .75rem; color: rgba(238, 233, 250, .82); font-size: .82rem; font-style: italic; line-height: 1.4; text-align: center; white-space: nowrap; }
.artist-credit-title { display: block; }
.artist-credit a { display: block; margin-top: .15rem; color: var(--lilac); font-size: .72rem; font-style: italic; text-underline-offset: .18em; }
.artist-credit a:hover, .artist-credit a:focus-visible { color: #fff; outline: none; }
.about-showreel { display: grid; grid-template-columns: minmax(13rem, .65fr) minmax(0, 1.35fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: clamp(4rem, 9vw, 8rem); padding-top: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid rgba(194, 158, 255, .28); }
.showreel-frame { padding: .55rem; border: 1px solid rgba(194, 158, 255, .56); border-radius: 1.4rem; background: linear-gradient(145deg, rgba(181, 138, 255, .14), rgba(16, 10, 29, .55)); box-shadow: inset 0 0 28px rgba(181, 138, 255, .13), 0 18px 42px rgba(0, 0, 0, .24); }
.showreel-frame video { display: block; width: 100%; border-radius: .95rem; background: #0b0711; }
.about-featured-work { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(13rem, .65fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: clamp(4rem, 9vw, 8rem); padding-top: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid rgba(194, 158, 255, .28); }
.about-featured-copy { order: 2; }
.featured-video-frame { position: relative; order: 1; aspect-ratio: 16 / 9; padding: .55rem; border: 1px solid rgba(194, 158, 255, .56); border-radius: 1.4rem; background: linear-gradient(145deg, rgba(181, 138, 255, .18), rgba(16, 10, 29, .62)); box-shadow: inset 0 0 28px rgba(181, 138, 255, .13), 0 18px 42px rgba(0, 0, 0, .24); }
.featured-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: .95rem; }

.action-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button { display: inline-block; padding: .8rem 1.15rem; border: 1px solid var(--violet); border-radius: 999px; color: #fff; font-family: 'QualyBold', sans-serif; text-decoration: none; }
.button:hover, .button:focus-visible { background: var(--violet); color: var(--ink); outline: none; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.card { padding: 1.3rem; border: 1px solid rgba(194, 158, 255, .3); border-radius: 1.25rem; background: rgba(255, 255, 255, .035); }
.card h2 { margin: 0 0 .65rem; color: var(--lilac); font-family: 'QualyBold', sans-serif; font-size: 1.25rem; }
.card p { margin: 0; line-height: 1.55; }

.gallery-card { min-height: 180px; display: flex; align-items: flex-end; padding: 1.2rem; border: 1px solid rgba(194, 158, 255, .38); border-radius: 1.25rem; background: linear-gradient(145deg, rgba(172, 114, 255, .22), rgba(24, 16, 42, .3)); color: var(--lilac); font-family: 'QualyBold', sans-serif; }

/* Pages internes : navigation verticale compacte et contenu sans cadre principal imposant. */
body:not(.is-intro):not(.is-panel) .app-shell {
    display: block;
}

body:not(.is-intro):not(.is-panel) .site-header {
    position: sticky;
    top: clamp(1rem, 3vw, 3rem);
    display: block;
    min-height: 0;
    z-index: 5;
}

body:not(.is-intro):not(.is-panel) .site-navigation {
    display: flex;
    flex-direction: row;
    gap: .7rem;
    padding-right: 4.25rem;
}

body:not(.is-intro):not(.is-panel) .nav-card {
    flex: 1;
    min-height: 3.6rem;
    justify-content: center;
    padding: .8rem 1rem;
    border-radius: 1rem;
    font-size: clamp(.9rem, 1.2vw, 1.1rem);
    text-align: center;
}

body:not(.is-intro):not(.is-panel) .nav-home { margin-top: 0; color: var(--lilac); }
body:not(.is-intro):not(.is-panel) .fursona { display: none; }
body:not(.is-intro):not(.is-panel) .content-box { min-height: calc(100vh - 10rem); margin-top: 1.25rem; }

body.menu-condensed:not(.is-intro):not(.is-panel) .site-header {
    position: fixed;
    top: 1rem;
    left: 1rem;
    display: flex;
    align-items: center;
    width: 3rem;
    min-height: 3rem;
    gap: .4rem;
    transition: width .24s ease, padding .24s ease, background .24s ease;
}

body.menu-condensed:not(.is-intro):not(.is-panel) .menu-toggle {
    display: grid;
    width: 3rem;
    height: 3rem;
    padding: .75rem;
    place-content: center;
    gap: .28rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: rgba(22, 16, 37, .96);
    cursor: pointer;
}

body.menu-condensed:not(.is-intro):not(.is-panel) .menu-toggle span { display: block; width: 1.35rem; height: 1px; background: var(--lilac); }
body.menu-condensed:not(.is-intro):not(.is-panel) .site-navigation { display: none; }
body.menu-condensed:not(.is-intro):not(.is-panel) .site-header.is-expanded { width: calc(100vw - 2rem); padding: .35rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(22, 16, 37, .96); box-shadow: 0 16px 35px rgba(0, 0, 0, .28); }
body.menu-condensed:not(.is-intro):not(.is-panel) .site-header.is-expanded .menu-toggle { flex: 0 0 2.65rem; width: 2.65rem; height: 2.65rem; padding: .55rem; border-color: transparent; background: transparent; }
body.menu-condensed:not(.is-intro):not(.is-panel) .site-header.is-expanded .site-navigation { display: flex; flex: 1 1 auto; width: auto; min-width: 0; margin: 0; padding: 0; gap: .4rem; overflow-x: auto; flex-direction: row; background: transparent; scrollbar-width: thin; }
body.menu-condensed:not(.is-intro):not(.is-panel) .site-header.is-expanded .nav-card { min-height: 2.65rem; flex: 1 0 auto; }

.reveal-on-scroll { opacity: 0; transform: translateY(18px); transition: opacity .55s ease var(--reveal-delay, 0ms), transform .55s ease var(--reveal-delay, 0ms); }
.reveal-on-scroll.is-visible { opacity: 1; transform: none; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.section-heading h1 { margin: 0; }

.commissions-view { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; gap: 1.5rem; max-width: 1200px; }
.commissions-main { min-width: 0; }
.commission-index { position: sticky; top: 6rem; display: grid; gap: .35rem; padding: .8rem; border: 1px solid rgba(194,158,255,.3); border-radius: 1rem; background: rgba(14,9,24,.88); backdrop-filter: blur(12px); }
.commission-index p { margin: 0 0 .25rem; color: rgba(255,255,255,.48); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.commission-index button { width: 100%; padding: .48rem .55rem; border: 0; border-radius: .55rem; color: rgba(255,255,255,.7); background: transparent; font-size: .73rem; text-align: left; cursor: pointer; transition: color .2s ease, background .2s ease; }
.commission-index button:hover, .commission-index button:focus-visible { color: #fff; background: rgba(181,138,255,.18); outline: none; }
.commission-type, .custom-commission-card { scroll-margin-top: 6.5rem; }

.commission-list { display: grid; gap: 1.5rem; margin-top: 2.2rem; }
.commission-type { display: grid; grid-template-columns: minmax(13rem, .72fr) minmax(0, 1.28fr); gap: 1.5rem; padding: 1.3rem; overflow: hidden; border: 1px solid rgba(194, 158, 255, .34); border-radius: 1.4rem; background: linear-gradient(135deg, rgba(194, 158, 255, .08), rgba(255, 255, 255, .025)); }
.commission-copy { align-self: center; padding: .35rem; }
.commission-type h2 { margin: .45rem 0 .75rem; color: var(--lilac); font-family: 'QualyBold', sans-serif; font-size: clamp(1.45rem, 2.6vw, 2.15rem); }
.commission-type p { margin: 0; line-height: 1.55; }
.commission-title-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.commission-title-row .commission-number { color: rgba(255,255,255,.58); font-size: .76rem; font-weight: 800; letter-spacing: .14em; }
.commission-title-row .commission-price { flex: 0 0 auto; padding: .36rem .7rem; border: 1px solid rgba(194, 158, 255, .55); border-radius: 999px; color: #fff; background: rgba(194, 158, 255, .14); font-family: 'QualyBold', sans-serif; font-size: 1rem; line-height: 1; }
.commission-details { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.commission-details li { padding: .34rem .58rem; border: 1px solid rgba(194, 158, 255, .25); border-radius: 999px; color: rgba(255,255,255,.72); background: rgba(8,5,15,.28); font-size: .72rem; }
.commission-showcase { display: grid; gap: 1rem; min-width: 0; }
.commission-announcement { width: 100%; min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(222, 208, 255, .25); border-radius: 1rem; background: transparent; }
.commission-announcement img { display: block; width: 100%; height: auto; }
.commission-type--portrait .commission-showcase { grid-template-columns: minmax(12rem, .82fr) minmax(0, 1.18fr); align-items: start; }
.commission-type--vertical .commission-showcase { grid-template-columns: minmax(10rem, .65fr) minmax(0, 1.35fr); align-items: start; }
.commission-type--portrait .commission-announcement, .commission-type--vertical .commission-announcement { width: 100%; margin-inline: 0; }
.commission-type--portrait .carousel, .commission-type--vertical .carousel { min-width: 0; }
.commission-type.is-reversed { grid-template-columns: minmax(0, 1.25fr) minmax(13rem, .75fr); }
.commission-type.is-reversed > :first-child { order: 2; }
.commission-type.is-reversed > .commission-showcase { order: 1; }

.carousel { position: relative; min-width: 0; }
.carousel-label { margin: 0 0 .45rem; color: rgba(255,255,255,.58); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.carousel-track { display: grid; grid-auto-columns: minmax(11rem, 76%); grid-auto-flow: column; align-items: start; gap: .75rem; overflow-x: auto; padding: 0 .1rem .5rem; scroll-snap-type: x mandatory; scrollbar-color: var(--violet) transparent; }
.carousel-track--single { grid-auto-columns: 100%; }
.carousel-slide { display: block; margin: 0; overflow: hidden; border: 1px solid rgba(222, 208, 255, .3); border-radius: 1rem; background: transparent; color: var(--lilac); text-align: center; scroll-snap-align: start; }
.carousel-slide img, .carousel-slide video { display: block; width: 100%; height: auto; object-fit: initial; }
.commission-type--portrait .carousel-track { grid-auto-columns: minmax(9rem, 68%); }
.commission-type--vertical .carousel-track { grid-auto-columns: minmax(8rem, 55%); }
.commission-type--landscape .carousel-track { grid-auto-columns: minmax(18rem, 72%); }
.carousel-slide.demo-one { background: linear-gradient(135deg, #4e2e78, #23153b 62%, #7798e8); }
.carousel-slide.demo-two { background: linear-gradient(135deg, #1c294f, #8050a6 55%, #d9b5ff); }
.carousel-slide.demo-three { background: linear-gradient(135deg, #24405a, #323572 54%, #a98bf0); }
.carousel-slide.demo-four { background: linear-gradient(135deg, #633768, #2a1d49 58%, #8fb9dd); }
.carousel-controls { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .35rem; }
.carousel-controls button { width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.carousel-controls button:hover, .carousel-controls button:focus-visible { background: var(--violet); color: var(--ink); outline: none; }
.commission-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2rem; padding: 1.5rem; border: 1px solid rgba(194, 158, 255, .4); border-radius: 1.4rem; background: linear-gradient(120deg, rgba(103,62,151,.28), rgba(29,21,48,.3)); }
.commission-cta h2 { margin: .35rem 0 0; color: #fff; font-family: 'QualyBold', sans-serif; }
.commission-cta .button { flex: 0 0 auto; }
.commission-cta-actions, .contact-form-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .65rem; }
.legal-button { display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: .52rem .75rem; border: 1px solid rgba(194,158,255,.38); border-radius: .7rem; color: var(--lilac); background: rgba(194,158,255,.06); font-size: .72rem; text-align: center; text-decoration: none; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.legal-button:hover, .legal-button:focus-visible { border-color: var(--violet); color: #fff; background: rgba(194,158,255,.14); outline: none; }
.custom-commissions { display: grid; gap: 1.5rem; margin-top: 4rem; }
.custom-commissions-heading { max-width: 48rem; }
.custom-commissions-heading h2 { margin: .35rem 0 .7rem; color: var(--lilac); font-family: 'QualyBold', sans-serif; font-size: clamp(1.8rem, 4vw, 3rem); }
.custom-commissions-heading > p:last-child { margin: 0; color: rgba(255,255,255,.72); line-height: 1.55; }
.custom-commission-card { display: grid; gap: 1.35rem; padding: 1.4rem; border: 1px solid rgba(194, 158, 255, .34); border-radius: 1.4rem; background: linear-gradient(135deg, rgba(194, 158, 255, .08), rgba(255, 255, 255, .025)); }
.custom-commission-copy { max-width: 52rem; }
.custom-commission-copy h3 { margin: .45rem 0 .7rem; color: var(--lilac); font-family: 'QualyBold', sans-serif; font-size: clamp(1.6rem, 3vw, 2.35rem); }
.custom-commission-copy > p { margin: 0; line-height: 1.55; }
.custom-commission-copy .portfolio-note { margin-top: .9rem; padding: .75rem .9rem; border-left: 3px solid var(--violet); color: rgba(255,255,255,.72); background: rgba(194,158,255,.07); font-size: .88rem; }
.custom-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.custom-media-grid figure, .emote-gallery figure { display: grid; place-items: center; min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(222,208,255,.28); border-radius: 1rem; background: rgba(8,5,15,.45); }
.custom-media-grid img, .custom-media-grid video { display: block; width: 100%; height: auto; }
.emote-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.emote-gallery figure { aspect-ratio: 1; padding: clamp(.55rem, 2vw, 1.2rem); }
.emote-gallery img { display: block; width: 100%; height: 100%; object-fit: contain; }

.gallery-filters { display: flex; flex-wrap: wrap; gap: .55rem; margin: 2rem 0 1.4rem; }
.gallery-filters button { padding: .55rem 1rem; border: 1px solid rgba(194, 158, 255, .38); border-radius: 999px; background: transparent; color: #fff; font: inherit; cursor: pointer; transition: .2s ease; }
.gallery-filters button:hover, .gallery-filters button:focus-visible, .gallery-filters button.is-active { border-color: var(--violet); background: var(--violet); color: var(--ink); outline: none; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1rem; align-items: start; }
.gallery-work { grid-column: span 2; min-width: 0; margin: 0; }
.gallery-work--wide { grid-column: span 2; }
.gallery-work--vertical, .gallery-work--portrait, .gallery-work--square { grid-column: span 1; }
.gallery-work[hidden] { display: none; }
.protected-art { position: relative; height: clamp(14rem, 24vw, 18rem); overflow: hidden; border: 1px solid rgba(194, 158, 255, .3); border-radius: 1rem; background: #0d0915; user-select: none; -webkit-user-select: none; cursor: zoom-in; transition: border-color .2s ease, transform .2s ease; }
.protected-art:hover, .protected-art:focus-visible { border-color: var(--violet); transform: translateY(-2px); outline: none; }
.protected-art::after { content: ''; position: absolute; inset: 0; z-index: 2; background-image: repeating-linear-gradient(-28deg, transparent 0 5.5rem, rgba(255,255,255,.055) 5.6rem 5.7rem, transparent 5.8rem 11rem); pointer-events: none; }
.protected-art img, .protected-art video { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.art-watermark { position: absolute; right: .65rem; bottom: .55rem; z-index: 3; padding: .28rem .5rem; border-radius: .35rem; color: rgba(255,255,255,.82); background: rgba(8,5,15,.55); font-size: .68rem; letter-spacing: .06em; pointer-events: none; }
.gallery-work figcaption { padding: .65rem .25rem 0; color: var(--lilac); font-family: 'QualyBold', sans-serif; }
.gallery-copyright { margin: 2rem 0 0; color: rgba(255,255,255,.55); font-size: .78rem; line-height: 1.5; text-align: center; }
.gallery-lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 1rem; border: 0; background: transparent; color: #fff; box-sizing: border-box; }
.gallery-lightbox::backdrop { background: rgba(5, 3, 10, .9); backdrop-filter: blur(8px); }
.gallery-lightbox-panel { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; width: min(92vw, 90rem); height: min(90vh, 56rem); margin: auto; padding: 1rem; border: 1px solid rgba(194, 158, 255, .38); border-radius: 1.25rem; background: #0d0915; box-shadow: 0 2rem 6rem rgba(0,0,0,.6); box-sizing: border-box; }
.gallery-lightbox-media { display: grid; place-items: center; min-height: 0; overflow: hidden; border-radius: .8rem; background: #050308; }
.gallery-lightbox-media img, .gallery-lightbox-media video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.gallery-video-player { display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: 100%; min-height: 0; }
.gallery-lightbox-media .gallery-video-player video { width: 100%; height: 100%; min-height: 0; }
.gallery-video-timeline-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 3.2rem; align-items: center; gap: .7rem; padding: .7rem .85rem; color: rgba(255,255,255,.75); background: #0d0915; font: .75rem sans-serif; text-align: center; }
.gallery-video-timeline { width: 100%; min-width: 0; accent-color: var(--violet); cursor: pointer; }
.gallery-lightbox-title { margin: .8rem 2.8rem 0 .2rem; color: var(--lilac); font-family: 'QualyBold', sans-serif; }
.gallery-lightbox-close { position: absolute; top: .35rem; right: .35rem; z-index: 4; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(8,5,15,.8); color: #fff; font: 1.5rem/1 sans-serif; cursor: pointer; }
.gallery-lightbox-close:hover, .gallery-lightbox-close:focus-visible { background: var(--violet); color: var(--ink); outline: none; }

.contact-layout { display: grid; grid-template-columns: minmax(14rem, .72fr) minmax(0, 1.28fr); gap: 2rem; }
.contact-card, .commission-form { padding: 1.4rem; border: 1px solid rgba(194, 158, 255, .35); border-radius: 1.4rem; background: rgba(255, 255, 255, .035); }
.contact-card h2 { margin-top: 0; color: var(--lilac); font-family: 'QualyBold', sans-serif; }
.contact-card p { line-height: 1.55; }
.direct-contacts { display: grid; gap: .7rem; margin-top: 1.25rem; }
.direct-contact { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .85rem; border: 1px solid rgba(194, 158, 255, .35); border-radius: .8rem; background: rgba(12, 8, 23, .55); color: #fff; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.direct-contact:hover, .direct-contact:focus-visible { border-color: var(--violet); transform: translateY(-2px); outline: none; }
.direct-contact strong, .direct-contact small { display: block; }
.direct-contact small { margin-top: .2rem; color: var(--lilac); }
.direct-contact-action { color: var(--lilac); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.commission-form { display: grid; gap: .9rem; }
.commission-form label { display: grid; gap: .35rem; }
.contact-preference-fields { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .9rem; }
.commission-form .ych-choice[hidden] { display: none; }
.commission-form input, .commission-form select, .commission-form textarea { width: 100%; padding: .7rem; border: 1px solid rgba(194, 158, 255, .45); border-radius: .65rem; background: rgba(12, 8, 23, .65); color: #fff; font: inherit; }
.commission-form textarea { min-height: 8rem; resize: vertical; }
.commission-form .button { width: fit-content; background: transparent; cursor: pointer; }
.field-help { color: rgba(255, 255, 255, .62); font-size: .78rem; line-height: 1.4; }
.file-picker { position: relative; display: grid; place-items: center; min-height: 5.5rem; padding: 1rem; border: 1px dashed rgba(194, 158, 255, .65); border-radius: .75rem; background: rgba(194, 158, 255, .06); text-align: center; transition: border-color .2s ease, background .2s ease; }
.file-picker:hover, .file-picker:focus-within { border-color: var(--violet); background: rgba(194, 158, 255, .12); }
.file-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-picker-text { color: var(--lilac); font-family: 'QualyBold', sans-serif; pointer-events: none; }
.selected-files { display: grid; gap: .4rem; margin-top: .25rem; padding: .7rem; border-radius: .65rem; background: rgba(12, 8, 23, .45); }
.selected-files-summary { color: var(--lilac); font-weight: 700; }
.selected-file { display: grid; grid-template-columns: minmax(0, 1fr) auto 1.6rem; align-items: center; gap: .7rem; min-width: 0; padding: .2rem .25rem .2rem .45rem; border-radius: .4rem; color: rgba(255, 255, 255, .8); font-size: .8rem; transition: background .2s ease; }
.selected-file:hover, .selected-file:focus-within { background: rgba(194, 158, 255, .1); }
.selected-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-file-size { flex: 0 0 auto; color: rgba(255, 255, 255, .55); }
.remove-selected-file { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .55); font: 1rem/1 sans-serif; cursor: pointer; opacity: 0; transition: opacity .2s ease, color .2s ease, background .2s ease; }
.selected-file:hover .remove-selected-file, .remove-selected-file:focus-visible { opacity: 1; }
.remove-selected-file:hover, .remove-selected-file:focus-visible { color: #fff; background: rgba(255, 90, 110, .35); outline: none; }
@media (hover: none) { .remove-selected-file { opacity: 1; } }
.contact-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-feedback { padding: .8rem 1rem; border: 1px solid rgba(194, 158, 255, .45); border-radius: .7rem; background: rgba(194, 158, 255, .1); line-height: 1.45; }
.form-feedback.is-error { border-color: rgba(255, 112, 112, .55); background: rgba(255, 80, 80, .1); }

.legal-view { max-width: 940px; }
.legal-hero { max-width: 790px; }
.legal-version { margin: 1rem 0 0; color: rgba(255,255,255,.5); font-size: .78rem; }
.legal-draft-note { margin: 2rem 0; padding: 1rem 1.1rem; border: 1px solid rgba(255,194,99,.48); border-radius: 1rem; background: rgba(255,174,62,.08); }
.legal-draft-note strong { color: #ffd49a; font-family: 'QualyBold', sans-serif; }
.legal-draft-note p { margin: .45rem 0 0; color: rgba(255,255,255,.76); font-size: .86rem; line-height: 1.5; }
.commission-terms-summary { margin-bottom: 1.25rem; padding: 1.2rem; border: 1px solid rgba(194,158,255,.38); border-radius: 1.2rem; background: linear-gradient(135deg, rgba(181,138,255,.12), rgba(255,255,255,.025)); }
.commission-terms-summary > h2 { margin: 0 0 1rem; color: var(--lilac); font-family: 'QualyBold', sans-serif; font-size: 1.35rem; }
.terms-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.terms-summary-grid article { padding: .8rem; border-radius: .8rem; background: rgba(8,5,15,.28); }
.terms-summary-grid strong { color: #fff; font-family: 'QualyBold', sans-serif; font-size: .88rem; }
.terms-summary-grid p { margin: .35rem 0 0; color: rgba(255,255,255,.68); font-size: .77rem; line-height: 1.45; }
.legal-sections { display: grid; gap: .85rem; }
.legal-sections article { padding: 1.15rem; border: 1px solid rgba(194,158,255,.25); border-radius: 1rem; background: rgba(255,255,255,.025); }
.legal-sections h2 { margin: 0 0 .55rem; color: var(--lilac); font-family: 'QualyBold', sans-serif; font-size: 1.05rem; }
.legal-sections p { margin: 0; color: rgba(255,255,255,.78); font-size: .9rem; line-height: 1.65; }
.legal-footer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.legal-back-link { color: var(--lilac); font-size: .82rem; text-underline-offset: .2em; }


.contact-link { color: var(--lilac); }
.lang-en { display: none; }
html[lang="en"] .lang-fr { display: none; }
html[lang="en"] .lang-en { display: inline; }

/* Tablettes : les panneaux conservent leur composition, mais libèrent davantage de place au centre. */
@media (max-width: 1100px) and (min-width: 721px) {
    .commissions-view { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; }
    .site-header { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); }
    body.is-panel .app-shell { width: 100%; padding: .75rem; }
    body.is-panel .site-header { min-height: calc(100svh - 1.5rem); }
    body.is-panel .fursona { bottom: -16vh; width: clamp(20rem, 42vw, 31rem); }
    body.is-panel .nav-card { padding: .75rem .8rem; font-size: clamp(1.2rem, 2.55vw, 1.95rem); }
    body:not(.is-intro):not(.is-panel) .site-navigation { gap: .45rem; padding-right: 3.6rem; }
    body:not(.is-intro):not(.is-panel) .nav-card { min-height: 3.35rem; padding: .65rem .45rem; font-size: clamp(.7rem, 1.35vw, .9rem); }
    body:not(.is-intro):not(.is-panel) .content-box { padding: clamp(1.5rem, 4vw, 3rem); }
    .commission-type { grid-template-columns: minmax(11rem, .7fr) minmax(0, 1.3fr); }
    .commission-type.is-reversed { grid-template-columns: minmax(0, 1.2fr) minmax(11rem, .8fr); }
    .commission-type--portrait .commission-showcase { grid-template-columns: minmax(10rem, .75fr) minmax(0, 1.25fr); }
    .commission-type--vertical .commission-showcase { grid-template-columns: minmax(8.5rem, .58fr) minmax(0, 1.42fr); }
    .about-chapter { gap: 2.5rem; }
    .about-showreel, .about-featured-work { gap: 2rem; }
    .contact-layout { gap: 1.25rem; }
}

@media (max-width: 720px) {
    .commissions-view { display: block; }
    .commission-index { top: calc(max(.65rem, env(safe-area-inset-top)) + 3.45rem); z-index: 8; display: flex; gap: .35rem; margin-bottom: 1.25rem; padding: .45rem; overflow-x: auto; border-radius: .8rem; scrollbar-width: thin; overscroll-behavior-inline: contain; }
    .commission-index p { display: none; }
    .commission-index button { flex: 0 0 auto; width: auto; min-height: 2.35rem; padding: .5rem .7rem; white-space: nowrap; text-align: center; }
    .commission-type, .custom-commission-card { scroll-margin-top: 8rem; }
    .app-shell { width: 100%; padding: .75rem; }
    .site-header { grid-template-columns: minmax(0, 1fr) clamp(4.8rem, 21vw, 6rem) minmax(0, 1fr); min-height: 160px; gap: .45rem; }
    .nav-card { justify-content: center; padding: .5rem .25rem; font-size: clamp(.72rem, 2.8vw, .95rem); text-align: center; }
    .nav-about { border-radius: 1.5rem .75rem .75rem; }
    .nav-commissions { border-radius: .75rem 1.5rem .75rem; }
    .nav-gallery { border-radius: .75rem .75rem .75rem 1.5rem; }
    .nav-contact { border-radius: .75rem .75rem 1.5rem .75rem; }
    .fursona { width: 7.25rem; }
    body.is-panel { height: 100svh; min-height: 100svh; overflow: hidden; }
    body.is-panel .app-shell { height: 100svh; min-height: 0; padding: .75rem .75rem 0; overflow: hidden; }
    body.is-panel .site-header { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: 100%; height: calc(100svh - .75rem); min-height: 0; padding: clamp(.8rem, 3svh, 1.5rem) 0 clamp(10rem, 24svh, 13rem); place-items: center stretch; overflow: hidden; }
    body.is-panel .site-navigation { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); align-self: center; justify-self: stretch; width: 100%; height: clamp(19rem, 54svh, 29rem); max-width: none; gap: .65rem; margin: 0; }
    body.is-panel .nav-card { grid-area: auto; width: 100%; min-height: 0; justify-content: center; padding: 1rem; border-radius: 1.1rem; font-size: clamp(1rem, 4.7vw, 1.35rem); line-height: 1.05; }
    body.is-panel .fursona { position: absolute; top: auto; bottom: -2.5rem; left: 50%; width: clamp(14.5rem, 62vw, 19rem); margin: 0; transform: translateX(-50%); }
    body.is-panel-entering .fursona { opacity: 1; transform: translateX(-50%); animation: none; }
    body.is-panel .fursona-eye { transform: translate(0, -1.15%); }
    body.is-panel .fursona-pupil { transform: translate(0, -1.15%); }
    body.is-panel .nav-card::after { -webkit-mask-image: none; mask-image: none; }
    body.is-intro .content-box { width: 100%; min-height: auto; padding-block: clamp(2.5rem, 10svh, 5rem); }
    .language-toggle { top: max(.45rem, env(safe-area-inset-top)); right: max(.45rem, env(safe-area-inset-right)); padding: .42rem .65rem; font-size: .68rem; }
    .content-box { min-height: 0; margin-top: 1rem; padding: clamp(1.25rem, 6vw, 2rem); border-radius: 1.25rem; }
    .content-box::before, .content-box::after { width: 3.5rem; height: 3.5rem; }
    .grid { grid-template-columns: 1fr; }
    .home-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    body:not(.is-intro):not(.is-panel) .app-shell { display: block; }
    /* Sur téléphone, le burger est présent dès le départ : aucun onglet ne déborde. */
    body:not(.is-intro):not(.is-panel) .site-header { position: sticky; top: max(.65rem, env(safe-area-inset-top)); display: flex; align-items: center; width: 2.8rem; min-height: 2.8rem; gap: .35rem; margin: 0 0 .85rem; padding: 0; z-index: 15; transition: width .24s ease, padding .24s ease, background .24s ease; }
    body:not(.is-intro):not(.is-panel) .menu-toggle { display: grid; width: 2.8rem; height: 2.8rem; padding: .7rem; place-content: center; gap: .28rem; border: 1px solid var(--line); border-radius: .85rem; background: rgba(22, 16, 37, .96); cursor: pointer; }
    body:not(.is-intro):not(.is-panel) .menu-toggle span { display: block; width: 1.3rem; height: 1px; background: var(--lilac); }
    body:not(.is-intro):not(.is-panel) .site-navigation { display: none; }
    body:not(.is-intro):not(.is-panel) .site-header.is-expanded { align-items: stretch; flex-direction: column; width: min(18rem, calc(100vw - 1.5rem)); padding: .35rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(22, 16, 37, .98); box-shadow: 0 16px 35px rgba(0, 0, 0, .28); }
    body:not(.is-intro):not(.is-panel) .site-header.is-expanded .menu-toggle { flex: 0 0 2.4rem; align-self: flex-start; width: 2.4rem; height: 2.4rem; padding: .5rem; border-color: transparent; background: transparent; }
    body:not(.is-intro):not(.is-panel) .site-header.is-expanded .site-navigation { display: flex; flex: 0 0 auto; flex-direction: column; width: 100%; min-width: 0; max-width: none; gap: .35rem; margin: 0; padding: 0; overflow: visible; background: transparent; }
    body:not(.is-intro):not(.is-panel) .nav-card { flex: 0 0 auto; width: 100%; min-height: 2.65rem; padding: .45rem .7rem; font-size: .7rem; white-space: nowrap; }
    body:not(.is-intro):not(.is-panel) .nav-home { margin-top: 0; }
    body:not(.is-intro):not(.is-panel) .content-box { min-height: 0; }
    .section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 1.5rem; }
    .commission-list { gap: 1rem; margin-top: 1.6rem; }
    .commission-type, .commission-type.is-reversed, .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem; border-radius: 1.1rem; }
    .commission-copy { padding: 0; }
    .commission-type h2 { margin-top: .35rem; font-size: clamp(1.35rem, 7vw, 1.85rem); line-height: 1.08; }
    .commission-title-row { gap: .55rem; }
    .commission-title-row .commission-number { font-size: .68rem; }
    .commission-title-row .commission-price { font-size: .88rem; white-space: nowrap; }
    .commission-details { gap: .35rem; margin-top: .85rem; }
    .commission-details li { font-size: .66rem; }
    .commission-type.is-reversed > :first-child, .commission-type.is-reversed > .commission-showcase { order: initial; }
    .carousel-track { grid-auto-columns: minmax(78%, 1fr); }
    .commission-type--portrait .carousel-track { grid-auto-columns: minmax(8rem, 68%); }
    .commission-type--vertical .carousel-track { grid-auto-columns: minmax(7.5rem, 58%); }
    .commission-type--landscape .commission-showcase { display: block; }
    .commission-type--landscape .commission-announcement { width: 100%; aspect-ratio: 16 / 9; }
    .commission-type--landscape .commission-announcement img { width: 100%; height: 100%; object-fit: contain; }
    .commission-type--landscape .carousel { margin-top: .85rem; }
    .commission-type--landscape .carousel-track { grid-auto-columns: 100%; gap: .55rem; }
    .commission-type--landscape .carousel-slide { width: 100%; aspect-ratio: 16 / 9; }
    .commission-type--landscape .carousel-slide img,
    .commission-type--landscape .carousel-slide video { width: 100%; height: 100%; object-fit: contain; }
    #ych-2 h2 { font-size: clamp(1.25rem, 6.2vw, 1.7rem); }
    .carousel-label { margin-top: .2rem; }
    .carousel-track { padding-bottom: .7rem; scroll-padding-inline: .1rem; }
    .carousel-controls { gap: .55rem; margin-top: .2rem; }
    .carousel-controls button { width: 2.55rem; height: 2.55rem; }
    .commission-cta { align-items: flex-start; flex-direction: column; }
    .custom-commissions { gap: 1rem; margin-top: 2.8rem; }
    .custom-commissions-heading h2 { font-size: clamp(1.65rem, 8vw, 2.2rem); }
    .custom-commission-card { gap: 1rem; padding: 1rem; border-radius: 1.1rem; }
    .custom-commission-copy h3 { font-size: clamp(1.45rem, 7vw, 1.9rem); }
    .custom-commission-copy .portfolio-note { padding: .65rem .75rem; font-size: .8rem; }
    .emote-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
    .emote-gallery figure { padding: .55rem; border-radius: .75rem; }
    .commission-cta { gap: 1rem; margin-top: 1.25rem; padding: 1.1rem; border-radius: 1.1rem; }
    .commission-cta .button { width: 100%; text-align: center; }
    .commission-cta-actions, .contact-form-actions { align-items: stretch; flex-direction: column; width: 100%; }
    .commission-cta-actions .button, .commission-cta-actions .legal-button, .contact-form-actions .button, .contact-form-actions .legal-button { width: 100%; }
    .terms-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .legal-sections article { padding: .9rem; }
    .legal-sections p { font-size: .84rem; }
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-work { grid-column: span 2; }
    .gallery-work--vertical, .gallery-work--portrait, .gallery-work--square { grid-column: span 1; width: 100%; }
    .commission-form, .contact-card { padding: 1rem; }
    .contact-preference-fields { grid-template-columns: 1fr; }
    .commission-form input, .commission-form select, .commission-form textarea { font-size: 16px; }
    .about-illustrations { grid-template-columns: 1fr; }
    .about-hero { margin-bottom: 3rem; }
    .about-chapter,
    .about-chapter--huskagon,
    .about-showreel,
    .about-featured-work { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 4rem; }
    .about-chapter--ice .about-portrait { order: -1; width: min(72%, 20rem); margin-left: auto; }
    .about-chapter--huskagon .about-mountains { width: min(78%, 22rem); }
    .about-portrait figcaption,
    .about-mountains figcaption { white-space: normal; }
    .about-showreel { padding-top: 3rem; }
    .about-featured-work { padding-top: 3rem; }
    .about-featured-copy { order: initial; }
    .featured-video-frame { order: initial; }
    body.menu-condensed:not(.is-intro):not(.is-panel) .site-header { position: fixed; top: max(.65rem, env(safe-area-inset-top)); left: .65rem; width: 2.8rem; }
    body.menu-condensed:not(.is-intro):not(.is-panel) .site-header.is-expanded { width: min(18rem, calc(100vw - 1.3rem)); }
    body.menu-condensed:not(.is-intro):not(.is-panel) .site-header.is-expanded .site-navigation { flex: 0 0 auto; flex-direction: column; width: 100%; overflow: visible; }
    body.menu-condensed:not(.is-intro):not(.is-panel) .site-header.is-expanded .nav-card { flex: 0 0 auto; width: 100%; }
}

@media (max-width: 460px) {
    .terms-summary-grid { grid-template-columns: 1fr; }
    .commission-type--portrait .commission-showcase, .commission-type--vertical .commission-showcase { grid-template-columns: 1fr; }
    .commission-type--portrait .commission-announcement { width: min(100%, 15rem); margin-inline: auto; }
    .commission-type--vertical .commission-announcement { width: min(100%, 12rem); margin-inline: auto; }
    .commission-type--portrait .carousel-track { grid-auto-columns: minmax(9rem, 54%); }
    .commission-type--vertical .carousel-track { grid-auto-columns: minmax(8rem, 48%); }
    .commission-type--landscape .carousel-track { grid-auto-columns: 100%; }
    .commission-title-row { align-items: flex-start; }
    .custom-media-grid { grid-template-columns: 1fr; }
    .emote-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-work, .gallery-work--vertical, .gallery-work--portrait, .gallery-work--square { grid-column: span 1; }
    .gallery-work--vertical, .gallery-work--portrait { width: min(100%, 22rem); justify-self: center; }
    .protected-art { height: auto; aspect-ratio: 16 / 9; }
    .gallery-work--vertical .protected-art { aspect-ratio: 9 / 20; }
    .gallery-work--portrait .protected-art { aspect-ratio: 3 / 4; }
    .gallery-work--square .protected-art { aspect-ratio: 1; }
}

@media (max-width: 360px) {
    .commission-index { margin-inline: -.25rem; }
    .commission-type { padding: .8rem; }
    .commission-type--portrait .commission-announcement { width: min(100%, 13rem); }
    .commission-type--vertical .commission-announcement { width: min(100%, 10.5rem); }
    .commission-type--portrait .carousel-track, .commission-type--vertical .carousel-track { grid-auto-columns: 68%; }
    .custom-commission-card { padding: .8rem; }
    .emote-gallery { gap: .4rem; }
}

/* Très petits écrans : on réduit seulement ce qui doit l'être, sans sacrifier la zone tactile. */
@media (max-width: 420px) {
    body.is-panel .site-header { padding-bottom: clamp(9.5rem, 23svh, 11.5rem); }
    body.is-panel .site-navigation { height: clamp(18rem, 52svh, 25rem); }
    body.is-panel .fursona { width: clamp(13.5rem, 64vw, 17rem); }
    body.is-panel .nav-card { min-height: 4.5rem; font-size: clamp(.9rem, 4.2vw, 1.05rem); }
    .view h1 { font-size: clamp(2rem, 11vw, 2.75rem); }
    .lead { font-size: 1rem; }
    .about-chapter--ice .about-portrait { width: min(82%, 18rem); }
    .about-chapter--huskagon .about-mountains { width: min(88%, 19rem); }
    .about-copy h2, .about-showreel h2, .about-featured-work h2 { font-size: clamp(1.55rem, 8vw, 2rem); }
    .tutorial-arrow { width: 3.2rem; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }