@font-face {
    font-family: "Coolvetica";
    src: url("../assets/fonts/coolvetica-regular.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "Creato";
    src: url("../assets/fonts/creato-display-regular.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "Creato";
    src: url("../assets/fonts/creato-display-bold.otf") format("opentype");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "ZT Nature";
    src: url("../assets/fonts/zt-nature-medium.ttf") format("truetype");
    font-display: swap;
}

:root {
    --black: #000000;
    --panel: #141414;
    --ink: #171717;
    --cream: #fdf6ed;
    --cream-deep: #f5eadc;
    --white: #ffffff;
    --muted: #b8b2aa;
    --orange: #ff5a17;
    --blue: #275cd7;
    --blue-soft: rgba(39, 92, 215, 0.42);
    --line: rgba(255, 255, 255, 0.14);
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
    --ease: 220ms ease;
    --max: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: "Creato", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

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

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(18px, 3vw, 34px) clamp(20px, 4vw, 58px);
    pointer-events: none;
}

.brand-mark,
.menu-toggle {
    pointer-events: auto;
}

.brand-mark {
    width: clamp(42.5px, 4.76vw, 69.7px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    position: relative;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(1) invert(1) brightness(1.35) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 10px rgba(0, 0, 0, 0.28));
    opacity: 0.9;
    transition: opacity var(--ease), transform var(--ease);
}

.brand-mark:hover img {
    opacity: 1;
    transform: scale(1.04);
}

.menu-toggle {
    width: 44px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    display: grid;
    gap: 7px;
    align-content: center;
}

.menu-toggle span:not(.sr-only) {
    display: block;
    height: 2px;
    background: var(--cream);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.92)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.58));
    box-shadow: 0 0 0 0.45px rgba(0, 0, 0, 0.36);
    transition: transform var(--ease), opacity var(--ease);
}

.menu-toggle span:first-child {
    width: 32px;
    justify-self: end;
}

.menu-toggle span:nth-child(2) {
    width: 25px;
    justify-self: end;
}

.menu-toggle span:nth-child(3) {
    width: 32px;
    justify-self: end;
}

.menu-toggle:hover span:first-child {
    transform: translateX(-5px);
}

.menu-toggle:hover span:nth-child(2) {
    transform: translateX(3px);
}

.menu-toggle:hover span:nth-child(3) {
    transform: translateX(-2px);
}

.menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: translateX(12px);
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.menu-panel {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--cream);
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-18px);
    transition: opacity var(--ease), visibility var(--ease), transform var(--ease);
}

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

.menu-panel:not(.is-open) * {
    pointer-events: none !important;
}

.menu-panel__inner {
    min-height: 100%;
    width: min(980px, calc(100% - 44px));
    margin: 0 auto;
    padding: clamp(80px, 12vw, 150px) 0 60px;
    position: relative;
}

.menu-close {
    position: absolute;
    top: clamp(28px, 5vw, 64px);
    right: 0;
    width: 54px;
    height: 54px;
    border: 0;
    background: transparent;
    transition: transform 180ms ease, filter 180ms ease;
}

.menu-close:hover {
    transform: scale(1.06) rotate(4deg);
    filter: drop-shadow(0 0 8px rgba(255, 90, 23, 0.22));
}

.menu-close::before,
.menu-close::after {
    content: "";
    position: absolute;
    top: 26px;
    left: 7px;
    width: 40px;
    height: 5px;
    background: #c92525;
    transition: background 180ms ease, box-shadow 180ms ease;
}

.menu-close:hover::before,
.menu-close:hover::after {
    background: #e23828;
    box-shadow: 0 0 10px rgba(255, 90, 23, 0.22);
}

.menu-close::before {
    transform: rotate(45deg);
}

.menu-close::after {
    transform: rotate(-45deg);
}

.menu-panel__inner > ul {
    list-style: none;
    display: grid;
    gap: min(clamp(26px, 5vw, 58px), 4.2vh);
    padding: 0;
    margin: 0;
}

.menu-item {
    position: relative;
}

.menu-panel a {
    font-family: "Coolvetica", Arial, sans-serif;
    /* Le plafond en rem seul ignorait la hauteur de l'ecran : sur un portable
       15 pouces (fenetre ~860px de haut, moins encore avec l'echelle Windows a
       125 %), quatre entrees a 115px debordaient de l'ecran et le menu se
       lisait comme un bug. Le min() ajoute une borne en vh -- sur un moniteur
       de bureau elle ne mord pas, sur un portable elle ramene le menu entier
       dans la fenetre. */
    font-size: min(clamp(3rem, 9vw, 7.2rem), 9.5vh);
    line-height: 0.92;
    font-weight: 600;
    letter-spacing: 0;
    transition: color var(--ease), transform var(--ease);
    display: inline-block;
}

.menu-panel a:hover,
.menu-panel a:focus-visible {
    color: var(--orange);
    transform: translateX(10px);
}

.menu-panel a.menu-link--blue:hover,
.menu-panel a.menu-link--blue:focus-visible {
    color: var(--blue);
    text-shadow: 0 0 18px rgba(39, 92, 215, 0.24);
}

.menu-submenu {
    list-style: none;
    display: grid;
    gap: clamp(8px, 1.2vw, 13px);
    max-height: 0;
    margin: 0 0 0 clamp(22px, 4vw, 58px);
    padding: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
        max-height 360ms cubic-bezier(0.19, 1, 0.22, 1),
        margin 280ms cubic-bezier(0.19, 1, 0.22, 1),
        opacity 260ms cubic-bezier(0.2, 0.62, 0.28, 1),
        visibility 260ms ease,
        transform 340ms cubic-bezier(0.19, 1, 0.22, 1);
}

.menu-panel.is-open .menu-item--has-submenu:hover .menu-submenu,
.menu-panel.is-open .menu-item--has-submenu:focus-within .menu-submenu {
    max-height: 220px;
    margin-top: clamp(10px, 1.3vw, 18px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.menu-submenu a {
    color: rgba(22, 19, 17, 0.68);
    font-size: clamp(1.15rem, 2.4vw, 2.2rem);
    line-height: 1;
    font-weight: 500;
}

.menu-submenu a:hover,
.menu-submenu a:focus-visible {
    color: var(--blue);
    transform: translateX(8px);
    text-shadow: 0 0 14px rgba(39, 92, 215, 0.2);
}

/* La teinte ne repond qu'au survol et au focus, jamais a [aria-current].
   Ces deux selecteurs portaient aussi sur [aria-current="page"], et deux
   regles supplementaires venaient ensuite l'annuler pour les pages legales
   -- en reecrivant la couleur en dur (rgba(22, 19, 17, 0.68), la teinte du
   sous-menu desktop). Sur mobile, ou le sous-menu est en var(--ink), cette
   couleur en dur ressortait plus claire que ses voisines : les trois liens
   legaux paraissaient grises sur leur propre page.

   Marquer la page courante n'a de toute facon jamais rien colore ailleurs :
   aria-current n'est pose que sur les 4 pages legales (voir
   includes/navigation.php), les sous-liens metiers ne l'ont jamais. Le
   retirer d'ici aligne les legales sur ce comportement et rend les deux
   regles d'annulation sans objet. */
.menu-submenu a.menu-submenu__link--orange:hover,
.menu-submenu a.menu-submenu__link--orange:focus-visible {
    color: #ff5e0e;
    text-shadow: 0 0 14px rgba(255, 94, 14, 0.22);
}

.menu-submenu a.menu-submenu__link--blue:hover,
.menu-submenu a.menu-submenu__link--blue:focus-visible {
    color: var(--blue);
    text-shadow: 0 0 14px rgba(39, 92, 215, 0.2);
}

.hero {
    min-height: 760px;
    height: 100vh;
    background: var(--black);
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.hero::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.56));
}

.hero::after {
    box-shadow: inset 0 0 0 44px var(--black);
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-page {
    position: relative;
    background: var(--black);
}

.home-page .hero {
    min-height: calc(100vh + 2px);
    /* svh et non dvh : dvh suit la hauteur *dynamique* du viewport, qui varie
       pendant le scroll sur mobile quand la barre d'adresse se retracte. Le
       hero se redimensionnait alors en pleine lecture et poussait tout le
       contenu en dessous - c'est ce qui faisait "sauter" la page. svh est
       stable (hauteur barre visible), donc plus aucun reflow au scroll. */
    min-height: calc(100svh + 2px);
    height: calc(100vh + 2px);
    height: calc(100svh + 2px);
    background: transparent;
    overflow: visible;
    z-index: 0;
    pointer-events: none;
}

.home-page .hero video,
.home-page .hero::before,
.home-page .hero::after {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.home-page .hero video {
    z-index: 0;
    width: 100vw;
    /* Hauteur figee en JS (--hero-video-height, voir main.js), pas en dvh/svh/
       lvh : la video est en cover, contrainte par la hauteur (bien plus large
       que haute) - si la hauteur de la boite grandit, le cover zoome
       mecaniquement dessus. dvh suit la barre d'adresse en temps reel, ce qui
       zoomait la video en plein scroll ("elle grossit"). lvh est cense rester
       statique mais s'est avere insuffisamment fiable en pratique sur les
       navigateurs testes. Le fallback 100svh n'intervient qu'avant que le JS
       ne s'execute (defer).
       Le scale absorbait la difference entre la hauteur figee (mesuree barre
       visible) et la hauteur reelle une fois la barre retractee, sans laisser
       de bande noire. Ce besoin est propre au telephone : c'est la barre
       d'adresse qui bouge. Le grand ecran garde donc scale(1), et le bloc
       max-width: 768px plus bas conserve son 1.14.
       Le montage desktop est cadre en scope (2.13:1) avec ses bandes noires
       incrustees : elles sont voulues. Un scale de 1.16 les rognait tout
       juste -- l'intention de cadrage disparaissait a l'ecran. */
    height: 100svh;
    height: var(--hero-video-height, 100svh);
    object-fit: cover;
    object-position: center center;
    transform: translateY(0) scale(1);
    transform-origin: center center;
    /* Premiere image du showreel, visible le temps que la video s'amorce :
       sans elle l'accueil reste noir une a deux secondes, meme en fibre.
       L'attribut poster ne convenait pas, il ne prend qu'une seule URL alors
       que les deux montages n'ont pas le meme cadrage du tout -- paysage
       contre portrait. Un fond CSS se choisit par media query, exactement
       comme les deux <source> de la video juste au-dessus.
       cover et center reproduisent le object-fit de la video, et le fond
       subit le meme scale() qu'elle : les deux se superposent au pixel pres,
       donc le passage de l'image a la video ne saute pas. */
    background-color: #000000;
    background-image: url("../assets/images/home/showreel-poster-desktop.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .home-page .hero video {
        object-position: center center;
        transform: translateY(0) scale(1.14);
        background-image: url("../assets/images/home/showreel-poster-mobile.webp");
    }
}

.home-page .hero::before,
.home-page .hero::after {
    z-index: 1;
}

.home-page .hero::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.12) 100%);
}

.home-page .hero::after {
    background: none;
    box-shadow: none;
}

.home-page > section:not(.hero) {
    position: relative;
    z-index: 2;
}

.home-page .craft {
    margin-top: 0;
    padding-top: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.74) clamp(58px, 6vw, 100px), var(--black) clamp(140px, 15vw, 230px));
}

.craft {
    background: var(--black);
    padding: clamp(34px, 6vw, 78px) 0 0;
}

.craft-hero {
    --craft-title-x: clamp(-36px, -2.2vw, -14px);
    --craft-o-x: 0px;
    --craft-o-y: 0px;
    position: relative;
    min-height: clamp(380px, 34vw, 500px);
    overflow: hidden;
    display: block;
    border-top: 0;
    border-bottom: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.76), transparent 18%),
        #000;
}

.craft-hero::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(101deg, transparent 41%, rgba(0, 0, 0, 0.16) 46%, rgba(255, 246, 237, 0.08) 50%, rgba(255, 255, 255, 0.05) 53%, transparent 59%),
        linear-gradient(180deg, rgba(255, 246, 237, 0.08), transparent 34%);
    -webkit-mask-image: linear-gradient(180deg, #000 0 46%, rgba(0, 0, 0, 0.58) 64%, transparent 84%);
    mask-image: linear-gradient(180deg, #000 0 46%, rgba(0, 0, 0, 0.58) 64%, transparent 84%);
    mix-blend-mode: soft-light;
}

.craft-hero::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: -32% -48%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, 0.2) 47%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 246, 237, 0.18) 53%, transparent 64%);
    transform: translateX(-58%) skewX(-13deg);
    mix-blend-mode: screen;
}

.craft-hero--link {
    cursor: pointer;
}

.craft-hero--link:focus-visible {
    outline: 1px solid rgba(255, 94, 14, 0.24);
    outline-offset: -4px;
}

/* Toutes les regles :hover du bandeau sont reservees aux pointeurs fins
   ci-dessous : iOS emule le survol au toucher et le laisse COLLE apres le
   geste, jusqu'au prochain toucher ailleurs. Pendant un scroll au doigt, la
   suite hover (balayage, zooms, bascule titre/plus) se declenchait donc en
   plein defilement puis restait epinglee - le "+" ne rendait jamais la main
   au titre a la redescente. Sur tactile, seul l'observateur
   (is-attention-visible) pilote l'etat. */
.craft-hero--link:focus-visible::after {
    animation: craft-sheen 920ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .craft-hero--link:hover::after {
        animation: craft-sheen 920ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
}

@keyframes craft-sheen {
    0% {
        opacity: 0;
        transform: translateX(-58%) skewX(-13deg);
    }
    18%,
    72% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(58%) skewX(-13deg);
    }
}

/* ==========================================================================
   Bandeau savoir-faire : trois compositions en fondu enchaine
   --------------------------------------------------------------------------
   Chaque bandeau est une image entiere, fournie deja composee : les deux
   photos et la diagonale qui les separe appartiennent au fichier. Le CSS n'a
   donc plus a decouper ni a assembler quoi que ce soit -- l'ancien systeme de
   six panneaux en clip-path anime par flex-grow est remplace par une simple
   pile d'images dont une seule est visible a la fois.

   Les trois images se superposent exactement et ne different que par leur
   opacite : le fondu est purement composite, il ne declenche ni mise en page
   ni peinture, ce qui le rend fluide y compris sur un GPU integre.
   ========================================================================== */
.craft-strip {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: #000;
}

.craft-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    /* Les compositions sont bien plus larges que hautes (environ 3.48:1) alors
       que le bandeau approche 4:1 : cover rogne donc un peu en hauteur, et
       c'est le centre qu'on garde -- la diagonale y passe. */
    object-position: center;
    opacity: 0;
    /* Le fondu est long a dessein : c'est un enchainement de fond, pas une
       transition d'interface. */
    transition: opacity 1200ms ease-in-out;
}

.craft-shot.is-active {
    opacity: 1;
}

/* Sans script, aucune classe n'est posee et la premiere image porte deja
   is-active cote serveur : le bandeau reste donc affiche, simplement fixe. */

@media (prefers-reduced-motion: reduce) {
    .craft-shot {
        transition: none;
    }
}

.craft-title {
    position: absolute;
    inset: 0;
    z-index: 3;
    margin: 0;
    /* Le titre couvre tout le bandeau : sans cela il intercepte le curseur et
       les panneaux ne recoivent jamais le survol -- l'ouverture des paires ne
       se declenchait pas. Le lien qui l'englobe reste cliquable. */
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Coolvetica", Arial, sans-serif;
    font-size: clamp(3.1rem, 7.8vw, 8.2rem);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: 0.045em;
    text-transform: none;
    white-space: nowrap;
    transform: translateX(var(--craft-title-x)) scale(1);
    transform-origin: center;
    transition: transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 160ms ease;
    will-change: transform;
}

.craft-title__label {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: scale(1);
    /* Regit le retour au titre (le "+" repart) : le titre ne reapparait
       qu'apres un court delai, une fois le "+" bien efface - evite le
       chevauchement des deux pendant la transition. */
    transition: opacity 150ms ease 100ms, transform 200ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
}

.craft-title__plus {
    position: absolute;
    left: calc(50% + var(--craft-o-x));
    top: calc(50% + var(--craft-o-y));
    display: block;
    font-size: 1.65em;
    line-height: 1;
    /* Blanc pose sur un halo sombre, plutot qu'une couleur qui tenterait de se
       situer entre les deux fonds. Le degrade d'origine avait toujours une
       moitie proche du fond qu'elle couvrait, donc invisible ; un gris moyen
       reglait la lisibilite mais se voyait comme une tache, n'appartenant a
       aucune des deux photos.
       Ici le signe reste blanc -- il se lit d'emblee sur la moitie sombre -- et
       trois ombres portees le detachent de la moitie claire : un liseré net
       pour le bord, une ombre courte pour l'assise, un halo large pour
       assombrir le fond juste autour. */
    color: var(--white);
    opacity: 0;
    filter:
        drop-shadow(0 0 1px rgba(0, 0, 0, 0.92))
        drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 16px rgba(0, 0, 0, 0.55));
    transform: translate3d(-50%, -50%, 0) scale(0.82);
    transform-origin: center;
    pointer-events: none;
    /* Regit la disparition du "+" (le titre revient) : sans delai, pour
       s'effacer avant que le titre ne reapparaisse. */
    transition: opacity 130ms ease, transform 190ms cubic-bezier(0.16, 1, 0.3, 1), filter 130ms ease;
}

.craft-hero--link:focus-visible .craft-title,
.craft-hero--link.is-attention-visible .craft-title {
    transform: translateX(var(--craft-title-x)) scale(1.014);
}

.craft-hero--link:focus-visible .craft-title__label,
.craft-hero--link.is-attention-visible .craft-title__label,
.craft-hero--link:active .craft-title__label {
    opacity: 0;
    transform: scale(0.985);
    /* Regit la disparition du titre (le "+" arrive) : sans delai, pour
       s'effacer avant que le "+" n'apparaisse. */
    transition: opacity 130ms ease, transform 190ms cubic-bezier(0.16, 1, 0.3, 1);
}

.craft-hero--link:focus-visible .craft-title__plus,
.craft-hero--link.is-attention-visible .craft-title__plus,
.craft-hero--link:active .craft-title__plus {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
    /* Regit l'apparition du "+" (le titre repart) : court delai, une fois le
       titre bien efface - evite le chevauchement des deux pendant la
       transition. */
    transition: opacity 150ms ease 100ms, transform 200ms cubic-bezier(0.16, 1, 0.3, 1) 80ms, filter 150ms ease 100ms;
}

@media (hover: hover) and (pointer: fine) {
    .craft-hero--link:hover .craft-title {
        transform: translateX(var(--craft-title-x)) scale(1.014);
    }

    .craft-hero--link:hover .craft-title__label {
        opacity: 0;
        transform: scale(0.985);
        transition: opacity 130ms ease, transform 190ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .craft-hero--link:hover .craft-title__plus {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) scale(1);
        transition: opacity 150ms ease 100ms, transform 200ms cubic-bezier(0.16, 1, 0.3, 1) 80ms, filter 150ms ease 100ms;
    }
}

.craft-hero--link:active .craft-title {
    transform: translateX(var(--craft-title-x)) translateY(1px) scale(0.99);
    filter: brightness(0.9);
}

.craft-hero--link:active .craft-title__plus {
    filter: brightness(0.92) drop-shadow(0 0 8px rgba(255, 255, 255, 0.14));
    transform: translate3d(-50%, -50%, 0) scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
    .craft-title__label,
    .craft-title__plus {
        transition: none;
    }

    .craft-hero--link:hover .craft-title__label,
    .craft-hero--link:focus-visible .craft-title__label,
    .craft-hero--link.is-attention-visible .craft-title__label,
    .craft-hero--link:active .craft-title__label {
        transform: none;
        /* Ces selecteurs declarent maintenant leur propre transition (delai
           asymetrique pour desynchroniser le "+" et le titre) : sans ce
           reset, sa specificite l'emporterait sur le transition:none
           ci-dessus et reintroduirait de l'animation malgre la preference
           utilisateur. */
        transition: none;
    }

    .craft-hero--link:hover .craft-title__plus,
    .craft-hero--link:focus-visible .craft-title__plus,
    .craft-hero--link.is-attention-visible .craft-title__plus,
    .craft-hero--link:active .craft-title__plus {
        transform: translate3d(-50%, -50%, 0);
        transition: none;
    }

    /* Les fragments qui composent le titre (le "o" de "savoir" et son calque
       superpose, les moities claire et sombre) declarent leurs propres
       transitions de 420-520ms plus bas dans le fichier, et .craft-title un
       scale de 720ms. Rien ne les neutralisait ici : au retrait de la souris,
       le titre se recolorait et le double "o" se dissolvait encore pendant
       une demi-seconde malgre la preference "mouvement reduit". */
    .craft-title,
    .craft-title__light,
    .craft-title__split,
    .craft-title__split::after,
    .craft-title__dark {
        transition: none;
    }

    .craft-hero--link:hover .craft-title,
    .craft-hero--link:focus-visible .craft-title,
    .craft-hero--link.is-attention-visible .craft-title,
    .craft-hero--link:active .craft-title {
        transform: translateX(var(--craft-title-x));
        transition: none;
    }
}

/* Post-production: flat MONTAGE reveal and stable Color demonstrations. */
.postprod-color {
    --postprod-color-transition-height: 368vh;
}

.postprod-color__workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 42px auto minmax(0, 1fr);
}

.postprod-color__workspace > .postprod-suite__topbar {
    grid-column: 1;
    grid-row: 1;
}

.postprod-color__tabs {
    grid-column: 1;
    grid-row: 2;
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid rgba(124, 162, 255, 0.16);
    background: rgba(3, 5, 10, 0.94);
    overflow-x: auto;
    scrollbar-width: thin;
}

.postprod-color__tabs button,
.postprod-color-looks__controls button,
.postprod-color__wheel button {
    min-height: 38px;
    border: 1px solid rgba(124, 162, 255, 0.2);
    border-radius: 3px;
    color: rgba(253, 246, 237, 0.72);
    background: rgba(9, 14, 25, 0.82);
    font: inherit;
    cursor: pointer;
}

.postprod-color__tabs button {
    padding: 0 16px;
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-weight: 700;
}

.postprod-color__tabs button[aria-selected="true"] {
    color: var(--postprod-cream);
    border-color: rgba(255, 94, 14, 0.72);
    background: rgba(255, 94, 14, 0.1);
}

.postprod-color__tabs button:focus-visible,
.postprod-color-looks__controls button:focus-visible,
.postprod-color__wheel-control:focus-visible,
.postprod-color__wheel button:focus-visible,
.postprod-color-compare input:focus-visible {
    outline: 2px solid #7ca2ff;
    outline-offset: 2px;
}

.postprod-color__panels {
    min-height: 0;
    grid-column: 1;
    grid-row: 3;
    position: relative;
}

.postprod-color__panel {
    min-height: 610px;
    opacity: 0;
    transition: opacity 200ms ease;
}

.postprod-color__panel.is-active {
    opacity: 1;
}

.postprod-color__panel[hidden] {
    display: none;
}

.postprod-color__panel--grade {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(310px, 0.82fr);
    grid-template-rows: minmax(330px, 1fr) 116px 220px;
}

.postprod-color__panel--grade .postprod-color__viewer {
    grid-column: 1;
    grid-row: 1;
}

.postprod-color__panel--grade .postprod-color__nodes-panel {
    grid-column: 2;
    grid-row: 1;
}

.postprod-color__panel--grade .postprod-color__timeline {
    grid-column: 1 / -1;
    grid-row: 2;
}

.postprod-color__panel--grade .postprod-color__grading {
    grid-column: 1 / -1;
    grid-row: 3;
}

.postprod-color__wheel {
    grid-template-rows: minmax(96px, 1fr) auto auto auto;
    padding: 8px;
    position: relative;
}

.postprod-color__wheel-control {
    width: min(108px, 72%);
    aspect-ratio: 1;
    position: relative;
    border-radius: 50%;
    background:
        radial-gradient(circle, #070b13 0 44%, transparent 46%),
        conic-gradient(#ff5e0e, #f3d64a 16%, #55d68b 33%, #49c8d8 49%, #4d78ff 66%, #a56be8 83%, #ff5e0e);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.66);
    cursor: crosshair;
    touch-action: none;
}

.postprod-color__wheel-control i {
    width: 9px;
    height: 9px;
    position: absolute;
    left: var(--wheel-point-x, 50%);
    top: var(--wheel-point-y, 50%);
    border: 1px solid rgba(253, 246, 237, 0.9);
    border-radius: 50%;
    background: #05070c;
    transform: translate(-50%, -50%);
}

.postprod-color__wheel-values {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

.postprod-color__wheel-values output {
    min-width: 0;
    padding: 3px 2px;
    display: grid;
    gap: 2px;
    border-bottom: 2px solid var(--wheel-channel-color, rgba(253, 246, 237, 0.68));
    background: rgba(255, 255, 255, 0.035);
    color: rgba(253, 246, 237, 0.82);
    font-size: 0.54rem;
    text-align: center;
}

.postprod-color__wheel-values output:nth-child(2) { --wheel-channel-color: #ec5348; }
.postprod-color__wheel-values output:nth-child(3) { --wheel-channel-color: #50c982; }
.postprod-color__wheel-values output:nth-child(4) { --wheel-channel-color: #4c7cff; }

.postprod-color__wheel-values small {
    color: rgba(253, 246, 237, 0.38);
    font-size: 0.44rem;
}

.postprod-color__wheel-level {
    width: 86%;
    height: 18px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(253, 246, 237, 0.14);
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            rgba(255, 94, 14, 0.92) 0 var(--wheel-level-position, 0%),
            rgba(255, 255, 255, 0.055) var(--wheel-level-position, 0%) 100%),
        repeating-linear-gradient(90deg,
            transparent 0 9%,
            rgba(253, 246, 237, 0.13) 9% 10%);
    box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(0, 0, 0, 0.34);
    cursor: ew-resize;
}

.postprod-color__wheel-level::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    border: 3px solid var(--postprod-orange);
    border-radius: 50%;
    background: #fdf6ed;
    box-shadow: 0 0 0 3px rgba(255, 94, 14, 0.16), 0 2px 8px rgba(0, 0, 0, 0.72);
}

.postprod-color__wheel-level::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 3px solid var(--postprod-orange);
    border-radius: 50%;
    background: #fdf6ed;
    box-shadow: 0 0 0 3px rgba(255, 94, 14, 0.16), 0 2px 8px rgba(0, 0, 0, 0.72);
}

.postprod-color__wheel-level:focus-visible {
    outline: 2px solid rgba(253, 246, 237, 0.8);
    outline-offset: 3px;
}

.postprod-color__wheel-reset {
    width: 24px;
    height: 24px;
    min-height: 24px !important;
    padding: 0 !important;
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    border: 0 !important;
    background: transparent !important;
    color: rgba(253, 246, 237, 0.42) !important;
    font-size: 0.88rem !important;
}

.postprod-color__wheel-reset:hover,
.postprod-color__wheel-reset:focus-visible {
    color: var(--postprod-orange) !important;
}

.postprod-color__panel--grade .postprod-color-compare__after > img {
    filter:
        brightness(var(--grade-brightness, 1))
        contrast(var(--grade-contrast, 1))
        saturate(var(--grade-saturation, 1))
        hue-rotate(var(--grade-hue, 0deg));
    transition: filter 180ms ease;
}

.postprod-color__panel--grade .postprod-color__viewer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.postprod-color__grade-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
    transition: opacity 180ms ease, background-color 180ms ease;
}

.postprod-color__grade-layer--lift {
    background: var(--grade-lift-color, transparent);
    mix-blend-mode: multiply;
    opacity: var(--grade-lift-opacity, 0);
}

.postprod-color__grade-layer--gamma {
    background: var(--grade-gamma-color, transparent);
    mix-blend-mode: soft-light;
    opacity: var(--grade-gamma-opacity, 0);
}

.postprod-color__grade-layer--gain {
    background: var(--grade-gain-color, transparent);
    mix-blend-mode: screen;
    opacity: var(--grade-gain-opacity, 0);
}

.postprod-color__grade-layer--offset {
    background: var(--grade-offset-color, transparent);
    mix-blend-mode: color;
    opacity: var(--grade-offset-opacity, 0);
}

.postprod-color__grade-layer--look {
    z-index: 2;
    background: linear-gradient(135deg, rgba(255, 94, 14, 0.72), transparent 46%, rgba(36, 91, 255, 0.58));
    mix-blend-mode: soft-light;
    opacity: var(--grade-look-opacity, 0);
}

.postprod-color__panel--compare,
.postprod-color__panel--looks {
    padding: 18px;
    display: grid;
    gap: 16px;
    background: #05070c;
}

.postprod-color__panel--compare {
    grid-template-rows: minmax(400px, 1fr) auto;
}

.postprod-color-compare {
    min-height: 0;
    position: relative;
    border: 1px solid rgba(124, 162, 255, 0.18);
    background: #03050a;
    overflow: hidden;
}

.postprod-color-compare > img,
.postprod-color-compare__after,
.postprod-color-compare__after img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.postprod-color-compare > img {
    filter: saturate(0.72) contrast(0.88) brightness(0.94);
}

.postprod-color__panel--grade .postprod-color-compare > img {
    filter: none;
}

.postprod-color-compare__after {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 var(--compare-position));
}

.postprod-color-compare__after img {
    filter:
        brightness(var(--grade-brightness, 1))
        contrast(var(--grade-contrast, 1))
        saturate(var(--grade-saturation, 1))
        hue-rotate(var(--grade-hue, 0deg));
}

.postprod-color-compare__divider {
    width: 2px;
    position: absolute;
    inset: 0 auto 0 var(--compare-position);
    z-index: 2;
    background: var(--postprod-orange);
    box-shadow: 0 0 14px rgba(255, 94, 14, 0.48);
    transform: translateX(-1px);
}

.postprod-color-compare__divider::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 42px;
    border: 2px solid var(--postprod-orange);
    border-radius: 999px;
    background: #05070c;
    transform: translate(-50%, -50%);
}

/* La poignee est desormais saisissable depuis n'importe quel point de l'image
   (voir le pilotage au pointeur dans postproduction-visuals.js) ; elle est
   agrandie au doigt pour que cette possibilite se voie. */
@media (pointer: coarse) {
    .postprod-color-compare__divider::before {
        width: 14px;
        height: 56px;
    }
}

.postprod-color-compare__label {
    position: absolute;
    top: 10px;
    z-index: 3;
    padding: 4px 7px;
    border: 1px solid rgba(253, 246, 237, 0.16);
    background: rgba(3, 5, 10, 0.74);
    color: rgba(253, 246, 237, 0.72);
    font-size: 0.54rem;
    pointer-events: none;
}

.postprod-color-compare__label--raw { left: 10px; }
.postprod-color-compare__label--graded { right: 10px; color: var(--postprod-orange); }

.postprod-color-compare input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
    cursor: ew-resize;
    touch-action: pan-y;
}

.postprod-color-compare__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.postprod-color-compare__meta > div {
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    border: 1px solid rgba(124, 162, 255, 0.14);
    background: rgba(3, 5, 10, 0.76);
}

.postprod-color-compare__meta strong {
    width: 100%;
    color: var(--postprod-cream);
    font-size: 0.72rem;
}

.postprod-color-compare__meta span {
    color: rgba(253, 246, 237, 0.56);
    font-size: 0.64rem;
}

.postprod-color__panel--looks {
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.6fr);
    align-items: stretch;
}

.postprod-color-looks__viewer {
    min-height: 420px;
    position: relative;
    overflow: hidden;
}

.postprod-color-looks__graded::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--look-overlay, transparent);
    pointer-events: none;
}

.postprod-color-looks__viewer.postprod-color-compare > img {
    filter: none;
}

.postprod-color-looks__viewer .postprod-color-looks__graded-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: var(--look-filter, saturate(0.92) contrast(1.04) brightness(0.88));
    transition: filter 200ms ease;
}

.postprod-color-looks__viewer[data-look="natural"] {
    --look-filter: saturate(1.02) contrast(1.08) brightness(0.9);
    --look-overlay: linear-gradient(rgba(255, 244, 225, 0.025), rgba(11, 24, 46, 0.04));
}

.postprod-color-looks__viewer[data-look="golden"] {
    --look-filter: saturate(1.28) contrast(1.1) brightness(0.92) sepia(0.24) hue-rotate(-7deg);
    --look-overlay: linear-gradient(135deg, rgba(255, 178, 72, 0.2), transparent 54%, rgba(126, 40, 7, 0.12));
}

.postprod-color-looks__viewer[data-look="nocturne"] {
    --look-filter: saturate(0.72) contrast(1.26) brightness(0.68) hue-rotate(18deg);
    --look-overlay: linear-gradient(135deg, rgba(20, 42, 102, 0.28), transparent 50%, rgba(0, 0, 0, 0.32));
}

.postprod-color-looks__viewer[data-look="vibrant"] {
    --look-filter: saturate(1.52) contrast(1.18) brightness(0.96);
    --look-overlay: linear-gradient(135deg, rgba(36, 91, 255, 0.1), transparent 48%, rgba(255, 94, 14, 0.13));
}

.postprod-color-looks__viewer[data-look="film"] {
    --look-filter: saturate(0.92) contrast(1.08) brightness(0.88) sepia(0.09);
    --look-overlay: linear-gradient(135deg, rgba(224, 176, 112, 0.1), transparent 52%, rgba(28, 44, 76, 0.12));
}

.postprod-color-looks__viewer[data-look="teal"] {
    --look-filter: saturate(1.2) contrast(1.14) brightness(0.86) hue-rotate(7deg);
    --look-overlay: linear-gradient(135deg, rgba(0, 112, 126, 0.2), transparent 48%, rgba(255, 94, 14, 0.16));
}

.postprod-color-looks__viewer[data-look="pastel"] {
    --look-filter: saturate(0.72) contrast(0.9) brightness(1.04) sepia(0.06);
    --look-overlay: linear-gradient(135deg, rgba(255, 214, 225, 0.09), transparent 50%, rgba(153, 190, 255, 0.08));
}

.postprod-color-looks__viewer[data-look="mono"] {
    --look-filter: grayscale(1) contrast(1.16) brightness(0.84);
    --look-overlay: linear-gradient(rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.16));
}

.postprod-color-looks__controls {
    padding: 14px 18px 24px;
    display: grid;
    align-content: start;
    gap: 16px;
    border: 1px solid rgba(124, 162, 255, 0.14);
    background: rgba(3, 5, 10, 0.82);
}

.postprod-color-looks__controls h3 {
    margin: 0;
    color: var(--postprod-cream);
    font-family: "Coolvetica", Arial, sans-serif;
    font-size: clamp(1.55rem, 2.6vw, 2.7rem);
    font-weight: 400;
    line-height: 1;
}

.postprod-color-looks__controls [role="group"] {
    display: grid;
    gap: 8px;
}

.postprod-color-looks__controls button.is-active {
    color: var(--postprod-cream);
    border-color: var(--postprod-orange);
    background: rgba(255, 94, 14, 0.12);
}

.postprod-color-looks__controls button {
    min-height: 52px;
    display: grid;
    grid-template-columns: 12px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    text-align: left;
}

.postprod-color-looks__controls button::before {
    content: "";
    grid-row: 1 / 3;
    width: 10px;
    height: 32px;
    border-radius: 2px;
    background: var(--lut-swatch, linear-gradient(#e8e1d8, #61708b));
}

.postprod-color-looks__controls button[data-color-look="golden"] { --lut-swatch: linear-gradient(#ffd36a, #a93b08); }
.postprod-color-looks__controls button[data-color-look="nocturne"] { --lut-swatch: linear-gradient(#557bdb, #071126); }
.postprod-color-looks__controls button[data-color-look="vibrant"] { --lut-swatch: linear-gradient(#ff5e0e, #245bff); }
.postprod-color-looks__controls button[data-color-look="film"] { --lut-swatch: linear-gradient(#d9b179, #3a4964); }
.postprod-color-looks__controls button[data-color-look="teal"] { --lut-swatch: linear-gradient(#087c87, #f27132); }
.postprod-color-looks__controls button[data-color-look="pastel"] { --lut-swatch: linear-gradient(#f3cad8, #a8c9f2); }
.postprod-color-looks__controls button[data-color-look="mono"] { --lut-swatch: linear-gradient(#f0f0ec, #20242b); }

.postprod-color-looks__controls button span {
    font-weight: 700;
}

.postprod-color-looks__controls button small {
    color: rgba(253, 246, 237, 0.48);
    font-size: 0.56rem;
}

@media (max-width: 980px) {
    .postprod-color__panel {
        min-height: 0;
    }

    .postprod-color__panel--grade {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(330px, 56vw) auto 112px auto;
    }

    .postprod-color__panel--grade .postprod-color__viewer,
    .postprod-color__panel--grade .postprod-color__nodes-panel,
    .postprod-color__panel--grade .postprod-color__timeline,
    .postprod-color__panel--grade .postprod-color__grading {
        grid-column: 1;
    }

    .postprod-color__panel--grade .postprod-color__viewer { grid-row: 1; }
    .postprod-color__panel--grade .postprod-color__nodes-panel { grid-row: 2; }
    .postprod-color__panel--grade .postprod-color__timeline { grid-row: 3; }
    .postprod-color__panel--grade .postprod-color__grading { grid-row: 4; }

    .postprod-color__panel--looks {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .postprod-color__tabs {
        padding-inline: 8px;
    }

    .postprod-color__panel--compare,
    .postprod-color__panel--looks {
        padding: 10px;
    }

    .postprod-color__panel--compare {
        grid-template-rows: 300px auto;
    }

    .postprod-color-compare__meta {
        grid-template-columns: 1fr;
    }

    .postprod-color-looks__viewer {
        min-height: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .postprod-montage__split-band,
    .postprod-montage__split-complete,
    .postprod-color__panel,
    .postprod-color-looks__viewer img {
        animation: none !important;
        transition: none !important;
    }
}

/* Post-production V2 ----------------------------------------------------- */
.postprod-v2 {
    --postprod-blue: #245bff;
    --postprod-blue-soft: #7ca2ff;
    --postprod-orange: #ff5e0e;
    --postprod-cream: #fdf6ed;
    --postprod-surface: #070b14;
    --postprod-line: rgba(253, 246, 237, 0.14);
    background: #000000;
    color: var(--postprod-cream);
    overflow-x: clip;
}

.postprod-v2 .postprod-v2__hero {
    min-height: min(880px, 88svh);
    padding: clamp(116px, 11vw, 168px) clamp(24px, 7vw, 132px) clamp(74px, 8vw, 126px);
    display: grid;
    grid-template-rows: auto 1fr;
    /* Flat, pas degrade : voir le commentaire sur la regle "Order-sensitive"
       plus bas, qui l'emporte de toute facon sur celle-ci pour "background". */
    background:
        radial-gradient(circle at 52% 56%, rgba(36, 91, 255, 0.16), transparent 35%),
        #02040b;
}

.postprod-v2 .postprod-v2__hero::before {
    display: none;
}

.postprod-v2 .postprod-v2__hero::after {
    display: none;
}

.postprod-v2 .process-breadcrumb,
.postprod-v2__hero-inner {
    width: min(1520px, 100%);
    margin-inline: auto;
}

.postprod-v2__hero-inner {
    place-items: center start;
    text-align: left;
}

.postprod-v2 .postprod-v2__hero h1 {
    text-align: left;
}

.postprod-v2 .process-breadcrumb {
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.postprod-v2__hero-inner {
    width: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

.postprod-v2 .postprod-v2__hero h1 {
    margin: 0;
    max-width: 100%;
    font-size: clamp(4.2rem, 9.5vw, 10.5rem);
    line-height: 0.88;
    text-shadow:
        0 0 12px rgba(253, 246, 237, 0.48),
        0 0 54px rgba(36, 91, 255, 0.32);
}

.process-page--postprod .preprod-standalone-cta .button.is-cta-bouncing {
    animation: postprod-cta-bounce 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes postprod-cta-bounce {
    0% { transform: translateY(0) scale(1); }
    34% { transform: translateY(2px) scale(0.965); }
    68% { transform: translateY(-5px) scale(1.025); }
    100% { transform: translateY(0) scale(1); }
}

.postprod-sequence {
    --sequence-progress: 0;
    position: relative;
    background: #000000;
}

.postprod-montage {
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
}

.postprod-color {
    height: 460vh;
}

.postprod-sticky {
    min-height: 100vh;
    min-height: 100svh;
    position: sticky;
    top: 0;
    padding: clamp(82px, 9vh, 112px) clamp(24px, 5vw, 84px) clamp(46px, 5vh, 72px);
    display: grid;
    align-content: center;
    overflow: hidden;
    isolation: isolate;
}

.postprod-montage .postprod-sticky {
    position: relative;
}

.postprod-montage .postprod-sticky::before {
    background: #05070c;
}

.postprod-sticky::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 28%, rgba(36, 91, 255, 0.11), transparent 32%),
        linear-gradient(180deg, #000000, #03050a 54%, #000000);
}

.postprod-heading {
    width: min(1520px, 100%);
    margin: 0 auto clamp(34px, 5vh, 66px);
    position: relative;
    z-index: 3;
}

.postprod-heading--section {
    text-align: left;
}

.postprod-heading--overlay {
    position: absolute;
    inset: clamp(82px, 9vh, 112px) clamp(24px, 5vw, 84px) auto;
    width: auto;
    margin-bottom: 0;
    opacity: 1;
    pointer-events: none;
}

.postprod-kicker {
    margin: 0 0 12px;
    color: var(--postprod-orange);
    font-size: clamp(0.76rem, 0.85vw, 0.92rem);
    font-weight: 700;
    text-transform: uppercase;
}

.postprod-heading h2 {
    margin: 0;
    color: var(--postprod-cream);
    font-family: "Coolvetica", "Creato", Arial, sans-serif;
    font-size: clamp(2.7rem, 6vw, 7rem);
    font-weight: 400;
    line-height: 0.92;
}

.postprod-subtitle {
    margin: 16px 0 0;
    color: rgba(253, 246, 237, 0.72);
    font-size: clamp(1.05rem, 1.8vw, 1.8rem);
}

.postprod-montage__stage {
    width: min(1400px, 100%);
    height: clamp(560px, 64vh, 680px);
    margin: 0 auto;
    position: relative;
    perspective: 900px;
}

.postprod-montage__stage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(980px, 82vw);
    height: min(430px, 45vh);
    border-radius: 50%;
    background: transparent;
    filter: none;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.postprod-montage__word {
    --lego-band-offset-x: clamp(32px, 6vw, 90px);
    --lego-band-offset-y: clamp(10px, 2vw, 18px);
    --lego-band-offset-x-negative: clamp(-90px, -6vw, -32px);
    --lego-band-offset-y-negative: clamp(-18px, -2vw, -10px);
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.postprod-montage__word > span {
    position: absolute;
    left: var(--logo-left);
    top: var(--logo-top);
    width: var(--logo-size, clamp(48px, 6.2vw, 92px));
    height: var(--logo-height, clamp(54px, 7vw, 104px));
    display: grid;
    place-items: center;
    color: #3568d2;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    transform-origin: center;
    transition:
        left 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        top 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        width 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        height 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 360ms ease,
        background 420ms ease;
}

.postprod-montage__word > span:nth-child(1) { --clip-left: 10%; --clip-top: 60%; --clip-width: 17%; }
.postprod-montage__word > span:nth-child(2) { --clip-left: 28%; --clip-top: 60%; --clip-width: 16%; }
.postprod-montage__word > span:nth-child(3) { --clip-left: 45%; --clip-top: 60%; --clip-width: 18%; }
.postprod-montage__word > span:nth-child(4) { --clip-left: 64%; --clip-top: 60%; --clip-width: 15%; }
.postprod-montage__word > span:nth-child(5) { --clip-left: 80%; --clip-top: 60%; --clip-width: 18%; }
.postprod-montage__word > span:nth-child(6) { --clip-left: 10%; --clip-top: 71%; --clip-width: 88%; }
.postprod-montage__word > span:nth-child(7) { --clip-left: 10%; --clip-top: 82%; --clip-width: 88%; }

.postprod-montage__split-logo {
    --montage-split-x: clamp(72px, 12vw, 190px);
    width: min(980px, 88vw);
    height: clamp(132px, 15vw, 196px);
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 3;
    color: #6f95f4;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.postprod-montage__split-band {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    opacity: 0;
    will-change: transform;
}

.postprod-montage__split-band b,
.postprod-montage__split-complete {
    color: inherit;
    font-family: "Coolvetica", Arial, sans-serif;
    font-size: clamp(4.2rem, 10vw, 9rem);
    font-weight: 400;
    line-height: 0.8;
    letter-spacing: 0;
    white-space: nowrap;
}

.postprod-montage__split-complete {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    color: transparent;
    background: linear-gradient(180deg, #6f95f4 0 49.8%, #42b88a 50.2% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    pointer-events: none;
}

.postprod-montage__split-band--top {
    clip-path: inset(0 0 50% 0);
    color: #6f95f4;
}

.postprod-montage__split-band--bottom {
    clip-path: inset(50% 0 0 0);
    color: #42b88a;
}

.postprod-montage.is-assembling[data-stage="0"] .postprod-montage__split-band {
    opacity: 1;
    animation-duration: 900ms;
    animation-delay: 0ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.postprod-montage.is-assembling[data-stage="0"] .postprod-montage__split-complete {
    animation: postprod-montage-complete-reveal 900ms linear both;
}

.postprod-montage.is-assembling[data-stage="0"] .postprod-montage__split-band--top {
    animation-name: postprod-montage-strip-bottom;
}

.postprod-montage.is-assembling[data-stage="0"] .postprod-montage__split-band--bottom {
    animation-name: postprod-montage-strip-top;
}

@keyframes postprod-montage-strip-top {
    0%, 10% { transform: translate3d(calc(-1 * var(--montage-split-x)), 0, 0); }
    68% { transform: translate3d(8px, 0, 0); }
    82% { transform: translate3d(-3px, 0, 0); }
    94% { transform: translate3d(1px, 0, 0); }
    99.8% { transform: translate3d(0, 0, 0); opacity: 1; }
    100% { transform: translate3d(0, 0, 0); opacity: 0; }
}

@keyframes postprod-montage-strip-bottom {
    0%, 10% { transform: translate3d(var(--montage-split-x), 0, 0); }
    68% { transform: translate3d(-8px, 0, 0); }
    82% { transform: translate3d(3px, 0, 0); }
    94% { transform: translate3d(-1px, 0, 0); }
    99.8% { transform: translate3d(0, 0, 0); opacity: 1; }
    100% { transform: translate3d(0, 0, 0); opacity: 0; }
}

@keyframes postprod-montage-complete-reveal {
    0%, 99.8% { opacity: 0; }
    100% { opacity: 1; }
}

.postprod-montage[data-stage="1"] .postprod-montage__split-logo {
    opacity: 1;
    transition: opacity 220ms ease;
}

.postprod-montage[data-stage="1"] .postprod-montage__split-band {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    animation: none;
}

.postprod-montage[data-stage="1"] .postprod-montage__split-complete {
    opacity: 1;
}

.postprod-montage[data-stage="2"] .postprod-montage__split-logo {
    opacity: 0;
    visibility: hidden;
}

.postprod-montage[data-stage="2"] .postprod-montage__split-band {
    opacity: 0;
}

.postprod-montage[data-stage="2"] .postprod-montage__split-complete {
    opacity: 0;
}

.postprod-montage .postprod-heading h2,
.postprod-montage .postprod-subtitle {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 760ms cubic-bezier(0.22, 0.72, 0.2, 1), transform 760ms cubic-bezier(0.22, 0.72, 0.2, 1);
}

.postprod-montage[data-stage="2"] .postprod-heading h2,
.postprod-montage[data-stage="2"] .postprod-subtitle,
.postprod-montage.is-morphing[data-stage="1"] .postprod-heading h2,
.postprod-montage.is-morphing[data-stage="1"] .postprod-subtitle,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-montage .postprod-heading h2,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-montage .postprod-subtitle {
    opacity: 1;
    transform: translateY(0);
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-montage__split-complete {
    opacity: 1;
    transition: none;
    animation: postprod-montage-title-to-heading 760ms cubic-bezier(0.3, 0.05, 0.2, 1) both;
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-heading h2 {
    transition: opacity 140ms ease 625ms, transform 180ms cubic-bezier(0.22, 0.72, 0.2, 1) 605ms;
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-subtitle {
    transition: none;
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-montage__split-band {
    opacity: 0;
    animation: none;
}

@keyframes postprod-montage-title-to-heading {
    0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    72% {
        opacity: 1;
        transform: translate3d(var(--montage-heading-x, 0), var(--montage-heading-y, 0), 0) scale(var(--montage-heading-scale, 0.42));
    }
    82% {
        opacity: 0;
        transform: translate3d(var(--montage-heading-x, 0), var(--montage-heading-y, 0), 0) scale(var(--montage-heading-scale, 0.42));
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--montage-heading-x, 0), var(--montage-heading-y, 0), 0) scale(var(--montage-heading-scale, 0.42));
    }
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-montage__word span {
    left: var(--clip-left);
    top: var(--clip-top);
    width: var(--clip-width);
    height: var(--clip-height, clamp(44px, 5.4vh, 52px));
    border: 1px solid rgba(124, 162, 255, 0.42);
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(12, 42, 98, 0.94), rgba(36, 91, 255, 0.66) 48%, rgba(10, 24, 54, 0.9));
    box-shadow: inset 0 0 18px rgba(124, 162, 255, 0.1);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    overflow: hidden;
    transition: none;
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-montage__word span[data-timeline-kind="video"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(18, 63, 145, 0.74), rgba(36, 91, 255, 0.28) 54%, rgba(4, 12, 30, 0.62));
    pointer-events: none;
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-montage__word span[data-timeline-kind^="audio"] {
    border-color: rgba(104, 213, 177, 0.34);
    background:
        linear-gradient(180deg, rgba(213, 255, 239, 0.1), transparent 38%),
        linear-gradient(105deg, rgba(18, 65, 57, 0.96), rgba(35, 126, 99, 0.72) 52%, rgba(13, 50, 45, 0.96));
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-montage__word span[data-timeline-kind="audio-a1"] {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-a1-segment {
    opacity: 1;
    transition: none;
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-montage__extra-clip {
    left: var(--clip-left);
    top: var(--clip-top);
    width: var(--clip-width);
    height: var(--clip-height, clamp(44px, 5.4vh, 52px));
    border: 1px solid rgba(124, 162, 255, 0.42);
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(12, 42, 98, 0.94), rgba(36, 91, 255, 0.66) 48%, rgba(10, 24, 54, 0.9));
    box-shadow: inset 0 0 18px rgba(124, 162, 255, 0.1);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: none;
    overflow: hidden;
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-montage__extra-clip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 63, 145, 0.74), rgba(36, 91, 255, 0.28) 54%, rgba(4, 12, 30, 0.62));
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-montage__word span[data-timeline-kind="audio-a1"]::after {
    display: none;
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-montage__word span[data-timeline-kind="audio-a2"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(31, 96, 80, 0.28), rgba(122, 224, 190, 0.08), rgba(20, 75, 63, 0.34));
    pointer-events: none;
}

@media (max-width: 620px) {
    .postprod-montage__split-logo {
        --montage-split-x: clamp(36px, 12vw, 56px);
        width: 86vw;
    }
}

.postprod-montage[data-stage="2"] .postprod-montage__word span {
    left: var(--clip-left);
    top: var(--clip-top);
    width: var(--clip-width);
    height: var(--clip-height, clamp(44px, 5.4vh, 52px));
    border: 1px solid rgba(83, 130, 239, 0.62);
    border-radius: 3px;
    border-color: rgba(124, 162, 255, 0.42);
    background: linear-gradient(90deg, rgba(12, 42, 98, 0.94), rgba(36, 91, 255, 0.66) 48%, rgba(10, 24, 54, 0.9));
    box-shadow: inset 0 0 18px rgba(124, 162, 255, 0.1);
    transform: translate3d(0, 0, 0);
    overflow: hidden;
    opacity: 1;
    animation: none;
    transition: opacity 420ms ease;
}

.postprod-montage[data-stage="2"] .postprod-montage__word span::after,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-montage__word span::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(18, 63, 145, 0.74), rgba(36, 91, 255, 0.28) 54%, rgba(4, 12, 30, 0.62));
    pointer-events: none;
}

.postprod-montage[data-stage="2"] .postprod-montage__word span[data-timeline-kind="video"].is-preview-active {
    border-color: rgba(124, 162, 255, 0.86);
    box-shadow: inset 0 0 22px rgba(124, 162, 255, 0.2);
}

.postprod-montage__extra-clip {
    position: absolute;
    left: var(--extra-logo-left);
    top: var(--extra-logo-top);
    width: var(--extra-logo-width, 64px);
    height: var(--extra-logo-height, 72px);
    z-index: 2;
    display: block;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    pointer-events: none;
    transition:
        left 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        top 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        width 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        height 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 420ms ease;
}

.postprod-montage[data-stage="2"] .postprod-montage__extra-clip,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-montage__extra-clip {
    left: var(--clip-left);
    top: var(--clip-top);
    width: var(--clip-width);
    height: var(--clip-height, clamp(44px, 5.4vh, 52px));
    border: 1px solid rgba(124, 162, 255, 0.42);
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(12, 42, 98, 0.94), rgba(36, 91, 255, 0.66) 48%, rgba(10, 24, 54, 0.9));
    box-shadow: inset 0 0 18px rgba(124, 162, 255, 0.1);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 420ms ease;
    overflow: hidden;
}

.postprod-montage[data-stage="2"] .postprod-montage__extra-clip::after,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-montage__extra-clip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 63, 145, 0.74), rgba(36, 91, 255, 0.28) 54%, rgba(4, 12, 30, 0.62));
}

.postprod-montage[data-stage="2"] .postprod-montage__extra-clip.is-preview-active {
    border-color: rgba(124, 162, 255, 0.86);
    box-shadow: inset 0 0 22px rgba(124, 162, 255, 0.2);
}

.postprod-montage[data-stage="2"] .postprod-montage__word span[data-timeline-kind^="audio"],
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-montage__word span[data-timeline-kind^="audio"] {
    border-color: rgba(104, 213, 177, 0.34);
    background:
        linear-gradient(180deg, rgba(213, 255, 239, 0.1), transparent 38%),
        linear-gradient(105deg, rgba(18, 65, 57, 0.96), rgba(35, 126, 99, 0.72) 52%, rgba(13, 50, 45, 0.96));
}

.postprod-a1-segment {
    position: absolute;
    left: var(--a1-left, 0);
    top: 0;
    bottom: 0;
    width: var(--a1-width, 0);
    display: block;
    border: 1px solid rgba(104, 213, 177, 0.38);
    border-radius: 3px;
    background:
        repeating-linear-gradient(90deg, transparent 0 13%, rgba(208, 255, 238, 0.16) 13.3% 13.7%, transparent 14% 22%),
        linear-gradient(180deg, rgba(213, 255, 239, 0.11), transparent 36%),
        linear-gradient(105deg, rgba(18, 65, 57, 0.96), rgba(35, 126, 99, 0.72) 52%, rgba(13, 50, 45, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(220, 255, 243, 0.14),
        inset 0 -12px 22px rgba(2, 21, 18, 0.2);
    opacity: 0;
    pointer-events: none;
}

.postprod-montage[data-stage="2"] .postprod-montage__word span[data-timeline-kind="audio-a1"],
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-montage__word span[data-timeline-kind="audio-a1"] {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.postprod-montage[data-stage="2"] .postprod-a1-segment {
    opacity: 1;
    transition: none;
}

.postprod-montage[data-stage="2"] .postprod-montage__word span[data-timeline-kind="audio-a1"]::after,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-montage__word span[data-timeline-kind="audio-a1"]::after {
    display: none;
}

.postprod-montage[data-stage="2"] .postprod-montage__word span[data-timeline-kind^="audio"]::after,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-montage__word span[data-timeline-kind^="audio"]::after {
    background: linear-gradient(90deg, rgba(31, 96, 80, 0.28), rgba(122, 224, 190, 0.08), rgba(20, 75, 63, 0.34));
}

.postprod-timeline {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    grid-template-rows: 48% minmax(0, 1fr);
    gap: 8px;
    border: 1px solid rgba(253, 246, 237, 0.12);
    border-radius: 6px;
    background:
        repeating-linear-gradient(90deg, transparent 0 9.8%, rgba(253, 246, 237, 0.055) 10%),
        linear-gradient(180deg, rgba(253, 246, 237, 0.045) 0 17%, transparent 17%),
        #05070c;
    opacity: 0;
    transform: none;
    transition: opacity 420ms ease;
    overflow: hidden;
}

.postprod-timeline > .postprod-edit-suite__upper,
.postprod-timeline > .postprod-edit-suite__timeline,
.postprod-timeline > .postprod-montage__mixer {
    opacity: 0;
    transition: opacity 420ms ease;
}

.postprod-montage[data-stage="2"] .postprod-timeline,
.postprod-montage.is-morphing[data-stage="1"] .postprod-timeline,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-timeline,
.postprod-montage[data-stage="2"] .postprod-timeline > .postprod-edit-suite__upper,
.postprod-montage[data-stage="2"] .postprod-timeline > .postprod-edit-suite__timeline,
.postprod-montage[data-stage="2"] .postprod-timeline > .postprod-montage__mixer,
.postprod-montage.is-morphing[data-stage="1"] .postprod-timeline > .postprod-edit-suite__upper,
.postprod-montage.is-morphing[data-stage="1"] .postprod-timeline > .postprod-edit-suite__timeline,
.postprod-montage.is-morphing[data-stage="1"] .postprod-timeline > .postprod-montage__mixer,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-timeline > .postprod-edit-suite__upper,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-timeline > .postprod-edit-suite__timeline,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-timeline > .postprod-montage__mixer {
    opacity: 1;
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-timeline,
.postprod-montage.is-morphing[data-stage="1"] .postprod-timeline > .postprod-edit-suite__upper,
.postprod-montage.is-morphing[data-stage="1"] .postprod-timeline > .postprod-edit-suite__timeline,
.postprod-montage.is-morphing[data-stage="1"] .postprod-timeline > .postprod-montage__mixer {
    transition: none;
}

.postprod-edit-suite__upper {
    height: auto;
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(230px, 0.38fr) minmax(0, 1fr);
    gap: 8px;
    padding: 0;
    border-bottom: 1px solid rgba(253, 246, 237, 0.1);
}

.postprod-pipeline,
.postprod-timeline__viewer {
    min-width: 0;
    display: grid;
    grid-template-rows: 34px minmax(0, 1fr);
    border: 1px solid rgba(253, 246, 237, 0.08);
    background: #080a10;
    overflow: hidden;
}

.postprod-edit-suite__bar {
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(253, 246, 237, 0.5);
    border-bottom: 1px solid rgba(253, 246, 237, 0.08);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

.postprod-pipeline__body {
    padding: clamp(10px, 1.35vw, 18px);
    display: grid;
    grid-template-rows: minmax(72px, auto) auto;
    align-content: center;
    gap: 10px;
}

.postprod-pipeline__detail {
    min-height: 72px;
}

.postprod-pipeline__detail strong {
    color: var(--postprod-cream);
    font-family: "Coolvetica", "Creato", Arial, sans-serif;
    font-size: clamp(0.92rem, 1.05vw, 1.12rem);
    font-weight: 400;
}

.postprod-pipeline__detail p {
    margin: 0;
    padding-top: 5px;
    color: rgba(253, 246, 237, 0.6);
    font-size: clamp(0.62rem, 0.72vw, 0.75rem);
    line-height: 1.3;
}

.postprod-pipeline__controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.postprod-pipeline__controls button {
    position: relative;
    min-height: 32px;
    padding: 5px 8px 5px 20px;
    border: 1px solid rgba(124, 162, 255, 0.16);
    border-radius: 3px;
    background: rgba(36, 91, 255, 0.045);
    color: rgba(253, 246, 237, 0.68);
    font: inherit;
    font-size: clamp(0.64rem, 0.72vw, 0.76rem);
    text-align: left;
    cursor: pointer;
}

.postprod-pipeline__controls button::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--postprod-blue-soft);
    transform: translateY(-50%);
}

.postprod-pipeline__controls button:hover,
.postprod-pipeline__controls button.is-active {
    border-color: rgba(124, 162, 255, 0.5);
    color: var(--postprod-cream);
    background: rgba(36, 91, 255, 0.16);
}

.postprod-pipeline__controls button:focus-visible {
    outline: 2px solid var(--postprod-orange);
    outline-offset: 2px;
}

.postprod-timeline__viewer {
    position: relative;
}

.postprod-timeline__preview {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(36, 91, 255, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(36, 91, 255, 0.04) 1px, transparent 1px),
        linear-gradient(145deg, #08101f, #020305 72%);
    background-size: 36px 36px, 36px 36px, auto;
}

.postprod-pipeline-dialogue {
    width: min(720px, 82%);
    min-height: 128px;
    padding: clamp(16px, 2vw, 26px);
    position: relative;
    background: linear-gradient(90deg, rgba(36, 91, 255, 0.1), transparent 76%);
}

/* Barre laterale en pseudo-element plutot qu'en border-left : une bordure
   court forcement sur toute la hauteur de la boite, elle venait donc buter
   contre le bord du panneau des que le bloc etait cale en haut (cas du
   mobile depuis fc5232b). En pseudo-element on peut la detacher des deux
   extremites et lui arrondir les bouts. */
.postprod-pipeline-dialogue::before {
    content: "";
    position: absolute;
    left: 0;
    top: clamp(12px, 1.6vw, 18px);
    bottom: clamp(12px, 1.6vw, 18px);
    width: 2px;
    border-radius: 2px;
    background: rgba(124, 162, 255, 0.72);
}

.postprod-pipeline-dialogue__step {
    display: block;
    min-height: 1.2em;
    color: var(--postprod-blue-soft);
    font-family: "Coolvetica", "Creato", Arial, sans-serif;
    font-size: clamp(1.05rem, 1.65vw, 1.65rem);
}

.postprod-pipeline-dialogue p {
    min-height: 3.9em;
    margin: 8px 0 0;
    color: rgba(253, 246, 237, 0.78);
    font-size: clamp(0.72rem, 0.9vw, 0.92rem);
    line-height: 1.48;
}

.postprod-pipeline-dialogue__prompt {
    position: absolute;
    left: clamp(16px, 2vw, 26px);
    top: 50%;
    color: rgba(253, 246, 237, 0.42);
    font-size: clamp(0.7rem, 0.82vw, 0.84rem);
    transform: translateY(-50%);
}

.postprod-timeline__preview.is-typing .postprod-pipeline-dialogue p::after {
    content: "";
    width: 0.48em;
    height: 1em;
    margin-left: 0.18em;
    display: inline-block;
    vertical-align: -0.12em;
    background: var(--postprod-orange);
    animation: postprod-dialogue-cursor 620ms steps(1, end) infinite;
}

@keyframes postprod-dialogue-cursor {
    50% { opacity: 0; }
}

.postprod-edit-suite__timeline {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    background: #05070c;
    touch-action: pan-y;
}

.postprod-timeline__ruler {
    height: 15%;
    margin-left: 9%;
    padding: 0 2%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(253, 246, 237, 0.38);
    font-size: 0.7rem;
}

.postprod-timeline__track {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(253, 246, 237, 0.07);
    background: rgba(253, 246, 237, 0.018);
}

.postprod-timeline__tracks {
    height: 85%;
    display: grid;
    grid-template-columns: 9% minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

.postprod-track-label {
    display: grid;
    place-items: center;
    border: 1px solid rgba(253, 246, 237, 0.08);
    color: rgba(253, 246, 237, 0.62);
    background: #090c13;
    font-size: 0.64rem;
    font-weight: 700;
}

.postprod-track-label--audio {
    color: rgba(122, 224, 190, 0.75);
}

.postprod-timeline__track--v1 {
    background-image: repeating-linear-gradient(90deg, transparent 0 9.9%, rgba(253, 246, 237, 0.04) 10%);
}

.postprod-timeline__track--a1,
.postprod-timeline__track--a2 {
    padding: 5px 7px;
}

.postprod-audio-clip {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2px;
    padding: 0 8px;
    border: 1px solid rgba(104, 213, 177, 0.34);
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgba(213, 255, 239, 0.1), transparent 38%),
        linear-gradient(105deg, rgba(18, 65, 57, 0.94), rgba(35, 126, 99, 0.68), rgba(13, 50, 45, 0.94));
    overflow: hidden;
}

.postprod-audio-clip i {
    width: 2px;
    height: var(--wave-height, 42%);
    border-radius: 999px;
    background: rgba(190, 247, 226, 0.54);
    transform: none;
}

.postprod-audio-clip--secondary {
    width: 100%;
    border: 1px solid rgba(72, 180, 151, 0.22);
    background:
        linear-gradient(180deg, rgba(213, 255, 239, 0.06), transparent 42%),
        linear-gradient(105deg, rgba(12, 48, 43, 0.86), rgba(26, 91, 75, 0.58), rgba(9, 38, 35, 0.9));
}

.postprod-montage__mixer {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    grid-column: 2;
    grid-row: 2;
    z-index: 3;
    padding: 10px 7px;
    display: grid;
    grid-template-rows: 26px minmax(0, 1fr);
    gap: 8px;
    border: 1px solid rgba(253, 246, 237, 0.1);
    background: linear-gradient(180deg, rgba(14, 19, 30, 0.98), rgba(5, 7, 12, 0.98));
}

.postprod-montage__mixer-title {
    color: rgba(253, 246, 237, 0.58);
    font-size: 0.58rem;
    text-align: center;
}

.postprod-montage__channels {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.postprod-montage__channel {
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(88px, 1fr) 58px 18px;
    gap: 7px;
}

.postprod-montage__meter {
    display: flex;
    align-items: end;
    gap: 2px;
    padding: 4px 3px;
    border: 1px solid rgba(253, 246, 237, 0.08);
    background: #020407;
}

.postprod-montage__meter i {
    width: 50%;
    height: 100%;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #a3f5cf 0 8%, #3dd09a 24%, #1b705b 76%, #102d29 100%);
    transform: scaleY(var(--meter-level, 0.38));
    transform-origin: bottom;
    transition: none;
}

.postprod-montage__fader {
    position: relative;
    margin-inline: auto;
    width: 18px;
    cursor: ns-resize;
    touch-action: none;
}

.postprod-montage__fader::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    width: 1px;
    background: rgba(253, 246, 237, 0.18);
    transform: translateX(-50%);
}

.postprod-montage__fader span {
    position: absolute;
    left: 50%;
    bottom: var(--fader-level, 46%);
    width: 16px;
    height: 5px;
    border-radius: 2px;
    background: rgba(253, 246, 237, 0.72);
    transform: translateX(-50%);
}

.postprod-montage__fader:focus-visible {
    outline: 2px solid var(--postprod-orange);
    outline-offset: 2px;
}

.postprod-montage__mixer small {
    color: rgba(253, 246, 237, 0.44);
    font-size: 0.52rem;
    text-align: center;
}

.postprod-timeline__drag-zone {
    position: absolute;
    left: 9%;
    right: 64px;
    top: var(--playhead-final-top, 48%);
    height: var(--playhead-final-height, 52%);
    z-index: 9;
    cursor: grab;
    touch-action: pan-y;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.postprod-montage[data-stage="2"].is-timeline-ready .postprod-timeline__drag-zone,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-timeline__drag-zone {
    top: var(--playhead-final-top, 48%);
    height: var(--playhead-final-height, 52%);
    opacity: 1;
    pointer-events: auto;
}

.postprod-timeline__playhead {
    position: absolute;
    left: var(--playhead-x, 0px);
    top: 0;
    bottom: 0;
    width: 2px;
    z-index: 8;
    background: var(--postprod-orange);
    box-shadow: 0 0 16px rgba(255, 94, 14, 0.8);
    opacity: 0;
    transform: scaleY(0.08);
    transform-origin: 50% 0;
    transition: opacity 140ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.postprod-montage[data-stage="2"] .postprod-timeline__playhead,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-timeline__playhead {
    top: 15%;
}

.postprod-montage[data-stage="2"].is-timeline-ready .postprod-timeline__playhead,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-timeline__playhead {
    opacity: 1;
    transform: scaleY(1);
}

.postprod-timeline__playhead::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -1px;
    width: 8px;
    height: 7px;
    border-radius: 2px 2px 50% 50%;
    background: var(--postprod-orange);
    transform: translate(-50%, -50%);
}

.postprod-timeline.is-playhead-controlled .postprod-timeline__playhead {
    animation: none;
}

.postprod-timeline.is-playhead-controlled .postprod-timeline__drag-zone {
    cursor: grabbing;
}

.postprod-timeline__drag-zone:focus-visible {
    outline: 2px solid rgba(255, 94, 14, 0.82);
    outline-offset: 2px;
}

.postprod-color__sticky {
    place-items: center;
    background: #000000;
}

.postprod-color__sticky::before {
    background: linear-gradient(180deg, #000000, #020307 52%, #000000);
}

.postprod-color-wheel-blobs {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.4) 12%, rgba(0, 0, 0, 0.85) 26%, black 42%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.4) 12%, rgba(0, 0, 0, 0.85) 26%, black 42%);
}

.postprod-color-wheel-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(160px, 15vw, 320px);
    height: clamp(160px, 15vw, 320px);
    border-radius: 50%;
    background: var(--wheel-blob-color);
    filter: blur(48px) saturate(1.4);
    opacity: calc(var(--color-source-opacity, 1) * 0.85);
    mix-blend-mode: screen;
    pointer-events: none;
    transform: translate(-50%, -50%) translate3d(var(--wheel-blob-x, 0px), var(--wheel-blob-y, 0px), 0) scale(var(--wheel-blob-scale, 1));
    transition: transform var(--wheel-blob-duration, 8s) cubic-bezier(0.22, 0.61, 0.36, 1), opacity 600ms ease;
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    .postprod-color-wheel-blob {
        transition: opacity 600ms ease;
    }
}

.postprod-color-intro {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    color: var(--postprod-cream);
    font-family: "Coolvetica", "Creato", Arial, sans-serif;
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 400;
    line-height: 0.9;
    pointer-events: none;
}

.postprod-color-intro__word {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.015em;
    white-space: nowrap;
    translate: 0 0.08em;
}

.postprod-color-title__rest {
    opacity: var(--color-title-rest-opacity, 1);
}

.postprod-color-intro__round-o,
.postprod-color-intro__portal-source {
    display: inline-block;
    width: 0.55em;
    aspect-ratio: 1;
    flex: 0 0 auto;
    translate: 0 0.02em;
}

.postprod-color-intro__round-o {
    border-radius: 50%;
    background: #7ca2ff;
    -webkit-mask: radial-gradient(circle, transparent 0 43%, #000 46% 100%);
    mask: radial-gradient(circle, transparent 0 43%, #000 46% 100%);
}

.postprod-color-intro__portal-source {
    opacity: var(--color-source-opacity, 1);
}

.postprod-color-intro__letter--cream { color: #fdf6ed; }
.postprod-color-intro__letter--ice { color: #cbd8f4; }
.postprod-color-intro__letter--orange { color: #ff8b50; }

.postprod-color-intro__portal-source,
.postprod-color-intro__portal-layer {
    border-radius: 50%;
    background: conic-gradient(
        from -30deg,
        #ff5e0e,
        #f3d64a 16%,
        #55d68b 32%,
        #49c8d8 48%,
        #4d78ff 65%,
        #a56be8 82%,
        #ff5e0e
    );
    -webkit-mask: radial-gradient(circle, transparent 0 43%, #000 46% 100%);
    mask: radial-gradient(circle, transparent 0 43%, #000 46% 100%);
}

.postprod-color-intro__portal-source {
    filter: blur(0.45px);
    box-shadow: 0 0 14px rgba(77, 120, 255, 0.14);
}

/* L'anneau qui s'ouvre en plein ecran. Il etait anime en left/top/width/
   height : chaque frame relancait mise en page, peinture du degrade conique
   et rasterisation -- sur un cercle qui atteint 2.65 fois la diagonale de
   l'ecran (plus de 5000px de diametre en 1080p). Les GPU integres ne
   suivaient pas : sequence hachee au point de paraitre cassee (constate sur
   un Acer Aspire 5). Il est desormais peint UNE fois, a la taille de la
   diagonale (--color-portal-base, pose par le script), puis anime en
   transform (translate + scale), entierement composite. L'agrandissement
   maximal est de x2.65 sur un degrade doux dont le bord du trou est deja
   fondu par le mask : l'adoucissement d'echelle est invisible.
   Le blur(0.45px) et l'ombre portee sautent ici : sur cette surface ils
   coutaient cher et ne se voient pas une fois l'anneau en mouvement. */
.postprod-color-intro__portal-layer {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--color-portal-base, 100vmax);
    height: var(--color-portal-base, 100vmax);
    z-index: 4;
    display: grid;
    place-items: center;
    opacity: var(--color-portal-opacity, 0);
    transform: translate3d(-200vw, 0, 0);
    transform-origin: center;
    contain: strict;
    will-change: transform, opacity;
}

.postprod-v2:not(.has-postprod-motion) .postprod-color-intro {
    min-height: clamp(180px, 30vh, 280px);
    position: relative;
    inset: auto;
    display: grid;
}

.postprod-v2:not(.has-postprod-motion) .postprod-color-intro__portal-layer {
    display: none;
}

.postprod-color__workspace {
    width: min(1480px, 94vw);
    height: min(760px, 76svh);
    min-height: 590px;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(124, 162, 255, 0.24);
    border-radius: 6px;
    background:
        linear-gradient(145deg, rgba(124, 162, 255, 0.055), transparent 38%),
        #05070c;
    box-shadow:
        0 42px 120px rgba(0, 0, 0, 0.64),
        inset 0 0 0 1px rgba(253, 246, 237, 0.025);
    overflow: hidden;
}

.postprod-color__workspace {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) minmax(230px, 24%);
    grid-template-rows: 48px minmax(0, 1fr) 122px 46px;
    opacity: var(--color-workspace-opacity, 1);
    transform: scale(var(--color-workspace-scale, 1));
    transform-origin: center;
    background: #05070c;
    pointer-events: var(--color-workspace-events, auto);
    transition: none;
}

.postprod-suite__topbar {
    grid-column: 1 / -1;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--postprod-line);
    color: rgba(253, 246, 237, 0.52);
    font-size: 0.69rem;
    font-weight: 700;
}

.postprod-suite__topbar span:last-child {
    color: var(--postprod-orange);
}

.postprod-color__toolbar {
    grid-row: 2 / 4;
    padding: 18px 0;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 14px;
    border-right: 1px solid var(--postprod-line);
}

.postprod-color__toolbar span {
    width: 22px;
    aspect-ratio: 1;
    border: 1px solid rgba(253, 246, 237, 0.28);
    border-radius: 50%;
}

.postprod-color__toolbar span:nth-child(2) {
    border-color: var(--postprod-orange);
    box-shadow: 0 0 14px rgba(255, 94, 14, 0.35);
}

.postprod-color__viewer {
    grid-column: 2;
    grid-row: 2;
    margin: 16px;
    position: relative;
    border: 1px solid rgba(253, 246, 237, 0.1);
    background: #020204;
    overflow: hidden;
}

.postprod-color__image {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    filter: saturate(0.72) contrast(1.02) brightness(0.75);
    transition: opacity 600ms ease, filter 900ms ease, transform 900ms ease;
}

.postprod-color[data-stage="1"] .postprod-color__image--landscape,
.postprod-color[data-stage="2"] .postprod-color__image--landscape,
.postprod-color[data-stage="3"] .postprod-color__image--landscape,
.postprod-color[data-stage="5"] .postprod-color__image--landscape {
    filter: saturate(1.08) contrast(1.06) brightness(0.88);
}

.postprod-color__image--portrait {
    opacity: 0;
    object-position: center 35%;
}

.postprod-color[data-stage="4"] .postprod-color__image--landscape {
    opacity: 0;
}

.postprod-color[data-stage="4"] .postprod-color__image--portrait {
    opacity: 1;
    filter: saturate(0.94) contrast(1.02) brightness(0.86);
    transform: scale(1.035);
}

.postprod-color__grade-split {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    z-index: 3;
    background: var(--postprod-orange);
    box-shadow: 0 0 16px rgba(255, 94, 14, 0.72);
    opacity: 0;
    transform: scaleY(0.5);
    transition: opacity 420ms ease, transform 620ms ease;
}

.postprod-color[data-stage="1"] .postprod-color__grade-split {
    opacity: 1;
    transform: scaleY(1);
}

.postprod-color__tracker,
.postprod-color__noise,
.postprod-color__face-grid,
.postprod-color__composite {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 520ms ease;
}

.postprod-color[data-stage="2"] .postprod-color__tracker,
.postprod-color[data-stage="3"] .postprod-color__noise,
.postprod-color[data-stage="4"] .postprod-color__face-grid,
.postprod-color[data-stage="5"] .postprod-color__composite {
    opacity: 1;
}

.postprod-color__tracker span {
    width: 22px;
    aspect-ratio: 1;
    position: absolute;
    border: 1px solid var(--postprod-orange);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 12px rgba(255, 94, 14, 0.38);
}

.postprod-color__tracker span:nth-child(1) { left: 34%; top: 32%; }
.postprod-color__tracker span:nth-child(2) { left: 58%; top: 41%; }
.postprod-color__tracker span:nth-child(3) { left: 68%; top: 63%; }
.postprod-color__tracker span:nth-child(4) { left: 43%; top: 70%; }

.postprod-color__noise {
    background-image: repeating-radial-gradient(circle at 30% 40%, rgba(253, 246, 237, 0.13) 0 1px, transparent 1px 4px);
    mix-blend-mode: screen;
    opacity: 0;
}

.postprod-color[data-stage="3"] .postprod-color__noise {
    opacity: 0.12;
}

.postprod-color__face-grid {
    inset: 13% 27%;
    border: 1px solid rgba(124, 162, 255, 0.72);
    border-radius: 48% 48% 45% 45%;
}

.postprod-color__face-grid::before,
.postprod-color__face-grid::after {
    content: "";
    position: absolute;
    background: rgba(124, 162, 255, 0.62);
}

.postprod-color__face-grid::before {
    left: 50%;
    top: 4%;
    bottom: 4%;
    width: 1px;
}

.postprod-color__face-grid::after {
    left: 5%;
    right: 5%;
    top: 52%;
    height: 1px;
}

.postprod-color__face-grid span {
    width: 9px;
    aspect-ratio: 1;
    position: absolute;
    border-radius: 50%;
    background: var(--postprod-orange);
    box-shadow: 0 0 10px rgba(255, 94, 14, 0.58);
}

.postprod-color__face-grid span:nth-child(1) { left: 27%; top: 35%; }
.postprod-color__face-grid span:nth-child(2) { right: 27%; top: 35%; }
.postprod-color__face-grid span:nth-child(3) { left: 50%; top: 51%; }
.postprod-color__face-grid span:nth-child(4) { left: 34%; top: 69%; }
.postprod-color__face-grid span:nth-child(5) { right: 34%; top: 69%; }

.postprod-color__composite {
    inset: auto 20px 20px auto;
    display: flex;
    gap: 8px;
}

.postprod-color__composite span {
    padding: 7px 11px;
    border: 1px solid rgba(253, 246, 237, 0.2);
    background: rgba(5, 8, 16, 0.82);
    color: var(--postprod-cream);
    font-size: 0.64rem;
}

.postprod-color__nodes {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 24px;
    opacity: 0.46;
    transition: opacity 420ms ease;
}

.postprod-color__nodes::before,
.postprod-color__nodes::after {
    content: "";
    width: 24px;
    height: 1px;
    position: absolute;
    top: 50%;
    background: rgba(124, 162, 255, 0.58);
}

.postprod-color__nodes::before { left: 23px; }
.postprod-color__nodes::after { left: 69px; }

.postprod-color__nodes span {
    width: 24px;
    aspect-ratio: 1;
    border: 1px solid rgba(124, 162, 255, 0.8);
    border-radius: 4px;
    background: rgba(5, 9, 18, 0.86);
    box-shadow: 0 0 12px rgba(36, 91, 255, 0.22);
}

.postprod-color[data-stage="0"] .postprod-color__nodes,
.postprod-color[data-stage="5"] .postprod-color__nodes {
    opacity: 1;
}

.postprod-color__scopes {
    grid-column: 3;
    grid-row: 2 / 4;
    padding: 16px;
    display: grid;
    grid-template-rows: 1fr 1fr auto auto;
    gap: 12px;
    border-left: 1px solid var(--postprod-line);
}

.postprod-scope {
    min-height: 0;
    position: relative;
    border: 1px solid rgba(253, 246, 237, 0.08);
    background:
        linear-gradient(rgba(253, 246, 237, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(253, 246, 237, 0.04) 1px, transparent 1px),
        #03050a;
    background-size: 20px 20px;
    overflow: hidden;
}

.postprod-scope i {
    position: absolute;
    left: 7%;
    right: 7%;
    height: 2px;
    border-radius: 50%;
    transform-origin: left center;
}

.postprod-scope--wave i:nth-child(1) { top: 68%; background: #ff5e0e; transform: rotate(-13deg) scaleX(0.92); }
.postprod-scope--wave i:nth-child(2) { top: 48%; background: #45d173; transform: rotate(8deg) scaleX(0.86); }
.postprod-scope--wave i:nth-child(3) { top: 58%; background: #4b8dff; transform: rotate(-4deg) scaleX(0.98); }
.postprod-scope--curve i:nth-child(1) { top: 70%; background: #ff5e0e; transform: rotate(-28deg) scaleX(0.9); }
.postprod-scope--curve i:nth-child(2) { top: 62%; background: #45d173; transform: rotate(-20deg) scaleX(0.78); }
.postprod-scope--curve i:nth-child(3) { top: 76%; background: #4b8dff; transform: rotate(-34deg) scaleX(0.92); }

.postprod-color__controls {
    display: grid;
    gap: 10px;
}

.postprod-color__wheels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    opacity: 0.34;
    transition: opacity 420ms ease;
}

.postprod-color__wheels span {
    width: min(56px, 100%);
    aspect-ratio: 1;
    margin: auto;
    border: 2px solid #d7d7d2;
    border-radius: 50%;
    background:
        radial-gradient(circle, #05070c 0 46%, transparent 48%),
        conic-gradient(#ff5e0e, #e8d43c, #45d173, #4b8dff, #b66dff, #ff5e0e) border-box;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.72);
}

.postprod-color[data-stage="1"] .postprod-color__wheels {
    opacity: 1;
}

.postprod-color__controls span {
    height: 4px;
    position: relative;
    border-radius: 999px;
    background: rgba(253, 246, 237, 0.14);
}

.postprod-color__controls span::after {
    content: "";
    width: 10px;
    aspect-ratio: 1;
    position: absolute;
    left: 58%;
    top: 50%;
    border-radius: 50%;
    background: var(--postprod-cream);
    transform: translate(-50%, -50%);
}

.postprod-color__timeline {
    grid-column: 2;
    grid-row: 3;
    margin: 0 16px 14px;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
    border: 1px solid rgba(253, 246, 237, 0.08);
    background: #03050a;
}

.postprod-color__timeline span {
    border-radius: 2px;
    background:
        linear-gradient(180deg, rgba(36, 91, 255, 0.28), transparent),
        url("../assets/images/work-field-01.jpg") center / cover;
    filter: saturate(0.72) brightness(0.6);
}

.postprod-stage-rail {
    grid-column: 1 / -1;
    grid-row: 4;
    margin: 0;
    padding: 0 18px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--postprod-line);
    list-style: none;
}

.postprod-stage-rail li {
    position: relative;
    color: rgba(253, 246, 237, 0.36);
    font-size: clamp(0.59rem, 0.7vw, 0.72rem);
    text-align: center;
    transition: color 300ms ease;
}

.postprod-stage-rail li::before {
    content: "";
    width: 7px;
    aspect-ratio: 1;
    position: absolute;
    left: 50%;
    top: -12px;
    border-radius: 50%;
    background: rgba(253, 246, 237, 0.2);
    transform: translateX(-50%);
    transition: background 300ms ease, box-shadow 300ms ease;
}

.postprod-color[data-stage="0"] [data-stage-index="0"],
.postprod-color[data-stage="1"] [data-stage-index="1"],
.postprod-color[data-stage="2"] [data-stage-index="2"],
.postprod-color[data-stage="3"] [data-stage-index="3"],
.postprod-color[data-stage="4"] [data-stage-index="4"],
.postprod-color[data-stage="5"] [data-stage-index="5"],
.postprod-mix[data-stage="0"] [data-stage-index="0"],
.postprod-mix[data-stage="1"] [data-stage-index="1"],
.postprod-mix[data-stage="2"] [data-stage-index="2"],
.postprod-mix[data-stage="3"] [data-stage-index="3"],
.postprod-mix[data-stage="4"] [data-stage-index="4"] {
    color: var(--postprod-cream);
}

.postprod-color[data-stage="0"] [data-stage-index="0"]::before,
.postprod-color[data-stage="1"] [data-stage-index="1"]::before,
.postprod-color[data-stage="2"] [data-stage-index="2"]::before,
.postprod-color[data-stage="3"] [data-stage-index="3"]::before,
.postprod-color[data-stage="4"] [data-stage-index="4"]::before,
.postprod-color[data-stage="5"] [data-stage-index="5"]::before,
.postprod-mix[data-stage="0"] [data-stage-index="0"]::before,
.postprod-mix[data-stage="1"] [data-stage-index="1"]::before,
.postprod-mix[data-stage="2"] [data-stage-index="2"]::before,
.postprod-mix[data-stage="3"] [data-stage-index="3"]::before,
.postprod-mix[data-stage="4"] [data-stage-index="4"]::before {
    background: var(--postprod-orange);
    box-shadow: 0 0 12px rgba(255, 94, 14, 0.72);
}

.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-montage__word span {
    left: var(--clip-left);
    top: var(--clip-top);
    width: var(--clip-width);
    height: var(--clip-height, clamp(44px, 5.4vh, 52px));
    color: transparent;
    opacity: 1;
    transform: none;
    animation: none;
}

.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-timeline,
.postprod-v2:not(.has-postprod-motion) .postprod-color__workspace {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.postprod-v2:not(.has-postprod-motion) .postprod-color__workspace {
    transform: none;
}

.postprod-v2:not(.has-postprod-motion) .postprod-heading--overlay {
    position: relative;
    inset: auto;
    margin-bottom: 44px;
    opacity: 1;
}

.postprod-v2:not(.has-postprod-motion) .postprod-sequence {
    height: auto;
    padding: clamp(86px, 10vw, 128px) 0;
}

.postprod-v2:not(.has-postprod-motion) .postprod-sticky {
    min-height: 0;
    position: relative;
    top: auto;
    overflow: visible;
}

@media (max-width: 1230px) {
    .postprod-color__workspace {
        width: calc(100vw - 42px);
    }

    .postprod-color__workspace {
        grid-template-columns: 50px minmax(0, 1fr) minmax(200px, 26%);
    }

}

@media (max-width: 980px) {
    /* La ligne du titre etait en 1fr : avec min-height sur le hero, elle
       s'etirait et la boite du h1 mesurait 350px pour 50px de texte reel
       (mesure a 430x932), soit 300px de vide sous le titre. L'ecart visible
       entre le texte et la section suivante atteignait 381px alors que l'ecart
       de boite n'etait que de 74px. Ligne passee en auto et min-height
       retiree : le hero epouse son contenu, et l'ecart texte -> section
       suivante devient exactement le padding-bas, cale a 75px. */
    .postprod-v2 .postprod-v2__hero {
        min-height: 0;
        grid-template-rows: auto auto;
        padding-bottom: 75px;
    }

    /* line-height: 0.88 rend la boite du h1 plus courte que ses glyphes : le
       texte deborde sous elle de 0,162 x la taille de police (mesure : police
       41,3px -> boite 36,3px, texte 50px, debord 6,7px). Sans compensation
       l'ecart VISIBLE tombait a 68px au lieu des 75px du padding. La marge est
       exprimee en em pour suivre la police, qui change entre les paliers
       (clamp(2.25rem, 9.6vw, 4.2rem) sous 620px, clamp(4.2rem, 8vw, 9rem)
       au-dessus). */
    .postprod-v2 .postprod-v2__hero h1 {
        margin-bottom: 0.162em;
    }

    .postprod-sequence {
        height: auto;
        padding: clamp(86px, 12vw, 128px) 0;
    }

    .postprod-sticky {
        min-height: 0;
        position: relative;
        top: auto;
        padding: 0 clamp(18px, 4vw, 38px);
        display: block;
        overflow: visible;
    }

    .postprod-heading {
        margin-bottom: 44px;
    }

    .postprod-heading--overlay {
        position: relative;
        inset: auto;
        margin-bottom: 44px;
        opacity: 1;
    }

    .postprod-montage__stage {
        height: 560px;
    }

    /* Cette regle forcait la carte visible en permanence sous 980px, puisque
       l'animation du montage y etait desactivee. Maintenant qu'elle tourne,
       la carte doit rester masquee pendant que le titre s'assemble (etape 0)
       et n'apparaitre qu'au morph -- c'est le role des regles data-stage. Le
       repli reste actif quand l'animation ne tourne pas (mouvement reduit). */
    .postprod-v2:not(.has-montage-motion) .postprod-timeline {
        opacity: 1;
    }

    .postprod-timeline {
        width: 100%;
        transform: translateY(0) scale(1);
    }

    .postprod-color__workspace {
        width: 100%;
        height: auto;
        min-height: 0;
        opacity: 1;
        transform: none;
    }

    .postprod-color__workspace {
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: 46px minmax(360px, 55vw) 104px 46px;
    }

    .postprod-color__viewer {
        margin: 12px;
    }

    .postprod-color__scopes {
        display: none;
    }

    .postprod-color__timeline {
        grid-column: 2;
    }

}

@media (max-width: 620px) {
    /* min-height retiree ici aussi : cette regle vient apres celle du
       breakpoint 980px et la neutraliserait sinon (meme specificite). */
    .postprod-v2 .postprod-v2__hero {
        padding-inline: 18px;
    }

    .postprod-v2 .postprod-v2__hero h1 {
        font-size: clamp(3.5rem, 18vw, 5.4rem);
    }

    .postprod-heading h2 {
        font-size: clamp(2.6rem, 13vw, 4.4rem);
    }

    /* 500px reservait pour 3 pistes de 75px (contenant un clip de 30px chacune)
       et une ligne 1 laissee libre de s'etirer sur le texte de droite : voir
       les commentaires sur .postprod-timeline et .postprod-timeline__tracks.
       569px = 400 (Preparation/Apercu, agrandi a la demande) + 154 (regle +
       3 pistes) + 5px de marge haute/basse + 5px d'ecart entre les deux. */
    .postprod-montage__stage {
        height: 569px;
    }

    .postprod-montage__word {
        width: auto;
    }

    .postprod-montage__word span {
        font-size: clamp(1.3rem, 8vw, 2.4rem);
    }

    /* clamp(4.2rem, 10vw, 9rem) plafonne au plancher de 67,2px sur toute la
       plage mobile : "01 / Montage" mesure alors 355px pour un cadre de 339px
       (mesure a 375px de large), il debordait donc des deux cotes une fois
       l'animation activee. 14vw redonne une police proportionnelle a l'ecran
       (52,5px a 375px, soit ~277px de texte, ~82% du cadre) et le plafond
       reste sous la valeur desktop. */
    .postprod-montage__split-band b,
    .postprod-montage__split-complete {
        font-size: clamp(2.1rem, 14vw, 4.2rem);
    }

    /* Ligne 2 (regle et pistes) en auto : elle s'etirait sur toute la hauteur
       restante (minmax(0,1fr)), quel que soit son contenu reel -- les 3 pistes
       ne prenaient que 30px de clip dans des lignes de 75px, laissant ~45px de
       vide par piste. La ligne 1 (Preparation/Apercu) reste en pixels fixes et
       non en "auto" : passer en auto y a laisse le texte de droite (qui change
       selon l'etape choisie, cache par l'overflow:hidden du panneau) dieter la
       hauteur de toute la carte -- 226px couvre les 6 boutons + leur legende
       avec un peu de marge, quel que soit le texte affiche a droite. Le vide
       restant est resorbe en calant la hauteur du stage ci-dessous sur le
       total mesure plutot que sur une valeur arbitraire. */
    .postprod-timeline {
        height: 100%;
        padding: 5px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 400px auto;
        align-content: start;
        gap: 5px;
    }

    /* La description choisie va jusqu'a 355px de haut ("Backup", 320px de
       large) alors que le panneau ne mesure que 226px avec les boutons : caler
       la ligne 1 sur ce pire cas aurait laisse un grand vide sous les boutons
       (le probleme inverse d'avant). Le texte defile desormais dans son cadre
       au lieu d'etre tronque au milieu d'un mot par l'overflow:hidden ci-dessus
       -- place-items passe de center a start, sinon un contenu centre qui
       deborde devient partiellement inaccessible au scroll (l'exces du haut
       n'est jamais atteint). */
    .postprod-timeline__preview {
        align-items: start;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Recentre le bloc dans le panneau (agrandi a 400px en bf94875, alors que
       le dialogue n'en fait que 128) sans reintroduire la troncature :
       align-items:center centrerait le debordement des DEUX cotes et rendrait
       le haut du texte inatteignable au scroll. Une marge auto en grille
       n'absorbe que l'espace libre POSITIF -- des que le texte depasse, elle
       retombe a 0 et le align-items:start ci-dessus reprend la main. */
    .postprod-pipeline-dialogue {
        margin-block: auto;
    }

    /* Le panneau Preparation portait 148px face a 164px pour l'apercu, qui ne
       contient qu'une ligne de texte centree : les six boutons se retrouvaient
       dans des colonnes de 64px, d'ou une police de 8,6px. On lui rend de la
       place pour pouvoir les grossir (voir plus bas). Le partage est
       proportionnel et non fixe : une valeur figee a 178px etranglait l'apercu
       a 79px des 320px de large, et son bandeau de timecode debordait. */
    .postprod-edit-suite__upper {
        height: auto;
        grid-template-columns: minmax(0, 1.33fr) minmax(0, 1fr);
        gap: 5px;
        padding: 5px;
        margin-right: 0;
    }

    .postprod-edit-suite__timeline {
        inset: auto;
        grid-column: 1;
        grid-row: 2;
    }

    .postprod-edit-suite__bar {
        padding-inline: 7px;
        font-size: 0.48rem;
    }

    /* La ligne 2 (auto) laissait les boutons a leur taille minimale, et
       align-content:center (regle desktop, ligne 2253) centrait le bloc
       compact resultant dans les 400px du panneau -- d'ou le grand vide
       au-dessus du titre "Preparer les medias" une fois ce panneau agrandi.
       En 1fr, les boutons (voir .postprod-pipeline__controls plus bas)
       recuperent cet espace au lieu de le laisser vide autour d'eux. */
    .postprod-pipeline__body {
        grid-template-rows: auto minmax(0, 1fr);
        padding: 9px 7px;
        gap: 8px;
    }

    /* 72px (regle desktop, ligne 2258) reservait de la place pour un texte qui
       ne change jamais sur cette carte -- contrairement a la description de
       droite, celle-ci est statique ("Preparer les medias..."). Le contenu
       mesure 47 a 57px selon la largeur (jusqu'a 3 lignes a 320px) ; 60px
       couvre le pire cas avec 3px de marge. */
    .postprod-pipeline__detail {
        min-height: 60px;
    }

    .postprod-pipeline__detail strong {
        font-size: 0.8rem;
    }

    .postprod-pipeline__detail p {
        font-size: 0.52rem;
    }

    /* Les 3 lignes en 1fr etirent les boutons pour occuper toute la hauteur
       liberee par le passage de .postprod-pipeline__body en 1fr ci-dessus,
       au lieu de rester a leur hauteur minimale entoures de vide. */
    .postprod-pipeline__controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    /* Le pire mot est "Assemblage" (57px a 10,4px avec la pile de police du
       site). La police suit la largeur d'ecran puisque les colonnes sont
       proportionnelles : 2,77vw donne 10,4px a 375px et 8,9px a 320px, la ou
       la colonne retombe a ~65px. Bornes calees sur ces deux extremes -- la
       largeur des colonnes n'a pas change, seule la hauteur grandit avec
       l'espace libere, donc cette contrainte reste valable. min-height reste
       un plancher de securite ; la hauteur reelle vient desormais de la
       ligne 1fr. display:flex + align-items:center centrent le texte dans
       des boutons nettement plus hauts, au lieu de le laisser colle en haut. */
    .postprod-pipeline__controls button {
        display: flex;
        align-items: center;
        min-height: 32px;
        padding: 6px 4px 6px 12px;
        font-size: clamp(0.5rem, 2.77vw, 0.68rem);
    }

    .postprod-pipeline__controls button::before {
        left: 6px;
        width: 4px;
        height: 4px;
    }

    .postprod-montage__mixer {
        display: none;
    }

    .postprod-timeline__ruler {
        height: auto;
        margin-left: 12%;
        padding-block: 8px;
        font-size: 0.5rem;
    }

    /* Rangees calees sur les 30px du clip (voir le plafond mobile de
       .postprod-montage__extra-clip) plutot que sur les 75px issus de
       height:85% / repeat(3, minmax(0,1fr)), qui etirait chaque piste bien
       au-dela du contenu qu'elle porte. */
    .postprod-timeline__tracks {
        height: auto;
        grid-template-columns: 12% minmax(0, 1fr);
        grid-template-rows: repeat(3, 42px);
    }

    .postprod-track-label {
        font-size: 0.52rem;
    }

    .postprod-audio-clip {
        width: 100%;
        padding-inline: 4px;
    }

    .postprod-audio-clip i:nth-child(even) {
        display: none;
    }

    /* .postprod-montage__extra-clip est un FRERE de .postprod-montage__word,
       pas un enfant : il echappait donc a ce plafond et gardait la hauteur
       calculee par syncClipBounds (~67px, soit la hauteur de piste moins 8).
       La derniere brique de V1 faisait ainsi plus du double des cinq autres et
       debordait sous la piste. Les six clips video partagent desormais la meme
       hauteur. */
    .postprod-montage[data-stage="2"] .postprod-montage__word span,
    .postprod-montage[data-stage="2"] .postprod-montage__extra-clip {
        height: 30px;
    }

    .postprod-color__workspace {
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-rows: 42px 310px 82px auto;
    }

    .postprod-suite__topbar {
        padding-inline: 10px;
        font-size: 0.56rem;
    }

    .postprod-color__toolbar {
        gap: 10px;
    }

    .postprod-color__toolbar span {
        width: 17px;
    }

    .postprod-color__timeline {
        margin-inline: 8px;
        padding: 9px;
        gap: 4px;
    }

    .postprod-stage-rail {
        min-height: 70px;
        padding: 12px 8px 8px;
        gap: 3px;
    }

    .postprod-stage-rail li {
        font-size: 0.48rem;
    }

    .postprod-stage-rail li::before {
        top: -7px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .process-page--postprod .preprod-standalone-cta .button.is-cta-bouncing {
        animation: none;
    }

    .postprod-color-intro__portal-layer {
        display: none;
    }

    .postprod-v2 .postprod-v2__hero::before {
        animation: none;
    }

    .postprod-v2 .postprod-sequence {
        height: auto;
        padding: clamp(86px, 10vw, 128px) 0;
    }

    .postprod-v2 .postprod-sticky {
        min-height: 0;
        position: relative;
        top: auto;
        overflow: visible;
    }

    .postprod-v2 .postprod-heading--overlay {
        position: relative;
        inset: auto;
        margin-bottom: 44px;
        opacity: 1;
    }

    .postprod-v2 .postprod-color__workspace {
        opacity: 1;
        transform: none;
    }

    .postprod-v2 .postprod-montage__word span,
    .postprod-v2 .postprod-timeline,
    .postprod-v2 .postprod-timeline__playhead,
    .postprod-v2 .postprod-audio-clip i,
    .postprod-v2 .postprod-montage__meter i,
    .postprod-v2 .postprod-color__image,
    .postprod-v2 .postprod-color__grade-split,
    .postprod-v2 .postprod-color__tracker,
    .postprod-v2 .postprod-color__noise,
    .postprod-v2 .postprod-color__face-grid,
    .postprod-v2 .postprod-color__composite,
    .postprod-v2 .postprod-stage-rail li,
    .postprod-v2 .postprod-stage-rail li::before {
        transition: none;
        animation: none;
    }
}

/* Static Color and Mix workspaces after the Color portal transition. */
.postprod-color,
.postprod-mix {
    height: auto;
    padding: 0;
    background: #000000;
}

.postprod-color__transition {
    height: 300vh;
    position: relative;
}

.postprod-color__content,
.postprod-mix__sticky {
    padding: clamp(88px, 9vw, 132px) clamp(22px, 4vw, 72px) clamp(72px, 8vw, 120px);
}

.postprod-color__content {
    position: relative;
    z-index: 2;
    background: #000000;
}

.postprod-color__content .postprod-heading,
.postprod-mix__sticky .postprod-heading {
    width: min(1480px, 94vw);
    margin: 0 auto clamp(34px, 4vw, 58px);
}

.postprod-mix__sticky {
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    top: auto;
    display: grid;
    align-content: center;
    overflow: visible;
    background: #000000;
}

.postprod-mix__sticky::before {
    background: #000000;
}

.postprod-mix__intro {
    display: block;
    align-items: center;
}

.postprod-mix__intro h2 {
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.18em;
    white-space: nowrap;
}

.postprod-mix__title-wave {
    display: inline-flex;
    align-items: baseline;
}

.postprod-mix__title-wave > span {
    display: inline-block;
    transform: translateY(0);
    will-change: transform;
    animation: none;
}

.postprod-mix__intro.is-wave-active .postprod-mix__title-wave > span {
    animation: postprod-mix-title-wave 1.45s cubic-bezier(0.45, 0, 0.2, 1) 1 both;
    animation-delay: calc(var(--wave-index) * 42ms);
}

@keyframes postprod-mix-title-wave {
    0%, 100% { transform: translateY(0); }
    18% { transform: translateY(-0.18em); }
    42% { transform: translateY(0.12em); }
    64% { transform: translateY(-0.06em); }
    82% { transform: translateY(0.025em); }
}

.postprod-color__workspace {
    width: min(1480px, 94vw);
    margin-inline: auto;
    border-color: rgba(124, 162, 255, 0.2);
    background: #05070c;
}

.postprod-color__workspace {
    height: clamp(660px, 78svh, 780px);
    min-height: 640px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1.8fr) minmax(260px, 0.72fr);
    grid-template-rows: 42px minmax(330px, 1fr) 156px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.postprod-color__toolbar {
    grid-row: 2 / 4;
    padding-block: 16px;
}

.postprod-color__viewer {
    grid-column: 2;
    grid-row: 2;
    margin: 12px;
}

.postprod-color__image--landscape {
    opacity: 1;
    filter: saturate(1.06) contrast(1.06) brightness(0.86);
}

.postprod-color__grade-split {
    opacity: 0.72;
    transform: scaleY(1);
}

.postprod-color__tracker {
    opacity: 0.58;
}

.postprod-color__composite {
    opacity: 1;
}

.postprod-color__scopes {
    grid-column: 3;
    grid-row: 2;
    padding: 12px 12px 6px;
    grid-template-rows: minmax(92px, 0.72fr) minmax(92px, 1fr) minmax(92px, 1fr);
    gap: 8px;
}

.postprod-color__nodes-panel {
    min-height: 0;
    padding: 10px;
    display: grid;
    align-content: space-between;
    gap: 10px;
    border: 1px solid rgba(253, 246, 237, 0.08);
    background: #03050a;
    overflow: hidden;
}

.postprod-module-title {
    color: rgba(253, 246, 237, 0.5);
    font-size: 0.58rem;
    font-weight: 700;
}

.postprod-color__nodes {
    position: relative;
    left: auto;
    bottom: auto;
    justify-content: center;
    opacity: 1;
}

.postprod-color__grading {
    grid-column: 3;
    grid-row: 3;
    padding: 8px 12px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 12px;
    border-left: 1px solid var(--postprod-line);
}

.postprod-color__wheels {
    opacity: 1;
}

.postprod-color__timeline {
    grid-column: 2;
    grid-row: 3;
    margin: 0 12px 12px;
    padding: 12px;
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-timeline__drag-zone {
    top: var(--playhead-final-top, 48%);
    height: var(--playhead-final-height, 52%);
    opacity: 1;
    pointer-events: none;
}

.postprod-montage.is-morphing[data-stage="1"] .postprod-timeline__playhead {
    top: 15%;
    opacity: 1;
    transform: scaleY(1);
}

@media (max-width: 1230px) {
    .postprod-color__workspace {
        grid-template-columns: 46px minmax(0, 1fr) 250px;
    }
}

@media (max-width: 980px) {
    .postprod-color,
    .postprod-mix {
        padding: 0;
    }

    .postprod-color__transition {
        height: auto;
    }

    .postprod-color__sticky {
        min-height: auto;
        position: relative;
        padding: clamp(90px, 14vw, 130px) 20px;
    }

    .postprod-color__content,
    .postprod-mix__sticky {
        padding: clamp(78px, 12vw, 108px) clamp(18px, 4vw, 38px);
    }

    .postprod-color__content .postprod-heading,
    .postprod-mix__sticky .postprod-heading,
    .postprod-color__workspace {
        width: 100%;
    }

    .postprod-color__workspace {
        height: auto;
        min-height: 0;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: 42px minmax(340px, 55vw) 130px auto auto;
    }

    .postprod-color__timeline {
        grid-column: 2;
        grid-row: 3;
    }

    .postprod-color__scopes {
        grid-column: 2;
        grid-row: 4;
        padding: 0 12px 12px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: 150px;
        border-left: 0;
    }

    .postprod-color__grading {
        grid-column: 2;
        grid-row: 5;
        padding: 0 12px 16px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        border-left: 0;
    }

}

@media (max-width: 620px) {
    .postprod-color__workspace {
        grid-template-columns: 1fr;
        grid-template-rows: 42px 300px 100px auto auto;
    }

    .postprod-color__toolbar {
        display: none;
    }

    .postprod-color__viewer,
    .postprod-color__timeline,
    .postprod-color__scopes,
    .postprod-color__grading {
        grid-column: 1;
    }

    .postprod-color__viewer {
        grid-row: 2;
        margin: 8px;
    }

    .postprod-color__timeline {
        grid-row: 3;
        margin: 0 8px 8px;
    }

    .postprod-color__scopes {
        grid-row: 4;
        padding: 0 8px 8px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 120px);
    }

    .postprod-color__grading {
        grid-row: 5;
        padding: 0 8px 12px;
        grid-template-columns: 1fr;
    }

}

@media (prefers-reduced-motion: reduce) {
    .postprod-color__transition {
        height: auto;
    }

    .postprod-color__sticky {
        min-height: auto;
        position: relative;
        padding-block: clamp(90px, 12vw, 130px);
    }

}

.postprod-davinci-logo {
    width: 40px;
    height: 40px;
    margin: 10px auto 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 760ms cubic-bezier(0.22, 0.72, 0.2, 1), transform 760ms cubic-bezier(0.22, 0.72, 0.2, 1);
}

.postprod-davinci-logo img {
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
}

.postprod-montage[data-stage="2"] .postprod-davinci-logo,
.postprod-montage.is-morphing[data-stage="1"] .postprod-davinci-logo,
.postprod-v2:not(.has-postprod-motion):not(.has-montage-motion) .postprod-davinci-logo {
    opacity: 1;
    transform: translateY(0);
}

.postprod-color {
    --postprod-color-transition-height: 340vh;
}

.postprod-color__transition {
    height: var(--postprod-color-transition-height);
    position: relative;
    isolation: isolate;
    background: #000000;
}

.postprod-color__sticky {
    z-index: 3;
    pointer-events: none;
    background: transparent;
}

.postprod-color__sticky::before {
    background: transparent;
}

.postprod-color__content {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    opacity: var(--color-workspace-reveal, 0);
    background: #000000;
}

.postprod-color__workspace {
    height: clamp(720px, 82svh, 820px);
    min-height: 700px;
    grid-template-columns: minmax(0, 1.9fr) minmax(310px, 0.82fr);
    grid-template-rows: 42px minmax(360px, 1fr) 126px 210px;
    gap: 0;
    background: #05070c;
}

.postprod-color__viewer {
    grid-column: 1;
    grid-row: 2;
    margin: 12px 8px 8px 12px;
}

.postprod-color__viewer img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(1.04) contrast(1.05) brightness(0.86);
}

.postprod-color__nodes-panel {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    margin: 12px 12px 8px 8px;
    padding: 14px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 12px;
    border: 1px solid rgba(253, 246, 237, 0.09);
    background:
        linear-gradient(rgba(253, 246, 237, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(253, 246, 237, 0.025) 1px, transparent 1px),
        #03050a;
    background-size: 20px 20px;
}

.postprod-color__nodes {
    position: relative;
    left: auto;
    bottom: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: center;
    gap: 24px 22px;
    opacity: 1;
}

.postprod-color__nodes::before,
.postprod-color__nodes::after {
    content: none;
}

.postprod-color__node {
    min-width: 0;
    min-height: 72px;
    padding: 10px 8px;
    position: relative;
    display: grid;
    place-items: center;
    gap: 4px;
    border: 1px solid rgba(124, 162, 255, 0.42);
    border-radius: 3px;
    background: linear-gradient(145deg, rgba(36, 91, 255, 0.16), rgba(3, 5, 10, 0.96));
    color: rgba(253, 246, 237, 0.74);
    font: inherit;
    appearance: none;
    cursor: pointer;
    transition: opacity 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.postprod-color__node::before {
    content: "";
    width: 7px;
    height: 7px;
    position: absolute;
    left: -4px;
    top: 50%;
    border: 1px solid rgba(124, 162, 255, 0.66);
    border-radius: 50%;
    background: #05070c;
    transform: translateY(-50%);
}

.postprod-color__node::after {
    content: "";
    width: 23px;
    height: 1px;
    position: absolute;
    left: 100%;
    top: 50%;
    z-index: -1;
    background: rgba(124, 162, 255, 0.42);
}

.postprod-color__node:nth-child(3n)::after {
    content: none;
}

.postprod-color__node span {
    width: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.62rem;
    font-weight: 700;
}

.postprod-color__node strong {
    color: rgba(253, 246, 237, 0.42);
    font-size: 0.58rem;
}

.postprod-color__node.is-active {
    border-color: rgba(255, 94, 14, 0.82);
    box-shadow: 0 0 16px rgba(255, 94, 14, 0.14);
}

.postprod-color__node[aria-pressed="false"] {
    border-color: rgba(124, 162, 255, 0.18);
    opacity: 0.46;
    filter: saturate(0.32);
}

.postprod-color__node:focus-visible {
    outline: 2px solid var(--postprod-cream);
    outline-offset: 3px;
}

.postprod-color__node[data-color-node-group="cst"] span::after {
    content: " · LIÉ";
    color: rgba(124, 162, 255, 0.68);
    font-size: 0.48rem;
}

.postprod-color__timeline {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0 12px 8px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.postprod-color__timeline span,
.postprod-color__timeline button {
    min-width: 0;
    position: relative;
    padding: 0;
    border: 1px solid rgba(124, 162, 255, 0.2);
    border-radius: 2px;
    color: inherit;
    background-position: center;
    background-size: cover;
    filter: saturate(0.74) brightness(0.62);
    overflow: hidden;
    cursor: pointer;
}

.postprod-color__timeline :is(span, button):nth-child(1) { background-image: url("../assets/images/work-field-01.jpg"); }
.postprod-color__timeline :is(span, button):nth-child(2) { background-image: url("../assets/images/work-film-01.jpg"); }
.postprod-color__timeline :is(span, button):nth-child(3) { background-image: url("../assets/images/work-event-01.jpg"); }
.postprod-color__timeline :is(span, button):nth-child(4) { background-image: url("../assets/images/work-interview-01.jpg"); }
.postprod-color__timeline :is(span, button):nth-child(5) { background-image: url("../assets/images/work-corporate-01.jpg"); }
.postprod-color__timeline :is(span, button):nth-child(6) { background-image: url("../assets/images/work-sport-01.jpg"); }

.postprod-color__timeline :is(span, button).is-active {
    border-color: var(--postprod-orange);
    filter: saturate(0.95) brightness(0.78);
}

.postprod-color__timeline :is(span, button) b {
    position: absolute;
    left: 6px;
    bottom: 5px;
    color: rgba(253, 246, 237, 0.78);
    font-size: 0.56rem;
}

.postprod-color__timeline button:focus-visible {
    outline: 2px solid var(--postprod-cream);
    outline-offset: -3px;
}

.postprod-color__grading {
    grid-column: 1 / -1;
    grid-row: 4;
    padding: 14px 20px 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    border-top: 0;
    border-left: 0;
    background: #03050a;
}

.postprod-color__wheel {
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(96px, 1fr) auto auto auto;
    place-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
}

.postprod-color__wheel > span {
    width: min(112px, 72%);
    aspect-ratio: 1;
    position: relative;
    border-radius: 50%;
    background:
        radial-gradient(circle, #070b13 0 44%, transparent 46%),
        conic-gradient(#ff5e0e, #f3d64a 16%, #55d68b 33%, #49c8d8 49%, #4d78ff 66%, #a56be8 83%, #ff5e0e);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.66);
}

.postprod-color__wheel i {
    width: 8px;
    height: 8px;
    position: absolute;
    left: 56%;
    top: 43%;
    border: 1px solid rgba(253, 246, 237, 0.86);
    border-radius: 50%;
    background: #05070c;
}

.postprod-color__wheel:nth-child(2) i { left: 46%; top: 52%; }
.postprod-color__wheel:nth-child(3) i { left: 61%; top: 48%; }
.postprod-color__wheel:nth-child(4) i { left: 51%; top: 39%; }

.postprod-color__wheel strong {
    padding-bottom: 8px;
    color: rgba(253, 246, 237, 0.68);
    font-size: 0.68rem;
}

@media (max-width: 980px) {
    .postprod-color__transition {
        height: auto;
    }

    .postprod-color__content {
        position: relative;
        inset: auto;
        opacity: 1;
    }

    .postprod-color__workspace {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: 42px minmax(330px, 56vw) auto 112px auto;
    }

    .postprod-color__viewer {
        grid-column: 1;
        grid-row: 2;
        margin: 10px;
    }

    .postprod-color__nodes-panel {
        grid-column: 1;
        grid-row: 3;
        min-height: 240px;
        margin: 0 10px 10px;
    }

    .postprod-color__timeline {
        grid-column: 1;
        grid-row: 4;
        margin: 0 10px 10px;
    }

    .postprod-color__grading {
        grid-column: 1;
        grid-row: 5;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .postprod-color__wheel {
        min-height: 180px;
    }
}

@media (max-width: 620px) {
    .postprod-color__workspace {
        grid-template-rows: 42px 280px auto 104px auto;
    }

    .postprod-color__nodes {
        gap: 18px 12px;
    }

    .postprod-color__node {
        min-height: 62px;
        padding-inline: 4px;
    }

    .postprod-color__node::after {
        width: 13px;
    }

    .postprod-color__timeline {
        grid-template-columns: repeat(6, minmax(92px, 1fr));
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .postprod-color__grading {
        padding-inline: 10px;
        gap: 8px;
    }

    .postprod-color__wheel {
        min-height: 156px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .postprod-davinci-logo {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .postprod-color__content {
        position: relative;
        inset: auto;
        opacity: 1;
    }
}

@media (hover: none), (pointer: coarse) {
    /* Le "+" reste totalement invisible au repos, comme sur grand ecran :
       seul le titre s'affiche tant que le bandeau n'a pas atteint le centre
       de l'ecran. Cette regle le laissait auparavant a 78% d'opacite en
       permanence (repere de tapabilite faute de survol) : il se superposait
       alors au "o" de "savoir", ce qui donnait l'impression de deux titres
       imbriques. C'etait un etat stable, pas un artefact de transition.
       Le transition-duration force a 260ms sur le label a aussi ete retire :
       il ecrasait les durees desynchronisees definies plus haut, qui evitent
       que le titre et le "+" soient visibles ensemble pendant le fondu. */
    .craft-hero--link .craft-title__plus {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(0.9);
    }

    .craft-hero--link.is-attention-visible .craft-title__plus,
    .craft-hero--link:active .craft-title__plus {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) scale(1);
    }
}

/* Doit rester APRES le bloc tactile ci-dessus : les selecteurs ont la meme
   specificite, c'est donc l'ordre source qui tranche. Sans ce rappel, le
   reset "mouvement reduit" defini plus haut dans le fichier serait ecrase
   sur les appareils tactiles - sans effet visible aujourd'hui (scale(1) est
   neutre), mais toute valeur ajoutee au bloc tactile contournerait ensuite
   silencieusement la preference utilisateur. */
@media (prefers-reduced-motion: reduce) {
    .craft-hero--link .craft-title__plus,
    .craft-hero--link.is-attention-visible .craft-title__plus,
    .craft-hero--link:active .craft-title__plus {
        transform: translate3d(-50%, -50%, 0);
        transition: none;
    }
}

/* Production configurations carousel */
.production-config-shell {
    position: relative;
    z-index: 1;
    --production-carousel-control-gutter: clamp(108px, 7vw, 128px);
    width: calc(var(--production-equipment-width) + (2 * var(--production-carousel-control-gutter)));
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--production-carousel-control-gutter);
    isolation: isolate;
}

.production-config-controls {
    position: absolute;
    z-index: 10;
    inset-block: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    pointer-events: none;
}

.carousel-arrow {
    --carousel-arrow-size: 66px;
    --carousel-arrow-icon-size: 30px;
    --carousel-arrow-base-transform: translateY(0);
    position: relative;
    width: var(--carousel-arrow-size);
    height: var(--carousel-arrow-size);
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--cream);
    overflow: hidden;
    isolation: isolate;
    background: rgba(7, 9, 14, 0.58);
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
    backdrop-filter: blur(12px) saturate(1.08);
    cursor: pointer;
    pointer-events: auto;
    transform: var(--carousel-arrow-base-transform);
    transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.carousel-arrow::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, 0.64) 50%, transparent 72%);
    transform: translateX(-120%) rotate(-8deg);
}

.carousel-arrow svg {
    width: var(--carousel-arrow-icon-size);
    height: var(--carousel-arrow-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-arrow--previous {
    background: radial-gradient(circle at 32% 18%, rgba(180, 204, 255, 0.28), transparent 34%), rgba(36, 91, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(235, 241, 255, 0.38), inset 0 -8px 18px rgba(5, 19, 58, 0.28), 0 12px 30px rgba(0, 0, 0, 0.42), 0 0 24px rgba(36, 91, 255, 0.2);
}

.carousel-arrow--next {
    background: radial-gradient(circle at 32% 18%, rgba(255, 225, 204, 0.3), transparent 34%), rgba(255, 94, 14, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 239, 228, 0.38), inset 0 -8px 18px rgba(74, 18, 2, 0.3), 0 12px 30px rgba(0, 0, 0, 0.42), 0 0 24px rgba(255, 94, 14, 0.2);
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
    transform: var(--carousel-arrow-base-transform) translateY(-1px) scale(1.05);
}

.carousel-arrow:hover::before,
.carousel-arrow:focus-visible::before {
    animation: production-arrow-sheen 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes production-arrow-sheen {
    0% { opacity: 0; transform: translateX(-140%) rotate(-8deg); }
    24% { opacity: 0.72; }
    76% { opacity: 0.42; }
    100% { opacity: 0; transform: translateX(140%) rotate(-8deg); }
}

.carousel-arrow--previous:focus-visible {
    outline: 2px solid rgba(92, 151, 255, 0.96);
    outline-offset: 4px;
}

.carousel-arrow--next:focus-visible {
    outline: 2px solid rgba(255, 94, 14, 0.96);
    outline-offset: 4px;
}

.carousel-arrow--previous:active {
    transform: var(--carousel-arrow-base-transform) scale(0.95);
    box-shadow: inset 0 8px 18px rgba(5, 19, 58, 0.52), 0 5px 14px rgba(36, 91, 255, 0.24);
}

.carousel-arrow--next:active {
    transform: var(--carousel-arrow-base-transform) scale(0.95);
    box-shadow: inset 0 8px 18px rgba(74, 18, 2, 0.52), 0 5px 14px rgba(255, 94, 14, 0.24);
}

.carousel-arrow--previous:hover svg,
.carousel-arrow--previous:focus-visible svg {
    transform: translateX(-2px);
}

.carousel-arrow--next:hover svg,
.carousel-arrow--next:focus-visible svg {
    transform: translateX(2px);
}

.carousel-arrow--previous:active svg {
    transform: translateX(-3px);
}

.carousel-arrow--next:active svg {
    transform: translateX(3px);
}

.carousel-arrow:disabled {
    opacity: 0.3;
    cursor: default;
    transform: none;
}

.production-config-stage {
    --production-config-height: 419px;
    --config-rx: 0deg;
    --config-ry: 0deg;
    --config-scale: 1;
    --config-light-x: 50%;
    --config-light-y: 30%;
    position: relative;
    z-index: 1;
    height: var(--production-config-height);
    overflow: hidden;
    border: 1px solid rgba(109, 139, 194, 0.34);
    border-bottom-color: rgba(109, 139, 194, 0.56);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(7, 12, 26, 0.82), rgba(12, 7, 6, 0.8));
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    backdrop-filter: blur(16px) saturate(1.08);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(113, 151, 255, 0.14), inset 0 -1px 0 rgba(109, 139, 194, 0.2);
    transform: perspective(1100px) rotateX(var(--config-rx)) rotateY(var(--config-ry)) scale(var(--config-scale));
    transform-style: preserve-3d;
    transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 220ms ease;
    isolation: isolate;
}

.production-config-stage::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    padding: 1px;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background: linear-gradient(110deg, rgba(36, 91, 255, 0.92), rgba(36, 91, 255, 0.28) 38%, rgba(255, 94, 14, 0.28) 62%, rgba(255, 94, 14, 0.92));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.production-config-shell:not([data-production-ready]) .production-config-stage {
    visibility: hidden;
}

.production-config-stage:hover,
.production-config-stage:focus-within {
    --config-scale: 1.006;
    border-color: rgba(118, 151, 219, 0.54);
}

.production-config-stage:hover::after,
.production-config-stage:focus-within::after {
    opacity: 0.82;
}

.production-config-track {
    display: grid;
    height: 100%;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y pinch-zoom;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.production-config-track::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

.production-config-track:focus-visible {
    outline: 2px solid rgba(253, 246, 237, 0.82);
    outline-offset: -4px;
}

.production-config-card {
    min-width: 0;
    min-height: 0;
    height: 100%;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.production-config-card__content {
    width: 100%;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(380px, 1.18fr);
    grid-template-areas: "copy visual";
    align-items: center;
    gap: clamp(32px, 5vw, 84px);
    padding: clamp(28px, 3.5vw, 48px);
    color: inherit;
    background: transparent;
    text-align: left;
}

.production-config-card[data-production-layout="visual-left"] .production-config-card__content {
    grid-template-areas: "visual copy";
}

.production-config-card__copy {
    grid-area: copy;
    align-self: center;
    max-width: 620px;
    transform: translateY(-28px);
}

.production-config-card .production-config-visual {
    grid-area: visual;
    align-self: center;
}

.production-config-card h3 {
    margin: 0 0 12px;
    color: var(--cream);
    font-family: "Creato", "Coolvetica", Arial, sans-serif;
    font-size: clamp(2.4rem, 4.4vw, 5rem);
    line-height: 1;
    text-wrap: balance;
}

.production-config-card p {
    max-width: 58ch;
    margin-bottom: 0;
    color: rgba(253, 246, 237, 0.66);
    line-height: 1.55;
}

.production-config-visual {
    min-height: 0;
    /* La carte fait 419px et son contenu porte 48px de marge interieure haut
       et bas : il ne reste que 321px. A 420px, la boite du visuel debordait
       donc de 99px, rognes par l'overflow: hidden de la carte -- l'embase des
       rigs les plus hauts, Steadicam en tete, etait coupee. */
    height: 320px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: none;
}

.production-config-visual svg {
    width: min(94%, 600px);
    height: 100%;
    max-height: 100%;
    overflow: visible;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34));
    transform: translateY(-32px);
}

.production-config-visual .production-config-photo {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(96%, 760px);
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: contrast(1.05) saturate(0.95) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34));
    /* Plus de decalage vertical : il compensait une boite de 420px qui
       debordait la carte. La boite tient maintenant dedans, le centrage
       naturel (place-items: center) suffit. */
    transform: none;
    backface-visibility: hidden;
    will-change: transform;
    transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 320ms ease;
}

.production-config-visual:hover .production-config-photo,
.production-config-card:focus-within .production-config-photo {
    filter: contrast(1.08) saturate(0.98) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34));
}

/* Le calage a droite (justify-self: end + marge negative) servait a rattraper
   une photo trop grande pour sa colonne. Elle y tient desormais : on la laisse
   au centre de la sienne. */
/* justify-self explicite : sur un element de grille qui porte une LARGEUR,
   la valeur par defaut (stretch) se replie sur start, et le visuel se colle au
   bord gauche de sa colonne -- 303px de vide a sa droite, mesures. */
.production-config-visual--gimbal {
    width: min(100%, 460px);
    justify-self: center;
}

.production-config-visual--gimbal .production-config-photo {
    /* Largeur reelle plutot que scale() : le GPU rasterise a la taille de la
       boite puis etire, ce qui floute a haute densite d'ecran. */
    width: 111.5%;
    transform: none;
}

/* Le drone est plus large que haut, contrairement aux autres supports : a
   hauteur egale il occupait donc bien plus de place. Reduit de 10 %.
   Largeur reelle et non scale() : le GPU rasterise a la taille de la boite
   puis etire, ce qui flouterait -- d'autant que cette photo source est la plus
   petite du lot (450px de large). */
.production-config-visual[data-production-visual="drone"] .production-config-photo {
    width: 90%;
    height: 90%;
}

.production-config-visual[data-production-visual="shoulder"] {
    width: min(100%, 420px);
    justify-self: center;
}

.production-config-visual[data-production-visual="shoulder"] .production-config-photo {
    width: 95%;
    transform: none;
}

.production-config-part {
    transform-box: fill-box;
    transform-origin: center;
}

.production-optics-visual {
    min-height: 0;
    height: clamp(165px, 18vw, 280px);
    border-radius: 0;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .carousel-arrow,
    .production-config-stage {
        background: #08090c;
    }
}

/* Fleches du carrousel de configurations (Rig epaule, Trepied...) retirees
   sur mobile/tablette : la navigation se fait au swipe (le track a deja
   scroll-snap-type: x mandatory et se glisse nativement au doigt), les
   fleches n'etaient qu'un doublon visuel sur la photo. Desktop les garde. */
@media (max-width: 980px) {
    .production-config-controls {
        display: none;
    }
}

/* Points de pagination : memes regles que .testimonial-dots et
   .production-optics-dot (meme besoin, meme protection iOS contre le survol
   fantome qui reste colle au dernier point touche). Caches sur bureau, ou
   les fleches restent visibles. */
.production-config-dots {
    display: none;
}

.production-config-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 50%;
    appearance: none;
    background: #6e7177;
    cursor: pointer;
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.production-config-dot.is-active {
    background: var(--orange);
    box-shadow: 0 0 11px rgba(255, 94, 14, 0.68);
}

.production-config-dot:focus-visible {
    background: var(--orange);
    box-shadow: 0 0 11px rgba(255, 94, 14, 0.68);
    outline: none;
    transform: scale(1.14);
}

@media (hover: hover) and (pointer: fine) {
    .production-config-dot:hover {
        background: var(--orange);
        box-shadow: 0 0 11px rgba(255, 94, 14, 0.68);
        outline: none;
        transform: scale(1.14);
    }
}

@media (max-width: 980px) {
    .production-config-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        width: max-content;
        margin: 18px auto 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .production-config-dot {
        transition: none;
    }
}

@media (max-width: 1099px) {
    .production-config-shell {
        --production-carousel-control-gutter: clamp(84px, 9vw, 96px);
        padding-inline: var(--production-carousel-control-gutter);
    }

    .production-config-controls {
        inset-inline: 0;
    }

    .production-config-track {
        grid-auto-columns: 100%;
    }

    .production-config-card__content {
        grid-template-columns: minmax(220px, 0.82fr) minmax(300px, 1.18fr);
        gap: clamp(24px, 4vw, 48px);
        padding: clamp(28px, 4vw, 44px);
    }

    .production-config-visual svg {
        transform: translateY(-22px);
    }

    /* Meme traitement qu'en dessous de 980px : l'agrandissement quitte le
       transform pour la mise en page, sans quoi il se lit comme un flou sur
       les ecrans a haute densite. */
    .production-config-visual .production-config-photo {
        width: calc(min(96%, 760px) * 1.2);
        height: 120%;
        transform: translateY(-11px);
    }
}

@media (max-width: 699px) {
    .production-config-shell {
        --production-carousel-control-gutter: 8px;
        padding-inline: 0;
    }

    .production-config-controls {
        inset-inline: 8px;
    }

    /* Le panneau est un cadre unique partage par les 6 cartes du carrousel :
       sa hauteur doit couvrir la carte la plus haute, sinon overflow: hidden
       rogne le visuel. Pire cas mesure a 320px de large : "Legere et mobile"
       (68px de padding vertical + 217px de copy + 16px de gap + 340px de
       visuel = 641px). Padding et gap resserres par rapport a la version
       precedente (98px / 24px) pour reduire l'espace vide autour de la photo
       sur les cartes plus courtes (ex. "Rig epaule"), qui heritent du meme
       cadre partage. */
    .production-config-stage {
        --production-config-height: 642px;
    }

    .production-config-card__content,
    .production-config-card[data-production-layout="visual-left"] .production-config-card__content {
        grid-template-columns: 1fr;
        grid-template-areas: "copy" "visual";
        /* align-content: center deplacait le bloc copy+visual ensemble - le
           titre descendait alors que seule la photo devait bouger. La ligne
           "visual" passe en 1fr : elle absorbe tout le surplus du panneau
           (680px, cale sur le pire cas) au lieu de la seule hauteur de la
           photo (340px), pendant que la ligne "copy" garde sa hauteur propre
           et reste donc flush contre le padding-top, quelle que soit la
           carte. La photo est ensuite centree DANS cette ligne agrandie (voir
           align-self sur .production-config-visual) : c'est elle seule qui
           descend. */
        grid-template-rows: auto 1fr;
        align-content: start;
        gap: 16px;
        padding: 44px 54px 24px;
    }

    /* translateY(-28px) vient de la mise en page desktop (2 colonnes cote a
       cote, la copy est recentree verticalement par rapport au visuel). En 1
       colonne, ce decalage tire le titre contre le bord du panneau au lieu
       de laisser le padding-top s'appliquer normalement. */
    .production-config-card__copy {
        transform: translateY(0);
    }

    .production-config-visual {
        height: 340px;
        align-self: center;
    }

    .production-config-visual svg {
        transform: translateY(-12px);
    }

    /* L'agrandissement de 20% passe de transform a la mise en page. En
       transform, l'image est rasterisee a la taille de sa boite puis etiree
       par le compositeur : sur un ecran a 2 ou 3 pixels physiques par pixel
       CSS, cet etirement se voit comme un flou. Exprime en largeur/hauteur,
       le navigateur rasterise directement a la taille finale. Geometrie
       identique : la boite et le facteur sont les memes, seul l'ordre change. */
    .production-config-visual .production-config-photo {
        width: calc(min(96%, 760px) * 1.2);
        height: 120%;
        transform: translateY(-6px);
    }

    /* Rig epaule (shoulder) : la regle desktop le pousse a droite
       (justify-self: end, margin-right negatif) pour l'aligner sur le texte a
       cote de lui dans la mise en page 2 colonnes. En 1 colonne (texte
       au-dessus, visuel en dessous) ce decalage desaxe la photo. Seul ce
       recentrage reste necessaire : la taille et le cadrage sont geres par le
       traitement generique, le PNG etant desormais rogne au ras du sujet
       comme les autres configurations. */
    .production-config-visual[data-production-visual="shoulder"] {
        width: 100%;
        /* La ligne "visual" (grid-template-rows: auto 1fr) laisse au moins
           413px de libre sur cette carte, meme au plus petit format teste
           (320px) : 400px tient partout avec de la marge, agrandit le rig
           d'environ 18% par rapport au traitement generique (340px). */
        height: 400px;
        justify-self: center;
        margin-right: 0;
    }

    /* La regle desktop de cette photo (translateY(-56px), scale 0.95) porte
       une specificite superieure a la regle mobile generique juste au-dessus
       et reprendrait la main sans cet override : le rig remonterait hors de
       son cadre. Valeurs identiques au traitement generique. */
    .production-config-visual[data-production-visual="shoulder"] .production-config-photo {
        width: calc(min(96%, 760px) * 1.2);
        height: 120%;
        transform: translateY(-6px);
    }

    /* Stabilisateur : meme defaut que le rig epaule, un calage desktop
       (justify-self: end + marge droite negative, photo agrandie de 11%)
       jamais neutralise en 1 colonne - le visuel se retrouvait 65px hors axe. */
    .production-config-visual--gimbal {
        width: 100%;
        justify-self: center;
        margin-right: 0;
    }

    .production-config-visual--gimbal .production-config-photo {
        width: min(96%, 760px);
        /* La boite alpha du PNG est quasi centree (23px/27px de marge), mais
           la silhouette (ecran deporte a gauche en haut, corps et cable a
           droite en bas) donne une impression de poids visuel a droite.
           Decalage manuel demande pour compenser cet effet optique. */
        width: calc(min(96%, 760px) * 1.2);
        height: 120%;
        transform: translate(-16px, -6px);
    }

    /* Legere et mobile : meme principe que Stabilisateur - boite alpha
       quasi centree (15px/6px de marge), mais le corps de la camera pese
       visuellement plus a droite que le tripode a gauche. */
    .production-config-visual[data-production-visual="lightweight"] .production-config-photo {
        width: min(96%, 760px);
        width: calc(min(96%, 760px) * 1.2);
        height: 120%;
        transform: translate(-17px, -6px);
    }

    /* Le titre le plus long, "Legere et mobile" (3 mots), passait sur 2
       lignes des que la colonne interieure descend sous ~294px (soit environ
       471px d'ecran) : la police restait figee a 38.4px (clamp(2.4rem, 4.4vw,
       5rem) plafonne au plancher sur toute la plage mobile). Formule calee
       sur ce pire cas et verifiee a 320/430/699px, avec ~8% de marge :
       - 320px : colonne 166px, texte tient a 20.8px (plancher).
       - 430px : colonne 276px, texte tient a 33.4px.
       - >=471px : la formule depasse 38.4px, plafonnee au meme maximum
         qu'avant (aucun changement au-dela de ce seuil).
       Couvre aussi "Stabilisateur" (219px a 38.4px), qui avait sa propre
       regle sous 380px : plus necessaire, cette formule est plus stricte. */
    .production-config-card h3 {
        font-size: clamp(1.3rem, calc(12.1vw - 18.6px), 2.4rem);
    }

    .production-config-arrow {
        width: 60px;
        height: 60px;
    }

    .production-optics-controls {
        inset-inline: 8px;
    }

    .production-material__group--optics {
        grid-template-areas: "heading" "copy" "media";
        grid-template-columns: 1fr;
        padding-block: clamp(22px, 8vw, 34px);
    }

    .production-optics-copy {
        padding-inline: 0;
    }

    .production-optics-media {
        height: clamp(400px, 108vw, 560px);
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .production-config-stage {
        transform: none;
        transition: border-color 0s;
    }
}

/* Titre uniformement blanc. L'ancien montage coupait le mot en deux (clair a
   gauche, sombre a droite) pour rester lisible de part et d'autre de l'unique
   diagonale, et inversait les deux au survol. Avec six panneaux qui changent
   de largeur, ce point de coupe n'existe plus : le titre reste blanc, avec une
   ombre discrete qui suffit a le detacher des photos. */
.craft-title__light,
.craft-title__split,
.craft-title__dark {
    color: var(--white);
}

/* L'ombre est posee une seule fois sur le mot entier, en filtre sur le
   conteneur, et non en text-shadow sur chacun des trois fragments.
   En text-shadow, l'ombre du "o" se peignait PAR-DESSUS le "v" et le "i"
   voisins au lieu de passer derriere -- une tache sombre de chaque cote de la
   lettre. Deux raisons cumulees : le "o" porte un transform qui en fait un
   calque a part, et de toute facon chaque fragment inline peint sa propre
   ombre juste avant son texte, donc apres le texte du fragment precedent.
   Un filtre sur le parent s'applique au rendu deja compose des trois : une
   seule ombre, autour du mot, sans recouvrement. */
.craft-title__label {
    /* Meme halo que le "+" qui le remplace au survol : un lisere net pour le
       bord, une ombre courte pour l'assise, un halo large qui assombrit le
       fond juste autour. Le titre tombe a cheval sur la diagonale, donc sur
       une moitie claire et une moitie sombre -- une simple ombre portee le
       laissait se noyer du cote clair. */
    filter:
        drop-shadow(0 0 1px rgba(0, 0, 0, 0.92))
        drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 16px rgba(0, 0, 0, 0.55));
}

.craft-title__split {
    display: inline-block;
    position: relative;
    transform: translate(var(--craft-o-x), var(--craft-o-y));
}

/* Le tiret colle a "r" et "f" dans Coolvetica : sa chasse laisse trop peu de
   blanc de chaque cote pour que le letter-spacing du titre suffise a le
   detacher. Une marge posee sur le tiret seul, sans toucher a l'espacement
   des autres lettres. */
.craft-title__hyphen {
    margin: 0 0.06em;
}

.craft-collage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: clamp(300px, 44vw, 560px);
    align-items: stretch;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.craft-collage__image {
    margin: 0;
    min-width: 0;
    position: relative;
}

.craft-collage__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.craft-collage__image--left img {
    filter: grayscale(1) contrast(1.05);
}

.craft-collage__image--right::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent);
    z-index: 1;
}

.craft-collage h2 {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    display: grid;
    place-items: center;
    font-family: "Coolvetica", Arial, sans-serif;
    font-size: clamp(3.2rem, 8vw, 8rem);
    line-height: 0.95;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.58);
}

.vision-band h2 span,
.section-heading h2 span,
.stats h2 span {
    color: var(--orange);
}

.clients {
    /* Les deux bandes de logos encadrent les avis : trop d'air entre elles et
       la section se lit comme trois blocs sans rapport. Valeurs resserrees
       (70 -> 42 en padding, voir aussi les marges de .testimonial-shell). */
    padding: clamp(30px, 4vw, 42px) 0;
    background: var(--black);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* La section remonte de 20px sur le bandeau savoir-faire pour en recouvrir le
   dernier lisere. Sans cela, en s'arretant en haut de cette section on gardait
   une bande de photo au-dessus des logos, lue comme un reste de la section
   precedente. Le fond noir opaque fait le recouvrement.
   Grand ecran uniquement : sur un bandeau mobile de ~200px, ces 20px
   amputaient un dixieme de la composition et coupaient la diagonale avant le
   bord -- elle se lisait comme cassee (constate sur iPhone). */
@media (min-width: 981px) {
    .clients {
        margin-top: -20px;
    }
}

.logo-marquee {
    width: 100%;
    background: var(--black);
    overflow: hidden;
    opacity: 0.9;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-track {
    --logo-gap: clamp(28px, 4.8vw, 64px);
    --logo-slot-width: clamp(124px, 12vw, 178px);
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 8px 0;
    width: max-content;
    min-width: max-content;
    will-change: transform;
}

.logo-group {
    display: inline-flex;
    align-items: center;
    flex: 0 0 max-content;
    gap: var(--logo-gap);
    width: max-content;
    min-width: max-content;
    padding-right: var(--logo-gap);
    white-space: nowrap;
}

.logo-track img {
    width: var(--logo-slot-width);
    height: clamp(30px, 3.6vw, 54px);
    max-height: none;
    max-width: none;
    opacity: 0.86;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.06));
    display: block;
    flex: 0 0 auto;
}

.logo-track .client-logo--large {
    height: clamp(48px, 5vw, 78px);
    opacity: 0.94;
}

.logo-track .client-logo--ui {
  width: clamp(158px, 15.3vw, 227px);
  height: clamp(61px, 6.4vw, 99px);
  margin-inline: -12px;
}

.logo-track .client-logo--4sang,
.logo-track .client-logo--pyguargues {
    height: clamp(45px, 5.4vw, 81px);
    opacity: 0.94;
}

.logo-track .client-logo--xl {
    height: clamp(58px, 6.2vw, 96px);
    opacity: 0.92;
}

.logo-track .client-logo--optique {
    height: clamp(77px, 8.2vw, 128px);
}

.logo-track .client-logo--escpo {
    height: clamp(41px, 4.95vw, 74px);
    opacity: 0.92;
}

.logo-track .client-logo--sifight {
    height: clamp(72px, 7.5vw, 117px);
    opacity: 0.94;
}

.logo-track .client-logo--icare {
    height: clamp(60px, 7.2vw, 108px);
    opacity: 0.94;
}

.logo-track .client-logo--reve {
    height: clamp(52px, 5.8vw, 88px);
    opacity: 0.96;
    filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(255, 255, 255, 0.08));
}

/* Serie vectorisee depuis les rasters : quatre de ces logos sont plus hauts
   que larges, or la bande contraint la HAUTEUR (clamp(30px, 3.6vw, 54px)) et
   object-fit: contain les reduit alors a presque rien. On leur donne la meme
   compensation qu'aux logos verticaux deja presents. */
.logo-track .client-logo--parisfc {
    height: clamp(58px, 6.2vw, 96px);
    opacity: 0.92;
}

.logo-track .client-logo--ffdanse {
    height: clamp(50px, 5.5vw, 84px);
    opacity: 0.94;
}

.logo-track .client-logo--troyesroller {
    height: clamp(48px, 5.4vw, 81px);
    opacity: 0.94;
}

.logo-track .client-logo--taureau {
    height: clamp(42px, 4.6vw, 70px);
    opacity: 0.94;
}

.logo-marquee--right .logo-track {
    animation: logo-scroll-right 69s linear infinite;
}

.logo-marquee--left .logo-track {
    animation: logo-scroll-left 78s linear infinite;
}

@keyframes logo-scroll-right {
    from {
        transform: translate3d(-50%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes logo-scroll-left {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.testimonial-shell {
    width: min(1180px, calc(100% - 32px));
    margin: clamp(32px, 4vw, 54px) auto;
    text-align: center;
    position: relative;
    /* Plus de min-height figee : la pile est une grille dont la hauteur suit
       le plus long des avis (voir .testimonial-stack). L'ancienne valeur de
       350px etait deja depassee par l'avis Aomok, qui en demande 387 -- le
       texte mordait sur la bande de logos. */
    padding: 0 clamp(42px, 6vw, 88px);
    touch-action: pan-y;
}

.eyebrow {
    margin: 0 0 20px;
    color: #ff5a17;
    font-size: clamp(1.44rem, 1.96vw, 1.74rem);
    font-weight: 700;
    text-shadow: 0 0 12px rgba(255, 90, 23, 0.34);
}

.testimonial-badge {
    width: clamp(76px, 7vw, 92px);
    height: clamp(76px, 7vw, 92px);
    margin: 0 auto 24px;
    object-fit: contain;
    filter: none;
    opacity: 0.88;
    border-radius: 50%;
    box-shadow: none;
    filter: drop-shadow(0 0 5px rgba(255, 90, 23, 0.2));
}

/* Transparent en grand ecran : les figures restent des enfants directs du
   shell pour leur positionnement absolu. En mobile/tablette, ce conteneur
   devient une pile en grille (voir le bloc max-width: 980px). */
/* Les avis occupent tous LA MEME cellule de grille : ils se superposent sans
   etre sortis du flux, donc la pile prend la hauteur du plus long et cette
   hauteur ne bouge plus d'un avis a l'autre. C'est la solution deja retenue
   pour le mobile (voir la requete a 980px) ; le desktop, reste en position
   absolue avec une hauteur figee, debordait des qu'un avis s'allongeait.
   Marge de 66px : l'ecart mesure entre le badge et la citation avant bascule. */
.testimonial-stack {
    display: grid;
    /* Centre vertical : la cellule fait la hauteur du plus long avis, les
       autres y flottent. Alignes en haut, ils laissaient tout le vide en bas
       -- jusqu'a 188px sous les plus courts, lu comme un trou avant les
       points. Centres, l'ecart se partage de part et d'autre et se lit comme
       une respiration. */
    align-items: center;
    margin-top: 44px;
}

/* La diapositive porte desormais l'empilement (grid-area, opacite,
   visibilite) : un avis seul et une paire d'avis sont deux diapositives
   equivalentes de ce point de vue, elles ne different que par leur contenu.
   .testimonial (la figure, plus bas) redevient un element de mise en page
   ordinaire, y compris pour les paires ou deux figures cohabitent dans la
   meme diapositive. */
.testimonial-slide {
    grid-area: 1 / 1;
    /* Toutes affichees, meme les inactives : un element en display: none sort
       de la grille, la cellule ne se serait donc calee que sur la diapositive
       en cours et la hauteur du bloc aurait change a chaque avis. Elles sont
       donc empilees dans la meme cellule et masquees par visibility/opacity
       -- ce qui les rend aussi inatteignables au clavier, bouton "+" compris. */
    display: block;
    margin: 0 auto;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    filter: blur(2px);
    transition: opacity 240ms ease, transform 240ms ease, filter 240ms ease;
}

.testimonial-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    filter: blur(0);
}

.testimonial-slide.is-active.is-entering {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
}

.testimonial-slide.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(2px);
}

/* Deux avis courts cote a cote. auto-fit + minmax replie naturellement sur
   une seule colonne des que la largeur manque (petits telephones), sans
   media query dediee : chaque colonne demande au moins 240px, en dessous les
   deux avis s'empilent verticalement. */
.testimonial-slide--pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.testimonial blockquote {
    margin: 0 auto 22px;
    max-width: 980px;
    color: #d9d5cf;
    font-size: clamp(1rem, 1.65vw, 1.34rem);
    line-height: 1.42;
    text-wrap: balance;
}

.testimonial figcaption {
    display: grid;
    gap: 4px;
}

.testimonial figcaption strong {
    color: var(--white);
    font-size: 1.05rem;
}

.testimonial figcaption span {
    color: var(--muted);
}

/* Bouton "+" des avis qui ont une version longue. Pose sous la signature,
   dans le flux : la carte du carrousel est en position absolue et sa hauteur
   varie d'un avis a l'autre, un placement absolu se serait decale. */
/* Le "+" devient un libelle explicite : la pastille ronde n'annoncait pas ce
   qu'elle ouvrait, et le depliage n'est plus une fenetre mais un
   prolongement de la carte. */
.testimonial__more {
    margin: 18px auto 0;
    padding: 7px 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 94, 14, 0.55);
    border-radius: 999px;
    background: rgba(255, 94, 14, 0.08);
    color: var(--orange);
    font: 400 0.82rem/1.2 inherit;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

/* Chevron trace en CSS : il pivote vers le haut une fois l'avis deplie. */
.testimonial__more::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 300ms ease;
}

.testimonial.is-expanded .testimonial__more::after {
    transform: translateY(1px) rotate(-135deg);
}

/* Garde-fou : sur iPhone le survol se declenche au toucher et reste fige.
   L'effet n'existe donc que la ou un vrai survol est possible. */
@media (hover: hover) {
    .testimonial__more:hover {
        background: var(--orange);
        border-color: var(--orange);
        color: #050505;
    }
}

.testimonial__more:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

/* --- Depliage de l'avis complet ---------------------------------------------
   Les deux avis les plus longs tiennent en version courte dans la carte et se
   deplient sur place, poussant le reste de la page vers le bas -- plutot que
   d'ouvrir une fenetre par-dessus, ou l'on perdait le fil de la lecture.

   La hauteur s'anime par grid-template-rows passant de 0fr a 1fr : c'est la
   seule facon d'animer vers une hauteur "auto" sans la mesurer en JavaScript,
   donc sans qu'elle se decale si le texte se recompose (fenetre redimensionnee,
   police de secours chargee plus tard).

   Toutes les diapositives du carrousel partagent la meme cellule de grille
   (voir .testimonial-slide) : la pile prend la hauteur de la plus haute, donc
   deplier un avis agrandit bien le bloc, et la page avec. */
.testimonial__fold {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.testimonial__fold > * {
    /* Indispensable au procede : sans debordement masque, l'enfant garderait sa
       hauteur naturelle et depasserait de la rangee repliee. */
    overflow: hidden;
    min-height: 0;
}

/* Etat replie : l'avis complet est retire de la hauteur, l'avis court occupe
   la place. Au depliage les deux echangent leurs valeurs. */
.testimonial__fold--full {
    grid-template-rows: 0fr;
}

.testimonial.is-expanded .testimonial__fold {
    grid-template-rows: 0fr;
}

.testimonial.is-expanded .testimonial__fold--full {
    grid-template-rows: 1fr;
}

/* Le texte s'efface avant que la hauteur ne se referme, et reapparait une fois
   la place faite : sans ce decalage on lisait les deux versions superposees
   pendant la transition. */
.testimonial__short,
.testimonial__full {
    opacity: 1;
    transition: opacity 200ms ease 240ms;
}

.testimonial__fold--full .testimonial__full,
.testimonial.is-expanded .testimonial__short {
    opacity: 0;
    transition: opacity 160ms ease;
}

.testimonial.is-expanded .testimonial__full {
    opacity: 1;
    transition: opacity 220ms ease 260ms;
}

.testimonial__full p {
    margin: 0 0 0.9em;
    text-align: left;
}

.testimonial__full p:last-child {
    margin-bottom: 0;
}

.testimonial__full p:first-child::before {
    content: "« ";
}

.testimonial__full p:last-child::after {
    content: " »";
}

@media (prefers-reduced-motion: reduce) {
    .testimonial__fold,
    .testimonial__short,
    .testimonial__full {
        transition: none;
    }
}

.testimonial-controls {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 58%;
    z-index: 3;
    margin: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    transform: translateY(-50%);
}

/* La hauteur mobile du bloc avis est desormais dictee par le contenu
   (pile en grille, bloc max-width: 980px plus bas) : plus de min-height
   figee, qui provoquait le chevauchement du texte par les points. */

@media (min-width: 768px) {
    .postprod-page-nav {
        display: flex;
        position: fixed !important;
        z-index: 9999 !important;
        top: 50vh !important;
        left: 16px !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
    }
}

.testimonial-controls button {
    --carousel-arrow-size: 44px;
    --carousel-arrow-icon-size: 18px;
}

/* Points de navigation des avis (mobile/tablette) : memes codes que les
   pastilles de scenes du bloc Color (postprod-color-tool__look-scenes). Ils
   remplacent les fleches sous 981px ; le desktop garde ses fleches. */
.testimonial-dots {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 3;
    align-items: center;
    gap: 0.66rem;
    padding: 0.45rem 0.62rem;
    border-radius: 999px;
    background: rgba(2, 3, 5, 0.76);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    transform: translateX(-50%);
}

.testimonial-dots button {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 50%;
    appearance: none;
    background: #6e7177;
    cursor: pointer;
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.testimonial-dots button.is-active {
    background: var(--orange);
    box-shadow: 0 0 11px rgba(255, 94, 14, 0.68);
}

/* Focus clavier : hors media gate, il doit rester visible partout (un
   utilisateur au clavier doit savoir ou il se trouve). Safari ne l'applique
   pas a un focus issu du toucher, il ne participe donc pas au bug ci-dessous. */
.testimonial-dots button:focus-visible {
    background: var(--orange);
    box-shadow: 0 0 11px rgba(255, 94, 14, 0.68);
    outline: none;
    transform: scale(1.14);
}

/* Survol reserve aux pointeurs fins : iOS emule le survol au toucher et le
   laisse COLLE sur le dernier point touche jusqu'au prochain toucher ailleurs.
   Comme le survol utilisait le meme orange que .is-active, on voyait DEUX
   points actifs apres avoir tape un point puis swipe : l'ancien garde le
   survol fantome, le nouveau porte is-active. Meme protection que les regles
   du bandeau savoir-faire. */
@media (hover: hover) and (pointer: fine) {
    .testimonial-dots button:hover {
        background: var(--orange);
        box-shadow: 0 0 11px rgba(255, 94, 14, 0.68);
        outline: none;
        transform: scale(1.14);
    }
}

@media (max-width: 980px) {
    .testimonial-controls {
        display: none;
    }

    /* Tout le bloc remonte : marge superieure et espaces internes resserres
       au-dessus de la citation, pour degager la place rendue aux points. */
    .testimonial-shell {
        min-height: 0;
        margin-top: 28px;
        margin-bottom: 32px;
        /* Les 42px lateraux ne servaient qu'a loger les fleches, masquees
           ici : on rend cette largeur au texte, qui tient alors sur moins
           de lignes - c'est ce qui compense la hauteur reprise par les
           points passes en flux normal. */
        padding-inline: 14px;
    }

    .eyebrow {
        margin-bottom: 12px;
    }

    .testimonial-badge {
        width: 64px;
        height: 64px;
        margin-bottom: 14px;
    }

    /* Sur grand ecran, tous les avis occupent la meme cellule et le bloc
       prend la hauteur du plus long : elle ne bouge jamais. Sur telephone ce
       compromis coutait trop cher -- mesure : pile de 496px pour un avis
       affiche de 324px, soit 86px de vide au-dessus ET en dessous, l'avis
       flottait au milieu et les points semblaient decroches. Ici seuls
       l'avis affiche et ceux en transition restent dans la grille : la
       hauteur suit l'avis courant, l'ecart avec le badge et les points est
       donc constant. Le saut de hauteur au changement d'avis est le prix,
       assume sur mobile ou la stabilite comptait surtout pour la souris. */
    .testimonial-stack {
        display: grid;
        margin-top: 24px;
    }

    .testimonial-stack > .testimonial-slide:not(.is-active):not(.is-leaving):not(.is-entering) {
        display: none;
    }

    .testimonial-stack > .testimonial-slide {
        grid-area: 1 / 1;
        display: block;
        position: static;
        top: auto;
        left: auto;
        right: auto;
    }

    /* En dessous de 980px, une paire tient rarement sur deux colonnes
       lisibles (auto-fit la replierait de toute facon des ~560px) : on force
       l'empilement vertical plus tot, avant que le texte ne se resserre. */
    .testimonial-slide--pair {
        grid-template-columns: 1fr;
        gap: clamp(20px, 5vw, 32px);
    }

    /* Points repousses sous la citation, en flux normal. */
    .testimonial-dots {
        display: flex;
        position: static;
        width: max-content;
        margin: 18px auto 0;
        transform: none;
    }

    /* Le swipe suit le doigt : glissement horizontal directionnel au lieu du
       fondu vertical (qui denaturait le geste). data-slide-direction est pose
       par main.js avant chaque transition. */
    .testimonial-shell[data-slide-direction="next"] .testimonial-slide.is-active.is-entering {
        transform: translateX(36px);
    }

    .testimonial-shell[data-slide-direction="next"] .testimonial-slide.is-leaving {
        transform: translateX(-36px);
    }

    .testimonial-shell[data-slide-direction="prev"] .testimonial-slide.is-active.is-entering {
        transform: translateX(-36px);
    }

    .testimonial-shell[data-slide-direction="prev"] .testimonial-slide.is-leaving {
        transform: translateX(36px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .testimonial-dots button {
        transition: none;
    }

    .testimonial-slide,
    .testimonial-slide.is-active.is-entering,
    .testimonial-slide.is-leaving,
    .testimonial-shell[data-slide-direction="next"] .testimonial-slide.is-active.is-entering,
    .testimonial-shell[data-slide-direction="next"] .testimonial-slide.is-leaving,
    .testimonial-shell[data-slide-direction="prev"] .testimonial-slide.is-active.is-entering,
    .testimonial-shell[data-slide-direction="prev"] .testimonial-slide.is-leaving {
        transition: none;
        transform: none;
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carousel-arrow,
    .carousel-arrow::before,
    .carousel-arrow svg {
        animation: none !important;
        transition: none !important;
    }

    .carousel-arrow:hover,
    .carousel-arrow:focus-visible,
    .carousel-arrow:active {
        transform: var(--carousel-arrow-base-transform);
    }

    .carousel-arrow:hover svg,
    .carousel-arrow:focus-visible svg,
    .carousel-arrow:active svg {
        transform: none;
    }
}

.vision-band {
    background: var(--cream);
    color: var(--ink);
    min-height: 340px;
    padding: clamp(74px, 9vw, 126px) clamp(42px, 9vw, 168px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.vision-band h2,
.section-heading h2,
.stats h2,
.contact-intro h1,
.contact-intro h2 {
    margin: 0;
    font-family: "Coolvetica", Arial, sans-serif;
    /* Coolvetica est tres serree de nature : a cette taille les lettres se
       touchaient presque. Meme valeur que le titre du bandeau savoir-faire,
       pour que les grands titres du site respirent pareil. */
    letter-spacing: 0.045em;
    line-height: 0.95;
}

.vision-band h2 {
    font-size: clamp(2.1rem, 5vw, 4.8rem);
    font-weight: 600;
}

.button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-weight: 700;
    transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}

.button:hover {
    transform: translateY(-2px);
}

.button--primary {
    background: var(--orange);
    color: var(--white);
    box-shadow: 0 12px 24px rgba(255, 90, 23, 0.26);
}

.vision-band .button {
    min-height: 70px;
    padding: 10px 56px;
    margin-right: clamp(8px, 2.4vw, 36px);
    font-size: 1.14rem;
}

.vision-band .button:active {
    transform: translateY(2px);
    filter: brightness(0.96) contrast(1.02);
    box-shadow:
        inset 0 5px 14px rgba(0, 0, 0, 0.28),
        inset 0 -2px 6px rgba(255, 246, 237, 0.14),
        0 4px 8px rgba(255, 90, 23, 0.12);
}

.works {
    background: var(--black);
    padding: clamp(40px, 7vw, 84px) 0 0;
    overflow: hidden;
    perspective: 1180px;
    perspective-origin: center 10%;
}

.works-reveal {
    --works-reveal-progress: 0;
    --works-reveal-wave: 0;
    --works-reveal-closed: calc(1 - var(--works-reveal-progress));
    position: relative;
    isolation: isolate;
    transform-origin: center top;
    transform-style: preserve-3d;
    transform:
        translate3d(0, calc(var(--works-reveal-closed) * 210px + var(--works-reveal-wave) * 24px), calc(var(--works-reveal-closed) * -72px))
        scale(calc(0.86 + var(--works-reveal-progress) * 0.14 + var(--works-reveal-wave) * 0.01));
    opacity: calc(0.24 + var(--works-reveal-progress) * 0.76);
    filter:
        blur(calc(var(--works-reveal-closed) * 1.1px))
        brightness(calc(0.84 + var(--works-reveal-progress) * 0.16))
        saturate(calc(0.86 + var(--works-reveal-progress) * 0.14));
    transition: transform 140ms cubic-bezier(0.2, 0.68, 0.28, 1), opacity 140ms ease, filter 140ms ease;
    will-change: transform, opacity, filter;
}

.works-reveal > * {
    position: relative;
    z-index: 1;
}

.works-reveal::before,
.works-reveal::after {
    content: "";
    position: absolute;
    inset-inline: clamp(8px, 2vw, 28px);
    pointer-events: none;
    z-index: 2;
}

.works-reveal::before {
    top: clamp(-28px, -3vw, -12px);
    height: clamp(110px, 18vw, 260px);
    background: linear-gradient(180deg, rgba(255, 246, 237, 0.052), rgba(255, 94, 14, 0.024) 34%, rgba(0, 0, 0, 0) 78%);
    opacity: calc(var(--works-reveal-closed) * 0.48);
    transform: translate3d(0, calc(var(--works-reveal-closed) * -30px), 34px);
    transform-origin: center top;
    mix-blend-mode: screen;
}

.works-reveal::after {
    inset-block: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.07) 44%, rgba(0, 0, 0, 0) 82%);
    opacity: calc(var(--works-reveal-closed) * 0.34);
    transform: translate3d(0, calc(var(--works-reveal-closed) * 24px), 28px);
}

.section-heading {
    position: relative;
    text-align: center;
    margin-bottom: 58px;
}

.section-heading h2 {
    font-size: clamp(3rem, 7vw, 7.6rem);
    font-weight: 600;
}

.section-heading h2 span {
    color: #ff6b1f;
    text-shadow: 0 0 10px rgba(255, 90, 23, 0.46);
}

.section-heading::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 62px;
    height: 4px;
    border-radius: 999px;
    background: #ff6b1f;
    box-shadow: 0 0 10px rgba(255, 90, 23, 0.42);
    transform: translateX(-50%);
}

.section-heading::before {
    content: none;
}

.filter-bar {
    width: min(940px, calc(100% - 28px));
    min-height: 50px;
    margin: 0 auto clamp(40px, 6vw, 70px);
    padding: 5px;
    border: 1px solid rgba(253, 246, 237, 0.2);
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    background: linear-gradient(180deg, rgba(7, 7, 8, 0.98), rgba(2, 2, 3, 0.96));
    box-shadow: inset 0 0 0 1px rgba(39, 92, 215, 0.08), 0 16px 34px rgba(0, 0, 0, 0.42);
    --filter-dot-left: 8.333%;
    --filter-dot-width: 24px;
    --filter-dot-color: var(--blue);
    --filter-dot-shadow: rgba(39, 92, 215, 0.52);
}

.filter-bar button {
    border: 0;
    border-radius: 4px;
    min-height: 40px;
    background: transparent;
    color: #ded8cf;
    font-size: 0.88rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72);
    transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.filter-icon {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 5px rgba(39, 92, 215, 0.42);
    flex: 0 0 auto;
}

.filter-icon--all {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--blue);
    box-shadow: 0 0 5px rgba(39, 92, 215, 0.28);
}

.filter-icon--cinematique,
.filter-icon--evenementiel,
.filter-icon--sportif {
    background: var(--orange);
    box-shadow: 0 0 5px rgba(255, 90, 23, 0.44);
}

.filter-bar button.is-active,
.filter-bar button:hover {
    background: rgba(39, 92, 215, 0.13);
    color: #fff8ef;
    box-shadow: inset 0 0 0 1px rgba(39, 92, 215, 0.42), 0 0 10px rgba(39, 92, 215, 0.12);
}

.filter-bar button[data-filter="cinematique"].is-active,
.filter-bar button[data-filter="cinematique"]:hover,
.filter-bar button[data-filter="cinematique"]:focus-visible,
.filter-bar button[data-filter="evenementiel"].is-active,
.filter-bar button[data-filter="evenementiel"]:hover,
.filter-bar button[data-filter="evenementiel"]:focus-visible,
.filter-bar button[data-filter="sportif"].is-active,
.filter-bar button[data-filter="sportif"]:hover,
.filter-bar button[data-filter="sportif"]:focus-visible {
    background: rgba(255, 94, 14, 0.14);
    color: #fff8ef;
    box-shadow: inset 0 0 0 1px rgba(255, 94, 14, 0.44), 0 0 10px rgba(255, 94, 14, 0.14);
}

.filter-active-dot {
    position: absolute;
    left: var(--filter-dot-left);
    bottom: 4px;
    width: var(--filter-dot-width, 34px);
    height: 4px;
    border-radius: 999px;
    background-color: var(--filter-dot-color, var(--blue));
    box-shadow: 0 0 6px var(--filter-dot-shadow, rgba(39, 92, 215, 0.52));
    transform: translateX(-50%);
    transition: left 280ms ease, width 280ms ease, background-color 220ms ease, box-shadow 280ms ease;
    pointer-events: none;
}

.works-grid {
    width: calc(100vw - 16px);
    max-width: none;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-items: stretch;
    gap: clamp(2px, 0.2vw, 3px);
}

.work-card {
    position: relative;
    display: block;
    min-height: 0;
    width: 100%;
    aspect-ratio: 11 / 7;
    color: inherit;
    text-decoration: none;
    background: #101010;
    overflow: hidden;
}

.work-card[hidden] {
    display: none;
}

/* Carte dont la video existe mais dont la miniature reste a fabriquer. Le "M"
   occupe la place de l'image : la carte garde donc sa taille et son rang dans
   la grille, et le trou se voit a l'endroit exact ou il sera comble. Les
   hachures la distinguent d'une carte finie sans qu'elle attire trop l'oeil. */
.work-card--todo {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(253, 246, 237, 0.045) 0 10px,
            transparent 10px 20px
        ),
        #131316;
    border: 1px dashed rgba(253, 246, 237, 0.22);
}

.work-card__todo {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: "Coolvetica", Arial, sans-serif;
    font-size: clamp(3.4rem, 7vw, 6rem);
    line-height: 1;
    color: rgba(253, 246, 237, 0.34);
    letter-spacing: 0.02em;
    pointer-events: none;
}

.work-card--todo:hover .work-card__todo,
.work-card--todo:focus-visible .work-card__todo {
    color: var(--orange);
}

.work-card--disabled {
    cursor: default;
}

.work-card--disabled:hover img {
    transform: scale(1.02);
    filter: none;
}

.work-card--disabled:hover .work-card__caption {
    opacity: 0;
    transform: translateY(8px);
}

.work-card img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.02);
    transform-origin: center;
    transition: transform 420ms ease, filter 420ms ease;
    display: block;
}

.work-card:hover img,
.work-card:focus-visible img {
    transform: scale(1.06);
    filter: brightness(1.1) contrast(1.04) saturate(1.03);
}

.work-card--crop-anamorphic img {
    transform: scale(1.16);
}

.work-card--crop-anamorphic:hover img,
.work-card--crop-anamorphic:focus-visible img {
    transform: scale(1.2);
}

.work-card--disabled.work-card--crop-anamorphic:hover img {
    transform: scale(1.16);
    filter: none;
}

.work-card__caption {
    position: absolute;
    inset: auto 0 0;
    min-height: 34%;
    padding: clamp(16px, 1.8vw, 28px);
    display: flex;
    align-items: flex-end;
    color: var(--cream);
    font-size: clamp(0.92rem, 1vw, 1.08rem);
    font-weight: 700;
    letter-spacing: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.68));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 280ms ease, transform 280ms ease;
    pointer-events: none;
}

.work-card:hover .work-card__caption,
.work-card:focus-within .work-card__caption {
    opacity: 1;
    transform: translateY(0);
}

.work-card__action {
    position: absolute;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.stats {
    position: relative;
    isolation: isolate;
    background: var(--cream);
    color: var(--ink);
    margin-top: clamp(-76px, -5vw, -32px);
    padding: clamp(88px, 11vw, 142px) clamp(18px, 5vw, 72px) clamp(82px, 9vw, 128px);
    overflow: hidden;
}

.stats::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: clamp(32px, 5vw, 76px);
    background: var(--black);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    pointer-events: none;
    z-index: 0;
}

.stats > * {
    position: relative;
    z-index: 1;
}

.stats h2 {
    width: min(var(--max), 100%);
    margin: 0 auto clamp(42px, 6vw, 70px);
    font-size: clamp(2.7rem, 6vw, 6.2rem);
    font-weight: 600;
}

.stats-grid {
    width: min(var(--max), 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.stat-item {
    padding: 0 clamp(18px, 3vw, 40px);
    border-left: 1px solid rgba(0, 0, 0, 0.28);
}

.stat-item:first-child {
    border-left: 0;
}

.stat-item strong {
    display: block;
    font-family: "Coolvetica", Arial, sans-serif;
    font-size: clamp(4rem, 8vw, 7.2rem);
    line-height: 0.8;
}

.stat-item strong span {
    font-size: 0.34em;
}

.stat-item::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    margin: 20px 0 16px;
    background: var(--orange);
}

.stat-item--blue::after {
    background: var(--blue);
}

.stat-item p {
    margin: 0;
    max-width: 18rem;
    font-weight: 700;
}

.sources {
    width: min(var(--max), 100%);
    margin: 54px auto 0;
    color: #7d756b;
    font-size: 0.8rem;
}

.contact-page {
    --contact-accent: var(--blue);
    --contact-accent-soft: rgba(39, 92, 215, 0.34);
    --contact-accent-faint: rgba(39, 92, 215, 0.13);
    --contact-blob-size: clamp(552px, 52.8vw, 1080px);
    --contact-blob-duration: 14.5s;
    --contact-blob-opacity: 0.370;
    --contact-blob-low-opacity: 0.319;
    --contact-blob-high-opacity: 0.430;
    --contact-blob-blur: 60px;
    background: var(--black);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.contact-page::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: var(--contact-blob-size);
    height: var(--contact-blob-size);
    border-radius: 50%;
    pointer-events: none;
    opacity: var(--contact-blob-opacity);
    background: var(--contact-accent);
    filter: blur(var(--contact-blob-blur));
    mix-blend-mode: screen;
    transform: translate3d(-7.1vw, -11%, 0) scale(0.98);
    animation: contact-blue-blob var(--contact-blob-duration) ease-in-out infinite alternate;
    will-change: transform, opacity;
}

.contact-panel {
    background: transparent;
    color: var(--white);
    padding: clamp(72px, 10vw, 140px) clamp(18px, 5vw, 76px);
}

.contact-intro,
.contact-layout {
    width: min(var(--max), 100%);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.contact-intro {
    margin-bottom: clamp(36px, 6vw, 70px);
}

.contact-intro h1,
.contact-intro h2 {
    margin: 0 0 clamp(34px, 4vw, 58px);
    font-family: "Coolvetica", "Creato", Arial, sans-serif;
    font-size: clamp(3.5rem, 6.2vw, 7.1rem);
    font-weight: 400;
    line-height: 0.92;
    /* Meme espacement que les autres grands titres, declare plus haut : cette
       regle-ci vient apres et l'ecrasait. */
    letter-spacing: 0.045em;
    overflow-wrap: break-word;
    color: var(--cream);
    text-shadow: 0 0 8px rgba(253, 246, 237, 0.64), 0 0 22px rgba(39, 92, 215, 0.42);
}

.contact-page .eyebrow {
    color: var(--contact-accent);
    text-shadow: 0 0 12px var(--contact-accent-soft);
}

@keyframes contact-blue-blob {
    0% {
        opacity: var(--contact-blob-low-opacity);
        transform: translate3d(-7.1vw, -11%, 0) scale(0.98);
    }

    24% {
        opacity: var(--contact-blob-high-opacity);
        transform: translate3d(calc(100vw - var(--contact-blob-size) - 8vw), 6vh, 0) scale(1.04);
    }

    52% {
        opacity: var(--contact-blob-opacity);
        transform: translate3d(calc(100vw - var(--contact-blob-size) - 18vw), 54vh, 0) scale(0.98);
    }

    76% {
        opacity: var(--contact-blob-high-opacity);
        transform: translate3d(12vw, 66vh, 0) scale(1.05);
    }

    100% {
        opacity: var(--contact-blob-opacity);
        transform: translate3d(42vw, 18vh, 0) scale(1.02);
    }
}
.contact-intro p:last-child {
    max-width: 44rem;
    color: #c9c4bd;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(290px, 0.8fr);
    gap: clamp(28px, 6vw, 76px);
    align-items: start;
}

.contact-form {
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: clamp(22px, 4vw, 40px);
    display: grid;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.contact-form label {
    display: grid;
    gap: 8px;
    color: #d2cec8;
    font-size: 0.94rem;
}

.contact-form input:not([type="checkbox"]),
.contact-form select,
.contact-form textarea {
    width: 100%;
    min-height: 54px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #181818;
    color: var(--white);
    padding: 14px 16px;
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.contact-form textarea {
    resize: vertical;
    min-height: 170px;
}

.contact-form input:not([type="checkbox"]):focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--contact-accent);
    box-shadow: 0 0 0 3px var(--contact-accent-faint);
}

.contact-form.was-validated :invalid {
    border-color: #ff7c55;
}

.consent {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 12px;
}

.consent input {
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin-top: 3px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    accent-color: var(--contact-accent);
}

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

.form-feedback {
    margin: 0;
    padding: 12px 14px;
    border-radius: 4px;
    color: var(--white);
    background: rgba(255, 90, 23, 0.18);
}

.form-feedback--success {
    background: rgba(39, 92, 215, 0.24);
}

.contact-details {
    padding-top: 42px;
}

.contact-details h3 {
    margin: 0 0 12px;
    font-family: "Creato", Arial, sans-serif;
    font-size: clamp(1.45rem, 2.2vw, 2.35rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--cream);
}

.contact-details p {
    color: #c8c2ba;
}

.contact-details dl {
    display: grid;
    gap: 8px;
    margin: 34px 0 0;
}

.contact-details dt {
    margin-top: 18px;
    color: var(--cream);
    font-weight: 700;
}

.contact-details dd {
    margin: 0;
    color: var(--orange);
}

.contact-details a {
    color: var(--contact-accent);
}

.contact-zone-map {
    width: min(42vw, 780px);
    margin-top: clamp(24px, 2.8vw, 38px);
    font-family: "ZT Nature", "Creato", Arial, sans-serif;
}

.contact-zone-map__visual {
    position: relative;
    aspect-ratio: 1671 / 941;
    border: 1px solid rgba(39, 92, 215, 0.32);
    border-radius: 12px;
    overflow: hidden;
    background: #090909;
    box-shadow:
        inset 0 0 0 1px rgba(253, 246, 237, 0.04),
        0 18px 42px rgba(0, 0, 0, 0.28);
}

.contact-zone-map__visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* La carte est plus haute que son cadre : on l'ancre en haut pour garder
       la bordure nord de la zone, le rognage se fait sur les departements du
       sud qui sont hors zone d'intervention. */
    object-position: 50% 0%;
}

.contact-zone-map p {
    margin: 12px 0 0;
    color: rgba(253, 246, 237, 0.58);
    font-family: "ZT Nature", "Creato", Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.45;
}
.contact-page .contact-panel {
    padding-top: clamp(72px, 8vw, 112px);
}

.contact-page .button--primary {
    background: var(--contact-accent);
    box-shadow: 0 12px 24px rgba(39, 92, 215, 0.26);
}

@media (min-width: 981px) {
    .contact-page {
        min-height: 100svh;
    }

    .contact-page .contact-panel {
        box-sizing: border-box;
        min-height: 100svh;
        height: auto;
        padding: clamp(88px, 8vw, 124px) clamp(24px, 7vw, 132px) clamp(26px, 3vw, 44px);
    }

    .contact-page .contact-intro {
        width: min(1520px, calc(100% - clamp(44px, 8vw, 150px)));
        margin: 0 auto clamp(16px, 1.8vw, 26px);
    }

    .contact-page .contact-intro h1 {
        margin-bottom: 12px;
    }

    .contact-page .contact-intro p:last-child {
        max-width: 820px;
        margin: 0;
    }

    .contact-page .contact-layout {
        width: calc(100% - clamp(48px, 7vw, 120px));
        max-width: none;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: clamp(28px, 4vw, 64px);
    }

    .contact-page .contact-form {
        padding: clamp(18px, 2vw, 28px);
        gap: 11px;
    }

    .contact-page .form-row {
        gap: 12px;
    }

    .contact-page .contact-form label {
        gap: 5px;
        font-size: 0.88rem;
    }

    .contact-page .contact-form input:not([type="checkbox"]),
    .contact-page .contact-form select,
    .contact-page .contact-form textarea {
        min-height: 40px;
        padding: 8px 12px;
    }

    .contact-page .contact-form textarea {
        min-height: 112px;
    }

    .contact-page .consent {
        gap: 9px;
    }

    .contact-page .contact-details {
        padding-top: 0;
    }

    .contact-page .contact-details h3 {
        margin-bottom: 8px;
    }

    .contact-page .contact-details p {
        margin: 0;
    }

    .contact-page .contact-details dl {
        gap: 5px;
        margin-top: 16px;
    }

    .contact-page .contact-details dt {
        margin-top: 9px;
    }

    .contact-page .contact-zone-map {
        width: 100%;
        max-width: none;
        margin-top: 18px;
    }

    .contact-page .contact-zone-map__visual {
        height: clamp(260px, 30vh, 340px);
        aspect-ratio: auto;
    }

    .contact-page .contact-zone-map__visual img {
        object-fit: cover;
        object-position: 50% 0%;
    }

    .contact-page .contact-zone-map p {
        margin-top: 6px;
    }
}

.simple-page {
    min-height: 70vh;
    padding: clamp(120px, 16vw, 190px) clamp(18px, 5vw, 72px) clamp(80px, 12vw, 140px);
    background: var(--black);
}

.simple-page section {
    width: min(920px, 100%);
    margin: 0 auto;
}

.simple-page h1 {
    margin: 0 0 clamp(34px, 4vw, 58px);
    font-family: "Coolvetica", "Creato", Arial, sans-serif;
    font-size: clamp(4.2rem, 8vw, 9rem);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 0;
    overflow-wrap: break-word;
    color: var(--cream);
    text-shadow: 0 0 8px rgba(253, 246, 237, 0.64), 0 0 22px rgba(39, 92, 215, 0.42);
}

.simple-page p {
    color: #d4cec6;
    max-width: 42rem;
    margin-bottom: 30px;
}

.legal-page {
    --legal-accent: #ff5e0e;
    --legal-accent-rgb: 255, 94, 14;
    --legal-secondary-accent-rgb: 36, 91, 255;
    --title-blob-size: clamp(552px, 52.8vw, 1080px);
    --blob-duration: 12.6s;
    --blob-opacity: 0.370;
    --blob-low-opacity: 0.319;
    --blob-high-opacity: 0.430;
    --blob-blur: 60px;
    padding-top: clamp(150px, 16vw, 230px);
    padding-bottom: clamp(100px, 11vw, 170px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.legal-page[data-legal-theme="blue"] {
    --legal-accent: #245bff;
    --legal-accent-rgb: 36, 91, 255;
    --legal-secondary-accent-rgb: 255, 94, 14;
}

.legal-page::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: clamp(124px, 14vw, 224px);
    left: clamp(18px, 6vw, 120px);
    width: var(--title-blob-size);
    height: var(--title-blob-size);
    border-radius: 50%;
    pointer-events: none;
    opacity: var(--blob-opacity);
    background: var(--legal-accent);
    filter: blur(var(--blob-blur));
    mix-blend-mode: screen;
    transform: translate3d(-7.1vw, -11%, 0) scale(0.98);
    animation: legal-orange-blob var(--blob-duration) ease-in-out infinite alternate;
    will-change: transform, opacity;
}

.legal-page[data-legal-theme="blue"]::before {
    animation-name: legal-blue-blob;
}

.legal-page__inner {
    width: min(1600px, calc(100% - clamp(36px, 8vw, 190px)));
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.legal-page__breadcrumb {
    margin: 0 auto clamp(90px, 9vw, 140px);
    max-width: none;
    text-align: center;
    font-size: clamp(0.78rem, 1vw, 1rem);
    font-style: italic;
    color: rgba(253, 246, 237, 0.24);
}

.legal-page__breadcrumb a {
    color: rgba(253, 246, 237, 0.24);
    text-decoration: none;
}

.legal-page__breadcrumb a {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
    transition: color 180ms ease;
}

.legal-page__breadcrumb a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: rgba(var(--legal-accent-rgb), 0.72);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.legal-page__breadcrumb a:nth-of-type(even)::after {
    background: rgba(var(--legal-secondary-accent-rgb), 0.72);
}

.legal-page__breadcrumb a:hover::after,
.legal-page__breadcrumb a:focus-visible::after {
    transform: scaleX(1);
}

.legal-page__breadcrumb span {
    color: rgba(var(--legal-accent-rgb), 0.72);
}

.legal-page h1 {
    margin: 0 0 clamp(64px, 7vw, 112px);
    font-size: clamp(3.2rem, 5.7vw, 7rem);
    line-height: 0.9;
    color: var(--cream);
    text-shadow: 0 0 10px rgba(var(--legal-accent-rgb), 0.76), 0 0 24px rgba(var(--legal-accent-rgb), 0.52), 0 0 48px rgba(var(--legal-accent-rgb), 0.24);
}

.legal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(62px, 6vw, 104px) clamp(54px, 8vw, 132px);
}

.legal-card h2 {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: clamp(16px, 2vw, 26px);
    margin: 0 0 20px;
    padding-bottom: 18px;
    font-family: "Coolvetica", "Creato", Arial, sans-serif;
    font-size: clamp(1.65rem, 2.05vw, 2.55rem);
    line-height: 1;
    letter-spacing: 0.024em;
    color: var(--cream);
    border-bottom: 2px solid rgba(var(--legal-accent-rgb), 0.66);
}

.legal-card h2::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: -5px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--legal-accent);
    box-shadow: 0 0 14px rgba(var(--legal-accent-rgb), 0.88);
}

.legal-card h2 span {
    flex: 0 0 auto;
    color: var(--legal-accent);
    text-shadow: 0 0 12px rgba(var(--legal-accent-rgb), 0.46);
}

.legal-card p {
    max-width: none;
    margin: 0;
    font-size: clamp(1rem, 1.08vw, 1.25rem);
    line-height: 1.18;
    color: rgba(253, 246, 237, 0.66);
}

.legal-card p + p {
    margin-top: clamp(8px, 0.75vw, 12px);
}

.legal-page:has(#legal-title) .legal-card:nth-child(7) {
    transform: translateY(-180px);
}

@media (max-width: 900px) {
    .legal-page {
        padding-top: clamp(130px, 22vw, 170px);
    }

    .legal-page__inner {
        width: min(100% - 36px, 680px);
    }

    .legal-page__breadcrumb {
        margin-bottom: 64px;
    }

    .legal-grid {
        grid-template-columns: 1fr;
        gap: 54px;
    }

    .legal-page:has(#legal-title) .legal-card:nth-child(7) {
        transform: none;
    }
}

.savoir-page {
    --savoir-blue-blob-size: clamp(480px, 43.2vw, 960px);
    --savoir-orange-blob-size: clamp(528px, 48vw, 960px);
    --blob-duration: 14.5s;
    --blob-opacity: 0.370;
    --blob-hover-opacity: 0.439;
    --blob-low-opacity: 0.319;
    --blob-high-opacity: 0.430;
    --blob-blur: 36px;
    --blob-hover-blur: 36px;
    background: var(--black);
    color: var(--cream);
    overflow: visible;
    overflow-x: clip;
    isolation: isolate;
    position: relative;
}

.page-hero--blobs {
    position: relative;
}

.savoir-page > *,
.process-page > *,
.page-hero--blobs > :not(.page-hero__inner),
.page-hero__inner {
    position: relative;
    z-index: 1;
}

.savoir-hero {
    min-height: clamp(620px, 49vw, 820px);
    padding: clamp(118px, 11vw, 166px) clamp(26px, 6vw, 124px) clamp(72px, 8vw, 130px);
    position: relative;
    overflow: visible;
}

.savoir-hero::before {
    display: none;
}

.savoir-page::before,
.process-page::before {
    content: "";
    position: fixed;
    z-index: 0;
    left: 0;
    top: 0;
    width: var(--savoir-blue-blob-size);
    height: var(--savoir-blue-blob-size);
    border-radius: 50%;
    pointer-events: none;
    opacity: var(--blob-opacity);
    background: #245bff;
    filter: blur(var(--blob-blur));
    mix-blend-mode: screen;
    transform: translate3d(-7.1vw, -11%, 0) scale(0.98);
    animation: savoir-blue-blob var(--blob-duration) ease-in-out infinite alternate;
    transition: opacity 900ms ease, filter 900ms ease;
    will-change: transform, opacity;
}

.savoir-page::before {
    position: absolute;
    mix-blend-mode: normal;
    animation: none;
    transform: translate3d(var(--savoir-blue-x, -7vw), var(--savoir-blue-y, -11vh), 0) scale(var(--savoir-blue-scale, 1));
    transition: transform var(--blob-move-duration, 8s) cubic-bezier(0.22, 0.61, 0.36, 1), opacity 520ms ease;
    will-change: transform;
}

.savoir-page:hover::before,
.savoir-page:focus-within::before,
.process-page:hover::before,
.process-page:focus-within::before {
    opacity: var(--blob-hover-opacity);
    filter: blur(var(--blob-hover-blur));
}

.savoir-page:hover::before,
.savoir-page:focus-within::before {
    filter: blur(var(--blob-blur));
}

.savoir-page::after,
.process-page::after {
    content: "";
    position: fixed;
    z-index: 0;
    left: 0;
    top: 0;
    width: var(--savoir-orange-blob-size);
    height: var(--savoir-orange-blob-size);
    border-radius: 50%;
    pointer-events: none;
    opacity: var(--blob-opacity);
    background: #ff5e0e;
    filter: blur(var(--blob-blur));
    mix-blend-mode: screen;
    transform: translate3d(-7.1vw, -11%, 0) scale(0.98);
    animation: savoir-orange-blob var(--blob-duration) ease-in-out infinite alternate;
    transition: opacity 900ms ease, filter 900ms ease;
    will-change: transform, opacity;
}

.savoir-page::after {
    position: absolute;
    mix-blend-mode: normal;
    animation: none;
    transform: translate3d(var(--savoir-orange-x, 22vw), var(--savoir-orange-y, -8vh), 0) scale(var(--savoir-orange-scale, 1));
    transition: transform var(--blob-move-duration, 8s) cubic-bezier(0.22, 0.61, 0.36, 1), opacity 520ms ease;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .savoir-page::before,
    .savoir-page::after {
        transition: none;
    }
}

.savoir-page:hover::after,
.savoir-page:focus-within::after,
.process-page:hover::after,
.process-page:focus-within::after {
    opacity: var(--blob-hover-opacity);
    filter: blur(var(--blob-hover-blur));
}

.savoir-page:hover::after,
.savoir-page:focus-within::after {
    filter: blur(var(--blob-blur));
}

@keyframes savoir-blue-blob {
    0% {
        opacity: var(--blob-low-opacity);
        transform: translate3d(-7.1vw, -11%, 0) scale(0.98);
    }

    10% {
        opacity: var(--blob-opacity);
        transform: translate3d(22vw, 10vh, 0) scale(1.01);
    }

    30% {
        opacity: var(--blob-high-opacity);
        transform: translate3d(calc(100vw - var(--savoir-blue-blob-size) - 9vw), 7vh, 0) scale(1.04);
    }

    50% {
        opacity: var(--blob-opacity);
        transform: translate3d(calc(100vw - var(--savoir-blue-blob-size) - 5vw), 62vh, 0) scale(0.98);
    }

    70% {
        opacity: var(--blob-high-opacity);
        transform: translate3d(10vw, 70vh, 0) scale(1.06);
    }

    84% {
        opacity: var(--blob-low-opacity);
        transform: translate3d(4vw, 26vh, 0) scale(0.94);
    }

    100% {
        opacity: var(--blob-opacity);
        transform: translate3d(58vw, 10vh, 0) scale(1.02);
    }
}

@keyframes savoir-orange-blob {
    0% {
        opacity: var(--blob-low-opacity);
        transform: translate3d(-7.1vw, -11%, 0) scale(0.98);
    }

    9% {
        opacity: var(--blob-opacity);
        transform: translate3d(calc(100vw - var(--savoir-orange-blob-size) - 24vw), 12vh, 0) scale(1.03);
    }

    28% {
        opacity: var(--blob-high-opacity);
        transform: translate3d(62vw, 3vh, 0) scale(1.05);
    }

    48% {
        opacity: var(--blob-low-opacity);
        transform: translate3d(12vw, 58vh, 0) scale(0.97);
    }

    68% {
        opacity: var(--blob-high-opacity);
        transform: translate3d(36vw, 72vh, 0) scale(1.04);
    }

    86% {
        opacity: var(--blob-low-opacity);
        transform: translate3d(calc(100vw - var(--savoir-orange-blob-size) - 7vw), 64vh, 0) scale(0.99);
    }

    100% {
        opacity: var(--blob-opacity);
        transform: translate3d(48vw, 11vh, 0) scale(1.03);
    }
}

@keyframes legal-blue-blob {
    0% {
        opacity: var(--blob-low-opacity);
        transform: translate3d(-7.1vw, -11%, 0) scale(0.98);
    }

    27% {
        opacity: var(--blob-high-opacity);
        transform: translate3d(16vw, -4%, 0) scale(1.05);
    }

    61% {
        opacity: var(--blob-opacity);
        transform: translate3d(6vw, 5%, 0) scale(0.99);
    }

    100% {
        opacity: var(--blob-opacity);
        transform: translate3d(25vw, -1%, 0) scale(1.03);
    }
}

@keyframes legal-orange-blob {
    0% {
        opacity: var(--blob-low-opacity);
        transform: translate3d(-7.1vw, -11%, 0) scale(0.98);
    }

    31% {
        opacity: var(--blob-high-opacity);
        transform: translate3d(21vw, -2%, 0) scale(1.04);
    }

    66% {
        opacity: var(--blob-opacity);
        transform: translate3d(10vw, 6%, 0) scale(0.98);
    }

    100% {
        opacity: var(--blob-opacity);
        transform: translate3d(33vw, 1%, 0) scale(1.02);
    }
}

@keyframes production-title-orange-blob {
    0% {
        opacity: var(--blob-low-opacity);
        transform: translate3d(-7.1vw, -11%, 0) scale(0.98);
    }

    32% {
        opacity: var(--blob-high-opacity);
        transform: translate3d(30.1vw, -4.6%, 0) scale(1.05);
    }

    68% {
        opacity: var(--blob-opacity);
        transform: translate3d(20.5vw, 3.4%, 0) scale(0.98);
    }

    100% {
        opacity: var(--blob-opacity);
        transform: translate3d(39.7vw, 0.2%, 0) scale(1.02);
    }
}

@keyframes postprod-title-blue-blob {
    0% {
        opacity: var(--blob-low-opacity);
        transform: translate3d(-7.1vw, -11%, 0) scale(0.98);
    }

    16% {
        opacity: var(--blob-high-opacity);
        transform: translate3d(8vw, -2%, 0) scale(1.04);
    }

    31% {
        opacity: var(--blob-opacity);
        transform: translate3d(22vw, -8%, 0) scale(0.99);
    }

    47% {
        opacity: var(--blob-high-opacity);
        transform: translate3d(38vw, 1%, 0) scale(1.03);
    }

    63% {
        opacity: var(--blob-opacity);
        transform: translate3d(27vw, -5%, 0) scale(0.97);
    }

    79% {
        opacity: var(--blob-high-opacity);
        transform: translate3d(10vw, 2%, 0) scale(1.05);
    }

    100% {
        opacity: var(--blob-opacity);
        transform: translate3d(-3vw, -4%, 0) scale(1.01);
    }
}

.savoir-breadcrumb {
    width: max-content;
    margin: 0 auto clamp(18px, 1.5vw, 28px);
    color: rgba(253, 246, 237, 0.36);
    font-size: clamp(0.64rem, 0.75vw, 0.78rem);
    font-style: italic;
}

.savoir-breadcrumb a {
    color: inherit;
}

.savoir-page {
    --breadcrumb-accent-rgb: 255, 94, 14;
    --breadcrumb-secondary-accent-rgb: 36, 91, 255;
}

.savoir-breadcrumb a,
.process-breadcrumb a {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}

.savoir-breadcrumb a::after,
.process-breadcrumb a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: rgba(var(--breadcrumb-accent-rgb), 0.72);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.savoir-breadcrumb a:nth-of-type(even)::after,
.process-breadcrumb a:nth-of-type(even)::after {
    background: rgba(var(--breadcrumb-secondary-accent-rgb), 0.72);
}

.savoir-breadcrumb a:hover::after,
.savoir-breadcrumb a:focus-visible::after,
.process-breadcrumb a:hover::after,
.process-breadcrumb a:focus-visible::after {
    transform: scaleX(1);
}

.savoir-hero__inner {
    width: min(1490px, 100%);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.savoir-hero h1 {
    margin: 0 0 clamp(64px, 5.4vw, 96px);
    font-family: "Coolvetica", "Creato", Arial, sans-serif;
    font-size: clamp(4.2rem, 8vw, 9rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: 0;
    color: var(--cream);
    text-shadow: 0 0 8px rgba(253, 246, 237, 0.5), 0 0 22px rgba(39, 92, 215, 0.28);
}

.savoir-hero h1 span {
    color: var(--cream);
    display: inline-block;
    margin-left: 0.04em;
}

.savoir-hero__copy {
    max-width: 1080px;
    margin-left: clamp(44px, 4.2vw, 72px);
    padding: clamp(12px, 1.4vw, 18px) clamp(16px, 1.8vw, 24px);
    border-left: 2px solid var(--orange);
    background: linear-gradient(90deg, rgba(5, 5, 5, 0.72), rgba(5, 5, 5, 0.32) 82%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: rgba(253, 246, 237, 0.78);
    font-size: clamp(1rem, 1.15vw, 1.25rem);
    line-height: 1.55;
}

.savoir-hero__copy p {
    margin: 0 0 0.4em;
}

.savoir-hero__copy p:last-child {
    margin-bottom: 0;
}

.savoir-page .savoir-cta.vision-band {
    width: min(1560px, calc(100% - clamp(40px, 5vw, 96px)));
    min-height: clamp(210px, 19vw, 280px);
    margin: clamp(-42px, -2.4vw, -18px) auto clamp(64px, 6vw, 96px);
    padding: clamp(44px, 5.2vw, 76px) clamp(42px, 8vw, 150px);
    position: relative;
    z-index: 7;
    isolation: isolate;
    color: #050505;
    background: #fdf6ed;
}

.savoir-page .savoir-cta.vision-band h2 {
    color: #000000;
    font-size: clamp(2rem, 4.2vw, 4rem);
    text-shadow: none;
}

.savoir-page .savoir-cta.vision-band::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: -2px;
    bottom: 0;
    width: 100vw;
    pointer-events: none;
    background: #fdf6ed;
    transform: translateX(-50%);
}

.savoir-steps {
    width: min(1560px, calc(100% - clamp(52px, 7vw, 132px)));
    margin: 0 auto;
    padding: 0 0 clamp(132px, 13vw, 224px);
    display: grid;
    gap: 30px;
    position: relative;
    z-index: 2;
}

.savoir-steps::before {
    display: none;
}

@media (min-width: 981px) {
    .savoir-hero {
        position: relative;
        z-index: 1;
    }

    .savoir-hero__inner,
    .savoir-breadcrumb {
        pointer-events: auto;
    }

    .savoir-steps {
        margin-top: clamp(-118px, -6vw, -64px);
        padding-top: clamp(24px, 5vw, 82px);
        z-index: 6;
    }

}

.savoir-step {
    --step-accent: var(--blue);
    --step-glow: rgba(39, 92, 215, 0.24);
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(400px, 1fr);
    align-items: stretch;
    gap: clamp(56px, 6.8vw, 128px);
    min-width: 0;
    /* Trois blocs a l'ecran : hauteur reduite de 10 % sur les trois bornes du
       clamp, pour que la reduction tienne a toutes les largeurs et pas
       seulement dans la plage fluide. */
    height: clamp(180px, 14.4vw, 306px);
    position: relative;
    z-index: 1;
    padding: 0;
    cursor: pointer;
    border-radius: 6px;
    background: #050505;
    overflow: hidden;
    transform-origin: center;
    transition:
        background-color 320ms ease,
        box-shadow 500ms ease;
}

.savoir-step::before {
    content: "";
    position: absolute;
    inset: -20px;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
}

.savoir-step::before {
    z-index: 2;
    inset: 0;
    border-radius: 6px;
    border: 1px solid rgba(253, 246, 237, 0.2);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 920ms cubic-bezier(0.19, 1, 0.22, 1), opacity 280ms ease;
}

.savoir-step:hover::before {
    opacity: 1;
    clip-path: inset(0);
}

.savoir-step:active::before {
    opacity: 1;
    clip-path: inset(0);
}

.savoir-step__overlay {
    position: absolute;
    inset: -42px;
    z-index: 4;
    border-radius: 4px;
    display: block;
}

.savoir-step__overlay:focus-visible {
    outline: 1px solid rgba(253, 246, 237, 0.68);
    outline-offset: 6px;
}

.savoir-step__label,
.savoir-step__media {
    position: relative;
    z-index: 1;
}

.savoir-step:hover {
    background-color: #050505;
    box-shadow:
        inset 0 0 0 1px rgba(253, 246, 237, 0.12),
        0 18px 46px rgba(0, 0, 0, 0.32),
        0 0 38px rgba(253, 246, 237, 0.045);
}

.savoir-step:active {
    transition-duration: 120ms;
    background-color: #030303;
    box-shadow:
        inset 0 0 0 1px rgba(253, 246, 237, 0.16),
        inset 0 8px 24px rgba(0, 0, 0, 0.32);
}

.savoir-step:hover .savoir-step__media {
    transform: none;
    box-shadow: none;
}

.savoir-step:hover .savoir-step__media img {
    filter: contrast(1.04) brightness(0.9) saturate(1.04);
    transform: none;
}

.savoir-step:active .savoir-step__media {
    transform: none;
}

.savoir-step:active .savoir-step__media img {
    filter: contrast(1.04) brightness(0.9) saturate(1.04);
    transform: none;
}

.savoir-step--shoot {
    --step-accent: var(--orange);
    --step-glow: rgba(255, 90, 23, 0.26);
}

.savoir-step__label {
    width: max-content;
    max-width: 100%;
    padding: clamp(20px, 2vw, 25px) 0 clamp(20px, 2vw, 25px) clamp(20px, 2vw, 25px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.savoir-step__label h2 {
    margin: 0;
    font-family: "Coolvetica", "Creato", Arial, sans-serif;
    font-size: clamp(3.3rem, 5vw, 6.35rem);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--cream);
    text-shadow: 0 0 8px rgba(253, 246, 237, 0.64), 0 0 22px rgba(39, 92, 215, 0.42);
    overflow: visible;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}

.savoir-step__label span {
    display: block;
    width: clamp(130px, 13vw, 250px);
    height: 3px;
    margin-top: clamp(16px, 1.3vw, 22px);
    background: linear-gradient(90deg, var(--step-accent), rgba(255, 255, 255, 0));
    box-shadow: 0 0 12px var(--step-glow);
    transition:
        width 420ms cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 320ms ease,
        opacity 320ms ease;
}

.savoir-step:hover .savoir-step__label span {
    width: clamp(158px, 15vw, 292px);
    box-shadow: 0 0 16px var(--step-glow);
}

.savoir-step__media {
    margin: 0;
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    background: #080808;
    overflow: hidden;
    border-radius: 0;
    min-width: 0;
    transform-origin: center;
    will-change: transform;
    transition:
        transform 620ms cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 420ms ease;
}

.savoir-step__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.04) brightness(0.9) saturate(1.04);
    transform-origin: center;
    will-change: transform;
    transition:
        transform 720ms cubic-bezier(0.19, 1, 0.22, 1),
        filter 420ms ease;
}


.savoir-step--preprod .savoir-step__media {
    max-width: 648px;
    justify-self: end;
}

.savoir-step--preprod .savoir-step__media img {
    object-position: 54% 42%;
}

.savoir-step--shoot .savoir-step__media {
    max-width: 662px;
    justify-self: end;
}

.savoir-step--shoot .savoir-step__media img {
    object-position: 50% 50%;
    object-fit: cover;
}

.savoir-step--shoot:hover .savoir-step__media {
    transform: scale(1.02);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.savoir-step--shoot:hover .savoir-step__media img {
    transform: scale(1.04);
    filter: contrast(1.05) brightness(0.92) saturate(1.05);
}

.savoir-step--preprod:hover .savoir-step__media,
.savoir-step--postprod:hover .savoir-step__media {
    transform: scale(1.02);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.savoir-step--preprod:hover .savoir-step__media img,
.savoir-step--postprod:hover .savoir-step__media img {
    transform: scale(1.04);
    filter: contrast(1.05) brightness(0.92) saturate(1.05);
}

.savoir-step--postprod .savoir-step__media {
    max-width: 648px;
    justify-self: end;
}

.savoir-step--postprod .savoir-step__media img {
    object-position: 52% 48%;
}

@media (min-width: 981px) {
    .savoir-step__media,
    .savoir-step--preprod .savoir-step__media,
    .savoir-step--postprod .savoir-step__media,
    .savoir-step--shoot .savoir-step__media {
        width: 135%;
        max-width: none;
        mask-image: linear-gradient(90deg, transparent 0%, transparent 14%, rgba(0, 0, 0, 0.1) 28%, rgba(0, 0, 0, 0.38) 46%, rgba(0, 0, 0, 0.78) 64%, #000 82%, #000 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 14%, rgba(0, 0, 0, 0.1) 28%, rgba(0, 0, 0, 0.38) 46%, rgba(0, 0, 0, 0.78) 64%, #000 82%, #000 100%);
    }
}

@media (max-width: 980px) {
    .savoir-steps {
        width: calc(100% - 32px);
    }

    .savoir-step,
    .savoir-step--shoot {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .savoir-step__label,
    .savoir-step--shoot .savoir-step__label {
        justify-self: start;
        width: 100%;
    }

    .savoir-step__label h2 {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .savoir-step__media,
    .savoir-step--preprod .savoir-step__media,
    .savoir-step--shoot .savoir-step__media,
    .savoir-step--postprod .savoir-step__media {
        width: 100%;
        max-width: none;
        mask-image: none;
        -webkit-mask-image: none;
    }
}

.savoir-page + .site-footer::before {
    top: -76px;
    height: 78px;
    clip-path: polygon(0 72%, 100% 18%, 100% 100%, 0 100%);
}

.process-page {
    --savoir-blue-blob-size: clamp(480px, 43.2vw, 960px);
    --savoir-orange-blob-size: clamp(528px, 48vw, 960px);
    --blob-duration: 12.6s;
    --blob-opacity: 0.370;
    --blob-hover-opacity: 0.439;
    --blob-low-opacity: 0.319;
    --blob-high-opacity: 0.430;
    --blob-blur: 60px;
    --blob-hover-blur: 55px;
    --title-blob-size: clamp(552px, 52.8vw, 1080px);
    background: var(--black);
    color: var(--cream);
    overflow: hidden;
    isolation: isolate;
    position: relative;
}

.process-page--postprod {
    --savoir-blue-blob-size: clamp(520px, 46vw, 980px);
    --savoir-orange-blob-size: clamp(560px, 48vw, 1020px);
    --blob-duration: 17.4s;
    overflow: visible;
}

.process-page--postprod > :not(.postprod-random-blob) {
    position: relative;
    z-index: 2;
}

.process-page--postprod::before {
    display: none;
    position: absolute;
    animation: none;
    transform: translate3d(var(--postprod-blue-x, 20vw), var(--postprod-blue-y, 62vh), 0) scale(var(--postprod-blue-scale, 1));
    transition: transform var(--postprod-blob-duration, 8s) cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.process-page--postprod::after {
    display: none;
}

.process-page--postprod:hover::before,
.process-page--postprod:focus-within::before {
    display: none;
}

.process-page--postprod:hover::after,
.process-page--postprod:focus-within::after {
    display: none;
}

.postprod-random-blob {
    display: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: clamp(299px, 31.2vw, 611px);
    height: clamp(299px, 31.2vw, 611px);
    border-radius: 50%;
    pointer-events: none;
    background: #ff5e0e;
    opacity: 0.34;
    filter: blur(120px);
    mix-blend-mode: screen;
    transform: translate3d(var(--postprod-x, 18vw), var(--postprod-y, 62vh), 0) scale(var(--postprod-scale, 1));
    transition: transform var(--postprod-blob-duration, 8s) cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.postprod-random-blob--orange-a {
    --postprod-x: 18vw;
    --postprod-y: 84vh;
}

.postprod-random-blob--orange-b {
    --postprod-x: 58vw;
    --postprod-y: 46vh;
}

@media (prefers-reduced-motion: reduce) {
    .process-page--postprod::before,
    .postprod-random-blob {
        transition: none;
    }
}

.process-page--postprod .process-hero {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.58) 48%, rgba(0, 0, 0, 0.88));
    overflow: hidden;
    position: relative;
}

.process-page--postprod .process-hero::before,
.process-page--postprod .process-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

.process-page--postprod .process-hero::before {
    left: 0;
    top: 0;
    width: clamp(520px, 48vw, 980px);
    height: clamp(520px, 48vw, 980px);
    opacity: 0.42;
    background: #245bff;
    filter: blur(var(--blob-blur));
    transform: translate3d(-16vw, -18%, 0) scale(0.98);
    animation: postprod-top-blue-blob 18s ease-in-out infinite alternate;
}

@keyframes postprod-top-blue-blob {
    0% {
        opacity: 0.32;
        transform: translate3d(-16vw, -18%, 0) scale(0.98);
    }

    34% {
        opacity: 0.46;
        transform: translate3d(24vw, 4vh, 0) scale(1.05);
    }

    68% {
        opacity: 0.38;
        transform: translate3d(6vw, 28vh, 0) scale(1);
    }

    100% {
        opacity: 0.44;
        transform: translate3d(44vw, 12vh, 0) scale(1.03);
    }
}

.process-page--postprod .process-hero::after {
    display: none;
}

.process-hero {
    min-height: clamp(520px, 45vw, 760px);
    padding: clamp(118px, 11vw, 164px) clamp(24px, 7vw, 132px) clamp(72px, 8vw, 124px);
    background: var(--black);
}

.process-breadcrumb {
    width: max-content;
    margin: 0 auto clamp(24px, 2.5vw, 40px);
    color: rgba(253, 246, 237, 0.36);
    font-size: clamp(0.64rem, 0.75vw, 0.78rem);
    font-style: italic;
}

.process-page--preprod,
.process-page--postprod {
    --breadcrumb-accent-rgb: 36, 91, 255;
    --breadcrumb-secondary-accent-rgb: 255, 94, 14;
}

.process-page--production {
    --breadcrumb-accent-rgb: 255, 94, 14;
    --breadcrumb-secondary-accent-rgb: 36, 91, 255;
}

/* Le header (.site-header) est position: fixed et transparent, il flotte
   au-dessus du contenu au lieu de pousser une hauteur de page. Sans
   scroll-margin-top, un lien du sous-menu de navigation (#configurations,
   #materiel...) ou un lien direct vers l'ancre atterrit avec le titre de
   section passe sous le header - le padding-top de chaque section n'etait
   pas pense pour cet atterrissage direct, seulement pour l'espacement au
   scroll normal. 140px couvre le header le plus haut (desktop, ~129px). */
.process-page--production section[id] {
    scroll-margin-top: 140px;
}

.process-hero__inner,
.process-method,
.production-arrival,
.process-grid-detail,
.production-security,
.post-scroll-stack,
.post-panel--grade,
.process-split {
    width: min(1520px, calc(100% - clamp(44px, 8vw, 150px)));
    margin: 0 auto;
}

.process-hero h1 {
    margin: 0 0 clamp(34px, 4vw, 58px);
    font-family: "Coolvetica", "Creato", Arial, sans-serif;
    font-size: clamp(3.5rem, 6.2vw, 7.1rem);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 0;
    overflow-wrap: break-word;
    color: var(--cream);
    text-shadow: 0 0 8px rgba(253, 246, 237, 0.64), 0 0 22px rgba(39, 92, 215, 0.42);
}

.process-hero p,
.process-split p,
.production-copy p,
.production-kit p,
.process-grid-detail p,
.post-panel p {
    color: rgba(253, 246, 237, 0.66);
}

.process-hero__inner > p {
    max-width: 820px;
}

.process-kicker,
.post-number {
    margin: 0 0 12px;
    color: var(--orange);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.process-method {
    padding-bottom: clamp(90px, 11vw, 170px);
}

.process-method h2,
.process-split h2,
.production-copy h2,
.production-kit h2,
.process-grid-detail h2,
.post-panel h2 {
    margin: 0 0 18px;
    font-family: "Creato", "Coolvetica", Arial, sans-serif;
    font-size: clamp(2rem, 3.4vw, 4.3rem);
    line-height: 1;
}

.method-rail {
    margin: clamp(48px, 6vw, 86px) 0 clamp(56px, 6vw, 90px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 4vw, 70px);
    position: relative;
}

.method-rail::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -24px;
    height: 4px;
    background: linear-gradient(90deg, var(--orange), var(--blue));
    box-shadow: 0 0 16px rgba(39, 92, 215, 0.55);
}

.method-rail span {
    display: block;
    color: var(--blue);
    font-weight: 700;
}

.method-rail div:first-child span,
.method-rail div:first-child strong {
    color: var(--orange);
}

.method-rail strong {
    display: block;
    margin-top: 4px;
    font-size: clamp(1.25rem, 2vw, 2.1rem);
}

.method-detail {
    border-left: 3px solid var(--blue);
    padding-left: clamp(24px, 4vw, 48px);
}

.method-cards,
.detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}

.method-cards div,
.detail-grid article {
    min-height: 116px;
    padding: 20px;
    border: 1px solid rgba(253, 246, 237, 0.12);
    background: rgba(255, 255, 255, 0.025);
}

.method-cards strong,
.detail-grid strong {
    display: block;
    color: var(--cream);
}

.method-cards span {
    display: block;
    margin-top: 8px;
    color: rgba(253, 246, 237, 0.6);
}

.process-page--preprod .process-hero__inner > p {
    max-width: 930px;
}

.process-page--preprod::before,
.process-page--preprod::after {
    display: none;
}

.process-page--preprod .process-hero {
    min-height: 0;
    padding-top: clamp(64px, 7vw, 96px);
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
    background: var(--black);
}

/* Pre-production V2: scoped liquid surfaces and reveal motion. */
.process-page--preprod {
    --preprod-glass-section-bg:
        linear-gradient(145deg, rgba(253, 246, 237, 0.045), rgba(4, 4, 4, 0.46) 42%, rgba(8, 5, 4, 0.58));
    --preprod-glass-section-blur: 5px;
    --preprod-glass-section-border: rgba(253, 246, 237, 0.12);
    --preprod-glass-section-shadow: inset 0 1px 0 rgba(253, 246, 237, 0.08), 0 32px 72px rgba(0, 0, 0, 0.28);
    --preprod-glass-section-radius: 28px;
    --preprod-glass-category-bg:
        linear-gradient(145deg, rgba(253, 246, 237, 0.055), rgba(6, 6, 6, 0.48) 56%, rgba(6, 6, 6, 0.58));
    --preprod-glass-category-blur: 7px;
    --preprod-glass-category-border: rgba(253, 246, 237, 0.14);
    --preprod-glass-category-shadow: inset 0 1px 0 rgba(253, 246, 237, 0.09), 0 22px 48px rgba(0, 0, 0, 0.24);
    --preprod-glass-category-radius: 20px;
    --preprod-glass-card-bg: rgba(8, 8, 8, 0.48);
    --preprod-glass-card-blur: 9px;
    --preprod-glass-card-border: rgba(253, 246, 237, 0.19);
    --preprod-glass-card-shadow: inset 0 1px 0 rgba(253, 246, 237, 0.14), 0 14px 28px rgba(0, 0, 0, 0.25);
    --preprod-glass-card-radius: 12px;
    position: relative;
    isolation: isolate;
}

.process-page--preprod > .preprod-hero__blob {
    display: none;
    width: clamp(320px, 38vw, 620px);
    aspect-ratio: 1;
    position: absolute;
    left: 44%;
    top: clamp(760px, 72vw, 1120px);
    z-index: 0;
    border-radius: 52% 48% 38% 62% / 44% 58% 42% 56%;
    pointer-events: none;
    opacity: 0.22;
    background: #ff5e0e;
    filter: blur(clamp(42px, 5vw, 78px));
    transform: translate3d(-50%, 0, 0) rotate(-8deg);
    animation: preprod-hero-orange-drift 18s ease-in-out infinite alternate;
}

.process-page--preprod .process-hero,
.process-page--preprod .preprod-method {
    position: relative;
    z-index: 1;
}

.process-page--preprod .preprod-rail {
    background: linear-gradient(180deg, rgba(253, 246, 237, 0.055), rgba(5, 5, 5, 0.34));
    box-shadow: inset 0 1px 0 rgba(253, 246, 237, 0.08), 0 18px 36px rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(10px) saturate(1.06);
    backdrop-filter: blur(10px) saturate(1.06);
}

.process-page--preprod .preprod-card {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    appearance: none;
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    border-color: var(--preprod-glass-card-border);
    border-radius: var(--preprod-glass-card-radius);
    background: var(--preprod-glass-card-bg);
    box-shadow: var(--preprod-glass-card-shadow);
    -webkit-backdrop-filter: blur(var(--preprod-glass-card-blur)) saturate(1.08);
    backdrop-filter: blur(var(--preprod-glass-card-blur)) saturate(1.08);
    transition: opacity 680ms ease, border-color 360ms ease, box-shadow 360ms ease, transform 680ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.process-page--preprod.has-preprod-motion .preprod-card {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.975);
}

.process-page--preprod.has-preprod-motion .preprod-card.is-preprod-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: var(--preprod-card-delay, 0ms);
}

.process-page--preprod .preprod-card strong,
.process-page--preprod .preprod-card span {
    transition: transform 360ms ease;
}

.process-page--preprod .preprod-card:focus-visible {
    outline: 1px solid rgba(36, 91, 255, 0.88);
    outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .process-page--preprod .preprod-card:hover,
    .process-page--preprod .preprod-card:focus-visible {
        z-index: 2;
        border-color: rgba(36, 91, 255, 0.54);
        box-shadow: inset 0 1px 0 rgba(180, 200, 255, 0.2), 0 26px 48px rgba(0, 0, 0, 0.32), 0 0 30px rgba(36, 91, 255, 0.18);
        transform: translate3d(0, -6px, 0) scale(1.045);
    }

    .process-page--preprod .preprod-card:hover strong,
    .process-page--preprod .preprod-card:hover span,
    .process-page--preprod .preprod-card:focus-visible strong,
    .process-page--preprod .preprod-card:focus-visible span {
        transform: translate3d(0, -2px, 0);
    }
}

.process-page--preprod .preprod-card:active,
.process-page--preprod .preprod-card.is-preprod-pressed {
    border-color: rgba(36, 91, 255, 0.72);
    box-shadow: inset 0 5px 18px rgba(0, 0, 0, 0.68), inset 0 0 22px rgba(36, 91, 255, 0.13), 0 8px 18px rgba(0, 0, 0, 0.28);
    filter: brightness(0.9) contrast(1.04);
    transform: translate3d(0, 2px, 0) scale(0.982) rotateX(-2deg) rotateY(var(--preprod-press-rotate, 5deg));
    transition-duration: 120ms;
}

.process-page--preprod .preprod-card.is-preprod-pressed::after {
    background:
        linear-gradient(108deg, transparent 30%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.62) 50%, rgba(253, 246, 237, 0.08) 58%, transparent 70%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.78) 78%);
    background-size: 230% 100%, 100% 100%;
    animation: preprod-card-activation-sheen 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes preprod-card-activation-sheen {
    from { background-position: 130% 0, 0 0; }
    to { background-position: -30% 0, 0 0; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .process-page--preprod .preprod-method {
        background: rgba(7, 7, 7, 0.95);
    }

    .process-page--preprod .preprod-panel {
        background: rgba(13, 12, 12, 0.94);
    }

    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button,
    .process-page--preprod .preprod-rail,
    .process-page--preprod .preprod-card {
        background-color: rgba(10, 8, 7, 0.9);
    }

    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button {
        background: rgba(76, 24, 7, 0.68);
    }

    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:hover,
    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:focus-visible {
        background: rgba(103, 29, 7, 0.88);
    }

    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:active,
    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button.is-preprod-cta-pressed {
        background: rgba(67, 17, 5, 0.92);
    }
}

@media (max-width: 980px) {
    .process-page--preprod .preprod-method {
        --preprod-glass-section-blur: 3px;
        --preprod-glass-category-blur: 4px;
        --preprod-glass-card-blur: 5px;
    }

    .process-page--preprod .preprod-card {
        background: rgba(8, 8, 8, 0.56);
        -webkit-backdrop-filter: blur(var(--preprod-glass-card-blur)) saturate(1.03);
        backdrop-filter: blur(var(--preprod-glass-card-blur)) saturate(1.03);
    }
}

@media (max-width: 700px) {
    .process-page--preprod > .preprod-hero__blob {
        width: min(86vw, 420px);
        left: 58%;
        top: 680px;
        opacity: 0.18;
        filter: blur(48px);
    }

}

@media (prefers-reduced-motion: reduce) {
    .process-page--preprod.has-preprod-motion .preprod-card,
    .process-page--preprod.has-preprod-motion .preprod-card.is-preprod-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .process-page--preprod .preprod-card:hover,
    .process-page--preprod .preprod-card:focus-visible,
    .process-page--preprod .preprod-card:active,
    .process-page--preprod .preprod-card.is-preprod-pressed,
    .process-page--preprod .preprod-card strong,
    .process-page--preprod .preprod-card span {
        transform: none;
        transition: none;
    }
}

.process-page--preprod .process-hero::before,
.process-page--preprod .process-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

.process-page--preprod .process-hero::before {
    left: clamp(18px, 6vw, 120px);
    top: clamp(124px, 15vw, 214px);
    width: clamp(437px, 43.7vw, 874px);
    height: clamp(437px, 43.7vw, 874px);
    opacity: 0.149;
    background: #245bff;
    filter: blur(67px);
    transform: translate3d(-2vw, -10%, 0) scale(0.98);
    animation: preprod-title-blue-blob 9.4s ease-in-out infinite alternate;
}

.process-page--preprod .process-hero::after {
    display: none;
}

.process-page--preprod .process-breadcrumb {
    margin-bottom: clamp(24px, 2.5vw, 40px);
}

.preprod-hero__copy {
    max-width: 980px;
    position: relative;
    z-index: 2;
}

.preprod-hero__copy > p {
    max-width: 900px;
}

.preprod-hero__blob {
    width: clamp(260px, 34vw, 560px);
    aspect-ratio: 1;
    position: absolute;
    left: 44%;
    bottom: clamp(-240px, -16vw, -120px);
    z-index: 0;
    border-radius: 52% 48% 38% 62% / 44% 58% 42% 56%;
    pointer-events: none;
    opacity: 0.22;
    background: #ff5e0e;
    filter: blur(clamp(42px, 5vw, 78px));
    transform: translate3d(-50%, 0, 0) rotate(-8deg);
    animation: preprod-hero-orange-drift 18s ease-in-out infinite alternate;
}

.preprod-standalone-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-block: 130px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

:is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button {
    min-height: 80px;
    padding: 20px 62px;
    color: var(--cream);
    border: 1px solid rgba(255, 178, 132, 0.58);
    border-radius: 6px;
    background: var(--orange);
    box-shadow: inset 0 1px 0 rgba(255, 233, 220, 0.38), inset 0 -1px 0 rgba(108, 29, 2, 0.46);
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 24px rgba(255, 94, 14, 0.18));
    -webkit-backdrop-filter: blur(22px) saturate(1.12);
    backdrop-filter: blur(22px) saturate(1.12);
    font-size: 1.28rem;
    isolation: isolate;
    overflow: hidden;
    position: relative;
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease, filter 240ms ease;
}

:is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -70% -35%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(110deg, transparent 36%, rgba(255, 246, 237, 0.5) 49%, transparent 62%);
    transform: translate3d(-48%, 0, 0) rotate(-8deg);
}

:is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:hover,
:is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:focus-visible {
    border-color: rgba(255, 190, 120, 0.85);
    background:
        radial-gradient(circle at 14% -6%, rgb(255 205 157 / 30%), transparent 42%),
        radial-gradient(circle at 88% 112%, rgb(255 94 14 / 64%), transparent 48%),
        linear-gradient(180deg, rgba(255, 190, 132, 0.23), rgba(255, 94, 14, 0.31) 72%, rgba(180, 51, 5, 0.29) 100%),
        rgba(255, 94, 14, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 244, 237, 0.56), inset 0 -1px 0 rgba(149, 44, 4, 0.52);
    filter: brightness(1.1) drop-shadow(0 20px 38px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 28px rgba(255, 118, 35, 0.45)) drop-shadow(0 0 60px rgba(255, 118, 35, 0.18));
    transform: translateY(-3px) scale(1.035);
}

:is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:hover::before,
:is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:focus-visible::before {
    animation: preprod-cta-sheen 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes preprod-cta-sheen {
    from { opacity: 0; transform: translate3d(-48%, 0, 0) rotate(-8deg); }
    28%, 72% { opacity: 0.58; }
    to { opacity: 0; transform: translate3d(48%, 0, 0) rotate(-8deg); }
}

:is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:active,
:is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button.is-preprod-cta-pressed {
    border-color: rgba(255, 214, 187, 0.8);
    background:
        radial-gradient(circle at 50% 32%, rgb(255 216 174 / 28%), transparent 31%),
        radial-gradient(circle at 50% 118%, rgb(255 76 0 / 62%), transparent 54%),
        linear-gradient(180deg, rgba(255, 190, 132, 0.16), rgba(255, 94, 14, 0.34) 58%, rgba(180, 51, 5, 0.4) 100%),
        rgba(205, 62, 8, 0.9);
    box-shadow: inset 0 7px 16px rgba(102, 26, 0, 0.48), inset 0 1px 2px rgba(255, 240, 229, 0.3);
    filter: brightness(0.94) saturate(1.05) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28)) drop-shadow(0 0 16px rgba(255, 94, 14, 0.3));
    transform: translateY(2px) scale(0.975);
    transition-duration: 120ms;
}

:is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:active::before,
:is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button.is-preprod-cta-pressed::before {
    animation: preprod-cta-press-wave 280ms ease-out both;
}

@keyframes preprod-cta-press-wave {
    0% {
        opacity: 0;
        transform: translate3d(-48%, 0, 0) rotate(-8deg);
    }

    35% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: translate3d(48%, 0, 0) rotate(-8deg);
    }
}

:is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:focus-visible {
    outline: 2px solid rgba(255, 195, 158, 0.9);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:hover,
    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:focus-visible,
    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:active,
    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button.is-preprod-cta-pressed {
        transform: none;
        transition: none;
    }

    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:active::before,
    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button.is-preprod-cta-pressed::before,
    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:hover::before,
    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button:focus-visible::before {
        animation: none;
        opacity: 0.22;
        transform: none;
    }
}

@media (max-width: 980px) {
    .preprod-standalone-cta {
        padding-block: 115px;
    }
}

@media (max-width: 700px) {
    .preprod-standalone-cta {
        padding-block: 100px;
        padding-inline: 22px;
    }

    :is(.process-page--preprod, .process-page--production, .process-page--postprod) .preprod-standalone-cta .button {
        width: min(100%, calc(100vw - 48px));
        min-height: 64px;
        padding: 16px 34px;
        font-size: 1.1rem;
    }
}

.attentes {
    position: relative;
    box-sizing: border-box;
    width: min(1408px, calc((100% - clamp(24px, 4vw, 72px)) * 0.8));
    margin: 0 auto 32px;
}

.attentes .process-kicker {
    text-align: center;
}

.attentes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.attentes-item {
    border: 1px solid var(--preprod-glass-section-border);
    border-radius: 14px;
    background: var(--preprod-glass-section-bg);
    overflow: hidden;
}

.attentes-item__heading {
    margin: 0;
}

.attentes-item__trigger {
    appearance: none;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--cream);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    font: inherit;
    text-align: left;
    transition: background-color 220ms ease;
}

.attentes-item__trigger:hover,
.attentes-item__trigger:focus-visible {
    background-color: rgba(253, 246, 237, 0.035);
}

.attentes-item__trigger:focus-visible {
    outline: 1px solid rgba(253, 246, 237, 0.58);
    outline-offset: -3px;
}

.attentes-item__question {
    font-size: 1rem;
    font-weight: 600;
}

.attentes-item__chevron {
    flex: 0 0 auto;
    display: flex;
    color: var(--orange);
    transition: transform 280ms ease;
}

.attentes-item__chevron svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.attentes-item__trigger[aria-expanded="true"] .attentes-item__chevron {
    transform: rotate(180deg);
}

.attentes-item__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 320ms ease;
}

.attentes-item__panel-inner p {
    margin: 0;
    padding: 0 22px 18px;
    color: rgba(253, 246, 237, 0.72);
    font-size: 0.92rem;
    line-height: 1.5;
}


.preprod-method {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    width: min(1408px, calc((100% - clamp(24px, 4vw, 72px)) * 0.8));
    padding: clamp(20px, 2vw, 32px);
    padding-bottom: clamp(24px, 2.4vw, 38px);
    margin-block-end: 50px;
    overflow: visible;
    border: 1px solid var(--preprod-glass-section-border);
    border-radius: var(--preprod-glass-section-radius);
    background: var(--preprod-glass-section-bg);
    box-shadow: var(--preprod-glass-section-shadow);
    -webkit-backdrop-filter: blur(var(--preprod-glass-section-blur)) saturate(1.04);
    backdrop-filter: blur(var(--preprod-glass-section-blur)) saturate(1.04);
}

.preprod-method::before {
    content: "";
    position: absolute;
    right: -8%;
    bottom: -10%;
    z-index: 0;
    width: clamp(336px, 40.8vw, 672px);
    aspect-ratio: 1;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0.213;
    background: #ff5e0e;
    filter: blur(clamp(55px, 6vw, 86px));
    transform: translate3d(0, 0, 0) scale(0.94);
    animation: preprod-method-orange-drift 17s ease-in-out infinite alternate;
    will-change: transform;
}

.preprod-method__intro,
.preprod-method .preprod-rail,
.preprod-method .preprod-panels {
    position: relative;
    z-index: 1;
}

.preprod-method__intro {
    max-width: 780px;
}

.process-page--preprod .preprod-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    margin: clamp(6px, 0.8vw, 10px) 0 clamp(7px, 0.8vw, 11px);
    padding: 6px;
    position: sticky;
    top: clamp(10px, 2vw, 24px);
    z-index: 6;
    border: 1px solid rgba(253, 246, 237, 0.1);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(16, 16, 16, 0.9), rgba(5, 5, 5, 0.84));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.72);
}

.preprod-rail__indicator {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: calc((100% - 12px) / 3);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 90, 23, 0.32), rgba(255, 90, 23, 0.16));
    border: 1px solid rgba(255, 138, 66, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 90, 23, 0.08), 0 8px 20px rgba(255, 90, 23, 0.18);
    transition: transform 340ms cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
}

.process-page--preprod .preprod-rail::after {
    content: none;
}

.preprod-tab {
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(253, 246, 237, 0.68);
    cursor: pointer;
    display: block;
    font: inherit;
    min-width: 0;
    padding: clamp(7px, 0.7vw, 8px) clamp(10px, 1vw, 16px);
    position: relative;
    z-index: 1;
    text-align: center;
    transition: color 260ms ease;
    -webkit-tap-highlight-color: transparent;
}

.preprod-tab span {
    color: rgba(39, 92, 215, 0.9);
    transition: color 260ms ease;
}

/* Les libelles du rail (deux classes : passe devant ".preprod-tab span"
   ci-dessus) doivent suivre la couleur du bouton, pas le bleu par defaut
   des spans du rail. */
.preprod-tab .preprod-tab__label-full,
.preprod-tab .preprod-tab__label-short {
    color: inherit;
}

.preprod-tab strong {
    color: inherit;
    font-size: 1.1rem;
    line-height: 1.3;
    margin-top: 0;
    transition: color 260ms ease, text-shadow 260ms ease;
}

/* Le libelle court ne sert qu'au rail mobile (<=700px), ou "Dossier de
   production" tiendrait sur 2 lignes et rendrait l'indicateur presque rond.
   Regle par defaut ici, l'override mobile suit plus bas dans le fichier.
   Selecteur a deux classes : il faut passer devant ".method-rail span"
   (display: block), plus specifique qu'une classe seule. */
.preprod-tab .preprod-tab__label-short {
    display: none;
}

.preprod-tab:hover,
.preprod-tab:focus-visible {
    color: var(--cream);
}

.preprod-tab.is-active {
    color: var(--cream);
}

.preprod-tab.is-active strong {
    text-shadow: 0 0 14px rgba(253, 246, 237, 0.16);
}

/* Certains navigateurs mobiles appliquent un contour bleu par defaut au tap
   (:focus) meme quand :focus-visible ne le justifierait pas. On le neutralise
   ici et on garde uniquement le contour personnalise de :focus-visible
   (navigation clavier) ci-dessous. */
.preprod-tab:focus:not(:focus-visible) {
    outline: none;
}

.preprod-tab:focus-visible {
    outline: 1px solid rgba(253, 246, 237, 0.58);
    outline-offset: 8px;
}

.preprod-panels {
    min-height: clamp(110px, 8.5vw, 150px);
}

.preprod-panel {
    padding: clamp(24px, 2.2vw, 34px);
    overflow: visible;
    border: 1px solid var(--preprod-glass-category-border);
    border-radius: var(--preprod-glass-category-radius);
    background: var(--preprod-glass-category-bg);
    box-shadow: var(--preprod-glass-category-shadow);
    -webkit-backdrop-filter: blur(var(--preprod-glass-category-blur)) saturate(var(--preprod-glass-category-saturation, 1.05));
    backdrop-filter: blur(var(--preprod-glass-category-blur)) saturate(var(--preprod-glass-category-saturation, 1.05));
}

.preprod-panel[data-preprod-panel="documentation"] {
    --preprod-glass-category-bg:
        linear-gradient(145deg, rgba(253, 246, 237, 0.06), rgba(253, 246, 237, 0.025) 34%, rgba(6, 6, 6, 0.55));
    --preprod-glass-category-blur: 6px;
    --preprod-glass-category-border: rgba(205, 219, 244, 0.15);
}

.preprod-panel[data-preprod-panel="dossier-production"] {
    --preprod-glass-category-bg:
        linear-gradient(145deg, rgba(253, 246, 237, 0.055), rgba(10, 10, 10, 0.48) 38%, rgba(7, 7, 7, 0.6));
    --preprod-glass-category-saturation: 1.1;
    --preprod-glass-category-shadow: inset 0 1px 0 rgba(255, 218, 196, 0.11), 0 24px 50px rgba(0, 0, 0, 0.26);
}

.preprod-panel[data-preprod-panel="ressource"] {
    --preprod-glass-category-bg:
        linear-gradient(145deg, rgba(253, 246, 237, 0.075), rgba(8, 8, 8, 0.48) 52%, rgba(5, 5, 5, 0.6));
    --preprod-glass-category-blur: 7px;
    --preprod-glass-category-border: rgba(253, 246, 237, 0.2);
    --preprod-glass-category-shadow: inset 0 1px 0 rgba(253, 246, 237, 0.13), 0 20px 44px rgba(0, 0, 0, 0.3);
}

.preprod-panel[hidden] {
    display: none;
}

.preprod-panel.is-active {
    animation: preprod-panel-in 360ms ease both;
}

.preprod-panel__copy {
    max-width: 760px;
}

.preprod-panel__copy h3 {
    margin-bottom: 6px;
    font-size: 1.05rem;
    line-height: 1.3;
}

.preprod-panel__copy p {
    margin-bottom: 0;
    font-size: 0.85rem;
    line-height: 1.35;
}

.preprod-method__intro h2 {
    margin-bottom: 8px;
}

.preprod-method__intro .process-kicker {
    margin-bottom: 4px;
}

.process-page--preprod .preprod-cards {
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    margin-top: 0;
}

.process-page--preprod .preprod-card {
    aspect-ratio: 2 / 1;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(253, 246, 237, 0.12);
    background: rgba(253, 246, 237, 0.018);
}

.preprod-card::before {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: -2;
    background-image: var(--preprod-card-image);
    background-size: cover;
    background-position: center;
    opacity: 0.38;
    filter: blur(3.5px) contrast(1.06) brightness(0.58);
    transform: scale(1.08);
    transition: opacity 360ms ease, filter 360ms ease, transform 520ms ease;
}

.preprod-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.78) 78%),
        linear-gradient(135deg, rgba(253, 246, 237, 0.08), transparent 48%);
}

.preprod-card:hover::before,
.preprod-card:focus-within::before {
    opacity: 0.48;
    filter: blur(2.2px) contrast(1.08) brightness(0.66);
    transform: scale(1.04);
}

.preprod-card strong,
.preprod-card span {
    position: relative;
    z-index: 1;
}

.preprod-card strong {
    color: var(--cream);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.44);
}

.preprod-card span {
    color: rgba(253, 246, 237, 0.68);
}

@keyframes preprod-panel-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.preprod-card .preprod-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    margin: 0;
    padding: 4px 7px;
    color: #160700 !important;
    border-radius: 3px;
    background: rgba(255, 126, 55, 0.9);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    white-space: nowrap;
}

.process-page--preprod .preprod-card strong {
    min-width: 0;
    white-space: normal;
    font-size: 1.05rem;
    line-height: 1.3;
}

.process-page--preprod .preprod-card__copy {
    display: none;
}

html.preprod-detail-open,
body.preprod-detail-open {
    overflow: hidden;
    overscroll-behavior: none;
}

html.preprod-detail-open {
    scrollbar-gutter: stable;
}

.preprod-detail {
    position: fixed;
    inset: 0;
    width: min(1280px, calc(100vw - 24px));
    height: calc(100dvh - 24px);
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    overflow: visible;
    color: var(--cream);
    border: 0;
    background: transparent;
    perspective: 1600px;
}

.preprod-detail[open] {
    display: grid;
    place-items: center;
}

.preprod-detail::backdrop {
    background: rgba(0, 0, 0, 0.58);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.preprod-detail__panel {
    --preprod-detail-glass-bg: rgba(4, 7, 13, 0.5);
    --preprod-detail-glass-border: rgba(225, 232, 255, 0.4);
    --preprod-detail-glass-blur: 24px;
    --preprod-detail-glass-saturation: 1.12;
    --preprod-detail-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(253, 246, 237, 0.055), inset 0 -1px 0 rgba(0, 0, 0, 0.36), 0 30px 84px rgba(0, 0, 0, 0.58);
    --detail-light-x: 12%;
    --detail-light-y: 0%;
    --detail-tilt-x: 0deg;
    --detail-tilt-y: 0deg;
    --detail-blue-x: 0%;
    --detail-blue-y: 0%;
    --detail-orange-x: 0%;
    --detail-orange-y: 0%;
    position: relative;
    z-index: 2;
    width: min(1120px, calc(100% - 136px));
    height: min(610px, calc(100dvh - 48px));
    max-height: none;
    margin-inline: auto;
    padding: clamp(28px, 3.2vw, 52px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    isolation: isolate;
    border: 1px solid var(--preprod-detail-glass-border);
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(253, 246, 237, 0.065), transparent 32%),
        var(--preprod-detail-glass-bg);
    box-shadow: var(--preprod-detail-glass-shadow);
    -webkit-backdrop-filter: blur(var(--preprod-detail-glass-blur)) saturate(var(--preprod-detail-glass-saturation));
    backdrop-filter: blur(var(--preprod-detail-glass-blur)) saturate(var(--preprod-detail-glass-saturation));
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background 180ms ease;
}

.preprod-detail__panel::-webkit-scrollbar {
    display: none;
}

/* Conteneur focalise a l'ouverture (voir main.js) : il ne doit pas afficher
   de contour, c'est un point d'entree technique, pas une cible cliquable. */
.preprod-detail__panel:focus,
.preprod-detail__panel:focus-visible {
    outline: none;
}

@media (min-width: 981px) {
    .preprod-detail__panel {
        display: grid;
        align-content: center;
    }

    .preprod-detail__layout {
        margin-top: clamp(16px, 2vh, 24px);
    }

    .preprod-detail__visual {
        min-height: clamp(230px, min(28vw, 32vh), 320px);
    }
}

.preprod-detail.is-settled .preprod-detail__panel.is-pointer-reactive {
    transform: perspective(1200px) rotateX(var(--detail-tilt-x)) rotateY(var(--detail-tilt-y));
}

.preprod-detail.is-settled .preprod-detail__panel.is-touch-reactive {
    transform: scale(0.994);
}

.preprod-detail__panel::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -22%;
    left: -12%;
    width: clamp(320px, 46vw, 580px);
    aspect-ratio: 1;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0.26;
    background: #245bff;
    filter: blur(54px) saturate(1.2);
    transform: translate3d(var(--detail-blue-x), var(--detail-blue-y), 0);
    transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.preprod-detail__panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: -14%;
    bottom: -26%;
    width: clamp(300px, 43vw, 540px);
    aspect-ratio: 1;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0.23;
    background: #ff5e0e;
    filter: blur(58px) saturate(1.18);
    transform: translate3d(var(--detail-orange-x), var(--detail-orange-y), 0);
    transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.preprod-detail__panel > * {
    position: relative;
    z-index: 1;
}

.preprod-card-transition-clone {
    position: fixed !important;
    z-index: 8;
    margin: 0 !important;
    pointer-events: none !important;
    transform-origin: 50% 50% !important;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    contain: layout paint style;
    will-change: transform, opacity;
}

.preprod-transition-sheen {
    position: absolute;
    z-index: 5;
    inset: -35% -55%;
    pointer-events: none;
    background: linear-gradient(108deg, transparent 38%, rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0.72) 50%, rgba(253, 246, 237, 0.12) 55%, transparent 62%);
    transform: translateX(-58%) skewX(-10deg);
    animation: preprod-transition-sheen 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes preprod-transition-sheen {
    from { opacity: 0; transform: translateX(-58%) skewX(-10deg); }
    18%, 72% { opacity: 1; }
    to { opacity: 0; transform: translateX(58%) skewX(-10deg); }
}

.preprod-detail__nav {
    --carousel-arrow-size: 56px;
    --carousel-arrow-icon-size: 26px;
    --carousel-arrow-base-transform: translateY(-50%);
    position: absolute;
    z-index: 4;
    top: 50%;
    opacity: 0;
    transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease, opacity 180ms ease, transform 200ms ease;
}

.preprod-detail.is-settled .preprod-detail__nav {
    opacity: 1;
}

.preprod-detail__nav--previous {
    left: max(-27px, calc((100% - 1120px) / 2 - 95px));
}

.preprod-detail__nav--next {
    right: max(-27px, calc((100% - 1120px) / 2 - 95px));
}

.preprod-detail__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--cream);
    border: 1px solid rgba(253, 246, 237, 0.22);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.34);
    cursor: pointer;
    font-size: 1.7rem;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: color 210ms ease, border-color 210ms ease, background 210ms ease, box-shadow 210ms ease, transform 210ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* :hover non cantonne a (hover: hover) restait visible en permanence apres
   un tap sur iOS (survol fantome) : la croix gardait son halo rouge tant
   qu'on ne touchait pas un autre element. */
@media (hover: hover) and (pointer: fine) {
    .preprod-detail__close:hover {
        color: #ff766d;
        border-color: rgba(255, 92, 82, 0.82);
        outline: 2px solid rgba(255, 69, 58, 0.34);
        outline-offset: 3px;
        background: rgba(255, 69, 58, 0.14);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 18px rgba(255, 69, 58, 0.16);
    }
}

.preprod-detail__close:focus-visible {
    color: #ff766d;
    border-color: rgba(255, 92, 82, 0.82);
    outline: 2px solid rgba(255, 69, 58, 0.34);
    outline-offset: 3px;
    background: rgba(255, 69, 58, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 18px rgba(255, 69, 58, 0.16);
}

.preprod-detail__close:active {
    color: #ff766d;
    border-color: rgba(255, 92, 82, 0.82);
    background: rgba(255, 69, 58, 0.14);
}

.preprod-detail__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding-right: 58px;
    color: rgba(178, 198, 255, 0.9);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.preprod-detail__badge {
    padding: 5px 9px;
    color: #140700;
    border-radius: 3px;
    background: #ff7a2f;
    letter-spacing: 0.06em;
}

/* Compteur "x / total" : remplace les fleches sur mobile/tablette (voir
   media query plus bas), navigation assuree par le swipe a la place.
   Place sous la carte, dans la marge du dialog. */
.preprod-detail__counter {
    display: none;
    margin: 14px 0 0;
    color: rgba(253, 246, 237, 0.62);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
}

.preprod-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    margin-top: clamp(22px, 3vh, 40px);
}

.preprod-detail__panel.is-visual-first .preprod-detail__copy {
    order: 2;
}

.preprod-detail__panel.is-visual-first .preprod-detail__visual {
    order: 1;
}

.preprod-detail__copy,
.preprod-detail__visual,
.preprod-detail__close,
.preprod-detail__meta {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 360ms ease, transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.preprod-detail.is-settled .preprod-detail__meta {
    opacity: 1;
    transform: none;
    transition-delay: 120ms;
}

.preprod-detail.is-settled .preprod-detail__copy {
    opacity: 1;
    transform: none;
    transition-delay: 200ms;
}

.preprod-detail.is-settled .preprod-detail__visual {
    opacity: 1;
    transform: none;
    transition-delay: 280ms;
}

.preprod-detail.is-settled .preprod-detail__close {
    opacity: 1;
    transform: none;
    transition-delay: 340ms;
}

.preprod-detail.is-settled .preprod-detail__close:hover,
.preprod-detail.is-settled .preprod-detail__close:focus-visible {
    transform: rotate(11deg) scale(1.06);
    transition-delay: 0ms;
}

.preprod-detail.is-settled .preprod-detail__close:active {
    color: #ff453a;
    border-color: rgba(255, 69, 58, 0.72);
    transform: rotate(2deg) scale(0.94);
    background: rgba(255, 69, 58, 0.1);
    box-shadow: inset 0 5px 12px rgba(0, 0, 0, 0.36);
    transition-delay: 0ms;
}

.preprod-detail__copy h2 {
    margin: 0 0 22px;
    font-family: "Creato", "Coolvetica", Arial, sans-serif;
    font-size: clamp(2.3rem, 4.8vw, 5.2rem);
    line-height: 0.94;
}

.preprod-detail__copy p {
    margin: 0;
    color: rgba(253, 246, 237, 0.74);
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    line-height: 1.65;
}

.preprod-detail__copy {
    padding: clamp(20px, 2.4vw, 34px);
    border: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.preprod-detail__visual {
    min-height: clamp(260px, min(34vw, 42vh), 420px);
    margin: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(253, 246, 237, 0.11);
    border-radius: 6px;
    background: radial-gradient(circle at 70% 24%, rgba(36, 91, 255, 0.16), transparent 38%), linear-gradient(145deg, rgba(253, 246, 237, 0.055), rgba(1, 2, 5, 0.68));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -18px 42px rgba(0, 0, 0, 0.22);
}

.preprod-detail__visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.12;
    filter: grayscale(1) contrast(1.1) brightness(0.52);
}

.preprod-detail__animation {
    --preprod-animation-gutter: clamp(20px, 3vw, 40px);
    position: absolute;
    inset: 0;
}

.preprod-detail__animation svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - var(--preprod-animation-gutter) - var(--preprod-animation-gutter));
    height: calc(100% - var(--preprod-animation-gutter) - var(--preprod-animation-gutter));
    transform: translate(-50%, -50%);
    overflow: visible;
}

.preprod-scene {
    --scene-duration: 6200ms;
    overflow: visible;
    shape-rendering: geometricPrecision;
}

.preprod-scene--pitch {
    --scene-duration: 5300ms;
}

.preprod-scene--research {
    --scene-duration: 14000ms;
}

.preprod-scene--first-document,
.preprod-scene--human,
.preprod-scene--budget {
    --scene-duration: 6500ms;
}

.preprod-scene--final {
    --scene-duration: 13000ms;
}

.preprod-scene--one-page {
    --scene-duration: 9000ms;
}

.preprod-scene--timeline {
    --scene-duration: 6600ms;
}

.preprod-scene [data-motion] {
    --motion-delay: 0ms;
    animation-duration: var(--scene-duration);
    animation-delay: var(--motion-delay);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    transform-box: fill-box;
    transform-origin: center;
}

.preprod-scene [data-motion="draw"] {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation-name: preprod-scene-draw;
}

.preprod-scene [data-motion="flow"],
.preprod-scene [data-motion="network"],
.preprod-scene [data-motion="project"] {
    stroke-dasharray: 0.12 0.08;
    animation-name: preprod-scene-flow;
}

.preprod-scene [data-motion="pulse"],
.preprod-scene [data-motion="participant"],
.preprod-scene [data-motion="pitch-card"],
.preprod-scene [data-motion="filter-breathe"],
.preprod-scene [data-motion="role-breathe"],
.preprod-scene [data-motion="budget-total"],
.preprod-scene [data-motion="drift"] {
    animation-name: preprod-scene-breathe;
}

.preprod-scene [data-motion="brief-lock"],
.preprod-scene [data-motion="select"],
.preprod-scene [data-motion="result-lock"],
.preprod-scene [data-motion="lock"],
.preprod-scene [data-motion="reaction"],
.preprod-scene [data-motion="final-lock"],
.preprod-scene [data-motion="seal"],
.preprod-scene [data-motion="page-focus"],
.preprod-scene [data-motion="team-lock"],
.preprod-scene [data-motion="system-lock"],
.preprod-scene [data-motion="status"] {
    animation-name: preprod-scene-confirm;
}

.preprod-scene [data-motion="scan-x"] {
    animation-name: preprod-scene-scan-x;
}

.preprod-scene [data-motion="scan-y"],
.preprod-scene [data-motion="calibrate"] {
    animation-name: preprod-scene-scan-y;
}

.preprod-scene [data-motion="scan"] {
    animation-name: preprod-svg-scan;
}

.preprod-scene [data-motion="align-a"] {
    --motion-x: -220px;
    animation-name: preprod-scene-align;
}

.preprod-scene [data-motion="align-b"] {
    --motion-x: -118px;
    animation-name: preprod-scene-align;
}

.preprod-scene [data-motion="align-c"] {
    --motion-x: -286px;
    animation-name: preprod-scene-align;
}

.preprod-scene [data-motion="assemble-a"] {
    --motion-x: -118px;
    --motion-y: -48px;
    animation-name: preprod-scene-assemble;
}

.preprod-scene [data-motion="assemble-b"] {
    --motion-x: -130px;
    --motion-y: 46px;
    animation-name: preprod-scene-assemble;
}

.preprod-scene [data-motion="assemble-c"] {
    --motion-x: 112px;
    --motion-y: -44px;
    animation-name: preprod-scene-assemble;
}

.preprod-scene [data-motion="assemble-d"] {
    --motion-x: 126px;
    --motion-y: 42px;
    animation-name: preprod-scene-assemble;
}

.preprod-scene [data-motion="filter-in"] {
    animation-name: preprod-scene-filter-in;
}

.preprod-scene [data-motion="filter-out"] {
    animation-name: preprod-scene-filter-out;
}

.preprod-scene [data-motion="stack-merge"] {
    animation-name: preprod-scene-stack;
}

.preprod-scene [data-motion="draft-build"],
.preprod-scene [data-motion="materialize"] {
    animation-name: preprod-scene-materialize;
}

.preprod-scene [data-motion="draft-line"] {
    animation-name: preprod-scene-draft-line;
}

.preprod-scene [data-motion="funnel-drop"] {
    animation-name: preprod-scene-funnel-drop;
}

.preprod-scene [data-motion="funnel-source"],
.preprod-scene [data-motion="presenter-focus"] {
    animation-name: preprod-scene-breathe;
}

.preprod-scene [data-motion="search-lens"] {
    offset-path: path("M112 93 C160 78 204 93 250 93 C296 93 342 93 388 93 C434 93 478 78 526 93 C558 110 558 188 526 205 C478 222 434 205 388 205 C342 205 296 205 250 205 C204 205 160 222 112 205 C80 222 80 300 112 317 C160 300 204 317 250 317 C296 317 342 317 388 317 C434 317 478 300 526 317");
    offset-anchor: 44% 44%;
    offset-distance: 100%;
    offset-rotate: 0deg;
    animation-name: preprod-scene-search-lens;
    animation-timing-function: linear;
}

.preprod-scene [data-motion="search-hit-a"] { animation-name: preprod-scene-search-hit-a; }
.preprod-scene [data-motion="search-hit-b"] { animation-name: preprod-scene-search-hit-b; }
.preprod-scene [data-motion="search-hit-c"] { animation-name: preprod-scene-search-hit-c; }

.preprod-scene [data-motion="verify"],
.preprod-scene [data-motion="timeline-scan"] {
    animation-name: preprod-scene-verify;
}

.preprod-scene [data-motion="final-materialize"] {
    animation-name: preprod-scene-final-materialize;
}

.preprod-scene [data-motion="verify-primary"] {
    animation-name: preprod-scene-verify-primary;
    animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
}

.preprod-scene [data-motion="verify-final"] {
    animation-name: preprod-scene-verify-final;
    animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
}

.preprod-scene [data-motion="seal-after-scan"] {
    animation-name: preprod-scene-seal-after-scan;
}

.preprod-scene [data-motion="compress-left"] {
    --motion-x: 54px;
    animation-name: preprod-scene-compress;
}

.preprod-scene [data-motion="compress-right"] {
    --motion-x: -54px;
    animation-name: preprod-scene-compress;
}

.preprod-scene [data-motion="module-test"] {
    animation-name: preprod-scene-module-test;
}

.preprod-scene [data-motion="technical-icon"] {
    stroke-dasharray: 1;
    animation-name: preprod-scene-technical-icon;
}

.preprod-scene [data-motion^="schedule-"] {
    animation-name: preprod-scene-schedule;
}

.preprod-scene [data-motion="schedule-a"] { --motion-x: -26px; }
.preprod-scene [data-motion="schedule-b"] { --motion-x: 34px; }
.preprod-scene [data-motion="schedule-c"] { --motion-x: -22px; }
.preprod-scene [data-motion="schedule-d"] { --motion-x: 28px; }
.preprod-scene [data-motion="schedule-e"] { --motion-x: -18px; }

.preprod-scene [data-motion="rebalance"] {
    animation-name: preprod-scene-rebalance;
}

.preprod-scene [data-motion="clock-enter"] {
    animation-name: preprod-scene-clock-enter;
}

.preprod-scene [data-motion^="milestone-"] {
    animation-name: preprod-scene-milestone;
}

.preprod-scene [data-motion="milestone-a"] { --motion-x: -18px; }
.preprod-scene [data-motion="milestone-b"] { --motion-x: 24px; }
.preprod-scene [data-motion="milestone-c"] { --motion-x: -14px; }
.preprod-scene [data-motion="milestone-d"] { --motion-x: 18px; }

.preprod-scene [data-motion="budget-ring"] {
    animation-name: preprod-scene-budget-ring;
}

.preprod-scene [data-motion="budget-sector"] {
    animation-name: preprod-scene-budget-sector;
}

.preprod-scene [data-motion="budget-mark"] {
    animation-name: preprod-scene-budget-mark;
}

.preprod-scene [data-motion="onepage-orbit"] {
    stroke-dasharray: 0.14 0.09;
    animation-name: preprod-scene-onepage-orbit;
}

.preprod-scene [data-motion="onepage-dot"] {
    animation-name: preprod-scene-onepage-dot;
}

.preprod-scene [data-motion="onepage-section"] {
    animation-name: preprod-scene-onepage-section;
}

.preprod-scene [data-motion^="onepage-ring-"] {
    stroke-dasharray: 0.12 0.05;
    animation-name: preprod-scene-onepage-ring;
}

.preprod-scene [data-motion="onepage-ring-b"] {
    animation-direction: reverse;
}

.preprod-scene [data-motion^="onepage-node-"] {
    offset-distance: var(--node-end);
    offset-rotate: 0deg;
    animation-name: preprod-scene-onepage-node;
}

.preprod-scene [data-motion="onepage-node-a"] {
    --node-start: 2%;
    --node-end: 92%;
    offset-path: path("M320 18 C405 18 452 82 452 210 C452 338 405 402 320 402 C235 402 188 338 188 210 C188 82 235 18 320 18");
}

.preprod-scene [data-motion="onepage-node-b"] {
    --node-start: 34%;
    --node-end: 128%;
    offset-path: path("M320 34 C416 34 470 96 470 210 C470 324 416 386 320 386 C224 386 170 324 170 210 C170 96 224 34 320 34");
}

.preprod-scene [data-motion="onepage-node-c"] {
    --node-start: 68%;
    --node-end: 164%;
    offset-path: path("M320 56 C430 56 490 112 490 210 C490 308 430 364 320 364 C210 364 150 308 150 210 C150 112 210 56 320 56");
}

.preprod-scene [data-motion="onepage-scan"] {
    animation-name: preprod-scene-onepage-scan;
}

.preprod-scene [data-motion="onepage-lock"] {
    animation-name: preprod-scene-confirm;
}

.preprod-scene [data-motion="clock-progress"] {
    stroke-dasharray: 0.72 0.28;
    animation-name: preprod-scene-clock-progress;
}

.preprod-scene [data-motion="clock-marker"] {
    offset-path: path("M438 210 A118 118 0 1 1 202 210 A118 118 0 1 1 438 210");
    offset-distance: var(--marker-end);
    offset-rotate: 0deg;
    animation-name: preprod-scene-clock-marker;
}

.preprod-scene__minute-hand {
    transform-box: view-box;
    transform-origin: 320px 210px;
}

.preprod-detail.is-page-hidden .preprod-detail__animation * {
    animation-play-state: paused !important;
}

.preprod-detail.is-switching .preprod-detail__animation * {
    animation-play-state: paused !important;
}

.preprod-detail.is-switching .preprod-detail__nav[aria-disabled="true"] {
    opacity: 0.42;
}

.preprod-detail:not(.is-settled) .preprod-detail__animation * {
    animation-play-state: paused !important;
}

@keyframes preprod-scene-draw {
    0%, 8% { stroke-dashoffset: 1; opacity: 0; }
    64%, 94% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 1; opacity: 0; }
}

@keyframes preprod-scene-flow {
    0%, 8% { stroke-dashoffset: 1; opacity: 0; }
    20%, 62% { opacity: 0.9; }
    70%, 94% { stroke-dashoffset: 0; opacity: 0.48; }
    100% { stroke-dashoffset: 1; opacity: 0; }
}

@keyframes preprod-scene-breathe {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    22% { transform: translate3d(0, 2px, 0) scale(0.98); }
    46% { transform: translate3d(0, -2px, 0) scale(1.02); }
    70%, 94% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes preprod-scene-confirm {
    0%, 12% { opacity: 0; transform: scale(0.9); }
    28% { opacity: 1; transform: scale(1.035); }
    64%, 94% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.94); }
}

@keyframes preprod-scene-scan-x {
    0%, 8% { opacity: 0; transform: translateX(-112px); }
    18%, 62% { opacity: 1; }
    72% { opacity: 0; transform: translateX(112px); }
    73%, 100% { opacity: 0; transform: translateX(-112px); }
}

@keyframes preprod-scene-scan-y {
    0%, 8% { opacity: 0; transform: translateY(-76px); }
    18%, 58% { opacity: 1; }
    70% { opacity: 0; transform: translateY(156px); }
    71%, 100% { opacity: 0; transform: translateY(-76px); }
}

@keyframes preprod-scene-align {
    0%, 8% { transform: translateX(var(--motion-x)); opacity: 0.5; }
    42% { transform: translateX(8px); opacity: 1; }
    64%, 94% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(var(--motion-x)); opacity: 0; }
}

@keyframes preprod-scene-assemble {
    0% { transform: translate(var(--motion-x), var(--motion-y)) scale(0.9); opacity: 0; }
    12% { transform: translate(var(--motion-x), var(--motion-y)) scale(0.92); opacity: 0.24; }
    42% { transform: translate(4px, -2px) scale(1.02); opacity: 1; }
    64%, 94% { transform: translate(0, 0) scale(1); opacity: 1; }
    98% { transform: translate(0, 6px) scale(0.97); opacity: 0; }
    100% { transform: translate(var(--motion-x), var(--motion-y)) scale(0.9); opacity: 0; }
}

@keyframes preprod-scene-filter-in {
    0%, 8% { transform: translateY(-20px); opacity: 0; }
    30%, 94% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(12px); opacity: 0; }
}

@keyframes preprod-scene-filter-out {
    0%, 38% { transform: translateY(-18px) scale(0.94); opacity: 0; }
    58% { transform: translateY(3px) scale(1.02); opacity: 1; }
    68%, 94% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-10px) scale(0.96); opacity: 0; }
}

@keyframes preprod-scene-stack {
    0%, 8% { transform: translate(-28px, 20px) rotate(-2deg); opacity: 0.45; }
    40% { transform: translate(4px, -3px) rotate(0.4deg); opacity: 1; }
    64%, 94% { transform: translate(0, 0) rotate(0); opacity: 1; }
    100% { transform: translate(-18px, 14px) rotate(-1deg); opacity: 0; }
}

@keyframes preprod-scene-materialize {
    0%, 18% { opacity: 0; transform: scale(0.97); clip-path: inset(0 0 100% 0 round 10px); }
    52% { opacity: 1; transform: scale(1.01); clip-path: inset(0 0 0 0 round 10px); }
    64%, 94% { opacity: 1; transform: scale(1); clip-path: inset(0 0 0 0 round 10px); }
    100% { opacity: 0; transform: scale(0.985); clip-path: inset(0 0 8% 0 round 10px); }
}

@keyframes preprod-scene-draft-line {
    0%, 22% { opacity: 0; transform: translateX(-14px); }
    46%, 94% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-8px); }
}

@keyframes preprod-scene-funnel-drop {
    0%, 18% { opacity: 0; transform: translateY(-38px) scale(0.82); }
    48% { opacity: 0.78; transform: translateY(34px) scale(0.94); }
    66%, 94% { opacity: 0; transform: translateY(76px) scale(0.68); }
    100% { opacity: 0; transform: translateY(-38px) scale(0.82); }
}

@keyframes preprod-scene-search-lens {
    0%, 3% { opacity: 0; offset-distance: 0%; transform: scale(0.9); }
    6% { opacity: 1; offset-distance: 0%; transform: scale(1); }
    88% { opacity: 1; offset-distance: 100%; transform: scale(1); }
    94% { opacity: 1; offset-distance: 100%; transform: scale(1.02); }
    100% { opacity: 0; offset-distance: 100%; transform: scale(0.9); }
}

@keyframes preprod-scene-search-hit-a {
    0%, 18% { opacity: 0; }
    23%, 94% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes preprod-scene-search-hit-b {
    0%, 48% { opacity: 0; }
    53%, 94% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes preprod-scene-search-hit-c {
    0%, 69% { opacity: 0; }
    74%, 94% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes preprod-scene-verify {
    0%, 8% { opacity: 0; transform: translateX(0); }
    18%, 58% { opacity: 1; }
    68% { opacity: 0; transform: translateX(254px); }
    69%, 100% { opacity: 0; transform: translateX(0); }
}

@keyframes preprod-scene-final-materialize {
    0%, 32% { opacity: 0; transform: scale(0.94); }
    43% { opacity: 1; transform: scale(1.02); }
    58%, 94% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.96); }
}

@keyframes preprod-scene-verify-primary {
    0%, 8% { opacity: 0; transform: translateX(0); }
    10% { opacity: 0.92; transform: translateX(0); }
    29% { opacity: 0.92; transform: translateX(346px); }
    31%, 100% { opacity: 0; transform: translateX(354px); }
}

@keyframes preprod-scene-verify-final {
    0%, 47% { opacity: 0; transform: translateX(0); }
    49% { opacity: 0.92; transform: translateX(0); }
    70% { opacity: 0.92; transform: translateX(286px); }
    72%, 100% { opacity: 0; transform: translateX(294px); }
}

@keyframes preprod-scene-seal-after-scan {
    0%, 73% { opacity: 0; transform: scale(0.6) rotate(-12deg); }
    80% { opacity: 1; transform: scale(1.12) rotate(2deg); }
    84%, 94% { opacity: 1; transform: scale(1) rotate(0); }
    100% { opacity: 0; transform: scale(0.88); }
}

@keyframes preprod-scene-compress {
    0%, 8% { transform: translateX(0) scale(1); opacity: 0; }
    18% { transform: translateX(0) scale(1); opacity: 0.94; }
    54% { transform: translateX(var(--motion-x)) scale(0.9); opacity: 0.12; }
    72%, 94% { transform: translateX(var(--motion-x)) scale(0.9); opacity: 0; }
    100% { transform: translateX(0) scale(1); opacity: 0; }
}

@keyframes preprod-scene-module-test {
    0%, 12% { transform: translateY(8px); opacity: 0; }
    36% { transform: translateY(-2px); opacity: 1; }
    62%, 94% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(5px); opacity: 0; }
}

@keyframes preprod-scene-schedule {
    0%, 8% { transform: translateX(var(--motion-x)); opacity: 0.54; }
    38% { transform: translateX(3px); opacity: 1; }
    64%, 94% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(var(--motion-x)); opacity: 0; }
}

@keyframes preprod-scene-rebalance {
    0%, 18% { transform: scale(0.9); opacity: 0; }
    44% { transform: scale(1.035); opacity: 1; }
    64%, 94% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.94); opacity: 0; }
}

@keyframes preprod-scene-clock-enter {
    0%, 10% { opacity: 0; transform: scale(0.9); }
    34% { opacity: 1; transform: scale(1.025); }
    64%, 94% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.94); }
}

@keyframes preprod-scene-milestone {
    0%, 24% { opacity: 0; transform: translateX(var(--motion-x)); }
    48% { opacity: 1; transform: translateX(3px); }
    62%, 94% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(0); }
}

@keyframes preprod-scene-budget-ring {
    0%, 10% { opacity: 0; transform: scale(0.84) rotate(-8deg); }
    38% { opacity: 1; transform: scale(1.025) rotate(1deg); }
    64%, 94% { opacity: 1; transform: scale(1) rotate(0); }
    100% { opacity: 0; transform: scale(0.9) rotate(4deg); }
}

@keyframes preprod-scene-budget-sector {
    0%, 16% { opacity: 0; }
    64%, 94% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes preprod-scene-budget-mark {
    0%, 24% { opacity: 0; transform: scale(0.72) rotate(-7deg); }
    48% { opacity: 1; transform: scale(1.08) rotate(1deg); }
    62%, 94% { opacity: 1; transform: scale(1) rotate(0); }
    100% { opacity: 0; transform: scale(0.86); }
}

@keyframes preprod-scene-onepage-orbit {
    0%, 10% { opacity: 0; stroke-dashoffset: 1; }
    30%, 72% { opacity: 0.72; }
    82%, 94% { opacity: 0.34; stroke-dashoffset: 0; }
    100% { opacity: 0; stroke-dashoffset: -0.18; }
}

@keyframes preprod-scene-onepage-dot {
    0%, 18% { opacity: 0; transform: scale(0.7); }
    42% { opacity: 1; transform: scale(1.16); }
    58%, 94% { opacity: 0.82; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.76); }
}

@keyframes preprod-scene-onepage-section {
    0%, 24% { opacity: 0; transform: translateY(12px) scaleX(0.84); }
    54% { opacity: 1; transform: translateY(-2px) scaleX(1.02); }
    66%, 94% { opacity: 1; transform: translateY(0) scaleX(1); }
    100% { opacity: 0; transform: translateY(5px) scaleX(0.96); }
}

@keyframes preprod-scene-onepage-ring {
    0%, 10% { opacity: 0; stroke-dashoffset: 1; }
    28%, 72% { opacity: 0.66; }
    92% { opacity: 0.34; stroke-dashoffset: 0; }
    100% { opacity: 0; stroke-dashoffset: -0.2; }
}

@keyframes preprod-scene-onepage-node {
    0%, 10% { opacity: 0; offset-distance: var(--node-start); transform: scale(0.7); }
    24% { opacity: 0.9; transform: scale(1.12); }
    82%, 92% { opacity: 0.72; offset-distance: var(--node-end); transform: scale(1); }
    100% { opacity: 0; offset-distance: var(--node-end); transform: scale(0.72); }
}

@keyframes preprod-scene-onepage-scan {
    0%, 12% { opacity: 0; transform: translateY(0); }
    24%, 64% { opacity: 0.84; }
    72% { opacity: 0; transform: translateY(294px); }
    73%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes preprod-scene-clock-progress {
    0%, 12% { opacity: 0; stroke-dashoffset: 1; }
    62%, 94% { opacity: 0.9; stroke-dashoffset: 0; }
    100% { opacity: 0; stroke-dashoffset: -0.08; }
}

@keyframes preprod-scene-clock-marker {
    0%, 16% { opacity: 0; offset-distance: var(--marker-start); transform: scale(0.62); }
    34% { opacity: 1; transform: scale(1.18); }
    70%, 92% { opacity: 0.92; offset-distance: var(--marker-end); transform: scale(1); }
    100% { opacity: 0; offset-distance: var(--marker-end); transform: scale(0.72); }
}

@keyframes preprod-scene-technical-icon {
    0%, 16% { opacity: 0; stroke-dashoffset: 1; transform: scale(0.88); }
    42% { opacity: 0.9; stroke-dashoffset: 0; transform: scale(1.05); }
    58%, 92% { opacity: 0.82; stroke-dashoffset: 0; transform: scale(1); }
    100% { opacity: 0; stroke-dashoffset: -0.12; transform: scale(0.9); }
}

@keyframes preprod-svg-scan {
    0%, 100% { opacity: 0; transform: translateX(-34%); }
    20%, 62% { opacity: 0.9; }
    72% { opacity: 0; transform: translateX(34%); }
}

@media (max-width: 980px) {
    /* Detail mobile/tablette : panneau flottant (marges + coins arrondis) et
       plus AUCUN scroll interne - la hauteur suit le contenu au lieu d'etre
       plafonnee par un max-height + overflow-y: auto. Les fleches laissent la
       place a un compteur "x / total" pose sous la carte, la navigation passe
       par le swipe (voir main.js).
       height fixe sur .preprod-detail__visual (et pas flex: 1) : sinon le
       visuel s'etire sur toute la hauteur restante et l'illustration se
       retrouve noyee dans un grand vide.
       Le dialog reste en flex centre pour que carte + compteur forment un
       bloc centre verticalement. 100svh et pas 100dvh : 100dvh bouge en
       temps reel quand la barre d'adresse Safari se retracte (meme piege
       deja corrige sur la hero video). */
    .preprod-detail {
        inset: 0;
        width: 100vw;
        height: 100svh;
        max-height: none;
        padding: 20px 14px;
    }

    .preprod-detail[open] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .preprod-detail__panel {
        --preprod-detail-glass-bg: rgba(4, 7, 13, 0.56);
        --preprod-detail-glass-blur: 20px;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        max-height: none;
        padding: clamp(22px, 4vw, 34px);
        overflow: hidden;
        border-radius: 12px;
    }

    .preprod-detail__nav {
        display: none;
    }

    .preprod-detail__counter {
        display: block;
        flex: 0 0 auto;
    }

    /* align-items: stretch obligatoire : la regle de base pose
       align-items: center, sans effet sur la largeur en grille, mais en flex
       colonne l'axe transversal EST la largeur - le visuel, dont tout le
       contenu est en position: absolute, n'a alors aucune largeur
       intrinseque et s'effondre a 2px (l'illustration se reduit a un trait). */
    .preprod-detail__layout {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        grid-template-columns: none;
    }

    .preprod-detail__copy {
        flex: 0 0 auto;
    }

    /* Hauteur identique sur les 12 cartes : on reserve la place du pire cas
       (titre sur 2 lignes, texte sur 4 lignes) au lieu de laisser la hauteur
       suivre le contenu, sinon le panneau change de taille a chaque swipe.
       Unite lh (= une ligne) pour rester juste quelle que soit la largeur
       d'ecran, ou les tailles de police en clamp() changent. */
    /* Le badge GRATUIT (present sur 3 cartes sur 12) est plus haut que le
       texte de categorie seul : sans hauteur reservee, la carte perd 10px
       des qu'il est absent. */
    .preprod-detail__meta {
        min-height: 28px;
    }

    .preprod-detail__copy h2 {
        min-height: 2lh;
    }

    .preprod-detail__copy p {
        min-height: 4lh;
    }

    /* Sous 380px le texte le plus long passe de 4 a 6 lignes, et le badge
       GRATUIT ne tient plus sur la meme ligne que la categorie (l'en-tete
       passe a 2 lignes) : sans ces reserves la hauteur redevient variable. */
    @media (max-width: 380px) {
        .preprod-detail__copy p {
            min-height: 6lh;
        }

        .preprod-detail__meta {
            min-height: 45px;
        }
    }

    /* Le visuel ne depend pas de la longueur du texte. Dimensionne pour que
       carte + compteur tiennent dans l'ecran meme sur le plus petit format
       (320x700, ou le texte monte a 6 lignes). */
    .preprod-detail__visual {
        flex: 0 0 auto;
        height: clamp(170px, 30svh, 300px);
        min-height: 0;
    }

    .preprod-detail__panel.is-visual-first .preprod-detail__copy,
    .preprod-detail__panel.is-visual-first .preprod-detail__visual {
        order: initial;
    }
}

@media (max-width: 700px) {
    .preprod-detail__panel {
        --preprod-detail-glass-bg: rgba(4, 7, 13, 0.62);
        --preprod-detail-glass-blur: 16px;
        padding: 22px 18px;
        border-radius: 12px;
    }

    .preprod-detail__layout {
        gap: 18px;
        margin-top: 18px;
    }

    .preprod-detail__meta {
        padding-right: 50px;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .preprod-detail__panel {
        --preprod-detail-glass-bg: rgba(7, 9, 15, 0.82);
        background:
            radial-gradient(circle at 18% -8%, rgba(36, 91, 255, 0.12), transparent 39%),
            radial-gradient(circle at 102% 108%, rgba(255, 94, 14, 0.14), transparent 42%),
            var(--preprod-detail-glass-bg);
    }

    .preprod-detail__visual {
        background-color: rgba(12, 14, 20, 0.94);
    }

}

@media (prefers-reduced-motion: reduce) {
    .preprod-card-transition-clone {
        display: none !important;
    }

    .preprod-detail__panel,
    .preprod-detail__copy,
    .preprod-detail__visual,
    .preprod-detail__close,
    .preprod-detail__meta,
    .preprod-detail__nav {
        transition: none !important;
    }

    .preprod-detail.is-settled .preprod-detail__panel.is-pointer-reactive,
    .preprod-detail.is-settled .preprod-detail__panel.is-touch-reactive {
        transform: none;
    }

    .preprod-detail__panel::before,
    .preprod-detail__panel::after {
        animation: none;
    }

    .preprod-detail.is-settled .preprod-detail__close:hover,
    .preprod-detail.is-settled .preprod-detail__close:focus-visible,
    .preprod-detail.is-settled .preprod-detail__close:active {
        transform: none;
    }

    .preprod-detail__nav:hover,
    .preprod-detail__nav:focus-visible,
    .preprod-detail__nav:active {
        transform: var(--carousel-arrow-base-transform);
    }

    .preprod-detail__nav:hover svg,
    .preprod-detail__nav:focus-visible svg,
    .preprod-detail__nav:active svg {
        transform: none;
    }

    .preprod-detail[open] .preprod-detail__copy,
    .preprod-detail[open] .preprod-detail__visual,
    .preprod-detail[open] .preprod-detail__close,
    .preprod-detail[open] .preprod-detail__meta {
        opacity: 1;
        transform: none;
    }

    .preprod-detail__animation * {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }

    .preprod-detail__animation [data-motion^="search-hit-"] {
        opacity: 1;
    }

    .preprod-detail__animation [data-motion="verify-primary"],
    .preprod-detail__animation [data-motion="verify-final"] {
        opacity: 0;
    }

    .preprod-transition-sheen,
    .process-page--preprod .preprod-card.is-preprod-pressed::after,
    .preprod-detail__nav::before {
        animation: none !important;
    }
}

@keyframes preprod-hero-orange-drift {
    0% {
        border-radius: 52% 48% 38% 62% / 44% 58% 42% 56%;
        transform: translate3d(-50%, 0, 0) rotate(-8deg) scale(0.96);
    }

    45% {
        border-radius: 38% 62% 54% 46% / 58% 40% 60% 42%;
        transform: translate3d(-42%, -7%, 0) rotate(7deg) scale(1.04);
    }

    100% {
        border-radius: 60% 40% 48% 52% / 40% 54% 46% 60%;
        transform: translate3d(-56%, -2%, 0) rotate(15deg) scale(1);
    }
}

@keyframes preprod-method-orange-drift {
    0% {
        transform: translate3d(12vw, 14%, 0) scale(0.94);
    }

    24% {
        transform: translate3d(-26vw, -22%, 0) scale(1.04);
    }

    52% {
        transform: translate3d(-70vw, -58%, 0) scale(0.98);
    }

    76% {
        transform: translate3d(-42vw, 8%, 0) scale(1.06);
    }

    100% {
        transform: translate3d(-82vw, -34%, 0) scale(1);
    }
}

@keyframes preprod-title-blue-blob {
    0% {
        opacity: var(--blob-low-opacity);
        transform: translate3d(-7.1vw, -11%, 0) scale(0.98);
    }

    28% {
        opacity: var(--blob-high-opacity);
        transform: translate3d(10.5vw, -4.6%, 0) scale(1.05);
    }

    62% {
        opacity: var(--blob-opacity);
        transform: translate3d(20.1vw, 3.4%, 0) scale(0.99);
    }

    100% {
        opacity: var(--blob-opacity);
        transform: translate3d(2.5vw, 0.2%, 0) scale(1.03);
    }
}

@keyframes preprod-title-orange-blob {
    0% {
        opacity: 0.072;
        transform: translate3d(-7.1vw, -11%, 0) scale(0.98);
    }

    34% {
        opacity: 0.078;
        transform: translate3d(37vw, -4%, 0) scale(1.05);
    }

    70% {
        opacity: 0.073;
        transform: translate3d(30vw, 1%, 0) scale(0.97);
    }

    100% {
        opacity: 0.074;
        transform: translate3d(42vw, -1%, 0) scale(1.02);
    }
}

.process-cta {
    margin: clamp(82px, 9vw, 132px) 0;
    padding: clamp(58px, 7vw, 88px) clamp(28px, 8vw, 140px);
    background: var(--cream);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.process-cta h2 {
    margin: 0;
    font-family: "Creato", "Coolvetica", Arial, sans-serif;
    font-size: clamp(2rem, 3.5vw, 4rem);
}

.process-split,
.production-arrival,
.production-kit,
.post-panel {
    display: grid;
    grid-template-columns: minmax(280px, 0.88fr) minmax(360px, 1.12fr);
    align-items: center;
    gap: clamp(48px, 8vw, 128px);
}

.production-side-nav {
    position: fixed;
    left: clamp(18px, 3.2vw, 58px);
    top: 50%;
    z-index: 12;
    display: grid;
    gap: 18px;
    transform: translateY(-50%);
}

.production-side-nav::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 7px;
    bottom: 7px;
    width: 1px;
    background: rgba(253, 246, 237, 0.26);
}

.production-side-nav a {
    position: relative;
    padding-left: 28px;
    color: rgba(253, 246, 237, 0.58);
    font-size: clamp(0.76rem, 0.8vw, 0.92rem);
    font-weight: 700;
    transition: color 220ms ease, transform 220ms ease;
}

.production-side-nav a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.36em;
    width: 11px;
    aspect-ratio: 1;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: var(--black);
}

.production-side-nav a:hover,
.production-side-nav a:focus-visible {
    color: #ff5e0e;
    transform: translateX(3px);
}

.production-side-nav a:hover::before,
.production-side-nav a:focus-visible::before {
    background: #ff5e0e;
    box-shadow: 0 0 12px rgba(255, 94, 14, 0.42);
}

.process-split {
    padding: clamp(90px, 11vw, 160px) 0 clamp(120px, 12vw, 200px);
}

.process-split > div,
.production-copy {
    border-left: 3px solid var(--orange);
    padding-left: clamp(24px, 4vw, 48px);
}

.process-split figure,
.production-kit figure {
    margin: 0;
}

.process-split img,
.production-kit img,
.process-panorama img,
.production-mosaic img,
.grading-ui img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.06) brightness(0.82);
}

.process-split figure {
    max-width: 460px;
    justify-self: end;
    aspect-ratio: 0.7;
    overflow: hidden;
}

.production-arrival {
    padding-bottom: clamp(64px, 7vw, 104px);
}

.process-page--preprod .process-hero h1,
.process-page--production .process-hero h1,
.process-page--postprod .process-hero h1 {
    font-size: clamp(4.2rem, 8vw, 9rem);
}

.process-page--production::before,
.process-page--production::after,
.process-page--production:hover::before,
.process-page--production:hover::after,
.process-page--production:focus-within::before,
.process-page--production:focus-within::after {
    display: none;
}

.process-page--production .process-hero {
    overflow: hidden;
    position: relative;
}

.process-page--production .process-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: clamp(22px, 7vw, 140px);
    top: clamp(116px, 16vw, 224px);
    width: var(--title-blob-size);
    height: var(--title-blob-size);
    border-radius: 50%;
    pointer-events: none;
    opacity: var(--blob-opacity);
    background: #ff5e0e;
    filter: blur(var(--blob-blur));
    mix-blend-mode: screen;
    transform: translate3d(-7.1vw, -11%, 0) scale(0.98);
    animation: production-title-orange-blob var(--blob-duration) ease-in-out infinite alternate;
    will-change: transform, opacity;
}

.process-page--production .process-hero__inner > p {
    max-width: 640px;
}

.production-installation {
    display: block;
    padding: clamp(42px, 5vw, 82px) 0 clamp(54px, 6vw, 92px);
}

.production-installation > div {
    max-width: 520px;
}

.production-mosaic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(120px, 11vw, 190px);
    gap: 10px;
}

.production-mosaic img {
    min-height: 0;
}

.production-mosaic__wide {
    grid-column: span 2;
    grid-row: span 2;
}

.production-timeline {
    display: grid;
    gap: 18px;
    margin: 38px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(253, 246, 237, 0.58);
}

.production-timeline li {
    position: relative;
    padding-left: 28px;
    font-weight: 700;
}

.production-timeline li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 10px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid currentColor;
}

.production-timeline .is-active {
    color: var(--orange);
}

.production-timeline .is-active::before {
    background: var(--orange);
    box-shadow: 0 0 12px rgba(255, 90, 23, 0.58);
}

.process-panorama {
    width: 100%;
    aspect-ratio: 3.3 / 1;
    overflow: hidden;
}

.process-page--production .process-panorama img {
    filter: contrast(1.04) saturate(0.9) brightness(0.82);
    object-position: center 52%;
}

.production-kit,
.process-grid-detail,
.post-panel--grade {
    padding-bottom: clamp(90px, 10vw, 160px);
}

.production-kit figure {
    max-width: 620px;
    aspect-ratio: 1.35;
    justify-self: end;
    overflow: hidden;
}

.detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: relative;
}

.detail-grid article {
    position: relative;
    z-index: 1;
    border-color: rgba(39, 92, 215, 0.32);
    border-radius: 6px;
    background: rgba(5, 7, 10, 0.82);
    box-shadow: inset 0 0 28px rgba(253, 246, 237, 0.015);
}

.process-page--production .process-grid-detail {
    position: relative;
    padding-top: clamp(92px, 9vw, 148px);
}

.process-page--production .detail-grid::before,
.process-page--production .detail-grid::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.process-page--production .detail-grid::before {
    inset: 8% -5% 10%;
    z-index: 0;
    background:
        linear-gradient(90deg, transparent 0 3%, rgba(92, 151, 255, 0.92) 10%, rgba(92, 151, 255, 0.72) 35%, transparent 44%) 0 18% / 100% 3px no-repeat,
        linear-gradient(90deg, transparent 53%, rgba(92, 151, 255, 0.78) 62%, rgba(92, 151, 255, 0.92) 96%, transparent 100%) 0 18% / 100% 3px no-repeat,
        linear-gradient(90deg, transparent 0 4%, rgba(92, 151, 255, 0.9) 8%, rgba(92, 151, 255, 0.72) 38%, transparent 46%) 0 52% / 100% 3px no-repeat,
        linear-gradient(90deg, transparent 54%, rgba(92, 151, 255, 0.72) 63%, rgba(92, 151, 255, 0.9) 96%, transparent 100%) 0 86% / 100% 3px no-repeat;
    filter: drop-shadow(0 0 10px rgba(92, 151, 255, 0.6));
    opacity: 0.76;
}

.process-page--production .detail-grid::after {
    right: -5%;
    top: 18%;
    width: 56px;
    height: 34%;
    border: 3px solid rgba(92, 151, 255, 0.9);
    border-left: 0;
    border-radius: 0 34px 34px 0;
    filter: drop-shadow(0 0 12px rgba(92, 151, 255, 0.65));
    opacity: 0.82;
}

.detail-grid span {
    display: block;
    width: max-content;
    color: var(--cream);
    font-size: 1.4rem;
    border-bottom: 2px solid var(--blue);
    margin-bottom: 16px;
}

.production-security {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1fr);
    align-items: center;
    gap: clamp(42px, 8vw, 118px);
    padding: 0 0 clamp(108px, 12vw, 190px);
    position: relative;
}

.production-security::after {
    content: "";
    position: absolute;
    right: clamp(10px, 3vw, 46px);
    top: 16%;
    bottom: 18%;
    width: 5px;
    background: #ff5e0e;
    box-shadow: 0 0 16px rgba(255, 94, 14, 0.65);
}

.production-security ul {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(253, 246, 237, 0.74);
}

.production-security li {
    position: relative;
    padding-left: 34px;
}

.production-security li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.24em;
    width: 12px;
    height: 20px;
    border-right: 2px solid #ff5e0e;
    border-bottom: 2px solid #ff5e0e;
    transform: rotate(40deg);
}

.post-scroll-stack {
    display: block;
    padding: 0 0 clamp(96px, 12vw, 180px);
    position: relative;
    z-index: 12;
    isolation: isolate;
    background: #000000;
    overflow: hidden;
}

.post-scroll-stack::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: clamp(-220px, -18vh, -132px);
    bottom: -2px;
    width: 100vw;
    pointer-events: none;
    background: #000000;
    transform: translateX(-50%);
}

.process-page--postprod .post-scroll-stack::after {
    display: none;
}

.post-scroll-step {
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(24px, 3.5vh, 44px) 0;
    display: grid;
    place-items: center;
    position: relative;
    scroll-margin-top: 0;
}

.post-scroll-step:nth-child(1) {
    z-index: 1;
}

.post-scroll-step:nth-child(2) {
    z-index: 2;
}

.post-scroll-step:nth-child(3) {
    z-index: 3;
}

.post-panel {
    padding: clamp(30px, 4vw, 58px);
    border: 1px solid rgba(253, 246, 237, 0.1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.process-page--postprod .post-panel {
    grid-template-columns: minmax(230px, 0.28fr) minmax(760px, 1fr);
    align-items: stretch;
    gap: clamp(34px, 4.8vw, 78px);
    position: relative;
    background: #020202;
    border-color: rgba(253, 246, 237, 0.14);
    border-radius: 8px;
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(253, 246, 237, 0.025),
        inset 0 0 54px rgba(255, 255, 255, 0.018);
    overflow: hidden;
}

.process-page--postprod .post-panel::before {
    content: "";
    position: absolute;
    left: clamp(30px, 4vw, 58px);
    right: clamp(30px, 4vw, 58px);
    top: clamp(18px, 2vw, 30px);
    height: 1px;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(253, 246, 237, 0.2) 10%, rgba(253, 246, 237, 0.08) 46%, rgba(255, 94, 14, 0.34) 52%, rgba(253, 246, 237, 0.08) 58%, transparent);
    opacity: 0.62;
}

.process-page--postprod .post-panel > div:first-child {
    align-self: start;
    max-width: 330px;
    padding-top: clamp(6px, 1vw, 18px);
}

.process-page--postprod .post-panel h2 {
    margin-bottom: clamp(12px, 1.3vw, 22px);
    font-size: clamp(1.15rem, 1.45vw, 2rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.process-page--postprod .post-panel p:not(.post-number) {
    max-width: 18rem;
    font-size: clamp(0.82rem, 0.86vw, 1rem);
    line-height: 1.55;
}

.post-scroll-card {
    --post-zoom-scale: 1;
    --post-zoom-opacity: 1;
    box-sizing: border-box;
    width: min(100%, calc(100% - clamp(44px, 4vw, 84px)));
    height: calc(100vh - clamp(92px, 12vh, 140px));
    height: calc(100dvh - clamp(92px, 12dvh, 140px));
    min-height: min(620px, calc(100vh - 84px));
    min-height: min(620px, calc(100dvh - 84px));
    margin: 0 auto;
    position: relative;
    z-index: 2;
    opacity: var(--post-zoom-opacity);
    transform: scale(var(--post-zoom-scale));
    transform-origin: center;
    will-change: transform, opacity;
}

.process-page--postprod .post-number {
    color: #ff5e0e;
    font-size: clamp(1.25rem, 1.8vw, 2rem);
}

.timeline-ui,
.mixer-ui,
.grading-ui {
    min-height: 100%;
    border: 1px solid rgba(39, 92, 215, 0.22);
    background: radial-gradient(circle at 65% 42%, rgba(39, 92, 215, 0.18), transparent 35%), #080808;
    position: relative;
    overflow: hidden;
}

.timeline-ui {
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0 14%, transparent 14%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 12%, transparent 12%),
        repeating-linear-gradient(90deg, transparent 0 70px, rgba(253, 246, 237, 0.06) 71px 72px),
        radial-gradient(circle at 62% 34%, rgba(36, 91, 255, 0.22), transparent 34%),
        #080808;
}

.timeline-ui::before {
    content: "";
    position: absolute;
    left: 20%;
    right: 6%;
    top: 18%;
    height: 22%;
    border: 1px solid rgba(253, 246, 237, 0.08);
    background:
        linear-gradient(90deg, rgba(5, 5, 5, 0.34), rgba(5, 5, 5, 0.12)),
        repeating-linear-gradient(90deg, rgba(253, 246, 237, 0.12) 0 1px, transparent 1px 15%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.22)),
        url("../assets/images/work-field-01.jpg") center / cover;
    box-shadow: 0 0 20px rgba(36, 91, 255, 0.12);
}

.timeline-ui::after {
    content: "";
    position: absolute;
    left: 55%;
    top: 13%;
    bottom: 12%;
    width: 3px;
    background: #ff5e0e;
    box-shadow: 0 0 16px rgba(255, 94, 14, 0.72);
}

.timeline-ui span {
    position: absolute;
    left: 20%;
    right: 7%;
    height: clamp(20px, 2.2vh, 30px);
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(36, 91, 255, 0.72), rgba(67, 101, 205, 0.58));
}

.timeline-ui span:nth-child(1) { top: 46%; width: 46%; }
.timeline-ui span:nth-child(2) { top: 57%; width: 34%; background: rgba(255, 90, 23, 0.56); }
.timeline-ui span:nth-child(3) { top: 68%; width: 58%; }
.timeline-ui span:nth-child(4) {
    top: 80%;
    width: 76%;
    height: clamp(12px, 1.4vh, 18px);
    background: repeating-linear-gradient(90deg, rgba(42, 180, 118, 0.86) 0 6px, rgba(42, 180, 118, 0.42) 6px 12px);
}

.post-panel--mix {
    background: #020202;
}

.mixer-ui {
    display: grid;
    grid-template-columns: minmax(210px, 1.15fr) repeat(7, minmax(42px, 1fr));
    align-items: stretch;
    gap: clamp(10px, 1.2vw, 18px);
    padding: clamp(20px, 2vw, 34px);
    border-radius: 6px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 24%, transparent 24%),
        repeating-linear-gradient(90deg, rgba(253, 246, 237, 0.035) 0 1px, transparent 1px 9%),
        radial-gradient(circle at 42% 48%, rgba(36, 91, 255, 0.16), transparent 42%),
        #080808;
}

.mixer-ui::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    border: 1px solid rgba(253, 246, 237, 0.08);
    background:
        linear-gradient(180deg, rgba(36, 91, 255, 0.38), transparent 28%) 0 18% / 100% 22% no-repeat,
        linear-gradient(180deg, rgba(36, 91, 255, 0.28), transparent 30%) 0 48% / 100% 22% no-repeat,
        linear-gradient(180deg, rgba(253, 246, 237, 0.1), rgba(253, 246, 237, 0.02));
    box-shadow: inset 0 0 24px rgba(36, 91, 255, 0.08);
}

.mixer-ui span {
    position: relative;
    align-self: stretch;
    border: 1px solid rgba(253, 246, 237, 0.08);
    border-radius: 4px;
    background:
        linear-gradient(180deg, transparent 0 calc(100% - var(--level, 68%)), rgba(255, 94, 14, 0.8) calc(100% - var(--level, 68%)), rgba(57, 214, 111, 0.74) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.42);
}

.mixer-ui span::before,
.mixer-ui span::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.mixer-ui span::before {
    top: 7%;
    width: 22px;
    aspect-ratio: 1;
    border: 1px solid rgba(253, 246, 237, 0.34);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 246, 237, 0.16), rgba(0, 0, 0, 0.36));
}

.mixer-ui span::after {
    bottom: calc(var(--level, 68%) - 7px);
    width: 68%;
    height: 10px;
    border-radius: 2px;
    background: rgba(253, 246, 237, 0.72);
    box-shadow: 0 2px 10px rgba(253, 246, 237, 0.18);
}

.mixer-ui span:nth-child(2) { --level: 46%; }
.mixer-ui span:nth-child(3) { --level: 78%; }
.mixer-ui span:nth-child(4) { --level: 58%; }
.mixer-ui span:nth-child(5) { --level: 86%; }
.mixer-ui span:nth-child(6) { --level: 64%; }
.mixer-ui span:nth-child(7) { --level: 72%; }

.grading-ui {
    display: grid;
    grid-template-columns: minmax(420px, 1.25fr) minmax(210px, 0.38fr);
    grid-template-rows: 1fr minmax(130px, 0.36fr);
    gap: 18px;
    padding: clamp(16px, 1.6vw, 26px);
    border-radius: 6px;
    background:
        radial-gradient(circle at 76% 30%, rgba(36, 91, 255, 0.14), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
        #080808;
}

.grading-ui img {
    grid-row: 1;
    grid-column: 1;
    border: 1px solid rgba(253, 246, 237, 0.08);
}

.grading-ui::before {
    content: "";
    grid-row: 2;
    grid-column: 1;
    align-self: stretch;
    border: 1px solid rgba(253, 246, 237, 0.08);
    background:
        radial-gradient(circle at 12% 50%, transparent 0 22px, rgba(255, 94, 14, 0.86) 23px 25px, transparent 26px),
        radial-gradient(circle at 32% 50%, transparent 0 22px, rgba(36, 91, 255, 0.86) 23px 25px, transparent 26px),
        radial-gradient(circle at 52% 50%, transparent 0 22px, rgba(42, 180, 118, 0.86) 23px 25px, transparent 26px),
        radial-gradient(circle at 72% 50%, transparent 0 22px, rgba(253, 246, 237, 0.66) 23px 25px, transparent 26px),
        linear-gradient(135deg, rgba(255, 94, 14, 0.18), rgba(36, 91, 255, 0.18));
}

.grading-ui::after {
    content: "";
    position: absolute;
    left: 48%;
    top: clamp(16px, 1.6vw, 26px);
    bottom: clamp(166px, 18vh, 230px);
    width: 2px;
    min-height: 48%;
    background: #ff5e0e;
    box-shadow: 0 0 14px rgba(255, 94, 14, 0.58);
}

.scope-bars {
    grid-row: 1 / span 2;
    grid-column: 2;
    display: grid;
    gap: 16px;
}

.scope-bars span {
    background: linear-gradient(90deg, #e81925, #2fd56f, var(--blue));
}

.process-page--postprod .process-cta--hero {
    margin: clamp(-48px, -3vw, -22px) 0 clamp(26px, 4vh, 58px);
    position: relative;
    z-index: 14;
    box-shadow: 0 clamp(24px, 5vh, 54px) 0 #000000;
    isolation: isolate;
}

.process-page--postprod .post-panel--grade {
    border-radius: 8px;
    padding-bottom: clamp(30px, 4vw, 58px);
}

@media (min-width: 981px) {
    .process-page--postprod .post-scroll-stack {
        margin-top: 0;
        width: min(1880px, calc(100vw - clamp(24px, 3vw, 56px)));
    }
}

.process-page + .site-footer::before {
    top: -76px;
    height: 78px;
    clip-path: polygon(0 72%, 100% 18%, 100% 100%, 0 100%);
}

.process-page--postprod + .site-footer::before {
    top: -108px;
    height: 110px;
    clip-path: polygon(0 62%, 100% 16%, 100% 100%, 0 100%);
}

.site-footer {
    background: var(--cream);
    color: var(--ink);
    margin-top: -1px;
    padding: clamp(54px, 7vw, 90px) clamp(30px, 4vw, 50px) 24px;
    position: relative;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: -38px;
    left: 0;
    right: 0;
    height: 40px;
    background: var(--cream);
    clip-path: polygon(0 58%, 100% 10%, 100% 100%, 0 100%);
}

.footer-grid {
    width: 100%;
    margin: 0 0 42px;
    display: grid;
    grid-template-columns: minmax(260px, 1.55fr) repeat(3, minmax(160px, 1fr));
    gap: clamp(30px, 5vw, 74px);
}

.footer-brand img {
    filter: grayscale(1);
    width: 74px;
    height: 74px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
    transform-origin: center;
    transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1), filter 280ms ease;
}

.footer-brand {
    position: relative;
}

.footer-brand__home {
    width: max-content;
    max-width: 100%;
    padding: 7px 12px 7px 8px;
    display: inline-flex !important;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 28px rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
    backdrop-filter: blur(12px) saturate(1.08);
    transform-origin: left center;
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-brand__home:hover,
.footer-brand__home:focus-visible {
    transform: translateY(-3px) scale(1.015);
}

.footer-brand__home:hover img,
.footer-brand__home:focus-visible img {
    transform: rotate(10deg) scale(1.06);
}

.footer-brand__home:active {
    transform: translateY(1px) scale(0.985);
}

.footer-brand__home:active img {
    transform: rotate(-4deg) scale(0.98);
}

.footer-brand strong {
    font-family: "Coolvetica", Arial, sans-serif;
    font-size: 1.95rem;
}

.footer-brand p {
    max-width: 17rem;
    font-size: 1rem;
    line-height: 1.42;
    color: #342f29;
}

.site-footer h2 {
    margin: 10px 0 18px;
    font-size: 0.92rem;
}

.site-footer a,
.site-footer span {
    display: block;
    margin: 8px 0;
    color: #26231f;
}

/* Footer link hover alternance */
.site-footer a:not(.footer-social) {
    width: fit-content;
    max-width: 100%;
    transition: color 180ms ease, text-shadow 180ms ease;
}

.site-footer a:not(.footer-social):not(.footer-brand__home) {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 1px;
    transition: color 180ms ease, text-shadow 180ms ease, background-size 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-footer a:not(.footer-social):not(.footer-brand__home):hover,
.site-footer a:not(.footer-social):not(.footer-brand__home):focus-visible {
    background-size: 100% 1px;
}

.footer-grid > div:nth-child(2) > a:nth-of-type(2):hover,
.footer-grid > div:nth-child(2) > a:nth-of-type(2):focus-visible,
.footer-grid > div:nth-child(3) > a:nth-of-type(1):hover,
.footer-grid > div:nth-child(3) > a:nth-of-type(1):focus-visible,
.footer-grid > div:nth-child(3) > a:nth-of-type(3):hover,
.footer-grid > div:nth-child(3) > a:nth-of-type(3):focus-visible,
.footer-grid > div:nth-child(4) > a[href^="mailto:"]:hover,
.footer-grid > div:nth-child(4) > a[href^="mailto:"]:focus-visible {
    color: var(--blue);
    text-shadow: 0 0 12px rgba(39, 92, 215, 0.42);
}

.footer-grid > div:nth-child(2) > a:nth-of-type(1):hover,
.footer-grid > div:nth-child(2) > a:nth-of-type(1):focus-visible,
.footer-grid > div:nth-child(2) > a:nth-of-type(3):hover,
.footer-grid > div:nth-child(2) > a:nth-of-type(3):focus-visible,
.footer-grid > div:nth-child(3) > a:nth-of-type(2):hover,
.footer-grid > div:nth-child(3) > a:nth-of-type(2):focus-visible,
.footer-grid > div:nth-child(4) > a:nth-of-type(1):hover,
.footer-grid > div:nth-child(4) > a:nth-of-type(1):focus-visible {
    color: var(--orange);
    text-shadow: 0 0 12px rgba(255, 90, 23, 0.36);
}

.footer-bottom {
    width: 100%;
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.38);
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 0.86rem;
    font-weight: 700;
}

.home-page + .site-footer {
    background: var(--black);
    color: var(--cream);
}

.home-page + .site-footer::before {
    background: var(--black);
}

.home-page + .site-footer .footer-brand img {
    filter: grayscale(1) invert(1) brightness(1.18);
    opacity: 0.78;
}

.home-page + .site-footer .footer-brand strong,
.home-page + .site-footer h2 {
    color: var(--cream);
}

.home-page + .site-footer .footer-brand p,
.home-page + .site-footer a,
.home-page + .site-footer span {
    color: rgba(253, 246, 237, 0.72);
}

.home-page + .site-footer .footer-bottom {
    border-top-color: rgba(253, 246, 237, 0.28);
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-family: "ZT Nature", "Creato", Arial, sans-serif;
}

.site-footer .footer-social {
    width: clamp(28px, 2.4vw, 38px);
    height: clamp(28px, 2.4vw, 38px);
    margin: 0;
    border: 1px solid rgba(38, 35, 31, 0.22);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(38, 35, 31, 0.66);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(0, 0, 0, 0.045));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), 0 8px 20px rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    backdrop-filter: blur(10px) saturate(1.08);
    font-family: "ZT Nature", "Creato", Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.site-footer .footer-social svg {
    width: 58%;
    height: 58%;
    display: block;
}

.site-footer .footer-social__cutout {
    fill: var(--cream);
}

.home-page + .site-footer .footer-social__cutout {
    fill: var(--black);
}

.home-page + .site-footer .footer-social {
    border-color: rgba(253, 246, 237, 0.18);
    color: rgba(253, 246, 237, 0.68);
    background: linear-gradient(145deg, rgba(253, 246, 237, 0.13), rgba(253, 246, 237, 0.025));
    box-shadow: inset 0 1px 0 rgba(253, 246, 237, 0.18), 0 8px 20px rgba(0, 0, 0, 0.24);
}

.home-page + .site-footer .footer-brand__home {
    border-color: rgba(253, 246, 237, 0.18);
    background: linear-gradient(145deg, rgba(253, 246, 237, 0.12), rgba(253, 246, 237, 0.025));
    box-shadow: inset 0 1px 0 rgba(253, 246, 237, 0.2), 0 12px 28px rgba(0, 0, 0, 0.24);
}

.site-footer .footer-social:hover,
.site-footer .footer-social:focus-visible {
    transform: translateY(-2px);
}

.site-footer .footer-social--instagram:hover,
.site-footer .footer-social--instagram:focus-visible {
    color: #e1306c;
    border-color: rgba(225, 48, 108, 0.72);
    background: rgba(225, 48, 108, 0.12);
    box-shadow: 0 0 16px rgba(225, 48, 108, 0.2);
}

.site-footer .footer-social--youtube:hover,
.site-footer .footer-social--youtube:focus-visible {
    color: #ff0000;
    border-color: rgba(255, 0, 0, 0.72);
    background: rgba(255, 0, 0, 0.12);
    box-shadow: 0 0 16px rgba(255, 0, 0, 0.2);
}

.site-footer .footer-social--linkedin:hover,
.site-footer .footer-social--linkedin:focus-visible {
    color: #0a66c2;
    border-color: rgba(10, 102, 194, 0.72);
    background: rgba(10, 102, 194, 0.12);
    box-shadow: 0 0 16px rgba(10, 102, 194, 0.2);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .footer-brand__home,
    .site-footer .footer-social {
        background-color: rgba(253, 246, 237, 0.92);
    }

    .home-page + .site-footer .footer-brand__home,
    .home-page + .site-footer .footer-social {
        background-color: rgba(20, 20, 20, 0.94);
    }
}

.site-footer .footer-brand__home,
.home-page + .site-footer .footer-brand__home {
    border-color: transparent;
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Homepage corrective overrides: logos, works reveal, and clean video cards. */
.clients .logo-track img {
    opacity: 1;
    filter: none;
}

.logo-track .client-logo--blk,
.logo-track .client-logo--ligueens {
    height: clamp(46px, 5.1vw, 82px);
    opacity: 0.92;
}

.logo-track .client-logo--suma {
    height: clamp(61px, 6.8vw, 109px);
    opacity: 0.92;
}

.works-reveal::before,
.works-reveal::after {
    content: none;
    display: none;
}

.work-card__caption,
.work-card:hover .work-card__caption,
.work-card:focus-within .work-card__caption {
    display: none;
}
@media (max-width: 980px) {
    .hero {
        min-height: 640px;
    }

    .savoir-page {
        overflow: hidden;
    }

    .stats-grid,
    .footer-grid,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-zone-map {
        width: min(100%, 760px);
    }

    /* Le formulaire de contact tenait dans l'ecran sur desktop grace a une
       version resserree (@media min-width: 981px, plus bas dans ce fichier) :
       champs de 40px au lieu de 54, textarea de 112px au lieu de 170, gaps et
       marges reduits. En dessous de 981px, faute d'equivalent, le formulaire
       retombait sur les valeurs larges par defaut -- 1601px de haut mesures a
       375px de large, la ou l'ecran n'en offre que 812. Meme resserrement ici,
       plus le passage en 2 colonnes de Prenom/Nom et E-mail/Telephone (repris
       a .contact-page .form-row, qui l'emporte par specificite sur la regle
       generale .form-row qui empile ces deux paires sous 700px) : 1601px ->
       mesure sur la page servie plus bas dans ce commentaire. */
    .contact-page .contact-layout {
        gap: clamp(28px, 5vw, 48px);
    }

    .contact-page .contact-form {
        padding: clamp(16px, 4vw, 22px);
        gap: 11px;
    }

    .contact-page .form-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .contact-page .contact-form label {
        gap: 5px;
        font-size: 0.86rem;
    }

    .contact-page .contact-form input:not([type="checkbox"]),
    .contact-page .contact-form select,
    .contact-page .contact-form textarea {
        min-height: 42px;
        padding: 9px 12px;
    }

    .contact-page .contact-form textarea {
        min-height: 100px;
    }

    .contact-page .consent {
        gap: 9px;
    }

    .contact-page .contact-details {
        padding-top: 0;
    }

    .contact-page .contact-details h3 {
        margin-bottom: 8px;
    }

    .contact-page .contact-details p {
        margin: 0;
    }

    .contact-page .contact-details dl {
        gap: 5px;
        margin-top: 16px;
    }

    .contact-page .contact-details dt {
        margin-top: 9px;
    }

    .contact-page .contact-zone-map {
        margin-top: 18px;
    }

    .contact-page .contact-zone-map__visual {
        height: clamp(200px, 26vh, 300px);
        aspect-ratio: auto;
    }

    .contact-page .contact-zone-map p {
        margin-top: 6px;
    }

    .stat-item {
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.22);
        padding: 22px 0;
    }

    .stat-item:first-child {
        border-top: 0;
    }

    /* "Pourquoi la video" : hauteur reduite d'environ 10% en resserrant les
       espaces verticaux, et titre legerement reduit pour que le "?" (rendu
       insecable dans le markup) tienne sur la ligne du titre. */
    .stats {
        padding: 64px clamp(18px, 5vw, 72px) 58px;
    }

    .stats h2 {
        font-size: clamp(2.15rem, 8.6vw, 4rem);
        margin-bottom: 30px;
    }

    .sources {
        margin-top: 36px;
    }

    /* CTA "Donner forme a votre vision" : plus de bande creme en
       mobile/tablette - seul le bouton orange, centre sur le fond de la page.
       Le desktop garde la bande complete. */
    .vision-band {
        /* Le hero video (position: fixed, z-index 0) reste visible en
           permanence derriere toute section sans fond opaque : "background:
           none" laissait donc le showreel transparaitre derriere le bouton. */
        background: var(--cream);
        min-height: 0;
        padding: 34px 24px;
        justify-content: center;
    }

    .vision-band > div {
        display: none;
    }

    .vision-band .button {
        margin-right: 0;
    }

    .filter-bar {
        grid-template-columns: repeat(3, 1fr);
    }

    /* En multi-lignes (tablette 3x2, mobile 2x3), l'indicateur lumineux se
       cale sous le bouton actif via --filter-dot-top (pose par main.js) au
       lieu de rester colle en bas de la barre, sous la mauvaise ligne. */
    .filter-active-dot {
        bottom: auto;
        top: var(--filter-dot-top, calc(100% - 8px));
    }

    /* Footer : hauteur reduite d'environ 5% en resserrant les espaces
       verticaux dominants (gap inter-blocs, padding haut, marge de grille). */
    .site-footer {
        padding-top: 46px;
    }

    .footer-grid {
        gap: 22px;
        margin-bottom: 34px;
    }

    .footer-brand p {
        margin: 10px 0 0;
    }

    .works-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .savoir-hero {
        min-height: auto;
    }

    .savoir-breadcrumb {
        margin-bottom: clamp(86px, 14vw, 128px);
    }

    .savoir-hero__copy {
        margin-left: 0;
    }

    .savoir-steps {
        width: min(100%, calc(100% - 44px));
        gap: clamp(90px, 18vw, 150px);
        padding-bottom: clamp(112px, 20vw, 180px);
    }

    .savoir-cta {
        width: min(100%, calc(100% - 44px));
        margin: 0 auto clamp(82px, 13vw, 118px);
        align-items: flex-start;
        flex-direction: column;
    }

    .savoir-step,
    .savoir-step--shoot {
        grid-template-columns: 1fr;
        gap: clamp(34px, 7vw, 56px);
        height: auto;
    }

    .savoir-step::before,
    .savoir-step::after {
        inset: -12px;
    }


    .savoir-step__media,
    .savoir-step--preprod .savoir-step__media,
    .savoir-step--shoot .savoir-step__media,
    .savoir-step--postprod .savoir-step__media {
        max-width: min(700px, 100%);
    }

    .process-hero__inner,
    .process-method,
    .production-arrival,
    .production-kit,
    .process-grid-detail,
    .production-security,
    .post-scroll-stack,
    .post-panel--grade,
    .process-split {
        width: min(100%, calc(100% - 44px));
    }

    .post-scroll-stack {
        display: grid;
        gap: clamp(48px, 9vw, 82px);
    }

    .post-scroll-step {
        min-height: auto;
        padding: 0;
    }

    .post-scroll-card {
        height: auto;
        min-height: auto;
        position: relative;
        top: auto;
        opacity: 1;
        transform: none;
        filter: none;
    }

    .mixer-ui {
        grid-template-columns: repeat(4, minmax(42px, 1fr));
    }

    .mixer-ui::before {
        display: none;
    }

    .grading-ui img,
    .scope-bars {
        grid-row: auto;
        grid-column: auto;
    }

    .grading-ui::before,
    .grading-ui::after {
        display: none;
    }

    .process-split,
    .production-arrival,
    .production-kit,
    .production-security,
    .post-panel,
    .post-panel--grade {
        grid-template-columns: 1fr;
    }

    .production-side-nav {
        display: none;
    }

    .method-rail,
    .method-cards,
    .detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .production-mosaic {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-page--production .detail-grid::before,
    .process-page--production .detail-grid::after {
        display: none;
    }

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

@media (max-width: 700px) {
    .site-header {
        padding: 18px;
    }

    .hero {
        min-height: 520px;
        height: 72vh;
    }

    .hero::after {
        box-shadow: inset 0 0 0 18px var(--black);
    }

    .hero img {
        object-position: 58% center;
    }

    .craft-collage {
        grid-template-columns: 1fr;
    }

    .craft-collage__image {
        min-height: 250px;
    }

    .craft-collage h2 {
        padding: 0 18px;
    }

    .craft-hero {
        --craft-title-x: 0px;
        /* Bandeau court et large, comme sur grand ecran : la composition reste
           lisible en entier au lieu d'etre rognee sur les cotes. */
        min-height: clamp(180px, 46vw, 260px);
    }

    .craft-title {
        white-space: normal;
        flex-wrap: wrap;
        padding: 0 18px;
        text-align: center;
    }

    .logo-track img {
        max-height: 32px;
        max-width: 128px;
    }

    .logo-track .client-logo--ui {
        max-height: none;
        max-width: none;
    }

    /* Le plafond unique 32px ci-dessus ecrasait toutes les compensations
       individuelles du desktop : les logos carres (sifight, pygargues, 4sang,
       icare...) paraissaient 4 a 5 fois plus petits que les logos horizontaux.
       On reporte ici les proportions desktop (bornes basses des clamp), pour
       que chaque logo garde le meme poids visuel relatif qu'en grand ecran. */
    .logo-track .client-logo--large {
        max-height: 48px;
    }

    .logo-track .client-logo--4sang,
    .logo-track .client-logo--pyguargues {
        max-height: 45px;
    }

    .logo-track .client-logo--xl {
        max-height: 58px;
    }

    .logo-track .client-logo--optique {
        max-height: 77px;
    }

    .logo-track .client-logo--escpo {
        max-height: 41px;
    }

    .logo-track .client-logo--sifight {
        max-height: 72px;
    }

    .logo-track .client-logo--icare {
        max-height: 60px;
    }

    .logo-track .client-logo--reve {
        max-height: 52px;
    }

    .logo-track .client-logo--blk,
    .logo-track .client-logo--ligueens {
        max-height: 46px;
    }

    .logo-track .client-logo--suma {
        max-height: 61px;
    }

    /* Les 6 filtres tiennent dans l'ecran : grille 2 colonnes x 3 lignes.
       L'ancien defilement horizontal cachait "familial" et "sportif" sans
       aucun indice visuel qu'on pouvait scroller. */
    .filter-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-bar button {
        min-width: 0;
    }

    .works-grid,
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Calee sur "Conditions d'utilisation" (le plus long des 4 titres) pour
       qu'il tienne sur une ligne a toutes les largeurs mobile/tablette : le
       panneau fait calc(100% - 44px), et ce texte mesure ~9.65x sa propre
       taille de police dans cette police/graisse - le coefficient vw
       ci-dessous applique une marge de securite de 10% sur cette limite. */
    .menu-panel a {
        font-size: clamp(2rem, calc(9.3vw - 4px), 6rem);
    }

    /* .menu-panel__inner > ul est en display:grid sans grid-template-columns
       explicite : sa colonne unique implicite se dimensionne sur le contenu
       le plus large, pas sur le conteneur (min-width:auto par defaut sur les
       items de grille). Le "Patch menu burger" (plus bas dans le fichier,
       desormais limite au desktop) forcait nowrap sur "Conditions
       d'utilisation" meme en mobile, ce qui gonflait cette colonne partagee
       a sa largeur non retournee (543px) et debordait le panneau -
       entrainant "Notre savoir-faire" et "Contactez-nous" avec elle, alors
       qu'eux-memes n'avaient pas de nowrap. */
    .menu-item {
        min-width: 0;
    }

    .menu-submenu {
        max-height: none;
        margin: 12px 0 0 18px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .menu-submenu a {
        font-size: clamp(1.05rem, 6vw, 1.65rem);
    }

    .footer-bottom {
        flex-wrap: wrap;
    }

    .savoir-hero {
        padding: 104px 22px 70px;
    }

    .savoir-breadcrumb {
        margin-bottom: 74px;
        white-space: nowrap;
    }

    .savoir-hero h1 {
        margin-bottom: 42px;
        font-size: clamp(2.3rem, 13vw, 4.3rem);
    }

    .savoir-hero__copy {
        font-size: 1rem;
    }

    .savoir-step__label h2 {
        font-size: clamp(2rem, 8.6vw, 3.4rem);
    }

    .savoir-step__label,
    .savoir-step--shoot .savoir-step__label {
        width: 100%;
    }

    .savoir-step__media {
        aspect-ratio: 1.24 / 1;
    }

    .process-hero {
        padding: 104px 22px 70px;
    }

    .process-breadcrumb {
        margin-bottom: 24px;
        white-space: nowrap;
    }

    .process-hero h1 {
        font-size: clamp(2.7rem, 14vw, 4.8rem);
    }

    .method-rail,
    .method-cards,
    .detail-grid,
    .grading-ui {
        grid-template-columns: 1fr;
    }

    .process-cta {
        margin: 70px 0;
        padding: 42px 22px;
    }

    .production-mosaic {
        grid-auto-rows: 150px;
    }

    .production-mosaic__wide {
        grid-column: span 2;
        grid-row: span 1;
    }

    .process-panorama {
        aspect-ratio: 1.45 / 1;
    }

    .production-security::after {
        display: none;
    }
}

/* Patch menu burger — Conditions générales / Contact / Savoir-faire.
   Limite au desktop (981px+) : ce nowrap sert au decalage au survol souris
   ci-dessous (:has(.menu-item--legal:hover)), sans objet sur mobile ou les
   sous-menus sont deja tous deplies. Applique sans condition, il forcait
   "Conditions d'utilisation" a demander sa pleine largeur non retournee,
   ce qui gonflait la colonne de grille partagee par tous les liens du menu
   et faisait deborder "Notre savoir-faire" et "Contactez-nous" avec elle. */
@media (min-width: 981px) {
    .menu-item--legal > a {
        white-space: nowrap;
    }
}

.menu-item--legal > a:hover,
.menu-item--legal > a:focus-visible {
    color: var(--orange);
    text-shadow: 0 0 14px rgba(255, 90, 23, 0.3);
}

/* Remontée smooth de toute la liste quand Conditions générales ouvre son sous-menu */
.menu-panel__inner > ul {
    transition: transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
}

.menu-panel__inner:has(.menu-item--legal:hover) > ul,
.menu-panel__inner:has(.menu-item--legal:focus-within) > ul {
    transform: translate3d(0, -48px, 0);
}

/* Smooth du sous-menu Conditions générales */
.menu-item--legal .menu-submenu {
    transition:
        max-height 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
        margin 140ms ease,
        opacity 120ms ease,
        visibility 120ms ease,
        transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.menu-item--legal .menu-submenu a {
    white-space: nowrap;
}

/* Contactez-nous : rapprochement vers le haut */
.menu-panel__inner > ul > .menu-item:last-child {
    transform: translateY(-22px);
    transition: transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Notre savoir-faire : sous-menu aligné sur la présence de Conditions générales */
.menu-item--craft .menu-submenu {
    gap: clamp(8px, 1.2vw, 13px);
}

.menu-item--craft:hover .menu-submenu,
.menu-item--craft:focus-within .menu-submenu {
    max-height: 220px;
    margin-top: clamp(10px, 1.3vw, 18px);
}

@media (max-width: 980px) {
    .process-page--preprod .preprod-panel[data-preprod-panel="documentation"],
    .process-page--preprod .preprod-panel[data-preprod-panel="ressource"] {
        --preprod-glass-category-blur: 4px;
    }

    .preprod-hero__blob {
        left: 52%;
        bottom: -150px;
    }

    .process-page--preprod .preprod-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .preprod-panels {
        min-height: 0;
    }
}

@media (max-width: 700px) {
    .menu-submenu {
        gap: 14px;
        margin-top: 16px;
    }

    .menu-item--legal .menu-submenu {
        margin-bottom: 30px;
    }

    .menu-panel__inner > ul > .menu-item:last-child {
        margin-top: 18px;
        transform: none;
    }

    .process-page--preprod .process-hero h1 {
        font-size: clamp(2.4rem, 11.8vw, 3.2rem);
    }

    /* "Post-production" (15 caracteres, le plus long des 3 titres de hero)
       passait sur plusieurs lignes (voire coupait au milieu des mots) : la
       regle generique .process-hero h1 ci-dessus (une seule classe) perd
       toujours face a .process-page--postprod .process-hero h1 (deux
       classes, definie hors media query), meme mobile - specificite
       superieure, gagne quel que soit l'ordre source. Meme piege deja
       rencontre sur .production-extra-card. Formule calee sur le pire cas
       (320px, texte mesure au canvas avec la pile de police du site) :
       36px a 320-375px, jusqu'a 67.2px (le plancher desktop, pour une
       transition continue) vers 700px. */
    .process-page--postprod .process-hero h1 {
        font-size: clamp(2.25rem, 9.6vw, 4.2rem);
    }

    .process-page--preprod .process-breadcrumb {
        margin-bottom: 36px;
    }

    .preprod-hero__blob {
        width: min(86vw, 420px);
        left: 58%;
        bottom: -120px;
        opacity: 0.18;
        filter: blur(48px);
    }

    .process-page--preprod .preprod-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .process-page--preprod .preprod-method {
        padding: 32px 22px;
        border-radius: 18px;
    }

    .process-page--preprod .preprod-panel {
        padding: 24px;
        border-radius: 16px;
    }

    .process-page--preprod .preprod-panels {
        transform: translateY(15px);
    }

    /* gap 0 + padding 6px : c'est la geometrie que suppose la formule de
       .preprod-rail__indicator (left: 6px, width: calc((100% - 12px) / 3)) et
       son pas de deplacement en JS (translateX(index * 100%) de sa propre
       largeur). Un gap ou un padding different desalignait l'indicateur des
       onglets, d'ou son debordement d'environ 6px a droite. */
    .process-page--preprod .preprod-rail {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: 0;
        width: 100%;
        max-width: 100%;
        padding: 6px;
    }

    .preprod-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 15px clamp(3px, 1.2vw, 8px);
        font-size: clamp(0.66rem, 2.9vw, 0.82rem);
        line-height: 1.12;
        letter-spacing: -0.015em;
        white-space: nowrap;
        text-align: center;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .preprod-tab strong {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        font-size: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        text-align: center;
    }

    .preprod-tab .preprod-tab__label-full {
        display: none;
    }

    .preprod-tab .preprod-tab__label-short {
        display: inline;
    }

    .preprod-tab::after {
        left: 18px;
        right: 18px;
        bottom: 8px;
        transform-origin: center;
    }

    .preprod-tab:focus-visible {
        outline-offset: -2px;
    }

    /* Hauteur explicite plutot qu'aspect-ratio : Safari calcule mal la
       hauteur des lignes de la grille avec aspect-ratio quand le contenu
       intrinseque des cartes differe (titre sur 1 ou 2 lignes) - la ligne du
       haut ("Echange et partage", 2 lignes) s'agrandissait alors que celle du
       bas ("Alignement" / "Pitch") restait au format prevu, rendant les
       cartes visiblement inegales sur iPhone alors qu'elles semblaient
       identiques ici. Une hauteur fixe leve toute ambiguite de calcul.
       Formule calee sur les valeurs obtenues avec aspect-ratio: 1.05/1 (80px
       a 320px de large, 261px a 700px). */
    .process-page--preprod .preprod-card {
        aspect-ratio: auto;
        height: clamp(80px, calc(47vw - 71px), 261px);
        min-height: 0;
        padding: 10px;
    }

    .process-page--preprod .preprod-card strong {
        font-size: clamp(0.68rem, 3.4vw, 0.84rem);
        line-height: 1.15;
    }

    .preprod-card .preprod-card__badge {
        top: 8px;
        left: 8px;
    }
}

@media (max-width: 760px) {
    .works {
        perspective: 760px;
    }

    .works-reveal {
        transform:
            translate3d(0, calc(var(--works-reveal-closed) * 104px + var(--works-reveal-wave) * 10px), calc(var(--works-reveal-closed) * -22px))
            scale(calc(0.95 + var(--works-reveal-progress) * 0.05));
        filter: brightness(calc(0.86 + var(--works-reveal-progress) * 0.14));
    }

    .works-reveal::before,
    .works-reveal::after {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .works-reveal {
        --works-reveal-progress: 1;
        --works-reveal-wave: 0;
    }

    .works-reveal::before,
    .works-reveal::after {
        display: none;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Micro-ajustement manuel — Politique de confidentialité */

section[aria-labelledby="privacy-title"] {
    --privacy-left-top-y: -165px;     /* 03 / 05 / 07 */
    --privacy-left-bottom-y: -550px;  /* 09 / 11 */
    --privacy-right-y: -125px;        /* 06 / 08 / 10 */
}

/* Colonne gauche — groupe du bloc 03 */
section[aria-labelledby="privacy-title"] .legal-grid > .legal-card:nth-child(3),
section[aria-labelledby="privacy-title"] .legal-grid > .legal-card:nth-child(5),
section[aria-labelledby="privacy-title"] .legal-grid > .legal-card:nth-child(7) {
    transform: translateY(var(--privacy-left-top-y));
}

/* Colonne gauche — groupe du bloc 09 */
section[aria-labelledby="privacy-title"] .legal-grid > .legal-card:nth-child(9),
section[aria-labelledby="privacy-title"] .legal-grid > .legal-card:nth-child(11) {
    transform: translateY(var(--privacy-left-bottom-y));
}

/* Colonne droite — groupe du bloc 06 */
section[aria-labelledby="privacy-title"] .legal-grid > .legal-card:nth-child(6),
section[aria-labelledby="privacy-title"] .legal-grid > .legal-card:nth-child(8),
section[aria-labelledby="privacy-title"] .legal-grid > .legal-card:nth-child(10) {
    transform: translateY(var(--privacy-right-y));
}

/* Mobile : reset */
@media (max-width: 980px) {
    section[aria-labelledby="privacy-title"] {
        --privacy-left-top-y: 0px;
        --privacy-left-bottom-y: 0px;
        --privacy-right-y: 0px;
    }
}


/* Micro-ajustement manuel — coordonnées contact */
.contact-details dl dt:first-of-type {
    color: var(--white);
}

.contact-details dl dt:first-of-type + dd,
.contact-details dl dt:first-of-type + dd a {
    color: var(--orange);
}

.contact-details dl dt:first-of-type + dd a:hover,
.contact-details dl dt:first-of-type + dd a:focus-visible {
    color: var(--white);
}

/* Footer — hover orange uniquement sur le téléphone */
.site-footer a[href="tel:+33658662929"]:hover,
.site-footer a[href="tel:+33658662929"]:focus-visible {
    color: var(--orange);
}

/* Footer — bloc légal uniquement */
.site-footer .footer-legal-links {
    display: grid;
    gap: 10px;
}

.site-footer .footer-legal-links a.footer-legal-link {
    margin: 0;
}

.site-footer .footer-legal-links a.footer-legal-link--blue:hover,
.site-footer .footer-legal-links a.footer-legal-link--blue:focus-visible {
    color: var(--blue);
    text-shadow: 0 0 12px rgba(39, 92, 215, 0.28);
}

.site-footer .footer-legal-links a.footer-legal-link--orange:hover,
.site-footer .footer-legal-links a.footer-legal-link--orange:focus-visible,
.site-footer .footer-legal-links a.footer-legal-link--conditions:hover,
.site-footer .footer-legal-links a.footer-legal-link--conditions:focus-visible {
    color: var(--orange);
    text-shadow: 0 0 12px rgba(255, 90, 23, 0.3);
}

/* Navbar logo — rotation 360 + zoom premium */
.brand-mark {
    transform-origin: center;
}

.brand-mark img {
    transform-origin: center;
    transition:
        transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 720ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, filter;
}

.brand-mark:hover img,
.brand-mark:focus-visible img {
    transform: rotate(360deg) scale(1.04);
    filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.42));
}

@media (prefers-reduced-motion: reduce) {
    .brand-mark img {
        transition: filter 220ms ease;
    }

    .brand-mark:hover img,
    .brand-mark:focus-visible img {
        transform: scale(1.04);
    }
}

/* Navbar logo — rotation horizontale 3D au clic */
.brand-mark {
    perspective: 900px;
}

.brand-mark img {
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.brand-mark.is-logo-clicking img {
    animation: logoClickFlip 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes logoClickFlip {
    0% {
        transform: rotateY(0deg) scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }

    45% {
        transform: rotateY(180deg) scale(1.04);
        filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.45));
    }

    100% {
        transform: rotateY(360deg) scale(1);
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.28));
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-mark.is-logo-clicking img {
        animation: none;
    }
}

/* Navbar logo — rotation horizontale 3D au clic */
.brand-mark {
    perspective: 900px;
}

.brand-mark img {
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.brand-mark.is-logo-clicking img {
    animation: logoClickFlip 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes logoClickFlip {
    0% {
        transform: rotateY(0deg) scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }

    45% {
        transform: rotateY(180deg) scale(1.04);
        filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.45));
    }

    100% {
        transform: rotateY(360deg) scale(1);
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.28));
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-mark.is-logo-clicking img {
        animation: none;
    }
}
/* Production V2 */
.production-v2 {
    position: relative;
    overflow: clip;
    background: #000000;
}

.production-v2__hero {
    min-height: clamp(560px, 72vh, 840px);
    display: grid;
    align-content: center;
    isolation: isolate;
}

.production-v2__hero-copy {
    position: relative;
    z-index: 1;
    margin: -240px auto 0;
}

.production-v2__arrival,
.production-v2__configurations,
.production-v2__equipment,
.production-v2__formats {
    width: min(1520px, calc(100% - clamp(44px, 8vw, 150px)));
    margin: 0 auto;
    scroll-margin-top: clamp(150px, 18vh, 190px);
}

/* Le showreel s'intercalait entre le hero et cette section, et c'est sa marge
   basse qui creait tout l'ecart -- ni le hero ni la section n'en portent. Sans
   cette reprise, "01 / Arrivee" venait se coller au texte du hero. */
.production-v2__arrival {
    margin-top: clamp(110px, 12vw, 190px);
}

.production-page-nav {
    --production-nav-active-offset: 0px;
    position: fixed;
    z-index: 18;
    top: 50%;
    left: clamp(10px, 1.4vw, 26px);
    display: none;
    box-sizing: border-box;
    inline-size: 54px;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: visible;
    isolation: isolate;
    border: 1px solid rgba(253, 246, 237, 0.2);
    border-radius: 999px;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.16), transparent 30%),
        linear-gradient(165deg, rgba(253, 246, 237, 0.07), rgba(12, 14, 18, 0.12) 48%, rgba(255, 94, 14, 0.055)),
        rgba(5, 8, 12, 0.12);
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.34),
        inset -1px -1px 0 rgba(255, 94, 14, 0.13),
        inset 0 0 28px rgba(253, 246, 237, 0.055),
        0 20px 48px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
    transform: translateY(-50%);
}

.production-page-nav::before,
.production-page-nav::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.production-page-nav::before {
    inset: 2px;
    border-radius: inherit;
    background: linear-gradient(105deg, rgba(253, 246, 237, 0.2), transparent 28% 72%, rgba(253, 246, 237, 0.08));
}

.production-page-nav::after {
    inset: 1px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 22% 14%, rgba(255, 94, 14, 0.08), transparent 46%),
        radial-gradient(circle at 78% 86%, rgba(36, 91, 255, 0.05), transparent 48%);
}

.production-page-nav:has(> a:nth-of-type(2)[aria-current="location"]) {
    --production-nav-active-offset: 50px;
}

.production-page-nav:has(> a:nth-of-type(3)[aria-current="location"]) {
    --production-nav-active-offset: 100px;
}

.production-page-nav:has(> a:nth-of-type(4)[aria-current="location"]) {
    --production-nav-active-offset: 150px;
}

.production-page-nav__bubble {
    position: absolute;
    z-index: 1;
    top: 8px;
    left: 50%;
    width: 34px;
    height: 34px;
    pointer-events: none;
    border: 1px solid rgba(253, 246, 237, 0.24);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.28), transparent 25%),
        linear-gradient(145deg, rgba(253, 246, 237, 0.09), rgba(253, 246, 237, 0.025) 58%, rgba(255, 94, 14, 0.07));
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.28),
        inset -1px -1px 8px rgba(36, 91, 255, 0.035),
        0 0 14px rgba(255, 94, 14, 0.14);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    transform: translateX(-50%) translateY(var(--production-nav-active-offset)) scale(1);
    transition:
        transform 706ms cubic-bezier(0.18, 1.37, 0.32, 1),
        box-shadow 220ms ease,
        filter 220ms ease;
    will-change: transform;
}

.production-page-nav.is-moving .production-page-nav__bubble {
    filter: brightness(1.12) saturate(1.15);
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.34),
        inset -1px -1px 8px rgba(36, 91, 255, 0.045),
        0 0 22px rgba(255, 94, 14, 0.33);
    transform: translateX(-50%) translateY(var(--production-nav-active-offset)) scale(0.86, 1.16);
}

.production-page-nav a {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 54px;
    min-width: 54px;
    min-height: 50px;
    display: grid;
    place-items: center;
    padding: 7px 0;
    border-radius: 999px;
    color: rgba(253, 246, 237, 0.58);
    font-family: "Creato", "Coolvetica", Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms ease;
}

.production-page-nav__dot {
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 12px rgba(255, 94, 14, 0.48);
    transition: box-shadow 180ms ease, background-color 180ms ease, filter 180ms ease;
}

.production-page-nav__label {
    position: absolute;
    left: calc(100% + 9px);
    top: 50%;
    min-width: 116px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    pointer-events: none;
    border: 1px solid rgba(253, 246, 237, 0.2);
    border-radius: 999px;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.2), transparent 38%),
        linear-gradient(120deg, rgba(253, 246, 237, 0.07), rgba(7, 9, 13, 0.16) 52%, rgba(255, 94, 14, 0.055));
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.28),
        inset -1px -1px 0 rgba(255, 94, 14, 0.1),
        0 12px 30px rgba(0, 0, 0, 0.26);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    backdrop-filter: blur(26px) saturate(160%);
    text-align: center;
    opacity: 0;
    transform: translate(-7px, -50%);
    transition: opacity 180ms ease 40ms, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.production-page-nav a:hover,
.production-page-nav a:focus-visible,
.production-page-nav a[aria-current="location"] {
    color: var(--cream);
}

.production-page-nav a:hover .production-page-nav__label,
.production-page-nav a:focus-visible .production-page-nav__label,
.production-page-nav:focus-within a[aria-current="location"] .production-page-nav__label {
    opacity: 1;
    transform: translate(0, -50%);
}

.production-page-nav a:hover .production-page-nav__dot,
.production-page-nav a:focus-visible .production-page-nav__dot {
    background: #ff7a33;
    box-shadow: 0 0 15px rgba(255, 94, 14, 0.66);
    filter: brightness(1.08);
}

.production-page-nav a[aria-current="location"] .production-page-nav__dot {
    background: #e53935;
    box-shadow: 0 0 15px rgba(229, 57, 53, 0.68);
}

.production-page-nav a:focus-visible {
    outline: 2px solid var(--cream);
    outline-offset: 2px;
}

.postprod-page-nav {
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.16), transparent 30%),
        linear-gradient(165deg, rgba(253, 246, 237, 0.07), rgba(8, 12, 24, 0.14) 48%, rgba(36, 91, 255, 0.075)),
        rgba(4, 8, 18, 0.14);
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.34),
        inset -1px -1px 0 rgba(36, 91, 255, 0.18),
        inset 0 0 28px rgba(86, 132, 255, 0.07),
        0 20px 48px rgba(0, 0, 0, 0.3);
}

.postprod-page-nav::after {
    background:
        radial-gradient(circle at 22% 14%, rgba(124, 162, 255, 0.12), transparent 46%),
        radial-gradient(circle at 78% 86%, rgba(36, 91, 255, 0.09), transparent 48%);
}

.postprod-page-nav .production-page-nav__bubble {
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.3), transparent 25%),
        linear-gradient(145deg, rgba(124, 162, 255, 0.12), rgba(253, 246, 237, 0.025) 58%, rgba(36, 91, 255, 0.11));
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.28),
        inset -1px -1px 8px rgba(36, 91, 255, 0.09),
        0 0 15px rgba(36, 91, 255, 0.22);
}

.postprod-page-nav.is-moving .production-page-nav__bubble {
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.34),
        inset -1px -1px 8px rgba(36, 91, 255, 0.12),
        0 0 22px rgba(36, 91, 255, 0.42);
}

.postprod-page-nav .production-page-nav__dot {
    background: #245bff;
    box-shadow: 0 0 12px rgba(36, 91, 255, 0.54);
}

.postprod-page-nav .production-page-nav__label {
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.2), transparent 38%),
        linear-gradient(120deg, rgba(124, 162, 255, 0.08), rgba(7, 9, 18, 0.18) 52%, rgba(36, 91, 255, 0.075));
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.28),
        inset -1px -1px 0 rgba(36, 91, 255, 0.14),
        0 12px 30px rgba(0, 0, 0, 0.26);
}

.postprod-page-nav a:hover .production-page-nav__dot,
.postprod-page-nav a:focus-visible .production-page-nav__dot {
    background: #7ca2ff;
    box-shadow: 0 0 16px rgba(36, 91, 255, 0.72);
}

.postprod-page-nav a[aria-current="location"] .production-page-nav__dot {
    background: #e53935;
    box-shadow: 0 0 15px rgba(229, 57, 53, 0.68);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .production-page-nav {
        background: rgba(5, 7, 12, 0.92);
    }

    .production-page-nav__bubble,
    .production-page-nav__label {
        background: rgba(12, 16, 24, 0.96);
    }
}

.production-next-step {
    position: relative;
    z-index: 2;
    width: min(1520px, calc(100% - clamp(44px, 8vw, 150px)));
    margin: clamp(24px, 4vw, 56px) auto clamp(92px, 10vw, 150px);
    display: flex;
    justify-content: center;
}

.production-next-step__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 62px;
    padding: 0 clamp(28px, 4vw, 54px);
    overflow: hidden;
    border-radius: 4px;
    background: var(--orange);
    color: var(--white);
    font-family: "Creato", "Coolvetica", Arial, sans-serif;
    font-size: clamp(1rem, 1.3vw, 1.24rem);
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34), 0 0 26px rgba(255, 94, 14, 0.18);
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.production-next-step__button:visited,
.production-next-step__button:hover,
.production-next-step__button:focus-visible,
.production-next-step__button:active {
    color: var(--white);
}

.production-next-step__button::after {
    content: "";
    position: absolute;
    inset: -40% -80%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.36) 50%, transparent 58%);
    transform: translateX(-42%) skewX(-18deg);
}

.production-next-step__button:hover,
.production-next-step__button:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.38), 0 0 34px rgba(255, 94, 14, 0.24);
}

.production-next-step__button:hover::after,
.production-next-step__button:focus-visible::after {
    animation: production-cta-sheen 780ms cubic-bezier(0.16, 1, 0.3, 1);
}

.production-next-step__button:active {
    transform: translateY(1px);
    box-shadow: inset 0 3px 8px rgba(72, 22, 2, 0.38), 0 10px 20px rgba(0, 0, 0, 0.28);
}

@keyframes production-cta-sheen {
    0% {
        opacity: 0;
        transform: translateX(-42%) skewX(-18deg);
    }

    24%,
    72% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(42%) skewX(-18deg);
    }
}

.production-v2__section-heading {
    width: 100%;
    max-width: 900px;
    margin-bottom: clamp(46px, 6vw, 88px);
}

.production-v2__arrival > .production-v2__section-heading,
.production-v2__formats > .production-v2__section-heading {
    margin-left: calc((100% - min(1760px, calc(100vw - 24px))) / 2);
}

.production-v2__arrival .process-kicker,
.production-v2__configurations .process-kicker,
.production-v2__equipment .process-kicker {
    white-space: nowrap;
}

.production-v2__section-heading h2,
.production-v2__formats h2 {
    margin: 0 0 20px;
    font-family: "Creato", "Coolvetica", Arial, sans-serif;
    font-size: clamp(2.35rem, 4.3vw, 5rem);
    line-height: 0.98;
}

.production-v2__section-heading > p:last-child,
.production-v2__formats > div > p:last-child {
    max-width: 760px;
    color: rgba(253, 246, 237, 0.66);
}

.production-v2__steps-wrap {
    position: relative;
    isolation: isolate;
    padding-bottom: clamp(46px, 5vw, 80px);
}

.production-v2__steps {
    --arrival-gap: clamp(28px, 3.2vw, 52px);
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--arrival-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.production-v2__arrival .production-v2__section-heading {
    margin-bottom: clamp(24px, 2.5vw, 38px);
}

.production-v2__configurations .production-v2__section-heading h2 {
    white-space: nowrap;
}

.production-v2__step-path {
    position: absolute;
    z-index: 0;
    inset: 0 0 clamp(46px, 5vw, 80px);
    width: 100%;
    /* height doit rester explicite : un SVG sans hauteur declaree retombe
       sur son ratio intrinseque (viewBox 100x100 = 1:1) et se limite a un
       carre, au lieu de s'etirer entre les insets. Mais 100% inclurait le
       padding-bottom du wrapper et ferait courir le trait sous la derniere
       carte : on le retranche. */
    height: calc(100% - clamp(46px, 5vw, 80px));
    overflow: visible;
    pointer-events: none;
}

/* Le trace mobile est decoupe en un segment par interstice (voir
   layoutMobileSerpentine dans production-visuals.js) : chaque bout est une
   vraie extremite de chemin, donc arrondie, et non plus une coupe nette par
   le bord d'une carte. */
.production-v2__step-path--mobile path {
    stroke-linecap: round;
}

.production-v2__step-path--mobile .production-v2__step-path-base {
    stroke: rgba(36, 91, 255, 0.55);
    filter: drop-shadow(0 0 4px rgba(36, 91, 255, 0.38));
}

/* Le "runner" (trait plus large et plus vif, anime en pointilles pour figurer
   un point qui parcourt le trace) n'est masque que sous prefers-reduced-motion.
   Sur les pastilles mobiles il se superposait exactement a la base, doublant
   chaque segment d'un second trait lumineux. Les noeuds de constellation sont
   masques pour la meme raison : leurs coordonnees sont normalisees sur le
   viewBox 100x100 d'origine, alors que le viewBox mobile est desormais calcule
   en pixels reels - ils se retrouvaient tasses en haut du trace. */
.production-v2__step-path--mobile .production-v2__step-path-runner,
.production-v2__step-path--mobile .production-v2__constellation-nodes {
    display: none;
}

.production-v2__step-path--tablet,
.production-v2__step-path--mobile {
    display: none;
}

.production-v2__step-path path {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.production-v2__step-path-base {
    stroke: rgba(36, 91, 255, 0.4);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px rgba(36, 91, 255, 0.22));
}

.production-v2__step-path-runner {
    stroke: #245bff;
    stroke-width: 13;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 7 93;
    opacity: 0.98;
    filter: drop-shadow(0 0 5px rgba(36, 91, 255, 0.74));
    animation: production-step-runner 9.2s linear infinite;
    animation-play-state: paused;
}

.production-v2__constellation-nodes circle {
    fill: rgba(36, 91, 255, 0.58);
    stroke: rgba(176, 201, 255, 0.78);
    stroke-width: 0.22;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 2px rgba(36, 91, 255, 0.54));
    transform-box: fill-box;
    transform-origin: center;
    animation: production-constellation-node 9.2s ease-in-out infinite;
    animation-delay: calc(var(--node-index) * 0.891s);
    animation-play-state: paused;
}

.production-v2__arrival.is-serpentine-active .production-v2__step-path-runner,
.production-v2__arrival.is-serpentine-active .production-v2__constellation-nodes circle {
    animation-play-state: running;
}

@keyframes production-step-runner {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes production-constellation-node {
    0%,
    9%,
    100% {
        opacity: 0.58;
        transform: scale(1);
    }

    3% {
        opacity: 1;
        transform: scale(1.5);
    }
}

.production-v2__step {
    --production-tilt-rx: 0deg;
    --production-tilt-ry: 0deg;
    --production-tilt-scale: 1;
    --production-tilt-light-x: 50%;
    --production-tilt-light-y: 50%;
    z-index: 1;
    position: relative;
    min-height: clamp(210px, 14.3vw, 223px);
    overflow: hidden;
    border: 1px solid rgba(253, 246, 237, 0.13);
    background: #08080a;
    isolation: isolate;
    transform: perspective(1000px) rotateX(var(--production-tilt-rx)) rotateY(var(--production-tilt-ry)) scale(var(--production-tilt-scale));
    transform-style: preserve-3d;
    transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 220ms ease;
}

.production-v2__step::before,
.production-material__camera-grid .production-material__item::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: 0.46;
    background: radial-gradient(circle at var(--production-tilt-light-x) var(--production-tilt-light-y), rgba(253, 246, 237, 0.13), transparent 42%);
}

.production-v2__step::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.16) 52%, rgba(0, 0, 0, 0.96));
}

.production-v2__step img {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.82;
    filter: saturate(0.72) brightness(0.72);
    transition: transform 760ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 560ms ease;
}

.production-v2__step > div {
    position: absolute;
    z-index: 1;
    inset: auto clamp(16px, 1.6vw, 26px) clamp(16px, 1.5vw, 24px);
}

.production-v2__step span,
.production-v2__configuration span {
    display: block;
    margin-bottom: 10px;
    color: var(--orange);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.production-v2__step h3,
.production-v2__configuration h3,
.production-v2__equipment-card h3 {
    margin: 0 0 12px;
    color: var(--cream);
    font-family: "Creato", "Coolvetica", Arial, sans-serif;
    font-size: clamp(1.35rem, 2vw, 2.2rem);
    line-height: 1;
}

.production-v2__step p,
.production-v2__configuration p,
.production-v2__equipment-card p,
.production-v2__equipment-card li,
.production-v2__format-grid p {
    color: rgba(253, 246, 237, 0.68);
}

.production-v2__step:hover img,
.production-v2__step:focus-within img {
    transform: scale(1.035);
    filter: saturate(0.88) brightness(0.82);
}

.production-v2__landscape {
    width: 100%;
    height: clamp(320px, 38vw, 650px);
    margin: 0 0 clamp(42px, 5vw, 72px);
    overflow: hidden;
}

.production-v2__landscape img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(0.82) contrast(1.06) brightness(0.8);
}

.process-page--production .preprod-standalone-cta {
    padding-block: 30px;
    margin-top: 75px;
}

.process-page--production .preprod-standalone-cta .button {
    border-color: transparent;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34), 0 0 24px rgba(255, 94, 14, 0.18);
}

.production-v2__configurations,
.production-v2__equipment {
    --production-equipment-width: min(1408px, calc(100vw - clamp(44px, 8vw, 150px)));
    padding: clamp(110px, 12vw, 190px) 0;
}

.production-v2__configurations {
    width: min(1760px, calc(100% - 24px));
    padding-top: clamp(30px, calc(12vw - 100px), 90px);
    padding-bottom: clamp(10px, calc(12vw - 100px), 90px);
}

.production-v2__equipment {
    width: min(1760px, calc(100% - 24px));
    padding-top: clamp(10px, calc(12vw - 100px), 90px);
}

.production-v2__configuration-list {
    display: grid;
    gap: clamp(18px, 2.2vw, 34px);
}

.production-v2__configuration {
    min-height: clamp(260px, 25vw, 390px);
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(340px, 0.9fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(253, 246, 237, 0.13);
    background: linear-gradient(120deg, rgba(36, 91, 255, 0.08), rgba(255, 94, 14, 0.04) 65%, rgba(255, 255, 255, 0.02));
}

.production-v2__configuration:nth-child(even) {
    grid-template-columns: minmax(340px, 0.9fr) minmax(280px, 1fr);
}

.production-v2__configuration:nth-child(even) > div {
    order: 2;
}

.production-v2__configuration > div {
    padding: clamp(30px, 5vw, 82px);
}

.production-v2__configuration > img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    filter: grayscale(0.76) contrast(1.05) brightness(0.74);
}

.production-material {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(18px, 2vw, 30px);
    width: var(--production-equipment-width);
    max-width: 100%;
    margin-inline: auto;
}

.production-material__group {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 58px);
    border-radius: 8px;
    border: 1px solid rgba(92, 151, 255, 0.26);
    background: linear-gradient(145deg, rgba(36, 91, 255, 0.09), rgba(255, 255, 255, 0.025));
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    backdrop-filter: blur(14px) saturate(1.06);
}

.production-optics-shell {
    position: relative;
    width: var(--production-equipment-width);
    max-width: 100%;
    margin-inline: auto;
    min-width: 0;
}

/* Cadre visuel UNIQUE et fixe (meme principe que .production-config-stage) :
   avant, chaque carte portait sa propre bordure/fond, donc en cours de
   glissement on voyait deux boites entierement dessinees se toucher ("les
   blocs sont colles"). Le cadre est deplace ici, les cartes deviennent
   transparentes (voir .production-material__group--optics) : une seule
   fenetre fixe, seuls l'image et le texte defilent a l'interieur. */
.production-optics-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(36, 91, 255, 0.55);
    background: linear-gradient(145deg, rgba(6, 8, 14, 0.94), rgba(8, 10, 16, 0.88));
    box-shadow: inset 0 0 0 1px rgba(36, 91, 255, 0.13);
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    backdrop-filter: blur(14px) saturate(1.06);
}

/* Piste a defilement natif, meme mecanique que .production-config-track :
   scroll-snap au lieu du fondu-enchaine gere en JS (pointerdown/pointerup +
   classes is-exiting/is-entering, desormais retire) - glissement plus fluide
   au doigt, coherent avec le carrousel de configurations juste au-dessus. */
.production-optics-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y pinch-zoom;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.production-optics-track::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

.production-optics-track:focus-visible {
    outline: 2px solid rgba(253, 246, 237, 0.82);
    outline-offset: -4px;
}

/* Le JS place le scroll sur le premier vrai slide (apres le clone de
   bouclage) au chargement : le cache le temps que ce positionnement soit
   fait, sinon on voit une image furtive du clone de fin avant le saut.
   Meme protection que .production-config-shell:not([data-production-ready])
   .production-config-stage. */
.production-optics-shell:not([data-production-ready]) .production-optics-stage {
    visibility: hidden;
}

.production-material__group--optics {
    --optics-card-rx: 0deg;
    --optics-card-ry: 0deg;
    --optics-image-rx: 0deg;
    --optics-image-ry: 0deg;
    --optics-image-scale: 1;
    --optics-card-scale: 1;
    position: relative;
    min-width: 0;
    /* .production-optics-media est en position absolue (voir plus bas) : elle
       ne contribue plus a la hauteur de la grille, qui s'effondrerait sinon
       sur le seul contenu de "copy". Cette hauteur restaure un gabarit de
       carte comparable a l'ancien calcul (media + son padding). Toutes les
       cartes partagent cette meme formule, donc la piste (grid-auto-flow:
       column) se cale naturellement dessus sans hauteur commune a calculer
       a la main (contrairement au carrousel de configurations, dont les
       cartes varient en contenu). */
    min-height: clamp(380px, 38vw, 560px);
    /* Chaque carte est un slide plein-largeur de .production-optics-track,
       scroll-snap-align la cale au defilement natif (voir ce selecteur). */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    grid-template-areas: "heading heading" "copy media";
    grid-template-columns: minmax(260px, 0.78fr) minmax(360px, 1.22fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: clamp(10px, 1.8vw, 26px);
    transform: perspective(1400px) rotateX(var(--optics-card-rx)) rotateY(var(--optics-card-ry)) scale(var(--optics-card-scale));
    /* Flattened so the tilting product image inside is not rasterised twice
       through two nested 3D contexts. */
    transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
    padding-block: clamp(18px, 2vw, 30px);
    isolation: isolate;
    overflow: visible;
    /* Le cadre (bordure/fond/flou) vit desormais sur .production-optics-stage,
       carte partagee par les 7 slides - voir son commentaire. Sans ce reset,
       chaque carte gardait le cadre herite de .production-material__group et
       on voyait deux boites entieres se toucher pendant le glissement. */
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.production-material__group--optics::before {
    content: none;
}

.production-optics-heading {
    grid-area: heading;
    align-self: start;
}

.production-material__group--optics::after {
    content: none;
}

.production-optics-copy {
    grid-area: copy;
    padding-inline: clamp(34px, 4vw, 58px) 0;
}

.production-optics-media {
    /* Positionnee dans le cadre rouge dessine par Ren, en pourcentage de la
       carte plutot que dans le flux de la grille (colonne "media") : plus
       simple et plus fiable pour caler une zone precise. */
    position: absolute;
    left: 52%;
    top: 6%;
    width: 30%;
    height: 87%;
    display: grid;
    place-items: center;
    min-width: 0;
    overflow: visible;
}

.production-optics-media-viewport,
.production-optics-media-slot {
    position: relative;
    display: grid;
    place-items: center;
    /* La piste implicite (auto) d'une grille se dimensionne sur le contenu,
       pas sur la hauteur explicite du conteneur : avec un enfant remplace
       (l'image) et object-fit, elle se calait sur le ratio intrinseque de
       l'image plutot que sur les 100% attendus, et le height:100% de l'image
       se resolvait alors contre cette piste gonflee - cercle vicieux qui
       deborde largement avec des optiques recadrees en portrait. En fixant
       explicitement la piste a 100%, elle vaut la hauteur reelle du
       conteneur, plus de calcul circulaire. */
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
}

.production-optics-media-slot {
    /* Le cadrage precis vient maintenant de .production-optics-media
       (position absolue calee sur le repere de Ren) : plus besoin de
       decalage ici. */
    --production-optics-offset-y: 0px;
    --production-optics-offset-x: 0px;
    transform: translate(var(--production-optics-offset-x), var(--production-optics-offset-y));
    transform-origin: center;
}

.production-optics-product {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    filter: contrast(1.06) saturate(0.94) drop-shadow(0 24px 28px rgba(0, 0, 0, 0.46));
    transform: perspective(1000px) rotateX(var(--optics-image-rx)) rotateY(var(--optics-image-ry)) scale(var(--optics-image-scale));
    /* No preserve-3d: this is a leaf <img> with nothing to lay out in 3D, and
       it forced a 3D context that rasterised the image once then resampled
       that stale texture on every tilt frame - which read as blur. */
    backface-visibility: hidden;
    will-change: transform;
    transition: opacity 320ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1), filter 380ms ease;
}

/* :hover/:focus-within non cantonnes a (hover: hover) restaient visibles en
   permanence apres un tap sur mobile (halo bleu/orange fantome, tabindex="0"
   sur la carte gardant le focus tant qu'on ne touche pas ailleurs). */
@media (hover: hover) and (pointer: fine) {
    .production-material__group--optics:hover .production-optics-product,
    .production-material__group--optics:focus-within .production-optics-product {
        --optics-image-scale: 1;
        filter: contrast(1.1) saturate(0.97) drop-shadow(-3px 0 11px rgba(36, 91, 255, 0.3)) drop-shadow(3px 0 11px rgba(255, 94, 14, 0.24)) drop-shadow(0 24px 28px rgba(0, 0, 0, 0.46));
    }
}

.production-material__group--optics:active .production-optics-product {
    --optics-image-scale: 1;
}

.production-optics-product[data-optics-id="canon-macro-100mm"] {
    filter: contrast(1.14) saturate(0.96) drop-shadow(0 24px 28px rgba(0, 0, 0, 0.46));
}

/* This lens needs more contrast than the others, so its hover has to keep
   that stronger grade instead of falling back to the shared 1.1. */
@media (hover: hover) and (pointer: fine) {
    .production-material__group--optics:hover .production-optics-product[data-optics-id="canon-macro-100mm"],
    .production-material__group--optics:focus-within .production-optics-product[data-optics-id="canon-macro-100mm"] {
        filter: contrast(1.16) saturate(0.97) drop-shadow(-3px 0 11px rgba(36, 91, 255, 0.3)) drop-shadow(3px 0 11px rgba(255, 94, 14, 0.24)) drop-shadow(0 24px 28px rgba(0, 0, 0, 0.46));
    }
}

.production-optics-copy {
    transition: opacity 320ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.production-optics-controls {
    position: absolute;
    z-index: 3;
    inset-block: 0;
    /* Les fleches vivent dans la gouttiere, en dehors du bloc optiques. Sur
       un ecran de bureau la place ne manque pas, mais sur un portable (fenetre
       ~1536px avec l'echelle Windows a 125 %) le bloc occupe presque toute la
       largeur : la gouttiere sortait de l'ecran et les fleches avec. Le max()
       borne la sortie a la largeur reellement disponible -- (100% - 100vw) / 2
       est la distance du bord du bloc au bord de la fenetre, les 16px
       laissent une marge en absorbant la barre de defilement comprise dans
       100vw. */
    inset-inline: max(
        calc(-1 * var(--production-carousel-control-gutter, clamp(108px, 7vw, 128px))),
        calc((100% - 100vw) / 2 + 16px)
    );
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.production-optics-controls .production-config-arrow {
    width: 66px;
    height: 66px;
}

.production-config-stage {
    width: var(--production-equipment-width);
    max-width: 100%;
    margin-inline: auto;
}

.production-material__group--cameras {
    border-color: rgba(115, 126, 170, 0.3);
    background: rgba(5, 7, 11, 0.88);
}

.production-material__group--optics > .production-material__heading .process-kicker {
    color: #245bff;
}

.production-material__group--cameras > .production-material__heading .process-kicker {
    color: rgba(253, 246, 237, 0.62);
}

.production-material__group--extras {
    border-color: rgba(255, 94, 14, 0.22);
    background: linear-gradient(145deg, rgba(255, 94, 14, 0.055), rgba(255, 255, 255, 0.02));
}

.production-material__extras-title span {
    display: block;
}

.production-material__heading {
    max-width: 720px;
}

.production-material__heading h3,
.production-optics-copy h3,
.production-material__item h4,
.production-material__extras h4 {
    margin: 0 0 12px;
    color: var(--cream);
    font-family: "Creato", "Coolvetica", Arial, sans-serif;
}

.production-material__heading h3,
.production-optics-copy h3 {
    font-size: clamp(1.8rem, 3vw, 3.6rem);
    line-height: 1;
}

.production-optics-title {
    display: grid;
    gap: 0.06em;
}

.production-optics-title__brand,
.production-optics-title__focal {
    display: block;
}

.production-optics-title__brand {
    font-size: 0.62em;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(253, 246, 237, 0.72);
}

.production-optics-title__focal {
    line-height: 0.96;
}

.production-optics-title--single {
    display: block;
}

.production-optics-badge {
    display: inline-flex;
    width: max-content;
    align-items: center;
    margin-top: 0.34em;
    /* Padding volontairement asymetrique : en majuscules avec line-height:1,
       les glyphes n'ont pas de jambage sous la ligne de base, donc l'espace
       de descente reserve par la police reste vide en bas de la boite de
       ligne et le texte parait remonte dans le badge malgre un padding
       symetrique. Compense en decalant un peu de padding du bas vers le
       haut. */
    padding: 0.42em 0.58em 0.26em;
    border: 1px solid rgba(36, 91, 255, 0.42);
    border-radius: 4px;
    background: rgba(36, 91, 255, 0.14);
    color: #b9c8ff;
    font-size: clamp(0.72rem, 0.8vw, 0.86rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.production-optics-badge--macro {
    border-color: rgba(72, 210, 124, 0.42);
    background: rgba(72, 210, 124, 0.13);
    color: #b8f5cb;
}

.production-optics-badge--anamorphic {
    border-color: rgba(36, 91, 255, 0.46);
    background: rgba(36, 91, 255, 0.15);
    color: #bfd0ff;
}

.production-optics-badge--cine {
    border-color: rgba(255, 94, 14, 0.5);
    background: rgba(255, 94, 14, 0.15);
    color: #ffc09d;
}

.production-optics-badge--standard {
    border-color: rgba(70, 172, 255, 0.48);
    background: rgba(70, 172, 255, 0.14);
    color: #b8e1ff;
}

.production-optics-badge--telephoto {
    border-color: rgba(224, 176, 62, 0.5);
    background: rgba(224, 176, 62, 0.14);
    color: #f6dda1;
}

/* Points de pagination : memes regles que .testimonial-dots (meme besoin,
   meme protection iOS - voir son commentaire pour le survol qui reste colle
   au toucher). Caches sur bureau, ou les fleches restent visibles. */
.production-optics-dots {
    display: none;
}

.production-optics-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 50%;
    appearance: none;
    background: #6e7177;
    cursor: pointer;
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.production-optics-dot.is-active {
    background: var(--orange);
    box-shadow: 0 0 11px rgba(255, 94, 14, 0.68);
}

.production-optics-dot:focus-visible {
    background: var(--orange);
    box-shadow: 0 0 11px rgba(255, 94, 14, 0.68);
    outline: none;
    transform: scale(1.14);
}

@media (hover: hover) and (pointer: fine) {
    .production-optics-dot:hover {
        background: var(--orange);
        box-shadow: 0 0 11px rgba(255, 94, 14, 0.68);
        outline: none;
        transform: scale(1.14);
    }
}

@media (max-width: 980px) {
    .production-optics-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        width: max-content;
        margin: 6px auto 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .production-optics-dot {
        transition: none;
    }
}

.production-material__heading > p:last-child,
.production-optics-copy > p:last-child,
.production-material__item p,
.production-material__extras p {
    margin-bottom: 0;
    color: rgba(253, 246, 237, 0.66);
}

.production-material__camera-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);
    margin-top: clamp(28px, 4vw, 48px);
}

.production-material__item,
.production-material__extras li {
    padding: clamp(20px, 2.5vw, 32px);
    border: 1px solid rgba(253, 246, 237, 0.11);
    background: rgba(2, 4, 9, 0.42);
}

.production-material__camera-grid .production-material__item {
    --production-tilt-rx: 0deg;
    --production-tilt-ry: 0deg;
    --production-tilt-scale: 1;
    --production-tilt-light-x: 50%;
    --production-tilt-light-y: 50%;
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px, 0.9fr) minmax(190px, 1.1fr);
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
    overflow: hidden;
    isolation: isolate;
    transition: border-color 220ms ease;
}

.production-material__camera-grid .production-material__item > * {
    position: relative;
    z-index: 1;
}

@media (hover: none) {
    [data-production-tilt]:active {
        --production-tilt-scale: 0.992;
    }
}

.production-material__camera-grid .production-material__item img {
    width: calc(100% - 24px);
    max-width: 100%;
    height: clamp(180px, 18vw, 260px);
    margin: 12px auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.44));
    transform: perspective(1000px) rotateX(var(--production-tilt-rx)) rotateY(var(--production-tilt-ry)) scale(var(--production-tilt-scale));
    backface-visibility: hidden;
    will-change: transform;
    transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 320ms ease;
}

.production-material__camera-grid .production-material__item:hover img {
    --production-tilt-scale: 1.065;
    filter: contrast(1.04) drop-shadow(-3px 0 10px rgba(36, 91, 255, 0.28)) drop-shadow(3px 0 10px rgba(255, 94, 14, 0.2)) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.44));
}

.production-material__camera-grid .production-material__item:active img {
    --production-tilt-scale: 0.98;
    filter: drop-shadow(0 9px 14px rgba(0, 0, 0, 0.4));
}

.production-material__item h4,
.production-material__extras h4 {
    font-size: clamp(1.15rem, 1.6vw, 1.55rem);
}

.production-material__extras {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
    margin: clamp(28px, 4vw, 48px) 0 0;
    padding: 0;
    list-style: none;
}

.production-material__extras .production-extra-card {
    --extra-image-rx: 0deg;
    --extra-image-ry: 0deg;
    --extra-image-scale: 1;
    position: relative;
    min-height: clamp(300px, 25vw, 360px);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 14px;
    overflow: hidden;
    border-radius: 6px;
    isolation: isolate;
    transition: border-color 240ms ease, background-color 240ms ease;
}

.production-extra-card::before {
    content: none;
}

.production-extra-card:hover,
.production-extra-card:focus-visible {
    border-color: rgba(253, 246, 237, 0.24);
    background: rgba(8, 10, 14, 0.68);
}

.production-extra-card:focus-visible {
    outline: 2px solid rgba(253, 246, 237, 0.76);
    outline-offset: -5px;
}

.production-extra-card__stage {
    position: relative;
    min-height: 220px;
    display: grid;
    place-items: center;
}

.production-extra-card__stage > img,
.production-extra-card__storage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: perspective(900px) rotateX(var(--extra-image-rx)) rotateY(var(--extra-image-ry)) scale(calc(var(--extra-image-scale) * var(--extra-image-base-scale, 1)));
    /* No preserve-3d: these are a leaf <img> and a container whose own
       children only use flat 2D translate/rotate (no translateZ) - forcing
       a 3D context here rasterised the tilted image once and resampled
       that stale texture on every tilt frame, reading as blur. */
    backface-visibility: hidden;
    will-change: transform;
    transition: opacity 360ms ease, transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 360ms ease;
}

.production-extra-card__stage > img {
    display: block;
    object-fit: contain;
    filter: none;
}

.production-extra-card__stage > img[src$="battery-sony.png"],
.production-extra-card__stage > img[src$="rgb-light.png"] {
    --extra-image-base-scale: 1.03;
}

.production-extra-card__stage > img[src$="matte-box.png"] {
    /* Recropped to near-zero transparent padding (canvas ~99% content) -
       needs its own scale, distinct from its battery/rgb-light siblings. */
    --extra-image-base-scale: 0.95;
}

.production-extra-card__stage > img[src$="camera-cage-rig.png"] {
    --extra-image-base-scale: 1.15;
}

.production-extra-card__stage > img[src$="rxtx-cutout.png"] {
    --extra-image-base-scale: 1.22;
}

.production-extra-card__stage > img[src$="monitor-atomos.png"] {
    --extra-image-base-scale: 1.18;
}

.production-extra-card__stage > img[src$="mars-400s-pro-cutout.png"] {
    --extra-image-base-scale: 1.12;
}

.production-extra-card__stage > img[src$="prism-fx.png"] {
    --extra-image-base-scale: 1.04;
}

@media (max-width: 680px) {
    .production-extra-card__stage > img[src$="camera-cage-rig.png"] {
        --extra-image-base-scale: 1.08;
    }
}

.production-extra-card__stage > p {
    position: relative;
    z-index: 2;
    max-width: 24ch;
    margin: 0;
    opacity: 0;
    color: rgba(253, 246, 237, 0.82);
    font-size: clamp(0.94rem, 1.1vw, 1.08rem);
    line-height: 1.5;
    text-align: center;
    transform: translateY(12px);
    transition: opacity 300ms ease, transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.production-extra-card:hover .production-extra-card__stage > img,
.production-extra-card:focus-visible .production-extra-card__stage > img,
.production-extra-card:hover .production-extra-card__storage,
.production-extra-card:focus-visible .production-extra-card__storage {
    opacity: 0;
    --extra-image-scale: 0.96;
}

.production-extra-card:hover .production-extra-card__stage > p,
.production-extra-card:focus-visible .production-extra-card__stage > p {
    opacity: 1;
    transform: translateY(0);
}

.production-extra-card__storage {
    filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.52));
}

.production-extra-card__storage img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72%;
    height: 72%;
    object-fit: contain;
    transform-origin: center;
}

.production-extra-card__storage img:nth-child(1) {
    transform: translate(-62%, -57%) rotate(-10deg);
    opacity: 0.58;
}

.production-extra-card__storage img:nth-child(2) {
    transform: translate(-54%, -54%) rotate(-4deg);
    opacity: 0.72;
}

.production-extra-card__storage img:nth-child(3) {
    transform: translate(-46%, -50%) rotate(4deg);
    opacity: 0.86;
}

.production-extra-card__storage img:nth-child(4) {
    transform: translate(-38%, -46%) rotate(10deg);
}

.production-v2__formats {
    position: relative;
    z-index: 1;
    display: block;
    padding: 0 0 clamp(120px, 14vw, 220px);
}

.production-v2__formats > .production-v2__section-heading {
    max-width: 100%;
}

.production-record-ui {
    position: relative;
    width: min(1180px, 100%);
    min-width: 0;
    margin-inline: auto;
    padding: 0 1px;
    overflow: hidden;
    border: 0;
    border-inline: 1px solid rgba(92, 151, 255, 0.28);
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(36, 91, 255, 0.3), rgba(253, 246, 237, 0.08) 48%, rgba(255, 94, 14, 0.2));
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.4);
}

.production-record-ui::after {
    content: "";
    position: absolute;
    inset: -55% auto -55% -26%;
    width: 34%;
    pointer-events: none;
    opacity: 0.38;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: skewX(-14deg);
    animation: production-record-sheen 7.5s ease-in-out infinite;
}

.production-record-ui__screen {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 6px;
    background: #202832;
    color: rgba(253, 246, 237, 0.86);
    font-family: "Creato", Arial, sans-serif;
}

.production-record-ui__panel {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
    padding: clamp(18px, 2.5vw, 32px);
    background:
        radial-gradient(circle at 92% 12%, rgba(255, 94, 14, 0.07), transparent 28%),
        linear-gradient(145deg, #27313b, #1c242d);
}

.production-record-ui__section {
    min-width: 0;
}

.production-record-ui__label {
    margin: 0 0 8px;
    color: rgba(253, 246, 237, 0.68);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.production-record-ui__codec,
.production-record-ui__mode,
.production-record-ui__quality,
.production-record-ui__resolutions {
    display: grid;
    gap: 6px;
}

.production-record-ui__codec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.production-record-ui__mode {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 6px;
}

.production-record-ui__quality {
    grid-template-columns: repeat(4, minmax(54px, 1fr));
    margin-top: 6px;
}

.production-record-ui[data-record-codec="prores"] .production-record-ui__quality {
    grid-template-columns: repeat(4, minmax(54px, 1fr));
    width: 100%;
}

.production-record-ui[data-record-codec="braw"][data-record-braw-mode="constant-quality"] .production-record-ui__quality {
    grid-template-columns: repeat(2, minmax(54px, 1fr));
}

.production-record-ui__resolutions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.production-record-ui__choice {
    position: relative;
    min-height: 52px;
    display: grid;
    place-content: center;
    gap: 2px;
    padding: 9px 10px;
    overflow: hidden;
    border: 1px solid rgba(253, 246, 237, 0.09);
    background: #53616d;
    color: rgba(253, 246, 237, 0.88);
    font: inherit;
    text-align: center;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.production-record-ui__choice[hidden] {
    display: none !important;
}

.production-record-ui__choice:hover {
    border-color: rgba(253, 246, 237, 0.24);
    background: #60717e;
    transform: translateY(-1px);
}

.production-record-ui__choice:active {
    transform: scale(0.97);
}

.production-record-ui__choice:disabled,
.production-record-ui__choice.is-unavailable {
    opacity: 0.4;
    border-color: rgba(253, 246, 237, 0.06);
    background: #46515b;
    color: rgba(253, 246, 237, 0.5);
    cursor: not-allowed;
    filter: grayscale(0.7) saturate(0.45);
    transform: none;
    box-shadow: none;
    pointer-events: none;
}

.production-record-ui__choice:focus-visible {
    outline: 2px solid var(--cream);
    outline-offset: -4px;
}

.production-record-ui__choice::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: transparent;
}

.production-record-ui__choice.is-selected {
    background: #627380;
    color: #fff;
    border-color: rgba(36, 91, 255, 0.72);
    box-shadow: inset 0 0 22px rgba(36, 91, 255, 0.13);
}

.production-record-ui__choice.is-selected::after {
    background: var(--blue);
    box-shadow: 0 0 12px rgba(36, 91, 255, 0.72);
}

.production-record-ui__choice strong {
    font-size: clamp(0.78rem, 1vw, 1rem);
    font-weight: 500;
}

.production-record-ui__choice small {
    color: rgba(253, 246, 237, 0.62);
    font-size: 0.66rem;
}

.production-record-ui__choice--wide {
    min-height: 64px;
    font-size: clamp(1rem, 1.35vw, 1.35rem);
}

.production-record-ui__choice--meta {
    font-size: 0.74rem;
}

@keyframes production-record-sheen {
    0%,
    58% {
        transform: translateX(0) skewX(-14deg);
    }

    82%,
    100% {
        transform: translateX(390%) skewX(-14deg);
    }
}

.production-bottom-blob {
    position: absolute;
    z-index: 0;
    right: clamp(-260px, -12vw, -110px);
    bottom: clamp(240px, 24vw, 430px);
    width: clamp(440px, 46vw, 820px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.18;
    background: #245bff;
    filter: blur(68px);
    mix-blend-mode: screen;
    transform: translate3d(0, 0, 0) scale(0.92);
    animation: production-bottom-blob 13s ease-in-out infinite alternate;
    animation-play-state: paused;
}

.production-bottom-blob.is-active {
    animation-play-state: running;
    will-change: transform, opacity;
}

@keyframes production-bottom-blob {
    0% {
        opacity: 0.14;
        transform: translate3d(0, 0, 0) scale(0.92);
    }

    48% {
        opacity: 0.22;
        transform: translate3d(-55vw, -25.9vh, 0) scale(1.04);
    }

    100% {
        opacity: 0.17;
        transform: translate3d(-17.5vw, 20.1vh, 0) scale(0.97);
    }
}

@media (min-width: 1400px) {
    .production-page-nav {
        display: flex;
    }

    .production-v2__section-heading {
        box-sizing: border-box;
        padding-left: 20px;
    }
}

@media (min-width: 901px) {
    .production-v2__arrival > .production-v2__section-heading,
    .production-v2__equipment > .production-v2__section-heading,
    .production-material__group--cameras > .production-material__heading {
        max-width: none;
    }

    .production-v2__arrival > .production-v2__section-heading h2,
    .production-v2__equipment > .production-v2__section-heading h2,
    .production-material__group--cameras > .production-material__heading h3 {
        white-space: nowrap;
    }
}

@media (max-width: 1230px) {
    .production-optics-shell {
        width: 100%;
    }

    .production-material__group--optics {
        grid-template-columns: minmax(220px, 0.7fr) minmax(330px, 1.3fr);
    }

    .production-optics-copy {
        padding-inline-start: clamp(18px, 3vw, 44px);
    }

    .production-material__group--optics:hover .production-optics-product,
    .production-material__group--optics:focus-within .production-optics-product {
        --optics-image-scale: 1;
    }

}

@media (min-width: 1231px) {
    .production-optics-product {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 900px) {
    .production-v2__arrival,
    .production-v2__configurations,
    .production-v2__equipment,
    .production-v2__formats {
        width: min(100%, calc(100% - 44px));
    }

    .production-v2__arrival > .production-v2__section-heading,
    .production-v2__formats > .production-v2__section-heading {
        margin-left: 0;
    }

    .production-v2__hero-copy {
        margin-top: -64px;
    }

    .production-v2__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .production-v2__step:nth-child(9) {
        width: calc((100% - var(--arrival-gap)) / 2);
        grid-column: 1 / -1;
        justify-self: center;
    }

    .production-v2__step-path--desktop {
        display: none;
    }

    .production-v2__step-path--tablet {
        display: block;
    }

    .production-material__group--optics {
        grid-template-areas: "heading" "copy" "media";
        grid-template-columns: 1fr;
        padding-inline: 48px;
    }

    .production-optics-copy {
        padding-inline: 0;
    }

    .production-optics-controls {
        inset-inline: -18px;
    }

    .production-optics-media {
        /* En colonne unique, retour dans le flux normal (sous le texte) :
           le positionnement absolu du cadre rouge ne vise que la mise en
           page 2 colonnes du bureau. */
        position: static;
        /* Deborde jusqu'aux bords de la carte (compense le padding-inline
           de .production-material__group--optics) : avec chaque optique
           recadree a son propre format, une largeur limitee au bloc de
           texte rendait les optiques les plus larges (17-85mm, 14mm, 50mm)
           contraintes par la largeur plutot que la hauteur - donc plus
           petites que les autres dans le meme cadre. */
        width: calc(100% + 96px);
        margin-inline: -48px;
        padding: 0;
        min-height: 0;
        height: clamp(400px, 80vw, 620px);
    }

    .production-optics-product {
        width: calc(100% - 32px);
        height: calc(100% - 32px);
    }

    .production-v2__configurations {
        padding-top: 50px;
        padding-bottom: 10px;
    }

    .production-v2__equipment {
        padding-top: 10px;
    }

    .process-page--production .preprod-standalone-cta {
        padding-block: 50px;
        margin-top: 60px;
    }

    .production-material__extras {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    /* Cartes moins hautes et padding de l'article resserre : sur 2 colonnes
       etroites, le gabarit desktop (min-height 300-360px, padding 28-58px)
       laissait des blocs bien plus hauts que larges. La largeur gagnee sur
       le padding profite directement aux deux colonnes (et donc aux images,
       dimensionnees en object-fit: contain dans leur cadre). */
    .production-material__group--extras {
        padding-inline: 16px;
    }

    /* Specificite alignee sur la regle de base (.production-material__extras
       .production-extra-card, deux classes) : un simple .production-extra-card
       ici perdait malgre l'ordre source plus tardif. */
    .production-material__extras .production-extra-card {
        min-height: 198px;
        padding: 8px;
        gap: 6px;
    }

    .production-extra-card__stage {
        min-height: 110px;
    }

    .production-material__camera-grid .production-material__item { overflow: clip; }

    .production-bottom-blob {
        right: -240px;
        bottom: 360px;
        width: clamp(420px, 78vw, 660px);
    }

    .production-v2__configuration,
    .production-v2__configuration:nth-child(even),
    .production-v2__formats {
        grid-template-columns: 1fr;
    }

    .production-v2__configuration:nth-child(even) > div {
        order: 0;
    }

    .production-v2__configuration > img {
        min-height: 340px;
    }
}

/* BMPCC 4K / 6K cote a cote sur mobile/tablette au lieu d'empilees en pleine
   largeur : chaque carte passe en colonne unique (flex), photo d'abord
   (order: -1, sans toucher au DOM ou le texte vient avant dans le HTML pour
   le SEO/la lecture au clavier), puis nom et description en dessous. */
@media (max-width: 860px) {
    .production-material__camera-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(10px, 2vw, 18px);
    }

    .production-material__camera-grid .production-material__item {
        display: flex;
        flex-direction: column;
        padding: clamp(14px, 2vw, 20px);
    }

    .production-material__camera-grid .production-material__item img {
        order: -1;
        width: 100%;
        height: clamp(120px, 30vw, 200px);
        margin: 0 0 clamp(12px, 2vw, 18px);
    }

    .production-material__item h4 {
        font-size: clamp(0.95rem, 3.6vw, 1.15rem);
    }

    .production-material__item p {
        font-size: clamp(0.8rem, 2.6vw, 0.88rem);
    }
}

@media (max-width: 620px) {
    .production-v2__arrival .process-kicker,
    .production-v2__configurations .process-kicker,
    .production-v2__equipment .process-kicker {
        white-space: normal;
    }

    .production-optics-media-slot {
        --production-optics-offset-y: 34px;
    }

    .production-v2__hero {
        min-height: 560px;
    }

    .production-v2__hero-copy {
        margin-top: -32px;
    }

    .production-v2__steps {
        grid-template-columns: 1fr;
    }

    .production-record-ui__tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .production-v2__configurations .production-v2__section-heading h2 {
        white-space: normal;
    }

    .production-record-ui__quality {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .production-record-ui[data-record-codec="prores"] .production-record-ui__quality {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
    }

    .production-record-ui__resolutions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .production-v2__step {
        min-height: clamp(250px, 76vw, 320px);
    }

    /* justify-self doit etre remis a stretch avec width/grid-column : la
       regle <=900px pose justify-self: center pour centrer la 9e carte sur
       une grille a 2 colonnes. En 1 colonne, "center" empeche l'etirement,
       et comme tout le contenu de la carte est en position: absolute (image
       et bloc de texte), il ne reste aucune largeur intrinseque : la carte
       s'effondrait a 2px (ses deux bordures), lue comme un bloc disparu
       double d'une fine barre verticale. */
    .production-v2__step:nth-child(9) {
        width: auto;
        grid-column: auto;
        justify-self: stretch;
    }

    .production-v2__step-path--tablet {
        display: none;
    }

    .production-v2__step-path--mobile {
        display: block;
    }

    .production-v2__configuration > img {
        min-height: 280px;
    }

    .production-material__extras {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .production-v2__configurations {
        padding-top: 70px;
        padding-bottom: 10px;
    }

    .production-v2__equipment {
        padding-top: 10px;
    }

    .process-page--production .preprod-standalone-cta {
        padding-block: 65px;
        margin-top: 40px;
    }

    .production-material__group--optics {
        grid-template-areas: "heading" "copy" "media";
        padding-inline: 54px;
    }

    .production-optics-media {
        height: clamp(340px, 100vw, 480px);
        padding-block: 12px 28px;
        transform: none;
        /* padding-inline de la carte passe a 54px a ce palier : le debord
           doit suivre pour rester colle aux bords. */
        width: calc(100% + 108px);
        margin-inline: -54px;
    }

    .production-optics-controls {
        inset-inline: -8px;
    }

    .production-optics-controls .production-config-arrow {
        width: 49px;
        height: 49px;
    }

    .production-bottom-blob {
        right: -250px;
        bottom: 440px;
        width: 520px;
    }

}

/* Fleches du carrousel des optiques retirees sur mobile/tablette : un swipe
   existe deja (pointerdown/pointerup sur
   .production-material__group--optics, seuil de 44px, voir
   production-visuals.js), les fleches faisaient doublon. Placee apres la
   regle de base (display: flex, non conditionnee par media query, ~ligne
   12698) pour gagner la cascade a specificite egale - sinon la regle de
   base, plus bas dans le fichier, reprend la main quelle que soit la
   largeur d'ecran. */
@media (max-width: 980px) {
    .production-optics-controls {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .production-v2__hero::before {
        animation: none;
    }

    .production-v2__step img {
        transition: none;
    }

    .production-v2__step:hover img,
    .production-v2__step:focus-within img {
        transform: none;
    }

    .production-v2__step-path-runner {
        animation: none;
        opacity: 0;
    }

    .production-v2__constellation-nodes circle {
        animation: none;
        opacity: 0.7;
        transform: none;
    }

    .production-config-stage::after {
        transition: none;
    }

    .production-material__group--optics,
    .production-material__group--optics::before,
    .production-v2__step,
    .production-optics-copy,
    .production-optics-media img,
    .production-extra-card__stage > img,
    .production-extra-card__storage,
    .production-extra-card__stage > p,
    .production-material__camera-grid .production-material__item,
    .production-material__camera-grid .production-material__item img {
        transition: none;
        transform: none;
    }

    .production-material__group--optics:hover .production-optics-product,
    .production-material__group--optics:focus-within .production-optics-product,
    .production-material__group--optics:active .production-optics-product,
    .production-material__camera-grid .production-material__item:hover img,
    .production-material__camera-grid .production-material__item:active img {
        transform: none;
    }

    .production-record-ui::after {
        animation: none;
    }

    .production-bottom-blob {
        animation: none;
        opacity: 0.12;
        transform: translate3d(-8vw, 0, 0) scale(0.96);
    }

    .production-record-ui__choice {
        transition: none;
    }

    .production-page-nav a {
        transition: none;
    }

    .production-page-nav,
    .production-page-nav__bubble,
    .production-page-nav__dot,
    .production-page-nav__label {
        transition: none;
    }

    .production-record-ui__choice:hover,
    .production-record-ui__choice:active {
        transform: none;
    }
}

/* Order-sensitive Post-production V2 overrides. */
.postprod-v2 {
    overflow-x: clip;
}

.postprod-v2 .postprod-v2__hero {
    /* C'etait un degrade #02040b -> #01030a (62%) -> #000000 : sur cette
       page seule, le hero porte SON PROPRE degrade en plus de celui du fondu
       ajoute en ::after pour eteindre le blob (voir plus haut, regle commune
       aux trois heros). Les deux se superposaient, et leurs pentes ne
       coincident pas : 62% de la hauteur du hero et le point ou le fondu
       commence tombent quasiment au meme pixel sur la plupart des viewports
       (l'un est une fraction de la hauteur du hero, l'autre une fraction de
       la hauteur d'ecran, mais les deux hauteurs sont elles-memes liees par
       les memes clamp() -- la coincidence n'est donc pas rare). A cet endroit,
       la pente du degrade combine change brusquement -- une marche que l'oeil
       lit comme une barre, la ou #02040b et #01030a ne different que de 1 a 4
       sur 255 et seraient sinon invisibles. Plat au lieu de degrade : plus
       qu'une seule pente dans la zone, celle du fondu. Production et
       Pre-production n'avaient pas le probleme, leur hero etant deja plat. */
    background: #02040b;
}

.postprod-v2 .postprod-v2__hero::before {
    display: block;
}

.postprod-v2 .postprod-v2__hero::after {
    display: none;
}

.postprod-v2 .process-breadcrumb,
.postprod-v2 .postprod-v2__hero-inner {
    width: min(1520px, 100%);
    margin-inline: auto;
}

.postprod-v2 .process-breadcrumb {
    width: max-content;
    max-width: calc(100% - 32px);
    margin-bottom: clamp(24px, 2.5vw, 40px);
    justify-self: center;
    text-align: center;
}

.postprod-v2 .postprod-v2__hero-inner {
    place-items: center start;
    text-align: left;
}

.postprod-v2 .postprod-montage,
.postprod-v2 .postprod-montage .postprod-sticky,
.postprod-v2 .postprod-montage .postprod-sticky::before {
    background: #000000;
}

@media (min-width: 981px) {
    .postprod-v2 .postprod-v2__hero {
        min-height: min(700px, 68svh);
    }

    .postprod-v2 .postprod-montage .postprod-sticky {
        position: sticky;
        padding-top: clamp(58px, 6vh, 76px);
        padding-bottom: clamp(20px, 2.5vh, 34px);
        top: 0;
    }

    .postprod-v2 .postprod-montage {
        min-height: calc(100svh + clamp(80px, 10svh, 120px));
        scroll-margin-top: 96px;
        z-index: 3;
        opacity: var(--montage-exit-opacity, 1);
        translate: 0 var(--montage-exit-y, 0px);
        will-change: opacity, translate;
    }

    .postprod-v2 .postprod-montage.is-color-exiting {
        pointer-events: none;
    }

    .postprod-v2 .postprod-montage .postprod-heading {
        width: min(1400px, 100%);
        margin-bottom: clamp(10px, 1.4vh, 18px);
    }

    .postprod-v2 .postprod-montage__split-logo {
        top: calc(46% - 150px);
    }

    .postprod-v2 .postprod-color-intro__word {
        translate: 0;
    }

    .postprod-v2 .postprod-color__transition {
        margin-top: clamp(-120px, -10svh, -80px);
        z-index: 2;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0,
            #000 clamp(64px, 8svh, 96px)
        );
    }

    .postprod-v2 .postprod-color-intro {
        /* Keep the portal layer fixed to the viewport from a centered source. */
        inset: 0;
        translate: none;
    }

    .postprod-v2 .postprod-montage .postprod-subtitle {
        margin-top: 8px;
    }

    .postprod-v2 .postprod-montage .postprod-davinci-logo {
        margin-top: 6px;
    }

    .postprod-v2 .postprod-montage__stage {
        height: calc(clamp(390px, 52vh, 470px) + 28px);
    }

    .postprod-v2 .postprod-timeline {
        grid-template-rows: 52% minmax(0, 1fr);
    }
}

.postprod-v2 .postprod-v2__hero h1 {
    text-align: left;
}

/* Order-sensitive Color demo layout. */
.postprod-color {
    --postprod-color-transition-height: 368vh;
}

.postprod-color__workspace {
    height: clamp(720px, 82svh, 820px);
    min-height: 700px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 42px auto minmax(0, 1fr);
}

.postprod-color__workspace > .postprod-suite__topbar { grid-column: 1; grid-row: 1; }
.postprod-color__workspace > .postprod-color__tabs { grid-column: 1; grid-row: 2; }
.postprod-color__workspace > .postprod-color__panels { grid-column: 1; grid-row: 3; }

.postprod-montage.is-morphing[data-stage="1"] .postprod-timeline__drag-zone,
.postprod-montage.is-morphing[data-stage="1"] .postprod-timeline__playhead {
    opacity: 1;
    transition-duration: 760ms;
    pointer-events: none;
}
.postprod-montage[data-stage="2"] .postprod-timeline__drag-zone {
    top: var(--playhead-final-top, 48%);
    height: var(--playhead-final-height, 52%);
    opacity: 1;
    pointer-events: none;
}
.postprod-montage[data-stage="2"] .postprod-timeline__playhead {
    top: 15%;
    opacity: 1;
    transform: scaleY(1);
}
.postprod-montage[data-stage="2"].is-timeline-ready .postprod-timeline__drag-zone { pointer-events: auto; }

.postprod-color__panel--grade .postprod-color__viewer { grid-column: 1; grid-row: 1; }
.postprod-color__panel--grade .postprod-color__nodes-panel { grid-column: 2; grid-row: 1; }
.postprod-color__panel--grade .postprod-color__timeline { grid-column: 1 / -1; grid-row: 2; }
.postprod-color__panel--grade .postprod-color__grading { grid-column: 1 / -1; grid-row: 3; }
.postprod-color__panel--grade .postprod-color__wheel {
    grid-template-rows: minmax(96px, 1fr) auto auto auto;
    padding: 8px;
}
.postprod-color__grading .postprod-color__wheel .postprod-color__wheel-control i {
    left: var(--wheel-point-x, 50%);
    top: var(--wheel-point-y, 50%);
    transform: translate(-50%, -50%);
}

@media (max-width: 980px) {
    .postprod-color__workspace {
        height: auto;
        min-height: 0;
        grid-template-rows: 42px auto auto;
    }
    .postprod-color__panel--grade .postprod-color__viewer,
    .postprod-color__panel--grade .postprod-color__nodes-panel,
    .postprod-color__panel--grade .postprod-color__timeline,
    .postprod-color__panel--grade .postprod-color__grading { grid-column: 1; }
    .postprod-color__panel--grade .postprod-color__viewer { grid-row: 1; }
    .postprod-color__panel--grade .postprod-color__nodes-panel { grid-row: 2; }
    .postprod-color__panel--grade .postprod-color__timeline { grid-row: 3; }
    .postprod-color__panel--grade .postprod-color__grading { grid-row: 4; }
}

@media (min-width: 981px) {
    .postprod-v2 .postprod-color__content {
        position: sticky;
        top: 0;
        bottom: auto;
        min-height: 100svh;
        padding-top: clamp(28px, 4vh, 44px);
        padding-bottom: clamp(24px, 3vh, 38px);
        display: grid;
        align-content: center;
        box-sizing: border-box;
    }

    .postprod-v2 .postprod-color__content .postprod-heading {
        margin-bottom: clamp(14px, 2vh, 22px);
    }

    .postprod-v2 .postprod-color__workspace {
        width: min(1380px, 90vw);
        height: clamp(660px, 74svh, 700px);
        min-height: 660px;
    }

    .postprod-v2 .postprod-color__panel {
        min-height: 0;
    }

    .postprod-v2 .postprod-color__panel--grade {
        grid-template-rows: minmax(280px, 1fr) 92px 190px;
    }

    .postprod-v2 .postprod-color__panel--grade .postprod-color__grading {
        padding: 8px 16px 12px;
    }

    .postprod-v2 .postprod-color__panel--grade .postprod-color__wheel {
        grid-template-rows: minmax(78px, 1fr) auto auto auto;
        gap: 5px;
        padding: 5px 8px;
    }

    .postprod-v2 .postprod-color__wheel-control {
        width: min(88px, 64%);
    }
}

/* Post-production: static FX sequence between Color and Mixage. */
.postprod-fx {
    /* Remonte FX et tout ce qui suit (Mixage) en flux normal. */
    margin-top: -75px;
    padding: clamp(48px, 5vw, 80px) clamp(24px, 5vw, 84px);
    background: #000000;
    color: var(--postprod-cream);
}

.postprod-fx-blob-wrap {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* mask-image confine le rendu du blob a la boite du wrapper, meme sans
       overflow:hidden -- il faut donc adoucir les DEUX bords, pas seulement
       celui qui posait probleme au moment de l'ecriture initiale. */
    mask-image: linear-gradient(to top, transparent 0, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, transparent 0, black 15%, black 85%, transparent 100%);
}

.postprod-fx-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(480px, 40vw, 820px);
    height: clamp(480px, 40vw, 820px);
    border-radius: 50%;
    background: #ff5e0e;
    filter: blur(70px) saturate(1.4);
    opacity: 0.48;
    mix-blend-mode: screen;
    pointer-events: none;
    transform: translate(-50%, -50%) translate3d(var(--fx-blob-x, 0px), var(--fx-blob-y, 0px), 0) scale(var(--fx-blob-scale, 1));
    transition: transform var(--fx-blob-duration, 8s) cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .postprod-fx-blob {
        transition: none;
    }
}

.postprod-fx__heading,
.postprod-fx__modules {
    width: min(1380px, 100%);
    margin-inline: auto;
}

.postprod-fx__modules {
    width: min(1480px, calc(100% + 100px));
    position: relative;
    left: -50px;
    transform: none;
}

.postprod-fx__heading {
    margin-bottom: clamp(24px, 3vw, 44px);
}

.postprod-fx__heading p,
.postprod-fx__copy > span {
    margin: 0 0 8px;
    color: var(--postprod-orange);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.postprod-fx__heading h2 {
    margin: 0;
    font-family: "Coolvetica", Arial, sans-serif;
    font-size: clamp(3.1rem, 7.15vw, 6.5rem);
    font-weight: 400;
    line-height: 0.8;
}

.postprod-fx__module {
    min-height: clamp(260px, 28vw, 360px);
    padding-block: clamp(22px, 2.5vw, 36px);
    display: grid;
    grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1.52fr);
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    border-top: 1px solid rgba(253, 246, 237, 0.12);
}

.postprod-fx__module:last-child {
    border-bottom: 1px solid rgba(253, 246, 237, 0.12);
}

/* Seule la carte survolee grandit -- pas tout le module (texte + rangee
   d'images), pas les cartes voisines. Le zoom part du centre de la carte ;
   z-index au survol pour qu'elle passe devant ses voisines sans etre
   rognee par elles. overflow-x: clip sur la section absorbe le leger
   depassement d'une carte en bord de rangee sans creer de barre de
   defilement horizontale -- et, contrairement a overflow: hidden, sans
   rendre inoperant un eventuel position: sticky (verifie : la section n'en
   contient aucun aujourd'hui). */
.postprod-fx {
    overflow-x: clip;
}

.postprod-fx__frame {
    transform-origin: center;
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
    .postprod-fx__frame:hover {
        position: relative;
        z-index: 4;
        transform: scale(1.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    .postprod-fx__frame {
        transition: none;
    }

    .postprod-fx__frame:hover {
        transform: none;
    }
}

.postprod-fx__module--mask-overlay {
    grid-template-columns: minmax(450px, 0.58fr) minmax(0, 1.42fr);
    gap: clamp(18px, 1.6vw, 26px);
    min-height: clamp(300px, 25vw, 350px);
    padding-block: clamp(16px, 1.8vw, 24px);
}

.postprod-fx__module--mask-overlay .postprod-fx__copy h3 {
    text-wrap: balance;
}

.postprod-fx__module--stabilization {
    grid-template-columns: minmax(340px, 0.58fr) minmax(0, 1.42fr);
    column-gap: clamp(52px, 7vw, 112px);
}

.postprod-fx__copy h2,
.postprod-fx__copy h3 {
    margin: 0 0 10px;
    font-family: "Coolvetica", Arial, sans-serif;
    font-size: clamp(2.15rem, 4vw, 4.6rem);
    font-weight: 400;
    line-height: 0.94;
}

.postprod-fx__copy p {
    max-width: 34ch;
    margin: 0;
    color: rgba(253, 246, 237, 0.58);
    font-size: clamp(0.78rem, 1.1vw, 1rem);
    line-height: 1.55;
}

.postprod-fx__flow {
    min-width: 0;
    position: relative;
    display: grid;
    align-items: center;
}

.postprod-fx__particles {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

.postprod-fx__particles i {
    width: 3px;
    height: 3px;
    position: absolute;
    border-radius: 50%;
    background: rgba(124, 162, 255, 0.76);
    box-shadow: 0 0 8px rgba(124, 162, 255, 0.44);
    opacity: 0;
}

.postprod-fx__particles i:nth-child(3n + 2) {
    width: 2px;
    height: 2px;
    background: rgba(255, 94, 14, 0.72);
    box-shadow: 0 0 7px rgba(255, 94, 14, 0.38);
}

.postprod-fx__particles i:nth-child(3n) {
    background: rgba(253, 246, 237, 0.62);
    box-shadow: 0 0 6px rgba(253, 246, 237, 0.28);
}

.postprod-fx__flow--three {
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr);
}

.postprod-fx__flow--mask-overlay {
    grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) 26px minmax(0, 1fr);
}

.postprod-fx__flow--mask-overlay .postprod-fx__frame {
    aspect-ratio: 16 / 9;
    box-shadow: inset 0 0 28px rgba(124, 162, 255, 0.035);
}

.postprod-fx__flow--two {
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
}

.postprod-fx__frame {
    min-width: 0;
    margin: 0;
    aspect-ratio: 16 / 10;
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid rgba(124, 162, 255, 0.23);
    border-radius: 3px;
    background: #03050a;
    overflow: hidden;
}

.postprod-fx__frame--media {
    background: #05070c;
}

.postprod-fx__frame--media > :is(img, video) {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.postprod-fx__frame--media figcaption {
    padding: 0.3rem 0.45rem;
    background: rgba(3, 5, 10, 0.74);
}

.postprod-fx__flow--mask-overlay .postprod-fx__frame--process {
    border-color: rgba(124, 162, 255, 0.48);
}


.postprod-fx__frame--resolved {
    border-color: rgba(255, 94, 14, 0.58);
    box-shadow: inset 0 0 34px rgba(255, 94, 14, 0.05);
}

.postprod-fx__module--face .postprod-fx__frame--resolved::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: -32%;
    width: 24%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(253, 246, 237, 0.14), rgba(124, 162, 255, 0.08), transparent);
    opacity: 0;
    transform: skewX(-8deg);
    animation: postprod-fx-integration-sweep 4.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

@keyframes postprod-fx-integration-sweep {
    0%, 24% { opacity: 0; translate: 0; }
    42% { opacity: 0.34; }
    68%, 100% { opacity: 0; translate: 550%; }
}

.postprod-fx__ai-spark {
    width: 14px;
    height: 14px;
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 4;
    background: var(--postprod-cream);
    clip-path: polygon(50% 0, 59% 39%, 100% 50%, 59% 61%, 50% 100%, 41% 61%, 0 50%, 41% 39%);
    filter: drop-shadow(0 0 5px rgba(255, 94, 14, 0.62));
    animation: postprod-fx-ai-spark 2.8s ease-in-out infinite;
}

@keyframes postprod-fx-ai-spark {
    0%, 100% { opacity: 0.58; transform: scale(0.86) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.08) rotate(8deg); }
}

.postprod-fx__frame figcaption {
    position: absolute;
    left: 12px;
    bottom: 10px;
    color: rgba(253, 246, 237, 0.5);
    font-size: 0.725rem;
    font-weight: 700;
    text-transform: uppercase;
}

.postprod-fx__arrow {
    width: 22px;
    height: 12px;
    position: relative;
    justify-self: center;
}

.postprod-fx__arrow::before {
    content: "";
    position: absolute;
    left: 0;
    right: 3px;
    top: 5px;
    height: 1px;
    background: rgba(255, 94, 14, 0.78);
}

.postprod-fx__arrow::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 2px;
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--postprod-orange);
    border-right: 1px solid var(--postprod-orange);
    transform: rotate(45deg);
}

.postprod-fx__face {
    width: 44%;
    aspect-ratio: 0.78;
    position: relative;
    border: 2px solid rgba(124, 162, 255, 0.82);
    border-radius: 48% 48% 44% 44% / 38% 38% 58% 58%;
    background:
        radial-gradient(circle at 31% 40%, rgba(253, 246, 237, 0.8) 0 2px, transparent 3px),
        radial-gradient(circle at 69% 40%, rgba(253, 246, 237, 0.8) 0 2px, transparent 3px);
}

.postprod-fx__face::before,
.postprod-fx__face::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.postprod-fx__face::before {
    left: 50%;
    top: 6%;
    bottom: 8%;
    width: 1px;
    background: rgba(124, 162, 255, 0.7);
}

.postprod-fx__face::after {
    left: 12%;
    right: 12%;
    top: 47%;
    height: 1px;
    background: rgba(124, 162, 255, 0.52);
}

.postprod-fx__scan-line {
    width: 84%;
    height: 2px;
    position: absolute;
    left: 8%;
    top: 14%;
    z-index: 4;
    display: block;
    background: linear-gradient(90deg, transparent, rgba(255, 94, 14, 0.88) 16% 84%, transparent);
    box-shadow: 0 0 10px rgba(255, 94, 14, 0.72), 0 0 22px rgba(255, 94, 14, 0.26);
    opacity: 0;
}

.postprod-fx__face--mesh {
    background:
        repeating-linear-gradient(24deg, transparent 0 13px, rgba(124, 162, 255, 0.27) 14px 15px),
        repeating-linear-gradient(-24deg, transparent 0 13px, rgba(124, 162, 255, 0.27) 14px 15px),
        radial-gradient(circle at 31% 40%, #fdf6ed 0 2px, transparent 3px),
        radial-gradient(circle at 69% 40%, #fdf6ed 0 2px, transparent 3px);
}

.postprod-fx__face--resolved {
    border-color: var(--postprod-orange);
    background:
        radial-gradient(circle at 31% 40%, #fdf6ed 0 2px, transparent 3px),
        radial-gradient(circle at 69% 40%, #fdf6ed 0 2px, transparent 3px),
        linear-gradient(145deg, rgba(255, 94, 14, 0.3), rgba(36, 91, 255, 0.2));
    box-shadow: 0 0 28px rgba(255, 94, 14, 0.18);
}

.postprod-fx__landscape,
.postprod-fx__noise,
.postprod-fx__track {
    width: 78%;
    aspect-ratio: 16 / 10;
    position: relative;
    border: 1px solid rgba(253, 246, 237, 0.3);
    background: #07101d;
    overflow: hidden;
}

.postprod-fx__landscape {
    background:
        linear-gradient(180deg, transparent 0 57%, rgba(124, 162, 255, 0.24) 58% 59%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(36, 91, 255, 0.2), transparent 58%),
        linear-gradient(180deg, #07101d 0 58%, #101925 59% 100%);
}

.postprod-fx__landscape::before {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(253, 246, 237, 0.25);
}

.postprod-fx__landscape--unstable {
    transform: none;
    transform-origin: 50% 50%;
    will-change: transform;
}

.postprod-fx__landscape--stable {
    transform-origin: 50% 50%;
    will-change: transform;
}

.postprod-fx__landscape--unstable::before {
    display: none;
}

.postprod-fx__stabilization-window {
    position: absolute;
    inset: 12%;
    display: block;
    border: 1px solid rgba(253, 246, 237, 0.25);
    transform-origin: 50% 50%;
}

.postprod-fx__noise--before {
    background:
        radial-gradient(ellipse at 58% 42%, rgba(124, 162, 255, 0.2), transparent 34%),
        linear-gradient(135deg, rgba(36, 91, 255, 0.2), transparent 48%, rgba(255, 94, 14, 0.12)),
        #08101d;
}

.postprod-fx__noise--before::before {
    content: "";
    position: absolute;
    inset: -36%;
    background:
        radial-gradient(circle, rgba(253, 246, 237, 0.92) 0 0.7px, transparent 1.1px),
        radial-gradient(circle, rgba(124, 162, 255, 0.72) 0 0.6px, transparent 1px),
        radial-gradient(circle, rgba(255, 94, 14, 0.48) 0 0.5px, transparent 0.9px);
    background-position: 0 0, 9px 7px, 4px 13px;
    background-size: 3px 3px, 5px 5px, 7px 7px;
    mix-blend-mode: screen;
    filter: contrast(175%);
    opacity: 0.58;
    animation: postprod-fx-grain-shift 260ms steps(2, end) infinite;
    will-change: transform;
}

.postprod-fx__noise--before::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(253, 246, 237, 0.08), transparent);
    mix-blend-mode: soft-light;
}

.postprod-fx__noise--after {
    background: linear-gradient(135deg, #101c2e, #07101d 55%, #182236);
}

.postprod-fx__noise--after::before {
    content: "";
    position: absolute;
    top: -12%;
    bottom: -12%;
    left: 0;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(253, 246, 237, 0.16), rgba(124, 162, 255, 0.12), transparent);
    opacity: 0;
    transform: translateX(-140%) skewX(-10deg);
    animation: postprod-fx-clean-sweep 4.2s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.postprod-fx__noise--after::after {
    content: "";
    position: absolute;
    inset: 8%;
    background:
        radial-gradient(circle at 16% 70%, rgba(253, 246, 237, 0.82) 0 1px, transparent 1.7px),
        radial-gradient(circle at 38% 28%, rgba(124, 162, 255, 0.72) 0 1px, transparent 1.8px),
        radial-gradient(circle at 62% 62%, rgba(253, 246, 237, 0.64) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 82% 34%, rgba(255, 94, 14, 0.52) 0 0.8px, transparent 1.5px);
    opacity: 0.28;
    animation: postprod-fx-clean-particles 3.2s ease-in-out infinite alternate;
}

@keyframes postprod-fx-clean-sweep {
    0%, 18% { opacity: 0; transform: translateX(-140%) skewX(-10deg); }
    42% { opacity: 0.78; }
    68%, 100% { opacity: 0; transform: translateX(360%) skewX(-10deg); }
}

@keyframes postprod-fx-clean-particles {
    from { opacity: 0.22; transform: translate3d(0, 3px, 0) scale(0.96); }
    to { opacity: 0.58; transform: translate3d(0, -3px, 0) scale(1.04); }
}

.postprod-fx__track {
    background: #07101d;
}

.postprod-fx__module--tracking .postprod-fx__track {
    width: 70%;
    translate: 0 -12px;
}

.postprod-fx__module--tracking .postprod-fx__frame figcaption {
    bottom: 12px;
}

.postprod-fx__track-scene {
    position: absolute;
    inset: 9%;
    overflow: hidden;
}

.postprod-fx__track-scene i {
    position: absolute;
    display: block;
}

.postprod-fx__hill {
    width: 118%;
    height: 56%;
    left: -9%;
    bottom: -30%;
    border: 1px solid rgba(124, 162, 255, 0.4);
    border-radius: 50% 50% 0 0;
    background: linear-gradient(180deg, rgba(36, 91, 255, 0.12), rgba(36, 91, 255, 0.03));
}

.postprod-fx__house {
    width: 24%;
    height: 30%;
    left: 31%;
    bottom: 18%;
    border: 1px solid rgba(253, 246, 237, 0.55);
    background:
        linear-gradient(90deg, transparent 38%, rgba(255, 94, 14, 0.7) 38% 62%, transparent 62%) bottom / 100% 48% no-repeat,
        rgba(4, 8, 16, 0.72);
}

.postprod-fx__house::before {
    content: "";
    position: absolute;
    width: 140%;
    height: 72%;
    left: -20%;
    top: -64%;
    background: rgba(253, 246, 237, 0.72);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.postprod-fx__house::after {
    content: "";
    position: absolute;
    width: 126%;
    height: 62%;
    left: -13%;
    top: -54%;
    z-index: 1;
    background: #07101d;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.postprod-fx__tree {
    width: 1.5%;
    height: 22%;
    right: 23%;
    bottom: 17%;
    background: rgba(255, 94, 14, 0.52);
}

.postprod-fx__tree::before {
    content: "";
    position: absolute;
    width: 440%;
    height: 118%;
    left: 50%;
    top: -96%;
    border: 0;
    background: rgba(253, 246, 237, 0.2);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    transform: translateX(-50%);
}

.postprod-fx__cloud {
    width: 16%;
    height: 8%;
    right: 18%;
    top: 19%;
    border: 1px solid rgba(253, 246, 237, 0.46);
    border-radius: 999px;
}

.postprod-fx__cloud::before,
.postprod-fx__cloud::after {
    content: "";
    position: absolute;
    bottom: 18%;
    border: inherit;
    border-radius: 50%;
    background: #07101d;
}

.postprod-fx__cloud::before { width: 45%; aspect-ratio: 1; left: 12%; }
.postprod-fx__cloud::after { width: 36%; aspect-ratio: 1; right: 10%; }

@keyframes postprod-fx-grain-shift {
    0% { transform: translate3d(-3%, 2%, 0); }
    25% { transform: translate3d(4%, -3%, 0); }
    50% { transform: translate3d(-2%, -4%, 0); }
    75% { transform: translate3d(3%, 4%, 0); }
    100% { transform: translate3d(-4%, 1%, 0); }
}

.postprod-fx__target {
    width: 32%;
    aspect-ratio: 1;
    position: absolute;
    left: 44%;
    top: 64%;
    opacity: 0;
    translate: -50% -50%;
    z-index: 3;
}

.postprod-fx__target::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--postprod-orange);
    box-shadow: 0 0 12px rgba(255, 94, 14, 0.72);
    transform: translate(-50%, -50%);
}

.postprod-fx__target i {
    width: 28%;
    height: 28%;
    position: absolute;
    border-color: var(--postprod-orange);
    border-style: solid;
}

.postprod-fx__target i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.postprod-fx__target i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.postprod-fx__target i:nth-child(3) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.postprod-fx__target i:nth-child(4) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }

.postprod-fx__track-scene--integration > i {
    opacity: 0.48;
    will-change: opacity, transform, filter;
    animation: postprod-fx-integration-relay 8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.postprod-fx__track-scene--integration .postprod-fx__house {
    --integration-glow: rgba(255, 94, 14, 0.82);
    animation-delay: 0s;
}

.postprod-fx__track-scene--integration .postprod-fx__tree {
    --integration-glow: rgba(253, 246, 237, 0.62);
    animation-delay: 2s;
}

.postprod-fx__track-scene--integration .postprod-fx__cloud {
    --integration-glow: rgba(253, 246, 237, 0.72);
    animation-name: postprod-fx-integration-cloud;
    animation-delay: 4s;
}

.postprod-fx__track-scene--integration .postprod-fx__hill {
    --integration-glow: rgba(86, 132, 255, 0.72);
    animation-delay: 6s;
}

@keyframes postprod-fx-integration-relay {
    0%, 3% {
        opacity: 0.48;
        transform: translateY(0);
        filter: brightness(0.88) saturate(0.82) drop-shadow(0 0 0 transparent);
    }
    8% {
        opacity: 1;
        transform: translateY(-1px);
        filter: brightness(1.55) saturate(1.24) drop-shadow(0 0 5px var(--integration-glow)) drop-shadow(0 0 13px var(--integration-glow));
    }
    18% {
        opacity: 0.92;
        transform: translateY(0);
        filter: brightness(1.22) saturate(1.08) drop-shadow(0 0 4px var(--integration-glow));
    }
    24%, 100% {
        opacity: 0.48;
        transform: translateY(0);
        filter: brightness(0.88) saturate(0.82) drop-shadow(0 0 0 transparent);
    }
}

@keyframes postprod-fx-integration-cloud {
    0%, 3%, 24%, 100% {
        opacity: 0.5;
        transform: translateY(0);
        border-color: rgba(253, 246, 237, 0.38);
        box-shadow: 0 0 0 transparent;
    }
    8% {
        opacity: 1;
        transform: translateY(-1px);
        border-color: rgba(253, 246, 237, 0.9);
        box-shadow: 0 0 7px rgba(253, 246, 237, 0.3);
    }
    18% {
        opacity: 0.88;
        transform: translateY(0);
        border-color: rgba(253, 246, 237, 0.62);
        box-shadow: 0 0 3px rgba(253, 246, 237, 0.16);
    }
}

.postprod-fx.has-fx-motion .postprod-fx__copy,
.postprod-fx.has-fx-motion .postprod-fx__frame,
.postprod-fx.has-fx-motion .postprod-fx__arrow {
    opacity: 0;
}

/* will-change retire : ces quinze elements n'animent leur opacite qu'a leur
   entree a l'ecran, mais l'indice les promouvait en couche GPU pour toute la
   vie de la page -- 1,25 megapixel immobilise. L'opacite se compose nativement,
   l'animation reste fluide sans lui. */

/* Idem pour les fleches : sept couches de plus pour une animation ponctuelle. */

@media (max-width: 900px) {
    .postprod-fx__modules {
        width: 100%;
        left: auto;
        transform: none;
    }

    .postprod-fx__module {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 22px;
    }

    .postprod-fx__module--mask-overlay,
    .postprod-fx__module--stabilization {
        grid-template-columns: 1fr;
    }

    .postprod-fx__copy p {
        max-width: 52ch;
    }
}

@media (max-width: 620px) {
    .postprod-fx__flow--three,
    .postprod-fx__flow--mask-overlay,
    .postprod-fx__flow--two {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* rotate, et non transform : le flux passe en colonne, les fleches doivent
       donc pointer vers le bas -- mais postproduction-fx.js les anime en
       scaleX, ce qui pose un transform en style INLINE et ecrasait la rotation
       declaree ici. rotate est une propriete distincte de transform : les deux
       se composent au lieu de se remplacer, et le scaleX de l'animation file
       alors le long de la fleche, dans le sens ou elle pointe. */
    .postprod-fx__arrow {
        rotate: 90deg;
    }

    .postprod-fx__frame {
        aspect-ratio: 16 / 11;
    }
}

@media (prefers-reduced-motion: reduce) {
    .postprod-fx.has-fx-motion :is(.postprod-fx__copy, .postprod-fx__frame, .postprod-fx__arrow),
    .postprod-fx__target {
        opacity: 1;
        transform: none;
    }

    .postprod-fx__noise--before::before {
        animation: none;
        transform: none;
    }

    .postprod-fx__noise--after::before,
    .postprod-fx__noise--after::after,
    .postprod-fx__ai-spark,
    .postprod-fx__module--face .postprod-fx__frame--resolved::after,
    .postprod-fx__track-scene--integration > i {
        animation: none;
    }

    .postprod-fx__track-scene--integration > i {
        opacity: 1;
        filter: none;
    }
}

/* Post-production Color tools: three stable, independent workspaces. */
.postprod-v2 .postprod-color {
    --postprod-color-transition-height: 320vh;
    background: #000;
}

.postprod-v2 .postprod-color__transition {
    height: var(--postprod-color-transition-height);
    min-height: 0;
}

.postprod-v2 .postprod-color__content {
    position: relative;
    inset: auto;
    z-index: 2;
    display: block;
    width: 100%;
    min-height: 0;
    margin-top: -35svh;
    padding: clamp(1rem, 2vw, 2rem) 0 clamp(5rem, 9vw, 9rem);
    opacity: var(--color-workspace-reveal, 1);
    transform: none;
    background: #000;
}

.postprod-color-blob {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: clamp(560px, 46vw, 980px);
    height: clamp(560px, 46vw, 980px);
    border-radius: 50%;
    background: #245bff;
    filter: blur(64px) saturate(1.4);
    opacity: 0.56;
    mix-blend-mode: screen;
    pointer-events: none;
    transform: translate3d(var(--color-blob-x, -8vw), var(--color-blob-y, 4%), 0) scale(var(--color-blob-scale, 1));
    transition: transform var(--color-blob-duration, 8s) cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .postprod-color-blob {
        transition: none;
    }
}

.postprod-color__portal-heading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    padding-inline: 5vw;
    color: var(--postprod-cream);
    font-family: "Coolvetica", "Creato", Arial, sans-serif;
    font-size: clamp(3.8rem, 8vw, 8rem);
    line-height: 0.92;
    text-align: center;
    white-space: nowrap;
    opacity: var(--color-backdrop-title-opacity, 0);
    pointer-events: none;
}

.postprod-color-tools {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    width: min(1480px, 94vw);
    margin: 0 auto;
}

.postprod-color-tool {
    overflow: hidden;
    border: 1px solid rgba(114, 149, 216, 0.24);
    border-radius: 6px;
    background: #05070c;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.postprod-color-tool__heading {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    padding: 1rem clamp(1rem, 2vw, 1.6rem);
    border-bottom: 1px solid rgba(114, 149, 216, 0.2);
}

.postprod-color-tool__heading span {
    color: var(--orange);
    font: 700 0.72rem/1 var(--font-body);
}

.postprod-color-tool__heading h3 {
    margin: 0;
    color: var(--cream);
    font: 600 clamp(1.15rem, 2vw, 1.7rem)/1.1 var(--font-heading);
}

.postprod-color-tool__subtitle {
    margin: 0;
    color: rgba(244, 240, 232, 0.58);
    font: 500 clamp(0.72rem, 1vw, 0.9rem)/1.35 var(--font-body);
}

.postprod-color-tool__import,
.postprod-color-tool__save {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: 104px;
    min-height: 44px;
    padding: 0.58rem 1rem;
    border: 1px solid rgba(114, 149, 216, 0.56);
    border-radius: 4px;
    color: rgba(253, 246, 237, 0.94);
    background: rgba(114, 149, 216, 0.12);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), 0 6px 16px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.postprod-color-tool__save {
    margin-left: 0;
    font: 700 1em/1 var(--font-body);
    color: #fff;
    border-color: rgba(238, 242, 249, 0.5);
    background: rgba(238, 242, 249, 0.06);
}

.postprod-color-tool__heading .postprod-color-tool__import span,
.postprod-color-tool__heading .postprod-color-tool__save span {
    color: inherit;
    font: 700 1em/1 var(--font-body);
}

.postprod-color-tool__import-icon {
    width: 17px;
    height: 17px;
    position: relative;
    flex: 0 0 17px;
    border-bottom: 1.5px solid currentColor;
}

.postprod-color-tool__import-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 2px;
    width: 1.5px;
    height: 10px;
    border-radius: 999px;
    background: currentColor;
    transform: translateX(-50%);
}

.postprod-color-tool__import-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 1px;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    transform: translateX(-50%) rotate(45deg);
}

.postprod-color-tool__save-icon {
    position: relative;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}

.postprod-color-tool__save-icon::before {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    top: 2px;
    height: 4px;
    border: 1px solid currentColor;
}

.postprod-color-tool__save-icon::after {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 2px;
    height: 5px;
    border: 1px solid currentColor;
}

.postprod-color-tool__import:is(:hover, :focus-within),
.postprod-color-tool__save:is(:hover, :focus-visible) {
    border-color: rgba(255, 94, 14, 0.72);
    color: var(--cream);
    background: rgba(255, 94, 14, 0.09);
}

.postprod-color-tool__save:is(:hover, :focus-visible) {
    border-color: rgba(255, 255, 255, 0.86);
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.postprod-color-tool__import:focus-within {
    outline: 2px solid rgba(114, 149, 216, 0.72);
    outline-offset: 2px;
}

.postprod-color-tool__import input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.postprod-color-tool__layout {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(250px, 0.9fr);
    min-height: clamp(310px, 38vw, 560px);
}

.postprod-color-tool__viewer {
    --node-brightness: 1;
    --node-contrast: 1;
    --node-saturation: 1;
    --node-hue: 0deg;
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #020305;
}

.postprod-color-tool__viewer img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 180ms ease;
}

.postprod-color-tool__node-overlay {
    display: none;
}

.postprod-color-tool__viewer.is-node-loading .postprod-color-compare__after > img {
    opacity: 0.7;
}

.postprod-color-tool__side,
.postprod-color-tool__looks {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    padding: clamp(1rem, 2.4vw, 2rem);
    border-left: 1px solid rgba(114, 149, 216, 0.2);
    background-color: #060911;
    background-image: none;
}

.postprod-color-tool__nodes {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.2rem;
    isolation: isolate;
}

/* La chaine serpente : ligne 1 de gauche a droite, puis on redescend sous le
   dernier node et la ligne 2 repart vers la gauche. Chaque maillon relie ainsi
   deux cases voisines -- sans cette disposition, CONT (1re ligne, 3e colonne)
   devrait rejoindre SAT a l'autre bout, et le trait traversait toute la grille
   en passant au-dessus de LOOK, ce qui se lisait comme un lien 03 vers 05. */
.postprod-color-tool__nodes button:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.postprod-color-tool__nodes button:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.postprod-color-tool__nodes button:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.postprod-color-tool__nodes button:nth-of-type(4) { grid-column: 3; grid-row: 2; }
.postprod-color-tool__nodes button:nth-of-type(5) { grid-column: 2; grid-row: 2; }

.postprod-color-tool__node-links {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.postprod-color-tool__node-links path {
    fill: none;
    stroke: rgba(114, 149, 216, 0.48);
    stroke-width: 1.4;
    transition: stroke 180ms ease, filter 180ms ease;
}

.postprod-color-tool__node-links path.is-active {
    stroke: #ff5e0e;
    filter: drop-shadow(0 0 4px rgba(255, 94, 14, 0.72));
}

.postprod-color-tool__node-links circle {
    fill: #05070c;
    stroke: #7295d8;
    stroke-width: 1.2;
}

.postprod-color-tool__node-links circle.is-active {
    fill: #ff5e0e;
    stroke: #ffb080;
}

.postprod-color-tool__nodes button,
.postprod-color-tool__looks button {
    position: relative;
    z-index: 1;
    min-height: 68px;
    border: 1px solid rgba(114, 149, 216, 0.35);
    border-radius: 4px;
    color: rgba(244, 240, 232, 0.72);
    background: transparent;
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.postprod-color-tool__nodes button::before,
.postprod-color-tool__nodes button::after {
    display: none;
}

.postprod-color-tool__nodes button span,
.postprod-color-tool__nodes button strong,
.postprod-color-tool__looks button span,
.postprod-color-tool__looks button small {
    display: block;
}

.postprod-color-tool__nodes button strong {
    margin-top: 0.35rem;
    color: rgba(244, 240, 232, 0.38);
    font-size: 0.68rem;
}

.postprod-color-tool__nodes button:is(:hover, :focus-visible),
.postprod-color-tool__looks button:is(:hover, :focus-visible) {
    border-color: var(--orange);
    color: var(--cream);
    outline: none;
}

.postprod-color-tool__nodes button[aria-pressed="true"],
.postprod-color-tool__looks button[aria-pressed="true"] {
    border-color: var(--orange);
    color: var(--cream);
    background: #241008;
    box-shadow: inset 0 0 24px rgba(255, 94, 14, 0.18);
}

.postprod-color-tool__looks button {
    min-height: 62px;
    padding: 0.75rem 1rem;
    text-align: left;
}

.postprod-color-tool__looks button small {
    margin-top: 0.25rem;
    color: rgba(244, 240, 232, 0.5);
}

.postprod-color-tool__viewer.postprod-color-compare > img,
.postprod-color-tool__viewer.postprod-color-compare .postprod-color-compare__after,
.postprod-color-tool__viewer.postprod-color-compare .postprod-color-compare__after > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.postprod-color-tool__viewer.postprod-color-compare > img {
    filter: none;
}

.postprod-color-tool__viewer.postprod-color-compare .postprod-color-compare__after {
    clip-path: inset(0 0 0 var(--compare-position));
}

.postprod-color-tool__viewer.postprod-color-compare .postprod-color-compare__divider {
    left: var(--compare-position);
    z-index: 8;
}

.postprod-color-tool__viewer.postprod-color-compare input[type="range"] {
    z-index: 10;
}

.postprod-color-tool__viewer[data-color-node-viewer] .postprod-color-compare__after > img {
    filter: none;
}

.postprod-color-tool__look-viewer > img,
.postprod-color-tool__look-viewer .postprod-color-compare__after > img {
    filter: none;
}

.postprod-color-tool__look-scenes {
    position: absolute;
    left: 50%;
    bottom: clamp(0.85rem, 2vw, 1.35rem);
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 0.72rem;
    padding: 0.45rem 0.62rem;
    border-radius: 999px;
    background: rgba(2, 3, 5, 0.76);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
    transform: translateX(-50%);
}

.postprod-color-tool__look-scenes button {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 50%;
    appearance: none;
    background: #6e7177;
    cursor: pointer;
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.postprod-color-tool__look-scenes button.is-active {
    background: var(--orange);
    box-shadow: 0 0 11px rgba(255, 94, 14, 0.68);
}

.postprod-color-tool__look-scenes button:is(:hover, :focus-visible) {
    background: var(--orange);
    box-shadow: 0 0 11px rgba(255, 94, 14, 0.68);
    outline: none;
    transform: scale(1.14);
}

.postprod-color-tool__compare {
    --grade-brightness: 1;
    --grade-contrast: 1;
    --grade-saturation: 1;
    position: relative;
    width: calc(100% - clamp(2rem, 4vw, 4rem));
    aspect-ratio: 16 / 7;
    margin: clamp(1rem, 2vw, 2rem) auto;
    overflow: hidden;
    background: #020305;
}

.postprod-color-tool__compare > img,
.postprod-color-tool__compare .postprod-color-compare__after,
.postprod-color-tool__compare .postprod-color-compare__after > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.postprod-color-tool__compare > img {
    filter: none;
}

.postprod-color-tool__compare .postprod-color-compare__after {
    clip-path: inset(0 0 0 var(--compare-position));
}

.postprod-color-tool__compare .postprod-color-compare__after > img {
    filter: brightness(var(--grade-brightness)) contrast(var(--grade-contrast)) saturate(var(--grade-saturation)) hue-rotate(var(--grade-hue, 0deg));
}

.postprod-color-tool__compare .postprod-color-compare__after::before,
.postprod-color-tool__compare .postprod-color-compare__after::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.postprod-color-tool__compare .postprod-color-compare__after::before {
    background: rgb(var(--grade-primary-color, 255, 126, 45));
    opacity: var(--grade-primary-opacity, 0);
    mix-blend-mode: var(--grade-primary-blend, screen);
}

.postprod-color-tool__compare .postprod-color-compare__after::after {
    background: rgb(var(--grade-curve-color, 255, 255, 255));
    opacity: var(--grade-curve-opacity, 0);
    mix-blend-mode: soft-light;
}

.postprod-color-tool__primary {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, max-content);
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.3rem, 0.7vw, 0.7rem);
    padding: 0.32rem clamp(0.55rem, 1vw, 0.9rem);
    border-top: 1px solid rgba(114, 149, 216, 0.2);
    border-bottom: 1px solid rgba(225, 231, 242, 0.08);
    background: #05070c;
}

.postprod-color-tool__primary-control {
    position: relative;
    display: inline-grid;
    grid-template-columns: max-content 3.7rem;
    align-items: center;
    gap: 0.22rem;
    min-height: 1.55rem;
    padding: 0 0.9rem 0 0;
    background: transparent;
}

.postprod-color-tool__primary-control span {
    font: 600 0.42rem/1 var(--font-body);
}

.postprod-color-tool__primary-control [data-color-primary-output] {
    font: 600 0.56rem/1 var(--font-body);
}

.postprod-color-tool__primary-control [data-color-primary-output] {
    box-sizing: border-box;
    width: 3.7rem;
    min-width: 0;
    padding: 0.18rem 0.2rem;
    border: 1px solid rgba(225, 231, 242, 0.34);
    border-radius: 3px;
    background: #030407;
    color: var(--cream);
    text-align: center;
    font-variant-numeric: tabular-nums;
    cursor: ew-resize;
    user-select: none;
    touch-action: none;
}

.postprod-color-tool__primary-reset-all {
    position: absolute;
    top: 50%;
    right: 0.38rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 1px solid rgba(225, 231, 242, 0.2);
    border-radius: 3px;
    background: rgba(225, 231, 242, 0.04);
    color: rgba(225, 231, 242, 0.62);
    font: 600 1rem/1 sans-serif;
    cursor: pointer;
    transform: translateY(-50%);
}

.postprod-color-tool__primary-reset-all:is(:hover, :focus-visible) {
    border-color: rgba(225, 231, 242, 0.64);
    color: var(--cream);
    outline: none;
}

/* Libelle masque par defaut : le bouton reste une icone carree. Il n'est
   revele que dans la colonne verticale du bloc Avant/Apres en desktop. */
.postprod-color-tool__primary-reset-all-label {
    display: none;
}

.postprod-color-tool__primary-control:last-of-type {
    margin-right: 1.85rem;
}

.postprod-color-tool__primary-control [data-color-primary-output]:hover,
.postprod-color-tool__primary-control [data-color-primary-output]:focus-visible,
.postprod-color-tool__primary-control [data-color-primary-output].is-dragging {
    border-color: rgba(238, 242, 249, 0.82);
    outline: none;
    background: #090b10;
}

.postprod-color-tool__primary-control [data-color-primary-output].is-editing,
.postprod-color-tool__wheel-values input.is-editing {
    cursor: text;
    user-select: text;
    border-color: var(--orange);
    outline: none;
}

.postprod-color-tool__primary-reset {
    position: absolute;
    top: 50%;
    right: -0.05rem;
    display: grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(225, 231, 242, 0.52);
    font: 600 0.72rem/1 sans-serif;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color 180ms ease, transform 180ms ease;
}

.postprod-color-tool__primary-reset:hover,
.postprod-color-tool__primary-reset:focus-visible {
    color: var(--cream);
    transform: translateY(-50%) rotate(-24deg);
    outline: none;
}

.postprod-color-tool__primary-range {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.postprod-color-tool__grade-workbench {
    display: grid;
    background: #05070c;
}

.postprod-color-tool__curves {
    min-height: 250px;
    border-top: 1px solid rgba(114, 149, 216, 0.2);
}

.postprod-color-tool__curve-visuals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
}

.postprod-color-tool__curve-editor {
    padding: 0.8rem;
    min-width: 0;
    border-right: 1px solid rgba(114, 149, 216, 0.2);
}

.postprod-color-tool__curve-editor header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
}

.postprod-color-tool__curve-editor header span { color: rgba(244, 240, 232, 0.55); }
.postprod-color-tool__curve-editor svg { display: block; width: 100%; height: auto; aspect-ratio: 1.9 / 1; overflow: visible; background: #05070c; touch-action: none; }
.postprod-color-tool__curve-grid path { fill: none; stroke: rgba(201, 205, 211, 0.28); stroke-width: 1; }
.postprod-color-tool__curve-reference { display: none; }
.postprod-color-tool__curve-fill { opacity: 0; }
.postprod-color-tool__curve-line { fill: none; stroke: var(--cream); stroke-width: 2; }
.postprod-color-tool__curve-point { fill: var(--orange); stroke: var(--cream); stroke-width: 3; cursor: grab; touch-action: none; }
.postprod-color-tool__curve-hit-area { fill: transparent; stroke: transparent; stroke-width: 18px; cursor: grab; pointer-events: all; touch-action: none; }
.postprod-color-tool__curve-endpoint { fill: var(--cream); stroke: #05070c; stroke-width: 1.5; }
.postprod-color-tool__curve-point--extra { stroke-width: 2; }
.postprod-color-tool__curve-scale text { fill: rgba(244, 240, 232, 0.68); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.postprod-color-tool__curve-scale .postprod-color-tool__curve-axis { fill: rgba(244, 240, 232, 0.72); font-size: 0.82rem; }

.postprod-color-tool__histogram {
    min-width: 0;
    padding: 0.8rem;
    background: #07090e;
}

.postprod-color-tool__histogram header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
}

.postprod-color-tool__histogram header span { color: rgba(244, 240, 232, 0.55); }
.postprod-color-tool__histogram svg { display: block; width: 100%; height: auto; aspect-ratio: 320 / 180; background: #090b11; }

.postprod-color-tool--compare .postprod-color-tool__curve-editor svg,
.postprod-color-tool--compare .postprod-color-tool__histogram svg {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.postprod-color-tool--compare {
    transform: translateY(-15px);
}
.postprod-color-tool__histogram-grid { fill: none; stroke: rgba(225, 192, 24, 0.28); stroke-width: 0.55; }
.postprod-color-tool__histogram-axis,
.postprod-color-tool__histogram-ticks { fill: none; stroke: rgba(225, 192, 24, 0.64); stroke-width: 0.65; }
.postprod-color-tool__histogram-scale text { fill: rgba(225, 192, 24, 0.78); font-size: 6px; font-variant-numeric: tabular-nums; }
.postprod-color-tool__histogram-scale text.is-red { fill: #ff3838; }
.postprod-color-tool__histogram-scale text.is-green { fill: #20ed72; }
.postprod-color-tool__histogram-scale text.is-blue { fill: #3e74ff; }
.postprod-color-tool__histogram-line { fill: none; stroke-width: 0.42; stroke-linecap: round; stroke-linejoin: round; opacity: 0.78; mix-blend-mode: normal; }
.postprod-color-tool__histogram-line.is-red { stroke: #ed2630; filter: none; }
.postprod-color-tool__histogram-line.is-green { stroke: #12d962; filter: none; }
.postprod-color-tool__histogram-line.is-blue { stroke: #3d64e8; filter: none; }
.postprod-color-tool__histogram-highlight {
    fill: none;
    stroke-width: 0.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0.8 1.7;
    opacity: 0.34;
    transform: translate(-0.18px, -0.22px);
    mix-blend-mode: normal;
    pointer-events: none;
}
.postprod-color-tool__histogram-highlight.is-red { stroke: #ffe4e2; }
.postprod-color-tool__histogram-highlight.is-green { stroke: #e0ffea; }
.postprod-color-tool__histogram-highlight.is-blue { stroke: #e4e9ff; }
.postprod-color-tool__histogram-shadow {
    fill: none;
    stroke: #000;
    stroke-width: 1.28;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.68;
    transform: translate(0.48px, 0.58px);
    pointer-events: none;
}

.postprod-color-tool--compare :is(.postprod-color-tool__curve-editor, .postprod-color-tool__histogram) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}

.postprod-color-tool--compare :is(.postprod-color-tool__curve-editor, .postprod-color-tool__histogram) header {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
}

.postprod-color-tool__analysis-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.postprod-color-tool__analysis-actions span {
    color: rgba(244, 240, 232, 0.55);
}

.postprod-color-tool__analysis-reset {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    border: 1px solid rgba(114, 149, 216, 0.34);
    border-radius: 2px;
    background: rgba(114, 149, 216, 0.06);
    color: rgba(244, 240, 232, 0.72);
    font-size: 0.72rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.postprod-color-tool__analysis-reset:is(:hover, :focus-visible) {
    border-color: rgba(225, 231, 242, 0.66);
    background: rgba(114, 149, 216, 0.14);
    color: var(--cream);
    outline: none;
}

.postprod-color-tool--compare .postprod-color-tool__curve-editor svg,
.postprod-color-tool--compare .postprod-color-tool__histogram svg {
    width: 100%;
    height: 100%;
    min-height: var(--color-analysis-height);
    margin: 0;
    aspect-ratio: auto;
}

.postprod-color-tool__compare .postprod-color-compare__divider {
    left: var(--compare-position);
    z-index: 8;
}

.postprod-color-tool__compare input[type="range"] {
    z-index: 10;
}

.postprod-color-tool__wheels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border-top: 1px solid rgba(114, 149, 216, 0.2);
    background: rgba(114, 149, 216, 0.18);
}

.postprod-color-tool__wheel {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.32rem;
    padding: clamp(0.72rem, 1.3vw, 1rem);
    color: var(--cream);
    background: #05070c;
}

.postprod-color-tool__wheel-control {
    --wheel-point-x: 50%;
    --wheel-point-y: 50%;
    --wheel-ring-turn: 0deg;
    --wheel-ring-white-start: 39%;
    --wheel-ring-white-end: 61%;
    position: relative;
    width: clamp(108px, 10vw, 154px);
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    outline: none;
    background: conic-gradient(
        from var(--wheel-ring-turn),
        #050608 0 calc(var(--wheel-ring-white-start) - 8%),
        #15161a calc(var(--wheel-ring-white-start) - 4%),
        #66686e var(--wheel-ring-white-start),
        #ffffff calc(var(--wheel-ring-white-start) + 2%) calc(var(--wheel-ring-white-end) - 2%),
        #8f9196 var(--wheel-ring-white-end),
        #15161a calc(var(--wheel-ring-white-end) + 4%),
        #050608 calc(var(--wheel-ring-white-end) + 8%) 100%
    );
    box-shadow: 0 0 0 4px #08090c;
    isolation: isolate;
    cursor: crosshair;
    touch-action: none;
}

.postprod-color-tool__wheel-control::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 6px;
    width: calc((100% - 12px) * 4);
    height: calc((100% - 12px) * 4);
    border-radius: 50%;
    background:
        linear-gradient(90deg, rgba(225, 228, 231, 0.52), rgba(225, 228, 231, 0.52)) center / 94% 4px no-repeat,
        linear-gradient(rgba(225, 228, 231, 0.52), rgba(225, 228, 231, 0.52)) center / 4px 94% no-repeat,
        radial-gradient(circle closest-side at 42% 36%, rgba(255, 255, 255, 0.15), transparent 54%),
        radial-gradient(circle closest-side at center, #44454a 0, #303136 72%, #24252a 92.8%, rgba(36, 37, 42, 0.55) 93.6%, transparent 94.4%),
        conic-gradient(from -12deg, #ff007f, #c300ff, #4058ff, #00d9ff, #00ec91, #20f43b, #fff000, #ff8700, #ff007f);
    box-shadow: 0 0 0 8px #111216;
    -webkit-mask-image: radial-gradient(circle at center, #000 0 98.7%, rgba(0, 0, 0, 0.7) 99.25%, transparent 100%);
    mask-image: radial-gradient(circle at center, #000 0 98.7%, rgba(0, 0, 0, 0.7) 99.25%, transparent 100%);
    transform: scale(0.25);
    transform-origin: 0 0;
    pointer-events: none;
}

.postprod-color-tool__wheel-control::after {
    content: '';
    position: absolute;
    inset: 24%;
    z-index: 1;
    border-radius: 50%;
    background: conic-gradient(from -18deg, #ec4a5b, #5c4ed2, #2397d7, #23bb73, #e1c336, #ec4a5b);
    filter: blur(9px) saturate(1.15);
    opacity: 0.16;
    pointer-events: none;
}

/* Keep Production and Post-production titles on the same hero axis as Pre-production. */
.production-v2 .production-v2__hero-copy,
.postprod-v2 .postprod-v2__hero-inner {
    width: min(1520px, calc(100% - clamp(44px, 8vw, 150px)));
    margin: 0 auto;
    place-items: initial;
    text-align: left;
}

/* Keep the three craft heroes on the same layout and transition axis. */
.process-page--preprod .process-hero,
.production-v2 .production-v2__hero {
    min-height: min(700px, 68svh);
    padding: clamp(116px, 11vw, 168px) clamp(24px, 7vw, 132px) clamp(74px, 8vw, 126px);
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: stretch;
    overflow: hidden;
    background: #000000;
}

.process-page--preprod .process-hero::after,
.production-v2 .production-v2__hero::after {
    display: none;
}

.process-page--preprod .process-breadcrumb,
.production-v2 .process-breadcrumb {
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0 auto clamp(24px, 2.5vw, 40px);
    justify-self: center;
    text-align: center;
}

.process-page--preprod .page-hero__inner,
.production-v2 .production-v2__hero-copy {
    width: min(1520px, calc(100% - clamp(44px, 8vw, 150px)));
    margin: 0 auto;
    align-self: stretch;
    display: grid;
    align-content: center;
    place-items: initial;
    text-align: left;
}

.process-page--preprod .process-hero h1,
.production-v2 .production-v2__hero h1 {
    margin-top: 0;
}

/* --- Extinction du blob au bas des trois heros ---

   Chaque hero porte un blob en ::before qui deborde volontairement sous la
   section -- mesure sur Production : 676px de diametre dont 255 sous le bord
   bas, et au niveau de la coupure on est encore a 25% du rayon depuis le
   centre, donc en pleine intensite. overflow: hidden le tranche net.

   Ce n'etait pas visible tant qu'un media suivait le hero : le bord haut du
   showreel (ou de la figure en Pre-production) tombait exactement sur la
   coupure, qui se lisait comme une limite de section. Les trois retires, la
   ligne apparait en clair sur noir.

   Laisser deborder n'est pas une option : les blobs de Post-production et
   Pre-production sont animes et descendent jusqu'a 28vh, ils se promeneraient
   sur toute la page. Ce degrade eteint donc le blob avant le bord, et la
   coupure tombe dans du noir.

   Il fond vers #000000 sur les trois pages : Production et Pre-production ont
   un hero noir opaque, et le degrade de fond de Post-production finit
   lui-meme sur du noir pur a 100% (verifie sur la page servie).

   z-index 0, comme le blob : peint apres lui puisque ::after suit ::before,
   mais sous le contenu, qui est en z-index 1. Les proprietes remises a plat
   viennent de la regle commune ::before/::after des deux pages animees
   (cercle, mix-blend-mode: screen).

   Le degrade couvre TOUT le hero, pas seulement sa base. Mesure sur la page
   servie a 375px : le blob s'arrete a 596px pour un hero de 600, la coupure
   n'etait donc pas a son bord bas. Le seul bord restant etait celui du fondu
   lui-meme, qui demarrait a 389px, en plein dans le halo : l'opacite y est
   nulle, mais sa PENTE saute de zero a sa valeur de regime, et l'oeil lit
   cette cassure de pente comme un trait (bande de Mach). Etale sur toute la
   hauteur, le degrade n'a plus aucun bord interieur : il commence la ou le
   hero commence, a opacite nulle, et finit sur son fond exact.

   Les paliers suivent une courbe en S : l'attenuation reste nulle sur le
   premier tiers puis monte et redescend en pente continue, sans palier ou la
   derivee saute.

   Le noir est atteint a 92% de la hauteur, pas a 100% : les 8% restants sont
   deja pleins, la jonction avec la section suivante se fait noir contre noir,
   avec de la marge pour les arrondis de rasterisation.

   La courbe est echantillonnee sur 47 paliers, et non sur la dizaine qui
   suffirait a la decrire. Un degrade CSS interpole LINEAIREMENT entre deux
   paliers : la pente y est constante et saute a chaque palier. Avec dix
   paliers, ces sauts atteignaient 0,013 d'opacite par pourcent de hauteur --
   assez pour que l'oeil lise une barre a l'endroit du saut (bande de Mach).
   Mesure dans Chrome sur la page reelle : la barre tombait a 274px sur un
   hero de 311, soit le palier a 86,5%. Densifier l'echantillonnage ramene le
   saut maximal a 0,0019, sept fois moins. */
.process-page--preprod .process-hero::after,
.process-page--postprod .process-hero::after,
.production-v2 .production-v2__hero::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 25%,
        rgba(0, 0, 0, 0.0015) 26.52%,
        rgba(0, 0, 0, 0.0060) 28.05%,
        rgba(0, 0, 0, 0.0133) 29.57%,
        rgba(0, 0, 0, 0.0233) 31.09%,
        rgba(0, 0, 0, 0.0358) 32.61%,
        rgba(0, 0, 0, 0.0507) 34.14%,
        rgba(0, 0, 0, 0.0679) 35.66%,
        rgba(0, 0, 0, 0.0872) 37.18%,
        rgba(0, 0, 0, 0.1084) 38.7%,
        rgba(0, 0, 0, 0.1315) 40.23%,
        rgba(0, 0, 0, 0.1562) 41.75%,
        rgba(0, 0, 0, 0.1826) 43.27%,
        rgba(0, 0, 0, 0.2103) 44.8%,
        rgba(0, 0, 0, 0.2393) 46.32%,
        rgba(0, 0, 0, 0.2694) 47.84%,
        rgba(0, 0, 0, 0.3005) 49.36%,
        rgba(0, 0, 0, 0.3325) 50.89%,
        rgba(0, 0, 0, 0.3651) 52.41%,
        rgba(0, 0, 0, 0.3984) 53.93%,
        rgba(0, 0, 0, 0.4320) 55.45%,
        rgba(0, 0, 0, 0.4659) 56.98%,
        rgba(0, 0, 0, 0.5000) 58.5%,
        rgba(0, 0, 0, 0.5341) 60.02%,
        rgba(0, 0, 0, 0.5680) 61.55%,
        rgba(0, 0, 0, 0.6016) 63.07%,
        rgba(0, 0, 0, 0.6349) 64.59%,
        rgba(0, 0, 0, 0.6675) 66.11%,
        rgba(0, 0, 0, 0.6995) 67.64%,
        rgba(0, 0, 0, 0.7306) 69.16%,
        rgba(0, 0, 0, 0.7607) 70.68%,
        rgba(0, 0, 0, 0.7897) 72.2%,
        rgba(0, 0, 0, 0.8174) 73.73%,
        rgba(0, 0, 0, 0.8438) 75.25%,
        rgba(0, 0, 0, 0.8685) 76.77%,
        rgba(0, 0, 0, 0.8916) 78.3%,
        rgba(0, 0, 0, 0.9128) 79.82%,
        rgba(0, 0, 0, 0.9321) 81.34%,
        rgba(0, 0, 0, 0.9493) 82.86%,
        rgba(0, 0, 0, 0.9642) 84.39%,
        rgba(0, 0, 0, 0.9767) 85.91%,
        rgba(0, 0, 0, 0.9867) 87.43%,
        rgba(0, 0, 0, 0.9940) 88.95%,
        rgba(0, 0, 0, 0.9985) 90.48%,
        #000000 92%,
        #000000 100%
    );
    mix-blend-mode: normal;
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
    will-change: auto;
    pointer-events: none;
}

@media (max-width: 980px) {
    .process-page--preprod .process-hero,
    .production-v2 .production-v2__hero {
        min-height: 680px;
    }
}

@media (max-width: 620px) {
    .process-page--preprod .process-hero,
    .production-v2 .production-v2__hero {
        min-height: 600px;
        padding-inline: 18px;
    }
}

.postprod-color-tool__wheel-control:focus-visible {
    box-shadow: 0 0 0 3px rgba(114, 149, 216, 0.5);
}

.postprod-color-tool__wheel-control i {
    position: absolute;
    left: var(--wheel-point-x);
    top: var(--wheel-point-y);
    width: 5px;
    height: 5px;
    box-sizing: border-box;
    border: 0;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 3px rgba(255, 255, 255, 0.42);
    z-index: 2;
}

.postprod-color-tool__wheel-values {
    width: min(100%, 150px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 0 0 5px;
}

.postprod-color-tool__wheel-values--rgb {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.postprod-color-tool__wheel-values span {
    --wheel-channel: rgba(244, 240, 232, 0.48);
    position: relative;
    min-width: 0;
    padding: 0.2rem 0.16rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #44474d;
    border-radius: 3px;
    background: #050608;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
    cursor: ew-resize;
    touch-action: none;
}

.postprod-color-tool__wheel-values span:focus-visible {
    outline: 1px solid rgba(244, 240, 232, 0.86);
    outline-offset: 2px;
}

.postprod-color-tool__wheel-values span::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: -5px;
    height: 2px;
    background: var(--wheel-channel);
}

.postprod-color-tool__wheel-values span:nth-child(1) { --wheel-channel: #f7f7f4; }
.postprod-color-tool__wheel-values span:nth-child(2) { --wheel-channel: #ff3029; }
.postprod-color-tool__wheel-values span:nth-child(3) { --wheel-channel: #22e575; }
.postprod-color-tool__wheel-values span:nth-child(4) { --wheel-channel: #3476ff; }
.postprod-color-tool__wheel-values--rgb span:nth-child(1) { --wheel-channel: #ff3029; }
.postprod-color-tool__wheel-values--rgb span:nth-child(2) { --wheel-channel: #22e575; }
.postprod-color-tool__wheel-values--rgb span:nth-child(3) { --wheel-channel: #3476ff; }

.postprod-color-tool__wheel-values small {
    display: none;
}

.postprod-color-tool__wheel-values input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(244, 240, 232, 0.9);
    font: 600 0.62rem/1 var(--font-body);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.postprod-color-tool__wheel-values input.is-editing {
    color: #fff;
    cursor: text;
}

.postprod-color-tool__wheel-level {
    --wheel-level-turn: 0px;
    position: relative;
    width: min(100%, 150px);
    height: 14px;
    margin: 0.3rem 0 0;
    overflow: hidden;
    border: 1px solid #050608;
    border-radius: 999px;
    outline: none;
    background: #08090b;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);
    cursor: ew-resize;
    touch-action: none;
}

.postprod-color-tool__wheel-level::before {
    content: "";
    display: none;
}

.postprod-color-tool__wheel-level::after {
    display: none;
}

.postprod-color-tool__wheel-level i {
    position: absolute;
    inset: 2px 4px;
    z-index: 2;
    display: block;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, #111216 0 2px, #4d5056 2px 3px, #1a1c20 3px 5px);
    background-position: var(--wheel-level-turn) 0;
    transition: background-position 90ms linear;
}

.postprod-color-tool__wheel-level:focus-visible {
    box-shadow: 0 0 0 2px rgba(111, 149, 244, 0.8);
}

.postprod-color-tool__wheel-reset {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 32px;
    height: 32px;
    border: 0;
    color: rgba(244, 240, 232, 0.55);
    background: transparent;
    cursor: pointer;
}

.postprod-color-tool__wheel-reset:is(:hover, :focus-visible) {
    color: var(--orange);
    outline: none;
}

@media (min-width: 981px) {
    .postprod-color-tool--compare {
        display: grid;
        grid-template-columns: minmax(160px, 0.85fr) minmax(0, 4fr) minmax(160px, 0.95fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .postprod-color-tool--compare > .postprod-color-tool__heading {
        grid-column: 2;
        grid-row: 1;
    }

    .postprod-color-tool--compare > .postprod-color-tool__compare {
        grid-column: 2;
        grid-row: 2;
    }

    .postprod-color-tool--compare > .postprod-color-tool__primary {
        grid-column: 1;
        grid-row: 1 / -1;
        grid-template-columns: minmax(0, 1fr);
        align-content: stretch;
        justify-content: stretch;
        gap: 0;
        padding: 0.55rem 0.72rem;
        border-top: 0;
        border-bottom: 0;
        border-right: 1px solid rgba(114, 149, 216, 0.2);
    }

    .postprod-color-tool--compare > .postprod-color-tool__primary .postprod-color-tool__primary-control {
        grid-template-columns: minmax(0, 1fr) 3.2rem;
        padding-right: 1.62rem;
    }

    .postprod-color-tool--compare > .postprod-color-tool__primary .postprod-color-tool__primary-control:last-of-type {
        margin-right: 0;
    }

    .postprod-color-tool--compare > .postprod-color-tool__primary .postprod-color-tool__primary-reset {
        right: 0.32rem;
        width: 0.9rem;
        height: 0.9rem;
        font-size: 0.66rem;
    }

    /* Le bouton "tout reset" quitte le coin haut-droite pour s'inserer dans la
       liste, entre "Basses lumieres" (3e controle) et "Hautes lumieres". */
    .postprod-color-tool--compare > .postprod-color-tool__primary > .postprod-color-tool__primary-control:nth-of-type(-n + 3) {
        order: 1;
    }

    /* Calque sur .postprod-color-tool__primary-control : libelle a gauche,
       boite d'icone a droite, meme gouttiere. */
    .postprod-color-tool--compare > .postprod-color-tool__primary > .postprod-color-tool__primary-reset-all {
        order: 2;
        position: static;
        justify-self: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 3.2rem;
        align-items: center;
        gap: 0.22rem;
        width: auto;
        height: auto;
        padding: 0 1.62rem 0 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    .postprod-color-tool--compare > .postprod-color-tool__primary > .postprod-color-tool__primary-control:nth-of-type(n + 4) {
        order: 3;
    }

    .postprod-color-tool--compare > .postprod-color-tool__primary > .postprod-color-tool__primary-reset-all .postprod-color-tool__primary-reset-all-label {
        display: block;
        color: var(--cream);
        /* Aligne sur les libelles voisins, qui retombent sur la police du corps
           (leur raccourci `font` echoue : --font-body n'est pas defini). */
        font-family: "Creato", Arial, sans-serif;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.2;
        text-align: left;
    }

    .postprod-color-tool--compare > .postprod-color-tool__primary > .postprod-color-tool__primary-reset-all .postprod-color-tool__primary-reset-all-glyph {
        /* Les champs de valeur voisins font 3.7rem et debordent de leur colonne
           de 3.2rem : on centre l'icone sur leur largeur reelle, pas sur la
           colonne, pour que les centres coincident. */
        justify-self: start;
        margin-left: calc((3.7rem - 22px) / 2);
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border: 1px solid rgba(225, 231, 242, 0.4);
        border-radius: 3px;
        background: rgba(225, 231, 242, 0.1);
        color: rgba(244, 240, 232, 0.9);
        font-size: 0.82rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
        transition: transform 180ms ease, border-color 180ms ease;
    }

    .postprod-color-tool--compare > .postprod-color-tool__primary > .postprod-color-tool__primary-reset-all:is(:hover, :focus-visible) {
        border: 0;
        transform: none;
    }

    .postprod-color-tool--compare > .postprod-color-tool__primary > .postprod-color-tool__primary-reset-all:is(:hover, :focus-visible) .postprod-color-tool__primary-reset-all-glyph {
        border-color: rgba(225, 231, 242, 0.82);
        transform: rotate(-24deg);
    }

    .postprod-color-tool--nodes .postprod-color-tool__layout {
        min-height: clamp(300px, 28vw, 420px);
    }

    .postprod-color-tool--compare {
        width: 105%;
        margin-inline: -2.5%;
    }

    .postprod-color-tool--compare > .postprod-color-tool__grade-workbench,
    .postprod-color-tool--compare > .postprod-color-tool__grade-workbench > .postprod-color-tool__grade-panel {
        display: contents;
    }

    .postprod-color-tool--compare .postprod-color-tool__wheels {
        grid-column: 3;
        grid-row: 1 / -1;
        grid-template-columns: minmax(0, 1fr);
        align-content: stretch;
        min-width: 0;
        border-top: 0;
        border-left: 1px solid rgba(114, 149, 216, 0.2);
    }

    .postprod-color-tool--compare .postprod-color-tool__wheels > .postprod-color-tool__wheel {
        align-content: center;
    }

    .postprod-color-tool--compare .postprod-color-tool__curves {
        grid-column: 2;
        grid-row: 3;
    }

    .postprod-color-tool--compare .postprod-color-tool__curve-visuals {
        --color-analysis-height: clamp(150px, 12vw, 180px);
        /* Reste a 250px tant que la photo grandit encore (< ~1769px de large).
           Une fois la photo au plafond, absorbe l'excedent (jusqu'a +150px). */
        height: calc(250px + clamp(0px, 26vw - 460px, 150px));
        min-height: 0;
        align-items: stretch;
    }

    .postprod-color-tool--compare .postprod-color-tool__curve-editor svg,
    .postprod-color-tool--compare .postprod-color-tool__histogram svg {
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
        aspect-ratio: auto;
    }

    .postprod-color-tool--compare .postprod-color-tool__heading {
        align-items: center;
        gap: 0.38rem;
        padding: 0.28rem clamp(0.5rem, 0.8vw, 0.7rem);
    }

    .postprod-color-tool--compare .postprod-color-tool__heading > span {
        font-size: 0.42rem;
    }

    .postprod-color-tool--compare .postprod-color-tool__heading h3 {
        font-size: clamp(0.72rem, 0.9vw, 0.86rem);
    }

    .postprod-color-tool--compare .postprod-color-tool__subtitle {
        font-size: clamp(0.54rem, 0.62vw, 0.62rem);
    }

    .postprod-color-tool--compare :is(.postprod-color-tool__import, .postprod-color-tool__save) {
        min-width: 88px;
        min-height: 32px;
        gap: 0.35rem;
        padding: 0.32rem 0.58rem;
        font-size: 0.72rem;
    }

    .postprod-color-tool--compare :is(.postprod-color-tool__import-icon, .postprod-color-tool__save-icon) {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    .postprod-color-tool--compare .postprod-color-tool__compare {
        width: 100%;
        height: 100%;
        /* +30px sur toute la plage. Le plafond (460px) passe donc a 490px,
           atteint a ~1769px de large ; au-dela la photo ne grandit plus et
           l'excedent est redirige vers les courbes (voir curve-visuals). */
        min-height: calc(clamp(300px, 26vw, 460px) + 30px);
        aspect-ratio: auto;
        margin: 0 auto;
    }

    .postprod-color-tool--compare .postprod-color-tool__wheel {
        gap: 0.08rem;
        padding: clamp(0.2rem, 0.4vw, 0.34rem);
    }

    .postprod-color-tool--compare .postprod-color-tool__wheel-control {
        width: clamp(76px, 5.4vw, 88px);
    }

    .postprod-color-tool--compare .postprod-color-tool__wheel > strong {
        font-size: 0.72rem;
    }

    .postprod-color-tool--compare .postprod-color-tool__wheel-values {
        width: min(100%, 142px);
    }

    .postprod-color-tool--compare .postprod-color-tool__wheel-values small {
        font-size: 0.46rem;
    }

    .postprod-color-tool--compare .postprod-color-tool__wheel-values input {
        font-size: 0.56rem;
    }

    .postprod-color-tool--compare .postprod-color-tool__wheel-level {
        width: min(100%, 142px);
        height: 12px;
        margin-top: 0.06rem;
        border-radius: 999px;
    }

    .postprod-color-tool--compare .postprod-color-tool__wheel-reset {
        top: 0.48rem;
        right: 0.58rem;
        width: 18px;
        height: 18px;
        font-size: 0.62rem;
    }

    .postprod-color-tool--compare .postprod-color-tool__curves {
        min-height: 0;
    }

    .postprod-color-tool--compare :is(.postprod-color-tool__curve-editor, .postprod-color-tool__histogram) {
        padding: 0.5rem 0.65rem;
    }

    .postprod-color-tool--compare :is(.postprod-color-tool__curve-editor, .postprod-color-tool__histogram) header {
        margin-bottom: 0.28rem;
        font-size: 0.62rem;
    }

}

/* Portail Color en mobile/tablette : clone de la mecanique desktop.
   Rien n'est recalcule ici. measureColorFocus releve la position reelle du "o"
   et vise une diagonale x 2.65 : le trou transparent du masque (43% du rayon)
   depasse alors l'ecran, et c'est ce qui donne l'ouverture. Ma tentative
   precedente visait un facteur 34 la ou il en fallait 78 sur un ecran de
   430x932 -- le trou n'atteignait pas les bords et la couronne opaque
   remplissait tout. La geometrie mesuree s'adapte d'elle-meme a chaque format.

   Ces regles sont ADDITIVES et portees par .has-color-motion : les reglages
   statiques :not(.has-postprod-motion) restent en place pour les autres
   sequences, seul le bloc Color bascule. */
@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
    /* Hauteur de defilement dediee. Le desktop en prend 368vh pour ses 5
       phases ; 220 suffit en mobile, ou la sequence est plus ramassee. */
    .postprod-v2.has-color-motion .postprod-color {
        --postprod-color-transition-height: 220svh;
    }

    .postprod-v2.has-color-motion .postprod-color__transition {
        height: var(--postprod-color-transition-height);
    }

    /* .postprod-organisation porte z-index: 2, .postprod-sequence rien du tout :
       la section Color passait donc SOUS la scene "Notre organisation". Sans
       consequence tant que les deux ne se chevauchaient pas, mais la section est
       desormais remontee d'un ecran (--organisation-tail-lift) pour coller a la
       sortie de la carte 8, et son panneau noir doit recouvrir la fin de la
       scene -- vide a ce moment-la, toutes les cartes sont sorties. */
    .postprod-v2.has-color-motion .postprod-color {
        position: relative;
        z-index: 3;
        /* Partagee entre le titre et la remontee de Node, qui doit connaitre la
           hauteur du titre pour ne pas le recouvrir. Voir .postprod-color__content
           plus bas. */
        --color-portal-heading-size: clamp(2.6rem, 14.5vw, 7.2rem);
        /* 86px de rembourrage haut avant le premier enfant, qui est justement le
           panneau noir plein cadre du portail : rien a espacer, et ils
           s'ajoutaient a l'ecart vise avec la carte 8. Le bas est conserve, il
           separe la sequence des outils Color qui suivent. */
        padding-top: 0;
    }

    /* Specificite volontairement superieure a
       .postprod-v2:not(.has-postprod-motion) .postprod-sticky, qui remet tous
       les sticky en position: relative. On ne neutralise cette regle QUE pour
       le bloc Color, les autres sequences gardent leur mise en page statique. */
    .postprod-v2.has-color-motion .postprod-color .postprod-color__sticky {
        position: sticky;
        top: 0;
        height: 100svh;
        min-height: 100svh;
        padding: 0;
    }

    /* Le mot repasse en calque plein cadre : sur mobile il etait remis en flux
       avec une hauteur minimale, ce qui l'empechait de servir de point de
       depart au portail. */
    .postprod-v2.has-color-motion .postprod-color-intro {
        position: absolute;
        inset: 0;
        min-height: 0;
        display: grid;
        place-items: center;
        /* +40% (etait clamp(4rem, 12vw, 10rem)). Le rond du portail (0.55em)
           et sa cible d'ouverture sont mesures en direct sur cet element par
           measureColorFocus() : rien a recalculer, la geometrie du portail
           s'adapte d'elle-meme a la nouvelle taille. */
        font-size: clamp(5.6rem, 16.8vw, 14rem);
    }

    .postprod-v2.has-color-motion .postprod-color-intro__portal-layer {
        display: grid;
    }

    /* Le titre du chapitre est la revelation finale du portail. Sa police
       desktop (60,8px au plancher) avec white-space: nowrap deborderait d'un
       ecran de 430px. */
    .postprod-v2.has-color-motion .postprod-color__portal-heading {
        display: grid;
        white-space: normal;
        /* Double (etait clamp(1.6rem, 7.5vw, 3.4rem)) et recentre au milieu de
           l'ecran, a la demande explicite -- l'ancrage en bas precedent est
           abandonne. Le 15vw d'origine (doublage exact) depassait de peu la
           largeur disponible (padding-inline: 5vw de chaque cote) et repliait
           "FX" sur une seconde ligne : mesure sur police reelle, le ratio
           taille/largeur qui tient sur une ligne est constant a 14,92vw entre
           320px et 980px (texte fixe, padding proportionnel). 14.5vw garde une
           marge de securite sous ce seuil. */
        font-size: var(--color-portal-heading-size);
        align-items: center;
    }

    /* L'opacite de ces trois elements est ecrite en JS a chaque frame de
       scroll, sans transition CSS : entre deux frames, la valeur saute
       directement d'un etat a l'autre. A vitesse de defilement normale, assez
       de frames s'intercalent pour que l'oeil perçoive un fondu. Sur un
       flick rapide (notamment en arriere), le navigateur saute des frames --
       normal, independant de ce site -- et deux frames consecutives peuvent
       tomber de part et d'autre de la zone morte entre "Color" et "02/Color
       & FX" (aucun des deux visible entre les deux), donnant l'impression
       d'un remplacement instantane au lieu d'un fondu. Une transition CSS
       lisse ce saut quelle que soit la vitesse de defilement. */
    .postprod-color-title__rest,
    .postprod-color-intro__portal-source,
    .postprod-v2.has-color-motion .postprod-color__portal-heading {
        transition: opacity 220ms ease;
    }

    /* Le titre est centre dans un sticky d'une hauteur d'ecran, et Node demarre
       la ou la piste de defilement se termine : l'ecart vaut donc
       mecaniquement la moitie basse du sticky (50svh moins la demi-hauteur du
       titre), soit ~393px. Le reduire en descendant le titre le decentrerait ;
       on remonte donc Node a la place, exactement comme le desktop le fait deja
       avec margin-top: -35svh sur ce meme element. La regle mobile qui
       neutralisait cette marge (.postprod-v2 .postprod-color__content,
       margin-top: 0) datait de l'epoque ou la section n'etait pas sticky ; elle
       reste en place pour le cas sans animation, ou il n'y a pas de sticky a
       compenser, et n'est levee que sous has-color-motion.

       Plafond : Node ne doit pas recouvrir le titre pendant l'epinglage. En fin
       d'epinglage, le haut de Node est a (100svh - marge) du haut de l'ecran et
       le bas du titre a (50svh + demi-hauteur du titre). D'ou la marge
       maximale : 50svh - demi-hauteur du titre - ecart voulu.

       Une valeur fixe en svh ne tient pas : le titre est dimensionne en vw, sa
       hauteur et celle de l'ecran divergent donc selon le ratio. Mesure a -37svh
       : 78px d'ecart sur un telephone en portrait (393x852) mais 4px a 960x560,
       et un chevauchement franc sur un telephone en paysage (852x393), ou le
       titre atteint son plafond de 7.2rem dans un ecran deux fois plus bas. La
       demi-hauteur du titre est donc reprise dans le calcul via la variable
       partagee (0.65em couvre la boite de texte a line-height: 0.92), ce qui
       rend les 75px d'ecart constants a tous les ratios. Si l'ecran devient
       assez bas pour que la marge passe positive, elle ne fait qu'ecarter
       davantage Node : aucun risque de recouvrement. */
    .postprod-v2.has-color-motion .postprod-color__content {
        margin-top: calc(75px + 0.65 * var(--color-portal-heading-size) - 50svh);
    }
}

@media (max-width: 980px) {
    .postprod-v2 .postprod-color {
        --postprod-color-transition-height: 100svh;
    }

    /* Les blobs de la roue chromatique sont un halo pose autour du mot. Leur
       opacite suit --color-source-opacity, qui vaut 1 au repos : sur mobile ils
       etaient donc deja la avant la sequence, d'ou le display: none precedent.
       Ils sont desormais pilotes par is-color-blobs-live, pose des que le
       sticky s'epingle -- c'est-a-dire quand le mot arrive au centre de l'ecran
       (voir renderColorSequence). Le portail s'ouvre ensuite a p = 0.2 : les
       blobs s'allument bien avant lui. Tant que la classe est absente ils sont
       en visibility: hidden, donc ni composites ni rasterises : le cout des 7
       disques en blur(48px) + screen n'est paye que pendant la sequence. */
    .postprod-color-wheel-blobs {
        opacity: 0;
        visibility: hidden;
        transition: opacity 520ms ease, visibility 0s linear 520ms;
    }

    .postprod-color.is-color-blobs-live .postprod-color-wheel-blobs {
        opacity: 1;
        visibility: visible;
        transition: opacity 520ms ease, visibility 0s;
    }

    /* Le degrade de masque desktop est fondu jusqu'a 42% de la hauteur. Sur un
       ecran de telephone l'eclatement radial monte a ~240px au-dessus du centre,
       soit dans cette zone : la moitie haute de la roue disparaissait. Le fondu
       est ramene aux 20 premiers pour cent, ce qui garde la coupure franche en
       haut du sticky sans manger la roue. */
    .postprod-color-wheel-blobs {
        mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.55) 8%, black 20%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.55) 8%, black 20%);
    }

    .postprod-color__portal-heading {
        display: none;
    }

    .postprod-v2 .postprod-color__content {
        margin-top: 0;
    }

    /* .postprod-color__content commence juste apres le depinglage du sticky.
       Les 100px voules entre le titre et "01 Node" sont deja tenus par
       l'ancrage en bas du titre (padding-bottom: 100px sur
       .postprod-color__portal-heading, juste au-dessus) : le padding-top
       s'y ajouterait en double. Le vrai padding applique ici vient de
       .postprod-v2 .postprod-color__content (specificite 0,2,0, non scope a
       980px) : il faut l'egaler pour le remplacer, un simple
       .postprod-color__content n'aurait pas suffi. */
    .postprod-v2 .postprod-color__content {
        padding-top: 0;
    }

    .postprod-color-tool__layout {
        grid-template-columns: 1fr;
    }

    .postprod-color-tool__viewer {
        aspect-ratio: 16 / 9;
    }

    .postprod-color-tool__side,
    .postprod-color-tool__looks {
        border-top: 1px solid rgba(114, 149, 216, 0.2);
        border-left: 0;
    }

    .postprod-color-tool__wheels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .postprod-color-tool__primary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .postprod-color-tool__curves {
        grid-template-columns: 1fr;
    }

    .postprod-color-tool__curve-visuals {
        grid-template-columns: 1fr;
        border-right: 0;
    }

    .postprod-color-tool__curve-editor {
        border-right: 0;
        border-bottom: 1px solid rgba(114, 149, 216, 0.2);
    }

    .postprod-color-tool__histogram {
        border-bottom: 1px solid rgba(114, 149, 216, 0.2);
    }
}

@media (max-width: 620px) {
    .postprod-color-tool__primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .postprod-color-tool__curve-editor svg {
        height: auto;
    }

    .postprod-color-tool__histogram svg {
        height: auto;
    }

    .postprod-color-tool--compare .postprod-color-tool__wheel {
        gap: 0.18rem;
        padding: 0.5rem 0.3rem;
    }

    .postprod-color-tool--compare .postprod-color-tool__wheel-control {
        width: 94px;
    }
    .postprod-color-tool--compare .postprod-color-tool__heading {
        flex-wrap: wrap;
    }

    .postprod-color-tool--compare .postprod-color-tool__subtitle {
        width: 100%;
        padding-left: 1.3rem;
    }

    .postprod-mix__intro h2 {
        white-space: normal;
    }

    .postprod-color-tools {
        width: min(94vw, 520px);
    }

    .postprod-color-tool__nodes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .postprod-color-tool__nodes button:nth-of-type(1) { grid-column: 1; grid-row: 1; }
    .postprod-color-tool__nodes button:nth-of-type(2) { grid-column: 2; grid-row: 1; }
    .postprod-color-tool__nodes button:nth-of-type(3) { grid-column: 2; grid-row: 2; }
    .postprod-color-tool__nodes button:nth-of-type(4) { grid-column: 1; grid-row: 2; }
    .postprod-color-tool__nodes button:nth-of-type(5) { grid-column: 1; grid-row: 3; }

    .postprod-color-tool__compare {
        aspect-ratio: 4 / 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .postprod-color-tool__viewer img,
    .postprod-color-tool__node-overlay,
    .postprod-color-tool__nodes button,
    .postprod-color-tool__looks button {
        transition: none;
    }

    .postprod-mix__title-wave > span {
        animation: none;
    }
}

/* Post-production — Notre organisation */
.postprod-organisation {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: clamp(3.5rem, 5vw, 6rem) 0;
    color: #f6f2eb;
    background: #000;
}

.postprod-organisation::before {
    display: none;
}

.postprod-organisation__inner {
    position: relative;
    width: min(92vw, 1420px);
    margin: 0 auto;
}

.postprod-organisation__heading {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    align-items: end;
    padding-bottom: clamp(2rem, 4vw, 4rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.postprod-organisation__heading span {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0.8rem;
    color: #ff5a19;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.postprod-organisation__heading h2 {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    /* Le plancher de 3rem ne se degradait pas sur ecran etroit : a 360px de
       large (Oppo A53s en portrait) "Notre organisation" demande 48px alors que
       45px seulement tiennent sur une ligne, d'ou le repli sur deux lignes qui
       mange la place des cartes. Le plancher suit donc la largeur en dessous de
       ~418px. Au-dela, min() rend la main a 3rem et rien ne change -- iPhone a
       440px compris, ou le titre tient deja. */
    font-size: clamp(min(3rem, 11.5vw), 7vw, 7.4rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.055em;
}

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

.postprod-organisation__step {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: center;
    min-height: clamp(240px, 22vw, 340px);
    padding: clamp(1.25rem, 2.25vw, 2.25rem) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.postprod-organisation__media {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(129, 158, 210, 0.24);
    background: #17191e;
}

.postprod-organisation__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.postprod-organisation__media img,
.postprod-organisation__media video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 430px;
    object-fit: contain;
    background: #202228;
}

.postprod-organisation__media--recadrage {
    aspect-ratio: 16 / 9;
    width: 92%;
    max-width: 760px;
    justify-self: center;
}

.postprod-organisation__media--recadrage video {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    transform: scale(1.2);
}

.postprod-organisation__media--duo {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
}

.postprod-organisation__media--duo img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
}

.postprod-organisation__media--duo img + img {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 0;
}

.postprod-organisation__copy {
    position: relative;
    align-self: center;
    padding-inline: clamp(1rem, 1.5vw, 2rem);
    text-align: center;
}

.postprod-organisation__copy::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    bottom: 0.35rem;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg, #ff5a19 0 26%, rgba(255, 90, 25, 0.12) 26% 100%);
}

.postprod-organisation__copy span {
    display: block;
    margin-bottom: clamp(1.1rem, 2vw, 2rem);
    color: #ff5a19;
    font-size: 1.4375rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.postprod-organisation__copy h3 {
    max-width: 17ch;
    margin: 0 auto;
    font-size: clamp(1.95rem, 2.6vw, 3.25rem);
    font-weight: 560;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.postprod-organisation__copy h3 .postprod-organisation__title-line {
    display: block;
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

/* La scene empilee etait bornee a min-width:981px. Elle tourne desormais aussi
   en mobile/tablette : la borne de largeur est retiree, seule la preference
   systeme "mouvement reduit" la desactive encore. La mise en page interne des
   cartes (2 colonnes) est adaptee en une colonne plus bas. */
@media (prefers-reduced-motion: no-preference) {
    .postprod-organisation.is-scroll-scene {
        height: var(--organisation-narrative-height, 640svh);
        padding: 0;
        overflow: clip;
    }

    .postprod-organisation.is-scroll-scene .postprod-organisation__inner {
        position: sticky;
        top: 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        width: min(94vw, 1680px);
        height: 100svh;
        padding: clamp(24px, 4vh, 54px) 0;
    }

    .postprod-organisation.is-scroll-scene .postprod-organisation__heading {
        padding-bottom: clamp(18px, 2.7vh, 34px);
    }

    .postprod-organisation.is-scroll-scene .postprod-organisation__steps {
        position: relative;
        min-height: 0;
        overflow: clip;
    }

    .postprod-organisation.is-scroll-scene .postprod-organisation__step {
        --organisation-y: 108%;
        --organisation-opacity: 0;
        --organisation-blur: 0px;
        --organisation-scale: 0.975;
        --organisation-z: 0;
        position: absolute;
        inset: clamp(22px, 3.5vh, 42px) 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
        gap: clamp(2rem, 5vw, 6rem);
        align-items: stretch;
        height: clamp(360px, 52svh, 560px);
        min-height: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        background: #000;
        opacity: var(--organisation-opacity);
        filter: blur(var(--organisation-blur));
        pointer-events: none;
        transform: translate3d(0, var(--organisation-y), 0) scale(var(--organisation-scale));
        transform-origin: center bottom;
        z-index: var(--organisation-z);
        will-change: opacity, filter, transform;
    }

    .postprod-organisation.is-scroll-scene .postprod-organisation__media {
        height: 100%;
        border: 0;
        background: #000;
    }

    .postprod-organisation.is-scroll-scene .postprod-organisation__media::after {
        display: none;
    }

    .postprod-organisation.is-scroll-scene .postprod-organisation__media > img,
    .postprod-organisation.is-scroll-scene .postprod-organisation__media > video {
        height: 100%;
        max-height: none;
        object-fit: contain;
        background: #000;
    }

    .postprod-organisation.is-scroll-scene .postprod-organisation__media--recadrage {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .postprod-organisation.is-scroll-scene .postprod-organisation__copy {
        align-self: center;
    }

    .postprod-organisation.is-scroll-scene .postprod-organisation__step.is-organisation-active {
        pointer-events: auto;
    }
}

/* Version une colonne de la scene empilee. La regle desktop pose
   grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr) : la seconde
   piste a elle seule depasse la largeur d'un telephone, la carte debordait
   donc horizontalement. Chiffre + titre en haut, media en bas (ordre inverse
   du HTML, ou le media vient en premier) : copy passe en order:-1 pour se
   placer dans la ligne auto du haut, le media garde sa position par defaut
   et occupe la ligne 1fr du bas. */
@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
    /* La regle de base pose inset: clamp(22px, 3.5vh, 42px) 0 auto, qui colle
       la carte en haut de sa zone : mesure a 375x812, elle occupait 28 -> 499px
       dans un conteneur de 638px, soit 138px de vide en dessous. La position
       "nette" (--organisation-y: 0) se jouait donc tout en haut de l'ecran.
       top ET bottom a 0 plus une marge automatique centrent la hauteur definie
       par height dans la zone disponible : la carte descend de 55px et les
       marges deviennent symetriques, quelle que soit la taille d'ecran. */
    /* Empilement des cartes par grille et non par position absolue.
       La version precedente centrait des cartes absolues via inset 0 +
       margin-block: auto + height: fit-content. Cette combinaison (hauteur
       intrinseque d'un element absolu centre aux marges auto) est un terrain
       ou les moteurs divergent : correcte sur Blink (panneau de test et mode
       mobile des devtools PC), elle donnait sur WebKit -- le SEUL moteur
       autorise sur iOS, Safari comme DuckDuckGo -- des cartes etirees sur
       toute la zone : titre colle en haut, image en bas, vide au milieu,
       identique sur les deux navigateurs. Ce que montraient les captures.
       Remplacee par l'empilement grille : toutes les cartes dans la meme
       cellule (grid-area 1/1), centrees par align-items. Aucun calcul de
       hauteur intrinseque en position absolue, comportement identique sur
       tous les moteurs. z-index reste applicable : les items de grille
       l'acceptent sans position. offsetTop (utilise par le JS pour les cibles
       de sortie/entree) reste exact, la position de mise en page etant
       desormais la position centree elle-meme. Le cadre media garde sa hauteur
       reelle d'image (lignes auto), l'ecart titre/image reste le gap. */
    /* La scene se termine sur la sortie de la carte 8, pile au moment ou le
       sticky se detache. Il restait alors la hauteur de ce sticky -- un ecran
       entier de noir -- avant que le mot "Color", centre dans son propre
       sticky, n'arrive au milieu. La marge negative annule cet ecran moins
       l'ecart voulu ; sa valeur est calculee en px cote JS avec le meme
       innerHeight que stepDistance, pour que l'ecart reste exact en coordonnees
       document quel que soit l'etat de la barre d'URL. */
    .postprod-organisation.is-scroll-scene {
        margin-bottom: var(--organisation-tail-lift, 0px);
    }

    .postprod-organisation.is-scroll-scene .postprod-organisation__steps {
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        align-items: center;
    }

    .postprod-organisation.is-scroll-scene .postprod-organisation__step {
        position: static;
        grid-area: 1 / 1;
        inset: auto;
        margin-block: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: clamp(14px, 3vw, 24px);
        height: auto;
        max-height: none;
        padding-inline: clamp(16px, 5vw, 32px);
    }

    .postprod-organisation.is-scroll-scene .postprod-organisation__media {
        height: auto;
        min-height: 0;
    }

    /* height: 100% de la regle desktop remplacait la piste ; en hauteur auto
       l'image reprend ses proportions naturelles et definit la hauteur du
       cadre. */
    .postprod-organisation.is-scroll-scene .postprod-organisation__media > img,
    .postprod-organisation.is-scroll-scene .postprod-organisation__media > video {
        width: 100%;
        height: auto;
    }

    /* Exception "Recadrage et zoom" : ce cadre est volontairement en
       aspect-ratio 16/9 et sa video le remplit en object-fit: cover avec un
       scale(1.2) -- c'est l'effet illustre par l'etape. La regle generique
       ci-dessus la remettait en hauteur naturelle (176px dans un cadre de
       198px), cassant le remplissage et decalant l'image de 15px vers le haut.
       Elle reprend donc toute la hauteur de son cadre, et l'ecart titre/image
       reste celui du gap comme sur les 7 autres cartes. */
    .postprod-organisation.is-scroll-scene .postprod-organisation__media--recadrage > video {
        height: 100%;
    }

    /* Le scale(1.2) de cette video la fait deborder de 20px au-dessus et en
       dessous de son cadre : sans clipping l'image commencait 20px plus haut
       que sur les autres cartes (ecart mesure a -6px au lieu de 14). Le cadre
       clippe donc le debordement -- ce qui est le sens meme d'un zoom-recadrage
       et preserve l'effet. */
    .postprod-organisation.is-scroll-scene .postprod-organisation__media--recadrage {
        overflow: hidden;
    }

    .postprod-organisation.is-scroll-scene .postprod-organisation__copy {
        order: -1;
        align-self: start;
    }

    /* filter retire de will-change : il demande au navigateur de tenir une
       couche de filtrage prete en permanence sur les 8 cartes, qui portent de
       grandes captures de timeline. Le flou etant desormais quantifie (il ne
       change qu'aux changements d'etape), l'anticipation coute plus de memoire
       GPU qu'elle ne fait gagner. opacity et transform restent annonces. */
    .postprod-organisation.is-scroll-scene .postprod-organisation__step {
        will-change: opacity, transform;
    }

    /* Le titre descend de 50px : la barre qui le souligne passe de 107 a 157
       (mesure a 430x932). C'est cette barre qui sert de ligne d'arrivee a la
       sortie des cartes, calculee cote JS.
       La distance de sortie n'est plus exprimee ici : viser une DISTANCE en vh
       ne pouvait pas donner une arrivee constante, les cartes allant de 184 a
       325px de haut et etant centrees dans leur zone -- elles ne partent donc
       pas du meme endroit. Le JS vise desormais une POSITION (le haut de la
       zone, c'est-a-dire la barre), ce qui aligne les 8 cartes quel que soit
       leur format et supprime le besoin d'un palier pour les ecrans courts. */
    .postprod-organisation.is-scroll-scene .postprod-organisation__heading {
        margin-top: 50px;
    }

    /* Retour a svh. dvh avait ete pose comme hypothese pour le symptome
       "texte et image colles au titre, grand vide en dessous" -- symptome dont
       la vraie cause s'est averee etre le centrage en position absolue, qui
       diverge entre Blink et WebKit, corrige depuis par l'empilement en grille.
       dvh n'y etait donc pour rien, et sa contrepartie annoncee des l'origine
       ("la zone peut se redimensionner pendant le defilement") s'est retournee
       contre nous : cette hauteur pilote toute la geometrie de la scene, huit
       fois amplifiee, et la voir bouger en plein defilement ejectait vers la
       section suivante. Un correctif anterieur de ce projet avait deja fait ce
       meme trajet en sens inverse pour la meme raison ("corriger le saut de
       page (dvh -> svh)").

       svh ne bouge jamais : la scene garde une geometrie stable du debut a la
       fin, le depinglage tombe exactement sur la sortie de la derniere carte,
       et l'ecart de 250px avant Color est tenu quel que soit l'etat de la barre
       d'URL. Contrepartie : quand la barre est retractee, la zone est plus
       courte que le visible et laisse du noir en bas -- invisible, tout est
       noir a cet endroit. */
    .postprod-organisation.is-scroll-scene .postprod-organisation__inner {
        height: 100svh;
    }

    /* Le bloc Habillage porte un aspect-ratio (1699/835) dans sa regle de base,
       mais une regle @media (max-width: 820px) posterieure lui impose
       height: 420px. Elle ne devrait pas gagner ici -- ma regle sur
       .postprod-organisation__media est plus specifique et le rendu local
       donne bien 173px -- mais c'est la seule explication trouvee a l'image
       geante constatee sur appareil. Verrouille donc explicitement, avec une
       specificite qu'aucune des deux ne peut depasser. */
    .postprod-organisation.is-scroll-scene .postprod-organisation__media.postprod-habillage {
        height: auto;
        min-height: 0;
        aspect-ratio: 1699 / 835;
    }
}

@media (max-width: 820px) {
    .postprod-organisation__heading,
    .postprod-organisation__step {
        grid-template-columns: 1fr;
    }

    .postprod-organisation__heading span {
        grid-column: 1;
    }

    .postprod-organisation__media--recadrage {
        width: 100%;
        max-width: none;
    }

    .postprod-organisation__step {
        gap: 1.25rem;
        min-height: 0;
        padding: 2rem 0;
    }

    .postprod-organisation__copy h3 {
        max-width: 18ch;
    }

    .postprod-organisation__media--duo {
        grid-template-columns: 1fr;
    }

    .postprod-organisation__media--duo img + img {
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-left: 0;
    }
}

/* Post-production — révélation des partenaires de l'habillage */
.postprod-habillage {
    display: grid;
    height: auto;
    aspect-ratio: 1699 / 835;
    isolation: isolate;
    border-color: rgba(255, 255, 255, 0.16);
    background: #060708;
}

.postprod-habillage__panel {
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 0;
}

.postprod-habillage__panel--timeline {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #111318;
    transition: opacity 420ms ease, transform 680ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 520ms ease;
}

.postprod-habillage__panel--timeline > img:not(.postprod-habillage__magnifier-art) {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    background: #111318;
    transition: transform 820ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.postprod-habillage__magnifier {
    position: absolute;
    top: 10%;
    right: 7%;
    width: clamp(112px, 12vw, 168px);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.58));
    transform: rotate(0deg);
    transform-origin: 37.5% 35%;
    transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 320ms ease;
}

.postprod-habillage__magnifier:hover,
.postprod-habillage__magnifier:focus-visible {
    outline: none;
    filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.68)) drop-shadow(0 0 10px rgba(255, 90, 25, 0.24));
    transform: rotate(1deg) scale(1.04);
}

/* Suivi du pointeur : la loupe remplace le curseur, qu'on masque donc. */
.postprod-habillage.is-lens-following .postprod-habillage__panel--timeline,
.postprod-habillage.is-lens-following .postprod-habillage__magnifier {
    cursor: none;
}

/* La loupe est repositionnee a chaque frame : toute transition sur la
   position ou l'echelle la ferait trainer derriere le pointeur. */
.postprod-habillage.is-lens-following .postprod-habillage__magnifier {
    transition: filter 320ms ease;
}

.postprod-habillage.is-lens-following .postprod-habillage__magnifier:hover,
.postprod-habillage.is-lens-following .postprod-habillage__magnifier:focus-visible {
    transform: none;
}

.postprod-habillage .postprod-habillage__magnifier-lens {
    position: absolute;
    top: 10%;
    left: 12.5%;
    z-index: 2;
    width: 50%;
    height: 50%;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: transparent;
    background-image: none;
    pointer-events: none;
}

.postprod-habillage .postprod-habillage__magnifier-timeline {
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    background: transparent;
    filter: brightness(1.04) contrast(1.03);
    object-fit: fill;
    transform-origin: 0 0;
    /* Pas de will-change ici : width, height, left et top declenchent un calcul
       de mise en page, que la composition ne peut pas anticiper. L'indice
       n'apportait donc rien tout en forcant une couche GPU -- la plus grande de
       la page, 1,83 megapixel a elle seule. */
    pointer-events: none;
}

.postprod-habillage .postprod-habillage__magnifier-art {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    pointer-events: none;
}

.postprod-habillage__magnifier::before,
.postprod-habillage__magnifier::after {
    content: none;
    background: none;
    box-shadow: none;
}

.postprod-habillage__lens {
    position: absolute;
    top: 8.63%;
    left: 10%;
    z-index: 1;
    width: 54.55%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background-image:
        radial-gradient(circle at 33% 26%, rgba(255, 255, 255, 0.18), transparent 42%),
    radial-gradient(circle at 33% 26%, rgba(255,255,255,.08), transparent 42%);
    background-repeat: no-repeat;
    background-position: center, 98.9% 5%;
    background-size: 100% 100%, 1600% auto;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.42), inset 0 0 7px rgba(255, 255, 255, 0.3);
}

.postprod-habillage__handle-shadow,
.postprod-habillage__handle {
    fill: none;
    stroke-linecap: round;
}

.postprod-habillage__handle-shadow {
    stroke: rgba(0, 0, 0, 0.75);
    stroke-width: 24;
}

.postprod-habillage__handle {
    stroke: url('#habillage-handle');
    stroke-width: 17;
}

.postprod-habillage__rim-shadow {
    fill: none;
    stroke: rgba(0, 0, 0, 0.54);
    stroke-width: 18;
}

.postprod-habillage__rim {
    fill: none;
    stroke: url('#habillage-rim');
    stroke-width: 12;
}

.postprod-habillage__rim-inner {
    fill: none;
    stroke: rgba(248, 249, 249, 0.56);
    stroke-width: 2;
}

.postprod-habillage__panel--partners {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    color: #f7f3ed;
    background: #070809;
    clip-path: circle(0 at 84% 21%);
    opacity: 0;
    pointer-events: none;
    transition: clip-path 880ms cubic-bezier(0.76, 0, 0.24, 1), opacity 180ms ease;
}

.postprod-habillage__partners-heading {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    margin: 0 auto clamp(1.5rem, 3vw, 2.7rem);
    text-align: center;
    text-transform: uppercase;
}

.postprod-habillage__partners-heading span {
    color: #ff5a19;
    font-size: clamp(0.72rem, 1.1vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.23em;
}

.postprod-habillage__partners-heading strong {
    font-size: clamp(1.45rem, 2.5vw, 2.6rem);
    font-weight: 560;
    letter-spacing: 0.04em;
}

.postprod-habillage__logos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(54px, 1fr);
    gap: clamp(0.6rem, 1.5vw, 1.5rem) clamp(0.75rem, 2vw, 2rem);
    flex: 1;
    align-items: center;
}

.postprod-habillage__logo {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    opacity: 0;
    filter: blur(8px);
    transform: translateY(26px) scale(0.72) rotate(-4deg);
    transition:
        opacity 430ms ease,
        filter 600ms ease,
        transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0ms;
}

.postprod-habillage__logo img {
    width: 100%;
    height: 100%;
    max-width: 125px;
    max-height: 58px;
    object-fit: contain;
    background: transparent;
}

img.postprod-habillage__partner-art {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    background: #070809;
    opacity: 0;
    filter: blur(14px) brightness(0.5);
    transform: scale(0.86) translateY(18px);
    transition:
        opacity 520ms ease 210ms,
        filter 760ms ease 230ms,
        transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 190ms;
}

.postprod-habillage__back {
    position: absolute;
    top: clamp(1rem, 2vw, 1.7rem);
    left: clamp(1rem, 2vw, 1.7rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f7f3ed;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(5, 6, 7, 0.76);
    cursor: pointer;
    transition: border-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.postprod-habillage__back:hover,
.postprod-habillage__back:focus-visible {
    border-color: #ff5a19;
    color: #ff7a3e;
    outline: none;
    transform: translateX(-3px);
}

.postprod-habillage__back svg {
    width: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.postprod-habillage.is-partners .postprod-habillage__panel--timeline {
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.9);
    pointer-events: none;
}

.postprod-habillage.is-partners .postprod-habillage__panel--timeline > img {
    transform: scale(1.08);
}

.postprod-habillage.is-partners .postprod-habillage__panel--partners {
    clip-path: circle(150% at 84% 21%);
    opacity: 1;
    pointer-events: auto;
}

.postprod-habillage.is-partners .postprod-habillage__partner-art {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) translateY(0);
}

@media (max-width: 820px) {
    .postprod-habillage {
        height: 420px;
    }

    /* La loupe occupait 50% de la largeur du cadre en mobile (180px pour un
       cadre de 352px a 430px de large) contre 16% en desktop (150px pour 928px)
       -- soit 3,1 fois trop grande en proportion. Exprimee en pourcentage du
       cadre, qui est son conteneur de positionnement : elle garde donc le ratio
       desktop a toutes les largeurs, au lieu de rester bloquee sur le plancher
       d'un clamp en vw. */
    .postprod-habillage__magnifier {
        top: 14%;
        right: 3%;
        width: 16.1%;
    }

    .postprod-habillage__logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(42px, 1fr);
        gap: 0.65rem 1rem;
        padding-top: 0.5rem;
    }

    .postprod-habillage__logo img {
        max-width: 92px;
        max-height: 42px;
    }

    .postprod-habillage__partners-heading {
        margin-top: 2.8rem;
        margin-bottom: 1rem;
    }

    .postprod-habillage__back span {
        display: none;
    }

    .postprod-habillage__back {
        left: 4.8rem;
    }

    .postprod-habillage__partner-art {
        object-position: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .postprod-habillage__panel,
    .postprod-habillage__logo,
    .postprod-habillage__magnifier,
    .postprod-habillage__panel--timeline > img {
        transition-duration: 1ms;
        transition-delay: 0ms !important;
    }
}

/* Mixage & son — narration en panneaux empilés */
.postprod-mix {
    --mix-stack-header: clamp(44px, 3.5vw, 56px);
    --mix-stack-top: clamp(88px, 8vh, 118px);
    --mix-panel-scroll: 125vh;
    height: auto;
    padding: clamp(88px, 9vw, 132px) 0 clamp(72px, 8vw, 120px);
    background: #000;
}

.postprod-mix .postprod-mix__sticky {
    min-height: 0;
    position: relative;
    top: auto;
    padding: 0;
    display: block;
    overflow: visible;
    background: #000;
}

.postprod-mix .postprod-mix__sticky .postprod-heading {
    width: min(1480px, 94vw);
    margin: 0 auto clamp(40px, 5vw, 72px);
}

.postprod-mix-story {
    width: min(1480px, 94vw);
    margin: 0 auto;
    padding: 0;
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.postprod-mix-story::before {
    display: none;
}

.postprod-mix-stack {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: clamp(24px, 3vw, 42px);
}

.postprod-mix-stack__slot {
    height: auto;
    min-height: 0;
    margin-bottom: 0;
    position: relative;
    top: auto;
    z-index: auto;
}

.postprod-mix-panel {
    --mix-panel-progress: 1;
    height: auto;
    min-height: clamp(470px, 58vh, 620px);
    position: relative;
    display: grid;
    grid-template-rows: var(--mix-stack-header) minmax(0, 1fr);
    border: 1px solid rgba(124, 162, 255, 0.24);
    border-radius: 6px;
    background: #03050a;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.72);
    overflow: hidden;
    isolation: isolate;
}

.postprod-mix-panel--clean {
    min-height: clamp(350px, 43vh, 420px);
}

.postprod-mix-panel--shape {
    min-height: clamp(340px, 42vh, 400px);
}

.postprod-mix-panel::after {
    content: "";
    position: absolute;
    inset: var(--mix-stack-header) 0 0;
    z-index: 4;
    pointer-events: none;
    background: #000;
    opacity: 0;
    transition: opacity 180ms linear;
}

.postprod-mix-stack__slot .postprod-mix-panel::after { display: none; }

.postprod-mix-panel__header {
    min-width: 0;
    padding: 0 clamp(16px, 2vw, 28px);
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 5;
    border-bottom: 1px solid rgba(124, 162, 255, 0.16);
    background: #070a11;
}

.postprod-mix-panel__header > span {
    color: var(--postprod-orange);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.12em;
}

.postprod-mix-panel__header > div {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.postprod-mix-panel__header h3,
.postprod-mix-panel__header p {
    margin: 0;
}

.postprod-mix-panel__header h3 {
    color: var(--postprod-cream);
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    line-height: 1;
}

.postprod-mix-panel__header p {
    color: rgba(253, 246, 237, 0.46);
    font-size: clamp(0.63rem, 0.72vw, 0.75rem);
}

.postprod-mix-panel__body {
    min-height: 0;
    padding: clamp(20px, 2.8vw, 42px);
    position: relative;
    z-index: 1;
}

.postprod-mix-panel__takeaway {
    margin: 0;
    color: rgba(253, 246, 237, 0.56);
    font-size: clamp(0.7rem, 0.8vw, 0.82rem);
}

.postprod-mix-wave {
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2px;
    overflow: hidden;
}

.postprod-mix-wave > span {
    min-width: 1px;
    height: calc(var(--wave-height, 0.04) * 100%);
    flex: 1 1 0;
    border-radius: 1px;
    background: rgba(124, 162, 255, 0.72);
}

.postprod-mix-clean {
    display: grid;
    grid-template-rows: auto clamp(112px, 15vh, 148px) auto;
    gap: clamp(10px, 1.3vh, 16px);
    padding-block: clamp(16px, 2vw, 26px);
}

.postprod-mix-clean__labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: rgba(253, 246, 237, 0.52);
}

.postprod-mix-clean__labels > span {
    color: rgba(253, 246, 237, 0.46);
    font-size: clamp(0.68rem, 0.76vw, 0.78rem);
}

.postprod-mix-clean__labels > div {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
}

.postprod-mix-clean__labels strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(253, 246, 237, 0.72);
    font-size: clamp(0.62rem, 0.68vw, 0.7rem);
    font-weight: 600;
}

.postprod-mix-clean__labels strong i {
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 50%;
    background: #6f94ff;
    box-shadow: 0 0 10px rgba(111, 148, 255, 0.45);
}

.postprod-mix-clean__labels strong:last-child i {
    background: #35d6a2;
    box-shadow: 0 0 10px rgba(53, 214, 162, 0.42);
}

.postprod-mix-clean__stage {
    min-height: 0;
    position: relative;
    border-block: 1px solid rgba(124, 162, 255, 0.14);
    background: linear-gradient(rgba(124, 162, 255, 0.045) 1px, transparent 1px), #02040a;
    background-size: 100% 24px;
    overflow: hidden;
}

.postprod-mix-clean__stage > .postprod-mix-wave,
.postprod-mix-clean__reveal {
    position: absolute;
    inset: 0;
}

.postprod-mix-wave--cleaning {
    display: block;
    padding: 0;
}

.postprod-mix-wave--cleaning svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.postprod-mix-sine {
    fill: none;
    stroke: color-mix(in srgb, #35d6a2 calc(var(--sine-clean, 0) * 100%), #6f94ff);
    stroke-width: 1.35px;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px color-mix(in srgb, rgba(53, 214, 162, 0.35) calc(var(--sine-clean, 0) * 100%), rgba(111, 148, 255, 0.32)));
}

@media (prefers-reduced-motion: reduce) {
    .postprod-mix-sine {
        stroke: #35d6a2;
    }
}

.postprod-mix-wave--raw > span {
    background: rgba(124, 162, 255, 0.64);
}

.postprod-mix-wave--clean > span {
    background: rgba(253, 246, 237, 0.84);
}

.postprod-mix-clean__reveal {
    width: var(--mix-panel-percent, 0%);
    z-index: 2;
    overflow: hidden;
}

.postprod-mix-clean__reveal .postprod-mix-wave {
    width: var(--mix-reveal-width, 10000%);
}

.postprod-mix-clean__noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: var(--mix-noise-opacity, 0.22);
    background-image: repeating-radial-gradient(circle at 34% 42%, rgba(253, 246, 237, 0.18) 0 1px, transparent 1px 8px);
}

.postprod-mix-clean__scan {
    width: 1px;
    position: absolute;
    z-index: 3;
    inset-block: 0;
    left: var(--mix-panel-percent, 0%);
    background: var(--postprod-orange);
    box-shadow: 0 0 15px rgba(255, 94, 14, 0.42);
}

.postprod-mix-layers {
    --mix-wave-left: clamp(188px, 18.2vw, 278px);
    --mix-wave-width: calc(100% - clamp(188px, 18.2vw, 278px) - clamp(250px, 25vw, 380px));
    position: relative;
    display: grid;
    grid-template-rows: 36px repeat(5, minmax(58px, 1fr));
    gap: 0;
    padding: clamp(12px, 1.5vw, 20px);
}

.postprod-mix-timeline__playhead {
    position: absolute;
    z-index: 20;
    top: 40px;
    bottom: 12px;
    left: calc(var(--mix-wave-left) + var(--mix-wave-width) * var(--mix-progress, 0));
    width: 18px;
    background: transparent;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
}

.postprod-mix-layers.has-global-playhead .postprod-mix-timeline__playhead {
    opacity: 1;
    pointer-events: auto;
    cursor: ew-resize;
    touch-action: none;
}

.postprod-mix-timeline__playhead i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    display: block;
    background: var(--postprod-orange);
    box-shadow: 0 0 9px rgba(255, 94, 14, 0.72);
    transform: translateX(-50%);
    pointer-events: none;
}

.postprod-mix-timeline__playhead::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--postprod-orange);
    transform: translateX(-50%);
}

.postprod-mix-timeline__ruler {
    padding: 0 12px;
    display: grid;
    grid-template-columns: clamp(154px, 14vw, 204px) repeat(5, 1fr) auto;
    align-items: center;
    border: 1px solid rgba(124, 162, 255, 0.13);
    border-bottom: 0;
    background: #020408;
    color: rgba(253, 246, 237, 0.42);
    font-size: 0.58rem;
    font-variant-numeric: tabular-nums;
}

.postprod-mix-timeline__controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.postprod-mix-transport {
    justify-self: start;
    width: 118px;
    min-width: 118px;
    height: 32px;
    min-height: 32px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(255, 93, 19, 0.72);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255, 93, 19, 0.18), rgba(255, 93, 19, 0.07));
    color: var(--postprod-cream);
    font: inherit;
    font-weight: 750;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 149, 92, 0.05), 0 0 18px rgba(255, 93, 19, 0.09);
}

.postprod-mix-transport[aria-pressed="true"] {
    background: var(--postprod-orange);
    color: #050505;
    box-shadow: 0 0 20px rgba(255, 93, 19, 0.24);
}

.postprod-mix-transport span {
    width: 12px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.postprod-mix-transport strong {
    font: 800 0.61rem/1 var(--font-sans);
    letter-spacing: 0.075em;
    white-space: nowrap;
}

.postprod-mix-reset {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(253, 246, 237, 0.22);
    border-radius: 3px;
    background: rgba(253, 246, 237, 0.025);
    color: rgba(253, 246, 237, 0.66);
    font: 700 0.92rem/1 var(--font-sans);
    cursor: pointer;
}

.postprod-mix-reset:hover,
.postprod-mix-reset:focus-visible {
    border-color: var(--postprod-orange);
    color: var(--postprod-orange);
    outline: none;
}

.postprod-mix-timeline__ruler output {
    color: var(--postprod-orange);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

.postprod-mix-layer {
    --layer-color: #397cff;
    padding: 7px clamp(10px, 1.1vw, 16px);
    display: grid;
    grid-template-columns: minmax(82px, 0.11fr) 32px minmax(180px, 1fr) minmax(150px, 0.24fr) minmax(108px, 0.12fr);
    align-items: center;
    gap: clamp(9px, 1vw, 15px);
    border: 1px solid rgba(124, 162, 255, 0.13);
    border-bottom: 0;
    background: rgba(3, 5, 10, 0.94);
    opacity: var(--layer-reveal, 0);
    transform: translateY(var(--layer-shift, 14px));
    transition: background 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.postprod-mix-layer[data-layer-key="ambience"] { --layer-color: #4d88b8; }
.postprod-mix-layer[data-layer-key="foley"] { --layer-color: #9269d8; }
.postprod-mix-layer[data-layer-key="sfx"] { --layer-color: #17a5a7; }
.postprod-mix-layer[data-layer-key="music"] { --layer-color: #286de8; }

.postprod-mix-layer:hover,
.postprod-mix-layer:focus-within {
    border-color: rgba(255, 94, 14, 0.42);
    background: rgba(8, 11, 18, 0.98);
}

.postprod-mix-layer.is-muted {
    opacity: 1 !important;
}

.postprod-mix-layer.is-muted .postprod-mix-wave,
.postprod-mix-layer.is-muted .postprod-mix-layer__meter {
    opacity: 0.32;
}

.postprod-mix-layer strong,
.postprod-mix-final__tracks strong {
    color: rgba(253, 246, 237, 0.78);
    font-size: clamp(0.64rem, 0.74vw, 0.76rem);
}

.postprod-mix-layer .postprod-mix-wave {
    height: 42px;
}

.postprod-mix-wave--track {
    --wave-played-color: color-mix(in srgb, var(--layer-color, #397cff) 72%, white 28%);
    position: relative;
    overflow: hidden;
    border-inline: 1px solid rgba(124, 162, 255, 0.14);
    background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(124, 162, 255, 0.12) calc(10% - 1px) 10%), rgba(7, 11, 18, 0.84);
    cursor: ew-resize;
    transition: opacity 180ms ease, border-color 180ms ease;
}

.postprod-mix-wave--track.has-track-playhead::before,
.postprod-mix-wave--track.has-track-playhead::after {
    content: "";
    position: absolute;
    z-index: 4;
    left: calc(var(--track-progress, 0) * 100%);
    pointer-events: none;
    transform: translateX(-50%);
}

.postprod-mix-wave--track.has-track-playhead::after {
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: color-mix(in srgb, var(--layer-color, #397cff) 62%, #ff8750 38%);
    box-shadow: 0 0 5px color-mix(in srgb, var(--layer-color, #397cff) 55%, transparent);
}

.postprod-mix-wave--track.has-track-playhead::before {
    top: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--layer-color, #397cff) 52%, #ff8750 48%);
}

.postprod-mix-layers.is-playing .postprod-mix-wave--track.has-track-playhead::before,
.postprod-mix-layers.is-playing .postprod-mix-wave--track.has-track-playhead::after {
    opacity: 0;
}

.postprod-mix-wave--track:focus-visible {
    outline: 1px solid var(--postprod-orange);
    outline-offset: 2px;
}

.postprod-mix-wave--track svg {
    width: 100%;
    height: 100%;
    display: block;
}

.postprod-mix-wave--track .postprod-mix-wave__base polygon {
    fill: color-mix(in srgb, var(--layer-color, #397cff) 7%, transparent);
}

.postprod-mix-wave--track .postprod-mix-wave__base polyline {
    fill: none;
    stroke: color-mix(in srgb, var(--layer-color, #397cff) 52%, white 10%);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
}

.postprod-mix-wave--track .postprod-mix-wave__base line {
    stroke: rgba(253, 246, 237, 0.12);
    stroke-width: 0.65;
    vector-effect: non-scaling-stroke;
}

.postprod-mix-wave--track .postprod-mix-wave__played polyline {
    fill: none;
    stroke: var(--wave-played-color);
    stroke-width: 1.65;
    vector-effect: non-scaling-stroke;
}

.postprod-mix-wave--track .postprod-mix-wave__played polygon {
    fill: color-mix(in srgb, var(--wave-played-color) 72%, transparent);
}

.postprod-mix-wave--track .postprod-mix-wave__played line {
    stroke: color-mix(in srgb, var(--wave-played-color) 68%, transparent);
    stroke-width: 0.8;
    vector-effect: non-scaling-stroke;
}

.postprod-mix-layer__toggle {
    width: 42px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    box-sizing: border-box;
    border: 1px solid var(--postprod-orange);
    border-radius: 4px;
    background: rgba(255, 94, 14, 0.13);
    color: var(--postprod-orange);
    font: 750 0.62rem/1 var(--font-sans);
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    cursor: pointer;
}

.postprod-mix-layer__toggle[aria-pressed="false"] {
    border-color: rgba(253, 246, 237, 0.25);
    background: transparent;
    color: rgba(253, 246, 237, 0.52);
}

.postprod-mix-track-play {
    width: 32px;
    min-width: 32px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    border: 1px solid rgba(253, 246, 237, 0.25);
    border-radius: 3px;
    background: rgba(253, 246, 237, 0.025);
    color: rgba(253, 246, 237, 0.72);
    font: 750 0.62rem/1 var(--font-sans);
    cursor: pointer;
}

.postprod-mix-track-play span {
    width: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.postprod-mix-track-play:hover,
.postprod-mix-track-play:focus-visible,
.postprod-mix-track-play[aria-pressed="true"] {
    border-color: var(--postprod-orange);
    background: rgba(255, 94, 14, 0.13);
    color: var(--postprod-orange);
}

.postprod-mix-layer__volume {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) 44px;
    align-items: center;
    gap: 10px;
}

.postprod-mix-layer__volume input {
    height: 14px;
    width: 100%;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.postprod-mix-layer__volume input::-webkit-slider-runnable-track {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--postprod-orange) 0 calc(var(--layer-level, 0) * 100%), rgba(253, 246, 237, 0.2) calc(var(--layer-level, 0) * 100%));
}

.postprod-mix-layer__volume input::-webkit-slider-thumb {
    width: 10px;
    height: 10px;
    margin-top: -4px;
    appearance: none;
    border: 1px solid #ff8b55;
    border-radius: 50%;
    background: var(--postprod-orange);
    box-shadow: 0 0 0 3px rgba(255, 94, 14, 0.08);
}

.postprod-mix-layer__volume input::-moz-range-track {
    height: 2px;
    border-radius: 999px;
    background: rgba(253, 246, 237, 0.2);
}

.postprod-mix-layer__volume input::-moz-range-progress {
    height: 2px;
    border-radius: 999px;
    background: var(--postprod-orange);
}

.postprod-mix-layer__volume input::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: 1px solid #ff8b55;
    border-radius: 50%;
    background: var(--postprod-orange);
    box-shadow: 0 0 0 3px rgba(255, 94, 14, 0.08);
}

.postprod-mix-layer__volume output {
    color: rgba(253, 246, 237, 0.78);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.postprod-mix-layer__meter {
    height: 14px;
    padding: 2px;
    display: block;
    border: 1px solid rgba(253, 246, 237, 0.1);
    background: repeating-linear-gradient(90deg, transparent 0 4px, #03050a 4px 6px), rgba(253, 246, 237, 0.06);
}

.postprod-mix-layer__meter i {
    width: calc(var(--layer-level, 0) * 100%);
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #24bc78 0 70%, #eac94f 84%, #ff5e0e 100%);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 55ms linear;
}

.postprod-mix-final__tracks > div > i {
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #245bff 0 72%, rgba(253, 246, 237, 0.1) 72%);
}

.postprod-mix-shape {
    display: grid;
    grid-template-rows: auto minmax(104px, 0.72fr) auto;
    align-content: start;
    gap: clamp(10px, 1.35vh, 16px);
}

@media (min-width: 981px) and (min-height: 760px) {
    .postprod-mix-shape__preview {
        transform: translateY(clamp(9px, 1.35vh, 13px));
    }

    .postprod-mix-process-chain {
        transform: translateY(clamp(54px, 6.8vh, 64px));
    }
}

.postprod-mix-shape__tracks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

/* Le glissement sur la barre de lecture appartient a la barre, pas au
   defilement de la page : sans cela iOS interprete le geste comme un scroll et
   la tete de lecture ne suit pas le doigt. */
.postprod-mix-shape__wave,
.postprod-mix-wave--track[data-mix-scrub] {
    touch-action: none;
}

.postprod-mix-shape__tracks button {
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(124, 162, 255, 0.17);
    border-radius: 2px;
    background: rgba(4, 8, 15, 0.78);
    color: rgba(253, 246, 237, 0.48);
    font: inherit;
    font-size: clamp(0.62rem, 0.72vw, 0.76rem);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.postprod-mix-shape__tracks button i {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #51617e;
    box-shadow: 0 0 0 3px rgba(81, 97, 126, 0.1);
}

.postprod-mix-shape__tracks button:hover,
.postprod-mix-shape__tracks button:focus-visible {
    color: var(--postprod-cream);
    border-color: rgba(255, 94, 14, 0.58);
}

.postprod-mix-shape__tracks button.is-active {
    color: var(--postprod-cream);
    border-color: var(--postprod-orange);
    background: linear-gradient(180deg, rgba(255, 94, 14, 0.14), rgba(255, 94, 14, 0.035));
}

.postprod-mix-shape__tracks button.is-active i {
    background: var(--postprod-orange);
    box-shadow: 0 0 12px rgba(255, 94, 14, 0.7);
}

.postprod-mix-shape__preview {
    min-height: 0;
    padding: 10px 14px;
    display: grid;
    grid-template-rows: auto minmax(54px, 1fr) auto;
    gap: 8px;
    border: 1px solid rgba(124, 162, 255, 0.18);
    background: rgba(3, 7, 13, 0.76);
}

.postprod-mix-shape__preview > header {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto auto minmax(112px, 10vw) minmax(86px, 8.5vw);
    align-items: center;
    gap: 10px;
}

.postprod-mix-shape__preview > header div {
    display: grid;
    gap: 1px;
}

.postprod-mix-shape__preview small,
.postprod-mix-shape__preview output,
.postprod-mix-shape__preview p {
    color: rgba(253, 246, 237, 0.42);
    font-size: clamp(0.54rem, 0.62vw, 0.64rem);
}

.postprod-mix-shape__preview strong {
    color: var(--postprod-cream);
    font-size: clamp(0.72rem, 0.86vw, 0.9rem);
}

.postprod-mix-shape__preview [data-mix-shape-state] {
    min-width: 88px;
    padding: 5px 8px;
    border: 1px solid rgba(124, 162, 255, 0.2);
    color: rgba(253, 246, 237, 0.64);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.postprod-mix-shape.has-effects .postprod-mix-shape__preview [data-mix-shape-state] {
    border-color: rgba(255, 94, 14, 0.62);
    color: var(--postprod-orange);
}

.postprod-mix-shape__meter {
    width: 100%;
    height: 14px;
    padding: 2px;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(253, 246, 237, 0.1);
    background: repeating-linear-gradient(90deg, transparent 0 4px, #03050a 4px 6px), rgba(253, 246, 237, 0.06);
}

.postprod-mix-shape__meter i {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #24bc78 0 70%, #eac94f 84%, #ff5e0e 100%);
    transform: scaleX(var(--shape-meter-level, 0));
    transform-origin: left;
    transition: transform 55ms linear;
}

.postprod-mix-shape__volume {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(70px, 1fr) 34px;
    align-items: center;
    gap: 8px;
}

.postprod-mix-shape__volume input {
    width: 100%;
    height: 14px;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.postprod-mix-shape__volume input::-webkit-slider-runnable-track {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--postprod-orange) 0 calc(var(--shape-volume, 0.4) * 100%), rgba(253, 246, 237, 0.2) calc(var(--shape-volume, 0.4) * 100%));
}

.postprod-mix-shape__volume input::-webkit-slider-thumb {
    width: 10px;
    height: 10px;
    margin-top: -4px;
    appearance: none;
    border: 1px solid #ff8b55;
    border-radius: 50%;
    background: var(--postprod-orange);
    box-shadow: 0 0 0 3px rgba(255, 94, 14, 0.08);
}

.postprod-mix-shape__volume input::-moz-range-track {
    height: 2px;
    border-radius: 999px;
    background: rgba(253, 246, 237, 0.2);
}

.postprod-mix-shape__volume input::-moz-range-progress {
    height: 2px;
    border-radius: 999px;
    background: var(--postprod-orange);
}

.postprod-mix-shape__volume input::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: 1px solid #ff8b55;
    border-radius: 50%;
    background: var(--postprod-orange);
    box-shadow: 0 0 0 3px rgba(255, 94, 14, 0.08);
}

.postprod-mix-shape__volume output {
    color: rgba(253, 246, 237, 0.76);
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.postprod-mix-shape__play {
    width: 32px;
    height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 94, 14, 0.72);
    border-radius: 50%;
    background: rgba(255, 94, 14, 0.08);
    color: var(--postprod-cream);
    cursor: pointer;
}

.postprod-mix-shape__play span {
    width: 0;
    height: 0;
    display: block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid currentColor;
    transform: translateX(1px);
}

.postprod-mix-shape__play.is-playing span {
    width: 8px;
    height: 10px;
    border: 0;
    background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 6px, currentColor 6px 8px);
    transform: none;
}

.postprod-mix-shape__wave {
    min-height: 54px;
    position: relative;
    overflow: hidden;
    border-block: 1px solid rgba(124, 162, 255, 0.12);
    background-image: linear-gradient(90deg, rgba(124, 162, 255, 0.07) 1px, transparent 1px);
    background-size: 10% 100%;
    cursor: pointer;
}

.postprod-mix-shape__wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

.postprod-mix-shape__wave .shape-wave-base polygon {
    fill: rgba(75, 111, 181, 0.12);
}

.postprod-mix-shape__wave .shape-wave-base polyline,
.postprod-mix-shape__wave .shape-wave-base line {
    fill: none;
    stroke: rgba(124, 162, 255, 0.48);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
}

.postprod-mix-shape__wave .shape-wave-base line {
    opacity: 0.16;
}

.postprod-mix-shape__wave .shape-wave-processed {
    opacity: 0;
    transition: opacity 180ms ease;
}

.postprod-mix-shape.has-effects .shape-wave-processed {
    opacity: 1;
}

.postprod-mix-shape__wave .shape-wave-processed polygon {
    fill: rgba(255, 94, 14, 0.11);
}

.postprod-mix-shape__wave .shape-wave-processed polyline,
.postprod-mix-shape__wave .shape-wave-processed line {
    fill: none;
    stroke: rgba(255, 94, 14, 0.82);
    stroke-width: 1.15;
    vector-effect: non-scaling-stroke;
}

.postprod-mix-shape__wave .shape-wave-processed line {
    opacity: 0.24;
}

.postprod-mix-shape__wave .shape-wave-playhead {
    stroke: var(--postprod-orange);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.postprod-mix-shape__preview p {
    margin: 0;
}

.postprod-mix-process-chain {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    border: 0;
    counter-reset: mix-station;
}

.postprod-mix-station {
    appearance: none;
    height: 70px;
    min-height: 70px;
    min-width: 0;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    position: relative;
    border: 1px solid rgba(124, 162, 255, 0.16);
    border-radius: 2px;
    background: rgba(3, 7, 13, 0.82);
    color: inherit;
    font: inherit;
    text-align: left;
    opacity: var(--station-reveal, 0.26);
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.postprod-mix-station:hover,
.postprod-mix-station:focus-visible {
    border-color: rgba(255, 94, 14, 0.52);
    transform: translateY(-1px);
}

.postprod-mix-station:focus-visible {
    outline: 2px solid rgba(255, 94, 14, 0.34);
    outline-offset: 2px;
}

.postprod-mix-station.is-active {
    border-color: var(--postprod-orange);
    background: linear-gradient(180deg, rgba(255, 94, 14, 0.12), rgba(255, 94, 14, 0.025));
    box-shadow: inset 0 2px 0 rgba(255, 94, 14, 0.78);
}

.postprod-mix-station:nth-child(1) { --station-index: 0; }
.postprod-mix-station:nth-child(2) { --station-index: 1; }
.postprod-mix-station:nth-child(3) { --station-index: 2; }
.postprod-mix-station:nth-child(4) { --station-index: 3; }

.postprod-mix-station h4,
.postprod-mix-station p {
    margin: 0;
    grid-column: 2;
}

.postprod-mix-station > span {
    grid-row: 1 / 3;
    align-self: center;
    color: rgba(253, 246, 237, 0.28);
    font-size: 0.58rem;
    font-weight: 800;
}

.postprod-mix-station.is-active > span {
    color: var(--postprod-orange);
}

.postprod-mix-station h4 {
    color: var(--postprod-cream);
    font-size: clamp(0.78rem, 0.92vw, 0.96rem);
    align-self: end;
}

.postprod-mix-station p {
    color: rgba(253, 246, 237, 0.42);
    font-size: clamp(0.6rem, 0.68vw, 0.7rem);
    align-self: start;
}

.postprod-mix-station.is-active p {
    color: rgba(253, 246, 237, 0.64);
}

.postprod-mix-station > div {
    display: none;
}

.postprod-mix-station::after {
    content: "ACTIVER";
    min-width: 62px;
    padding: 6px 8px;
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    border: 1px solid rgba(124, 162, 255, 0.25);
    border-radius: 2px;
    color: rgba(253, 246, 237, 0.55);
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: center;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.postprod-mix-station:hover::after,
.postprod-mix-station:focus-visible::after {
    border-color: rgba(255, 94, 14, 0.58);
    color: var(--postprod-cream);
}

.postprod-mix-station.is-active::after {
    content: "ACTIF";
    border-color: var(--postprod-orange);
    background: var(--postprod-orange);
    color: #050505;
}

.postprod-mix-station i {
    position: absolute;
    display: block;
    background: rgba(124, 162, 255, 0.78);
    transition: background 180ms ease, transform 220ms ease, height 220ms ease, opacity 180ms ease;
}

.postprod-mix-station.is-active i {
    background: var(--postprod-orange);
}

.postprod-mix-station--eq i { left: 5%; width: 42%; height: 1px; transform-origin: left; }
.postprod-mix-station--eq i:nth-child(1) { top: 67%; transform: rotate(-16deg); }
.postprod-mix-station--eq i:nth-child(2) { left: 35%; top: 43%; transform: rotate(11deg); }
.postprod-mix-station--eq i:nth-child(3) { left: 62%; top: 54%; transform: rotate(-8deg); background: var(--postprod-orange); }
.postprod-mix-station--dynamic i { bottom: 8%; width: 4px; border-radius: 2px 2px 0 0; }
.postprod-mix-station--dynamic i:nth-child(1) { left: 10%; height: 34%; }
.postprod-mix-station--dynamic i:nth-child(2) { left: 28%; height: 82%; }
.postprod-mix-station--dynamic i:nth-child(3) { left: 47%; height: 48%; }
.postprod-mix-station--dynamic i:nth-child(4) { left: 66%; height: 68%; }
.postprod-mix-station--dynamic i:nth-child(5) { left: 84%; height: 42%; }
.postprod-mix-station--space i { top: 50%; width: 8px; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.postprod-mix-station--space i:nth-child(1) { left: 15%; }
.postprod-mix-station--space i:nth-child(2) { left: 50%; background: var(--postprod-orange); }
.postprod-mix-station--space i:nth-child(3) { left: 85%; }
.postprod-mix-station--space > div::before { content: "L        C        R"; position: absolute; inset: 49% 8% auto; height: 1px; background: rgba(124, 162, 255, 0.28); color: rgba(253, 246, 237, 0.34); font-size: 0.54rem; letter-spacing: 1.1em; white-space: pre; }
.postprod-mix-station--reverb i { left: 8%; top: 36%; width: 78%; height: 1px; transform-origin: left; }
.postprod-mix-station--reverb i:nth-child(2) { top: 52%; transform: scaleX(0.7); opacity: 0.52; }
.postprod-mix-station--reverb i:nth-child(3) { top: 68%; transform: scaleX(0.42); opacity: 0.25; }
.postprod-mix-station--reverb.is-active i:nth-child(2) { transform: scaleX(0.82); opacity: 0.66; }
.postprod-mix-station--reverb.is-active i:nth-child(3) { transform: scaleX(0.62); opacity: 0.38; }

.postprod-mix-final {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 70px minmax(300px, 0.58fr);
    gap: clamp(12px, 1.4vw, 22px);
}

.postprod-mix-final__tracks {
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(5, minmax(54px, 1fr));
    gap: 0;
}

.postprod-mix-final__tracks > div {
    --layer-color: #397cff;
    padding: 7px clamp(10px, 1.1vw, 16px);
    display: grid;
    grid-template-columns: minmax(82px, 0.11fr) 54px minmax(180px, 1fr) minmax(108px, 0.12fr);
    align-items: center;
    gap: clamp(9px, 1vw, 15px);
    border: 1px solid rgba(124, 162, 255, 0.13);
    border-bottom: 0;
    background: rgba(3, 5, 10, 0.94);
}

.postprod-mix-final__tracks > div:last-child {
    border-bottom: 1px solid rgba(124, 162, 255, 0.13);
}

.postprod-mix-final__tracks > div[data-mix-processed-track="ambience"] { --layer-color: #4d88b8; }
.postprod-mix-final__tracks > div[data-mix-processed-track="foley"] { --layer-color: #9269d8; }
.postprod-mix-final__tracks > div[data-mix-processed-track="sfx"] { --layer-color: #17a5a7; }
.postprod-mix-final__tracks > div[data-mix-processed-track="music"] { --layer-color: #286de8; }

.postprod-mix-processed-track__state {
    color: rgba(253, 246, 237, 0.42);
    font-size: 0.56rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.postprod-mix-final__tracks .postprod-mix-wave {
    height: 42px;
    overflow: hidden;
    border-inline: 1px solid rgba(124, 162, 255, 0.14);
    background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(124, 162, 255, 0.08) calc(10% - 1px) 10%), rgba(7, 11, 18, 0.84);
}

.postprod-mix-wave--processed svg,
.postprod-mix-wave--master svg {
    width: 100%;
    height: 100%;
    display: block;
}

.postprod-mix-wave--processed polygon {
    fill: color-mix(in srgb, var(--layer-color) 18%, transparent);
}

.postprod-mix-wave--processed polyline {
    fill: none;
    stroke: color-mix(in srgb, var(--layer-color) 68%, white 16%);
    stroke-width: 1.35;
    vector-effect: non-scaling-stroke;
}

.postprod-mix-wave--processed line {
    stroke: rgba(253, 246, 237, 0.1);
    stroke-width: 0.65;
    vector-effect: non-scaling-stroke;
}

.postprod-mix-final__tracks > div > i {
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #245bff 0 var(--final-level), rgba(253, 246, 237, 0.1) var(--final-level));
}

.postprod-mix-final__connections {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    align-items: center;
    position: relative;
}

.postprod-mix-final__connections::after {
    content: "";
    width: 1px;
    position: absolute;
    right: 0;
    top: 10%;
    bottom: 10%;
    background: rgba(124, 162, 255, 0.62);
}

.postprod-mix-final__connections i {
    height: 1px;
    display: block;
    background: linear-gradient(90deg, rgba(124, 162, 255, 0.28), rgba(124, 162, 255, 0.82));
    transform: scaleX(var(--mix-panel-progress));
    transform-origin: left;
}

.postprod-mix-final__connections b {
    position: absolute;
    left: 100%;
    top: 50%;
    width: calc(clamp(12px, 1.4vw, 22px) + 10px);
    height: 1px;
    background: linear-gradient(90deg, rgba(124, 162, 255, 0.82), var(--postprod-orange));
}

.postprod-mix-final__connections b::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--postprod-orange);
    border-right: 1px solid var(--postprod-orange);
    transform: translateY(-50%) rotate(45deg);
}

.postprod-mix-final .postprod-mix-master {
    min-width: 0;
    padding: clamp(16px, 2vw, 26px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 14px;
    border: 1px solid rgba(255, 94, 14, 0.58);
    background: linear-gradient(180deg, rgba(255, 94, 14, 0.075), rgba(36, 91, 255, 0.035));
    opacity: 1;
}

.postprod-mix-master > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(124, 162, 255, 0.16);
}

.postprod-mix-master > header strong {
    color: #fff7ef;
    font-size: clamp(0.82rem, 1vw, 1rem);
    letter-spacing: 0.04em;
}

.postprod-mix-master > header small {
    color: rgba(253, 246, 237, 0.5);
    font-size: 0.64rem;
    text-align: right;
}

.postprod-mix-master__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 38px;
    padding: 0.58rem 0.9rem;
    border: 1px solid rgba(255, 88, 22, 0.72);
    background: rgba(255, 88, 22, 0.08);
    color: #fff7ef;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}

.postprod-mix-master__play:hover,
.postprod-mix-master__play:focus-visible,
.postprod-mix-master__play[aria-pressed="true"] {
    background: rgba(255, 88, 22, 0.24);
    border-color: var(--postprod-orange);
}

.postprod-mix-master__signal {
    min-height: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
}

.postprod-mix-master__wave-wrap {
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(72px, 1fr) auto;
    gap: 12px;
}

.postprod-mix-wave--master {
    position: relative;
    min-height: 72px;
    overflow: hidden;
    background: rgba(2, 4, 8, 0.68);
    cursor: grab;
    touch-action: none;
}

.postprod-mix-wave--master:active {
    cursor: grabbing;
}

.postprod-mix-wave--master::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: calc(var(--master-progress, 0) * 100%);
    width: 1px;
    background: var(--postprod-orange);
    box-shadow: 0 0 8px rgba(255, 94, 14, 0.42);
    pointer-events: none;
    transform: translateX(-0.5px);
}

.postprod-mix-wave--master::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: calc(var(--master-progress, 0) * 100%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--postprod-orange);
    transform: translate(-50%, -45%);
    pointer-events: none;
}

.postprod-mix-wave--master polygon {
    fill: rgba(253, 246, 237, 0.1);
}

.postprod-mix-wave--master polyline {
    fill: none;
    stroke: rgba(253, 246, 237, 0.74);
    stroke-width: 1.15;
    vector-effect: non-scaling-stroke;
}

.postprod-mix-wave--master .postprod-mix-wave__played polygon {
    fill: rgba(255, 94, 14, 0.22);
}

.postprod-mix-wave--master .postprod-mix-wave__played polyline {
    stroke: var(--postprod-orange);
}

.postprod-mix-master__transport {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.postprod-mix-master__transport > output {
    margin-left: auto;
    color: var(--postprod-orange);
    font-size: 0.62rem;
    letter-spacing: 0.05em;
}

.postprod-mix-master__volume {
    display: grid;
    grid-template-columns: auto minmax(92px, 150px) 34px;
    align-items: center;
    gap: 8px;
    color: rgba(253, 246, 237, 0.72);
    font-size: 0.62rem;
    font-weight: 700;
}

.postprod-mix-master__volume input {
    width: 100%;
    accent-color: var(--postprod-orange);
    cursor: pointer;
}

.postprod-mix-master__volume output {
    color: #fff7ef;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.postprod-mix-master__meters {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, 5px);
    grid-template-rows: 14px minmax(0, 1fr);
    grid-template-areas: "label-l label-r" "meter-l meter-r";
    align-items: end;
    justify-content: center;
    gap: 4px;
}

.postprod-mix-master__meters span:nth-of-type(1) { grid-area: label-l; }
.postprod-mix-master__meters span:nth-of-type(2) { grid-area: label-r; }
.postprod-mix-master__meters i:nth-of-type(1) { grid-area: meter-l; }
.postprod-mix-master__meters i:nth-of-type(2) { grid-area: meter-r; }

.postprod-mix-master__meters span {
    color: rgba(253, 246, 237, 0.44);
    font-size: 0.55rem;
    text-align: center;
}

.postprod-mix-master__meters i {
    width: 5px;
    height: calc(var(--mix-meter-level, 0.68) * 100%);
    max-height: 96%;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #ff5e0e 0 10%, #eacb38 10% 28%, #45d173 28%);
    box-shadow: 0 0 7px rgba(69, 209, 115, 0.12);
    transition: height 80ms linear;
}

.postprod-mix-master > p {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(124, 162, 255, 0.16);
    color: rgba(253, 246, 237, 0.72);
    font-size: clamp(0.72rem, 0.82vw, 0.86rem);
    line-height: 1.45;
}

@media (max-width: 980px) {
    .postprod-mix {
        --mix-panel-scroll: auto;
        padding-inline: clamp(18px, 4vw, 38px);
    }

    .postprod-mix-story,
    .postprod-mix .postprod-mix__sticky .postprod-heading {
        width: 100%;
    }

    .postprod-mix-stack {
        display: grid;
        gap: 22px;
    }

    .postprod-mix-stack__slot {
        height: auto;
        min-height: 0;
        margin-bottom: 0;
        position: relative;
        top: auto;
    }

    .postprod-mix-panel {
        --mix-panel-progress: 1;
        height: auto;
        min-height: 520px;
        position: relative;
    }

    .postprod-mix-final {
        grid-template-columns: 1fr;
    }

    .postprod-mix-final__connections {
        height: 32px;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 1fr;
    }

    .postprod-mix-final__connections::after {
        width: auto;
        height: 1px;
        left: 10%;
        right: 10%;
        top: auto;
        bottom: 0;
    }

    .postprod-mix-final__connections b {
        left: 50%;
        top: 100%;
        width: 1px;
        height: calc(clamp(12px, 1.4vw, 22px) + 10px);
        background: linear-gradient(180deg, rgba(124, 162, 255, 0.82), var(--postprod-orange));
    }

    .postprod-mix-final__connections b::after {
        right: auto;
        left: 50%;
        top: 100%;
        transform: translate(-50%, -100%) rotate(135deg);
    }

    .postprod-mix-stack__slot .postprod-mix-panel::after {
        display: none;
    }
}

@media (max-width: 620px) {
    .postprod-mix-panel {
        min-height: 0;
    }

    .postprod-mix-panel__header {
        min-height: 68px;
        align-items: flex-start;
        padding-block: 12px;
    }

    .postprod-mix-panel__header > div {
        display: grid;
        gap: 4px;
    }

    .postprod-mix-panel__body {
        padding: 16px;
    }

    .postprod-mix-timeline__ruler output {
        display: none;
    }

    .postprod-mix-clean {
        grid-template-rows: auto 190px auto;
    }

    .postprod-mix-clean__labels {
        grid-template-columns: 1fr 1fr;
    }

    .postprod-mix-clean__labels span {
        display: none;
    }

    .postprod-mix-layers,
    .postprod-mix-final__tracks {
        grid-template-rows: repeat(5, 62px);
    }

    .postprod-mix-layer,
    .postprod-mix-final__tracks > div {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .postprod-mix-processed-track__state {
        display: none;
    }

    .postprod-mix-final__tracks .postprod-mix-wave {
        grid-column: 2;
    }

    .postprod-mix-layer > i,
    .postprod-mix-final__tracks > div > i {
        display: none;
    }

    .postprod-mix-shape {
        grid-template-rows: auto auto auto;
        max-width: calc(100vw - 2px);
    }

    .postprod-mix-shape__tracks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .postprod-mix-shape__tracks button:last-child {
        grid-column: 1 / -1;
    }

    .postprod-mix-shape__preview > header {
        grid-template-columns: 32px minmax(0, 1fr) auto;
    }

    .postprod-mix-shape__preview > header [data-mix-shape-state],
    .postprod-mix-shape__volume,
    .postprod-mix-shape__meter {
        grid-column: 1 / -1;
        width: 100%;
    }

    .postprod-mix-process-chain {
        grid-template-columns: 1fr;
    }

    .postprod-mix-station {
        height: 64px;
        min-height: 64px;
        padding: 8px 10px;
        grid-template-columns: 20px minmax(0, 1fr) auto;
        grid-template-rows: 1fr;
        column-gap: 7px;
    }

    .postprod-mix-station > span,
    .postprod-mix-station h4,
    .postprod-mix-station::after {
        grid-row: 1;
        align-self: center;
    }

    .postprod-mix-station p {
        display: none;
    }

    .postprod-mix-station::after {
        min-width: 52px;
        padding: 5px 6px;
    }

    .postprod-mix-master__signal {
        min-height: 160px;
        grid-template-columns: 44px minmax(0, 1fr);
    }
}

/* ==========================================================================
   Bloc mixage : version ecrite, telephone et tablette

   La console interactive suppose une largeur -- cinq pistes avec forme d'onde,
   curseur et VU-metre sur une meme ligne -- et une capacite audio que les
   appareils tactiles n'ont pas : iOS ne joue qu'un flux a la fois, ce qui
   retire tout sens au "Tout lire" comme a la superposition des couches.
   Plutot qu'une console amputee, le meme propos ecrit.

   Le masquage vit ici, hors de toute requete media, pour ne pas dependre de
   l'ordre des regles : une declaration d'affichage placee plus bas dans le
   fichier l'emporterait sur celle qui masque.
   ========================================================================== */
.postprod-mix-note {
    display: none;
}

@media (max-width: 980px) {
    .postprod-mix-story {
        display: none;
    }

    .postprod-mix-note {
        /* Colonne du numero, ecart entre etapes et taille du chiffre : le
           trait qui relie les etapes doit s'accrocher exactement dessus, donc
           une seule source pour les trois. */
        --mix-note-col: clamp(34px, 9vw, 46px);
        --mix-note-gap: clamp(24px, 4.5vw, 38px);
        --mix-note-num: clamp(0.82rem, 3vw, 0.98rem);
        width: min(1480px, 94vw);
        margin: 0 auto;
        display: grid;
        gap: clamp(26px, 4.5vw, 40px);
        color: rgba(253, 246, 237, 0.66);
    }

    .postprod-mix-note__lead {
        margin: 0;
        padding-bottom: clamp(22px, 4vw, 32px);
        border-bottom: 1px solid rgba(124, 162, 255, 0.16);
        color: rgba(253, 246, 237, 0.86);
        font-size: clamp(1rem, 3.6vw, 1.24rem);
        line-height: 1.55;
    }

    .postprod-mix-note__steps {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: var(--mix-note-gap);
    }

    .postprod-mix-note__steps > li {
        display: grid;
        /* Le numero tient sa colonne : les titres s'alignent entre eux quel que
           soit le chiffre, et le texte ne vient pas se glisser dessous. */
        grid-template-columns: var(--mix-note-col) minmax(0, 1fr);
        column-gap: clamp(12px, 3vw, 18px);
        align-items: start;
    }

    .postprod-mix-note__steps > li > span {
        color: var(--postprod-orange);
        font: 800 var(--mix-note-num)/1.2 var(--font-sans);
        letter-spacing: 0.08em;
        /* Cale le chiffre sur la premiere ligne du titre, dont la taille et
           l'interlignage different. */
        padding-top: 0.22em;
    }

    .postprod-mix-note__steps h3 {
        margin: 0 0 0.5em;
        color: var(--postprod-cream);
        font-size: clamp(1.06rem, 4.2vw, 1.34rem);
        font-weight: 750;
        letter-spacing: -0.01em;
        line-height: 1.2;
    }

    .postprod-mix-note__steps p {
        margin: 0;
        font-size: clamp(0.92rem, 3.4vw, 1.04rem);
        line-height: 1.62;
        text-wrap: pretty;
    }

    .postprod-mix-note__close {
        margin: 0;
        padding-top: clamp(20px, 3.5vw, 28px);
        border-top: 1px solid rgba(124, 162, 255, 0.16);
        color: rgba(253, 246, 237, 0.8);
        /* Sans plancher en rem : mesure sur la page servie, la phrase (77
           caracteres) a une largeur naturelle proportionnelle a sa taille de
           police -- environ 31x la taille en px, quelle que soit la largeur
           d'ecran. Un plancher fixe (0,98rem) la faisait déborder du
           conteneur (94vw) des que l'ecran devient trop etroit pour ce
           plancher, d'ou le retour a la ligne. Vw pur jusqu'a 629px (ou le
           plafond de 1,14rem prend le relais, avec alors bien assez de place)
           : verifie sur 320, 375 et 980px, tient sur une ligne partout. */
        font-size: clamp(0.5rem, 2.85vw, 1.14rem);
        font-style: italic;
        line-height: 1.5;
    }

    /* ======================================================================
       La chaine du signal
       ----------------------------------------------------------------------
       Les quatre etapes ne sont pas une liste : c'est un parcours, celui que
       suit une prise brute jusqu'au master. Le desktop le montre par une
       console ; ici il se dessine pendant qu'on descend, un maillon a la fois,
       et le trait qui relie les numeros est le signal qui passe de l'un a
       l'autre.

       Tout est suspendu a .has-mix-motion, posee en JS uniquement quand le
       bloc est reellement affiche : sans script le texte reste entierement
       lisible, simplement immobile.
       ====================================================================== */
    .postprod-mix-note.has-mix-motion .postprod-mix-note__lead,
    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li,
    .postprod-mix-note.has-mix-motion .postprod-mix-note__close {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        transition:
            opacity 620ms ease,
            transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    /* Chaque cible est reprise telle quelle avec .is-mix-visible : l'etat
       masque des etapes passe par un selecteur d'element (> li) et l'emporte
       sur une simple classe, ce qui laissait les quatre etapes invisibles. */
    .postprod-mix-note.has-mix-motion .postprod-mix-note__lead.is-mix-visible,
    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li.is-mix-visible,
    .postprod-mix-note.has-mix-motion .postprod-mix-note__close.is-mix-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li {
        position: relative;
    }

    /* Le maillon vers l'etape suivante. Il part sous le chiffre -- d'ou la
       hauteur de ligne (1.2) et le decalage (0.22em) du numero reportes ici --
       et traverse l'ecart de la liste, d'ou le bottom negatif. La derniere
       etape n'en porte pas : la chaine s'arrete au master. */
    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li:not(:last-child)::before {
        content: "";
        position: absolute;
        left: calc(var(--mix-note-col) / 2);
        top: calc(var(--mix-note-num) * 1.42 + 7px);
        bottom: calc(var(--mix-note-gap) * -1);
        width: 1px;
        background: linear-gradient(
            180deg,
            rgba(255, 94, 14, 0.5),
            rgba(124, 162, 255, 0.2)
        );
        transform: translateX(-50%) scaleY(0);
        transform-origin: top center;
        transition: transform 820ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li.is-mix-visible::before {
        transform: translateX(-50%) scaleY(1);
    }

    /* Le numero s'allume au passage du signal puis retombe : une impulsion,
       pas un clignotement qu'il faudrait subir tout le temps de la lecture. */
    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li.is-mix-visible > span {
        animation: mix-note-signal 1150ms ease-out 160ms both;
    }

    /* ----------------------------------------------------------------------
       Etape 01 : la restauration, montree
       ----------------------------------------------------------------------
       Meme forme d'onde que la console du desktop, au format telephone. Les
       barres partent du signal brut (plancher de bruit haut, creux combles)
       et rejoignent le signal nettoye : seuls les creux redescendent, les
       cretes de voix tiennent. C'est le propos du paragraphe -- "le rythme et
       le grain doivent rester intacts" -- rendu visible avant d'etre lu.
       Les deux jeux de valeurs viennent de la console (voiceRaw/voiceClean),
       les couleurs aussi : bleu pour le brut, vert pour le stable.
       ---------------------------------------------------------------------- */
    .postprod-mix-note__wave {
        height: clamp(38px, 11vw, 52px);
        margin: 0 0 clamp(13px, 3vw, 17px);
        display: flex;
        align-items: center;
        gap: 2px;
        overflow: hidden;
    }

    .postprod-mix-note__wave > span {
        min-width: 1px;
        flex: 1 1 0;
        border-radius: 1px;
        height: calc(var(--wave-raw, 0.1) * 100%);
        background: #6f94ff;
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__wave > span {
        transition:
            height 880ms cubic-bezier(0.22, 0.61, 0.36, 1),
            background-color 880ms ease;
        transition-delay: var(--wave-delay, 0ms);
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li.is-mix-visible .postprod-mix-note__wave > span {
        height: calc(var(--wave-clean, 0.1) * 100%);
        background: #35d6a2;
    }

    /* ----------------------------------------------------------------------
       Etape 02 : les couches, empilees
       ----------------------------------------------------------------------
       Les cinq pistes de la console, l'une apres l'autre : la bande-son se
       construit sous les yeux au lieu d'etre decrite. Chaque piste garde la
       couleur de sa famille et sa propre forme d'onde (remplie en JS depuis
       les memes donnees que la console).
       ---------------------------------------------------------------------- */
    /* Une seule grille pour les cinq pistes, les rangees se contentant de s'y
       fondre (display: contents) : la colonne des libelles se dimensionne
       alors sur le plus long ("Ambiance") ET reste commune aux cinq, donc
       alignee. En donnant sa propre grille a chaque rangee, il fallait figer
       une largeur -- trop etroite le libelle debordait sur la forme d'onde,
       assez large elle gaspillait la place sur les ecrans etroits. */
    .postprod-mix-note__layers {
        margin: 0 0 clamp(13px, 3vw, 17px);
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: clamp(8px, 2.2vw, 12px);
        row-gap: clamp(4px, 1.2vw, 6px);
    }

    .postprod-mix-note__layer {
        display: contents;
    }

    .postprod-mix-note__layer > strong {
        color: rgba(253, 246, 237, 0.62);
        font: 650 clamp(0.56rem, 2.15vw, 0.66rem)/1 var(--font-sans);
        text-transform: uppercase;
        white-space: nowrap;
    }

    .postprod-mix-note__layer > i {
        height: clamp(15px, 4.2vw, 20px);
        display: flex;
        align-items: center;
        gap: 1px;
        overflow: hidden;
    }

    .postprod-mix-note__layer > i > span {
        min-width: 1px;
        flex: 1 1 0;
        border-radius: 1px;
        height: calc(var(--wave-height, 0.1) * 100%);
        background: var(--note-layer-color, #6f94ff);
    }

    .postprod-mix-note__layer[data-note-layer="voice"] { --note-layer-color: #35d6a2; }
    .postprod-mix-note__layer[data-note-layer="ambience"] { --note-layer-color: #6f94ff; }
    .postprod-mix-note__layer[data-note-layer="foley"] { --note-layer-color: #c58cf0; }
    .postprod-mix-note__layer[data-note-layer="sfx"] { --note-layer-color: #ff5e0e; }
    .postprod-mix-note__layer[data-note-layer="music"] { --note-layer-color: #f3d64a; }

    /* Chaque piste arrive de la gauche, decalee : on lit un empilement, pas
       cinq lignes posees d'un bloc. L'animation porte sur les deux enfants et
       non sur la rangee : celle-ci ne dessine plus de boite (display:
       contents), elle ne peut donc ni s'opacifier ni se translater. Le rang
       est lu sur --note-layer-index, qui s'herite depuis la rangee. */
    .postprod-mix-note.has-mix-motion .postprod-mix-note__layer > strong,
    .postprod-mix-note.has-mix-motion .postprod-mix-note__layer > i {
        opacity: 0;
        transform: translate3d(-10px, 0, 0);
        transition:
            opacity 460ms ease,
            transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
        transition-delay: calc(var(--note-layer-index) * 130ms + 220ms);
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li.is-mix-visible .postprod-mix-note__layer > strong,
    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li.is-mix-visible .postprod-mix-note__layer > i {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    /* ----------------------------------------------------------------------
       Etape 03 : la chaine de traitement
       ----------------------------------------------------------------------
       Les quatre stations du desktop, qui s'allument dans l'ordre du signal.
       ---------------------------------------------------------------------- */
    .postprod-mix-note__chain {
        margin: 0 0 clamp(13px, 3vw, 17px);
        display: flex;
        flex-wrap: wrap;
        gap: clamp(6px, 1.8vw, 9px);
    }

    .postprod-mix-note__station {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: clamp(5px, 1.6vw, 7px) clamp(9px, 2.6vw, 12px);
        border: 1px solid rgba(124, 162, 255, 0.22);
        border-radius: 999px;
        color: rgba(253, 246, 237, 0.6);
        font: 650 clamp(0.62rem, 2.4vw, 0.74rem)/1 var(--font-sans);
        letter-spacing: 0.01em;
        transition: border-color 420ms ease, color 420ms ease, background-color 420ms ease;
    }

    .postprod-mix-note__station > i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(124, 162, 255, 0.34);
        transition: background-color 420ms ease, box-shadow 420ms ease;
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__station {
        transition-delay: calc(var(--note-station-index) * 160ms + 260ms);
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__station > i {
        transition-delay: calc(var(--note-station-index) * 160ms + 260ms);
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li.is-mix-visible .postprod-mix-note__station {
        border-color: rgba(255, 94, 14, 0.42);
        background: rgba(255, 94, 14, 0.07);
        color: rgba(253, 246, 237, 0.9);
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li.is-mix-visible .postprod-mix-note__station > i {
        background: var(--postprod-orange);
        box-shadow: 0 0 8px rgba(255, 94, 14, 0.6);
    }

    /* ----------------------------------------------------------------------
       Etape 04 : la convergence vers le master
       ----------------------------------------------------------------------
       Les cinq sources montent a leur niveau final (ceux du Master de la
       console), puis la barre de sortie se remplit jusqu'a la cible de
       diffusion citee dans le paragraphe.
       ---------------------------------------------------------------------- */
    /* Une seule grille pour les trois elements : les sources et la barre de
       sortie partagent la meme ligne, donc la meme base ; l'etiquette occupe
       la ligne d'en dessous. Imbriquee dans un conteneur intermediaire, la
       barre flottait au-dessus de la base des sources, poussee par la hauteur
       de l'etiquette -- et l'etiquette, plus large que la barre, sortait du
       cadre. La colonne se dimensionne ici sur la plus large des deux. */
    .postprod-mix-note__master {
        margin: 0 0 clamp(13px, 3vw, 17px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: end;
        justify-items: center;
        column-gap: clamp(12px, 3.4vw, 18px);
        row-gap: 6px;
    }

    .postprod-mix-note__master-sources {
        grid-column: 1;
        grid-row: 1;
        justify-self: stretch;
        height: clamp(30px, 8vw, 40px);
        display: flex;
        align-items: flex-end;
        gap: clamp(4px, 1.4vw, 7px);
    }

    .postprod-mix-note__master-sources > i {
        flex: 1 1 0;
        border-radius: 2px 2px 0 0;
        height: 3px;
        background: linear-gradient(180deg, rgba(111, 148, 255, 0.85), rgba(111, 148, 255, 0.3));
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__master-sources > i {
        transition: height 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
        transition-delay: calc(var(--note-master-index) * 90ms + 220ms);
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li.is-mix-visible .postprod-mix-note__master-sources > i {
        height: var(--note-master-level);
    }

    .postprod-mix-note__master-bar {
        grid-column: 2;
        grid-row: 1;
        width: clamp(9px, 2.6vw, 12px);
        height: clamp(30px, 8vw, 40px);
        border-radius: 3px;
        background:
            linear-gradient(180deg, var(--postprod-orange), rgba(255, 94, 14, 0.35))
            no-repeat bottom / 100% 4%;
        box-shadow: inset 0 0 0 1px rgba(255, 94, 14, 0.28);
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__master-bar {
        transition: background-size 760ms cubic-bezier(0.22, 0.61, 0.36, 1) 720ms;
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li.is-mix-visible .postprod-mix-note__master-bar {
        background-size: 100% 86%;
    }

    .postprod-mix-note__master-target {
        grid-column: 2;
        grid-row: 2;
        color: rgba(253, 246, 237, 0.52);
        font: 650 clamp(0.55rem, 2.1vw, 0.64rem)/1 var(--font-sans);
        font-style: normal;
        white-space: nowrap;
    }

    @keyframes mix-note-signal {
        0% {
            text-shadow: none;
        }

        26% {
            text-shadow: 0 0 15px rgba(255, 94, 14, 0.72);
        }

        100% {
            text-shadow: none;
        }
    }
}

/* Mouvement reduit : le bloc son s'affiche d'un coup, trait compris. Le JS
   n'arme deja pas l'observateur dans ce cas, cette regle couvre le reglage
   change apres le chargement. */
@media (prefers-reduced-motion: reduce) {
    .postprod-mix-note.has-mix-motion .postprod-mix-note__lead,
    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li,
    .postprod-mix-note.has-mix-motion .postprod-mix-note__close {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li:not(:last-child)::before {
        transform: translateX(-50%) scaleY(1);
        transition: none;
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__steps > li.is-mix-visible > span {
        animation: none;
    }

    /* La forme d'onde reste, mais deja nettoyee : l'information est la, sans
       le mouvement. */
    .postprod-mix-note .postprod-mix-note__wave > span {
        height: calc(var(--wave-clean, 0.1) * 100%);
        background: #35d6a2;
        transition: none;
    }

    /* Idem pour les trois autres etapes : chaque visuel est pose dans son
       etat final, sans transition ni decalage. */
    .postprod-mix-note.has-mix-motion .postprod-mix-note__layer > strong,
    .postprod-mix-note.has-mix-motion .postprod-mix-note__layer > i {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__station {
        border-color: rgba(255, 94, 14, 0.42);
        background: rgba(255, 94, 14, 0.07);
        color: rgba(253, 246, 237, 0.9);
        transition: none;
    }

    .postprod-mix-note.has-mix-motion .postprod-mix-note__station > i {
        background: var(--postprod-orange);
        box-shadow: 0 0 8px rgba(255, 94, 14, 0.6);
        transition: none;
    }

    .postprod-mix-note .postprod-mix-note__master-sources > i {
        height: var(--note-master-level);
        transition: none;
    }

    .postprod-mix-note .postprod-mix-note__master-bar {
        background-size: 100% 86%;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .postprod-mix {
        --mix-panel-scroll: auto;
    }

    .postprod-mix-stack {
        display: grid;
        gap: 22px;
    }

    .postprod-mix-stack__slot {
        height: auto;
        min-height: 0;
        margin-bottom: 0;
        position: relative;
        top: auto;
    }

    .postprod-mix-panel {
        --mix-panel-progress: 1;
        height: auto;
        min-height: 520px;
        position: relative;
        top: auto;
    }

    .postprod-mix-panel::after,
    .postprod-mix-clean__scan {
        display: none;
    }

    .postprod-mix-layer {
        opacity: 1;
        transform: none;
    }

    .postprod-mix-master__meters i {
        transition: none;
    }
}

/* Desktop : toujours le libelle complet, la version courte ne sert qu'au
   menu mobile/tablette (regle par defaut, l'override mobile suit plus bas). */
.menu-label-short {
    display: none;
}

/* Menu mobile/tablette : les sous-items (Pre/Production/Post-production,
   les 3 pages legales) deviennent visuellement des titres a part entiere,
   au meme niveau que "Notre savoir-faire" / "Conditions d'utilisation" -
   plus de hierarchie visuelle (taille, poids, couleur, indentation), la
   liste se lit comme un ensemble plat de titres. Desktop non concerne
   (survol + sous-menus qui se deploient, logique differente).
   Place en fin de fichier pour l'emporter sur plusieurs correctifs
   anterieurs (calages de hauteur pour le decalage au survol desktop,
   gap redefinit une seconde fois a <=700px) qui partagent les memes
   selecteurs ou une specificite egale. */
@media (max-width: 980px) {
    .menu-submenu a {
        font-size: clamp(2rem, calc(9.3vw - 4px), 6rem);
        font-weight: 600;
        color: var(--ink);
    }

    .menu-submenu,
    .menu-item--craft .menu-submenu,
    .menu-item--legal .menu-submenu {
        gap: clamp(26px, 5vw, 58px);
        margin-left: 0;
        margin-top: clamp(26px, 5vw, 58px);
    }

    .menu-item--legal .menu-submenu {
        margin-bottom: 0;
    }

    /* A cette taille de titre, "Politique de confidentialite" depasse le
       panneau si on l'empeche de retourner a la ligne (meme piege que le
       nowrap desktop deja corrige sur les titres principaux). */
    .menu-item--legal .menu-submenu a {
        white-space: normal;
    }

    /* "Politique de confidentialite" -> version courte sur mobile/tablette
       pour tenir sur une seule ligne comme les autres titres. */
    .menu-label-full {
        display: none;
    }

    .menu-label-short {
        display: inline;
    }
}

/* Cartes savoir-faire.php mobile/tablette : layout horizontal comme sur
   desktop (titre a gauche, image miniature a droite) au lieu de
   l'empilement vertical (titre en haut, grande image en dessous) impose
   par les correctifs mobiles anterieurs. Place en fin de fichier pour
   l'emporter sur ces blocs (grid-template-columns: 1fr, height: auto,
   media pleine largeur, aspect-ratio fixe). */
@media (max-width: 980px) {
    .savoir-steps {
        gap: clamp(16px, 3.2vw, 28px);
        padding-bottom: clamp(64px, 10vw, 110px);
    }

    .savoir-step,
    .savoir-step--shoot {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(14px, 3.4vw, 24px);
        height: clamp(96px, 24vw, 160px);
    }

    .savoir-step__label,
    .savoir-step--shoot .savoir-step__label {
        width: 100%;
        padding: 0 0 0 clamp(14px, 3vw, 20px);
    }

    .savoir-step__label h2 {
        font-size: clamp(0.95rem, 4.9vw, 1.9rem);
        white-space: normal;
        overflow-wrap: break-word;
    }

    .savoir-step__label span {
        width: clamp(48px, 9vw, 80px);
        height: 2px;
        margin-top: clamp(8px, 1.6vw, 12px);
    }

    .savoir-step__media,
    .savoir-step--preprod .savoir-step__media,
    .savoir-step--shoot .savoir-step__media,
    .savoir-step--postprod .savoir-step__media {
        width: 100%;
        max-width: none;
        aspect-ratio: auto;
        mask-image: linear-gradient(90deg, transparent 0%, transparent 14%, rgba(0, 0, 0, 0.1) 28%, rgba(0, 0, 0, 0.38) 46%, rgba(0, 0, 0, 0.78) 64%, #000 82%, #000 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 14%, rgba(0, 0, 0, 0.1) 28%, rgba(0, 0, 0, 0.38) 46%, rgba(0, 0, 0, 0.78) 64%, #000 82%, #000 100%);
    }
}

/* ==========================================================================
   Avant / Apres : mode plein ecran paysage sur telephone

   L'outil est une console d'etalonnage concue pour un grand ecran : reglages
   primaires a gauche, visionneuse au centre, roues chromatiques a droite,
   courbe et parade RGB en bas. Empile sur une colonne de telephone il devient
   illisible et occupe une hauteur enorme. Il est donc replie a son en-tete,
   avec un bouton Agrandir qui l'ouvre en plein ecran.

   En portrait, le plein ecran presente l'outil deja pivote aux mesures du
   paysage : on voit immediatement de quoi il s'agit et qu'il faut tourner
   l'appareil. Cet apercu n'est PAS interactif -- sous rotation,
   getBoundingClientRect renvoie le cadre englobant et non les bords reels, ce
   qui fausserait le calcul de position du comparateur avant/apres. La console
   ne devient manipulable qu'une fois l'appareil reellement tourne, ou plus
   aucune transformation ne s'applique.
   ========================================================================== */

/* Agrandir et Fermer n'existent qu'en mobile ; les blocs qui suivent les
   affichent. A declarer AVANT eux : a specificite egale, la derniere regle
   l'emporte, et ce masquage annulerait sinon leur affichage. */
.postprod-color-tool__collapse,
.postprod-color-tool__expand,
.postprod-color-tool__tabs {
    display: none;
}

@media (max-width: 980px) {
    /* Etat replie : seul l'en-tete subsiste. */
    .postprod-color-tool--compare:not(.is-fullscreen) > :not(.postprod-color-tool__heading) {
        display: none;
    }

    .postprod-color-tool--compare:not(.is-fullscreen) {
        /* Le decalage de -15px cale l'outil sur les blocs voisins en pleine
           hauteur ; replie a un simple bandeau, il n'a plus lieu d'etre. */
        transform: none;
    }

    /* L'import et la sauvegarde ne servent qu'une fois l'outil ouvert. */
    .postprod-color-tool--compare:not(.is-fullscreen) .postprod-color-tool__import,
    .postprod-color-tool--compare:not(.is-fullscreen) .postprod-color-tool__save {
        display: none;
    }

    .postprod-color-tool__expand {
        display: inline-flex;
        align-items: center;
        margin-left: auto;
        flex: 0 0 auto;
        padding: 0.42rem 0.9rem;
        border: 1px solid rgba(114, 149, 216, 0.5);
        border-radius: 4px;
        background: rgba(114, 149, 216, 0.12);
        color: var(--cream);
        font: 700 0.68rem/1 var(--font-body);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .postprod-color-tool__expand:is(:hover, :focus-visible) {
        border-color: var(--postprod-orange);
        color: var(--postprod-orange);
    }

    /* --- Plein ecran --- */
    .postprod-color-tool--compare.is-fullscreen {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 9999;
        width: 100dvw;
        height: 100dvh;
        margin: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: #05070c;
        transform: translate(-50%, -50%);
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__expand {
        display: none;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__collapse {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin-left: auto;
        flex: 0 0 auto;
        border: 1px solid rgba(114, 149, 216, 0.5);
        border-radius: 4px;
        background: rgba(3, 5, 10, 0.7);
        color: var(--cream);
        font-size: 1.1rem;
        line-height: 1;
        cursor: pointer;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__collapse:is(:hover, :focus-visible) {
        border-color: var(--postprod-orange);
        color: var(--postprod-orange);
    }

    /* Empeche la page de defiler derriere le plein ecran. */
    body.has-compare-fullscreen {
        overflow: hidden;
    }

    /* L'en-tete du site et la navigation de page sont fixes : elles restaient
       au-dessus du plein ecran et recouvraient le titre de l'outil ainsi que
       les boutons Importer et Sauvegarder. La console prend tout l'ecran, il
       n'y a rien a naviguer derriere. */
    body.has-compare-fullscreen .site-header,
    body.has-compare-fullscreen .postprod-page-nav {
        display: none;
    }
}

/* L'invitation est pilotee par la classe posee sur body, pas par l'attribut
   hidden : une regle display: grid l'emporterait sur le display: none de
   l'attribut et la rendrait impossible a masquer proprement. */
.postprod-compare-rotate {
    display: none;
}

/* --- Portrait : apercu pivote, non interactif, plus l'invitation --- */
@media (max-width: 980px) and (orientation: portrait) {
    /* Ecran d'attente, sans apercu.
       La console etait d'abord presentee pivotee a 90deg, pour montrer de quoi
       il s'agissait. En pratique cela donnait un ecran illisible : libelles a la
       verticale se croisant avec le titre de la page qui transparaissait
       derriere, et un cadre semi-transparent par-dessus. Le plein ecran devient
       donc un panneau opaque qui n'affiche que la consigne, et la console
       n'apparait qu'une fois l'appareil tourne -- ou elle est de toute facon la
       seule a etre manipulable. */
    .postprod-color-tool--compare.is-fullscreen {
        width: 100dvw;
        height: 100dvh;
        transform: translate(-50%, -50%);
        background: #05070c;
    }

    .postprod-color-tool--compare.is-fullscreen > * {
        display: none;
    }

    body.has-compare-fullscreen .postprod-compare-rotate {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 1.1rem;
        padding: 2rem;
        /* Opaque : plus rien ne doit transparaitre derriere. */
        background: #05070c;
        color: var(--cream);
        text-align: center;
    }

    .postprod-compare-rotate__icon {
        width: 46px;
        height: 74px;
        border: 3px solid var(--postprod-orange);
        border-radius: 9px;
        animation: compare-rotate-hint 2.4s ease-in-out infinite;
    }

    .postprod-compare-rotate__text {
        max-width: 15rem;
        margin: 0;
        font: 600 0.98rem/1.35 var(--font-body);
    }

    .postprod-compare-rotate__close {
        padding: 0.5rem 1.1rem;
        border: 1px solid rgba(114, 149, 216, 0.5);
        border-radius: 4px;
        background: rgba(3, 5, 10, 0.7);
        color: var(--cream);
        font: 700 0.68rem/1 var(--font-body);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .postprod-compare-rotate__close:is(:hover, :focus-visible) {
        border-color: var(--postprod-orange);
        color: var(--postprod-orange);
    }
}

@keyframes compare-rotate-hint {
    0%, 32% { transform: rotate(0deg); }
    58%, 92% { transform: rotate(-90deg); }
    100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .postprod-compare-rotate__icon {
        animation: none;
        transform: rotate(-90deg);
    }
}


/* --- Paysage telephone : visionneuse a gauche, panneau a onglets a droite ---

   La grille desktop a trois colonnes ne tient pas ici. Mesure a 836x390 : la
   colonne des reglages primaires demande 184px pour 122 disponibles, et la
   colonne des roues 909px de hauteur pour 390 -- une seule roue fait 227px de
   haut, quatre en font 908. Aucun ajustement de proportions ne comble un
   facteur 2,3.

   En paysage la place est horizontale (836px) et non verticale (390px) : la
   visionneuse occupe donc la gauche, et un seul panneau a la fois s'affiche a
   droite, choisi par des onglets. Chaque panneau retrouve ainsi une taille
   normale au lieu d'etre comprime. */
@media (max-width: 980px) and (orientation: landscape) {
    .postprod-color-tool--compare.is-fullscreen {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(238px, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    .postprod-color-tool--compare.is-fullscreen > .postprod-color-tool__heading {
        grid-column: 1 / -1;
        grid-row: 1;
        align-items: center;
        gap: 0.4rem;
        padding: 0.2rem 0.55rem;
    }

    /* Le sous-titre passait sur deux lignes et portait l'en-tete a 58px, soit
       15% de la hauteur totale. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__subtitle {
        display: none;
    }

    .postprod-color-tool--compare.is-fullscreen > .postprod-color-tool__compare {
        grid-column: 1;
        grid-row: 2 / -1;
        min-height: 0;
        /* aspect-ratio: 16/7 bridait la visionneuse a 205px dans une case de
           338, laissant 133px inutilises. Elle remplit desormais sa case ; les
           proportions de l'image sont preservees par object-fit: cover. */
        aspect-ratio: auto;
        height: 100%;
        margin: 0;
    }

    /* Sans contrainte, l'image garde sa hauteur naturelle et deborde de sa
       piste de grille. */
    .postprod-color-tool--compare.is-fullscreen > .postprod-color-tool__compare > img,
    .postprod-color-tool--compare.is-fullscreen > .postprod-color-tool__compare .postprod-color-compare__after > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .postprod-color-tool--compare.is-fullscreen > .postprod-color-tool__grade-workbench,
    .postprod-color-tool--compare.is-fullscreen > .postprod-color-tool__grade-workbench > .postprod-color-tool__grade-panel {
        display: contents;
    }

    /* --- Onglets --- */
    .postprod-color-tool__tabs {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        gap: 2px;
        padding: 0.3rem 0.4rem 0;
        border-left: 1px solid rgba(114, 149, 216, 0.2);
    }

    .postprod-color-tool__tabs button {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.4rem 0.2rem;
        border: 1px solid rgba(114, 149, 216, 0.28);
        border-bottom: 0;
        border-radius: 4px 4px 0 0;
        background: rgba(3, 5, 10, 0.6);
        color: rgba(253, 246, 237, 0.62);
        font: 700 0.58rem/1 var(--font-body);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .postprod-color-tool__tabs button[aria-selected="true"] {
        border-color: var(--postprod-orange);
        background: rgba(255, 94, 14, 0.14);
        color: var(--postprod-orange);
    }

    /* --- Panneaux : un seul visible, dans la meme case de grille --- */
    .postprod-color-tool--compare.is-fullscreen > .postprod-color-tool__primary,
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheels,
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__curves {
        grid-column: 2;
        grid-row: 3;
        min-height: 0;
        overflow-y: auto;
        border: 0;
        border-left: 1px solid rgba(114, 149, 216, 0.2);
    }

    .postprod-color-tool--compare.is-fullscreen:not([data-compare-panel="primaires"]) > .postprod-color-tool__primary,
    .postprod-color-tool--compare.is-fullscreen:not([data-compare-panel="roues"]) .postprod-color-tool__wheels,
    .postprod-color-tool--compare.is-fullscreen:not([data-compare-panel="courbes"]) .postprod-color-tool__curves {
        display: none;
    }

    /* Primaires : une colonne, le contenu demandait 184px, il en a desormais
       238 au minimum. */
    .postprod-color-tool--compare.is-fullscreen > .postprod-color-tool__primary {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 0;
        padding: 0.3rem 0.45rem;
    }

    /* Roues : deux par rangee plutot qu'une colonne de 909px. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        gap: 0.2rem;
        padding: 0.3rem;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel {
        min-height: 0;
        padding: 0.2rem;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-control {
        width: min(74px, 82%);
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__curves {
        min-height: 0;
        height: auto;
        padding-bottom: 0.3rem;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__curve-visuals {
        --color-analysis-height: clamp(96px, 30dvh, 150px);
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 0;
        align-items: stretch;
    }

    /* En hauteur auto, ces SVG se dimensionnaient sur leur largeur : 293x293
       chacun, soit 699px de contenu pour 296 de panneau. La hauteur suit
       desormais --color-analysis-height, ce qui les fait tenir a deux. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__curve-editor svg,
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__histogram svg {
        width: 100%;
        height: var(--color-analysis-height);
        min-height: 0;
        margin: 0;
        aspect-ratio: auto;
    }
}

/* Le reset general de l'en-tete n'existe qu'en plein ecran paysage. A declarer
   AVANT le bloc qui l'affiche : a specificite egale, la derniere regle
   l'emporte. */
.postprod-color-tool__reset-all-top {
    display: none;
}

/* --- En-tete du plein ecran : croix a gauche, reset au centre ---
   Le bouton de fermeture portait margin-left: auto, et Importer en porte un
   aussi : les deux marges automatiques se partageaient l'espace libre et la
   croix se retrouvait au milieu de l'en-tete. Elle reprend sa place juste
   apres le titre, et le reset general est centre par positionnement absolu
   pour ne dependre d'aucun voisin. */
@media (max-width: 980px) and (orientation: landscape) {
    .postprod-color-tool--compare.is-fullscreen > .postprod-color-tool__heading {
        position: relative;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__collapse {
        margin-left: 0.5rem;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__reset-all-top {
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.34rem 0.7rem;
        border: 1px solid rgba(114, 149, 216, 0.5);
        border-radius: 4px;
        background: rgba(3, 5, 10, 0.7);
        color: var(--cream);
        font: 700 0.6rem/1 var(--font-body);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer;
    }

    /* La fleche reste blanc creme au survol/focus, comme au repos -- seule la
       bordure marque l'interaction, pas de virage a l'orange. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__reset-all-top:is(:hover, :focus-visible) {
        border-color: var(--postprod-orange);
    }

    /* Le reset du panneau Primaires ferait doublon avec celui de l'en-tete. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-reset-all {
        display: none;
    }

    /* --- Primaires : etiquette, valeur et reset alignes, rangees espacees ---
       Avec gap: 0 les six reglages se touchaient, et le reset de chaque ligne,
       en position absolue dans la regle de base, se posait a droite du bloc
       sans rapport avec sa rangee. Chaque reglage devient une rangee a trois
       colonnes. Le curseur range reste hors flux, il est masque visuellement. */
    .postprod-color-tool--compare.is-fullscreen > .postprod-color-tool__primary {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 0.34rem;
        padding: 0.6rem;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-control {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 3.4rem 1.4rem;
        align-items: center;
        gap: 0.4rem;
        min-height: 2rem;
        padding: 0;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-control > span {
        order: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-control input[data-color-primary-output] {
        order: 2;
        width: 100%;
        min-width: 0;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-reset {
        order: 3;
        position: static;
        width: 1.4rem;
        height: 1.4rem;
        margin: 0;
        padding: 0;
    }
}

/* Les pastilles de roue n'existent qu'en plein ecran paysage. Declaree AVANT
   le bloc qui les affiche : a specificite egale, la derniere regle l'emporte. */
.postprod-color-tool__wheel-dots {
    display: none;
}

/* --- Roues : une seule en grand, balayable --- */
@media (max-width: 980px) and (orientation: landscape) {
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheels {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        padding: 0.5rem 0.6rem 0.6rem;
        /* Le balayage prend l'horizontale ; la verticale reste au defilement. */
        touch-action: pan-y;
    }

    /* Sans la classe posee par le script, aucune roue ne serait visible : la
       regle de repli affiche la premiere. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel {
        display: none;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel.is-current,
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheels:not(:has(.is-current)) .postprod-color-tool__wheel:first-of-type {
        display: grid;
        flex: 1 1 auto;
        align-content: center;
        justify-items: center;
        gap: 0.3rem;
        min-height: 0;
        padding: 0.2rem;
    }

    /* Une seule roue a la place de quatre : le disque peut enfin etre grand. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-control {
        width: min(148px, 58vh);
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel > strong {
        font-size: 0.82rem;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-values {
        width: 100%;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-level {
        width: 100%;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-dots {
        display: flex;
        flex: 0 0 auto;
        justify-content: center;
        gap: 0.5rem;
        padding-top: 0.15rem;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-dots button {
        width: 9px;
        height: 9px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(253, 246, 237, 0.3);
        cursor: pointer;
        transition: background-color 160ms ease;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-dots button[aria-selected="true"] {
        background: var(--postprod-orange);
    }
}

/* Pastilles des primaires : plein ecran paysage uniquement. Declaree AVANT le
   bloc qui les affiche, la derniere regle l'emportant a specificite egale. */
.postprod-color-tool__primary-dots {
    display: none;
}

/* Glissement d'entree des cartes de carrousel : le mouvement dit dans quel
   sens on se deplace, sans quoi le changement de roue passe inapercu. */
@keyframes carte-entre-de-droite {
    from { opacity: 0; translate: 26% 0; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes carte-entre-de-gauche {
    from { opacity: 0; translate: -26% 0; }
    to { opacity: 1; translate: 0 0; }
}

@media (max-width: 980px) and (orientation: landscape) {
    .postprod-color-tool--compare.is-fullscreen .enters-from-right {
        animation: carte-entre-de-droite 240ms ease-out;
    }

    .postprod-color-tool--compare.is-fullscreen .enters-from-left {
        animation: carte-entre-de-gauche 240ms ease-out;
    }

    /* --- Onglets : bordure complete ---
       border-bottom: 0 donnait un onglet ouvert vers le bas, cense se fondre
       dans le panneau ; celui-ci n'ayant qu'une bordure a gauche, les boutons
       paraissaient coupes net. */
    .postprod-color-tool__tabs {
        padding: 0.34rem 0.4rem 0.3rem;
    }

    .postprod-color-tool__tabs button {
        border-bottom: 1px solid rgba(114, 149, 216, 0.28);
        border-radius: 4px;
    }

    .postprod-color-tool__tabs button[aria-selected="true"] {
        border-color: var(--postprod-orange);
    }

    /* --- Reset general : fleche blanc creme seule --- */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__reset-all-top {
        gap: 0;
        width: 30px;
        height: 30px;
        padding: 0;
        justify-content: center;
        color: var(--cream);
        font-size: 1.05rem;
        letter-spacing: 0;
    }

    /* --- Filet sous la visionneuse ---
       L'image touchait le bord bas de l'ecran sans separation. */
    .postprod-color-tool--compare.is-fullscreen > .postprod-color-tool__compare {
        border-bottom: 2px solid rgba(114, 149, 216, 0.38);
    }

    /* --- Primaires en carrousel, comme les roues ---
       Empiles, les six reglages restaient minuscules. Un seul est affiche, en
       grand : etiquette au-dessus, champ de saisie large en dessous. */
    .postprod-color-tool--compare.is-fullscreen > .postprod-color-tool__primary {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        padding: 0.5rem 0.6rem 0.6rem;
        touch-action: pan-y;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-control {
        display: none;
    }

    /* Repli : sans la classe posee par le script, le premier reglage s'affiche
       quand meme au lieu d'un panneau vide. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-control.is-current,
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary:not(:has(.is-current)) .postprod-color-tool__primary-control:first-of-type {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        align-content: center;
        gap: 0.5rem;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0.2rem;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-control > span {
        order: 1;
        /* +100% (etait 0.94rem). */
        font-size: 1.88rem;
        font-weight: 600;
        text-align: center;
        white-space: normal;
        overflow: visible;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-control input[data-color-primary-output] {
        order: 2;
        width: min(150px, 78%);
        height: 46px;
        font-size: 1.28rem;
        text-align: center;
    }

    /* Plus grand et plus separe du champ au-dessus : a 1.7rem avec le glyphe
       de base (0.72rem, pense pour la ligne compacte du panneau desktop), le
       bouton restait petit et colle malgre le passage en carte pleine hauteur. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-reset {
        order: 3;
        position: static;
        /* La regle de base centre le bouton verticalement pour un
           positionnement absolute (top: 50% + translateY(-50%)) : sans annuler
           ce translate, il restait remonte de la moitie de sa hauteur (20px a
           cette taille) une fois repasse en static, jusqu'a chevaucher le champ
           au lieu de s'en ecarter. */
        transform: none;
        width: 2.5rem;
        height: 2.5rem;
        margin-top: 0.5rem;
        padding: 0;
        font-size: 1.3rem;
    }

    /* Meme rattrapage au survol/focus : la regle de base y ajoute une rotation
       au translateY(-50%) desormais annule ci-dessus. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-reset:is(:hover, :focus-visible) {
        transform: rotate(-24deg);
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-dots {
        display: flex;
        flex: 0 0 auto;
        justify-content: center;
        gap: 0.45rem;
        padding-top: 0.15rem;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-dots button {
        width: 9px;
        height: 9px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(253, 246, 237, 0.3);
        cursor: pointer;
        transition: background-color 160ms ease;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-dots button[aria-selected="true"] {
        background: var(--postprod-orange);
    }
}

@media (prefers-reduced-motion: reduce) {
    .postprod-color-tool--compare.is-fullscreen .enters-from-right,
    .postprod-color-tool--compare.is-fullscreen .enters-from-left {
        animation: none;
    }
}

/* ==========================================================================
   Plein ecran paysage : finitions des panneaux
   ========================================================================== */

@media (max-width: 980px) and (orientation: landscape) {
    /* --- Fond des panneaux aligne sur celui de l'outil ---
       Ils portaient rgba(114, 149, 216, 0.18), un voile bleute pense pour se
       detacher du desktop clair ; sur le fond noir du plein ecran il ressortait
       comme une zone bleu pale. */
    .postprod-color-tool--compare.is-fullscreen > .postprod-color-tool__primary,
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheels,
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__curves {
        background: #05070c;
    }

    /* --- Barre de 20px sous la photo ---
       Le filet de 2px ne suffisait pas a decoller l'image du bord. Pose sous la
       visionneuse seule, et non sur tout l'ecran, pour ne pas rogner la hauteur
       du panneau de droite, deja saturee. */
    .postprod-color-tool--compare.is-fullscreen > .postprod-color-tool__compare {
        border-bottom: 2px solid rgba(114, 149, 216, 0.38);
        margin-bottom: 18px;
        /* height: 100% pose plus haut faisait remplir toute la piste malgre la
           marge, et l'image touchait de nouveau le bord. L'etirement par defaut
           de la grille tient compte des marges, lui. */
        height: auto;
    }

    /* --- Roue : carte en deux colonnes ---
       Empilee, la carte saturait les 289px de hauteur du panneau alors que 185
       de ses 333px de largeur restaient vides : le disque plafonnait a 148px.
       Le disque occupe desormais une colonne a lui seul, libelle et canaux
       passent a droite, et la molette reprend toute la largeur en dessous. Le
       disque n'est plus bride que par la largeur : 191px, soit +30%. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel.is-current,
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheels:not(:has(.is-current)) .postprod-color-tool__wheel:first-of-type {
        grid-template-columns: minmax(0, 1fr) 118px;
        grid-template-rows: auto minmax(0, 1fr) auto;
        align-content: stretch;
        justify-items: center;
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.35rem;
        padding: 0.35rem;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-control {
        grid-column: 1;
        grid-row: 1 / 3;
        width: min(191px, 100%);
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel > strong {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        font-size: 0.9rem;
        /* Sans cela la grille le comprimait a 21px et le texte se repliait. */
        white-space: nowrap;
    }

    /* Quatre canaux (trois pour Decalage) sur deux colonnes au lieu d'une
       rangee, la colonne de droite ne faisant que 118px. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-values {
        grid-column: 2;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem;
        width: 100%;
        align-self: start;
    }

    /* Molette : pleine largeur sous les deux colonnes, et plus epaisse. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-level {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        height: 20px;
    }

    /* +50% (32 -> 48px). En absolu dans le coin il recouvrait le libelle et les
       canaux ; il rejoint la grille, sous les canaux, ou la colonne de droite
       laisse une reserve. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-reset {
        position: static;
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        justify-self: center;
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    /* --- Effets de survol : uniquement la ou le survol existe ---
       Sur ecran tactile, iOS conserve l'etat :hover apres un appui jusqu'au
       toucher suivant : la rotation du bouton reset restait figee et la bordure
       orange du reset general persistait. Ces effets n'ont de sens qu'au
       pointeur, ils y sont donc restreints. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-reset:is(:hover, :focus-visible) {
        transform: none;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__reset-all-top:is(:hover, :focus-visible) {
        border-color: rgba(253, 246, 237, 0.62);
        color: var(--cream);
    }
}

@media (max-width: 980px) and (orientation: landscape) and (hover: hover) {
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__primary-reset:hover {
        transform: rotate(-24deg);
    }
}

/* --- Canaux de roue : carre a quatre, triangle a trois --- */
@media (max-width: 980px) and (orientation: landscape) {
    /* La colonne de droite s'elargit de 118 a 132px pour des cases plus larges.
       Le disque, borne par cette colonne, reste bien au-dessus de sa taille
       d'origine. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel.is-current,
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheels:not(:has(.is-current)) .postprod-color-tool__wheel:first-of-type {
        grid-template-columns: minmax(0, 1fr) 132px;
    }

    /* Quatre canaux aux quatre coins d'un carre. Il restait 64px de reserve
       verticale sous les cases : elles s'en servent pour grandir. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-values {
        gap: 10px;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-values > [data-wheel-channel-control] {
        min-height: 46px;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-values input {
        font-size: 1.05rem;
    }

    /* Decalage n'a que trois canaux : le dernier se centre sous les deux
       autres, formant un triangle plutot qu'un carre ampute. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-values--rgb > [data-wheel-channel-control]:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 10px) / 2);
    }
}

/* ==========================================================================
   Parade RGB en surimpression sur la photo

   Courbe et parade se disputaient les 296px du panneau : chacune n'en avait
   qu'une moitie. En sortant la parade sur la photo, l'editeur de courbe recupere
   tout le panneau, et l'analyse reste visible quel que soit l'onglet -- on voit
   donc l'effet des reglages pendant qu'on les fait.
   ========================================================================== */
@media (max-width: 980px) and (orientation: landscape) {
    /* Le panneau Courbes reprend un masquage franc hors de son onglet : la
       parade en a ete sortie par le script et ne depend donc plus de lui. */

    /* Seule dans le panneau, la courbe en prend toute la hauteur. */
    .postprod-color-tool--compare.is-fullscreen[data-compare-panel="courbes"] .postprod-color-tool__curve-visuals {
        --color-analysis-height: auto;
        height: 100%;
    }

    .postprod-color-tool--compare.is-fullscreen[data-compare-panel="courbes"] .postprod-color-tool__curve-editor svg {
        height: auto;
        max-height: 100%;
    }

    /* --- La parade, posee sur la photo ---
       Positionnee par rapport a .is-fullscreen, qui est en position: fixed et
       sert donc de reference aux absolus. Les deux variables sont pilotees par
       le script au cliquer-glisser. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__histogram {
        position: absolute;
        /* Repli si le script ne place pas la parade : deja proche du coin bas
           droit d'une visionneuse de telephone en paysage. */
        left: var(--parade-x, 212px);
        top: var(--parade-y, 219px);
        width: 246px;
        padding: 0.3rem 0.4rem 0.15rem;
        border: 1px solid rgba(114, 149, 216, 0.45);
        border-radius: 5px;
        background: rgba(3, 5, 10, 0.55);
        opacity: 0.62;
        /* Au-dessus du curseur de comparaison, un input transparent etale sur
           toute la visionneuse : sans cela le glissement deplacerait le trait
           avant/apres au lieu de la parade. */
        z-index: 20;
        pointer-events: auto;
        /* Le geste appartient a la parade, pas au defilement. */
        touch-action: none;
        cursor: grab;
        transition: opacity 160ms ease;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__histogram.is-dragging {
        opacity: 0.9;
        cursor: grabbing;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__histogram svg {
        height: auto;
        max-height: 104px;
    }

    /* --- Reset de roue centre entre les canaux et la molette ---
       Cale par le bas de sa case, la marge le remonte. 40px le faisaient
       chevaucher les canaux de 9px : depuis que les cases sont passees a 46px
       de haut, il ne restait plus 90px a combler entre elles et la molette mais
       une douzaine. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__wheel-reset {
        margin-bottom: 12px;
    }
}

/* --- Repli de la parade et centrage de la courbe --- */
.postprod-color-tool__parade-toggle {
    display: none;
}

@media (max-width: 980px) and (orientation: landscape) {
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__parade-toggle {
        display: inline-grid;
        place-items: center;
        width: 20px;
        height: 20px;
        margin-left: 0.35rem;
        padding: 0;
        border: 1px solid rgba(114, 149, 216, 0.5);
        border-radius: 3px;
        background: rgba(3, 5, 10, 0.6);
        cursor: pointer;
    }

    /* Chevron : pointe vers le bas quand la parade est depliee (on peut la
       replier), vers le haut une fois repliee. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__parade-toggle > span {
        width: 7px;
        height: 7px;
        border-right: 2px solid var(--cream);
        border-bottom: 2px solid var(--cream);
        rotate: 45deg;
        translate: 0 -1px;
        transition: rotate 160ms ease, translate 160ms ease;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__histogram.is-collapsed .postprod-color-tool__parade-toggle > span {
        rotate: 225deg;
        translate: 0 1px;
    }

    /* Repliee, la parade ne garde que son bandeau : le titre reste visible pour
       la retrouver et la deplier. */
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__histogram.is-collapsed {
        width: auto;
    }

    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__histogram.is-collapsed svg {
        display: none;
    }

    /* --- Courbe abaissee et centree ---
       Seule dans son panneau depuis le depart de la parade, elle restait calee
       en haut avec une centaine de pixels vides en dessous. */
    .postprod-color-tool--compare.is-fullscreen[data-compare-panel="courbes"] .postprod-color-tool__curve-editor {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.5rem;
    }

    .postprod-color-tool--compare.is-fullscreen[data-compare-panel="courbes"] .postprod-color-tool__curve-editor > header {
        flex: 0 0 auto;
    }
}

/* --- Bloc Courbes epure en plein ecran paysage ---
   Graduations et libelles d'axes retires : sur un panneau de 333px ils
   mangeaient 48px a gauche et 46px en bas pour une information que la grille
   suffit a donner. La geometrie du trace lit ce masquage et recupere la place
   (voir syncColorAnalysisGeometry). */
@media (max-width: 980px) and (orientation: landscape) {
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__curve-editor .postprod-color-tool__curve-scale {
        display: none;
    }

    /* Le reset quitte l'en-tete pour sa propre ligne, sous le titre, sans
       remaniement du balisage : l'en-tete devient une grille et le conteneur
       d'actions passe en display: contents, ce qui fait de ses enfants des
       elements de cette grille. Un positionnement absolu, essaye d'abord, le
       laissait a sa position statique en hauteur -- donc au-dessus du titre. */
    .postprod-color-tool--compare.is-fullscreen[data-compare-panel="courbes"] .postprod-color-tool__curve-editor > header {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        align-items: baseline;
        row-gap: 0.55rem;
    }

    .postprod-color-tool--compare.is-fullscreen[data-compare-panel="courbes"] .postprod-color-tool__curve-editor .postprod-color-tool__analysis-actions {
        display: contents;
    }

    .postprod-color-tool--compare.is-fullscreen[data-compare-panel="courbes"] .postprod-color-tool__curve-editor > header > strong {
        grid-column: 1;
        grid-row: 1;
    }

    .postprod-color-tool--compare.is-fullscreen[data-compare-panel="courbes"] .postprod-color-tool__analysis-actions > span {
        grid-column: 2;
        grid-row: 1;
    }

    .postprod-color-tool--compare.is-fullscreen[data-compare-panel="courbes"] .postprod-color-tool__analysis-reset {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    /* La grille prend toute la largeur rendue disponible. */
    .postprod-color-tool--compare.is-fullscreen[data-compare-panel="courbes"] .postprod-color-tool__curve-editor svg {
        width: 100%;
        max-height: none;
    }
}

/* --- Glyphe du reset general ---
   .postprod-color-tool__heading span colore en orange tous les spans de
   l'en-tete -- c'est le numero "03" qu'elle vise. Le glyphe du reset est lui
   aussi un span et heritait donc de cette couleur, alors que le bouton qui le
   contient est bien en creme : la couleur mesuree sur le bouton ne revelait
   rien, il fallait mesurer le span. */
@media (max-width: 980px) and (orientation: landscape) {
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__reset-all-top > span {
        color: #fdf6ed;
        font: inherit;
    }
}

/* En portrait, le plein ecran n'est qu'un apercu pivote et la surimpression
   n'existe pas : sortie du panneau Courbes par le script, la parade s'y
   retrouverait en bloc isole au milieu de l'apercu. Elle reparait en paysage,
   ou le script la recale. */
@media (max-width: 980px) and (orientation: portrait) {
    .postprod-color-tool--compare.is-fullscreen .postprod-color-tool__histogram {
        display: none;
    }
}

/* --- Ecran d'attente en portrait : seul contenu visible, donc soigne --- */
@media (max-width: 980px) and (orientation: portrait) {
    body.has-compare-fullscreen .postprod-compare-rotate {
        gap: 1.5rem;
    }

    /* Rappel du bloc d'ou l'on vient, l'en-tete de la console etant masquee. */
    .postprod-compare-rotate::before {
        content: "03 / Avant / Apres";
        color: var(--postprod-orange);
        font: 700 0.68rem/1 var(--font-body);
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .postprod-compare-rotate__icon {
        width: 58px;
        height: 94px;
        border-width: 3px;
        border-radius: 12px;
    }

    .postprod-compare-rotate__text {
        max-width: 17rem;
        font-size: 1.06rem;
        line-height: 1.4;
    }

    .postprod-compare-rotate__close {
        padding: 0.62rem 1.5rem;
    }
}

/* ==========================================================================
   Variables animees declarees non heritees

   Une variable CSS est heritee par defaut : la modifier invalide le style de
   tout le sous-arbre. Mesure sur cette page -- 0,4 ms pour 49 descendants,
   3,7 ms pour 339, 10,9 ms pour 969, et cela A CHAQUE frame d'animation. Sur un
   telephone, 3 a 5 fois plus lent, une seule ecriture suffit a depasser le
   budget de 16 ms : d'ou le defilement qui bloque puis rattrape.

   Seules les variables des cartes Organisation sont traitees ici : elles sont
   ecrites ET lues sur la meme carte, et le comportement a ete verifie valeur
   par valeur. Les variables du Mixage ont ete ecartees -- la meme declaration y
   donnait un resultat que je n'ai pas su expliquer de facon fiable (la variable
   valait bien 1, mais l'opacite restait a l'initiale), et je n'ai pas voulu
   embarquer un doute. A reprendre lors du nettoyage general.
   Elles n'ont pas besoin d'etre heritees. Ainsi declarees, leur modification n'invalide
   plus que l'element porteur. Mesure : 3,7 ms -> 0 ms.

   ATTENTION : une propriete enregistree possede toujours une valeur, celle
   declaree ici. Les valeurs de repli ecrites dans les var() correspondantes ne
   servent donc plus, et chaque initial-value ci-dessous reprend exactement le
   repli qu'elle remplace -- sans quoi le rendu changerait avant l'entree en jeu
   du script.
   ========================================================================== */

/* <length-percentage> et non <length> : le script ecrit des pixels en mode
   compact mais des pourcentages sinon (108%, -28%). Declaree en <length>, la
   valeur en pourcentage etait rejetee et remplacee par l'initiale, et les
   cartes ne se translataient plus du tout. */
@property --organisation-y {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0px;
}

@property --organisation-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --organisation-blur {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --organisation-scale {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --organisation-z {
    syntax: "<integer>";
    inherits: false;
    initial-value: 1;
}

/* --- Sequence Color (portail) et sortie du Montage ---

   Ces onze variables etaient posees sur .postprod-color (339 descendants) et
   .postprod-montage a chaque frame de la traversee -- le meme cout que
   ci-dessus, et la sequence est active sur mobile. Le script les ecrit
   desormais directement sur leurs consommateurs (lettres du titre, blobs,
   couche du portail, contenu, titre en fond), tous feuilles ou presque :
   l'invalidation passe de 339 elements a une quinzaine sans sous-arbre.

   Meme regle que ci-dessus pour les initial-value : elles reprennent le repli
   des var() qu'elles rendent inoperants. Deux exceptions ne le peuvent pas --
   les replis 50vw/50vh et 1em de la couche du portail, les unites relatives a
   la fenetre ou a la police n'etant pas admises ici. 0px a la place : la
   couche nait avec une opacite de 0 et le script pose la geometrie dans la
   frame qui la rend visible, la valeur initiale n'est donc jamais peinte. */
@property --color-title-rest-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --color-source-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --color-portal-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}


/* Repli 1 : celui de la regle .postprod-v2, la seule servie -- la page porte
   la classe. L'autre regle, plus haut dans le fichier, disait 0. */
@property --color-workspace-reveal {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --color-backdrop-title-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

@property --montage-exit-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --montage-exit-y {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

/* ==========================================================================
   Densite portable (981px a 1600px)
   --------------------------------------------------------------------------
   Les portables 15 pouces livrés en 1920x1080 tournent presque tous avec
   l'echelle Windows a 125 % : la fenetre fait ~1536px CSS, affiches un quart
   plus gros que sur un moniteur a 100 %, dans un ecran physiquement plus
   petit. La composition du site etant proportionnelle (titres pilotes par
   leur terme vw a ces largeurs), tout y paraissait enorme -- constate sur
   l'Acer Aspire 5 de test.

   Ce bloc reduit les titres d'affichage de 14 % dans cette plage : chaque
   regle reprend la formule d'origine multipliee par 0.86, pour que rien ne
   change en dehors de la plage. Le texte courant, lui, garde sa taille --
   c'est la hierarchie qu'on resserre, pas la lisibilite.
   ========================================================================== */
@media (min-width: 981px) and (max-width: 1600px) {
    .craft-title {
        font-size: calc(clamp(3.1rem, 7.8vw, 8.2rem) * 0.86);
    }

    .postprod-v2 .postprod-v2__hero h1 {
        font-size: calc(clamp(4.2rem, 9.5vw, 10.5rem) * 0.86);
    }

    .postprod-heading h2 {
        font-size: calc(clamp(2.7rem, 6vw, 7rem) * 0.86);
    }

    .postprod-montage__split-complete {
        font-size: calc(clamp(4.2rem, 10vw, 9rem) * 0.86);
    }

    .postprod-color-intro {
        font-size: calc(clamp(4rem, 12vw, 10rem) * 0.86);
    }

    .production-config-card h3 {
        font-size: calc(clamp(2.4rem, 4.4vw, 5rem) * 0.86);
    }

    .craft-collage h2 {
        font-size: calc(clamp(3.2rem, 8vw, 8rem) * 0.86);
    }

    .vision-band h2 {
        font-size: calc(clamp(2.1rem, 5vw, 4.8rem) * 0.86);
    }

    .section-heading h2 {
        font-size: calc(clamp(3rem, 7vw, 7.6rem) * 0.86);
    }

    .stats h2 {
        font-size: calc(clamp(2.7rem, 6vw, 6.2rem) * 0.86);
    }

    .contact-intro h2 {
        font-size: calc(clamp(3.5rem, 6.2vw, 7.1rem) * 0.86);
    }

    .simple-page h1 {
        font-size: calc(clamp(4.2rem, 8vw, 9rem) * 0.86);
    }

    .legal-page h1 {
        font-size: calc(clamp(3.2rem, 5.7vw, 7rem) * 0.86);
    }

    .savoir-hero h1 {
        font-size: calc(clamp(4.2rem, 8vw, 9rem) * 0.86);
    }

    .process-hero h1 {
        font-size: calc(clamp(3.5rem, 6.2vw, 7.1rem) * 0.86);
    }

    .process-page--postprod .process-hero h1 {
        font-size: calc(clamp(4.2rem, 8vw, 9rem) * 0.86);
    }

    .production-v2__formats h2 {
        font-size: calc(clamp(2.35rem, 4.3vw, 5rem) * 0.86);
    }

    /* La bande de logos clients suit le mouvement des titres. */
    .logo-track img {
        height: calc(clamp(30px, 3.6vw, 54px) * 0.86);
    }

    /* ----------------------------------------------------------------------
       Rythme vertical
       ----------------------------------------------------------------------
       Tous les espacements verticaux du site sont ecrits en clamp(min, Xvw,
       max), donc calcules sur la LARGEUR. Leur terme vw plafonne vers 1170px :
       au-dela, toute fenetre recoit l'espacement vertical maximal, quelle que
       soit sa hauteur. Sur un portable large mais court (1536x750 sur l'Acer),
       on cumulait donc les plus grandes valeurs du site dans la fenetre la
       plus basse -- mesure sur l'accueil : 332px de blanc pur dans la seule
       bande clients, soit 30 % de la section.

       Chaque regle ci-dessous garde sa formule d'origine et lui ajoute un
       plafond en vh : l'espacement suit desormais la hauteur reellement
       disponible. Les valeurs ne sont pas des reductions uniformes -- une
       section deja dense perd peu, une section aeree perd beaucoup.
       ---------------------------------------------------------------------- */
    .clients {
        padding-block: min(clamp(30px, 4vw, 42px), 5vh);
    }

    .testimonial-shell {
        margin-block: min(clamp(32px, 4vw, 54px), 6vh);
    }

    .testimonial-stack {
        margin-top: min(44px, 4.5vh);
    }

    .stats {
        padding-top: min(clamp(88px, 11vw, 142px), 10vh);
        padding-bottom: min(clamp(82px, 9vw, 128px), 9vh);
    }

    .vision-band {
        padding-block: min(clamp(74px, 9vw, 126px), 9vh);
        min-height: 0;
    }

    .works {
        padding-top: min(clamp(40px, 7vw, 84px), 6vh);
    }

    /* ----------------------------------------------------------------------
       Carte materiel : largeur ramenee de 1408 a 1180px.
       Elle occupait 92 % de la fenetre, ne laissant que 64px de gouttiere de
       chaque cote -- moins que les fleches du carrousel (66px), qui mordaient
       donc sur la carte. La retrecir rend leur place aux fleches et resserre
       la page, sans toucher au grand ecran ou la gouttiere est deja large.
       ---------------------------------------------------------------------- */
    .production-v2__configurations,
    .production-v2__equipment {
        --production-equipment-width: min(1180px, calc(100vw - clamp(44px, 8vw, 150px)));
        padding-block: min(clamp(110px, 12vw, 190px), 12vh);
    }

    /* Suite du rythme vertical : les postes les plus lourds des pages
       interieures, releves par la sonde. Les en-tetes de page perdent aussi
       leur hauteur minimale imposee, qui reservait jusqu'a 820px -- plus
       d'un ecran de l'Acer -- avant meme le premier contenu. */
    .production-v2__formats {
        padding-bottom: min(clamp(120px, 14vw, 220px), 13vh);
    }

    .production-v2__arrival {
        margin-top: min(clamp(110px, 12vw, 190px), 12vh);
    }

    .production-next-step {
        margin-block: min(clamp(24px, 4vw, 56px), 5vh) min(clamp(92px, 10vw, 150px), 11vh);
    }

    .preprod-standalone-cta {
        padding-block: min(130px, 11vh);
    }

    .savoir-steps {
        padding-bottom: min(clamp(132px, 13vw, 224px), 13vh);
    }

    .savoir-hero {
        min-height: min(clamp(620px, 49vw, 820px), 76vh);
        padding-top: min(clamp(118px, 11vw, 166px), 14vh);
        padding-bottom: min(clamp(72px, 8vw, 130px), 11vh);
    }

    .process-hero {
        min-height: min(clamp(520px, 45vw, 760px), 72vh);
        padding-top: min(clamp(118px, 11vw, 164px), 14vh);
        padding-bottom: min(clamp(72px, 8vw, 124px), 11vh);
    }

    /* Selecteur aligne sur .contact-page .contact-panel, declare plus haut
       dans un @media (min-width: 981px) : a specificite egale il l'emporterait
       sur un simple .contact-panel, quel que soit l'ordre. */
    .contact-page .contact-panel {
        padding-top: min(clamp(88px, 8vw, 124px), 11vh);
    }
}

/* Supports (production.php) sur telephone et tablette. Le drone reprend toute
   sa boite : la reduction de 10 % (voir plus haut) compensait sa largeur face
   aux autres supports sur grand ecran, mais sur une carte mobile il paraissait
   perdu au milieu du vide. Le trepied recoit un centrage explicite -- le
   centrage implicite (absolute + inset + margin auto) s'est montre fragile sur
   iOS, ou il s'affichait decale. */
@media (max-width: 980px) {
    .production-config-visual[data-production-visual="drone"] .production-config-photo {
        width: 100%;
        height: 100%;
    }

    .production-config-visual[data-production-visual="tripod"] {
        width: 100%;
        justify-self: center;
    }

    .production-config-visual[data-production-visual="tripod"] .production-config-photo {
        left: 0;
        right: 0;
        margin-inline: auto;
    }
}

/* Bandeau large sous le titre des pages savoir-faire (pre-prod, prod, post-prod),
   provisoire en attendant les mini-showreels par metier. */
.savoir-faire-banner {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 0 48px;
}

.savoir-faire-banner img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 980px) {
    .savoir-faire-banner {
        margin-bottom: 32px;
    }
}

/* Blobs de halo derriere le titre des pages savoir-faire : retires, le
   bandeau tient desormais ce role en haut de page. Les regles d'origine
   restent en place plus haut dans le fichier (partagees avec d'autres
   selecteurs) -- on neutralise juste leur rendu ici. */
.process-page--preprod .process-hero::before,
.process-page--preprod .process-hero::after,
.process-page--production .process-hero::before,
.process-page--postprod .process-hero::before,
.process-page--postprod .process-hero::after {
    display: none;
}

/* Le titre se superpose au bas du bandeau au lieu de s'empiler dessous :
   le hero remonte par-dessus (marge negative) et son fond passe d'un
   degrade transparent (le bandeau reste visible derriere le haut du
   hero) a noir plein (ou le reste de la page continue normalement). */
.savoir-faire-banner + .process-hero {
    position: relative;
    z-index: 2;
    margin-top: -580px;
    background: linear-gradient(180deg, rgba(3, 4, 8, 0) 0%, rgba(3, 4, 8, 0.32) 38%, rgba(3, 4, 8, 0.82) 62%, var(--black) 84%);
}

/* Le chevauchement du titre sur le bandeau ne tient pas sur mobile : la
   hauteur du hero (fil d'ariane + gros titre + chapo, empiles) depasse de
   loin celle d'un bandeau 11:7 sur un ecran etroit. Le pousser en negatif
   suffisamment pour couvrir tout ce texte remontait le haut du hero
   au-dessus du bandeau lui-meme -- et le degrade transparent, prevu pour
   un chevauchement partiel, laissait alors un grand vide noir avant le
   texte. Sur mobile le bandeau et le titre s'empilent donc normalement. */
@media (max-width: 720px) {
    .savoir-faire-banner + .process-hero {
        margin-top: 0;
        min-height: 0;
        padding-top: 32px;
        background: var(--black);
    }
}

/* Bouton de contact remonte : le bandeau + titre resserres au-dessus
   laissent un vide devenu trop grand avant "Nous contacter". */
.process-page--preprod .preprod-standalone-cta,
.process-page--postprod .preprod-standalone-cta {
    margin-top: 0;
}

@media (max-width: 720px) {
    .process-page--preprod .preprod-standalone-cta,
    .process-page--postprod .preprod-standalone-cta {
        margin-top: -30px;
    }
}

/* Flou diffus tente puis retire : backdrop-filter combine a mask-image
   s'est affiche en bande noire opaque au lieu d'un flou (rendu instable
   d'un navigateur a l'autre). Le dégradé de .savoir-faire-banner +
   .process-hero ci-dessus, seul, assure deja la transition. */