/* Généré depuis resources/css/vitrine.css par « php artisan vitrine:compiler » — ne pas modifier ici. */
@layer polices, reglages, base, miseenpage, hero, composants, sections, utilitaires;
@layer polices {
    @font-face {
        font-family: "Inter vitrine";
        src: url("../assets/fonts/inter-latin.woff2") format("woff2");
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
            U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
        font-family: "Playfair vitrine";
        src: url("../assets/fonts/playfairdisplay-latin.woff2") format("woff2");
        font-weight: 400 900;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
            U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
}
@layer reglages {
    :root {
        --v-texte: "Inter vitrine", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --v-titre: "Playfair vitrine", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
        --v-t-base: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
        --v-t-petit: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
        --v-t-chapo: clamp(1.1875rem, 1.06rem + 0.6vw, 1.5rem);
        --v-t-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
        --v-t-h2: clamp(1.75rem, 1.35rem + 1.9vw, 3rem);
        --v-t-h1: clamp(2.5rem, 1.6rem + 4.2vw, 5.25rem);
        --v-gouttiere: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);
        --v-bloc: clamp(4rem, 2.4rem + 7vw, 9rem);
        --v-largeur: 1240px;
        --v-lecture: 62ch;
        --v-encre: var(--p-cerne);
        --v-encre-douce: color-mix(in srgb, var(--p-cerne) 68%, var(--p-sable));
        --v-encre-tenue: color-mix(in srgb, var(--p-cerne) 46%, var(--p-sable));
        --v-encre-nuit: var(--p-ivoire);
        --v-encre-nuit-douce: color-mix(in srgb, var(--p-ivoire) 74%, var(--p-noir));
        --v-structure: var(--p-bouteille);
        --v-action: var(--p-bouteille);
        --v-action-trait: var(--p-safran-ombre);
        --v-reaction: var(--p-flamme);
        --v-trait: color-mix(in srgb, var(--p-cerne) 18%, transparent);
        --v-trait-nuit: color-mix(in srgb, var(--p-ivoire) 22%, transparent);
        --v-sortie: cubic-bezier(0.22, 0.61, 0.36, 1);
        color-scheme: light;
    }
}
@layer base {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 2rem;
        -webkit-text-size-adjust: 100%;
    }
    body {
        margin: 0;
        background: var(--p-sable);
        color: var(--v-encre);
        font-family: var(--v-texte);
        font-size: var(--v-t-base);
        line-height: 1.65;
        font-synthesis-weight: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
    }
    h1,
    h2,
    h3 {
        font-family: var(--v-titre);
        font-weight: 500;
        line-height: 1.08;
        letter-spacing: -0.012em;
        margin: 0;
        text-wrap: balance;
    }
    h1 {
        font-size: var(--v-t-h1);
    }
    h2 {
        font-size: var(--v-t-h2);
    }
    h3 {
        font-size: var(--v-t-h3);
    }
    p {
        margin: 0 0 1em;
        text-wrap: pretty;
    }
    p:last-child {
        margin-bottom: 0;
    }
    img,
    picture,
    svg,
    canvas {
        display: block;
        max-width: 100%;
    }
    img {
        height: auto;
    }
    a {
        color: var(--v-action);
        text-decoration-color: var(--v-action-trait);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.22em;
        transition: color 0.2s var(--v-sortie);
    }
    a:hover {
        color: var(--v-reaction);
        text-decoration-color: currentColor;
    }
    :focus-visible {
        outline: 2px solid var(--v-reaction);
        outline-offset: 3px;
        border-radius: 1px;
    }
    .nuit :focus-visible {
        outline-color: var(--p-ivoire);
    }
    ::selection {
        background: var(--p-safran);
        color: var(--p-noir);
    }
    .lien-evitement {
        position: absolute;
        left: 0.5rem;
        top: -100%;
        z-index: 999;
        padding: 0.75rem 1.25rem;
        background: var(--p-sable);
        color: var(--v-encre);
        font-weight: 600;
        text-decoration: none;
        transition: top 0.18s var(--v-sortie);
    }
    .lien-evitement:focus {
        top: 0.5rem;
    }
}
@layer miseenpage {
    .enveloppe {
        width: min(100% - 2 * var(--v-gouttiere), var(--v-largeur));
        margin-inline: auto;
    }
    .enveloppe--etroite {
        width: min(100% - 2 * var(--v-gouttiere), 780px);
        margin-inline: auto;
    }
    .bloc {
        position: relative;
        padding-block: var(--v-bloc);
    }
    .nuit {
        background-color: var(--p-noir);
        color: var(--v-encre-nuit);
    }
    .nuit h1,
    .nuit h2,
    .nuit h3 {
        color: var(--p-ivoire-clair);
    }
    .nuit a {
        color: var(--p-safran);
        text-decoration-color: color-mix(in srgb, var(--p-safran) 45%, transparent);
    }
    .nuit a:hover {
        color: var(--p-ivoire-clair);
    }
}
@layer hero {
    .hero {
        position: relative;
        min-height: 100svh;
        overflow: hidden;
        background-color: var(--p-noir);
        color: var(--v-encre-nuit);
        display: grid;
        isolation: isolate;
    }
    .hero__fond {
        position: absolute;
        inset: 0;
        z-index: 0;
        background-color: var(--p-noir);
        background-image:
            radial-gradient(
                120% 90% at 62% 42%,
                color-mix(in srgb, var(--p-cerne) 70%, transparent) 0%,
                transparent 62%
            ),
            url("../assets/patterns/perles-pluie-median.svg");
        background-size:
            auto,
            168px 168px;
        background-repeat: no-repeat, repeat;
    }
    .hero__champ {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.5s ease-out;
    }
    .hero__champ--pret {
        opacity: 1;
    }
    .hero__oeuvre {
        position: absolute;
        z-index: 4;
        top: 50%;
        right: clamp(1.5rem, 5vw, 6rem);
        translate: 0 -50%;
        height: min(74svh, 40rem);
        aspect-ratio: 3 / 4;
        width: auto;
        max-width: 46vw;
    }
    .hero__oeuvre-cadre {
        position: absolute;
        inset: 0;
    }
    .hero__oeuvre img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        --feutre: 18%;
        -webkit-mask-image:
            linear-gradient(to right, transparent 0%, #000 var(--feutre), #000 calc(100% - var(--feutre)), transparent 100%),
            linear-gradient(to bottom, transparent 0%, #000 var(--feutre), #000 calc(100% - var(--feutre)), transparent 100%);
        mask-image:
            linear-gradient(to right, transparent 0%, #000 var(--feutre), #000 calc(100% - var(--feutre)), transparent 100%),
            linear-gradient(to bottom, transparent 0%, #000 var(--feutre), #000 calc(100% - var(--feutre)), transparent 100%);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
        opacity: 0;
        transition: opacity 0.9s ease-in-out;
    }
    .js .hero__oeuvre img {
        animation: hero-oeuvre-secours 0.9s ease-in-out 12s both;
    }
    @keyframes hero-oeuvre-secours {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    .hero__oeuvre[data-etat="net"] img,
    .no-js .hero__oeuvre img {
        animation: none;
        opacity: 1;
    }
    .hero__voile {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background-image:
            linear-gradient(
                to bottom,
                color-mix(in srgb, var(--p-noir) 92%, transparent) 0%,
                color-mix(in srgb, var(--p-noir) 58%, transparent) 9%,
                transparent 24%
            ),
                linear-gradient(
                    to top,
                    var(--p-noir) 0%,
                    color-mix(in srgb, var(--p-noir) 74%, transparent) 13%,
                    transparent 30%
                ),
                linear-gradient(
                    100deg,
                    var(--p-noir) 0%,
                    color-mix(in srgb, var(--p-noir) 88%, transparent) 26%,
                    color-mix(in srgb, var(--p-noir) 40%, transparent) 46%,
                    transparent 62%
                );
    }
    .hero__grille {
        position: relative;
        z-index: 6;
        display: grid;
        grid-template-areas: "scene";
        width: min(100% - 2 * var(--v-gouttiere), var(--v-largeur));
        margin-inline: auto;
        padding-block: clamp(1.5rem, 4vh, 3rem) 9.5rem;
        align-content: center;
    }
    .hero__contenu {
        grid-area: texte;
        max-width: 34rem;
    }
    .hero__nav {
        grid-area: nav;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: clamp(1rem, 2.4vw, 2.25rem);
        padding-block: 1.5rem 3rem;
    }
    .hero__marque {
        font-family: var(--v-titre);
        font-size: 1.0625rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--p-ivoire-clair);
        text-decoration: none;
        margin-right: auto;
    }
    .hero__nav a:not(.hero__marque) {
        font-size: var(--v-t-petit);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--p-ivoire-clair);
        text-decoration: none;
        padding-block: 0.35rem;
        border-bottom: 1px solid transparent;
    }
    .hero__nav a:not(.hero__marque):hover {
        color: var(--p-ivoire-clair);
        border-bottom-color: var(--p-safran);
    }
    .hero__eyebrow {
        font-size: var(--v-t-petit);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--p-safran);
        margin: 0 0 1.1rem;
    }
    .hero h1 {
        color: var(--p-ivoire-clair);
    }
    .hero__accroche {
        margin: 1.5rem 0 2.25rem;
        max-width: 30rem;
        font-size: var(--v-t-chapo);
        line-height: 1.5;
        color: var(--v-encre-nuit-douce);
    }
    .hero__nom {
        font-size: clamp(2.75rem, 1.5rem + 5.4vw, 6rem);
        line-height: 0.95;
        letter-spacing: -0.02em;
        text-wrap: balance;
    }
    .hero__paraphe {
        --p-filet-pas: 7px;
        width: clamp(96px, 22%, 150px);
        margin: 1.1rem 0 0;
    }
    .hero__seuil {
        position: absolute;
        inset: auto 0 0 0;
        z-index: 8;
        height: 92px;
        pointer-events: none;
    }
    .hero__indice {
        position: absolute;
        z-index: 8;
        left: 50%;
        bottom: 12px;
        width: 1px;
        height: 40px;
        transform: translateX(-50%);
        background: linear-gradient(to bottom, transparent, var(--p-ivoire));
        opacity: 0.7;
        pointer-events: none;
    }
    .js .hero__indice {
        animation:
            hero-indice-entree 0.6s ease-out 5.1s both,
            hero-respire 2.6s ease-in-out 5.7s infinite alternate;
    }
    @keyframes hero-indice-entree {
        from {
            opacity: 0;
        }
        to {
            opacity: 0.7;
        }
    }
    @keyframes hero-respire {
        from {
            opacity: 0.7;
            transform: translateX(-50%) scaleY(1);
        }
        to {
            opacity: 0.25;
            transform: translateX(-50%) scaleY(0.55);
        }
    }
    .js .hero__entree {
        animation: hero-monter 0.72s var(--v-sortie) var(--retard, 120ms) both;
    }
    @keyframes hero-monter {
        from {
            opacity: 0;
            transform: translateY(14px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
    @media (min-width: 1024px) {
        .hero__grille {
            grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
            grid-template-areas:
                "nav   nav"
                "texte scene";
            align-content: center;
            column-gap: var(--v-gouttiere);
        }
        .hero__nav {
            padding-block: 2rem 0;
        }
    }
    @media (max-width: 1023.98px) {
        .hero__grille {
            grid-template-areas:
                "nav"
                "texte";
            padding-block: 0 8rem;
        }
        .hero__oeuvre {
            top: 50%;
            right: 0;
            left: 0;
            margin-inline: auto;
            height: min(62svh, 30rem);
            max-width: 86vw;
            z-index: 3;
            opacity: 0.34;
        }
        .hero__voile {
            background-image: linear-gradient(
                180deg,
                var(--p-noir) 0%,
                color-mix(in srgb, var(--p-noir) 82%, transparent) 45%,
                color-mix(in srgb, var(--p-noir) 92%, transparent) 100%
            );
        }
        .hero__contenu {
            max-width: none;
        }
    }
}
@layer composants {
    .bouton {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        min-height: 44px;
        padding: 0.7rem 1.6rem;
        border: 1px solid var(--v-structure);
        border-radius: 1px;
        background: var(--v-structure);
        color: var(--p-sable);
        font: inherit;
        font-size: var(--v-t-petit);
        font-weight: 600;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        transition:
            background-color 0.24s var(--v-sortie),
            border-color 0.24s var(--v-sortie),
            color 0.24s var(--v-sortie);
    }
    .bouton:hover {
        background: var(--v-reaction);
        border-color: var(--v-reaction);
        color: var(--p-ivoire-clair);
    }
    .bouton__fleche {
        transition: transform 0.24s var(--v-sortie);
    }
    .bouton:hover .bouton__fleche {
        transform: translateX(4px);
    }
    .bouton--nuit {
        background: transparent;
        border-color: var(--p-safran);
        color: var(--p-safran);
    }
    .bouton--nuit:hover {
        background: var(--p-safran);
        border-color: var(--p-safran);
        color: var(--p-noir);
    }
    .lien-fleche {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        min-height: 44px;
        font-size: var(--v-t-petit);
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: none;
        border-bottom: 1px solid var(--v-action-trait);
    }
    .lien-fleche:hover {
        border-bottom-color: currentColor;
    }
    .lien-fleche svg {
        transition: transform 0.24s var(--v-sortie);
    }
    .lien-fleche:hover svg {
        transform: translateX(4px);
    }
    .surtitre {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        margin: 0 0 1rem;
        font-family: var(--v-texte);
        font-size: var(--v-t-petit);
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--v-structure);
    }
    .surtitre::after {
        content: "";
        flex: 0 0 44px;
        height: 1px;
        background: var(--v-action-trait);
    }
    .nuit .surtitre {
        color: var(--p-safran);
    }
    .nuit .surtitre::after {
        background: color-mix(in srgb, var(--p-safran) 60%, transparent);
    }
    .chapo {
        max-width: var(--v-lecture);
        font-size: var(--v-t-chapo);
        line-height: 1.55;
        color: var(--v-encre-douce);
    }
    .js .revele {
        opacity: 0;
        transform: translateY(18px);
        transition:
            opacity 0.7s var(--v-sortie),
            transform 0.7s var(--v-sortie);
        transition-delay: var(--retard, 0ms);
    }
    .js .revele[data-vu="oui"] {
        opacity: 1;
        transform: none;
    }
    .oeuvre-carte {
        display: block;
        text-decoration: none;
        color: inherit;
    }
    .oeuvre-carte .perles-carte {
        background: var(--p-toile);
    }
    .oeuvre-carte__cartel {
        margin-top: 1.1rem;
    }
    .oeuvre-carte__titre {
        font-family: var(--v-titre);
        font-size: var(--v-t-h3);
        line-height: 1.15;
        margin: 0 0 0.35rem;
        color: var(--v-encre);
    }
    .oeuvre-carte:hover .oeuvre-carte__titre {
        color: var(--v-reaction);
    }
    .oeuvre-carte__meta {
        margin: 0;
        font-size: var(--v-t-petit);
        letter-spacing: 0.04em;
        color: var(--v-encre-tenue);
    }
    .oeuvre-carte__propos {
        margin: 0.7rem 0 0;
        max-width: 38ch;
        color: var(--v-encre-douce);
    }
    .chiffre {
        border-top: 1px solid color-mix(in srgb, var(--p-cerne) 28%, transparent);
        padding-top: 1.1rem;
    }
    .chiffre__valeur {
        display: block;
        font-family: var(--v-titre);
        font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem);
        line-height: 1.05;
        color: var(--v-structure);
        font-variant-numeric: lining-nums tabular-nums;
    }
    .chiffre__libelle {
        display: block;
        margin-top: 0.5rem;
        font-size: var(--v-t-petit);
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--v-encre-tenue);
    }
    .champ {
        display: block;
        margin-bottom: 1.35rem;
    }
    .champ__libelle {
        display: block;
        margin-bottom: 0.4rem;
        font-size: var(--v-t-petit);
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--v-encre-douce);
    }
    .champ__saisie {
        width: 100%;
        min-height: 44px;
        padding: 0.65rem 0.85rem;
        font: inherit;
        color: var(--v-encre);
        background: var(--p-toile);
        border: 1px solid var(--v-trait);
        border-radius: 1px;
        transition: border-color 0.2s var(--v-sortie);
    }
    .champ__saisie:hover {
        border-color: color-mix(in srgb, var(--p-cerne) 34%, transparent);
    }
    .champ__saisie:focus {
        border-color: var(--v-structure);
    }
    textarea.champ__saisie {
        min-height: 9rem;
        resize: vertical;
    }
    .champ__erreur {
        display: block;
        margin-top: 0.4rem;
        font-size: var(--v-t-petit);
        color: var(--v-reaction);
    }
    .champ__saisie[aria-invalid="true"] {
        border-color: var(--v-reaction);
    }
    .antirobot {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
    .message {
        padding: 1rem 1.25rem;
        margin-bottom: 1.75rem;
        border-left: 3px solid var(--v-structure);
        background: var(--p-toile);
    }
    .message--erreur {
        border-left-color: var(--v-reaction);
    }
}
@layer sections {
    .entete {
        border-bottom: 1px solid var(--v-trait);
        background: var(--p-sable);
    }
    .entete__barre {
        display: flex;
        align-items: center;
        gap: 1rem;
        min-height: 72px;
        flex-wrap: wrap;
    }
    .entete__marque {
        margin-right: auto;
        font-family: var(--v-titre);
        font-size: 1.0625rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--v-encre);
        text-decoration: none;
    }
    .entete__menu {
        display: flex;
        gap: clamp(1rem, 2.4vw, 2rem);
        flex-wrap: wrap;
    }
    .entete__menu a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: var(--v-t-petit);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--v-encre-douce);
        border-bottom: 1px solid transparent;
    }
    .entete__menu a:hover,
    .entete__menu a[aria-current="page"] {
        color: var(--v-encre);
        border-bottom-color: var(--v-action-trait);
    }
    .entete__bascule {
        display: none;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.5rem;
        line-height: 1;
        color: var(--v-encre);
        background: none;
        border: 1px solid var(--v-trait);
        border-radius: 1px;
        cursor: pointer;
    }
    @media (max-width: 639.98px) {
        .js .entete__bascule {
            display: block;
        }
        .js .entete__menu[hidden] {
            display: none;
        }
        .entete__menu {
            flex-basis: 100%;
            flex-direction: column;
            gap: 0;
            padding-bottom: 0.75rem;
        }
    }
    .seuil {
        position: relative;
        padding-top: calc(var(--v-bloc) + 140px);
    }
    .seuil::after {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 140px;
        z-index: 1;
        pointer-events: none;
        background-image: linear-gradient(to bottom, var(--p-noir), var(--p-sable));
    }
    .seuil > * {
        position: relative;
        z-index: 2;
    }
    .seuil__accroche {
        max-width: 24ch;
    }
    .seuil__phrases {
        margin-top: 1.75rem;
        max-width: var(--v-lecture);
        font-size: var(--v-t-chapo);
        line-height: 1.55;
        color: var(--v-encre-douce);
    }
    .seuil__action {
        margin-top: 2.5rem;
    }
    .sentier {
        position: relative;
    }
    .sentier__cordon {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 88px;
        transform: translateX(-50%);
        background-image: url("../assets/patterns/perles-sentier.svg");
        background-size: 88px 220px;
        background-repeat: repeat-y;
        background-position: center top;
        opacity: 0.85;
        pointer-events: none;
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
    }
    .sentier__pieces {
        position: relative;
        display: grid;
        gap: clamp(3rem, 6vw, 6rem) clamp(5.5rem, 9vw, 8rem);
    }
    .sentier__piece {
        position: relative;
        max-width: 30rem;
    }
    .sentier__branche {
        position: absolute;
        top: 4.5rem;
        left: -2.1rem;
        width: 2.7rem;
        clip-path: inset(0 100% 0 0);
    }
    .js .sentier__branche {
        transition: clip-path 0.75s var(--v-sortie);
        transition-delay: var(--retard, 0ms);
    }
    .js .revele[data-vu="oui"] .sentier__branche {
        clip-path: inset(0);
    }
    .sentier__fin {
        margin-top: clamp(3rem, 6vw, 5rem);
        text-align: center;
    }
    @media (min-width: 768px) {
        .sentier__pieces {
            grid-template-columns: 1fr 1fr;
        }
        .sentier__piece:nth-child(odd) {
            grid-column: 1;
            justify-self: end;
        }
        .sentier__piece:nth-child(even) {
            grid-column: 2;
            justify-self: start;
            margin-top: clamp(2rem, 7vw, 5.5rem);
        }
        .sentier__branche {
            --_g: clamp(5.5rem, 9vw, 8rem);
            width: calc(var(--_g) / 2 + 0.7rem);
        }
        .sentier__piece:nth-child(odd) .sentier__branche {
            left: auto;
            right: calc(var(--_g) / -2);
            clip-path: inset(0 0 0 100%);
        }
        .sentier__piece:nth-child(even) .sentier__branche {
            left: calc(var(--_g) / -2);
        }
    }
    @media (max-width: 767.98px) {
        .sentier__cordon {
            left: -14px;
            transform: none;
        }
        .sentier__pieces {
            padding-left: 4.25rem;
        }
        .sentier__piece {
            max-width: none;
        }
    }
    .fiche__grille {
        display: grid;
        gap: clamp(2rem, 5vw, 4rem);
        align-items: start;
    }
    @media (min-width: 900px) {
        .fiche__grille {
            grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        }
        .fiche__cartel {
            position: sticky;
            top: 3rem;
        }
    }
    .fiche__donnees {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.35rem 1.5rem;
        margin: 1.75rem 0 0;
        padding-top: 1.25rem;
        border-top: 1px solid var(--v-trait);
        font-size: var(--v-t-petit);
    }
    .fiche__donnees dt {
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--v-encre-tenue);
    }
    .fiche__donnees dd {
        margin: 0;
    }
    .fiche__parcours {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-top: clamp(3rem, 6vw, 5rem);
        padding-top: 1.5rem;
        border-top: 1px solid var(--v-trait);
    }
    .image-absente {
        width: 100%;
        aspect-ratio: 4 / 3;
    }
    .matiere {
        background-color: var(--p-toile);
    }
    .matiere__volets {
        display: grid;
        gap: clamp(1.75rem, 3.5vw, 3rem);
        margin-top: clamp(2.5rem, 5vw, 4rem);
    }
    @media (min-width: 768px) {
        .matiere__volets {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    .matiere__volet figure {
        margin: 0;
    }
    .matiere__volet img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        background: var(--p-nacre-ombre);
    }
    .matiere__volet figcaption {
        margin-top: 1rem;
        font-size: var(--v-t-base);
        color: var(--v-encre-douce);
    }
    .matiere__zoom {
        display: block;
        cursor: zoom-in;
    }
    .propos {
        position: relative;
        color: var(--p-ivoire-clair);
        isolation: isolate;
    }
    .propos::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image: linear-gradient(
            96deg,
            var(--p-bouteille-fil) 0%,
            color-mix(in srgb, var(--p-bouteille-fil) 92%, transparent) 38%,
            color-mix(in srgb, var(--p-bouteille-fil) 30%, transparent) 72%,
            transparent 100%
        );
    }
    .propos .surtitre {
        color: var(--p-safran);
    }
    .propos .surtitre::after {
        background: color-mix(in srgb, var(--p-safran) 60%, transparent);
    }
    .propos blockquote {
        margin: 0;
        max-width: 30ch;
        font-family: var(--v-titre);
        font-size: var(--v-t-h2);
        line-height: 1.16;
        letter-spacing: -0.012em;
    }
    .propos__source {
        display: block;
        margin-top: 1.5rem;
        font-family: var(--v-texte);
        font-size: var(--v-t-petit);
        font-style: normal;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--p-ivoire);
    }
    .propos__texte {
        margin-top: 2rem;
        max-width: 48ch;
        color: var(--p-ivoire);
    }
    .atelier__grille {
        display: grid;
        gap: clamp(2rem, 5vw, 4rem);
        align-items: center;
    }
    @media (min-width: 900px) {
        .atelier__grille {
            grid-template-columns: 1.05fr 0.95fr;
        }
    }
    .atelier__images {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    .atelier__images img {
        width: 100%;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        background: var(--p-nacre-ombre);
    }
    .atelier__chiffres {
        display: grid;
        gap: 1.75rem;
        margin-top: 2.5rem;
        align-items: start;
    }
    @media (min-width: 520px) {
        .atelier__chiffres {
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
        }
    }
    .reperes {
        background-color: var(--p-toile);
    }
    .reperes__liste {
        list-style: none;
        margin: clamp(2rem, 4vw, 3rem) 0 0;
        padding: 0;
        max-width: 62rem;
    }
    .reperes__ligne {
        display: grid;
        gap: 0.15rem 1.5rem;
        padding: 1.1rem 0;
        border-top: 1px solid var(--v-trait);
    }
    .reperes__ligne:last-child {
        border-bottom: 1px solid var(--v-trait);
    }
    @media (min-width: 700px) {
        .reperes__ligne {
            grid-template-columns: 6rem 1fr 14rem;
            align-items: baseline;
        }
    }
    .reperes__annee {
        font-family: var(--v-titre);
        font-size: 1.25rem;
        color: var(--v-structure);
        font-variant-numeric: tabular-nums;
    }
    .reperes__intitule {
        font-weight: 600;
    }
    .reperes__lieu {
        font-size: var(--v-t-petit);
        color: var(--v-encre-tenue);
    }
    .contact__grille {
        display: grid;
        gap: clamp(2.5rem, 5vw, 4.5rem);
        margin-top: clamp(2rem, 4vw, 3rem);
    }
    @media (min-width: 900px) {
        .contact__grille {
            grid-template-columns: 1.1fr 0.9fr;
        }
    }
    .contact__direct dt {
        margin-top: 1.5rem;
        font-size: var(--v-t-petit);
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--v-encre-tenue);
    }
    .contact__direct dd {
        margin: 0.3rem 0 0;
        font-size: var(--v-t-chapo);
    }
    .pied {
        position: relative;
        color: var(--p-ivoire);
        padding-top: calc(var(--v-bloc) * 0.8);
        padding-bottom: calc(92px + 2rem);
        isolation: isolate;
    }
    .pied::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image: linear-gradient(
            180deg,
            var(--p-cobalt-nuit) 0%,
            color-mix(in srgb, var(--p-cobalt-nuit) 88%, transparent) 45%,
            color-mix(in srgb, var(--p-cobalt-nuit) 74%, transparent) 100%
        );
    }
    .pied > * {
        position: relative;
        z-index: 1;
    }
    .pied__grille {
        display: grid;
        gap: 2.5rem;
    }
    @media (min-width: 760px) {
        .pied__grille {
            grid-template-columns: 1.4fr 1fr 1fr;
        }
    }
    .pied__marque {
        font-family: var(--v-titre);
        font-size: var(--v-t-h3);
        color: var(--p-ivoire-clair);
        margin: 0 0 0.75rem;
    }
    .pied h2 {
        font-family: var(--v-texte);
        font-size: var(--v-t-petit);
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--p-ivoire) 66%, var(--p-noir));
        margin: 0 0 1rem;
    }
    .pied ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.55rem;
    }
    .pied__mentions {
        margin-top: 3rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--v-trait-nuit);
        font-size: var(--v-t-petit);
        color: color-mix(in srgb, var(--p-ivoire) 78%, var(--p-noir));
    }
}
@layer utilitaires {
    .visuellement-cache {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    .centre {
        text-align: center;
    }
    .mesure {
        max-width: var(--v-lecture);
    }
    .pile {
        display: grid;
        gap: 1.25rem;
    }
}
.sentier__branche {
    --p-filet-perle: var(--p-cordon);
}
.sol {
    --p-pas: 8px;
    --p-sentiers-opacite: 0.55;
    --p-perle: var(--p-sable);
    --p-fil: color-mix(in srgb, var(--p-sable) 72%, var(--p-sable-fil));
    --p-trou: rgba(0, 0, 0, 0.07);
    --p-arete: rgba(0, 0, 0, 0.08);
    --p-reflet: rgba(255, 255, 255, 0.45);
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .hero__indice,
    .hero__entree,
    .js .hero__entree,
    .js .hero__indice,
    .js .hero__oeuvre img {
        animation: none !important;
    }
    .hero__entree {
        opacity: 1 !important;
        transform: none !important;
    }
    .hero__indice {
        opacity: 0.5;
    }
    .hero__champ {
        display: none;
    }
    .hero__oeuvre img {
        opacity: 1 !important;
    }
    .js .revele {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
@media print {
    body {
        background: #fff;
        color: #000;
    }
    .hero {
        min-height: 0;
        background: none;
        color: #000;
    }
    .hero__fond,
    .hero__champ,
    .hero__voile,
    .hero__seuil,
    .hero__indice,
    .hero__paraphe,
    .sentier__cordon,
    .lien-evitement,
    .hero__nav {
        display: none !important;
    }
    .hero h1,
    .hero__accroche,
    .hero__eyebrow {
        color: #000 !important;
    }
    .seuil {
        padding-top: 0;
    }
    .seuil::after,
    .propos::before {
        display: none;
    }
    .propos,
    .propos blockquote,
    .pied {
        color: #000 !important;
    }
    .bloc {
        padding-block: 1.5rem;
        break-inside: avoid;
    }
    .js .revele {
        opacity: 1 !important;
        transform: none !important;
    }
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
    }
}