/*
 * FEUILLE DE STYLE PRINCIPALE
 *
 * RÉGLAGES RAPIDES :
 * - --section-bg : fond commun de À PROPOS, PARCOURS, PORTFOLIO et CONTACT.
 * - --accent : couleur des petits titres, liens secondaires et détails.
 * - --label-size : taille des surtitres et intitulés (16 à 20 px).
 * - --pad : marge horizontale globale ; la fonction clamp() l'adapte à l'écran.
 * - --ease : courbe d'accélération commune aux animations CSS.
 * - .manifesto-scene > height : longueur totale de la séquence pilotée par le scroll.
 *
 * Les durées précises des transitions horizontales sont dans assets/js/app.js.
 */

/* 01. Variables globales : couleurs, espacements, animation et typographies. */
:root {
    /* Palette générale. */
    --bg: #090909;
    --bg-soft: #11110f;
    --panel: #171714;
    --section-bg: #17212b;
    --text: #f1efe8;
    --muted: #9a9991;
    --line: rgba(241, 239, 232, .16);
    --accent: #91a6bb;
    /* Taille commune des surtitres et petits intitulés, sur toutes les pages. */
    --label-size: clamp(1rem, 1.1vw, 1.25rem);
    /* Fondu simultané des textes après le trajet du logo ou du titre. */
    --intro-text-duration: 1.1s;
    /* Ombre des grandes phrases : les valeurs en em suivent la taille du texte. */
    --headline-shadow:
        0 .025em .06em rgba(0, 0, 0, .55),
        0 .06em .16em rgba(0, 0, 0, .65);
    --cyan: #78e1e7;
    /* Marge latérale responsive : minimum, valeur fluide, maximum. */
    --pad: clamp(1.25rem, 4vw, 4.75rem);
    /* Courbe d'animation : modifier les deux points change la sensation de mouvement. */
    --ease: cubic-bezier(.22, 1, .36, 1);
    /* Familles typographiques principales. */
    --sans: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
}

/* 02. Base, normalisation et accessibilité. */
* { box-sizing: border-box; }

html {
    background: var(--bg);
    color-scheme: dark;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.45;
    overflow-x: hidden;
	-webkit-user-select: none;
    user-select: none;
}

/* Masquer la barre tout en conservant le défilement */
html,
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

body.menu-open,
body:has(dialog[open]) { overflow: hidden; }

::selection { background: var(--accent); color: #090909; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }

.skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 1000;
    padding: .75rem 1rem;
    background: var(--text);
    color: var(--bg);
    transition: top .2s;
}

.skip-link:focus { top: 1rem; }

/* Grain fixe très discret superposé au site ; opacity règle son intensité. */
.noise {
    position: fixed;
    inset: 0;
    z-index: 90;
    opacity: .012;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

/* 03. En-tête fixe, navigation et sélecteur de langue. */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    /* Hauteur du bandeau avant le défilement. */
    height: 5.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad);

    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: none;

    transition:
        background .35s,
        border-color .35s,
        height .35s,
        backdrop-filter .35s;
}

/* Variante compacte appliquée par JavaScript après 24 px de défilement. */
.site-header.is-scrolled {
    height: 4.5rem;
    background: rgba(9, 9, 9, .8);
    border-color: var(--line);
    backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: .8rem; font-weight: 800; letter-spacing: -.04em; }
.brand-mark {
    display: block;
    width: 10rem;
    height: 10rem;
    object-fit: contain;
	position: relative;
    top: 2rem;
	filter: brightness(0) invert(1);
	mix-blend-mode: difference;
	transition: width .35s, height .35s, top .35s;
}
.site-header.is-scrolled .brand-mark {
    width: 4rem;
    height: 4rem;
    top: 0;
}
.brand-copy { font-size: .85rem; letter-spacing: .12em; }
.brand-copy i { color: var(--accent); font-style: normal; }

.main-nav { display: flex; align-items: center; gap: clamp(1rem, 2.3vw, 2.6rem); }
.nav-label { display: none; }
.main-nav > .nav-link,
.nav-dropdown-trigger {
    position: relative;
    padding: .5rem 0;
	border: 0;
	background: transparent;
    color: #c7c5bd;
	font-family: var(--sans);
    font-size: var(--label-size);
    font-weight: 650;
    letter-spacing: .11em;
    text-transform: uppercase;
	cursor: pointer;
}
.main-nav > .nav-link span,
.nav-dropdown-trigger span { display: none; transition: color .35s; }
.main-nav > .nav-link::after,
.nav-dropdown-trigger::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--accent);
    transition: right .35s var(--ease);
}
.main-nav > .nav-link:hover::after,
.main-nav > .nav-link:focus-visible::after,
.main-nav > .nav-link.is-section-active::after,
.nav-dropdown-trigger:hover::after,
.nav-dropdown-trigger:focus-visible::after,
.nav-dropdown.is-current > .nav-dropdown-trigger::after { right: 0; }
.main-nav > .nav-link[aria-current="page"],
.main-nav > .nav-link.is-section-active,
.nav-dropdown.is-current > .nav-dropdown-trigger { color: var(--text); }

.nav-dropdown {
	position: relative;
	display: flex;
	align-items: center;
}

.nav-dropdown-trigger {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}

.nav-dropdown-trigger i {
	font-size: .85em;
	font-style: normal;
	transition: transform .25s ease;
}

.nav-dropdown-menu {
	position: absolute;
	top: 100%;
	right: 0;
	display: grid;
	min-width: 17rem;
	padding: .45rem;
	border: 1px solid var(--line);
	background: rgba(9, 9, 9, .96);
	box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-.45rem);
	pointer-events: none;
	transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.nav-dropdown:hover .nav-dropdown-trigger i,
.nav-dropdown.is-open .nav-dropdown-trigger i {
	transform: rotate(180deg);
}

.main-nav .nav-dropdown-menu a {
	display: block;
	padding: .75rem .85rem;
	color: #fff;
	font-size: .75rem;
	font-weight: 650;
	letter-spacing: .1em;
	line-height: 1.35;
	text-transform: uppercase;
	white-space: nowrap;
}

.main-nav .nav-dropdown-menu a::after {
	display: none;
}

.main-nav .nav-dropdown-menu a:hover,
.main-nav .nav-dropdown-menu a:focus-visible,
.main-nav .nav-dropdown-menu a[aria-current="page"] {
	background: rgba(154, 180, 204, .16);
	color: var(--text);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.language-switch {
    display: inline-flex;
    align-items: center;
    gap: .12rem;
    flex: 0 0 auto;
    padding: .18rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(9, 9, 9, .2);
    backdrop-filter: blur(10px);
}

.main-nav .language-switch .language-option {
    display: grid;
    width: 2rem;
    height: 1.55rem;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 999px;
    font-size: .92rem;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    opacity: .48;
    filter: grayscale(.72);
    transition:
        opacity .2s ease,
        filter .2s ease,
        background-color .2s ease,
        transform .2s ease;
}

.main-nav .language-switch .language-option::after {
    display: none;
}

.language-flag {
    display: block;
    width: 1.25rem;
    height: .82rem;
    overflow: hidden;
    border-radius: .12rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}

.main-nav .language-switch .language-option:hover,
.main-nav .language-switch .language-option:focus-visible,
.main-nav .language-switch .language-option.is-active {
    opacity: 1;
    filter: none;
}

.main-nav .language-switch .language-option:hover,
.main-nav .language-switch .language-option:focus-visible {
    transform: scale(1.08);
}

.main-nav .language-switch .language-option.is-active {
    background: rgba(154, 180, 204, .28);
}

.main-nav .language-switch .language-option.is-disabled {
    cursor: not-allowed;
    opacity: .25;
    filter: grayscale(1);
    transform: none;
}

.menu-toggle { display: none; border: 0; background: none; padding: .5rem 0; text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; }

/* 04. Composants réutilisables : marges, surtitres et liens. */
.section-pad { position: relative; padding: clamp(6rem, 11vw, 11rem) var(--pad); }
.eyebrow,
.section-index {
    margin: 0;
    color: var(--accent);
    font-size: var(--label-size);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 1.4rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--text);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.text-link span { color: var(--accent); transition: transform .25s; }
.text-link:hover span { transform: translate(.2rem, -.2rem); }

/* 05. Accueil plein écran : fond, pupilles, lumière et contenu. */
.hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background: #080909;
}

.hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Le scale(1.08) crée une marge invisible pour le petit parallaxe au curseur. */
.hero-layers {
    position: absolute;
    inset: 0;
    transform: translate3d(
        var(--hero-x, 0px),
        var(--hero-y, 0px),
        0
    ) scale(1.08);
    transition: transform 220ms ease-out;
    transform-origin: 50% 50%;
    will-change: transform;
}

.hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 52%;
    filter: none;
}

.hero-background {
    z-index: 0;
}

.hero-eye {
    z-index: 1;
    pointer-events: none;
    transform-origin:
        var(--eye-origin-x, 50%)
        var(--eye-origin-y, 50%);
    transform: translate3d(
        var(--eye-x, 0px),
        var(--eye-y, 0px),
        0
    )
        skew(
            var(--eye-skew-x, 0deg),
            var(--eye-skew-y, 0deg)
        )
        scale(
            var(--eye-scale-x, 1),
            var(--eye-scale-y, 1)
        );
    transition: transform 140ms ease-out;
    backface-visibility: hidden;
    will-change: transform;
}

/* Character Art : fond et iris partagent le même SVG et le même recadrage cover.
 * Les masques sont portés par les groupes fixes, pas par les images animées. */
.character-hero .character-eye-scene {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

/* Les centres et déplacements des iris SVG sont exprimés dans les pixels
 * du viewBox d'origine (3840 × 2088), avant la mise à l'échelle de l'ensemble. */
.character-hero .character-eye-scene .hero-eye {
    transform-box: view-box;
}

.hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 5, 5, .30) 0%, rgba(5, 5, 5, .04) 48%, rgba(5, 5, 5, .15) 100%),
        linear-gradient(0deg, rgba(5, 5, 5, .45) 0%, transparent 30%, rgba(5, 5, 5, .15) 100%);
}

.hero-lighting {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-sun-glow,
.hero-sun-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 62vmax;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate3d(
        var(--sun-x, 50vw),
        var(--sun-y, 35vh),
        0
    ) translate(-50%, -50%);
    transition: transform 180ms ease-out;
    will-change: transform;
}

.hero-sun-glow {
    background: radial-gradient(
        circle,
        rgba(255, 226, 170, .06) 0%,
        rgba(255, 205, 125, .025) 28%,
        rgba(255, 190, 105, 0) 68%
    );
    mix-blend-mode: screen;
}

.hero-sun-shadow {
    width: 72vmax;
    transform: translate3d(
        var(--shadow-x, 50vw),
        var(--shadow-y, 65vh),
        0
    ) translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(5, 12, 18, .045) 0%,
        rgba(5, 12, 18, .02) 34%,
        rgba(5, 12, 18, 0) 70%
    );
    mix-blend-mode: multiply;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
    .hero-lighting { display: none; }
}

.hero-grid {
    position: relative;
    z-index: 2;
    min-height: 100svh;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
    padding: 8.5rem var(--pad) 7rem;
}
.hero-kicker {
    grid-column: 1 / 6;
    margin: 0;
    align-self: start;
    color: #ffffff;
    font-size: var(--label-size);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    }
.hero-title {
    grid-column: 1 / 11;
    align-self: end;
    margin: 0 0 1.2rem;
    font-size: clamp(3.5rem, 8vw, 8rem);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.075em;
    text-transform: uppercase;
}
.hero-title span { display: block; }
.hero-title em { color: var(--accent); font-family: var(--serif); font-weight: 400; text-transform: none; }
.hero-intro {
    grid-column: 8 / 11;
    align-self: end;
    margin: 0 0 1.5rem;
    max-width: 23rem;
    color: #ffffff;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
	font-weight: 500;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}
.hero-footer {
    position: absolute;
    z-index: 3;
    inset: auto var(--pad) 1.5rem;
    display: flex;
    justify-content: space-between;
    font-size: var(--label-size);
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
	color: #ffffff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}
.hero-footer > span:last-child {
    position: relative;
    right: 1rem;
}

/* 06. Séquence horizontale pilotée par le défilement.
 * height détermine la distance totale disponible. Une valeur plus grande allonge
 * l'ensemble de la séquence ; ajuster de préférence les distances dans app.js.
 */
.manifesto-scene {
    position: relative;
    height: 867vh;
    background: var(--bg);
	overflow: clip;
}

.contact-scroll-target {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
/* Premier écran de la séquence : « Une silhouette... » reste sticky. */
.manifesto {
    position: sticky;
    z-index: 4;
    top: var(--manifesto-sticky-top, 0px);
    display: grid;
    grid-template-columns: 2fr 7fr 3fr;
    gap: 3rem;
    overflow: visible;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}
.manifesto > .section-index,
.manifesto > .manifesto-copy {
    position: relative;
    top: calc(var(--manifesto-content-lift, 0px) - 8rem);
}
.manifesto-copy p { margin: 0 0 1.5rem .625rem; color: var(--accent); font-family: var(--sans); font-size: var(--label-size); font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .12em; }
.manifesto-copy h2 {
    margin: 0;
    width: min(74vw, 110rem);
    max-width: none;
    font-size: clamp(4rem, 7vw, 10rem);
    line-height: .9;
    letter-spacing: -.055em;
    font-weight: 560;
}
.manifesto-aside { align-self: end; padding-bottom: .4rem; }
.manifesto-aside p { margin: 0 0 2.5rem; color: var(--muted); font-size: .92rem; }
.manifesto .section-index,
.manifesto-copy > p,
.manifesto-copy > h2 {
    will-change: transform;
}

/* 07. PORTFOLIO : trois disciplines superposées et déplacées par app.js. */
.discipline-menu {
    /* Marges du contenu : indépendantes du fond de survol qui rejoint le contour. */
    --portfolio-padding-top: 7rem;
    --portfolio-padding-inline: var(--pad);
    --portfolio-padding-bottom: 1.5rem;
    position: fixed;
    z-index: 5;
    inset: 0;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: clamp(.5rem, 1vh, 1rem);
    padding: var(--portfolio-padding-top) var(--portfolio-padding-inline) var(--portfolio-padding-bottom);
    opacity: 1;
    background: transparent;
    transform: translate3d(110vw, 0, 0);
    pointer-events: none;
    will-change: transform;
}

.discipline-menu.is-interactive {
    pointer-events: auto;
}

.discipline-menu-item {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(18rem, 48%) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 5rem);
    min-height: 0;
    padding: clamp(.75rem, 1.5vh, 1.5rem) clamp(1rem, 3vw, 3rem);
    background: transparent;
    color: var(--text);
}

/* Cadre individuel autour de chaque catégorie. */
.discipline-menu-item::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;

    border: 1px solid var(--accent);
    border-radius: .8rem;

    background: transparent;
    transition: background-color .35s ease;
}

/* Le noir remplit exactement le cadre arrondi concerné. */
.discipline-menu-item:hover::before,
.discipline-menu-item:focus-visible::before {
    background: #202c38;
}

.discipline-menu-visual {
    display: grid;
    min-width: 0;
    height: 100%;
    place-items: center;
    overflow: hidden;
}

.discipline-menu-visual img {
    width: 55%;
    height: 80%;
    object-fit: contain;
    transition: transform .4s ease;
}

/* Cadre vidéo : garder le même ratio que le MP4 et sa vignette (2550 / 1440). */
.discipline-menu-video-frame {
    display: block;
    width: 50%;
    aspect-ratio: 2550 / 1440;
    overflow: hidden;
    border-radius: 1.25rem;
	transition: transform .4s ease;
}

.discipline-menu-video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.discipline-menu-item:hover .discipline-menu-visual img,
.discipline-menu-item:focus-visible .discipline-menu-visual img {
    transform: scale(1.04);
}

.discipline-menu-item:hover .discipline-menu-video-frame,
.discipline-menu-item:focus-visible .discipline-menu-video-frame {
    transform: scale(1.04);
}

.discipline-menu-copy {
    min-width: 0;
}

.discipline-menu-copy strong {
    display: block;
    font-size: clamp(2.5rem, 4.5vw, 6rem);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.06em;
}

.discipline-menu-copy small {
    display: block;
    margin-top: clamp(.7rem, 1.3vh, 1.2rem);
    color: var(--accent);
    font-family: var(--sans);
    font-size: var(--label-size);
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
}

.discipline-menu-item:nth-child(1) .discipline-menu-copy small,
.discipline-menu-item:nth-child(2) .discipline-menu-copy small {
    margin-left: .25rem;
}

/* 08. Panneau À PROPOS. Le translate initial le place hors écran à droite. */
.home-about-panel {
    position: fixed;
    z-index: 5;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(20rem, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(4rem, 8vw, 10rem);
    padding: clamp(7rem, 10vh, 10rem) var(--pad) 3rem;
    overflow-y: auto;
    background: transparent;
    transform: translate3d(110vw, 0, 0);
    pointer-events: none;
    will-change: transform;
}

.home-about-panel.is-interactive {
    pointer-events: auto;
}

@media (min-width: 801px) {
    .home-about-photo,
    .home-about-copy {
        transform: translateX(clamp(2rem, 3vw, 4rem));
    }
}

.home-about-photo {
    display: grid;
    width: min(100%, 42rem);
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    place-items: center;
    justify-self: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(154, 180, 204, .11), transparent 55%),
        #0b0e12;
}

.home-about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-about-copy .eyebrow {
    color: var(--accent);
    font-family: var(--sans);
    font-size: var(--label-size);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-about-copy h2 {
    margin: 1.2rem 0 2rem;
    margin-left: -.06em;
    font-size: clamp(4rem, 7vw, 9rem);
    line-height: .88;
    letter-spacing: -.07em;
    text-transform: none;
}

.home-about-description {
    max-width: 42rem;
    color: var(--accent);
    font-size: clamp(1rem, 1.25vw, 1.4rem);
    line-height: 1.65;
}

.home-about-description p {
    margin: 0;
}

.home-about-description p + p {
    margin-top: 1.2em;
}

.home-about-description strong {
    color: #adbcc9;
    color: color-mix(in srgb, var(--accent) 75%, white 25%);
    font-weight: 700;
}

/* 09. Panneau MON PARCOURS. */
.home-journey-panel {
    position: fixed;
    z-index: 5;
    inset: 0;
    display: grid;
    align-items: start;
    padding: clamp(7rem, 10vh, 10rem) var(--pad) 3rem;
    overflow-y: auto;
    background: transparent;
    transform: translate3d(110vw, 0, 0);
    pointer-events: none;
    will-change: transform;
}

.home-journey-panel.is-interactive {
    pointer-events: auto;
}

.home-journey-copy {
    width: min(100%, 90rem);
    margin-inline: auto;
}

/* Titre à gauche et logos de logiciels à droite sur grand écran. */
.home-journey-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: clamp(2rem, 5vw, 7rem);
    margin-bottom: 3rem;
}

.home-journey-title-block > .eyebrow {
    color: var(--accent);
    font-size: var(--label-size);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Titre et CV sur la même ligne ; le bouton passe dessous seulement si l'écran est trop étroit. */
.home-journey-title-block { min-width: 0; }
.home-journey-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem clamp(1rem, 1.6vw, 2rem);
    margin-top: 1.2rem;
}

.home-journey-title-row > h2 {
    margin: 0;
    font-size: clamp(4rem, 7vw, 9rem);
    line-height: .88;
    letter-spacing: -.07em;
    text-transform: none;
}

/* RÉGLAGES DU BOUTON CV : arrondi, espacement intérieur et couleur commune --accent. */
.journey-cv-button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .75rem 1.25rem;
    border: 1px solid var(--accent);
    border-radius: .6rem;
    background: var(--accent);
    color: var(--bg);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    /* Même agrandissement que ENVOYER, sans remplacer le décalage vertical du bouton. */
    scale: 1;
    transform-origin: center;
    transition: scale .25s var(--ease);
}

.journey-cv-button:hover:not(:disabled),
.journey-cv-button:focus-visible:not(:disabled) {
    scale: 1.06; /* +6 %, sans changement de couleur. */
}

.journey-cv-button:focus-visible { outline: 2px solid var(--text); outline-offset: .25rem; }
.journey-cv-button:disabled { opacity: .5; }

/* Liste des logos ; gap contrôle leur espacement. */
.home-journey-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(.65rem, 1vw, 1.15rem);
    margin: 0 0 .35rem;
    padding: 0;
    list-style: none;
}

.home-journey-tools li {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(1.8rem, 2.1vw, 2.7rem);
    aspect-ratio: 1;
    border-radius: .35rem;
    outline: none;
}

.home-journey-tools img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .84;
    transition: opacity .25s ease, transform .25s ease;
}

/* Infobulle construite avec l'attribut HTML data-label. */
.home-journey-tools li::after {
    content: attr(data-label);
    position: absolute;
    z-index: 10;
    top: calc(100% + .65rem);
    left: 50%;
    padding: .38rem .55rem;
    border: 1px solid var(--line);
    border-radius: .3rem;
    background: #111820;
    color: var(--text);
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -.25rem);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.home-journey-tools li:hover img,
.home-journey-tools li:focus-visible img {
    opacity: 1;
    transform: translateY(-.15rem);
}

.home-journey-tools li:hover::after,
.home-journey-tools li:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.home-journey-tools li:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: .3rem;
}

.home-journey-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(3rem, 6vw, 7rem);
}

.home-journey-section {
    border-top: 1px solid var(--line);
    padding-top: 1.5rem;
}

.home-journey-section > h3 {
    margin: 0 0 2.5rem;
    color: var(--text);
    font-size: clamp(1.5rem, 2.5vw, 3rem);
    line-height: 1;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

.home-journey-section > h4,
.home-journey-school > h4 {
    margin: 0 0 1.25rem;
    color: var(--accent);
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-journey-section > h4:not(:first-child) {
    margin-top: 3.5rem;
}

.home-journey-entry {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--line);
}

.home-journey-entry h5 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.15rem, 1.6vw, 1.65rem);
    line-height: 1.25;
}

.home-journey-entry p,
.home-journey-entry ul {
    margin: .75rem 0 0;
    padding: 0;
    color: var(--accent);
    font-size: clamp(.95rem, 1.1vw, 1.15rem);
    line-height: 1.55;
}

.home-journey-entry ul {
    list-style: none;
}

.home-journey-label {
    margin: 0 0 .5rem !important;
    color: var(--accent) !important;
    font-size: var(--label-size) !important;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-journey-school {
    margin: 0 0 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--line);
}

.home-journey-school > h4 {
    margin-bottom: .65rem;
    color: var(--text);
    letter-spacing: 0;
    text-transform: none;
}

.home-journey-school > .home-journey-label {
    margin-bottom: 0 !important;
}

@media (min-width: 801px) {
    .home-journey-panel {
        padding: 10rem var(--pad) 1.5rem;
    }

    .home-journey-copy {
        width: 100%;
    }

    .home-journey-heading {
        margin-bottom: 7.5rem;
    }

    .home-journey-title-row { margin-top: .55rem; }

    .home-journey-title-row > h2 {
        font-size: clamp(3rem, 4.2vw, 5.5rem);
    }

    .home-journey-sections {
        gap: clamp(2rem, 3vw, 4rem);
    }

    .home-journey-section {
        padding-top: .8rem;
    }

    .home-journey-section > h3 {
        margin-bottom: 1.2rem;
        font-size: clamp(1.3rem, 1.8vw, 2rem);
    }

    .home-journey-section > h4,
    .home-journey-school > h4 {
        margin-bottom: .45rem;
        font-size: clamp(.9rem, 1.05vw, 1.2rem);
    }

    .home-journey-section > h4:not(:first-child) {
        margin-top: 1.5rem;
    }

    .home-journey-entry {
        padding: .65rem 0;
    }

    .home-journey-entry h5 {
        font-size: clamp(.95rem, 1.1vw, 1.2rem);
        line-height: 1.2;
    }

    .home-journey-entry p,
    .home-journey-entry ul {
        margin-top: .3rem;
        font-size: clamp(.8rem, .9vw, 1rem);
        line-height: 1.35;
    }

    .home-journey-label {
        margin-bottom: .25rem !important;
    }

    .home-journey-school {
        margin-bottom: .35rem;
        padding: .65rem 0;
    }
}

@media (max-width: 1050px) {
    .home-journey-heading {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1.5rem;
    }

    .home-journey-tools {
        justify-content: flex-start;
        margin-bottom: 0;
    }

    .home-journey-tools li {
        width: clamp(2rem, 7vw, 2.7rem);
    }
}

/* 10. Panneau CONTACT : introduction à gauche, formulaire à droite. */
.home-contact-panel {
    position: fixed;
    z-index: 5;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: stretch;
    gap: clamp(3rem, 5vw, 7rem);
    /* Valeurs : haut, côtés, bas. Le haut diminue automatiquement sur petit écran. */
    padding:
        clamp(7rem, 14vh, 12rem)
        var(--pad)
        clamp(2.5rem, 4vh, 4rem);
    overflow-y: auto;
    background: transparent;
    transform: translate3d(110vw, 0, 0);
    pointer-events: none;
    will-change: transform;
}

.home-contact-panel.is-interactive {
    pointer-events: auto;
}

.home-contact-intro {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.home-contact-intro > .eyebrow {
    color: var(--accent);
    font-family: var(--sans);
    font-size: var(--label-size);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-contact-intro h2 {
    margin: 1.2rem 0 2rem;
    font-size: clamp(3.5rem, 6.4vw, 7.5rem);
    line-height: 1.05;
    letter-spacing: -.07em;
    text-transform: none;
}

.home-contact-intro h2 em {
    display: block;
    color: var(--accent);
    font-family: var(--serif);
    font-weight: 400;
    text-transform: none;
}

.home-contact-title-main {
    display: block;
    margin-left: -.25rem;
}

.home-contact-intro > p:not(.eyebrow) {
    max-width: 28rem;
    color: var(--muted);
    font-size: 1rem;
}

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: clamp(3.5rem, 7vw, 7rem); }
.section-heading h2 { margin: .8rem 0 0; font-size: clamp(3rem, 6.5vw, 7rem); line-height: .88; letter-spacing: -.065em; }
.section-heading > p { width: min(26rem, 35%); margin: 0; color: #5e5d57; font-size: .9rem; }

.process { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(4rem, 8vw, 9rem); background: var(--bg); }
.process-sticky { align-self: start; position: sticky; top: 8rem; }
.process-sticky h2 { margin: 1rem 0 2rem; font-size: clamp(3rem, 5.5vw, 6rem); line-height: .9; letter-spacing: -.06em; }
.process-sticky > p:last-child { width: min(23rem, 80%); color: var(--muted); }
.process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.process-list li { min-height: 13rem; display: grid; grid-template-columns: 5rem 1fr; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); }
.process-list > li > span { align-self: start; padding-top: 2rem; color: var(--accent); font-size: .7rem; letter-spacing: .15em; }
.process-list h3 { margin: 0 0 .6rem; font-size: clamp(2rem, 3.5vw, 4rem); letter-spacing: -.05em; }
.process-list p { margin: 0; color: var(--muted); max-width: 29rem; }

/* 11. Pied de page des pages internes. */
.site-footer { position: relative; padding: clamp(6rem, 10vw, 10rem) var(--pad) 1rem; background: var(--section-bg); color: var(--text); }
.footer-title { padding-bottom: clamp(5rem, 9vw, 9rem); }
.footer-title { display: inline-block; margin-top: 1.3rem; font-size: clamp(3rem, 7vw, 8rem); font-weight: 750; line-height: .95; letter-spacing: -.06em; text-transform: uppercase; }
.footer-title em { color: var(--accent); font-family: var(--serif); font-weight: 400; text-transform: none; }
.footer-meta { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 2rem; min-height: 10rem; padding-top: 1rem; padding-bottom: 1rem; border-top: 1px solid var(--line); }
.footer-meta > div { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.footer-meta span { margin-bottom: .6rem; color: var(--accent); font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase; }
.footer-meta a { font-size: 1.2rem; }
.footer-contact-text { margin: 0; color: var(--text); font-size: 1.2rem; }
.footer-signature { justify-self: end; text-align: right; align-items: flex-end !important; }
.footer-signature strong { font-size: 1.2rem; letter-spacing: .12em; }

.inner-page { background: #0b0b0a; }
.page-hero { position: relative; min-height: 100svh; padding: 9.5rem var(--pad) 4rem; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero-top { position: relative; z-index: 4; display: flex; justify-content: space-between; }
.page-note { margin: 0; width: min(25rem, 36%); color: var(--muted); font-size: .9rem; }
.page-title { position: absolute; z-index: 3; left: var(--pad); bottom: 5rem; margin: 0; font-size: clamp(4.6rem, 10.4vw, 11rem); line-height: .76; letter-spacing: -.08em; text-transform: uppercase; }
.page-title span, .page-title em { display: block; }
.page-title em { margin-left: 12vw; color: var(--accent); font-family: var(--serif); font-weight: 400; text-transform: none; }

.animation-hero { background: radial-gradient(circle at 70% 45%, #252b2b 0, #111312 28%, #090909 65%); }
.kinetic-stage { position: absolute; width: 47vw; max-width: 46rem; aspect-ratio: 1; right: 6vw; top: 12vh; }
.figure-head { width: 18%; aspect-ratio: .82; left: 42%; top: 1%; border-radius: 48% 48% 44% 44%; }
.figure-body { width: 35%; height: 42%; left: 34%; top: 18%; border-radius: 45% 45% 30% 30%; transform: rotate(-7deg); }
.figure-arm { width: 13%; height: 41%; border-radius: 50%; transform-origin: 50% 10%; }
.arm-one { left: 23%; top: 24%; transform: rotate(38deg); }
.arm-two { left: 67%; top: 20%; transform: rotate(-48deg); }
.figure-leg { width: 15%; height: 48%; border-radius: 50%; transform-origin: 50% 5%; }
.leg-one { left: 36%; top: 55%; transform: rotate(17deg); }
.leg-two { left: 53%; top: 54%; transform: rotate(-24deg); }
.frame-count { position: absolute; right: 2%; bottom: 4%; color: var(--cyan); font-family: monospace; font-size: .66rem; letter-spacing: .16em; }

/* 12. Pages de portfolio internes : bande démo et mosaïques de projets. */
.reel-section { background: #dcd8cd; color: #0c0c0b; }
.reel-section .eyebrow { color: #3f5366; }
.reel-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.reel-header h2 { margin: .8rem 0 0; font-size: clamp(3rem, 6vw, 6.5rem); line-height: .9; letter-spacing: -.06em; }
.play-button { width: 9.5rem; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 1.3rem; border: 1px solid #111; border-radius: 50%; background: transparent; text-align: left; cursor: pointer; text-transform: uppercase; font-size: .7rem; font-weight: 750; letter-spacing: .1em; }
.play-button i { align-self: flex-end; color: var(--accent); font-style: normal; }
.reel-window { position: relative; height: min(67vw, 46rem); max-height: 78vh; overflow: hidden; background: #111; cursor: pointer; }
.reel-window img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) brightness(.58); transition: transform .8s var(--ease), filter .8s; }
.reel-window:hover img { transform: scale(1.03); filter: grayscale(0) brightness(.68); }
.reel-overlay { position: absolute; inset: 0; display: grid; place-items: center; }
.reel-overlay span { display: grid; width: 7rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; color: white; font-size: .68rem; letter-spacing: .18em; backdrop-filter: blur(4px); }
.reel-overlay small { position: absolute; left: 1.4rem; bottom: 1.4rem; color: white; font-size: .6rem; letter-spacing: .13em; }
.timecode { position: absolute; inset: 1rem 1rem auto; display: flex; justify-content: space-between; color: white; font-family: monospace; font-size: .63rem; }

/* Grille de plans/images ; les tailles des cartes sont définies plus bas. */
.shots { background: #0b0b0a; }
.shots .section-heading > p { color: var(--muted); }
.shot-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.shot-card { padding-top: 1rem; border-top: 1px solid var(--line); }
.shot-meta { display: flex; justify-content: space-between; margin-bottom: 1rem; color: var(--muted); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.shot-visual { position: relative; height: clamp(20rem, 40vw, 36rem); overflow: hidden; background: #191918; }
.shot-visual::before, .shot-visual::after { content: ""; position: absolute; }
.shot-visual i { position: absolute; display: block; border-radius: 50%; }
.shot-visual b { position: absolute; left: 1rem; bottom: 1rem; color: rgba(255,255,255,.65); font-family: monospace; font-size: .6rem; letter-spacing: .13em; }
.shot-run { background: linear-gradient(145deg, #45271b, #111 65%); }
.shot-run i { width: 6rem; height: 15rem; left: 40%; top: 22%; background: linear-gradient(#f0c49f, #44352d); transform: rotate(28deg); filter: blur(.2px); box-shadow: -5rem 1rem 0 -2rem rgba(107,130,153,.35), 5rem -2rem 0 -3rem rgba(120,225,231,.25); }
.shot-run i:nth-child(2) { left: 22%; opacity: .22; filter: blur(4px); }
.shot-run i:nth-child(3) { left: 60%; opacity: .12; filter: blur(8px); }
.shot-creature { background: radial-gradient(circle at 45% 42%, #647173, #151817 60%); }
.shot-creature i { width: 12rem; height: 7rem; left: 27%; top: 35%; background: #0e1010; border-radius: 63% 37% 42% 58%; box-shadow: inset 1rem 1rem 2rem rgba(120,225,231,.3); }
.shot-creature i:nth-child(2) { transform: rotate(60deg); width: 2rem; height: 12rem; left: 31%; top: 43%; }
.shot-creature i:nth-child(3) { transform: rotate(-55deg); width: 2rem; height: 11rem; left: 61%; top: 42%; }
.shot-camera { background: linear-gradient(170deg, #171717 0 50%, #4c2a1d 51%); perspective: 400px; }
.shot-camera i { width: 10rem; height: 10rem; border: 1px solid rgba(107,130,153,.8); border-radius: 0; left: 28%; top: 30%; transform: rotateY(55deg) rotateZ(45deg); }
.shot-camera i:nth-child(2) { transform: translate(2rem,2rem) rotateY(55deg) rotateZ(45deg); opacity: .5; }
.shot-camera i:nth-child(3) { transform: translate(4rem,4rem) rotateY(55deg) rotateZ(45deg); opacity: .2; }
.shot-copy { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.3rem; }
.shot-copy h3 { margin: 0; font-size: 1.5rem; letter-spacing: -.03em; }
.shot-copy p { width: 45%; margin: .2rem 0 0; color: var(--muted); font-size: .78rem; }

.toolkit { padding-top: 2rem; }
.toolkit-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding: 2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toolkit-line span { font-size: clamp(1.3rem, 2.8vw, 3rem); font-weight: 700; letter-spacing: -.04em; }
.toolkit-line i { width: .3rem; aspect-ratio: 1; background: var(--accent); border-radius: 50%; }

dialog { color: var(--text); }
dialog::backdrop { background: rgba(0,0,0,.85); backdrop-filter: blur(12px); }
.reel-dialog { width: min(90vw, 70rem); padding: 0; border: 1px solid var(--line); background: #11110f; }
.reel-dialog { height: min(80vh, 44rem); }
.dialog-close { position: absolute; z-index: 2; right: 1rem; top: 1rem; width: 2.7rem; aspect-ratio: 1; border: 1px solid var(--line); background: #111; border-radius: 50%; font-size: 1.5rem; cursor: pointer; }
.dialog-grid { height: 100%; padding: 2rem; display: grid; grid-template-rows: auto 1fr; gap: 1rem; }
.video-placeholder { display: grid; place-content: center; text-align: center; background: radial-gradient(circle, #262b2a, #0b0b0a 60%); }
.placeholder-icon { width: 6rem; aspect-ratio: 1; display: grid; place-items: center; margin: 0 auto 2rem; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); }
.video-placeholder p { margin: 0; font-size: clamp(1.7rem, 4vw, 4rem); letter-spacing: -.05em; }
.video-placeholder small { margin-top: .7rem; color: var(--muted); }


/* Bibliothèque de projets, partagée entre les pages de portfolio. */
.projects { background: #dcd8cd; color: #0b0b0a; }
.projects .eyebrow { color: #3f5366; }
.projects-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 4rem; }
.projects-toolbar h2 { margin: .8rem 0 0; font-size: clamp(3rem, 6vw, 6.5rem); line-height: .9; letter-spacing: -.06em; }
.project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5rem 1.25rem; }
.project-card { grid-column: span 6; }
.project-card:nth-child(3n + 2) { margin-top: 8rem; }
.project-info { display: flex; justify-content: space-between; gap: 2rem; padding-top: 1.2rem; }
.project-info h3 { margin: 0; font-size: clamp(1.75rem, 3vw, 3rem); letter-spacing: -.04em; }


/* 13. Contact sur les pages internes et composants du formulaire. */
.contact-layout { min-height:100vh; display:grid; grid-template-columns:5fr 7fr; gap:clamp(4rem,8vw,10rem); padding-top:11rem; }
.contact-intro { align-self:start; position:sticky; top:8rem; }
.contact-intro h1 { margin:1.2rem 0 2rem; font-size:clamp(3.5rem,6.4vw,7.5rem); line-height:.85; letter-spacing:-.07em; text-transform:uppercase; }
.contact-intro h1 em { color:var(--accent); font-family:var(--serif); font-weight:400; text-transform:none; }
.contact-intro > p:not(.eyebrow) { max-width:28rem; color:var(--muted); font-size:1rem; }
.contact-details {
    margin-top: auto;
	margin-bottom: clamp(4rem, 10vh, 10rem); /* Remonte les deux blocs */
    padding-top: clamp(2rem, 5vh, 5rem);
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, max-content);
    align-items: start;
    gap: clamp(3rem, 5vw, 7rem);
}

.contact-direct,
.contact-information {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.contact-direct {
    margin-top: 0;
}

.contact-direct > span,
.contact-information > span {
    color: var(--accent);
    font-family: var(--sans);
    font-size: var(--label-size);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.contact-direct :is(a, p) {
    width: max-content;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--line);
    font-size: 1.5rem;
}

.contact-direct-line {
    width: max-content;
    margin: 0;
    font-size: 1.5rem;
}

/* Icônes CONTACT : remplacer les PNG dans assets/images, sans modifier le HTML.
 * --contact-icon-size règle la taille ; --contact-icon-gap règle l'espace au texte.
 * Les valeurs en em suivent la typographie du lien sur chaque taille d'écran.
 */
.contact-direct {
    --contact-icon-size: 1.2em;
    --contact-icon-gap: .55em;
    min-width: 0;
}

.contact-direct .contact-method {
    margin: 0;
    display: inline-grid;
    grid-template-columns: var(--contact-icon-size) minmax(0, 1fr);
    align-items: center;
    gap: var(--contact-icon-gap);
    width: fit-content;
    max-width: 100%;
}

.contact-method .contact-method-icon {
    display: block;
    width: var(--contact-icon-size);
    height: var(--contact-icon-size);
    object-fit: contain;
}

.contact-method .contact-method-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.contact-direct .contact-direct-line {
    margin: 0;
    padding-block: 0;
    border-bottom: 0;
}

.contact-information { min-width: 0; }
.contact-information p { max-width: 100%; overflow-wrap: anywhere; }

.contact-method:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: .25rem;
}

.contact-information p {
    width: max-content;
    margin: 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: 1.5rem;
}

.contact-form-wrap { padding-top:1rem; }

/* Sur ordinateur, le formulaire du panneau d'accueil est décalé verticalement. */
@media (min-width: 901px) {
    .home-contact-panel .contact-form-wrap {
        margin-top: clamp(2rem, 7vh, 8rem);
    }
}

/* Sous 900 px, les colonnes CONTACT passent l'une sous l'autre. */
@media (max-width: 900px) {
    .contact-details {
        margin-top: 4rem;
        padding-top: 0;
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* Messages de succès ou d'erreur affichés après l'envoi. */
.form-status { display:flex; gap:1.2rem; margin-bottom:2rem; padding:1.2rem; border:1px solid var(--line); }
.form-status.success { border-color:rgba(120,225,231,.45); background:rgba(120,225,231,.06); }
.form-status.error { display:block; border-color:rgba(107,130,153,.5); background:rgba(107,130,153,.08); }
.form-status > span { color:var(--cyan); font-size:1.4rem; }
.form-status p { margin:.2rem 0 0; color:var(--muted); font-size:.8rem; }
.form-status ul { margin:.5rem 0 0; padding-left:1.2rem; color:#d9a388; }
.contact-form { display:flex; flex-direction:column; }
.form-row { padding:1.4rem 0; border-bottom:1px solid var(--line); }
.form-row:first-of-type { border-top:1px solid var(--line); }
.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.form-row label { display:flex; flex-direction:column; gap:.65rem; }
.form-row label > span, .form-row legend { color:var(--accent); font-size: var(--label-size); font-weight:650; letter-spacing:.13em; text-transform:uppercase; }
.form-row input:not([type="radio"]), .form-row textarea, .form-row select { width:100%; padding:.45rem 0; border:0; outline:0; background:transparent; color:var(--text); font-size:1.15rem; resize:vertical; }
.form-row input::placeholder, .form-row textarea::placeholder { color:#4f4e49; }
.form-row select { color:#c0beb7; }
.form-row select option { background:#111; }
.form-row fieldset { margin:0; padding:0; border:0; }
.form-row legend { margin-bottom:1rem; }
.budget-options { display:flex; flex-wrap:wrap; gap:.6rem; }
.budget-options label { display:block; }
.budget-options input { position:absolute; opacity:0; pointer-events:none; }
.budget-options span { display:block; padding:.65rem 1rem; border:1px solid var(--line); border-radius:100px; color:var(--text) !important; cursor:pointer; font-size:.7rem !important; }
.budget-options input:checked + span { border-color:var(--accent); background:var(--accent); color:#111 !important; }
.form-submit { display:flex; justify-content:flex-end; align-items:end; gap:2rem; padding-top:1rem; }
.submit-button {
    min-width: 11rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 2.2rem;
    border: 1px solid var(--accent);
    border-radius: 0.6rem;
    background: var(--accent);
    color: #111;
    cursor: pointer;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    transform: scale(1);
    transform-origin: center;
    transition:
        transform .25s var(--ease),
        background-color .25s ease,
        color .25s ease;
}

.submit-button:hover,
.submit-button:focus-visible {
    transform: scale(1.06);
}

.hp-field { position:absolute !important; left:-10000px !important; }

/* 14. Adaptation aux écrans peu hauts : resserre le contact pour éviter le recouvrement. */
@media (min-width: 901px) and (max-height: 850px) {
    .home-contact-panel {
        padding-top: clamp(5.5rem, 11vh, 7rem);
        padding-bottom: 2rem;
    }

    .home-contact-intro h2 {
        margin: .75rem 0 1rem;
        font-size: clamp(3rem, 5vw, 5rem);
        line-height: .95;
    }

    .contact-details {
        padding-top: clamp(1rem, 3vh, 2rem);
    }

    .contact-direct,
    .contact-information {
        gap: .55rem;
    }

    .contact-direct :is(a, p),
    .contact-direct-line,
    .contact-information p {
        font-size: 1.15rem;
    }

    .home-contact-panel .contact-form-wrap {
        margin-top: 1rem;
    }

    .form-row {
        padding: .75rem 0;
    }

    .form-submit {
        padding-top: 1rem;
    }

    .submit-button {
        padding: .85rem 1.6rem;
    }
}

/* 15. Responsive : tablette large. */
@media (max-width: 1050px) {
    .hero-title { grid-column:1 / 12; font-size:clamp(4rem,11vw,8.5rem); }
    .hero-intro { grid-column:7 / 11; }
    .shot-list { grid-template-columns:1fr 1fr; }
    .shot-card:last-child { grid-column:1 / -1; width:50%; }
}

/* Tablette/mobile : navigation compacte et panneaux empilés. */
@media (max-width: 1050px) {
    :root { --pad:1.25rem; }
    .site-header { height:4.5rem; }
    .menu-toggle { display:flex; align-items:center; gap:.75rem; cursor:pointer; }
    .menu-toggle i, .menu-toggle i::after { display:block; width:1.4rem; height:1px; background:currentColor; transition:transform .3s; }
    .menu-toggle i::after { content:""; transform:translateY(.35rem); }
    .menu-toggle[aria-expanded="true"] i { transform:rotate(45deg); }
    .menu-toggle[aria-expanded="true"] i::after { transform:rotate(90deg); }
    .brand, .menu-toggle { position:relative; z-index:2; }
    .main-nav { position:fixed; z-index:1; inset:0; display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:0; padding:6rem var(--pad) 3rem; background:#0b0b09; transform:translateY(-105%); transition:transform .65s var(--ease); }
    .menu-open .main-nav { transform:none; }
    .nav-label { display:block; margin-bottom:2rem; color:var(--accent); font-size:var(--label-size); letter-spacing:.15em; text-transform:uppercase; }
    .main-nav > .nav-link,
	.main-nav .nav-dropdown-trigger { display:grid; grid-template-columns:3rem 1fr auto; width:100%; padding:.8rem 0; font-size:clamp(2.2rem,11vw,5rem); line-height:1; letter-spacing:-.05em; text-align:left; text-transform:none; border-bottom:1px solid var(--line); }
    .main-nav > .nav-link span,
	.main-nav .nav-dropdown-trigger span { display:block; padding-top:.35rem; color:var(--accent); font-size:.6rem; letter-spacing:.12em; }
    .main-nav > .nav-link::after,
	.main-nav .nav-dropdown-trigger::after { display:none; }
	.main-nav .nav-dropdown { display:block; width:100%; }
	.main-nav .nav-dropdown-menu { position:static; display:none; min-width:0; padding:.4rem 0 .8rem 3rem; border:0; background:rgba(255,255,255,.03); box-shadow:none; opacity:1; visibility:visible; transform:none; pointer-events:auto; }
	.main-nav .nav-dropdown.is-open .nav-dropdown-menu { display:grid; }
	.main-nav .nav-dropdown-menu a { padding:.7rem 1rem; border-bottom:1px solid var(--line); font-size:1rem; letter-spacing:.08em; }
    .main-nav .language-switch { align-self:flex-start; margin-bottom:1.5rem; }
    .main-nav .language-switch .language-option { display:grid; grid-template-columns:1fr; width:2.5rem; height:2rem; padding:0; border:0; font-size:1rem; }
    .main-nav .language-switch .language-option span { padding:0; color:inherit; font-size:inherit; }

    .hero-grid { display:flex; flex-direction:column; justify-content:flex-end; padding-top:7rem; padding-bottom:7rem; }
    .hero-kicker { margin-bottom:auto; }
    .hero-title { margin:0; font-size:clamp(3.75rem,17vw,7rem); line-height:1; }
    .hero-title span:nth-child(2) { margin-left:7vw; }
    .hero-intro { width:75%; margin:1.5rem 0 0; }
    .round-cta { position:absolute; right:var(--pad); bottom:7rem; width:6.5rem; }
    .hero-footer span:first-child, .hero-footer span:last-child { display:none; }
    .hero-media img { object-position:55% 50%; }

    .manifesto { grid-template-columns:1fr; gap:2.5rem; }
    .manifesto-aside { max-width:28rem; }
    .discipline-menu { gap:.35rem; padding:5rem .75rem .75rem; }
    .discipline-menu-item { grid-template-columns:minmax(7rem, 32%) minmax(0, 1fr); gap:1rem; padding:.75rem; }
    .discipline-menu-visual img { width:100%; height:90%; }
    .discipline-menu-copy strong { font-size:clamp(1.8rem, 7vw, 3.5rem); }
    .discipline-menu-copy small { font-size:var(--label-size); letter-spacing:.12em; }
    .home-about-panel { grid-template-columns:1fr; align-content:start; gap:2rem; padding:6rem var(--pad) 2rem; }
    .home-about-photo { width:min(78vw, 28rem); height:auto; min-height:0; }
    .home-about-copy h2 { margin-bottom:1.25rem; font-size:clamp(3.5rem, 14vw, 6rem); }
    .home-contact-panel {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 6rem var(--pad) 3rem;
    }
    .home-contact-intro h2 { font-size:clamp(3.5rem, 14vw, 6rem); }
    .section-heading { display:block; }
    .section-heading > p { width:100%; max-width:28rem; margin-top:1.5rem; }
    .process { grid-template-columns:1fr; }
    .process-sticky { position:static; }
    .process-sticky > p:last-child { width:100%; }
    .footer-meta { grid-template-columns:1fr 1fr; }
    .footer-signature { grid-column:1 / -1; justify-self:stretch; align-items:flex-start !important; text-align:left; padding-top:2rem; border-top:1px solid var(--line); }

    .page-hero { min-height:46rem; padding-top:7rem; }
    .page-note { width:55%; }
    .page-title { bottom:3.8rem; font-size:clamp(4rem,16vw,7rem); }
    .page-title em { margin-left:5vw; }
    .kinetic-stage { width:84vw; right:-15vw; top:12%; opacity:.8; }
    .reel-header { align-items:flex-start; }
    .play-button { width:7rem; }
    .reel-window { height:62vh; }
    .shot-list { grid-template-columns:1fr; }
    .shot-card:last-child { grid-column:auto; width:auto; }
    .shot-visual { height:32rem; }
    .toolkit-line { flex-wrap:wrap; }
    .projects-toolbar { display:block; }
    .project-grid { display:block; }
    .project-card, .project-card:nth-child(3n + 2) { margin:0 0 4rem; }
    .contact-layout { grid-template-columns:1fr; padding-top:8rem; }
    .contact-intro { position:static; }
	.home-journey-sections { grid-template-columns: 1fr; gap: 4rem; }
}

/* Lecture verticale sur tablette/mobile et quand les animations sont réduites.
 * Les sections retrouvent leur hauteur naturelle : le parcours et le formulaire
 * restent entièrement accessibles, sans défilement imbriqué ni écran bloqué.
 */
@media (max-width: 1050px), (prefers-reduced-motion: reduce) {
    .manifesto-scene {
        height: auto;
        overflow: visible;
        background: var(--section-bg);
    }

    .manifesto.section-pad {
        position: relative;
        top: auto;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        border: 0;
        background: var(--section-bg);
    }

    .manifesto > .manifesto-copy {
        position: relative;
        top: auto;
        display: flex;
        min-height: 75svh;
        flex-direction: column;
        justify-content: center;
        padding: 6rem var(--pad);
        background: linear-gradient(180deg, var(--bg), #10151b 75%, var(--section-bg));
    }

    .manifesto-copy > p,
    .manifesto-copy > h2 {
        transform: none !important;
        will-change: auto;
    }

    .manifesto-copy h2 {
        width: 100%;
        max-width: 65rem;
        font-size: clamp(2.25rem, 6.5vw, 5rem);
        line-height: 1.08;
    }

    .home-about-panel,
    .home-journey-panel,
    .discipline-menu,
    .home-contact-panel {
        position: relative;
        inset: auto;
        width: 100%;
        min-width: 0;
        height: auto;
        padding: clamp(3.5rem, 8vw, 6rem) var(--pad);
        overflow: visible;
        background: var(--section-bg);
        transform: none !important;
        pointer-events: auto;
        will-change: auto;
        scroll-margin-top: 5.5rem;
    }

    .home-about-panel > *,
    .home-journey-panel > *,
    .home-contact-panel > * {
        min-width: 0;
    }

    .home-about-photo,
    .home-about-copy {
        transform: none;
    }

    .home-journey-heading { margin-bottom: 2.5rem; }
    .home-journey-sections { grid-template-columns: 1fr; gap: 3rem; }
    .home-journey-section > h3 {
        font-size: clamp(1.15rem, 4.6vw, 1.65rem);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    /* Contact : titre, formulaire, puis coordonnées et informations. */
    .home-contact-panel { display: flex; flex-direction: column; gap: 0; }
    .home-contact-intro { display: contents; }
    .home-contact-intro > .eyebrow { order: 0; }
    .home-contact-intro h2 { order: 1; }
    .home-contact-panel > .contact-form-wrap {
        order: 2;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .contact-details {
        order: 3;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
        gap: 2rem;
        margin: 3rem 0 0;
        padding: 0;
    }
    .contact-direct,
    .contact-information { min-width: 0; }
    .contact-direct :is(a, p),
    .contact-direct-line,
    .contact-information p {
        width: fit-content;
        max-width: 100%;
        overflow-wrap: anywhere;
        font-size: clamp(1rem, 2vw, 1.2rem);
    }
    .contact-direct :is(a, p),
    .contact-information p { padding-block: .35rem .65rem; }

    .discipline-menu {
        --portfolio-padding-top: clamp(3.5rem, 8vw, 6rem);
        --portfolio-padding-inline: var(--pad);
        --portfolio-padding-bottom: clamp(3.5rem, 8vw, 6rem);
        grid-template-rows: none;
        gap: 1.5rem;
        padding: var(--portfolio-padding-top) var(--portfolio-padding-inline) var(--portfolio-padding-bottom);
    }
	.discipline-menu-item {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem .75rem;

		/* Évite que les textes touchent le nouveau cadre. */
		padding: 1.5rem 1rem;

		/* Le cadre remplace l'ancienne ligne de séparation. */
		border-top: 0;
	}
    .discipline-menu-visual {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(100%, 28rem);
        height: auto;
        aspect-ratio: 2550 / 1440;
    }
    .discipline-menu-visual img { width: 100%; height: 100%; object-fit: contain; }
    .discipline-menu-video-frame { width: 100%; }
    .discipline-menu-copy strong { font-size: clamp(1.8rem, 6vw, 3.5rem); line-height: 1.05; }
    .discipline-menu-copy small { font-size: var(--label-size); line-height: 1.65; letter-spacing: .08em; }
}

/* 1050 px est le seuil commun au menu et au défilement dans app.js.
 * svh stabilise l'accueil ; dvh permet au menu de suivre les barres du navigateur.
 */
@media (max-width: 1050px) {
    :root { --pad: clamp(1rem, 4vw, 2rem); }
    .site-header,
    .site-header.is-scrolled {
        height: 4.5rem;
        background: rgba(9, 9, 9, .92);
        backdrop-filter: none;
    }
    .brand-mark,
    .site-header.is-scrolled .brand-mark {
        width: 3.75rem;
        height: 3.75rem;
        top: 0;
    }
    .menu-toggle { min-width: 5rem; min-height: 2.75rem; justify-content: flex-end; color: var(--text); }
    .main-nav,
    .home-page.intro-start .site-header .main-nav {
        height: 100vh;
        height: 100dvh;
        bottom: auto;
        justify-content: flex-start;
        padding: 6rem var(--pad) max(2rem, env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        visibility: hidden;
        pointer-events: none;
        transition: transform .35s var(--ease), visibility .35s;
    }
    .menu-open .main-nav,
    .home-page.intro-start.menu-open .site-header .main-nav {
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }
    .nav-label { margin-bottom: 1rem; }
    .main-nav > .nav-link,
    .home-page .site-header .main-nav > .nav-link {
        grid-template-columns: 2rem minmax(0, 1fr);
        min-height: 2.75rem;
        font-size: clamp(1.65rem, 7.5vw, 3rem);
        line-height: 1.15;
        color: var(--text);
    }
    .main-nav > .nav-link.is-section-active { color: var(--accent) !important; }
    .main-nav .language-switch .language-option { min-height: 2.75rem; min-width: 2.75rem; }
    .main-nav .language-switch .visually-hidden { display: block; }
    .main-nav > .nav-link:focus-visible,
    .menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

    .hero-grid { min-height: 100svh; padding: 6rem var(--pad) 5rem; }
    .hero .hero-title { align-self: stretch; font-size: clamp(2.2rem, 10.8vw, 6rem); line-height: 1.05; letter-spacing: -.055em; }
    .hero-title span:nth-child(2) { margin-left: 0; }
    .hero-intro:empty,
    .hero-kicker:empty { display: none; }
    .hero-footer { bottom: max(1.5rem, env(safe-area-inset-bottom)); justify-content: center; }
    .hero .hero-media img { object-position: 72% 50%; }
    .hero-layers { transform: none; will-change: auto; }
    .hero-eye { transform: none; will-change: auto; }

    .home-about-panel { grid-template-columns: 1fr; gap: 2rem; }
    .home-about-photo { width: min(70vw, 24rem); }
    .home-about-copy h2,
    .home-journey-title-row > h2 { font-size: clamp(2.75rem, 9vw, 4.5rem); line-height: 1; }
    .home-about-description { font-size: 1rem; line-height: 1.7; }
    .home-journey-heading { grid-template-columns: 1fr; gap: 1.75rem; }
    .home-journey-tools { position: relative; justify-content: flex-start; gap: .5rem; padding-bottom: 1.5rem; }
    .home-journey-tools li { position: static; width: 2.75rem; height: 2.75rem; padding: .25rem; }
    .home-journey-tools li::after {
        top: auto;
        bottom: 0;
        left: 0;
        max-width: 100%;
        padding: .2rem 0;
        border: 0;
        background: transparent;
        white-space: normal;
        transform: none;
    }
    .home-journey-tools li:focus::after { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .home-journey-entry { padding: 1rem 0; }
    .home-journey-entry h5 { font-size: 1rem; line-height: 1.4; }
    .home-journey-entry p,
    .home-journey-entry ul { font-size: .95rem; line-height: 1.6; }
    .home-journey-section > h4:not(:first-child) { margin-top: 1.75rem; }
    .home-contact-intro h2 { margin: 1rem 0 2rem; font-size: clamp(2.65rem, 8.8vw, 4.5rem); line-height: 1.08; }
    .home-contact-title-main { margin-left: 0; }
    .two-columns { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .form-row { min-width: 0; padding: 1rem 0; }
    .form-row label { min-width: 0; }
    .form-row input:not([type="radio"]),
    .form-row textarea { min-width: 0; font-size: 1rem; user-select: text; -webkit-user-select: text; }
    .form-row textarea { min-height: 8rem; }
    .home-contact-panel .form-submit { display: flex; justify-content: flex-end; padding-top: 1.5rem; }
    .submit-button { min-height: 2.75rem; padding: 1rem 1.5rem; }
    .temporary-screen { min-height: 100svh; }
    .temporary-screen h1 { font-size: clamp(2.75rem, 11vw, 7rem); line-height: 1.05; overflow-wrap: anywhere; }

    /* L'introduction longue ne doit pas bloquer la navigation tactile. */
    .intro-logo { display: none; }
    .home-page .hero-title > span,
    .home-page.intro-start .hero-title > span,
    .home-page.intro-start .site-header .brand,
    .home-page.intro-start .site-header .menu-toggle,
    .home-page.intro-start .hero-grid > :not(.hero-title) { transition: none; transition-delay: 0s; }
}

/* Les téléphones en paysage gardent des contrôles lisibles sans tout comprimer. */
@media (max-width: 1050px) and (max-height: 500px) {
    .main-nav,
    .home-page.intro-start .site-header .main-nav { padding-top: 5rem; }
    .main-nav > .nav-link { font-size: 1.65rem; }
    .hero .hero-title { font-size: clamp(2.25rem, 7vh, 3.25rem); }
}

@media (hover: none) {
    .discipline-menu-item:hover::before { background: transparent; }
    .discipline-menu-item:hover .discipline-menu-visual img,
    .discipline-menu-item:hover .discipline-menu-video-frame { transform: none; }
}

/* Petit mobile : typographies et marges minimales. */
@media (max-width: 520px) {
    .hero-media img { object-position:58% 50%; }
    .hero-title { font-size:17vw; }
    .hero-intro { width:65%; font-size:.85rem; }
    .round-cta { width:5.8rem; padding:.8rem; font-size:.58rem; }
    .manifesto-copy h2 { font-size:2.5rem; }
    .home-about-photo { width:min(82vw, 23rem); height:auto; }
    .section-pad { padding-top:5.5rem; padding-bottom:5.5rem; }
    .footer-meta { grid-template-columns:1fr; }
    .footer-signature { grid-column:auto; }
    .page-hero-top { display:block; }
    .page-note { width:78%; margin-top:1.2rem; }
    .page-title { bottom:3rem; }
    .reel-header { display:block; }
    .play-button { margin-top:2rem; }
    .shot-visual, .project-visual { height:29rem; }
    .shot-copy { display:block; }
    .shot-copy p { width:100%; }
    .toolkit-line span { font-size:1.1rem; }
    .project-info { display:block; }
    .quality-list dd { display:block; }
    .quality-list dd span { display:block; margin-top:.4rem; }
    .two-columns { grid-template-columns:1fr; }
    .form-submit { display:block; }
    .submit-button { margin-left:auto; }
}

/* Respect du réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .js .reveal { opacity:1; transform:none; }
    .manifesto-scene { height:auto; }
    .manifesto { position:relative; top:auto; }
    .manifesto .section-index,
    .manifesto-copy > p,
    .manifesto-copy > h2 { transform:none !important; }
}
/* Couleur d'accent partagée par plusieurs textes secondaires. */
	.manifesto-copy > p,
	.manifesto-aside > p,
	.process-sticky > p:last-child,
	.site-footer .footer-title .eyebrow {
		color: var(--accent);
}
/* Contraste du menu : noir sur l'image d'accueil, blanc après défilement. */
@media (min-width: 1051px) {
    .home-page .site-header:not(.is-scrolled) .main-nav > .nav-link,
    .home-page .site-header:not(.is-scrolled) .main-nav > .nav-link[aria-current="page"],
	.home-page .site-header:not(.is-scrolled) .nav-dropdown-trigger {
        color: #000;
    }

    .home-page .site-header:not(.is-scrolled) .main-nav > .nav-link::after,
	.home-page .site-header:not(.is-scrolled) .nav-dropdown-trigger::after {
        background: #000;
    }

    .site-header.is-scrolled .main-nav > .nav-link,
    .site-header.is-scrolled .main-nav > .nav-link[aria-current="page"],
	.site-header.is-scrolled .nav-dropdown-trigger {
        color: #fff;
    }

    .site-header.is-scrolled .main-nav > .nav-link::after,
	.site-header.is-scrolled .nav-dropdown-trigger::after {
        background: #fff;
    }
}

/* 16. Mode page temporaire : masque le contenu normal et affiche un titre central. */
body.temporary-page {
    background: #000;
}

body.temporary-page #main > :not(.temporary-screen) {
    display: none !important;
}

/* Le footer reste visible même si le contenu provisoire de ces pages est masqué. */

.temporary-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 7rem var(--pad) 3rem;
    background: #000;
    color: #fff;
}

.temporary-screen h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(4rem, 10vw, 11rem);
    font-weight: 750;
    line-height: .9;
    letter-spacing: -.06em;
    text-align: center;
}

body.temporary-page .site-header:not(.is-scrolled) .main-nav > .nav-link,
body.temporary-page .site-header:not(.is-scrolled) .main-nav > .nav-link[aria-current="page"],
body.temporary-page .site-header:not(.is-scrolled) .nav-dropdown-trigger {
    color: #fff;
}

body.temporary-page .site-header:not(.is-scrolled) .main-nav > .nav-link::after,
body.temporary-page .site-header:not(.is-scrolled) .nav-dropdown-trigger::after {
    background: #fff;
}

/* Accueil Character Art : premier écran conservé, sans masquer le contenu qui suit.
 * RÉGLAGE IMAGE : remplacer none par url("../images/characterart background.png").
 * Placer d'abord l'image dans assets/images ; le chemin est relatif à style.css.
 * RÉGLAGE CADRAGE : 50% 50% centre l'image ; modifier ces pourcentages pour déplacer le sujet.
 * cover remplit l'écran en conservant les proportions, avec recadrage si nécessaire.
 */
.portfolio-detail-page {
    --character-art-intro-image: none;
    --character-art-intro-position: 50% 50%;
    /* Image de la seconde section, indépendante du premier écran Character Art. */
    --character-art-overview-image: none;
    --character-art-overview-position: 50% 50%;
}

.portfolio-detail-page .character-art-intro {
    min-height: 100vh;
    min-height: 100svh;
    background-color: #000;
    background-image: var(--character-art-intro-image);
    background-position: var(--character-art-intro-position);
    background-size: cover;
    background-repeat: no-repeat;
}

/* Introduction « Donner une âme » : noir tant qu'aucune image n'est renseignée.
 * RÉGLAGE IMAGE : remplacer --character-art-overview-image: none ci-dessus
 * par url("../images/nom-de-ton-image.png") pour ajouter le futur fond. */
.portfolio-detail-page .character-art-overview {
    min-height: 100vh;
    min-height: 100svh;
    background-color: #000;
    background-image: var(--character-art-overview-image);
    background-position: var(--character-art-overview-position);
    background-size: cover;
    background-repeat: no-repeat;
}

/* Les deux lignes partagent le même bord gauche ; right permet le retour à la ligne. */
.portfolio-detail-page .character-art-overview .page-title {
    right: var(--pad);
    line-height: .95;
    text-align: left;
}

.portfolio-detail-page .character-art-overview .page-title em { margin-left: 0; }

@media (max-width: 1050px) {
    .portfolio-detail-page .character-art-overview .page-title {
        font-size: clamp(2rem, 8vw, 4.5rem);
    }
}

/* Character Art : menu blanc, même avant le défilement. */
@media (min-width: 1051px) {
    body.portfolio-detail-page .site-header:not(.is-scrolled) .main-nav > .nav-link,
    body.portfolio-detail-page .site-header:not(.is-scrolled) .nav-dropdown-trigger {
        color: #fff;
    }

    /* Soulignement des liens également blanc. */
    body.portfolio-detail-page .site-header:not(.is-scrolled) .main-nav > .nav-link::after,
    body.portfolio-detail-page .site-header:not(.is-scrolled) .nav-dropdown-trigger::after {
        background: #fff;
    }
}

/* Le pied de page réactivé ne doit pas élargir le viewport des téléphones,
 * ce qui décalerait aussi le menu fixe et les fenêtres de détail.
 */
@media (max-width: 1050px) {
    .portfolio-detail-page .footer-title {
        display: block;
        max-width: 100%;
    }

    .portfolio-detail-page .footer-heading {
        margin: 0;
        font-size: clamp(2rem, 8vw, 4.5rem);
        overflow-wrap: anywhere;
    }

    .portfolio-detail-page .footer-meta > div { min-width: 0; }
    .portfolio-detail-page .footer-meta a { max-width: 100%; overflow-wrap: anywhere; }
}

/* 17. Accueil : le logo rejoint le header, puis tous les textes apparaissent ensemble.
 * --intro-text-duration règle leur fondu ; app.js attend sa fin pour libérer le scroll.
 */

/* Le voile sombre est masqué */
.home-page .hero-shade {
    opacity: 0;
    transition: opacity var(--intro-text-duration) var(--ease);
}

/* Toutes les lignes du titre partagent le même fondu. */
.home-page .hero-title > span {
    opacity: 0;
    transition: opacity var(--intro-text-duration) var(--ease);
}

/* On masque le contenu du header, mais jamais son fond */
.home-page .site-header .brand,
.home-page .site-header .main-nav,
.home-page .site-header .menu-toggle,
.home-page .hero-grid > :not(.hero-title) {
    opacity: 0;
	visibility: hidden;
    pointer-events: none;
	transition:
		opacity var(--intro-text-duration) var(--ease),
		visibility 0s linear var(--intro-text-duration);
}


/* APRÈS L’ARRIVÉE DU LOGO */

/* Le voile sombre apparaît */
.home-page.intro-start .hero-shade {
    opacity: 1;
}

/* Les trois lignes apparaissent en même temps, après le trajet du logo. */
.home-page.intro-start .hero-title > span {
    opacity: 1;
    transition-delay: 0s;
}

/* Le menu et les autres éléments réapparaissent */
.home-page.intro-start .site-header .brand,
.home-page.intro-start .site-header .main-nav,
.home-page.intro-start .site-header .menu-toggle,
.home-page.intro-start .hero-grid > :not(.hero-title) {
    opacity: 1;
	visibility: visible;
    pointer-events: auto;
	transition-delay: 0s, 0s;
}

@media (prefers-reduced-motion: reduce) {
    .home-page .hero-shade,
    .home-page .hero-title > span,
    .home-page .site-header .brand,
    .home-page .site-header .main-nav,
    .home-page .site-header .menu-toggle,
    .home-page .hero-grid > :not(.hero-title) {
        transition: none;
    }
}
html.scroll-locked,
html.scroll-locked body {
    overflow: hidden;
}
/* FOND TRÈS SOMBRE PENDANT L'INTRODUCTION */

.home-page .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .78);
    opacity: 1;
    pointer-events: none;
    transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1);
}

/* Le voile initial disparaît quand les effets actuels commencent */
.home-page.intro-brighten .hero::after,
.home-page.intro-start .hero::after {
    opacity: 0;
}


/* GRAND LOGO TEMPORAIRE
 * width/height règlent sa taille initiale ; les durées 1.1s règlent son trajet
 * vers le logo du header. Les temporisations correspondantes sont dans app.js.
 */

.intro-logo {
    position: fixed;
    z-index: 1000;

    left: 50%;
    top: 50%;

    width: clamp(16rem, 28vw, 30rem);
    height: clamp(16rem, 28vw, 30rem);

    object-fit: contain;
    pointer-events: none;

    opacity: 0;
    transform: translate(-50%, -50%);

    filter: brightness(0) invert(1);
    mix-blend-mode: normal;

    transition:
        opacity 2.2s ease .5s,
        left 1.1s cubic-bezier(.22, 1, .36, 1),
        top 1.1s cubic-bezier(.22, 1, .36, 1),
        width 1.1s cubic-bezier(.22, 1, .36, 1),
        height 1.1s cubic-bezier(.22, 1, .36, 1),
        transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.intro-logo.is-visible {
    opacity: 1;
}

/* La copie laisse place au véritable logo pendant le fondu commun. */
.home-page.intro-start .intro-logo {
    opacity: 0;
    transition: opacity var(--intro-text-duration) var(--ease);
}
.scroll-cue {
    will-change: opacity;
}

/*
 * Curseur natif personnalisé : point central et cercle net.
 * Le hotspot 3 3 correspond exactement au centre du SVG 64 x 64.
 * Les champs de saisie conservent le curseur texte pour rester utilisables.
 */
@media (pointer: fine) {
    *,
    *::before,
    *::after {
        cursor: url("../images/cursor.svg") 3 3, auto !important;
    }

    input,
    textarea,
    [contenteditable="true"] {
        cursor: text !important;
    }
}

/* Le curseur de clic est réservé aux liens et aux boutons. */
@media (pointer: fine) {
    a[href],
    a[href] *,
    a[href]::before,
    a[href]::after,
    button:enabled,
    button:enabled *,
    button:enabled::before,
    button:enabled::after {
        cursor: url("../images/cursorhand.svg?v=36") 2 6, pointer !important;
    }
}

/* Ces règles passent après celles de l'introduction pour rester prioritaires. */
@media (max-width: 1050px) {
    .home-page.intro-start .site-header .main-nav { visibility: hidden; pointer-events: none; transition-delay: 0s; }
    .home-page.intro-start.menu-open .site-header .main-nav { visibility: visible; pointer-events: auto; }
    .home-page.intro-start .site-header .brand,
    .home-page.intro-start .site-header .menu-toggle,
    .home-page.intro-start .hero-title > span,
    .home-page.intro-start .hero-grid > :not(.hero-title) { transition: none; }
}

/* Position du bouton Mon CV sur ordinateur uniquement. */
@media (min-width: 1051px) {
    .journey-cv-button {
        margin-left: 50rem; /* Décalage supplémentaire vers la droite */
        transform: translateY(.8rem);        /* Descend légèrement */
    }
}

/* Contour décoratif autour du bloc des logiciels. */
.home-journey-tools {
    position: relative;
}

.home-journey-tools::before {
    content: "";
    position: absolute;
    inset: -.75rem;
    border: 1px solid var(--accent);
    border-radius: .8rem;
    pointer-events: none;
}

/* Un contour autour de chaque section complète. */
.home-page :is(#about, #journey, #portfolio, #contact),
.portfolio-detail-page > .site-footer {
    /* Géométrie partagée par le contour et les fonds de survol du portfolio. */
    --section-frame-top: 6rem;
    --section-frame-inline: 1rem;
    --section-frame-bottom: 1rem;
    --section-frame-radius: .8rem;
}

.home-page :is(#about, #journey, #portfolio, #contact)::before {
    content: "";
    position: absolute;
    inset: var(--section-frame-top) var(--section-frame-inline) var(--section-frame-bottom);
    border: 1px solid var(--accent);
    border-radius: var(--section-frame-radius);
    pointer-events: none;
}

/* Le trait du cadre reste visible au-dessus des fonds noirs. */
.home-page #portfolio::before { z-index: 1; }

/* Sur mobile, le contour englobe toute la hauteur de chaque section. */
@media (max-width: 1050px), (prefers-reduced-motion: reduce) {
    .home-page :is(#about, #journey, #portfolio, #contact),
    .portfolio-detail-page > .site-footer {
        --section-frame-top: 1rem;
    }
}

/* Character Art partage exactement les marges et l'arrondi du cadre de CONTACT. */
.portfolio-detail-page > .site-footer {
    /* Garde les textes à l'intérieur du trait, même sur téléphone. */
    padding-inline: max(var(--pad), calc(var(--section-frame-inline) + .75rem));
    padding-bottom: 2rem;
}

.portfolio-detail-page > .site-footer > .footer-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.portfolio-detail-page > .site-footer > .footer-frame::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: var(--section-frame-top) var(--section-frame-inline) var(--section-frame-bottom);
    border: 1px solid var(--accent);
    border-radius: var(--section-frame-radius);
    pointer-events: none; /* Le contour ne bloque aucun lien. */
}

/* Sur ordinateur, le cadre est ancré au bas du footer dès son apparition.
 * Sa position finale reste identique à CONTACT, sans déplacement « sticky ». */
@media (min-width: 1051px) and (prefers-reduced-motion: no-preference) {
    .portfolio-detail-page > .site-footer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100svh;
        padding-bottom: clamp(2.5rem, 4vh, 4rem);
    }

    .portfolio-detail-page > .site-footer > .footer-frame::before {
        position: absolute;
        display: block;
        inset: auto var(--section-frame-inline) var(--section-frame-bottom);
        height: calc(100svh - var(--section-frame-top) - var(--section-frame-bottom));
        margin: 0;
    }
}

@media (min-width: 1051px) and (max-height: 850px) and (prefers-reduced-motion: no-preference) {
    .portfolio-detail-page > .site-footer { padding-bottom: 2rem; }
}

/* Pages principales de portfolio : petit écart constant entre le contour et le titre. */
.portfolio-detail-page:not(.creation-detail-page) > .site-footer {
    /* Écart au-dessus du titre : .5rem = 8px avec la taille de texte par défaut. */
    --footer-title-gap: .5rem;
    --footer-links-gap: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    gap: var(--footer-links-gap);
    padding-top: calc(var(--section-frame-top) + var(--footer-title-gap));
}

.portfolio-detail-page:not(.creation-detail-page) > .site-footer > .footer-title {
    margin-top: 0;
    padding-bottom: 0;
}

.portfolio-detail-page:not(.creation-detail-page) > .site-footer .footer-heading {
    margin: 0;
}

/* Le cadre contient aussi les titres et liens qui dépassent la hauteur d'un écran. */
.portfolio-detail-page:not(.creation-detail-page) > .site-footer > .footer-frame::before {
    inset: var(--section-frame-top) var(--section-frame-inline) var(--section-frame-bottom);
    height: auto;
}


/* Bibliothèque Character Art : deux colonnes alignées. */
.character-library .project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 4rem) clamp(1rem, 2vw, 2rem);
}

/* Supprime notamment l'ancien décalage vertical des cartes. */
.character-library .project-card,
.character-library .project-card:nth-child(3n + 2) {
    grid-column: auto;
    min-width: 0;
    margin: 0;
}

/* Vignette complète non cliquable ; son effet de survol reste actif. */
.character-library .character-study-visual {
    position: relative;
    inset: auto;
    display: grid;
    place-items: center;

    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;

    padding: 0;
    border: 1px solid var(--accent);
    border-radius: 1.5rem; /* Arrondi des coins. */
    overflow: hidden;

    background: #41678b; /* Bleu des vignettes temporaires. */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    font: inherit;

    transform: scale(1);
    transform-origin: center;
    transition: transform .3s var(--ease);
}

/* Texte centré sur les vignettes temporaires. */
.character-study-placeholder {
    font-size: clamp(1.5rem, 3vw, 4rem);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Les futures images garderont toutes le même format. */
.character-study-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Espacement entre la vignette et son titre. */
.character-library .project-info {
    display: block;
    padding-top: clamp(1rem, 1.5vw, 2rem);
}

/* Contexte et année sous le nom, dans la même typographie que le titre. */
.character-library .project-info .character-study-project {
    margin: .15em 0 0;
    color: var(--text);
    font-size: clamp(1.5rem, 2.4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.04em;
    text-transform: none;
}

@media (min-width: 1051px) {
    .character-library .project-info :is(h3, .character-study-project) {
        white-space: nowrap;
    }
}

/* Résumé associé à la création : même fondu que le titre, sans déplacement. */
.character-library .project-info .character-study-summary {
    width: 100%;
    max-width: none;
    margin: .8rem 0 0;
    color: var(--accent);
    font-size: clamp(1.25rem, 1.8vw, 2rem);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: normal;
    text-transform: none;
    overflow-wrap: anywhere;
}

/* Agrandissement léger avec une souris, sans effet persistant au toucher. */
@media (hover: hover) and (pointer: fine) {
    .character-library:not(.creation-gallery) .character-study-visual:hover {
        transform: scale(1.025);
    }
}

/* Une colonne sur téléphone. */
@media (max-width: 767px) {
    .character-library .project-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.site-footer .footer-heading {
    /* Taille du texte, adaptée à la largeur de l'écran. */
    font-size: clamp(2rem, 8vw, 10rem);

    /* Espacement entre les lignes. */
    line-height: 1.2;
}

/* Character Art : le titre entier sur la première ligne, la suite sur la seconde. */
.character-art-page > .site-footer .footer-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    white-space: nowrap;
}

/* Les sous-titres suivent le dernier mot sur les pages de portfolio. */
.character-art-page .footer-heading em,
.assets-environments-page .footer-heading em,
.projects-films-page .footer-heading em {
    white-space: nowrap;
}

/* Contient le fond animé dans le premier écran. */
.portfolio-detail-page .character-art-intro {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Fond derrière le titre. */
.portfolio-detail-page .character-art-intro > .hero-media {
    z-index: 0;
}

/* Le titre reste centré et ne suit pas le mouvement du fond. */
.portfolio-detail-page .character-art-intro > h1 {
    position: relative;
    z-index: 2;
}

/* Même luminosité que le fond d'Index, sans voile sombre ajouté. */
.portfolio-detail-page .character-art-intro .hero-shade {
    opacity: 0;
}

/* Character Art : le fond et les yeux existants restent inchangés. */
.portfolio-detail-page .character-hero {
    display: block;
    place-items: normal;
    padding: 0;
    isolation: isolate;
}

/* Emplacement final du titre de catégorie, sous le header à gauche. */
.portfolio-detail-page h1.character-category-title {
    position: absolute;
    z-index: 3;
    top: 20rem;
    left: var(--pad);
    margin: 0;
    max-width: calc(100% - 2 * var(--pad));
    font-size: clamp(1.5rem, 3vw, 3.5rem);
    line-height: .95;
    white-space: nowrap;
    text-align: left;
    transform: none;
    opacity: 1;
    transition: none;
	text-shadow: 0 3px 12px rgba(0, 0, 0, .6);
}

/* Phrase en bas à gauche, comme le titre principal d'Index. */
.portfolio-detail-page .character-hero-grid {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-end;
}
.portfolio-detail-page .character-hero-copy {
    align-self: stretch;
    margin: 0;
    max-width: 100%;
    font-size: clamp(2.5rem, 7vw, 8rem);
    line-height: 1;
    text-align: left;
	/* Remonte uniquement la phrase, sans déplacer les mentions du bas. */
	transform: translateY(-1rem);
}

/* État final du voile ; remplace l'ancien opacity: 0 ajouté précédemment. */
.portfolio-detail-page .character-hero .hero-shade { opacity: 1; }
.portfolio-detail-page .character-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(0, 0, 0, .78);
    opacity: 0;
    pointer-events: none;
}

/* Au départ, Character Art est grand et centré. */
.js .character-intro-pending:not(.character-intro-reveal) .character-category-title {
    left: 50%;
    top: 50%;
    font-size: clamp(2.5rem, 10vw, 11rem);
    transform: translate(-50%, -50%);
}
.js .character-intro-pending .character-category-title {
    transition: opacity 2.2s ease .5s,
        left 1.1s var(--ease), top 1.1s var(--ease),
        font-size 1.1s var(--ease), transform 1.1s var(--ease);
}
.js .character-intro-pending:not(.character-intro-visible) .character-category-title {
    opacity: 0;
}

/* Le nom plus long reste entièrement visible pendant son apparition centrée. */
.js .assets-environments-page.character-intro-pending:not(.character-intro-reveal) .character-category-title,
.js .projects-films-page.character-intro-pending:not(.character-intro-reveal) .character-category-title {
    font-size: clamp(2.5rem, 7.2vw, 11rem);
}

/* Assets & Environments : mêmes effets d'accueil, avec un noir de secours au chargement. */
.assets-environments-page .character-hero,
.projects-films-page .character-hero {
    background: #000;
}

/* Le SVG centre le fond et l'iris ; ne pas afficher l'iris avant le décor chargé. */
.js .projects-films-page:not(.projects-eyes-ready) .projects-eye-scene .hero-eye {
    visibility: hidden;
}

.assets-environments-page .assets-robot-scene {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

/* Conserver le blanc lisible sur le ciel clair, sans ajouter de voile au fond. */
.assets-environments-page .site-header:not(.is-scrolled) .brand-mark,
.projects-films-page .site-header:not(.is-scrolled) .brand-mark {
    filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0, 0, 0, .7));
    mix-blend-mode: normal;
}

.assets-environments-page .site-header:not(.is-scrolled) .main-nav > .nav-link,
.assets-environments-page .site-header:not(.is-scrolled) .menu-toggle,
.projects-films-page .site-header:not(.is-scrolled) .main-nav > .nav-link,
.projects-films-page .site-header:not(.is-scrolled) .menu-toggle {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .35);
}

.assets-environments-page .character-hero-copy,
.projects-films-page .character-hero-copy {
    text-shadow: 0 3px 12px rgba(0, 0, 0, .65);
}

.assets-environments-page .assets-robot-eye-light {
    /* Secours CSS ; app.js tire les durées aléatoires sur les navigateurs compatibles. */
    --robot-eye-cycle: 2.6s;
    opacity: 0;
    animation: assets-robot-eye-power var(--robot-eye-cycle) ease-in-out infinite;
    animation-play-state: paused;
}

.assets-environments-page.assets-robot-ready .assets-robot-eye-light {
    animation-play-state: running;
}

/* Le JavaScript pilote un fondu différent à chaque allumage, sans cycle CSS concurrent. */
.assets-environments-page.assets-robot-random .assets-robot-eye-light {
    animation: none;
}

/* Éviter un œil flottant sur fond noir si son petit PNG arrive avant le décor. */
.js .assets-environments-page:not(.assets-robot-ready) .assets-robot-eye-light {
    visibility: hidden;
}

/* Allumage doux, pause allumée, puis extinction ; aucun flash rapide. */
@keyframes assets-robot-eye-power {
    0%, 12%, 82%, 100% { opacity: 0; }
    25%, 60% { opacity: 1; }
    70% { opacity: .45; }
}

/* L'œil attend le démarrage de l'intro et le chargement de ses images. */
.js .assets-environments-page.character-intro-pending:not(.character-intro-visible) .assets-robot-eye-light {
    animation-play-state: paused;
}

/* Un éclairage constant remplace le clignotement si les mouvements sont réduits. */
@media (prefers-reduced-motion: reduce) {
    .assets-environments-page .assets-robot-eye-light {
        animation: none;
        opacity: 1;
    }
}

/* Même éclaircissement initial que sur Index. */
.js .character-intro-pending .character-hero::after {
    opacity: 1;
    transition: opacity 1.1s var(--ease);
}
.js .character-intro-pending.character-intro-reveal .character-hero::after {
    opacity: 0;
}
.js .character-intro-pending .character-hero .hero-shade {
    opacity: 0;
    transition: opacity var(--intro-text-duration) var(--ease);
}
.js .character-intro-pending.character-intro-reveal .character-hero .hero-shade {
    opacity: 1;
}

/* Après le trajet du titre, la phrase apparaît entièrement en un seul fondu. */
.js .character-intro-pending .character-hero-copy > span {
    opacity: 0;
    transition: opacity var(--intro-text-duration) var(--ease);
}
.js .character-intro-pending.character-intro-content .character-hero-copy > span {
    opacity: 1;
    transition-delay: 0s;
}

/* Le menu et les mentions du bas apparaissent avec la phrase ; le logo reste fixe. */
.js .character-intro-pending .site-header .main-nav,
.js .character-intro-pending .site-header .menu-toggle,
.js .character-intro-pending .character-hero-footer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--intro-text-duration) var(--ease),
        visibility 0s linear var(--intro-text-duration);
}
.js .character-intro-pending.character-intro-content .site-header .main-nav,
.js .character-intro-pending.character-intro-content .site-header .menu-toggle,
.js .character-intro-pending.character-intro-content .character-hero-footer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s, 0s;
}

html.character-scroll-locked,
html.character-scroll-locked body { overflow: hidden; }

/* Sur mobile, les trois mentions restent présentes, sur deux rangées. */
@media (max-width: 1050px) {
    .portfolio-detail-page h1.character-category-title { top: 6.5rem; }
    .portfolio-detail-page .character-hero-grid { padding-bottom: 6rem; }
    .portfolio-detail-page .character-hero-copy { font-size: clamp(2rem, 10vw, 5rem); }
    .portfolio-detail-page .character-hero-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem;
        font-size: var(--label-size);
        text-align: left;
    }
    .portfolio-detail-page .character-hero-footer > span { display: block; }
    .portfolio-detail-page .character-hero-footer > span:first-child {
        grid-column: 1; grid-row: 1;
    }
    .portfolio-detail-page .character-hero-footer > span:last-child {
        grid-column: 2; grid-row: 1; right: 0; text-align: right;
    }
    .portfolio-detail-page .character-hero-footer > span:nth-child(2) {
        grid-column: 1 / -1; grid-row: 2; text-align: center;
    }
}
@media (max-height: 600px) {
    .portfolio-detail-page .character-hero-copy { font-size: clamp(1.75rem, 10vh, 4rem); }
    .portfolio-detail-page .character-hero-grid { padding-top: 15rem; padding-bottom: 5.5rem; }
}
@media (max-width: 1050px) and (max-height: 600px) {
    .portfolio-detail-page h1.character-category-title { top: 6rem; font-size: 1.5rem; }
    .portfolio-detail-page .character-hero-grid { padding-top: 8rem; }
}

/* Un seul fond commun pour la page Character Art. */
body.portfolio-detail-page {
    background: var(--section-bg);
}

/* Bibliothèque et pied de page laissent voir ce fond. */
.portfolio-detail-page .character-library,
.portfolio-detail-page .site-footer {
    background: transparent;
    color: var(--text);
}

/* Couleur du petit titre « ÉTUDES ». */
.character-library .eyebrow {
    color: var(--accent);
}

/* Permet au titre de sortir du premier écran.
   Les images restent contenues dans leur propre calque. */
body.portfolio-detail-page .character-hero {
    isolation: auto;
    overflow: visible;
}

/* Le titre peut rester visible au-dessus du bandeau. */

/* Afficher directement la bibliothèque restaurée, avec son titre déjà dans le bandeau. */
html.library-restoring { scroll-behavior: auto; }
html.library-restoring body { visibility: hidden; }
html.library-restoring .character-category-title,
html.library-restoring .site-header,
html.library-restoring .brand-mark { transition: none !important; }

.portfolio-detail-page h1.character-category-title {
    position: fixed;
    z-index: 101;
    pointer-events: none;
}

/* Déplacement doux, après la fin de l'animation d'arrivée. */
.portfolio-detail-page:not(.character-intro-pending) h1.character-category-title {
    transition:
        top .45s var(--ease),
        left .45s var(--ease),
        font-size .45s var(--ease),
        transform .45s var(--ease);
}

/* Position dans le bandeau lorsque celui-ci devient compact. */
.portfolio-detail-page .site-header.is-scrolled ~ #main h1.character-category-title {
    top: 2.25rem;
    left: calc(var(--pad) + 4rem + 4rem);
    font-size: 1.3rem;
    transform: translateY(-50%);
}

/* Adaptation au logo plus petit sur mobile. */
@media (max-width: 1050px) {
    .portfolio-detail-page .site-header.is-scrolled ~ #main h1.character-category-title {
        left: calc(var(--pad) + 3.75rem + .6rem);
        font-size: 1rem;
    }

    /* Évite de recouvrir les liens du menu mobile ouvert. */
    .portfolio-detail-page.menu-open h1.character-category-title {
        visibility: hidden;
    }
}

/* Respect du réglage d'accessibilité : mouvements réduits. */
@media (prefers-reduced-motion: reduce) {
    .portfolio-detail-page:not(.character-intro-pending) h1.character-category-title {
        transition: none;
    }
}

/* Contour du formulaire, bouton et messages d'erreur compris. */
.home-contact-panel > .contact-form-wrap {
    /* Le cadre suit la hauteur du formulaire. */
    align-self: start;
    min-width: 0;

    /* Épaisseur et couleur du contour. */
    border: 1px solid var(--accent);

    /* Même arrondi que le cadre extérieur de la page. */
    border-radius: var(--section-frame-radius, .8rem);

    /* Espace intérieur adapté à la taille de l'écran. */
    padding: clamp(1rem, 2vw, 2rem);
}

/* Taille de l’iris de Clenz, sans déplacer son centre. */
.character-eye-scene .hero-eye[href="assets/images/characterart oeil clenz.png"] {
    --clenz-eye-size: 1.30; /* 30 % plus grand. */

    transform-origin: 3299.5px 1148.3px;

    /* Conserve le déplacement et les déformations existants. */
    transform:
        translate3d(
            var(--eye-x, 0px),
            var(--eye-y, 0px),
            0
        )
        skew(
            var(--eye-skew-x, 0deg),
            var(--eye-skew-y, 0deg)
        )
        scale(
            calc(var(--eye-scale-x, 1) * var(--clenz-eye-size)),
            calc(var(--eye-scale-y, 1) * var(--clenz-eye-size))
        );
}

/* Sans animation : une seule colonne, sur toute la largeur disponible. */
.character-library .project-grid {
    grid-template-columns: minmax(0, 1fr);
}

/* Sans JavaScript, la liste reste lisible ; l'amélioration crée une galerie locale. */
.character-stack-stage { display: contents; }

.character-library.is-stack-ready {
    --gallery-top: 96px; /* Bandeau et marge réservés dans le calcul de taille. */
    --stack-radius: 1.5rem;
}

/* L'en-tête partage la largeur et le bord gauche du cadre de la galerie. */
.character-library.is-stack-ready .projects-toolbar {
    width: var(--gallery-width, 100%);
    max-width: 100%;
    margin-inline: auto;
}

.character-library .projects-toolbar > div {
    min-width: 0;
    width: 100%;
}

.character-library .projects-toolbar :is(.eyebrow, h2) {
    margin-inline: 0;
    text-align: left;
}

/* Compense l'approche du B : le tracé du titre s'aligne aussi sur ÉTUDES. */
.character-library .projects-toolbar h2 {
    text-indent: -.045em;
}

.character-library .projects-toolbar {
    margin-bottom: .5rem;
}

/* Invitation discrète sous Bibliothèque, sur une seule ligne. */
.character-library .character-library-hint {
    margin: 1rem 0 0;
    color: var(--accent);
    font-size: clamp(.875rem, 1.5vw, 1.5rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
}

.character-library.is-stack-ready .project-grid {
    display: block;
    position: relative;
}

.character-library.is-stack-ready .character-stack-stage {
    display: grid;
    /* Répartition : image à gauche (3 parts), texte à droite (2 parts). */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: clamp(2rem, 3vw, 4rem);
    align-items: center;
    position: relative;
    max-width: 100%;
    margin-inline: auto;
}

/* Zone 16/9 de la galerie : chaque visuel porte son propre fond et son contour.
 * Le survol agrandit l'ensemble, y compris pendant une transition. */
.character-stack-frame {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--stack-radius);
    overflow: visible;
    isolation: isolate;
    background: transparent;
    touch-action: pan-y pinch-zoom;
    transform: scale(1);
    transform-origin: center;
    transition: transform .3s var(--ease);
}

/* Deux repères discrets restent ancrés au cadre pendant les fondus et les zooms. */
.character-stack-scroll-hints {
    --gallery-hint-inset: clamp(.5rem, 1vw, .9rem);
    position: absolute;
    inset: 0;
    color: #fff;
    pointer-events: none;
}

.character-stack-scroll-hint {
    position: absolute;
    left: 50%;
    display: grid;
    width: 2.5rem;
    height: 1.5rem;
    place-items: center;
    opacity: .55;
    transform: translateX(-50%);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .95))
        drop-shadow(0 0 5px rgba(0, 0, 0, .4));
}

.character-stack-scroll-hint.is-up { top: var(--gallery-hint-inset); }
.character-stack-scroll-hint.is-down { bottom: var(--gallery-hint-inset); }

.character-stack-scroll-hint svg {
    display: block;
    width: clamp(1.1rem, 1.2vw, 1.5rem);
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Sur écran tactile, les repères indiquent le balayage horizontal existant. */
@media (hover: none) and (pointer: coarse) {
    .character-stack-scroll-hint svg { transform: rotate(-90deg); }
}

/* En plein écran, placer les repères sur l'image 16/9, à l'intérieur des bandes noires. */
.creation-gallery .character-stack-frame:fullscreen .character-stack-scroll-hints {
    inset: max(0px, calc((100vh - 100vw * 9 / 16) / 2))
        max(0px, calc((100vw - 100vh * 16 / 9) / 2));
}

/* Le contour appartient au visuel : il suit son zoom et ses coins arrondis. */
.character-library.is-stack-ready .character-study-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--accent);
    border-radius: inherit;
    z-index: 1000;
    pointer-events: none;
}

.character-stack-frame:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* Articles superposés ; le zoom porte sur le cadre ou sur son overlay. */
.character-library.is-stack-ready .project-card {
    position: absolute;
    inset: 0;
    display: block;
    height: 100%;
    background: transparent;
    box-shadow: none;
    transition: none;
}

.character-library.is-stack-ready .character-study-visual {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: var(--stack-radius);
    transform-origin: 50% 50%;
    transition: none;
}

.character-library.is-stack-ready .character-study-visual img {
    object-fit: contain;
}

.character-stack-captions {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    /* Prolonger le texte jusqu'à la marge droite, sans déplacer l'image. */
    width: calc(100% + var(--caption-extra-width, 0px));
}

.character-library.is-stack-ready .project-info {
    position: absolute;
    inset: 0 0 auto;
    display: block;
    padding: .8rem 0 .5rem;
    pointer-events: none;
    transition: none;
}

.character-library.is-stack-ready .character-study-visual,
.character-library.is-stack-ready .character-study-visual:hover {
    transform: none;
}

.character-library.is-stack-ready .character-study-visual > * {
    min-width: 0;
    min-height: 0;
}

@media (hover: hover) and (pointer: fine) {
    .character-library:not(.creation-gallery) .character-stack-frame:hover {
        transform: scale(1.025);
    }

    .character-library:not(.creation-gallery) .character-stack-frame {
        cursor: url("../images/cursorhand.svg?v=36") 2 6, pointer !important;
    }
}

/* Navigation tactile : le geste vertical reste celui de la page. */
.character-stack-controls {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.character-stack-controls button {
    min-height: 44px;
    padding: .55rem .8rem;
    border: 1px solid var(--accent);
    border-radius: .5rem;
    background: rgba(145, 166, 187, .08);
    color: var(--text);
    font: inherit;
    font-size: .85rem;
}

.character-stack-controls button:disabled {
    opacity: .4;
}

.character-stack-controls button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.character-stack-counter {
    color: var(--accent);
    font-size: .85rem;
}

@media (hover: hover) and (pointer: fine) {
    .character-stack-controls { display: none; }
}

/* Sur écran étroit, le texte retrouve sa place sous l'image. */
@media (max-width: 1050px) {
    .character-library.is-stack-ready .character-stack-stage {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .character-stack-captions {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
    }

    .character-stack-controls {
        grid-row: 3;
    }
}

/* Pied de page : CONTACT DIRECT, INFORMATIONS, puis NAVIGATION. */
.site-footer .footer-meta.footer-links {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 2rem clamp(2rem, 4vw, 5rem);
    padding-bottom: 0; /* La marge basse est déjà fournie par le footer ou le panneau CONTACT. */
}

/* Même espacement vertical que dans CONTACT sur Index. */
.site-footer .footer-links > :is(.contact-direct, .contact-information, .footer-navigation) {
    min-width: 0;
    align-items: flex-start;
    gap: .8rem;
}

/* Titres des trois colonnes : taille, couleur et capitales d'Index. */
.site-footer .footer-links .footer-column-title {
    margin: 0;
    color: var(--accent);
    font-family: var(--sans);
    font-size: var(--label-size);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Taille des textes ; les logos suivent grâce aux réglages en em existants. */
.site-footer .footer-links .contact-direct :is(a, p),
.site-footer .footer-links .contact-information p,
.site-footer .footer-links .footer-navigation a {
    font-size: 1.5rem;
}

/* Neutralise l'ancienne règle .footer-meta span sur les libellés des liens.
 * Ils doivent rester blancs et sans capitales forcées, comme dans Index. */
.site-footer .footer-links .contact-method-label {
    margin: 0;
    color: var(--text);
    font-size: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.site-footer .footer-links .contact-information p,
.site-footer .footer-links .footer-navigation a {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    overflow-wrap: anywhere;
}

.site-footer .footer-links .footer-navigation a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: .25rem;
}

/* Copyright aligné à droite ; sa disposition compacte sur ordinateur est définie ci-dessous. */
.site-footer .footer-links .footer-signature {
    grid-column: 1 / -1;
    justify-self: end;
    align-items: flex-end !important;
    gap: .25rem; /* Rapproche l'année et BVR-ART sans changer la taille des textes. */
    padding-top: 0;
    border-top: 0;
    text-align: right;
}

/* Retire la marge des anciens libellés qui écartait encore les deux lignes. */
.site-footer .footer-links .footer-signature > span {
    margin-bottom: 0;
}

/* Sur grand écran, la signature suit directement NAVIGATION.
 * CONTACT DIRECT et INFORMATIONS occupent la hauteur des deux rangées :
 * on retire ainsi la rangée de copyright qui rallongeait tout le pied de page. */
@media (min-width: 1201px) {
    .site-footer .footer-meta.footer-links {
        grid-template-areas:
            "contact informations navigation"
            "contact informations signature";
        row-gap: .25rem; /* Espace compact entre NAVIGATION et la signature. */
    }

    .site-footer .footer-links > .contact-direct { grid-area: contact; }
    .site-footer .footer-links > .contact-information { grid-area: informations; }
    .site-footer .footer-links > .footer-navigation { grid-area: navigation; }

    .site-footer .footer-links > .footer-signature {
        grid-area: signature;
        padding-top: 0;
    }
}

/* Tablette / petit ordinateur : deux colonnes, sans débordement. */
@media (max-width: 1200px) {
    .site-footer .footer-meta.footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer .footer-links .contact-direct :is(a, p),
    .site-footer .footer-links .contact-information p,
    .site-footer .footer-links .footer-navigation a {
        font-size: clamp(1rem, 2vw, 1.2rem);
    }
}

/* Téléphone : ordre de lecture conservé, une colonne. */
@media (max-width: 700px) {
    .site-footer .footer-meta.footer-links {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer .footer-links .footer-signature {
        justify-self: start;
        align-items: flex-start !important;
        text-align: left;
    }
}

/* CONTACT sur Index : le footer partagé occupe toute la largeur sous le formulaire.
 * Les espacements extérieurs sont déjà fournis par le panneau, pas par .site-footer. */
.home-contact-panel > .home-contact-footer {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Sur ordinateur, deux zones en haut et une rangée commune de liens en bas.
 * overflow-y: auto du panneau conserve l'accès au footer sur les écrans peu hauts. */
@media (min-width: 1051px) and (prefers-reduced-motion: no-preference) {
    .home-contact-panel {
        --contact-padding-top: clamp(7rem, 14vh, 12rem);
        --contact-padding-bottom: clamp(2.5rem, 4vh, 4rem);
        padding-top: var(--contact-padding-top);
        padding-bottom: var(--contact-padding-bottom);
        grid-template-rows: auto auto;
        align-content: space-between;
        row-gap: clamp(2rem, 4vh, 4rem);
    }

    .home-contact-panel > .home-contact-intro { grid-column: 1; grid-row: 1; }
    .home-contact-panel > .contact-form-wrap { grid-column: 2; grid-row: 1; }
    .home-contact-panel > .home-contact-footer { grid-row: 2; }

    /* Le contour occupe les mêmes rangées que le contenu : il grandit aussi
     * lorsqu'une erreur de formulaire ou un écran peu haut impose de défiler. */
    .home-page #contact::before {
        position: relative;
        inset: auto;
        grid-column: 1 / -1;
        grid-row: 1 / 3;
        align-self: stretch;
        margin:
            calc(var(--section-frame-top) - var(--contact-padding-top))
            calc(var(--section-frame-inline) - var(--pad))
            calc(var(--section-frame-bottom) - var(--contact-padding-bottom));
        min-width: 0;
        min-height: 0;
    }
}

/* Même resserrement vertical qu'avant sur les petits écrans d'ordinateur. */
@media (min-width: 1051px) and (max-height: 850px) and (prefers-reduced-motion: no-preference) {
    .home-contact-panel {
        --contact-padding-top: clamp(5.5rem, 11vh, 7rem);
        --contact-padding-bottom: 2rem;
    }
}

/* En lecture verticale, le footer vient après le titre et le formulaire. */
@media (max-width: 1050px), (prefers-reduced-motion: reduce) {
    .home-contact-panel > .home-contact-footer {
        order: 3;
        margin-top: 3rem;
    }
}

:root {
    /* Couleur sombre commune aux pieds de page et aux cadres principaux d'Index. */
    --footer-dark: #0b1118;
}

body > .site-footer,
.portfolio-detail-page > .site-footer,
.home-page :is(#about, #journey, #portfolio, #contact) {
    /* L'extérieur du cadre conserve la couleur de la section précédente. */
    background: var(--footer-top, var(--section-bg));
    isolation: isolate;
}

/* Le contour et son fond restent derrière les textes et les liens. */
.portfolio-detail-page > .site-footer > .footer-frame,
.home-page :is(#about, #journey, #portfolio, #contact)::before {
    z-index: -1;
}

/* Les autres pages internes utilisent un panneau arrondi sans ajouter de trait. */
body:not(.portfolio-detail-page) > .site-footer::before {
    content: "";
    position: absolute;
    inset: 1rem;
    border-radius: .8rem;
    z-index: -1;
    pointer-events: none;
}

/* Le fond est porté par les cadres : leurs arrondis découpent le dégradé. */
.portfolio-detail-page > .site-footer > .footer-frame::before,
body:not(.portfolio-detail-page) > .site-footer::before,
.home-page :is(#about, #journey, #portfolio, #contact)::before {
    background: linear-gradient(
        to bottom,
        var(--footer-top, var(--section-bg)) var(--footer-start, 0%),
        var(--footer-dark) 100%
    );
}

/* Les pages temporaires ont actuellement un fond noir au-dessus. */
body.temporary-page > .site-footer {
    --footer-top: #000;
}

/* Même progression sur Character Art et tous les cadres extérieurs d'Index.
 * Le sélecteur vise #portfolio, jamais les trois .discipline-menu-item. */
.portfolio-detail-page > .site-footer,
.home-page :is(#about, #journey, #portfolio, #contact) {
    --footer-start: 55%;
}

/* Même ombre à l'accueil et en fin de page, y compris CONTACT sur Index.
 * Les span et em l'héritent ; menus, petits textes et galerie restent inchangés. */
.home-page .hero-title,
.portfolio-detail-page .character-hero-copy,
.site-footer .footer-heading,
.home-page .home-contact-intro h2 {
    text-shadow: var(--headline-shadow);
}

/* Personnage ou animation transparente, au-dessus du fond porté par le cadre. */
.character-library .character-study-visual > .character-study-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    z-index: 1;
    pointer-events: none;
}

.assets-environments-page .character-study-visual > video.character-study-overlay {
    object-fit: cover;
    border-radius: inherit;
}


/* Pages dédiées à chaque création, avec les mêmes visuels que leur bibliothèque. */
.character-library a.character-study-visual:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.character-library #projects-title { scroll-margin-top: 7rem; }

.creation-detail-page .site-header {
    height: 4.5rem;
    background: rgba(9, 9, 9, .94);
    border-color: var(--line);
}

.creation-detail-page .site-header .brand-mark {
    width: 4rem;
    height: 4rem;
    top: 0;
}

.creation-detail {
    width: min(100%, 120rem);
    margin-inline: auto;
    padding-top: 8rem;
    padding-bottom: 4rem;
}

.creation-back {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding-block: .5rem;
    color: var(--accent);
    font-size: clamp(1rem, 1.2vw, 1.25rem);
}

.creation-back:hover { color: var(--text); }
.creation-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.creation-intro { margin: 2rem 0; }
.creation-intro h1 {
    margin: .8rem 0 0;
    font-size: clamp(2.5rem, 5vw, 6rem);
    line-height: 1.05;
    letter-spacing: -.05em;
    overflow-wrap: anywhere;
}

.creation-project {
    margin: 1rem 0 0;
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

.creation-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--accent);
    border-radius: 1.5rem;
    background: #41678b center / cover no-repeat;
}

.creation-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.creation-summary {
    max-width: 80ch;
    margin: 1.75rem 0 0;
    color: var(--accent);
    font-size: clamp(1.15rem, 1.5vw, 1.75rem);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.creation-back-bottom { margin-top: 2rem; }

@media (max-width: 1050px) {
    .creation-detail { padding-top: 6rem; }
    .creation-intro { margin-block: 1.5rem; }
    .creation-visual { border-radius: 1rem; }
}


/* Sous-pages : pied de page compact, directement après le contenu de la création. */
.creation-detail-page .creation-detail {
    padding-bottom: 1.5rem;
}

.creation-detail-page > .site-footer {
    display: block;
    min-height: 0;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    --section-frame-top: 0px;
}

.creation-detail-page > .site-footer > .footer-frame::before {
    inset: 0 var(--section-frame-inline) var(--section-frame-bottom);
    height: auto;
}


/* Sous-pages : image et description visibles ensemble sur ordinateur. */
.creation-detail {
    --creation-image-limit: max(18rem, calc((100svh - 26rem) * 16 / 9));
    display: grid;
    grid-template-columns: minmax(0, min(60%, var(--creation-image-limit))) minmax(0, 1fr);
    column-gap: clamp(2rem, 3vw, 4rem);
    align-items: start;
    padding-top: 6rem;
}

.creation-detail .creation-back {
    grid-column: 1 / -1;
    justify-self: start;
}

.creation-detail .creation-intro {
    grid-column: 1 / -1;
    margin: 1.25rem 0 1.75rem;
}

.creation-detail .creation-visual {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
}

.creation-detail .creation-summary {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    min-width: 0;
    max-width: none;
    margin: 0;
}

@media (max-width: 1050px) {
    .creation-detail { grid-template-columns: minmax(0, 1fr); }

    .creation-detail :is(.creation-visual, .creation-summary) {
        grid-column: 1;
        grid-row: auto;
    }

    .creation-detail .creation-summary { margin-top: 1.5rem; }
}


/* Les sous-pages réutilisent la galerie et les transitions des pages principales. */
.creation-detail > .creation-gallery {
    grid-column: 1 / -1;
    min-width: 0;
}

.creation-gallery.is-stack-ready .character-stack-stage,
.creation-gallery:not(.is-stack-ready) .project-card {
    display: grid;
    grid-template-columns: minmax(0, min(60%, var(--creation-image-limit))) minmax(0, 1fr);
    column-gap: clamp(2rem, 3vw, 4rem);
    align-items: center;
    width: 100%;
    margin-inline: 0;
}

.creation-gallery .character-stack-captions { width: 100%; }
.creation-gallery .project-card .project-info,
.creation-gallery.is-stack-ready .project-info { padding: 0; }

.creation-gallery .project-info .character-study-summary {
    margin: 0;
    font-size: clamp(1.15rem, 1.5vw, 1.75rem);
}

.creation-gallery .project-info h3 + .character-study-summary { margin-top: .8rem; }
.creation-gallery:not(.is-stack-ready) .creation-visual { grid-column: 1; grid-row: 1; }
.creation-gallery:not(.is-stack-ready) .project-info { grid-column: 2; grid-row: 1; }

@media (max-width: 1050px) {
    .creation-gallery.is-stack-ready .character-stack-stage,
    .creation-gallery:not(.is-stack-ready) .project-card {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .creation-gallery .character-stack-captions { margin-top: 1.5rem; }
    .creation-gallery:not(.is-stack-ready) .project-info {
        grid-column: 1;
        grid-row: 2;
        margin-top: 1.5rem;
    }
}

.character-study-summary {
    white-space: pre-line;
}

@media (min-width: 1051px) {
    .creation-gallery .character-stack-captions {
        align-self: start;
    }
}

/* Plein écran des sous-pages : le même carrousel reste actif. */
.creation-gallery .creation-fullscreen-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    min-height: 44px;
    padding: .5rem .8rem;
    border: 1px solid var(--accent);
    border-radius: .5rem;
    background: rgba(9, 9, 9, .85);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.creation-gallery .creation-fullscreen-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.creation-gallery .character-stack-frame:fullscreen {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    border-radius: 0;
    background: #000;
    overflow: hidden;
    transform: none;
    transition: none;
    touch-action: pinch-zoom;
}

.creation-gallery .character-stack-frame:fullscreen::backdrop { background: #000; }

.creation-gallery .character-stack-frame:fullscreen .project-card {
    inset: 50% auto auto 50%;
    width: min(100vw, calc(100vh * 16 / 9));
    height: auto;
    aspect-ratio: 16 / 9;
    transform-origin: center;
    transform: translate(-50%, -50%)
        translate(var(--creation-fullscreen-x, 0px), var(--creation-fullscreen-y, 0px))
        scale(var(--creation-fullscreen-zoom, 1));
}

.creation-gallery .character-stack-frame:fullscreen .creation-fullscreen-button {
    display: none;
}


/* Sous-pages : bandeau libre d'images non cliquables avant le pied de page. */
.creation-ribbon {
    /* Vitesse en pixels par seconde : diminuer la valeur ralentit le bandeau. */
    --creation-ribbon-speed: 48;
    --creation-ribbon-card-width: clamp(10rem, 18vw, 20rem);
    --creation-ribbon-gap: clamp(.75rem, 1.5vw, 1.5rem);
    width: min(100%, 120rem);
    margin-inline: auto;
    padding-top: clamp(2rem, 4vw, 4.5rem);
    padding-bottom: clamp(4rem, 6vw, 7rem);
}

/* Une liste vide masque les visuels en conservant l'espace du bandeau complet. */
.creation-ribbon-empty { visibility: hidden; }
.creation-ribbon-empty .creation-ribbon-window {
    height: var(--creation-ribbon-card-width);
}

.creation-ribbon .creation-ribbon-title {
    margin: 0 0 1.25rem;
    font-size: clamp(1.75rem, 2.5vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.035em;
}

.creation-ribbon-window {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 1.25rem;
}

.creation-ribbon-window:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 5px;
}

.creation-ribbon-track,
.creation-ribbon-group {
    display: flex;
    width: max-content;
}

.creation-ribbon-group {
    flex-shrink: 0;
    gap: var(--creation-ribbon-gap);
    padding-right: var(--creation-ribbon-gap);
}

.creation-ribbon-item {
    flex: 0 0 var(--creation-ribbon-card-width);
    width: var(--creation-ribbon-card-width);
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 1.25rem;
    background: transparent;
}

.creation-ribbon-item img {
    width: 100%;
    height: 100%;
    /* Adapter tout le PNG au carré, sans le déformer ni le recadrer. */
    object-fit: contain;
}

.creation-ribbon.is-ready .creation-ribbon-window { overflow-x: hidden; }
.creation-ribbon.is-ready .creation-ribbon-track {
    animation: creation-ribbon-scroll var(--creation-ribbon-duration) linear infinite;
}

.creation-ribbon-window:is(:hover, :focus-visible) .creation-ribbon-track,
.creation-ribbon.is-paused .creation-ribbon-track {
    animation-play-state: paused;
}

@keyframes creation-ribbon-scroll {
    to { transform: translateX(calc(-1 * var(--creation-ribbon-distance))); }
}

@media (prefers-reduced-motion: reduce) {
    .creation-ribbon.is-ready .creation-ribbon-window { overflow-x: auto; }
    .creation-ribbon .creation-ribbon-track { animation: none; transform: none; }
    .creation-ribbon [data-ribbon-copy],
    .creation-ribbon [data-ribbon-duplicate] { display: none; }
}

/* Adaptation des derniers composants aux téléphones et tablettes. */
@media (max-width: 1050px) {
    .home-page .site-header,
    .home-page .site-header.is-scrolled,
    .portfolio-detail-page .site-header,
    .portfolio-detail-page .site-header.is-scrolled {
        background: #090909;
    }
    .portfolio-detail-page:not(.character-intro-pending) h1.character-category-title {
        transition: none;
    }
    .portfolio-detail-page h1.character-category-title {
        font-size: clamp(1.5rem, 5.5vw, 2rem);
        max-width: calc(100% - 2 * var(--pad));
    }

    .portfolio-detail-page .site-header.is-scrolled ~ #main h1.character-category-title {
        max-width: calc(100% - 2 * var(--pad) - 3.75rem - .6rem - 5rem - .75rem);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .character-library .character-library-hint {
        margin-top: .5rem;
        font-size: 1rem;
        line-height: 1.4;
        white-space: normal;
    }

    .creation-back,
    .site-footer .footer-links .footer-navigation a {
        display: inline-flex;
        align-items: center;
        min-width: 44px;
        min-height: 44px;
    }

    .site-footer .footer-links .contact-method {
        min-height: 44px;
    }

    .form-row input:not([type="radio"]) { min-height: 44px; }

    .character-stack-controls button,
    .creation-gallery .creation-fullscreen-button {
        min-width: 44px;
        font-size: 1rem;
    }
}

/* Libérer la place du nom de la catégorie dans le bandeau des petits téléphones. */
@media (max-width: 520px) {
    .menu-toggle { min-width: 44px; width: 44px; padding: 0; justify-content: center; }
    .menu-toggle > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .portfolio-detail-page .site-header.is-scrolled ~ #main h1.character-category-title {
        max-width: calc(100% - 2 * var(--pad) - 3.75rem - .6rem - 44px - .75rem);
        font-size: clamp(.8rem, 3.2vw, .95rem);
    }
}

/* Images disponibles même quand JavaScript est désactivé. */
.character-library .character-study-visual .character-study-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Plein écran de secours pour les navigateurs sans plein écran sur un conteneur. */
body.gallery-modal-open { overflow: hidden; }
.creation-fullscreen-dialog {
    inset: 0;
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #000;
    color: var(--text);
    overflow: hidden;
}
.creation-fullscreen-dialog::backdrop { background: #000; }
.creation-gallery .character-stack-frame.is-expanded {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    background: #000;
    overflow: hidden;
    transform: none;
    transition: none;
    touch-action: pinch-zoom;
}
.creation-gallery .character-stack-frame.is-expanded .project-card {
    inset: 50% auto auto 50%;
    width: min(100dvw, calc(100dvh * 16 / 9));
    height: auto;
    aspect-ratio: 16 / 9;
    transform-origin: center;
    transform: translate(-50%, -50%)
        translate(var(--creation-fullscreen-x, 0px), var(--creation-fullscreen-y, 0px))
        scale(var(--creation-fullscreen-zoom, 1));
}
.creation-gallery .character-stack-frame.is-expanded .character-stack-scroll-hints {
    inset: max(0px, calc((100dvh - 100dvw * 9 / 16) / 2))
        max(0px, calc((100dvw - 100dvh * 16 / 9) / 2));
}
.creation-gallery .character-stack-frame.is-expanded .creation-fullscreen-button { display: none; }
.creation-fullscreen-close {
    position: absolute;
    top: max(.75rem, env(safe-area-inset-top));
    right: max(.75rem, env(safe-area-inset-right));
    z-index: 10000;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--accent);
    border-radius: .5rem;
    background: rgba(9, 9, 9, .85);
    color: var(--text);
    font-size: 1.75rem;
    line-height: 1;
}
.creation-fullscreen-close[hidden] { display: none; }
.creation-fullscreen-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* Adaptation fluide : la composition 4K garde ses plafonds, les écrans plus
 * petits retrouvent des tailles proportionnelles et un contenu accessible. */
.character-library:not(.creation-gallery) {
    padding-block: clamp(3rem, 6vw, 11rem);
}
.character-library:not(.creation-gallery) .projects-toolbar h2 {
    font-size: clamp(2rem, 4.2vw, 10rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
}
.character-library .character-library-hint {
    max-width: 100%;
    white-space: normal;
    text-wrap: pretty;
}
.character-library .project-info h3 {
    font-size: clamp(1.5rem, 1.7vw, 4rem);
    line-height: 1.2;
}
.character-library .project-info .character-study-project {
    font-size: clamp(1.125rem, 1.3vw, 2.5rem);
    line-height: 1.4;
}
.character-library .project-info .character-study-summary {
    font-size: clamp(1.125rem, 1.2vw, 2rem);
    line-height: 1.6;
}
.creation-gallery .project-info .character-study-summary {
    font-size: clamp(1.125rem, 1.15vw, 1.75rem);
}
.creation-intro h1 {
    font-size: clamp(2rem, 2.5vw, 6rem);
    line-height: 1.1;
}
.creation-project {
    font-size: clamp(1.125rem, 1.1vw, 2rem);
}
.site-footer .footer-heading {
    font-size: clamp(2rem, 4.2vw, 10rem);
}
.site-footer .footer-links .contact-direct :is(a, p),
.site-footer .footer-links .contact-information p,
.site-footer .footer-links .footer-navigation a {
    font-size: clamp(1rem, .9vw, 1.5rem);
}
.site-footer .footer-links .footer-column-title {
    font-size: clamp(.875rem, .7vw, 1.25rem);
}

@media (min-width: 1051px) {
    .home-page .hero .hero-title,
    .portfolio-detail-page .character-hero-copy {
        font-size: clamp(2.5rem, min(5vw, 10svh), 8rem);
    }
    .portfolio-detail-page h1.character-category-title {
        top: clamp(8rem, 15svh, 20rem);
        font-size: clamp(1.5rem, 1.65vw, 3.5rem);
    }
    .portfolio-detail-page .site-header.is-scrolled ~ #main h1.character-category-title {
        top: 2.25rem;
        font-size: 1.3rem;
    }
    .home-about-panel {
        padding-top: clamp(6.5rem, 9svh, 10rem);
        padding-bottom: clamp(1.5rem, 3svh, 3rem);
        gap: clamp(2rem, 5vw, 10rem);
    }
    .home-about-photo {
        width: min(100%, 42rem, calc(100svh - 10rem));
    }
    .home-about-copy h2 {
        font-size: clamp(3rem, min(5vw, 10svh), 9rem);
        line-height: 1;
    }
    .home-journey-panel {
        padding-top: clamp(8rem, 8.8svh, 10rem);
    }
    .home-journey-heading {
        margin-bottom: clamp(1.5rem, 5.6svh, 7.5rem);
        gap: clamp(1.5rem, 4vw, 7rem);
    }
    .home-journey-title-row > h2 {
        font-size: clamp(2.75rem, min(3.5vw, 8svh), 5.5rem);
        line-height: 1;
    }
    .home-journey-entry {
        padding-block: clamp(.35rem, .65svh, .65rem);
    }
    .home-journey-section > h3 {
        font-size: clamp(1.125rem, 1.5vw, 2rem);
        line-height: 1.15;
    }
    .home-contact-panel {
        --contact-padding-top: clamp(7rem, 9svh, 12rem);
        --contact-padding-bottom: clamp(1.5rem, 3svh, 4rem);
        row-gap: clamp(1.5rem, 3svh, 4rem);
        column-gap: clamp(2rem, 4vw, 7rem);
    }
    .home-contact-intro h2 {
        font-size: clamp(2.75rem, min(4.2vw, 10svh), 7.5rem);
        line-height: 1.05;
    }
    .home-contact-panel .contact-form-wrap {
        margin-top: clamp(1rem, 5.9svh, 8rem);
    }
    .home-contact-panel .form-row {
        padding-block: clamp(.75rem, 1.7svh, 1.5rem);
    }
    .discipline-menu-item {
        grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
        gap: clamp(1.5rem, 3vw, 5rem);
    }
    .discipline-menu-copy strong {
        font-size: clamp(2rem, min(4.5vw, 8svh), 6rem);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }
    .discipline-menu-copy small {
        font-size: clamp(.875rem, .8vw, 1.25rem);
        line-height: 1.5;
    }
    .discipline-menu-visual {
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
    }
    .discipline-menu-visual > img,
    .discipline-menu-video-frame {
        min-height: 0;
        max-height: 100%;
    }
    .discipline-menu-video-frame video { object-fit: contain; }
}

/* Le contexte peut revenir à la ligne avant de devenir trop petit à lire. */
@media (max-width: 1600px) {
    .character-library .project-info :is(h3, .character-study-project) {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Le menu se replie dès que les liens et le nom de catégorie manquent de place,
 * indépendamment du mode horizontal ou vertical des sections d'Index. */
@media (max-width: 1400px) {
    .site-header .brand-mark {
        width: 4rem;
        height: 4rem;
        top: 0;
    }
    .menu-toggle {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 44px;
        min-height: 44px;
        gap: .75rem;
        padding: .5rem;
        color: var(--text);
        cursor: pointer;
    }
    .brand { position: relative; z-index: 2; }
    .menu-toggle i, .menu-toggle i::after {
        display: block;
        width: 1.4rem;
        height: 1px;
        background: currentColor;
        transition: transform .3s;
    }
    .menu-toggle i::after { content: ""; transform: translateY(.35rem); }
    .menu-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
    .menu-toggle[aria-expanded="true"] i::after { transform: rotate(90deg); }
    .main-nav {
        position: fixed;
        z-index: 1;
        inset: 0;
        display: flex;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: safe center;
        gap: 0;
        padding: max(6rem, env(safe-area-inset-top)) var(--pad) max(2rem, env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #0b0b09;
        transform: translateY(-105%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .45s var(--ease), opacity .3s, visibility 0s linear .45s;
    }
    .menu-open .main-nav {
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }
    .nav-label { display: block; margin-bottom: 1rem; }
    .main-nav > .nav-link,
    .home-page .site-header .main-nav > .nav-link {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: .75rem 0;
        border-bottom: 1px solid var(--line);
        color: var(--text);
        font-size: clamp(1.5rem, min(5vw, 7svh), 3rem);
        line-height: 1.2;
        letter-spacing: -.025em;
        text-transform: none;
        white-space: normal;
    }
    .main-nav > .nav-link span {
        display: block;
        padding-top: .35rem;
        color: var(--accent);
        font-size: .65rem;
    }
    .main-nav > .nav-link::after { display: none; }
    .main-nav > .nav-link.is-section-active { color: var(--accent) !important; }
    .home-page .site-header:not(.is-scrolled) .main-nav > .nav-link,
    .home-page .site-header:not(.is-scrolled) .menu-toggle {
        color: var(--text);
    }
    .main-nav .language-switch { flex: 0 0 auto; }
    .main-nav .language-option { min-width: 44px; min-height: 44px; }
    .portfolio-detail-page.menu-open h1.character-category-title { visibility: hidden; }
}

@media (max-width: 1050px) {
    .home-about-panel,
    .home-journey-panel,
    .home-contact-panel {
        padding-block: clamp(2.5rem, 7vw, 5rem);
    }
    .home-page :is(#about, #journey, #contact) {
        padding-inline: max(var(--pad), calc(var(--section-frame-inline, 1rem) + 1rem));
    }
    .home-page #portfolio {
        --portfolio-padding-inline: max(var(--pad), calc(var(--section-frame-inline, 1rem) + 1rem));
    }
    .home-about-copy h2,
    .home-journey-title-row > h2 {
        font-size: clamp(2.25rem, 8vw, 4.5rem);
        line-height: 1.1;
    }
    .home-about-photo {
        width: min(100%, 70vw, 26rem);
        justify-self: center;
    }
    .home-journey-heading { margin-bottom: 2rem; }
    .home-journey-tools {
        gap: clamp(.5rem, 1.7vw, 1rem);
        padding: .75rem .75rem 1.75rem;
    }
    .home-journey-tools::before { inset: 0; }
    .home-journey-tools li { width: clamp(2rem, 6vw, 2.75rem); }
    .home-contact-intro h2 {
        font-size: clamp(2.25rem, 8vw, 4.5rem);
        line-height: 1.1;
    }
    .home-page .hero .hero-title,
    .portfolio-detail-page .character-hero-copy {
        font-size: clamp(2rem, min(9vw, 10svh), 5rem);
        line-height: 1.08;
        overflow-wrap: anywhere;
    }
    .portfolio-detail-page .character-hero-grid {
        padding-bottom: max(7rem, calc(env(safe-area-inset-bottom) + 6rem));
    }
    .portfolio-detail-page h1.character-category-title {
        max-width: calc(100% - 2 * var(--pad));
        font-size: clamp(1.25rem, 4.5vw, 2rem);
        line-height: 1.15;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .home-page .hero-footer,
    .portfolio-detail-page .character-hero-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: .6rem .75rem;
        bottom: max(1.25rem, env(safe-area-inset-bottom));
        font-size: clamp(.75rem, 1.7vw, 1rem);
        line-height: 1.4;
    }
    .home-page .hero-footer > span,
    .portfolio-detail-page .character-hero-footer > span { min-width: 0; display: block; }
    .home-page .hero-footer > span:first-child,
    .portfolio-detail-page .character-hero-footer > span:first-child { grid-column: 1; grid-row: 1; text-align: left; }
    .home-page .hero-footer > span:last-child,
    .portfolio-detail-page .character-hero-footer > span:last-child { grid-column: 2; grid-row: 1; text-align: right; }
    .home-page .hero-footer > .scroll-cue,
    .portfolio-detail-page .character-hero-footer > .scroll-cue {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: center;
        text-align: center;
    }
    .character-library.is-stack-ready .character-stack-stage {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }
    .character-library.is-stack-ready .character-stack-captions {
        width: 100%;
        max-width: 100%;
        margin-top: 1rem;
    }
    .character-library.is-stack-ready .project-info {
        padding-block: .5rem;
    }
    .creation-gallery .project-info .character-study-summary { line-height: 1.65; }
    .creation-detail { padding-top: 6rem; }
    .creation-detail .creation-intro { margin-top: .75rem; margin-bottom: 1.25rem; }
    .creation-intro h1 { font-size: clamp(2rem, 6vw, 3rem); }
    .creation-project { font-size: clamp(1.125rem, 3vw, 1.5rem); }
    .character-library.is-stack-ready { --stack-radius: clamp(.75rem, 2vw, 1.5rem); }
    .site-footer .footer-heading { font-size: clamp(1.5rem, 7.5vw, 4rem); line-height: 1.2; }
    .site-footer .footer-heading em { white-space: normal; }
    .site-footer .footer-meta.footer-links { gap: 1.5rem; }
    .site-footer .footer-links .footer-signature {
        max-width: 100%;
    }
}

@media (max-width: 1050px) and (orientation: landscape) and (max-height: 600px) {
    .character-library.is-stack-ready .character-stack-stage {
        max-width: min(100%, max(15rem, calc((100svh - 6rem) * 16 / 9)));
        margin-inline: 0;
    }
    .portfolio-detail-page .character-hero-grid { padding-top: 9rem; }
    .portfolio-detail-page h1.character-category-title { top: 6rem; }
    .main-nav { justify-content: flex-start; padding-top: 5rem; }
    .main-nav > .nav-link,
    .home-page .site-header .main-nav > .nav-link {
        padding-block: .5rem;
        font-size: 1.5rem;
    }
}


/* MON PARCOURS : le cadre englobe aussi le contenu qui dépasse la hauteur
 * utile du navigateur. Les marges gardent le texte à l'intérieur du trait. */
@media (min-width: 1051px) and (prefers-reduced-motion: no-preference) {
    .home-page #journey {
        --journey-padding-top: clamp(8rem, 8.8svh, 10rem);
        --journey-padding-bottom: 1.5rem;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        padding-top: var(--journey-padding-top);
        padding-bottom: var(--journey-padding-bottom);
    }

    .home-page #journey > .home-journey-copy {
        grid-area: 1 / 1;
        min-width: 0;
    }

    .home-page #journey::before {
        position: relative;
        inset: auto;
        grid-area: 1 / 1;
        align-self: stretch;
        margin:
            calc(var(--section-frame-top) - var(--journey-padding-top))
            calc(var(--section-frame-inline) - var(--pad))
            calc(var(--section-frame-bottom) - var(--journey-padding-bottom));
        min-width: 0;
        min-height: 0;
    }
}

/* Le décalage de 50rem du CV ne convient pas aux écrans Full HD et plus petits. */
@media (min-width: 1051px) and (max-width: 2200px) {
    .home-journey-title-row > .journey-cv-button { margin-left: 0; }
}

@media (min-width: 1051px) and (max-height: 1000px) and (prefers-reduced-motion: no-preference) {
    .home-page #journey {
        --journey-padding-top: calc(var(--section-frame-top) + 1.5rem);
    }

    .home-journey-heading { margin-bottom: clamp(1.25rem, 2.5svh, 2rem); }
}


/* Lien des mentions légales dans le bloc partagé de CONTACT et des footers. */
.site-footer .footer-links .contact-information > a {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: clamp(1rem, .9vw, 1.5rem);
    overflow-wrap: anywhere;
}
.site-footer .footer-links .contact-information > a:focus-visible,
.legal-return:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: .25rem;
}

/* Page de lecture des mentions fournies, indépendante des scènes animées. */
.legal-page { background: var(--section-bg); }
.legal-page .site-header {
    height: 4.5rem;
    background: rgba(9, 9, 9, .94);
    border-color: var(--line);
}
.legal-page .site-header .brand-mark { width: 4rem; height: 4rem; top: 0; }
.legal-notice {
    position: relative;
    isolation: isolate;
    width: min(100%, 78rem);
    margin-inline: auto;
    padding-inline: max(var(--pad), 2rem);
    padding-top: clamp(7rem, 10vw, 10rem);
    padding-bottom: clamp(3rem, 6vw, 6rem);
}
/* Le contour englobe le titre et la totalité des mentions, avec une marge sur mobile. */
.legal-notice::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 6rem 1rem 1.5rem;
    box-sizing: border-box;
    border: 1px solid var(--accent);
    border-radius: .8rem;
    pointer-events: none;
}
.legal-return {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 2rem;
    color: var(--accent);
    font-size: 1rem;
}
.legal-notice h1 {
    margin: 0 0 2.5rem;
    font-size: clamp(2.25rem, 4.5vw, 5rem);
    line-height: 1.1;
    letter-spacing: -.05em;
    overflow-wrap: anywhere;
}
.legal-content { overflow-wrap: anywhere; }
.legal-content h2 {
    margin: 2.5rem 0 1rem;
    font-size: clamp(1.375rem, 2vw, 2rem);
    line-height: 1.25;
    letter-spacing: -.025em;
}
.legal-content p,
.legal-content li {
    font-size: clamp(1.0625rem, 1vw, 1.25rem);
    line-height: 1.7;
}
.legal-content p { margin: 0 0 1rem; }
.legal-content ul { margin: 0 0 1rem; padding-left: 1.5rem; list-style: disc; }
.legal-content li + li { margin-top: .25rem; }
.legal-content .legal-updated { margin-top: 3rem; color: var(--accent); }
.legal-page .site-footer { padding-top: 2rem; }