@font-face {
    font-family: "Oswald";
    src: url("../fonts/oswald.woff2") format("woff2");
    font-weight: 200 700;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
}
@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair-italique.woff2") format("woff2");
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --couleur-fond: #0b0a0d;
    --couleur-fond-2: #141217;
    --couleur-surface: #1b181f;
    --couleur-bordure: #2c2731;
    --couleur-texte: #efe8dc;
    --couleur-texte-doux: #a39a8f;
    --couleur-or: #d9ad55;
    --couleur-or-clair: #f5dc9c;
    --couleur-or-sombre: #8d6a2a;
    --couleur-rouge: #b3242f;
    --couleur-velours: #4a0d14;
    --degrade-or: linear-gradient(180deg, #fff3d2 0%, #f0cf7f 35%, #d9ad55 60%, #9c7430 100%);
    --police-titre: "Oswald", "Arial Narrow", sans-serif;
    --police-elegante: "Playfair Display", Georgia, serif;
    --police-texte: "Inter", system-ui, sans-serif;
    --rayon: 6px;
    --ombre-carte: 0 2px 4px rgb(0 0 0 / .5), 0 18px 36px -16px rgb(0 0 0 / .9);
    --duree: .35s;
    --courbe: cubic-bezier(.2, .7, .2, 1);
}

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

html { color-scheme: dark; scroll-behavior: smooth; }

body {
    margin: 0;
    background:
        radial-gradient(ellipse 80% 40% at 50% 0, rgb(74 13 20 / .55), transparent 75%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgb(74 13 20 / .25), transparent 70%),
        var(--couleur-fond);
    color: var(--couleur-texte);
    font: 400 1rem/1.6 var(--police-texte);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: lining-nums;
    min-height: 100vh;
}

/* Grain de pellicule, très léger, au-dessus de tout sans capter la souris */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: .07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

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

::selection { background: var(--couleur-or); color: #1a1408; }

.visuellement-cache {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.evitement {
    position: absolute;
    left: 1rem; top: -4rem;
    padding: .6rem 1rem;
    background: var(--couleur-or);
    color: #000;
    border-radius: var(--rayon);
    z-index: 10;
}
.evitement:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--couleur-or); outline-offset: 3px; }

/* ---------- Navigation ---------- */
.navigation {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 6;
    display: flex;
    gap: .25rem;
    padding: .25rem;
    background: rgb(15 13 18 / .6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(217 173 85 / .25);
    border-radius: 999px;
    font-size: .82rem;
}
.navigation a {
    padding: .4rem .9rem;
    border-radius: 999px;
    color: var(--couleur-texte-doux);
    text-decoration: none;
    transition: color var(--duree), background var(--duree);
}
.navigation a:hover { color: var(--couleur-texte); }
.navigation a[aria-current="page"] { background: var(--degrade-or); color: #1a1408; font-weight: 500; }

/* ---------- Fronton ---------- */
.fronton {
    position: relative;
    isolation: isolate;
    text-align: center;
    padding: clamp(4.5rem, 10vw, 7rem) 1.25rem clamp(2.5rem, 6vw, 4rem);
    overflow: hidden;
}
/* Mur des affiches de la collection, tamisé comme une salle avant la séance */
.fronton__mur {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 70% at 50% 45%, rgb(11 10 13 / .15), rgb(11 10 13 / .8) 85%),
        linear-gradient(180deg, rgb(11 10 13 / .35), rgb(11 10 13 / 0) 40%, var(--couleur-fond) 98%),
        url("../../images/fond-fronton.webp") center / cover;
    animation: travelling 60s ease-in-out infinite alternate;
}
@keyframes travelling { to { background-position: center, center, 30% 50%; } }

.enseigne {
    position: relative;
    display: inline-block;
    padding: 1.6rem clamp(1.25rem, 5vw, 3.5rem) 1.4rem;
    background: linear-gradient(180deg, rgb(20 16 22 / .82), rgb(12 10 14 / .9));
    border: 1px solid var(--couleur-or-sombre);
    outline: 1px solid rgb(217 173 85 / .35);
    outline-offset: 5px;
    box-shadow: 0 0 60px -10px rgb(217 173 85 / .25), 0 30px 60px -30px #000;
}
.enseigne__ampoules {
    display: block;
    height: 10px;
    margin: 0 -.5rem;
    background: radial-gradient(circle, #fff7df 0 1.6px, var(--couleur-or-clair) 2.2px, rgb(245 220 156 / .25) 4px, transparent 5px) center / 20px 10px repeat-x;
    animation: clignote 1.6s steps(2) infinite;
}
.enseigne__ampoules:last-child { animation-delay: -.8s; }
@keyframes clignote { 50% { opacity: .55; } }

.fronton__surtitre {
    margin: 1rem 0 .5rem;
    font: 500 .74rem/1 var(--police-texte);
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--couleur-or);
}
.fronton__titre {
    margin: 0 0 1rem;
    font: 700 clamp(3.2rem, 12vw, 7.5rem)/.9 var(--police-titre);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--degrade-or);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 22px rgb(217 173 85 / .35));
}
.fronton__titre span {
    display: block;
    font: italic 400 .36em/1.1 var(--police-elegante);
    letter-spacing: .06em;
    text-transform: none;
    margin-top: .2em;
}
.fronton__format {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .75rem 1.25rem;
    margin: 2.2rem 0 0;
    color: var(--couleur-texte-doux);
    font-size: .95rem;
}
.badge-format {
    font: 500 1rem/1 var(--police-titre);
    letter-spacing: .12em;
    padding: .6rem 1rem;
    border: 1px solid var(--couleur-or);
    color: var(--couleur-or-clair);
    background: rgb(217 173 85 / .06);
    text-decoration: none;
}
.fronton__compte strong { color: var(--couleur-texte); font-weight: 600; }

/* Filet Art déco sous le fronton : deux traits dorés et un losange */
.ornement {
    position: relative;
    display: block;
    width: min(26rem, 80%);
    height: 1px;
    margin: 2.6rem auto .4rem;
    background: linear-gradient(90deg, transparent, var(--couleur-or-sombre) 25%, var(--couleur-or) 47%, transparent 47% 53%, var(--couleur-or) 53%, var(--couleur-or-sombre) 75%, transparent);
}
.ornement::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    border: 1px solid var(--couleur-or);
    background: var(--couleur-fond);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 10px rgb(217 173 85 / .5);
}

/* ---------- Outils ---------- */
main { width: min(100% - 2rem, 92rem); margin-inline: auto; }

.outils {
    position: sticky;
    top: .6rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-top: .5rem;
    padding: .6rem;
    background: rgb(20 17 23 / .72);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--couleur-bordure);
    border-radius: 999px;
    box-shadow: 0 12px 30px -18px #000;
}
.outils__recherche {
    flex: 1 1 15rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .95rem;
    background: rgb(11 10 13 / .6);
    border: 1px solid var(--couleur-bordure);
    border-radius: 999px;
    transition: border-color var(--duree), box-shadow var(--duree);
}
.outils__recherche:focus-within { border-color: var(--couleur-or); box-shadow: 0 0 0 3px rgb(217 173 85 / .15); }
.outils__recherche svg { width: 18px; fill: none; stroke: var(--couleur-texte-doux); stroke-width: 2; flex: none; }
.outils__recherche input {
    flex: 1;
    min-width: 0;
    padding: .62rem 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    outline: none;
}
.outils__decennies { display: flex; flex-wrap: wrap; gap: .3rem; }
.puce, .outils__tri select {
    font: 500 .84rem/1 var(--police-texte);
    color: var(--couleur-texte-doux);
    background: transparent;
    border: 1px solid var(--couleur-bordure);
    border-radius: 999px;
    padding: .58rem .85rem;
    cursor: pointer;
    transition: color var(--duree), border-color var(--duree), background var(--duree);
}
.puce:hover { color: var(--couleur-texte); border-color: #4a4252; }
.puce[aria-pressed="true"] { background: var(--degrade-or); border-color: var(--couleur-or); color: #1a1408; }
.outils__tri select {
    padding-right: 1.9rem;
    appearance: none;
    background-color: rgb(11 10 13 / .6);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
    background-position: right 1.05rem center, right .75rem center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}
.outils__tri option { background: var(--couleur-surface); }

.resultat {
    margin: 1.4rem .25rem 1.6rem;
    font: italic 400 1rem/1.3 var(--police-elegante);
    color: var(--couleur-texte-doux);
    min-height: 1.3em;
}

/* ---------- Grille ---------- */
.grille {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(44%, 14rem), 1fr));
    gap: clamp(1.6rem, 3.5vw, 3rem) clamp(1rem, 2.4vw, 2rem);
}
.carte[hidden] { display: none; }
.carte__lien { position: relative; display: block; color: inherit; text-decoration: none; }
/* Cône de lumière d'un spot de galerie, allumé au survol */
.carte__lien::before {
    content: "";
    position: absolute;
    left: -15%;
    right: -15%;
    top: -18%;
    height: 75%;
    z-index: -1;
    background: radial-gradient(ellipse 50% 60% at 50% 0, rgb(245 220 156 / .22), transparent 70%);
    opacity: 0;
    transition: opacity .5s var(--courbe);
    pointer-events: none;
}
.carte__lien:hover::before, .carte__lien:focus-visible::before { opacity: 1; }
/* Cadre noir mat, comme les baguettes aluminium des grands formats */
.carte__cadre {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    padding: 5px;
    background: linear-gradient(145deg, #2a262d, #08070a 45%, #1d1a20);
    box-shadow: var(--ombre-carte), inset 0 0 0 1px rgb(255 255 255 / .06);
    transition: transform .5s var(--courbe), box-shadow .5s var(--courbe);
}
.carte__cadre img { width: 100%; height: 100%; object-fit: cover; }
/* Reflet du verre qui glisse au survol */
.carte__cadre::after {
    content: "";
    position: absolute;
    inset: 5px;
    background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .14) 48%, rgb(255 255 255 / .04) 52%, transparent 62%) 220% 0 / 250% 100% no-repeat;
    transition: background-position 1s var(--courbe);
    pointer-events: none;
}
.carte__lien:hover .carte__cadre, .carte__lien:focus-visible .carte__cadre {
    transform: translateY(-8px);
    box-shadow: 0 4px 8px rgb(0 0 0 / .5), 0 34px 50px -18px rgb(0 0 0 / .95), 0 0 0 1px rgb(217 173 85 / .55);
}
.carte__lien:hover .carte__cadre::after { background-position: -60% 0; }
.carte__nouveau {
    position: absolute;
    top: 1rem;
    left: -.35rem;
    padding: .3rem .65rem;
    background: var(--couleur-rouge);
    box-shadow: 0 4px 10px -4px #000;
    font: 600 .68rem/1 var(--police-titre);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.carte__legende { display: block; padding: 1rem .1rem 0; text-align: center; }
.carte__titre {
    display: block;
    font: 600 1.08rem/1.25 var(--police-elegante);
    transition: color var(--duree);
}
.carte__lien:hover .carte__titre { color: var(--couleur-or-clair); }
.carte__meta {
    display: block;
    margin-top: .35rem;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--couleur-texte-doux);
}

.vide { text-align: center; color: var(--couleur-texte-doux); padding: 3rem 0; font: italic 1.1rem var(--police-elegante); }

/* Apparition au défilement, posée par le JS (sans JS tout reste visible) */
.js .carte { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--courbe), transform .7s var(--courbe); }
.js .carte.visible { opacity: 1; transform: none; }

/* ---------- Pied ---------- */
.pied {
    margin-top: 6rem;
    padding: 3rem 1.25rem 3.5rem;
    text-align: center;
    font-size: .85rem;
    color: var(--couleur-texte-doux);
    background: linear-gradient(180deg, transparent, rgb(74 13 20 / .18));
}
.pied::before {
    content: "";
    display: block;
    width: min(20rem, 70%);
    height: 1px;
    margin: 0 auto 2rem;
    background: linear-gradient(90deg, transparent, var(--couleur-or), transparent);
}
.pied p { margin: .3rem 0; }
.pied p:first-child { font: italic 1rem/1.5 var(--police-elegante); color: var(--couleur-texte); }
.pied__droits { font-size: .72rem; opacity: .7; }

/* ---------- Visionneuse ---------- */
.visionneuse {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(7 6 9 / .97);
    color: inherit;
    overflow: hidden;
}
.visionneuse::backdrop { background: rgb(0 0 0 / .75); }
.visionneuse[open] { display: grid; place-items: center; animation: fondu .35s ease; }
@keyframes fondu { from { opacity: 0; } }

.visionneuse__corps {
    display: grid;
    grid-template-columns: auto minmax(16rem, 23rem);
    gap: clamp(1.5rem, 4.5vw, 4rem);
    align-items: center;
    padding: 4rem 5.5rem;
    max-height: 100%;
}
.visionneuse__image { position: relative; margin: 0; isolation: isolate; }
.visionneuse__image img:not(.visionneuse__ambiance) {
    position: relative;
    max-height: calc(100vh - 8rem);
    max-height: calc(100dvh - 8rem);
    width: auto;
    padding: 6px;
    background: linear-gradient(145deg, #2a262d, #08070a 45%, #1d1a20);
    box-shadow: 0 40px 90px -25px #000, 0 0 0 1px rgb(255 255 255 / .08);
    animation: apparition .45s var(--courbe);
}
@keyframes apparition { from { opacity: 0; transform: scale(.97); } }
/* Halo aux couleurs de l'affiche, tiré de sa vignette */
.visionneuse__ambiance {
    position: absolute;
    inset: 8% -12%;
    z-index: -1;
    width: 124%;
    height: 84%;
    object-fit: cover;
    filter: blur(70px) saturate(1.6);
    opacity: .65;
    pointer-events: none;
}
.visionneuse__rang { margin: 0; font: 500 .74rem/1 var(--police-texte); letter-spacing: .3em; color: var(--couleur-or); }
.visionneuse__fiche h2 {
    margin: .6rem 0 1.5rem;
    font: 700 clamp(1.8rem, 3.2vw, 2.7rem)/1.1 var(--police-elegante);
}
.visionneuse__fiche dl { margin: 0 0 1.8rem; display: grid; gap: .6rem; }
.visionneuse__fiche dl div { display: flex; gap: 1rem; border-bottom: 1px solid var(--couleur-bordure); padding-bottom: .55rem; }
.visionneuse__fiche dt { width: 6.5rem; flex: none; color: var(--couleur-texte-doux); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; padding-top: .15rem; }
.visionneuse__fiche dd { margin: 0; }

.echelle { margin: 0; }
.echelle svg { width: 100%; max-width: 16rem; overflow: visible; }
.echelle__sol { stroke: #3a3340; stroke-width: 1.5; }
.echelle__affiche { fill: rgb(217 173 85 / .12); stroke: var(--couleur-or); stroke-width: 1.5; }
.echelle__personne { fill: #6b6270; }
.echelle__cote { fill: var(--couleur-texte-doux); font: 500 11px var(--police-texte); text-anchor: middle; }
.echelle figcaption { font: italic .85rem var(--police-elegante); color: var(--couleur-texte-doux); margin-top: .5rem; }

.visionneuse__fermer, .visionneuse__nav {
    position: fixed;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid var(--couleur-bordure);
    background: rgb(20 17 23 / .7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--couleur-texte);
    cursor: pointer;
    transition: border-color var(--duree), color var(--duree), transform var(--duree);
}
.visionneuse__fermer:hover, .visionneuse__nav:hover { border-color: var(--couleur-or); color: var(--couleur-or); }
.visionneuse__fermer svg, .visionneuse__nav svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.visionneuse__fermer { top: 1rem; right: 1rem; }
.visionneuse__nav { top: 50%; transform: translateY(-50%); }
.visionneuse__nav--prec { left: 1rem; }
.visionneuse__nav--suiv { right: 1rem; }

@media (max-width: 860px) {
    .visionneuse[open] { place-items: start center; overflow-y: auto; }
    .visionneuse__corps { grid-template-columns: 1fr; padding: 4.5rem 1rem 6rem; justify-items: center; }
    .visionneuse__image img:not(.visionneuse__ambiance) { max-height: 70vh; max-height: 70dvh; }
    .visionneuse__fiche { width: 100%; max-width: 30rem; }
    .visionneuse__nav { top: auto; bottom: 1rem; transform: none; }
    .outils { border-radius: 1.4rem; }
    .outils__decennies { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .1rem; scrollbar-width: none; }
    .puce { flex: none; }
}
@media (max-width: 640px) {
    .fronton { padding-top: 4.8rem; }
    .navigation { left: 50%; right: auto; transform: translateX(-50%); }
    .enseigne { padding-inline: 1rem; }
}

/* ---------- Accrochage ---------- */
.fronton--compact { padding-block: 4.5rem 2.5rem; }
.fronton--compact .fronton__titre { font-size: clamp(2.6rem, 9vw, 5rem); margin: 0; }
.fronton--compact .fronton__surtitre { margin-top: 0; }

.connexion {
    display: grid;
    gap: .75rem;
    width: min(100%, 22rem);
    margin: 1rem auto 4rem;
    padding: 1.9rem;
    background: linear-gradient(180deg, #1f1b23, var(--couleur-fond-2));
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: 0 30px 60px -30px #000;
}
.connexion label { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--couleur-texte-doux); }
.connexion input {
    padding: .75rem .9rem;
    background: var(--couleur-fond);
    border: 1px solid #3a3340;
    border-radius: var(--rayon);
    color: inherit;
    font: inherit;
}
.connexion input:focus { border-color: var(--couleur-or); outline: none; box-shadow: 0 0 0 3px rgb(217 173 85 / .15); }
.connexion__erreur { margin: 0; color: #ff8a8f; font-size: .9rem; }
.bouton {
    padding: .8rem 1.1rem;
    background: var(--degrade-or);
    border: 0;
    border-radius: var(--rayon);
    color: #1a1408;
    font: 600 .95rem/1 var(--police-titre);
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter var(--duree);
}
.bouton:hover { filter: brightness(1.1); }
.bouton--discret { background: var(--couleur-surface); color: var(--couleur-texte); border: 1px solid #3a3340; text-decoration: none; font-size: .85rem; }
.bouton--discret:hover { background: #2a2430; filter: none; }

.alerte, .message {
    padding: .8rem 1.1rem;
    border-radius: 0 var(--rayon) var(--rayon) 0;
}
.alerte { border-left: 3px solid var(--couleur-rouge); background: rgb(179 36 47 / .12); }
.message { border-left: 3px solid var(--couleur-or); background: rgb(217 173 85 / .1); }

.pieces {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1.5rem;
}
.piece {
    position: relative;
    padding: 1.4rem 1.4rem 1.6rem;
    background: linear-gradient(180deg, #1e1a22, var(--couleur-fond-2));
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: 0 24px 40px -30px #000;
}
.piece::before {
    content: "";
    position: absolute;
    inset: 0 30% auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--couleur-or), transparent);
}
.piece--2 { grid-column: span 2; }
.piece__nom {
    margin: 0 0 1.2rem;
    text-align: center;
    font: italic 600 1.2rem/1 var(--police-elegante);
    color: var(--couleur-or-clair);
}
.piece__mur { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 1.25rem; }
.piece:not(.piece--2) .piece__mur { max-width: 15rem; margin-inline: auto; }
.cadre { display: block; color: inherit; text-decoration: none; text-align: center; }
.cadre__baguette {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    padding: 5px;
    background: linear-gradient(145deg, #2a262d, #08070a 45%, #1d1a20);
    box-shadow: var(--ombre-carte), inset 0 0 0 1px rgb(255 255 255 / .06);
    text-decoration: none;
    transition: transform var(--duree) var(--courbe);
}
.cadre__baguette:hover { transform: translateY(-4px); }
.cadre__baguette img { width: 100%; height: 100%; object-fit: cover; }
.cadre__vide {
    display: grid;
    place-items: center;
    height: 100%;
    border: 1px dashed #4a4152;
    color: var(--couleur-texte-doux);
    font: italic 1rem/1 var(--police-elegante);
}
.cadre__changer {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translate(-50%, .4rem);
    padding: .45rem .95rem;
    background: var(--degrade-or);
    color: #1a1408;
    border-radius: 999px;
    box-shadow: 0 6px 16px -6px #000;
    font: 600 .76rem/1 var(--police-titre);
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity var(--duree), transform var(--duree) var(--courbe);
}
.cadre__baguette:hover .cadre__changer, .cadre__baguette:focus-visible .cadre__changer { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .cadre__changer { opacity: .92; transform: translate(-50%, 0); } }
.cadre__titre { display: block; margin-top: .85rem; font: 600 1rem/1.25 var(--police-elegante); }
a.cadre__titre { color: inherit; text-decoration: none; }
a.cadre__titre:hover { color: var(--couleur-or-clair); }
.cadre__meta, .cadre__depuis { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--couleur-texte-doux); margin-top: .25rem; }
.cadre__depuis { text-transform: none; letter-spacing: 0; font: italic .8rem var(--police-elegante); }

.reserve, .historique { margin-top: 4rem; }
.reserve__titre {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    margin: 0 0 1.4rem;
    font: 700 1.6rem/1 var(--police-elegante);
}
.reserve__titre span { font: 500 .9rem/1 var(--police-titre); color: var(--couleur-or); letter-spacing: .1em; }
.reserve__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 1.1rem .8rem;
}
.reserve__liste a { display: block; color: var(--couleur-texte-doux); text-decoration: none; font-size: .75rem; line-height: 1.3; }
.reserve__liste img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; margin-bottom: .4rem; opacity: .8; transition: opacity var(--duree), transform var(--duree) var(--courbe); box-shadow: var(--ombre-carte); }
.reserve__liste a:hover img { opacity: 1; transform: translateY(-3px); }
.reserve__liste a:hover { color: var(--couleur-texte); }

.choix-outils {
    position: sticky;
    top: .6rem;
    z-index: 5;
    display: flex;
    gap: .6rem;
    align-items: center;
    padding: .6rem;
    background: rgb(20 17 23 / .72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--couleur-bordure);
    border-radius: 999px;
}
.choix-outils .bouton--discret { border-radius: 999px; }
.choix__liste {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(46%, 9.5rem), 1fr));
    gap: 1.4rem 1rem;
}
.choix__liste li[hidden] { display: none; }
.choix__bouton {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    text-align: center;
    font: inherit;
    cursor: pointer;
}
.choix__bouton img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    box-shadow: var(--ombre-carte);
    outline: 2px solid transparent;
    outline-offset: 3px;
    transition: transform var(--duree) var(--courbe), outline-color var(--duree);
}
.choix__bouton:hover img, .choix__bouton:focus-visible img { transform: translateY(-4px); outline-color: var(--couleur-or); }
.choix__bouton--ici { cursor: default; }
.choix__bouton--ici img { outline-color: var(--couleur-rouge); }
.choix__titre { display: block; margin-top: .65rem; font: 600 .92rem/1.25 var(--police-elegante); }
.choix__etat { display: block; margin-top: .2rem; font-size: .72rem; color: var(--couleur-texte-doux); }
.choix__vider { text-align: center; margin: 2.5rem 0 4rem; }

.historique ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; color: var(--couleur-texte-doux); }
.historique li { padding: .55rem 0; border-bottom: 1px solid #221e26; }
.historique time { display: inline-block; min-width: 7rem; color: var(--couleur-or); font: italic .9rem var(--police-elegante); }
.historique strong { color: var(--couleur-texte); font-weight: 500; }

.deconnexion { display: flex; justify-content: center; margin: 3rem 0 4rem; font-size: .85rem; }
.lien { background: none; border: 0; padding: 0; font: inherit; color: var(--couleur-texte-doux); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lien:hover { color: var(--couleur-texte); }

@media (max-width: 640px) {
    .piece--2 { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .carte { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}