/*
 * Laure Nillus — frontoffice.
 *
 * Written mobile-first: the single column is the base. From 60 rem the desk of Léa
 * Muller's mockup appears: text left, filmstrip right, each column scrolling on its own.
 */

:root {
    --encre: #1a1a1a;
    --encre-douce: #4a4a4a;
    --papier: #ffffff;
    --trait: #d8d8d8;
    --accent: #000000;

    --pas: 0.5rem;
    --gouttiere: 1.5rem;
    --largeur-texte: 22rem;

    --texte: 0.875rem;
    --interligne: 1.55;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    /* Texture of the current rubrique, lightened so type stays readable. */
    --voile: 0.6;
    background:
        linear-gradient(rgb(255 255 255 / var(--voile)), rgb(255 255 255 / var(--voile))),
        #b9b9b9 var(--fond-page, none) center / cover fixed no-repeat;
    color: var(--encre);
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: var(--texte);
    line-height: var(--interligne);
}

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

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

button:disabled {
    opacity: 0.35;
    cursor: default;
}

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

a:hover,
a:focus-visible,
.projet__presse-lien:hover,
.projet__presse-lien:focus-visible {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- en-tête */

.entete {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    gap: var(--gouttiere);
    padding: var(--gouttiere);
}

/*
 * Ylee MHIM (Yosep Lee, 2016), free for commercial use — see
 * fonts/ylee-mhim-licence.txt. Latin subset; the recipe is bin/ingerer-habillage.sh.
 * The header wordmark is the only consumer.
 */
@font-face {
    font-family: "Ylee MHIM";
    src: url("fonts/ylee-mhim.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.entete__logo {
    align-self: center;
    font-family: "Ylee MHIM", "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive;
    font-size: 1.75rem;
    line-height: 1.1;
    white-space: nowrap;
}

.entete__logo:hover,
.entete__logo:focus-visible {
    text-decoration: none;
}

.menu {
    flex: 1;
}

.menu__rubriques,
.menu__projets,
.menu__groupe ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu__rubriques {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gouttiere);
    justify-content: flex-end;
}

.menu__rubrique {
    position: relative;
}

.menu__lien {
    display: inline-block;
    padding: var(--pas) 0;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu__lien[aria-current="true"] {
    font-weight: 700;
}

.menu__chevron::after {
    content: "\25b4";
    margin-left: 0.35em;
    font-size: 0.75em;
}

.menu__rubrique--ouverte .menu__chevron::after {
    content: "\25be";
}

.menu__projets {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 14rem;
    padding: var(--pas) var(--gouttiere) var(--gouttiere);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 0.4rem 1.2rem rgb(0 0 0 / 0.1);
}

.menu__rubrique--ouverte .menu__projets {
    display: block;
}

.menu__projet a,
.menu__groupe-titre {
    display: block;
    padding: 0.15rem 0;
    color: var(--encre-douce);
    font-size: 0.8125rem;
}

.menu__projet--courant a {
    color: var(--encre);
    font-weight: 700;
}

.menu__groupe-titre {
    font-style: italic;
}

.menu__groupe ul {
    padding-left: var(--gouttiere);
}

/* ---------------------------------------------------------------- contenu */

.contenu {
    padding: 0 var(--gouttiere) calc(var(--gouttiere) * 2);
}

.projet,
.editorial,
.home {
    display: grid;
    gap: var(--gouttiere);
    padding-top: var(--gouttiere);
}

.home__photo {
    margin: 0;
}

.home--plein {
    margin: 0 calc(var(--gouttiere) * -1) calc(var(--gouttiere) * -2);
}

.home--plein .home__photo img {
    display: block;
    width: 100%;
    height: calc(100svh - 8rem);
    object-fit: cover;
}

.home__texte a,
.projet__texte a,
.editorial__texte a {
    text-decoration: underline;
}

.projet__annexe {
    min-width: 0;
}

.projet__texte {
    overflow-wrap: anywhere;
}

.page--a-propos {
    --voile: 0.72;
}

.projet__rubrique {
    margin: 0 0 var(--gouttiere);
    font-size: calc(0.75rem * var(--text-section, 1));
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

.projet__onglets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gouttiere);
    margin-bottom: var(--gouttiere);
    flex-shrink: 0;
}

.projet__onglet {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--encre-douce);
}

.projet__onglet[aria-selected="true"] {
    color: var(--encre);
    font-weight: 700;
}

.projet__presse-titre {
    font-weight: 700;
    color: inherit;
    font-size: inherit;
}

.projet__presse a,
.projet__presse-lien {
    font-weight: 700;
    text-decoration: underline;
}

.projet__presse-audio {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}

.projet__presse-audio audio {
    display: block;
    width: 100%;
}

.projet__documentation {
    margin: 0;
    padding-top: var(--pas);
    flex-shrink: 0;
}

.projet__documentation-titre {
    margin: 0 0 var(--pas);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

.projet__documentation-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: visible;
}

.projet__documentation-photo {
    display: block;
    width: 5.5rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

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

.projet__audio,
.galerie__media {
    margin: 0;
    flex-shrink: 0;
}

.projet__audio audio,
.galerie__media audio,
.projet__audio video,
.galerie__media video {
    width: 100%;
}

.projet__audio figcaption,
.galerie__media figcaption {
    padding-top: 0.25rem;
    color: var(--encre-douce);
    font-size: 0.75rem;
}

/* ---------------------------------------------------------------- galerie */

.galerie {
    display: grid;
    gap: var(--gouttiere);
}

.galerie__piste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.galerie__image + .galerie__image {
    margin-top: var(--pas);
}

.galerie__clic {
    display: block;
    width: 100%;
}

.galerie__image img,
.galerie__cadre video {
    display: block;
    width: 100%;
}

.galerie__commandes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gouttiere);
    padding-top: var(--pas);
    flex-shrink: 0;
}

.galerie__precedent,
.galerie__suivant,
.popin__fermer,
.plein-ecran__fermer {
    padding: var(--pas) 0.75rem;
    font-size: 1.5rem;
    line-height: 1;
}

.galerie__mention {
    margin: 0;
    color: var(--encre-douce);
    font-size: 0.6875rem;
}

.galerie--illustre .galerie__commandes,
.galerie--pageflip .galerie__commandes {
    justify-content: center;
}

/* A faux livret: StPageFlip positions the pages; each shows its whole image. */
.galerie__livre {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    /* A turning page paints past the book; without this the column grows scrollbars. */
    overflow: hidden;
}

.galerie__chrome {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.galerie--pageflip .galerie__chrome .galerie__precedent,
.galerie--pageflip .galerie__chrome .galerie__suivant,
.galerie--pageflip .galerie__chrome .galerie__ouvrir {
    position: absolute;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: #fff;
    background: rgb(17 17 17 / 0.55);
    font-size: 1.75rem;
    line-height: 1;
    pointer-events: auto;
}

.galerie--pageflip .galerie__chrome .galerie__precedent {
    transform: translate(0, -50%);
}

.galerie--pageflip .galerie__chrome .galerie__suivant {
    transform: translate(-100%, -50%);
}

.galerie--pageflip .galerie__chrome .galerie__ouvrir {
    width: 2.25rem;
    height: 2.25rem;
    transform: translate(-100%, 0);
}

.galerie--pageflip .galerie__ouvrir svg {
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .galerie--pageflip .galerie__chrome {
        visibility: hidden;
        opacity: 0;
    }

    .galerie--pageflip .galerie__livre:hover .galerie__chrome,
    .galerie--pageflip:focus-within .galerie__chrome {
        visibility: visible;
        opacity: 1;
    }

    /* Still pointer: fade out, then drop out of hit testing. Coming back is instant. */
    .galerie--pageflip.galerie--en-repos .galerie__livre:hover .galerie__chrome {
        visibility: hidden;
        opacity: 0;
        transition: opacity 200ms ease-in-out, visibility 0s linear 200ms;
    }

    .galerie--pageflip.galerie--en-repos:focus-within .galerie__livre .galerie__chrome,
    .galerie--pageflip:focus-within .galerie__livre .galerie__chrome {
        visibility: visible;
        opacity: 1;
    }
}

.plein-ecran--livret {
    overflow: hidden;
}

.plein-ecran--livret .galerie__livre {
    width: 100%;
    height: 100%;
}

.plein-ecran--livret .galerie__chrome {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.galerie__reliure {
    margin: 0 auto;
    transition: transform 200ms ease-in-out;
}

.galerie__page {
    background: #fff;
    overflow: hidden;
}

.galerie__page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.galerie__lancer {
    position: relative;
    display: none;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.galerie__lancer img {
    display: block;
    width: 100%;
    height: auto;
}

.galerie__media--apercu .galerie__lancer {
    overflow: hidden;
    aspect-ratio: 100 / var(--apercu-hauteur, 20);
}

.galerie__media--apercu .galerie__lancer img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: auto;
    min-height: 100%;
    max-width: none;
    width: max(100%, calc(var(--apercu-hauteur) * var(--apercu-iw) / var(--apercu-ih) * 1%));
    transform: translate(-50%, calc(var(--apercu-centre, 50) * -1%));
}

.galerie__media--apercu .galerie__lecture {
    width: min(4.5rem, 70%);
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    transform: translate(-50%, -50%);
}

html.js .galerie__media--apercu video {
    display: none;
}

html.js .galerie__media--apercu.galerie__media--en-lecture .galerie__lancer {
    display: none;
}

html.js .galerie__media--apercu.galerie__media--en-lecture video {
    display: block;
    width: 100%;
    height: auto;
}

.galerie__lecture {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4.5rem;
    height: 4.5rem;
    margin: -2.25rem 0 0 -2.25rem;
    border-radius: 50%;
    background: rgb(26 26 26 / 0.45);
    pointer-events: none;
}

.galerie__lecture::after {
    content: "";
    position: absolute;
    left: 54%;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.7rem 0 0.7rem 1.2rem;
    border-color: transparent transparent transparent #fff;
    transform: translate(-30%, -50%);
}

html.js .galerie__lancer {
    display: block;
}

html.js .galerie--illustre .galerie__cadre video {
    display: none;
}

html.js .galerie--illustre.galerie--en-lecture .galerie__lancer {
    display: none;
}

html.js .galerie--illustre.galerie--en-lecture .galerie__cadre video {
    display: block;
    width: 100%;
}

/* ------------------------------------------------------------------ texte */

.projet__titre,
.editorial__titre {
    margin: 0;
    font-size: calc(1.25rem * var(--text-title, 1));
    letter-spacing: 0.04em;
    text-align: var(--text-title-align, left);
    text-transform: uppercase;
}

.editorial__portrait {
    margin: 0 0 var(--gouttiere);
}

.editorial__portrait img {
    display: block;
    width: auto;
    max-width: 10rem;
    height: auto;
}

.projet__nature {
    margin: 0.15rem 0 0;
    font-size: calc(0.875rem * var(--text-nature, 1));
    text-align: var(--text-title-align, left);
}

.projet__titre + .projet__production,
.projet__titre + .projet__soutien,
.projet__nature + .projet__production,
.projet__nature + .projet__soutien {
    margin-top: var(--gouttiere);
}
    font-size: 0.8125rem;
}

.projet__production,
.projet__soutien {
    margin: 0 0 0.25rem;
    font-size: calc(0.8125rem * var(--text-production, 1));
    text-align: left;
}

.projet__texte > p:not([class]),
.editorial__texte > p:not([class]),
.home__texte > p:not([class]),
.projet__texte > h2,
.editorial__texte > h2,
.home__texte > h2,
.projet__texte blockquote,
.editorial__texte blockquote,
.home__texte blockquote {
    text-align: var(--text-body-align, justify);
    hyphens: var(--text-hyphens, manual);
}

.projet__texte > h2,
.editorial__texte > h2,
.home__texte > h2 {
    font-size: calc(1.5 * 0.875rem * var(--text-body, 1));
    line-height: var(--text-leading, var(--interligne));
}

/* One margin, on the top, so a gap block can add exactly one more of the
   same height. The collapsed gap between two paragraphs stays one em. */
.projet__texte > p:not([class]),
.editorial__texte > p:not([class]),
.home__texte > p:not([class]) {
    margin: calc(1em * var(--text-paragraph, 1)) 0 0;
    font-size: calc(0.875rem * var(--text-body, 1));
    line-height: var(--text-leading, var(--interligne));
}

.projet__texte > p:not([class]):last-child,
.editorial__texte > p:not([class]):last-child,
.home__texte > p:not([class]):last-child {
    margin-bottom: calc(1em * var(--text-paragraph, 1));
}

.projet__texte > h2,
.editorial__texte > h2,
.home__texte > h2,
.projet__texte > blockquote,
.editorial__texte > blockquote,
.home__texte > blockquote,
.projet__texte > pre,
.editorial__texte > pre,
.home__texte > pre,
.projet__texte > hr,
.editorial__texte > hr,
.home__texte > hr {
    margin-bottom: 0;
}

/* The heading's own bottom margin is 0.83em of its 1.5em type, which is
   1.245em of the column. A sibling does not inherit a variable set on the
   heading, so the column holds it. */
.projet__texte,
.editorial__texte,
.home__texte {
    --after-heading: 1.245em;
}

.projet__texte > h2 + p:not(.space),
.editorial__texte > h2 + p:not(.space),
.home__texte > h2 + p:not(.space) {
    margin-top: var(--after-heading);
}

.projet__texte > h2 + p.space,
.editorial__texte > h2 + p.space,
.home__texte > h2 + p.space {
    margin-top: 0.245em;
}

.projet__texte > p.space,
.editorial__texte > p.space,
.home__texte > p.space {
    height: calc(1em * var(--text-paragraph, 1));
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: calc(0.875rem * var(--text-body, 1));
    line-height: calc(1em * var(--text-paragraph, 1));
    text-align: left;
}

.projet__texte > p.space:last-child,
.editorial__texte > p.space:last-child,
.home__texte > p.space:last-child {
    margin-bottom: calc(1em * var(--text-paragraph, 1));
}

.projet__credits {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--pas);
    margin: var(--gouttiere) 0 0;
    font-size: calc(0.8125rem * var(--text-credits, 1));
}

.projet__credits dt {
    font-weight: 700;
}

.projet__credits dd {
    margin: 0;
}

.projet__diffusions h2,
.projet__presse h2,
.editorial__section h2 {
    margin: var(--gouttiere) 0 var(--pas);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.projet__diffusions h2,
.projet__presse h2,
.projet__diffusions ul,
.projet__presse ul {
    font-size: calc(0.8125rem * var(--text-listings, 1));
}

.projet__diffusions ul,
.projet__presse ul,
.editorial__section ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* Markdown lists sit in the body. They take the diffusions metrics, and keep
   a paragraph's gap because no heading opens the space above them. */
.projet__texte ul,
.projet__texte ol,
.editorial__texte ul,
.editorial__texte ol,
.home__texte ul,
.home__texte ol {
    margin: 0;
    padding-left: 1.1rem;
    font-size: calc(0.8125rem * var(--text-list, 1));
}

.projet__texte ul,
.editorial__texte ul,
.home__texte ul {
    list-style-type: disc;
}

.projet__texte ol,
.editorial__texte ol,
.home__texte ol {
    list-style-type: decimal;
}

.projet__texte > ul,
.projet__texte > ol,
.editorial__texte > ul,
.editorial__texte > ol,
.home__texte > ul,
.home__texte > ol {
    margin-top: 0.875rem;
    margin-bottom: 0;
    hyphens: var(--text-hyphens, manual);
}

.editorial__section h2,
.editorial__section ul {
    font-size: calc(0.8125rem * var(--text-cv, 1));
}

.projet__texte > ul:last-child,
.projet__texte > ol:last-child,
.editorial__texte > ul:last-child,
.editorial__texte > ol:last-child,
.home__texte > ul:last-child,
.home__texte > ol:last-child {
    margin-bottom: 0.875rem;
}

.contact__formulaire {
    display: grid;
    gap: var(--gouttiere);
    margin-top: var(--gouttiere);
}

.contact__champ {
    display: grid;
    gap: var(--pas);
    margin: 0;
    text-align: left;
}

.contact__champ label {
    font-size: calc(0.75rem * var(--text-label, 1));
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact__champ input,
.contact__champ textarea {
    width: 100%;
    padding: var(--pas) 0;
    font: inherit;
    font-size: calc(0.875rem * var(--text-field, 1));
    text-align: left;
    color: inherit;
    background: rgb(255 255 255 / 0.2);
    border: 0;
    border-bottom: 1px solid #c2c2c2;
    border-radius: 0;
}

.contact__champ textarea {
    min-height: 8rem;
    padding: var(--pas);
    border: 1px solid #c2c2c2;
    resize: vertical;
}

.contact__actions {
    margin: 0;
}

.contact__actions button {
    font-size: calc(0.75rem * var(--text-button, 1));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: underline;
}

.contact__notice {
    margin: 0;
    font-size: calc(0.75rem * var(--text-notice, 1));
    color: var(--encre-douce);
    text-align: justify;
}

.contact__merci,
.contact__refus {
    font-size: calc(0.875rem * var(--text-message, 1));
    text-align: var(--text-message-align, justify);
}

.contact__refus {
    font-weight: 700;
}

.contact__merci {
    margin-top: var(--gouttiere);
}

.editorial__texte .contact__links {
    margin-top: var(--gouttiere);
}

.editorial__texte .contact__links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.editorial__texte .contact__links a,
.editorial__texte .about__links a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: inherit;
    font-size: calc(0.75rem * var(--text-notice, 1));
    text-decoration: none;
}

.editorial__texte .contact__links a:hover span,
.editorial__texte .contact__links a:focus-visible span,
.editorial__texte .about__links a:hover span,
.editorial__texte .about__links a:focus-visible span {
    text-decoration: underline;
}

.editorial__texte .contact__links svg,
.editorial__texte .contact__links img,
.editorial__texte .about__links svg,
.editorial__texte .about__links img {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

.editorial__texte .contact__links img,
.editorial__texte .about__links img {
    object-fit: contain;
}

.editorial__texte .about__links ul {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.editorial__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.editorial__entete .editorial__titre {
    flex: none;
}

.editorial__entete .about__links,
.editorial__entete .contact__links {
    margin: 0 0 0 auto;
}

.editorial__entete .about__links ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

/* --------------------------------------------------------------- overlays */

.popin {
    width: min(92vw, 72rem);
    height: min(92vh, 56rem);
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
}

.popin::backdrop,
.plein-ecran::backdrop {
    background: rgba(20, 20, 20, 0.55);
}

.popin__cadre {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    padding: calc(var(--gouttiere) * 1.5);
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--papier);
}

.popin__fermer,
.plein-ecran__fermer {
    position: absolute;
    top: var(--pas);
    right: var(--pas);
    z-index: 2;
}

.galerie[hidden] {
    display: none;
}

.popin--presse {
    height: 92vh;
}

.popin--presse .popin__scan {
    width: 100%;
    height: auto;
    margin: 0;
}

.plein-ecran {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #111;
}

.plein-ecran[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.plein-ecran__fermer {
    color: #fff;
    background: #111;
    outline-color: currentColor;
}

.plein-ecran__photo,
.plein-ecran__video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.plein-ecran__zone {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10%;
    padding: 0;
    color: #fff;
    font-size: 3rem;
    line-height: 1;
    text-shadow: 0 0 0.45rem rgb(0 0 0 / 0.85);
    cursor: pointer;
    transition: opacity 0.4s ease;
}

.plein-ecran--repos .plein-ecran__zone {
    opacity: 0;
    pointer-events: none;
}

.plein-ecran__zone--gauche {
    left: 0;
}

.plein-ecran__zone--droite {
    right: 0;
}

/* --------------------------------------------------------- écrans larges */

@media (min-width: 60rem) {
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    .contenu {
        flex: 1;
        min-height: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .projet,
    .home {
        flex: 1;
        min-height: 0;
        grid-template-columns: calc(var(--largeur-texte) * var(--text-column, 1)) minmax(0, 1fr);
        align-items: stretch;
        gap: calc(var(--gouttiere) * 1.5);
        padding: 0 var(--gouttiere) var(--gouttiere);
    }

    .home {
        grid-template-areas: "texte photo";
        grid-template-rows: minmax(0, 1fr);
    }

    .home__texte {
        grid-area: texte;
        min-height: 0;
        overflow-y: auto;
    }

    .home__photo {
        grid-area: photo;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .home__photo img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .projet__annexe,
    .projet__corps,
    .editorial {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
        mask-image: linear-gradient(
            to bottom,
            transparent,
            #000 var(--masque-haut, 0px),
            #000 calc(100% - var(--masque-bas, 0px)),
            transparent
        );
    }

    .projet__annexe:hover,
    .projet__corps:hover,
    .editorial:hover {
        scrollbar-color: rgb(26 26 26 / 0.2) transparent;
    }

    .projet__annexe::-webkit-scrollbar,
    .projet__corps::-webkit-scrollbar,
    .editorial::-webkit-scrollbar {
        width: 4px;
    }

    .projet__annexe::-webkit-scrollbar-thumb,
    .projet__corps::-webkit-scrollbar-thumb,
    .editorial::-webkit-scrollbar-thumb {
        background: transparent;
    }

    .projet__annexe:hover::-webkit-scrollbar-thumb,
    .projet__corps:hover::-webkit-scrollbar-thumb,
    .editorial:hover::-webkit-scrollbar-thumb {
        background: rgb(26 26 26 / 0.2);
    }

    .projet__oeuvre {
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .projet__onglets {
        flex-shrink: 0;
    }

    .projet__corps {
        flex: 1;
    }

    .galerie {
        display: flex;
        flex-direction: column;
    }

    .galerie--illustre .galerie__piste {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    html.js .galerie--illustre .galerie__image {
        display: block;
        height: auto;
    }

    .galerie--illustre .galerie__cadre,
    .galerie--illustre .galerie__lancer {
        height: auto;
    }

    .galerie--illustre .galerie__cadre {
        display: grid;
    }

    .galerie--illustre .galerie__cadre > * {
        grid-area: 1 / 1;
        min-width: 0;
        min-height: 0;
    }

    .galerie--illustre .galerie__lancer img,
    .galerie--illustre .galerie__cadre video,
    .galerie--illustre .galerie__image > img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .galerie__piste {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 14% 8%;
        gap: var(--pas);
        overflow: hidden;
    }

    .galerie--pageflip .galerie__piste {
        display: block;
        height: auto;
        overflow: visible;
    }

    html.js .galerie--pageflip .galerie__image {
        display: block;
        margin-top: var(--pas);
    }

    .galerie__piste[hidden] {
        display: none;
    }

    .galerie__livre {
        flex: none;
        width: 100%;
        min-height: 0;
    }

    html.js .galerie__image {
        display: none;
        margin-top: 0;
    }

    html.js .galerie__image--courante,
    html.js .galerie__image--apercu-1,
    html.js .galerie__image--apercu-2 {
        display: block;
        min-width: 0;
        min-height: 0;
        height: 100%;
    }

    .galerie__image--courante {
        grid-column: 1;
        grid-row: 1;
    }

    .galerie__image--apercu-1 {
        grid-column: 2;
        grid-row: 1;
    }

    .galerie__image--apercu-2 {
        grid-column: 3;
        grid-row: 1;
    }

    .galerie__image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .galerie__image--apercu-1 img,
    .galerie__image--apercu-2 img {
        object-fit: cover;
        object-position: var(--focus, 50%) center;
    }

    .galerie__clic {
        height: 100%;
    }

    .galerie__fantome {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        margin: 0;
        max-width: none;
        pointer-events: none;
        transform-origin: top left;
        will-change: transform, clip-path, opacity;
    }

    .galerie__piste--animating .galerie__image img {
        visibility: hidden;
    }

    .editorial {
        flex: 1;
        padding: calc(var(--gouttiere) * 2);
    }

    .editorial__texte {
        display: flow-root;
        width: 100%;
        max-width: calc((48rem - var(--gouttiere) * 4) * var(--text-column, 1));
        margin: 0 auto;
    }

    .editorial__portrait {
        float: right;
        margin: 0 0 var(--gouttiere) var(--gouttiere);
    }

    .home--plein {
        margin: 0;
        padding: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "photo";
    }

    .home--plein .home__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}