/*
Theme Name: Cécile Humenny 2026
Theme URI: https://www.cecilehumenny-photo.com/
Author: COMPUCITY
Description: Le site de Cécile Humenny. Construit sur le Pi de COMPUCITY (site-cecile/demo, python3 construire.py theme) : ne rien modifier ici, une nouvelle construction écrase tout.
Version: 82b9b1c0
Requires PHP: 8.1
Text Domain: cecile-humenny-2026
*/
/* Démo du site de Cécile Humenny : « les fonds peints ». Les murs du site sont des morceaux de ses propres toiles de fond ;
   prune et or, cuivre sur le portrait d'art ; des ornements dorés à certains endroits, comme dans un livre de contes. */
:root {
	--noir: #170f14;
	--nuit: #21161d;
	--ivoire: #f7f2ea;
	--sable: #d8d0cb;
	--or: #e3b857;
	--encre: #21141b;
	--filet: rgba(247, 242, 234, .22);
	--or-doux: rgba(227, 184, 87, .55);
	--serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
	--sans: "Cabin", "Gill Sans", "Avenir Next", system-ui, sans-serif;
	--marge: clamp(1.25rem, 4.4vw, 5rem);
	--souffle: clamp(4.5rem, 12vh, 8.5rem);
	--souple: cubic-bezier(.2, .7, .2, 1);
}
/* le portrait d'art : son ton cuivré */
.cuivre { --noir: #1b0f08; --nuit: #2a170c; --sable: #e4d4c2; --or: #ecbd6b; --or-doux: rgba(236, 189, 107, .55); --filet: rgba(248, 236, 220, .24); }

*, *::before, *::after { box-sizing: border-box; }
html { background: #170f14; color: var(--ivoire); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
html:has(dialog[open]) { overflow: hidden; }
body { margin: 0; background: var(--noir); font: 400 1.0625rem/1.58 var(--sans); -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
@media (min-width: 900px) { body { font-size: 1.125rem; } }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
button { font: inherit; color: inherit; }
/* pas d'interlettrage sur le Garamond : il désactiverait ses ligatures (fi, ff, Th) */
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.06; letter-spacing: 0; }
h1 { font-size: clamp(2.9rem, 12vw, 4.4rem); line-height: 1.02; }
h2 { font-size: clamp(2.4rem, 4.8vw, 4.2rem); }
h1 em, h2 em { font-weight: 400; color: var(--or); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
dialog:focus-visible { outline: 0; }
.evitement { position: fixed; top: .5rem; left: .5rem; z-index: 40; padding: .6rem 1rem; background: var(--ivoire); color: var(--encre); transform: translateY(-200%); }
.evitement:focus { transform: none; }

.surtitre { font: italic 400 clamp(1.3rem, 1.7vw, 1.5rem)/1.3 var(--serif); color: var(--or); }
.chapo { font: 400 clamp(1.15rem, 1.5vw, 1.35rem)/1.5 var(--sans); color: var(--ivoire); }
.chapo em { font: italic 400 1.14em/1 var(--serif); }
.petit { font-size: .94rem; color: var(--sable); }
.citation { font: italic 400 clamp(1.6rem, 2.9vw, 2.7rem)/1.22 var(--serif); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.souligne { border-bottom: 1px solid var(--or); }
/* le bouton : une petite plaque ivoire, avec son filet intérieur comme un cartel encadré */
.bouton {
	display: inline-block; padding: 1rem 1.7rem; border: 0; background: var(--or); color: var(--encre); cursor: pointer; outline: 1px solid rgba(33, 20, 27, .38); outline-offset: -5px;
	font: 500 1rem/1.15 var(--sans); text-align: center; transition: background .35s, transform .35s var(--souple);
}
.bouton:hover { background: #f6d68c; transform: translateY(-2px); }
.bouton:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
/* le bouton qui brille */
.brille { position: relative; overflow: hidden; }
.brille::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); transform: translateX(-120%); animation: lueur 4s ease-in-out infinite; pointer-events: none; }
.lien { display: inline-block; padding: 0 0 .15rem; border: 0; border-bottom: 1px solid var(--or); background: none; cursor: pointer; font: 500 1rem/1.3 var(--sans); transition: color .35s; }
.lien:hover, .lien:focus-visible { color: var(--or); }

/* ── les ornements : à certains endroits seulement, comme la dorure d'une reliure ── */
.fleuron { display: block; width: min(25rem, 72vw); height: auto; }
.pied .fleuron, .mot-court .fleuron { margin-inline: auto; }
.dorure { --coin: clamp(70px, 8vw, 118px); position: relative; border: 1px solid var(--or-doux); outline: 1px solid rgba(227, 184, 87, .35); outline-offset: -7px; }
.dorure::before {
	content: ""; position: absolute; inset: 10px; pointer-events: none;
	background:
		url(ornements/coin-hg.svg?v=49e76f9a) top left / var(--coin) no-repeat,
		url(ornements/coin-hd.svg?v=49e76f9a) top right / var(--coin) no-repeat,
		url(ornements/coin-bg.svg?v=49e76f9a) bottom left / var(--coin) no-repeat,
		url(ornements/coin-bd.svg?v=49e76f9a) bottom right / var(--coin) no-repeat;
}
/* un cadre sur deux porte l'ancien ornement, filigrané : le diaphragme ne se répète pas partout */
.dorure.filigrane::before {
	background:
		url(ornements/filigrane-hg.svg?v=49e76f9a) top left / var(--coin) no-repeat,
		url(ornements/filigrane-hd.svg?v=49e76f9a) top right / var(--coin) no-repeat,
		url(ornements/filigrane-bg.svg?v=49e76f9a) bottom left / var(--coin) no-repeat,
		url(ornements/filigrane-bd.svg?v=49e76f9a) bottom right / var(--coin) no-repeat;
}
/* la lettrine : la capitale d'or, posée sur un carré de rinceaux, comme dans un manuscrit */
.lettrine::first-letter {
	float: left; margin: .1em .16em 0 0; padding: .2em .17em .08em; border: 1px solid var(--or-doux);
	background: url(ornements/lettrine-filigrane.svg?v=49e76f9a) center / cover, rgba(10, 6, 8, .35);
	font: 500 3.5em/.78 var(--serif); color: var(--or);
}
.enlumine {
	display: inline-grid; place-items: center; min-width: 2.7rem; height: 2.7rem; padding: 0 .4rem; border: 1px solid var(--or-doux);
	background: url(ornements/lettrine-filigrane.svg?v=49e76f9a) center / cover, rgba(10, 6, 8, .35); font: 500 1.35rem/1 var(--serif); color: var(--or);
}

/* les murs : la toile est posée derrière le contenu, elle se fond dans le noir en haut et en bas, comme un mur éclairé dans une pièce sombre */
.peint { --fondu: clamp(3rem, 12vh, 8rem); position: relative; isolation: isolate; overflow: hidden; }
.toile, .peint::after {
	position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent);
}
.toile { object-fit: cover; max-width: none; background: var(--mur); }
.peint::after { content: ""; background: url(photos/grain.webp) 0 0 / 64px; pointer-events: none; }
/* juste après l'ouverture, le mur prolonge la photo : même couleur au raccord, puis le noir en bas de section */
.depuis-heros { background: linear-gradient(to bottom, var(--mur) 50%, var(--noir) 50%); }

/* la lumière monte sur chaque œuvre quand on arrive devant (sans JavaScript, tout reste simplement visible) */
.js .lumiere img { opacity: 0; transform: scale(1.015); transition: opacity 1s ease, transform 1.6s var(--souple); }
.js .lumiere.allumee img { opacity: 1; transform: none; }

/* en-tête */
.entete {
	position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 2rem;
	padding: .75rem var(--marge); transition: transform .5s var(--souple), background .5s;
}
.entete.fond { background: rgba(23, 15, 20, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.entete.cache { transform: translateY(-105%); }
.entete:has(:focus-visible) { transform: none; }
.logo img { height: clamp(50px, 5vw, 62px); width: auto; }
.nav-large { display: none; gap: clamp(1.1rem, 2.1vw, 2.3rem); margin-left: auto; font-size: 1.02rem; }
.nav-large a { padding: .3rem 0; border-bottom: 1px solid transparent; transition: border-color .35s, color .35s; cursor: pointer; }
.nav-large a:hover, .nav-large a[aria-current] { border-color: var(--or); color: var(--or); }
.entete .bouton { display: none; padding: .78rem 1.25rem; }
.langue { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .15rem; font: 500 .95rem/1 var(--sans); transition: color .3s; }
.langue:hover { color: var(--or); }
.entete .bouton, .ouvrir-menu, .langue { flex: none; }
.entete .logo { margin-right: auto; }
.nav-large { margin-left: 0; }
.ouvrir-menu { padding: .7rem 0 .7rem 1rem; background: none; border: 0; color: var(--ivoire); cursor: pointer; font: 500 1.05rem/1 var(--sans); }
html:not(.js) .ouvrir-menu { display: none; }
html:not(.js) .nav-large { display: flex; flex-wrap: wrap; }
html:not(.js) .formulaire { display: none; }
.pour-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1280px) {
	.nav-large { display: flex; }
	.entete .bouton { display: inline-block; }
	.ouvrir-menu { display: none; }
}

/* menu du téléphone */
.menu { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 5rem var(--marge) 2.5rem; border: 0; background: var(--noir); color: var(--ivoire); }
.menu::backdrop { background: var(--noir); }
.menu[open] { display: flex; flex-direction: column; animation: apparition .4s ease both; }
.menu nav { display: flex; flex-direction: column; gap: 1rem; margin: auto 0; font: 500 clamp(1.9rem, 8.6vw, 2.7rem)/1.1 var(--serif); }
.menu nav a { cursor: pointer; }
.fermer-menu { position: absolute; top: 1.2rem; right: max(var(--marge), env(safe-area-inset-right)); padding: .7rem 0; background: none; border: 0; color: var(--ivoire); cursor: pointer; font: 500 1.05rem/1 var(--sans); }
.menu .coordonnees { font-size: .98rem; color: var(--sable); }
@keyframes apparition { from { opacity: 0; } }

/* ouverture. Debout : le portrait, puis le texte, qui ne recouvre jamais le visage */
.ouverture { position: relative; overflow: hidden; background: var(--mur); }
.ouverture::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 11rem; background: linear-gradient(to bottom, rgba(12, 8, 5, .62), rgba(12, 8, 5, .3) 45%, rgba(12, 8, 5, 0)); pointer-events: none; }
.ouverture picture { position: relative; display: block; height: 62vh; height: min(132vw, 62svh); overflow: hidden; }
.ouverture picture::after { content: ""; position: absolute; inset: auto 0 -1px; height: 42%; background: linear-gradient(to top, var(--mur) 14%, transparent); }
.ouverture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ouverture .texte { position: relative; z-index: 2; display: grid; gap: .85rem; justify-items: start; margin-top: -2.8rem; padding: 0 var(--marge) clamp(2rem, 5vh, 3.5rem); }
.ouverture .actions { margin-top: .35rem; }
/* la reliure : un filet d'or et ses angles sur la photo pleine page */
.reliure { --coin: clamp(58px, 7.5vw, 112px); position: absolute; inset: 5.1rem clamp(.55rem, 1.3vw, 1.1rem) clamp(.55rem, 1.3vw, 1.1rem); z-index: 1; pointer-events: none; border-color: rgba(236, 189, 107, .6); }
@media (max-aspect-ratio: 5/4), (max-width: 479px) {
	.reliure { bottom: auto; height: calc(min(132vw, 62svh) - 5.7rem); }
}
@media (max-aspect-ratio: 5/4), (max-width: 479px) {
	.ouverture.reliee .texte { margin-top: .9rem; }
	.ouverture.reliee picture::after { height: 18%; }
}
/* tablette tenue droite : le paysage au-dessus du texte, recadré sur le sujet */
@media (min-width: 640px) and (max-aspect-ratio: 5/4) {
	.ouverture picture { height: min(92vw, 64svh); }
	.ouverture.gauche img { object-position: 62% 0; }
	.ouverture.bas-gauche img { object-position: 0 0; }
	.ouverture.posee img { object-position: 50% 0; }
	.reliure { height: calc(min(92vw, 64svh) - 5.7rem); }
}
/* petit téléphone : le visage reste à l'écran, et le dégradé ne monte pas sur lui */
@media (max-width: 639px) and (max-height: 720px) {
	.ouverture picture { height: 52svh; }
	.ouverture picture::after { height: 22%; }
	.ouverture img { object-position: 50% 50%; }
	.ouverture .texte { margin-top: -1.5rem; }
	h1 { font-size: 2.5rem; }
	.reliure { height: calc(52svh - 5.7rem); }
}
/* couché : la photo plein cadre, le texte sur le fond peint, à côté du sujet */
@media (min-aspect-ratio: 5/4) and (min-width: 480px) {
	.ouverture { display: flex; align-items: flex-end; min-height: 100vh; min-height: 100svh; }
	.ouverture picture { position: absolute; inset: 0; height: 100%; }
	.ouverture picture::after { inset: 0; height: auto; }
	.ouverture.gauche img { object-position: 62% 12%; }
	.ouverture.gauche picture::after { background: linear-gradient(to top, var(--mur), transparent 16%), linear-gradient(to right, rgba(20, 12, 7, .8), rgba(20, 12, 7, .56) 30%, rgba(20, 12, 7, 0) 54%); }
	.ouverture .texte { margin: 0; padding: 5rem var(--marge) clamp(2.5rem, 9vh, 6rem); gap: 1.05rem; width: min(50%, 47rem); }
	.ouverture.reliee .texte { width: min(43%, 40rem); padding-left: calc(var(--marge) + 1.2rem); padding-bottom: clamp(3.5rem, 11vh, 7rem); }
	.ouverture h1 { font-size: clamp(2.8rem, 6vw, 6.4rem); }
}
/* accueil : le titre en bas à gauche de la grande image, sous le visage, sur le tulle sombre */
@media (min-aspect-ratio: 5/4) and (min-width: 480px) {
	.ouverture.bas-gauche img { object-position: 22% 38%; }
	.ouverture.bas-gauche picture::after { background: linear-gradient(to top, var(--mur), transparent 12%), linear-gradient(to top, rgba(12, 8, 5, .92), rgba(12, 8, 5, .66) 24%, rgba(12, 8, 5, 0) 46%); }
	.ouverture.bas-gauche .texte { width: min(76%, 64rem); gap: .6rem; padding-bottom: clamp(1.5rem, 4.5vh, 3rem); }
	.ouverture.bas-gauche h1 { font-size: clamp(2.4rem, 3.9vw, 4.6rem); text-wrap: balance; }
}
/* très large : on garde les yeux et le masque, quitte à perdre le haut de la coiffure */
@media (min-aspect-ratio: 2/1) and (min-width: 480px) {
	.ouverture.gauche img { object-position: 62% 65%; }
}
@media (min-aspect-ratio: 5/4) and (min-width: 480px) { .ouverture.haut img { object-position: 62% 0; } }
/* posée : quand le sujet occupe tout le cadre, la photo d'abord et le texte dessous, sur son mur. Rien n'est écrit sur un visage */
@media (min-aspect-ratio: 5/4) and (min-width: 480px) {
	.ouverture.posee { display: block; min-height: 0; }
	.ouverture.posee picture { position: relative; height: 72vh; height: 72svh; }
	.ouverture.posee picture::after { inset: auto 0 -1px; height: 24%; background: linear-gradient(to top, var(--mur), transparent); }
	.ouverture.posee img { object-position: 50% 30%; }
	.ouverture.posee.haut img { object-position: 50% 6%; }
	.ouverture.posee .texte { width: auto; margin: .3rem 0 0; padding: 0 var(--marge) clamp(1.5rem, 4vh, 3rem); grid-template-columns: 1.15fr 1fr; gap: .45rem clamp(2rem, 5vw, 5rem); align-items: end; }
	.ouverture.posee .surtitre { grid-column: 1 / -1; }
	.ouverture.posee h1 { grid-row: 2 / span 2; font-size: clamp(2.5rem, 4.6vw, 4.9rem); }
	.ouverture.posee .chapo { grid-area: 2 / 2; }
	.ouverture.posee .actions { grid-area: 3 / 2; }
}
@media (orientation: landscape) and (max-height: 520px) {
	.ouverture .surtitre, .ouverture .chapo { display: none; }
	.ouverture h1 { font-size: 2.1rem; }
	.ouverture .texte { padding-top: 3.5rem; padding-bottom: 1rem; gap: .6rem; }
	.ouverture.posee .texte { padding-top: 0; }
}
.js .ouverture picture img { animation: allumage 1.6s ease both; }
.js .ouverture .texte > * { animation: montee 1s var(--souple) both; }
.js .ouverture .texte > :nth-child(2) { animation-delay: .12s; }
.js .ouverture .texte > :nth-child(3) { animation-delay: .24s; }
.js .ouverture .texte > :nth-child(4) { animation-delay: .34s; }
@keyframes allumage { from { opacity: 0; transform: scale(1.02); } }
@keyframes montee { from { opacity: 0; transform: translateY(14px); } }

.avec-surtitre .surtitre { display: block; margin-bottom: .7rem; }
.tete { display: grid; gap: 1rem; max-width: 50rem; margin-bottom: clamp(2.2rem, 6vh, 4rem); }

/* ouverture en deux : le texte sur son mur, une image à côté */
.demi { display: grid; align-items: center; gap: clamp(2rem, 5vw, 4rem); padding: clamp(6rem, 15vh, 9rem) var(--marge) var(--souffle); min-height: 88vh; }
.demi .texte { display: grid; gap: 1.05rem; justify-items: start; }
.demi .texte > p:not(.surtitre, .chapo, .actions) { max-width: 36em; }
.demi figure { overflow: hidden; max-height: 78vh; }
.demi figure img { width: 100%; height: 100%; max-height: 78vh; object-fit: cover; object-position: 50% 20%; }
.demi h1 { font-size: clamp(2.8rem, 5.6vw, 5.6rem); }
.demi address { display: grid; gap: .25rem; width: 100%; padding-top: 1.1rem; border-top: 1px solid var(--filet); font-style: normal; }
.demi address strong { font: 500 clamp(1.5rem, 2.4vw, 2.1rem)/1.2 var(--serif); }
.demi address a { border-bottom: 1px solid var(--or); }
@media (min-width: 900px) { .demi { grid-template-columns: 1.1fr 1fr; } }

/* ── accueil : le mot, les portes, les prochaines dates ── */
.mot-court { display: grid; gap: 1.5rem; padding: clamp(2rem, 6vh, 4rem) var(--marge) clamp(3.5rem, 9vh, 6rem); text-align: center; }
.mot-court .citation { max-width: 26em; margin-inline: auto; }
.presentation { max-width: 44em; margin-inline: auto; color: var(--sable); }
/* le recueil qu'on feuillette : sur écran large, un livre ouvert (une photo à gauche, sa page à droite) */
.recueil { padding: clamp(2.5rem, 7vh, 4.5rem) var(--marge) var(--souffle); }
.recueil .tete { justify-items: center; max-width: none; text-align: center; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.recueil h2 { font-size: clamp(2.1rem, 3.8vw, 3.4rem); }
.livret { --papier: #eadfc8; --encre-page: #2a1a20; position: relative; display: grid; justify-items: center; gap: 1rem; }
.feuilles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .7rem; width: 100%; }
.feuille { background: var(--papier); color: var(--encre-page); }
.image-etroite img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 18%; }
.verso, .premiere { display: none; }
.ecrit { display: grid; gap: .45rem; justify-items: center; align-content: center; padding: 1rem; text-align: center; }
.ecrit h3 { font-size: clamp(1.7rem, 3.4vw, 3.3rem); }
.ecrit p { font-size: .98rem; line-height: 1.4; }
.ecrit .tarif { font: italic 400 clamp(1.1rem, 1.6vw, 1.45rem)/1.25 var(--serif); color: #7c5716; }
.ecrit .lien { border-color: #a37720; }
.ecrit .lien:hover, .ecrit .lien:focus-visible { color: #7c5716; }
.ecrit .enlumine { background-color: #2a121e; border-color: #a37720; color: var(--or); }
.livret .dorure { outline-color: rgba(150, 110, 30, .28); border-color: transparent; }
.js .livret.pret .feuilles { display: block; position: absolute; inset: 0; width: auto; }
.js .livret.pret .volume { position: relative; width: min(30rem, 100%); aspect-ratio: 4 / 5.2; perspective: 2400px; }
.js .livret.pret .feuille { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform .95s cubic-bezier(.45, .05, .25, 1), opacity .95s; }
/* la face visible s'échange à mi-rotation (la page est alors vue par la tranche) : le dos d'une page ne dépend pas du moteur, certains ignorent backface-visibility */
.js .livret.pret .recto, .js .livret.pret .verso { transition: visibility 0s linear .47s; }
.js .livret.pret .feuille:not(.tournee) .verso, .js .livret.pret .feuille.tournee .recto { visibility: hidden; }
/* debout, une seule page à la fois : celle qu'on tourne s'efface vers la gauche */
.js .livret.pret .feuille.tournee { transform: rotateY(-115deg); opacity: 0; pointer-events: none; }
.js .livret.pret .recto { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; background: var(--papier); -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .5); }
.js .livret.pret .image-etroite { min-height: 0; overflow: hidden; }
.js .livret.pret .image-etroite img { height: 100%; aspect-ratio: auto; }
.commandes-livret { display: flex; align-items: center; gap: 1rem; }
.commandes-livret[hidden], .signets[hidden] { display: none; }
.tourner { width: 3rem; height: 3rem; border: 1px solid var(--or-doux); background: none; cursor: pointer; font: 400 1.7rem/1 var(--serif); transition: background .3s, opacity .3s; }
.tourner:hover:not(:disabled) { background: rgba(227, 184, 87, .16); }
.tourner:disabled { opacity: .3; cursor: default; }
.folio { min-width: 5.5rem; text-align: center; font: italic 400 1.25rem/1 var(--serif); color: var(--or); }
.signets { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .3rem; max-width: 52rem; }
.signets button { padding: .3rem .55rem; border: 0; border-bottom: 1px solid transparent; background: none; cursor: pointer; font: italic 400 1.18rem/1.2 var(--serif); color: var(--sable); transition: color .3s, border-color .3s; }
.signets button:hover { color: var(--or); }
.signets button[aria-current="true"] { border-color: var(--or); color: var(--or); }
/* la page qui tourne passe dans l'ombre, puis revient à la lumière */
.feuille.en-vol .recto::after, .feuille.en-vol .verso::before { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(to right, rgba(30, 14, 4, .5), rgba(30, 14, 4, .12)); pointer-events: none; animation: ombre-page .95s ease both; }
@keyframes ombre-page { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
/* debout : une seule page, la photo entière ; le texte se pose en bas, sur un voile sombre, jamais sur un pavé clair */
@media (max-width: 799px) {
	.js .livret.pret .volume { aspect-ratio: 4 / 5.6; }
	.js .livret.pret .feuille { color: var(--ivoire); }
	.js .livret.pret .recto { grid-template-rows: 1fr auto; background: #150c11; }
	.js .livret.pret .image-etroite { position: absolute; inset: 0; }
	.js .livret.pret .image-etroite::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 10, 14, .97) 8%, rgba(18, 10, 14, .84) 30%, rgba(18, 10, 14, 0) 56%); }
	.js .livret.pret .ecrit { grid-row: 2; position: relative; padding: 1.1rem 1.2rem 1.4rem; border: 0; outline: 0; }
	.js .livret.pret .ecrit::before { display: none; }
	.js .livret.pret .ecrit .tarif { color: var(--or); }
	.js .livret.pret .ecrit .lien { border-color: var(--or); }
	.js .livret.pret .ecrit .enlumine { display: none; }
	.js .livret.pret .ecrit h3 { font-size: 2.1rem; }
}
@media (min-width: 800px) {
	.feuilles { grid-template-columns: repeat(4, 1fr); }
	.js .livret.pret .volume { width: min(58rem, 100%, 138vh); aspect-ratio: 8 / 5; filter: drop-shadow(0 1.6rem 2.4rem rgba(0, 0, 0, .55)); }
	/* la couverture et l'épaisseur des pages */
	.js .livret.pret .volume::before { content: ""; position: absolute; inset: -.7rem -.8rem; border-radius: .25rem; background: linear-gradient(to right, #3a1c2a, #2a121e 49.6%, #190a12 50%, #2a121e 50.4%, #3a1c2a); box-shadow: inset 0 0 0 1px var(--or-doux); }
	.js .livret.pret .volume::after { content: ""; position: absolute; top: .3rem; bottom: .3rem; left: -.3rem; right: -.3rem; z-index: 0; background: repeating-linear-gradient(to right, #e6dbc8 0 1px, #cfc2ac 1px 2px); }
	.js .livret.pret .premiere, .js .livret.pret .verso { display: block; }
	.js .livret.pret .premiere { position: absolute; inset: 0 50% 0 0; z-index: 1; overflow: hidden; background: var(--papier); }
	.js .livret.pret .feuilles { inset: 0 0 0 50%; z-index: 2; }
	.js .livret.pret .feuille.tournee { transform: rotateY(-180deg); opacity: 1; pointer-events: auto; }
	.js .livret.pret .image-etroite { display: none; }
	.js .livret.pret .recto { grid-template-rows: 1fr; box-shadow: none; background: linear-gradient(to right, rgba(70, 45, 25, .34), rgba(70, 45, 25, 0) 9%), radial-gradient(120% 90% at 58% 44%, #f0e6d2 52%, #d9c9aa); }
	.js .livret.pret .verso { position: absolute; inset: 0; overflow: hidden; background: var(--papier); transform: rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
	.js .livret.pret .verso::after, .js .livret.pret .premiere::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(20, 10, 5, .42), rgba(20, 10, 5, 0) 9%); pointer-events: none; }
	.js .livret.pret .verso img, .js .livret.pret .premiere img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
	.js .livret.pret .ecrit { margin: clamp(.8rem, 1.6vw, 1.3rem); padding: clamp(1rem, 2.4vw, 2.2rem); gap: clamp(.5rem, 1vw, .9rem); }
	.ecrit p { font-size: clamp(1rem, 1.3vw, 1.18rem); max-width: 25em; }
}
@media (min-width: 1240px) {
	.commandes-livret { display: contents; }
	.tourner { position: absolute; top: 38%; z-index: 4; width: 3.4rem; height: 3.4rem; border-radius: 50%; }
	.tourner[data-sens="-1"] { left: calc(50% - min(29rem, 69vh) - 5.2rem); }
	.tourner[data-sens="1"] { right: calc(50% - min(29rem, 69vh) - 5.2rem); }
}
html:not(.js) .premiere, html:not(.js) .verso { display: none; }
/* sans JavaScript, le lien d'un billet montre sa fiche */
html:not(.js) dialog.fiche:target { display: block; position: fixed; inset: 3vh 2vw; z-index: 50; width: auto; margin: 0; }
.prochaines { padding: clamp(4rem, 10vh, 6.5rem) var(--marge); }
.prochaines h2 { font-size: clamp(2.1rem, 3.8vw, 3.4rem); }
.studio-accueil { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: var(--souffle) var(--marge) 0; }
.photos-studio { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.35rem, .7vw, .6rem); }
.photos-studio img { width: 100%; }
.photos-studio img:first-child { grid-column: 1 / -1; }
.studio-accueil .texte { display: grid; gap: 1rem; justify-items: start; }
.studio-accueil .texte > p:not(.surtitre, .actions) { max-width: 36em; color: var(--sable); }
.studio-accueil strong { color: var(--ivoire); }
.studio-accueil address { font-style: normal; }
.studio-accueil address strong { font: 500 clamp(1.5rem, 2.4vw, 2.1rem)/1.2 var(--serif); }
@media (min-width: 900px) { .studio-accueil { grid-template-columns: 1fr 1fr; } }
.parole { padding: var(--souffle) var(--marge); text-align: center; }
.parole blockquote { margin: 0; display: grid; gap: .9rem; }
.parole p { max-width: 24em; margin-inline: auto; font: italic 400 clamp(1.6rem, 3vw, 2.7rem)/1.22 var(--serif); }
.parole cite { font: 400 1rem/1.3 var(--sans); color: var(--or); }

/* cartel : ce que comprend une séance, comme l'étiquette d'une œuvre */
.cartel { display: grid; gap: .65rem; margin: .4rem 0; padding: 1.1rem 0; border-block: 1px solid var(--filet); font-size: 1rem; line-height: 1.5; }
.cartel div { display: grid; grid-template-columns: 7em 1fr; gap: .8rem; align-items: baseline; }
.cartel dt { color: var(--sable); }
.cartel dd { margin: 0; }
.cartel .prix dd { font: 500 clamp(1.5rem, 2vw, 1.8rem)/1.15 var(--serif); color: var(--or); }

/* au téléphone, on les fait défiler du pouce ; à la souris, une barre fine, sinon rien n'atteint la fin de la bande */
.defile { display: grid; grid-auto-flow: column; gap: clamp(.7rem, 1.4vw, 1.2rem); margin-inline: calc(var(--marge) * -1); padding-inline: var(--marge); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--marge); }
@media (hover: none) {
	.defile { scrollbar-width: none; }
	.defile::-webkit-scrollbar { display: none; }
}
@media (hover: hover) { .defile { padding-bottom: .6rem; scrollbar-width: thin; scrollbar-color: var(--or) transparent; } }
.defile > * { scroll-snap-align: start; }

/* ── mariage : le sommaire de la journée ── */
.mot-mariage { padding: clamp(2rem, 6vh, 4rem) var(--marge) clamp(3.5rem, 8vh, 5.5rem); }
.mot-mariage p { max-width: 46em; margin-inline: auto; font: 400 clamp(1.3rem, 2vw, 1.75rem)/1.36 var(--serif); }
.sommaire-jour { padding: clamp(3rem, 8vh, 5rem) var(--marge) var(--souffle); }
.sommaire-jour .tete { justify-items: start; }
.livre-jour { display: grid; gap: clamp(1.5rem, 4vw, 4rem); }
.sommaire { margin: 0; padding: 0; list-style: none; }
.partie { display: grid; gap: .1rem; margin-top: 2rem; padding-bottom: .55rem; border-bottom: 1px solid var(--or-doux); font: italic 400 clamp(1.4rem, 1.9vw, 1.65rem)/1.2 var(--serif); color: var(--or); }
.partie:first-child { margin-top: 0; }
.partie span { font: 400 .94rem/1.3 var(--sans); color: var(--sable); }
.chapitre { border-bottom: 1px solid rgba(247, 242, 234, .1); transition: background .3s; }
.chapitre.actif { background: rgba(247, 242, 234, .045); }
.ligne { display: flex; align-items: center; gap: .55rem; padding-left: .35rem; }
.coche { position: relative; flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; cursor: pointer; }
.coche input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.coche span { display: block; width: 1.3rem; height: 1.3rem; border: 1px solid var(--or); transition: background .25s; }
.coche input:checked + span { background: var(--or); box-shadow: inset 0 0 0 3px var(--noir); }
.coche input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 3px; }
.coche.marque { cursor: default; }
.coche.marque span { width: .55rem; height: .55rem; border: 0; background: var(--or); transform: rotate(45deg); }
.titre { display: flex; flex: 1; align-items: baseline; gap: .55rem; min-width: 0; padding: .72rem .5rem .72rem 0; border: 0; background: none; cursor: pointer; text-align: left; }
.titre .nom { font: 500 clamp(1.28rem, 1.75vw, 1.55rem)/1.2 var(--serif); transition: color .25s; }
.titre .points { flex: 1; min-width: 1rem; border-bottom: 1px dotted rgba(247, 242, 234, .32); transform: translateY(-.25em); }
.titre .prix { font-size: .98rem; white-space: nowrap; color: var(--sable); transition: color .25s; }
@media (max-width: 440px) { .titre .prix { max-width: 6.5em; white-space: normal; text-align: right; } }
.option .titre .prix { color: var(--or); }
.chapitre.actif .nom, .titre:hover .nom { color: var(--or); }
.option:has(input:checked) .nom { color: var(--or); }
.page { display: none; gap: 1rem; padding: .4rem .6rem 1.4rem; }
.chapitre.actif .page { display: grid; animation: apparition .45s ease both; }
html:not(.js) .page { display: grid; }
.page img { width: 100%; max-height: 62vh; object-fit: contain; }
.page h3 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); margin-bottom: .45rem; }
.page p { color: var(--sable); }
.page .actions { margin-top: 1rem; }
.mention { font: italic 400 1.2rem/1.2 var(--serif); color: var(--or); }
.pile { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pile img { width: 100%; max-height: none; aspect-ratio: 2 / 3; object-fit: cover; }
.heures { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .3rem .6rem 1rem 3.1rem; color: var(--sable); }
.heures[hidden] { display: none; }
.heures small { display: block; color: var(--or); font-size: .92rem; }
.pas { display: inline-flex; align-items: center; gap: .3rem; }
.pas button { width: 2.5rem; height: 2.5rem; border: 1px solid var(--or-doux); background: none; cursor: pointer; font: 400 1.3rem/1 var(--sans); }
.pas button:hover { background: rgba(227, 184, 87, .18); }
.pas output { min-width: 2.6rem; text-align: center; color: var(--ivoire); }
.cote { display: grid; gap: .8rem; align-content: start; }
.scene, .resume { display: none; }
.colophon { display: grid; gap: 1.1rem clamp(2rem, 4vw, 4rem); margin-top: clamp(2rem, 6vh, 3.5rem); padding: clamp(2.6rem, 4vw, 3.4rem) clamp(1.8rem, 4vw, 3.6rem); background: var(--nuit); scroll-margin-top: 6rem; }
.suite-colophon { display: grid; gap: 1rem; align-content: center; }
.titre-colophon { font: italic 400 1.35rem/1.2 var(--serif); color: var(--or); }
.montant { font: 500 clamp(2.5rem, 4vw, 3.6rem)/1 var(--serif); }
.detail { display: grid; gap: .22rem; align-content: center; margin: 0; padding: .7rem 0; border-block: 1px solid var(--filet); list-style: none; font-size: .96rem; }
.detail li { display: flex; justify-content: space-between; gap: 1rem; }
.detail li span:last-child { white-space: nowrap; color: var(--sable); }
.total-tel { position: fixed; inset: auto .75rem calc(.7rem + env(safe-area-inset-bottom)); z-index: 26; display: flex; align-items: baseline; justify-content: space-between; padding: .8rem 1.1rem; background: var(--or); color: var(--encre); box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .45); transform: translateY(calc(100% + 1.5rem)); transition: transform .4s var(--souple); }
.total-tel span { font-weight: 500; }
.total-tel .total { font: 500 1.5rem/1 var(--serif); }
.total-tel.visible { transform: none; }
.dans-sommaire .reserver-tel, .dans-sommaire .reserver-tel.visible { transform: translateY(calc(100% + 1.5rem)); }
@media (min-width: 1000px) {
	.livre-jour { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
	.js .page { display: none !important; }
	.cote { position: sticky; top: 5.2rem; }
	.scene { display: block; min-height: 30rem; }
	.js .scene .page { display: grid !important; gap: .9rem; padding: 0; animation: apparition .45s ease both; }
	.scene .page img { height: min(54vh, 100vh - 25rem); max-height: none; width: 100%; object-fit: contain; object-position: 0 50%; }
	.scene .pile { height: min(54vh, 100vh - 25rem); align-items: center; padding: 0 1.5rem 0 .5rem; }
	.scene .page .pile img { width: 118%; max-width: none; height: auto; max-height: none; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 30%; }
	.scene .actions { margin-top: .6rem; }
	.resume { display: flex; align-items: baseline; justify-content: space-between; padding: .6rem 0 0; border-top: 1px solid var(--or-doux); }
	.resume span { font: italic 400 1.25rem/1.2 var(--serif); color: var(--or); }
	.resume .total { font: 500 1.8rem/1 var(--serif); color: var(--ivoire); }
	.total-tel { display: none; }
	.colophon { grid-template-columns: auto 1fr 1.1fr; }
	.colophon .detail { border-block: 0; padding: 0; }
}
.projet { width: min(46rem, 94vw); max-height: 92dvh; padding: 0; border: 0; background: var(--nuit); color: var(--ivoire); }
.projet::backdrop { background: rgba(10, 6, 8, .78); }
.projet form { display: grid; gap: 1rem; padding: clamp(2rem, 5vw, 3.2rem); }
.projet .fermer { position: sticky; top: .4rem; z-index: 2; justify-self: end; padding: .4rem .7rem; border: 0; background: var(--nuit); cursor: pointer; font: 500 1rem/1 var(--sans); }
.projet h2 { font-size: clamp(2rem, 4vw, 3rem); }
.champs { display: grid; gap: .8rem 1.1rem; }
@media (min-width: 620px) { .champs { grid-template-columns: 1fr 1fr; } }
form label { display: grid; gap: .3rem; font-size: .98rem; color: var(--sable); }
form input:not([type="checkbox"], [type="radio"]), form textarea { width: 100%; padding: .72rem .8rem; border: 1px solid var(--filet); background: rgba(247, 242, 234, .05); color: var(--ivoire); font: 400 1.02rem/1.4 var(--sans); }
form input:focus, form textarea:focus { outline: 2px solid var(--or); outline-offset: 1px; }

/* la borne */
.borne-photo { display: grid; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); padding: var(--souffle) var(--marge); }
.borne-photo figure { overflow: hidden; }
.borne-photo figure img { width: 100%; }
.borne-photo .texte { display: grid; gap: 1rem; justify-items: start; }
.borne-photo .cartel { width: 100%; }
.borne-photo .cartel dd { font: 500 1.3rem/1.2 var(--serif); color: var(--or); }
.borne-photo .cartel small { display: block; font: 400 .92rem/1.3 var(--sans); color: var(--sable); }
.atouts { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.atouts li { padding: .6rem 0; border-bottom: 1px solid var(--filet); line-height: 1.38; }
@media (min-width: 900px) { .borne-photo { grid-template-columns: 1.1fr 1fr; } }

/* le livre d'or */
.livre { padding: var(--souffle) var(--marge) clamp(3rem, 8vh, 5rem); }
.livre h2 { margin-bottom: clamp(2.2rem, 6vh, 4rem); }
.avis { display: grid; gap: 2rem clamp(2rem, 4vw, 4rem); }
.avis blockquote { margin: 0; display: grid; gap: .6rem; align-content: start; padding-top: 1rem; border-top: 1px solid var(--filet); }
.avis blockquote p { font: italic 400 clamp(1.22rem, 1.6vw, 1.42rem)/1.34 var(--serif); }
.avis cite { font: 400 .95rem/1.3 var(--sans); color: var(--or); }
.avis .grand { padding-top: 0; border-top: 0; }
.avis .grand p { font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.22; }
@media (min-width: 800px) {
	.avis { grid-template-columns: 1fr 1fr; }
	.avis .grand { grid-column: 1 / -1; max-width: 62rem; }
}
@media (min-width: 1200px) {
	.avis { grid-template-columns: 1.7fr 1fr 1fr; }
	.avis .grand { grid-column: 1; grid-row: 1 / span 2; }
}

/* vos questions */
.questions { display: grid; gap: 1.5rem clamp(2rem, 5vw, 5rem); padding: var(--souffle) var(--marge); }
.questions details { border-top: 1px solid var(--filet); }
.questions details:last-child { border-bottom: 1px solid var(--filet); }
.questions summary { position: relative; padding: 1.05rem 2.4rem 1.05rem 0; cursor: pointer; list-style: none; font: 500 clamp(1.3rem, 1.8vw, 1.6rem)/1.25 var(--serif); transition: color .3s; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; position: absolute; right: .2rem; top: .85rem; font: 400 1.7rem/1.2 var(--sans); color: var(--or); }
.questions details[open] summary::after { content: "–"; }
.questions summary:hover { color: var(--or); }
.questions details p { max-width: 42em; padding-bottom: 1.3rem; color: var(--sable); }
@media (min-width: 900px) { .questions { grid-template-columns: 1fr 2fr; } }

/* ── portrait d'art ── */
.possible { display: grid; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; padding: clamp(2.5rem, 7vh, 5rem) var(--marge) var(--souffle); }
.possible .texte { display: grid; gap: 1.15rem; justify-items: start; }
.possible h2 { font-size: clamp(2.5rem, 5.2vw, 4.8rem); }
.role-courant { display: block; font-style: italic; font-weight: 400; color: var(--or); }
.role-courant.change { animation: montee .7s var(--souple) both; }
.question { font: 400 clamp(1.3rem, 1.9vw, 1.65rem)/1.3 var(--serif); }
.choix-roles { display: flex; flex-wrap: wrap; gap: .3rem .4rem; }
.choix-roles button { padding: .45rem .95rem; border: 1px solid var(--filet); border-radius: 2rem; background: none; cursor: pointer; font: 500 .98rem/1.1 var(--sans); transition: background .3s, color .3s, border-color .3s; }
.choix-roles button:hover { border-color: var(--or); color: var(--or); }
.choix-roles button[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: var(--encre); }
.images-roles { position: relative; justify-self: center; width: min(100%, 50vh); aspect-ratio: 2 / 3; box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, .5); }
.role-image { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1s ease; }
.role-image.vu { opacity: 1; }
.role-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
html:not(.js) .role-image:not(.vu) { display: none; }
@media (min-width: 900px) {
	.possible { grid-template-columns: 1.15fr 1fr; }
	.possible .texte { justify-items: end; text-align: right; }
	.choix-roles { justify-content: flex-end; }
}
.collection { padding: clamp(3rem, 8vh, 5.5rem) var(--marge) var(--souffle); }
.rangee-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; max-width: none; }
.filtres { display: flex; flex-wrap: wrap; gap: .35rem .45rem; }
.filtres button { padding: .5rem .95rem; border: 1px solid var(--filet); background: none; cursor: pointer; font: 500 .98rem/1.1 var(--sans); transition: background .3s, color .3s, border-color .3s; }
.filtres button:hover { border-color: var(--or); }
.filtres button[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: var(--encre); }
/* les murs de tableaux : un accrochage par catégorie, sur un morceau de ses toiles, dans des cadres baroques tous différents */
.mosaique { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.js .mosaique { position: relative; isolation: isolate; container-type: size; flex-wrap: nowrap; align-items: center; justify-content: safe center; gap: clamp(.5rem, 1vw, 1rem); height: clamp(26rem, 76vh, 44rem); padding: 0 clamp(.8rem, 1.6vw, 1.6rem); background: var(--mur-fond, #2a1a12) center / cover; box-shadow: inset 0 0 0 1px var(--or-doux); }
.js .mosaique::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 72% 62% at 50% 16%, rgba(255, 226, 170, .22), rgba(10, 6, 4, .4) 80%); pointer-events: none; }
.colonne-mur { display: flex; flex: none; flex-direction: column; align-items: center; gap: 2cqh; }
.encadre { --u: .3rem; --t: 62; --e: calc(var(--t) * var(--u) * .024); position: relative; flex: none; height: calc(var(--t) * var(--u)); aspect-ratio: 720 / 998; padding: 0; border: 0; background: var(--mat, #e9dfcc); cursor: zoom-in; filter: drop-shadow(0 .5rem .8rem rgba(0, 0, 0, .55)); transition: transform .4s var(--souple), filter .4s; }
.encadre.large { --t: 34; aspect-ratio: 998 / 720; }
.js .encadre { --u: min(1cqh, .478cqw); }
.encadre[data-taille="grand"] { --t: 74; }
.encadre[data-taille="moyen"] { --t: 56; }
.encadre[data-taille="petit"] { --t: 34; }
.encadre.large[data-taille] { --t: 25; }
.encadre.large[data-taille="grand"] { --t: 42; }
.encadre img { position: absolute; left: 11.53%; top: 8.32%; width: 76.94%; height: 83.36%; object-fit: cover; object-position: 50% 15%; background: #150d08; box-shadow: 0 0 0 1px rgba(40, 26, 14, .4); }
.encadre.large img { left: 8.32%; top: 11.53%; width: 83.36%; height: 76.94%; object-position: 50% 50%; }
/* quatre baguettes en onglet : le haut prend la lumière, le bas reste dans l'ombre */
.cadre { position: absolute; inset: 0; border: var(--e) solid; border-color: var(--b1, #3b3432) var(--b2, #141110) var(--b3, #0b0908) var(--b4, #262120); pointer-events: none; }
.cadre::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--liseré, rgba(0, 0, 0, .4)); }
.encadre[data-cadre="noyer"] { --b1: #7a5636; --b2: #4a2f1b; --b3: #38230f; --b4: #5f4128; }
.encadre[data-cadre="or"] { --e: calc(var(--t) * var(--u) * .016); --b1: #cdb077; --b2: #8b6d39; --b3: #75592c; --b4: #ad8f57; --mat: #1c1216; }
.encadre[data-cadre="noir"] { --e: calc(var(--t) * var(--u) * .046); --b1: #242020; --b2: #0e0c0b; --b3: #080706; --b4: #181514; --mat: #0f0c0b; --liseré: rgba(227, 184, 87, .75); }
.encadre[data-cadre="chene"] { --b1: #b08d5e; --b2: #775a35; --b3: #624a2b; --b4: #94754a; }
/* la photo sur laquelle on passe s'approche, au-dessus des autres */
@media (hover: hover) {
	.encadre:hover, .encadre:focus-visible { z-index: 6; transform: scale(1.42); filter: drop-shadow(0 1.2rem 2rem rgba(0, 0, 0, .75)); }
	.encadre[data-taille="grand"]:hover, .encadre[data-taille="grand"]:focus-visible { transform: scale(1.22); }
	.encadre[data-taille="petit"]:hover, .encadre[data-taille="petit"]:focus-visible { transform: scale(1.75); }
}
.js .mosaique[data-mur="vedette"] { --mur-fond: url(photos/toile-ambre-1600.webp); }
.js .mosaique[data-mur="epoque"] { --mur-fond: url(photos/toile-brun-1600.webp); }
.js .mosaique[data-mur="fantasy"] { --mur-fond: url(photos/toile-nuit-1600.webp); }
.js .mosaique[data-mur="boudoir"] { --mur-fond: url(photos/toile-rouille-1600.webp); }
.js .mosaique[data-mur="mode"] { --mur-fond: url(photos/toile-cuivre-1600.webp); }
/* debout, le mur se parcourt du doigt */
@media (max-width: 899px) {
	.js .mosaique { justify-content: flex-start; height: min(72svh, 36rem); overflow-x: auto; scrollbar-width: none; }
	.js .encadre { --u: 1cqh; }
}
.suite-galerie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 2rem; margin-top: 1.3rem; }
.suite-galerie [hidden] { display: none; }
/* les essais à comparer : à retirer quand elle aura choisi */
.chapitres { padding: var(--souffle) var(--marge); }
.chapitres ol { grid-auto-columns: min(70vw, 20rem); list-style: none; margin-block: 0; }
.chapitres li { display: grid; gap: .55rem; align-content: start; justify-items: start; }
.chapitres figure { width: 100%; aspect-ratio: 2 / 3; overflow: hidden; margin-bottom: .45rem; background: rgba(5, 8, 12, .4); }
.chapitres figure img { width: 100%; height: 100%; object-fit: cover; }
.chapitres h3 { font-size: clamp(1.4rem, 1.65vw, 1.6rem); line-height: 1.12; }
.chapitres li p { font-size: .98rem; line-height: 1.5; }
@media (min-width: 1400px) {
	.chapitres ol { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); margin-inline: 0; padding-inline: 0; overflow: visible; }
}
.frais { display: grid; gap: clamp(2rem, 5vw, 5rem); padding: var(--souffle) var(--marge); align-items: start; }
.cartouche { display: grid; gap: .9rem; justify-items: center; padding: clamp(3rem, 6vw, 5rem) clamp(1.6rem, 4vw, 3.5rem); background: var(--nuit); text-align: center; }
.grand-prix { font: 500 clamp(4rem, 8vw, 6.6rem)/1 var(--serif); color: var(--ivoire); }
.grand-prix sup { font-size: .45em; color: var(--or); }
.comprend { display: grid; gap: 1rem; }
.comprend h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.comprend h3 { margin-top: .5rem; font: italic 400 clamp(1.45rem, 2vw, 1.75rem)/1.2 var(--serif); color: var(--or); }
.icones { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.icones li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--filet); line-height: 1.35; }
.icone { flex: none; width: 1.55rem; height: 1.55rem; fill: none; stroke: var(--or); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bloc-options { display: grid; gap: .55rem; padding: 1rem 1.2rem; border: 1px solid var(--or-doux); }
.options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .1rem 1.4rem; border: 0; }
.options li { padding: .22rem 0; border: 0; color: var(--sable); }
.options .icone { width: 1.3rem; height: 1.3rem; }
.note-frais { max-width: 46rem; margin: clamp(1.4rem, 3vh, 2rem) auto 0; font-size: .92rem; }
.important { padding: 1rem 1.2rem; border-left: 2px solid var(--or); background: rgba(247, 242, 234, .045); line-height: 1.5; }
@media (min-width: 900px) {
	.frais { grid-template-columns: 1fr 1.15fr; }
	.cartouche { position: sticky; top: 6rem; }
}
.supports { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: var(--souffle) var(--marge); }
.supports .texte { display: grid; gap: 1rem; justify-items: start; }
.choix-format { display: flex; flex-wrap: wrap; gap: .4rem; }
.choix-format button { padding: .6rem 1rem; border: 1px solid var(--or-doux); background: none; cursor: pointer; font: 500 1rem/1.1 var(--sans); transition: background .3s, color .3s; }
.choix-format button:hover { background: rgba(227, 184, 87, .16); }
.choix-format button[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: var(--encre); }
.choix-titre { font: italic 400 1.2rem/1.2 var(--serif); color: var(--or); }
.supports .petit a { color: var(--ivoire); border-bottom: 1px solid var(--or); cursor: pointer; }
.mur-essai { position: relative; isolation: isolate; aspect-ratio: 8 / 5; overflow: hidden; background: #2a1a12 url(photos/toile-brun-1600.webp) center / cover; box-shadow: 0 0 0 1px var(--or-doux), 0 1.2rem 2.6rem rgba(0, 0, 0, .5); }
.mur-essai::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 58% at 50% 26%, rgba(255, 224, 168, .22), rgba(12, 7, 4, .5) 82%); }
.mur-salon { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.mur-salon .lampe, .mur-salon .plante { transition: opacity .5s; }
.sans-lampe .lampe, .sans-plante .plante { opacity: 0; }
/* tout est en pourcentages du mur de 400 × 250 cm, calculés par la composition */
.tableau { position: absolute; left: 42.5%; top: 25.2%; width: 15%; aspect-ratio: 2 / 3; overflow: hidden; background: #150d08; outline: 2px solid #0f0906; box-shadow: .25rem .55rem 1.1rem rgba(0, 0, 0, .62); transition: left .6s var(--souple), top .6s var(--souple), width .6s var(--souple), height .6s var(--souple), opacity .35s; }
.tableau.absent { opacity: 0; pointer-events: none; }
.tableau img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .supports { grid-template-columns: 1fr 1.2fr; } }
/* ── Éphémères ── */
.tete-concept { padding-top: clamp(6.5rem, 15vh, 9rem); }
.tete-concept .tete { justify-items: start; max-width: 60rem; }
.tete-concept h1 { font-size: clamp(2.8rem, 5.6vw, 5.6rem); }
.fil-idee h2 { font-size: clamp(1.45rem, 2vw, 1.8rem); }
.editions { padding: var(--souffle) var(--marge); }
.editions .tete { justify-items: start; }
/* les billets : une double page d'un livre de contes, sur papier teinté, droite ; l'affiche à gauche, le chapitre et son début en regard */
.billets { display: grid; gap: clamp(1.2rem, 2.4vw, 2.2rem); max-width: 92rem; margin-inline: auto; }
.billet { display: block; filter: drop-shadow(0 .8rem 1.2rem rgba(0, 0, 0, .5)); transition: transform .5s var(--souple); }
.billet:hover, .billet:focus-visible { transform: translateY(-.3rem); }
.papier { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); height: 100%; padding: .55rem; color: var(--ivoire); background: linear-gradient(to right, transparent 43%, rgba(0, 0, 0, .46) 45%, rgba(255, 240, 210, .08) 45.6%, transparent 51%), var(--teinte); box-shadow: inset 0 0 0 1px var(--or-doux), inset 0 0 0 6px var(--teinte), inset 0 0 0 7px rgba(227, 184, 87, .26); }
.fenetre { display: block; align-self: center; margin: .6rem; overflow: hidden; box-shadow: 0 0 0 1px var(--or-doux); }
.fenetre img { width: 100%; height: auto; }
.numero { font: italic 400 1.2rem/1.2 var(--serif); color: var(--or); }
.billet-corps { display: grid; gap: .3rem; align-content: center; justify-items: center; padding: 1rem .9rem; text-align: center; }
.billet-corps small { font-size: .92rem; color: var(--sable); }
.billet-corps strong { font: 500 clamp(1.7rem, 2.5vw, 2.5rem)/1.08 var(--serif); }
.billet-corps time { font: italic 400 1.22rem/1.25 var(--serif); color: var(--or); }
.extrait { margin-block: .15rem; font: italic 400 clamp(1.02rem, 1.2vw, 1.14rem)/1.32 var(--serif); }
/* l'invitation à ouvrir : un bouton qui s'anime tout seul, de temps en temps */
.ouvrir-conte { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .5rem; margin-top: .45rem; padding: .62rem 1.05rem; background: var(--or); color: var(--encre); font: 500 .98rem/1 var(--sans); transition: background .3s; }
.ouvrir-conte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); transform: translateX(-120%); animation: lueur 4s ease-in-out infinite; }
@keyframes lueur { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.ouvrir-conte i { font-style: normal; transition: transform .35s var(--souple); }
.billet:hover .ouvrir-conte, .billet:focus-visible .ouvrir-conte { background: #f6d68c; }
.billet:hover .ouvrir-conte i, .billet:focus-visible .ouvrir-conte i { transform: translateX(.35rem); }
@media (min-width: 900px) { .billets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 519px) {
	.papier { grid-template-columns: 1fr; background: var(--teinte); }
}
/* l'accueil : les trois prochaines sur une même ligne */
.prochaines .billet:nth-child(n + 4) { display: none; }
@media (min-width: 1100px) {
	.prochaines .billets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.prochaines .billet-corps { padding: .7rem .5rem; }
	.prochaines .billet-corps strong { font-size: clamp(1.45rem, 1.9vw, 1.9rem); }
	.prochaines .extrait { font-size: 1rem; }
}
/* la fiche : la date bien en vue */
.resa-fiche { display: grid; gap: .7rem; margin-top: .4rem; padding-top: 1rem; border-top: 1px solid var(--or-doux); scroll-margin-top: 1rem; }
.resa-fiche .cadre-module { margin: 0; }
.theme-resa { margin-top: .5rem; font: italic 400 clamp(1.15rem, 1.6vw, 1.35rem)/1.25 var(--serif); color: var(--or); }
.feuillet header .actions { margin-top: .7rem; }
.date-fiche { margin-top: .35rem; font: 500 clamp(1.6rem, 3vw, 2.4rem)/1.15 var(--serif); color: var(--or); }
/* les grands bandeaux : toute la largeur, des photos entières en fond, une seule invitation */
.bandeau-ephemeres, .appel-collections { position: relative; display: grid; min-height: clamp(12rem, 28vh, 17rem); overflow: hidden; border-block: 1px solid var(--or-doux); }
.images-bandeau { position: absolute; inset: 0; display: flex; }
.images-bandeau img { flex: 1 1 0; min-width: 0; width: auto; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1s var(--souple); }
.texte-bandeau { position: relative; display: grid; gap: .25rem; justify-items: center; align-content: center; padding: 2rem var(--marge); background: rgba(14, 8, 10, .62); text-align: center; transition: background .5s; }
.texte-bandeau small { font: italic 400 clamp(1.15rem, 1.6vw, 1.4rem)/1.25 var(--serif); color: var(--or); }
.texte-bandeau strong { font: 500 clamp(2rem, 4.4vw, 3.8rem)/1.08 var(--serif); }
.sous-bandeau { max-width: 44em; color: var(--ivoire); }
.texte-bandeau .bouton { margin-top: .7rem; }
.texte-bandeau i { font-style: normal; font-size: 2rem; line-height: 1; color: var(--or); transition: transform .4s var(--souple); }
.bandeau-ephemeres:hover .texte-bandeau, .appel-collections:hover .texte-bandeau, .bandeau-ephemeres:focus-visible .texte-bandeau, .appel-collections:focus-visible .texte-bandeau { background: rgba(14, 8, 10, .42); }
.bandeau-ephemeres:hover img, .appel-collections:hover img { transform: scale(1.05); }
.bandeau-ephemeres:hover i, .appel-collections:hover i { transform: translateX(.6rem); }
.cadeau-accueil { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 2.2rem; padding: clamp(2rem, 5vh, 3rem) var(--marge); text-align: center; }
.cadeau-accueil p:first-child { font: italic 400 clamp(1.4rem, 2.2vw, 1.9rem)/1.2 var(--serif); }
/* le ciel de 2027 : chaque édition est une étoile, un mot-clé dessine sa constellation */
/* le livre de l'année, ouvert à sa table des matières : chaque ligne tourne les pages jusqu'à son conte */
.livre-eph { padding: var(--souffle) var(--marge); }
.livre-eph .tete { justify-items: start; }
.mots-cles { display: flex; flex-wrap: wrap; gap: .35rem .4rem; margin-bottom: clamp(1.8rem, 5vh, 3rem); }
.mots-cles button { padding: .45rem .95rem; border: 1px solid var(--filet); border-radius: 2rem; background: rgba(10, 6, 12, .35); cursor: pointer; font: 500 .94rem/1.15 var(--sans); color: var(--sable); transition: background .3s, color .3s, border-color .3s; }
.mots-cles button:hover { border-color: var(--or); color: var(--or); }
.mots-cles button[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: var(--encre); }
.note-ciel { margin-top: 1.6rem; text-align: center; }
.livre-annee { margin-top: .4rem; }
.livre-annee .numero { font: italic 400 clamp(1.15rem, 1.5vw, 1.35rem)/1.2 var(--serif); color: #7c5716; }
.livre-annee .ecrit h3 { font: 400 clamp(2rem, 3.3vw, 3.1rem)/1.08 "Fondamento", var(--serif); }
.livre-annee .date-livre { font: italic 400 clamp(1.2rem, 1.7vw, 1.5rem)/1.2 var(--serif); color: #7c5716; }
.livre-annee .actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .7rem 1.2rem; margin-top: .3rem; }
/* 2027 : la réservation n'est pas ouverte, le bouton le dit et n'ouvre rien */
.bouton.bientot { background: none; border: 1px solid #a37720; color: #6b4a12; cursor: default; font-style: italic; }
.bouton.bientot:hover { background: none; transform: none; }
.sommaire .ecrit { justify-items: stretch; text-align: left; }
.sommaire .ecrit h3 { margin-bottom: .2rem; text-align: center; font-size: clamp(1.7rem, 2.6vw, 2.5rem); }
.table-contes { display: grid; margin: 0; padding: 0; list-style: none; }
.ligne-table { display: flex; align-items: baseline; gap: .5rem; padding: clamp(.16rem, .55vh, .42rem) .15rem; transition: color .25s, opacity .3s; }
.ligne-table .icone { flex: none; align-self: center; width: 1.3rem; height: 1.3rem; stroke: #7c5716; stroke-width: 1.3; }
.t-titre { font: 400 clamp(1.1rem, 1.45vw, 1.34rem)/1.15 "Fondamento", var(--serif); }
.t-points { flex: 1; min-width: .8rem; border-bottom: 1px dotted currentColor; opacity: .45; }
.t-mois { flex: none; font: italic 400 clamp(.98rem, 1.2vw, 1.12rem)/1 var(--serif); color: #7c5716; }
.ligne-table:hover, .ligne-table:focus-visible { color: #7c5716; }
.table-contes.filtre .ligne-table:not(.allume) { opacity: .4; }
.ligne-table.allume .t-titre { color: #8a1f24; }
/* à gauche, en attendant ses vraies images : son titre, son emblème et sa date, sur un fond à sa couleur */
.js .livret.pret .verso.affiche-simulee { background: radial-gradient(85% 62% at 50% 44%, rgba(255, 240, 210, .1), rgba(0, 0, 0, .32)), var(--teinte); }
.cartouche-affiche { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; gap: .3rem; padding: clamp(1.5rem, 2.8vw, 2.5rem) clamp(1.1rem, 2.2vw, 2rem); outline: 1px solid rgba(227, 184, 87, .6); outline-offset: -.7rem; text-align: center; }
.cartouche-affiche .centre-affiche { display: grid; justify-items: center; gap: clamp(.8rem, 1.6vw, 1.5rem); }
.cartouche-affiche .icone { width: clamp(4.5rem, 9vw, 8rem); height: clamp(4.5rem, 9vw, 8rem); stroke: #f6dc9c; stroke-width: .5; }
.cartouche-affiche small { font: italic 400 clamp(1.05rem, 1.4vw, 1.25rem)/1.2 var(--serif); color: var(--or); }
.cartouche-affiche b { font: 400 clamp(2.1rem, 3.5vw, 3.3rem)/1.05 "Fondamento", var(--serif); color: #f6dc9c; }
/* sur téléphone, une seule page : le conte tient sur son fond, avec son emblème */
.icone-conte { display: none; }
@media (max-width: 799px) {
	.js .livre-annee.pret .conte-annee .recto { grid-template-rows: 1fr; background: radial-gradient(90% 60% at 50% 42%, rgba(0, 0, 0, .12), rgba(0, 0, 0, .38)), var(--teinte); }
	.js .livre-annee.pret .conte-annee .ecrit { grid-row: 1; align-content: center; margin: .7rem; padding: 1rem; outline: 1px solid rgba(227, 184, 87, .6); }
	.js .livre-annee.pret .bouton.bientot { border-color: var(--or); color: var(--or); }
	.js .livre-annee.pret .icone-conte { display: block; width: 4.6rem; height: 4.6rem; margin-bottom: .4rem; stroke: #f6dc9c; stroke-width: .55; }
}
/* la page de garde, à gauche de la table des matières */
.js .livre-annee.pret .garde-annee { display: none; }
@media (min-width: 800px) {
	.js .livre-annee.pret .volume { width: min(72rem, 100%, 128vh); }
	.js .livre-annee.pret .ecrit { height: 100%; margin: 0; padding: clamp(1.2rem, 3vw, 2.8rem); overflow: auto; align-content: safe center; }
	.js .livre-annee.pret .garde-annee { display: grid; place-content: center; justify-items: center; gap: .7rem; background: #1a0f15; text-align: center; }
	.js .livre-annee.pret .garde-annee::before { content: ""; position: absolute; inset: clamp(.7rem, 1.2vw, 1.1rem); border: 1px solid rgba(227, 184, 87, .5); pointer-events: none; }
	.garde-annee .fleuron { width: min(70%, 20rem); margin-bottom: .6rem; }
	.titre-livre { font: 400 clamp(2.6rem, 4.6vw, 4.4rem)/1.05 "Fondamento", var(--serif); color: #f6dc9c; }
	.annee-livre { font: italic 400 clamp(1.6rem, 2.6vw, 2.5rem)/1 var(--serif); color: var(--or); }
}
/* tablette debout : le livre est étroit, la table des matières se resserre pour tenir sur sa page */
@media (min-width: 800px) and (max-width: 1000px) {
	.js .livre-annee.pret .sommaire .ecrit { padding: .9rem 1.2rem; }
	.sommaire .ecrit h3 { margin: 0; font-size: 1.5rem; }
	.ligne-table { padding-block: .09rem; }
	.t-titre { font-size: 1.04rem; }
	.t-mois { font-size: .92rem; }
	.ligne-table .icone { width: 1.1rem; height: 1.1rem; }
}
@media (min-width: 1240px) {
	.livre-annee .tourner[data-sens="-1"] { left: max(.2rem, calc(50% - min(36rem, 64vh) - 4.6rem)); }
	.livre-annee .tourner[data-sens="1"] { right: max(.2rem, calc(50% - min(36rem, 64vh) - 4.6rem)); }
}
/* debout : une page à la fois, la table des matières sur fond sombre */
@media (max-width: 799px) {
	.js .livre-annee.pret .volume { aspect-ratio: 4 / 6.6; }
	.sommaire .ecrit { grid-row: 1 / -1; align-content: center; }
	.js .livre-annee.pret .sommaire .ecrit { grid-row: 1 / -1; }
	.ligne-table .icone { stroke: var(--or); }
	.t-mois { color: var(--or); }
	.ligne-table:hover, .ligne-table:focus-visible, .ligne-table.allume .t-titre { color: var(--or); }
	.livre-annee .numero, .livre-annee .date-livre { color: var(--or); }
}
/* les tarifs : la séance, et l'abonnement bien en vue, avec son cadeau */
.tarifs-eph { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); padding: clamp(3rem, 8vh, 5rem) var(--marge) var(--souffle); }
.tarifs-eph article { display: grid; gap: .7rem; align-content: center; justify-items: center; padding: clamp(2.4rem, 4vw, 3.6rem) clamp(1.6rem, 3.4vw, 3rem); background: var(--nuit); text-align: center; }
.tarifs-eph .grand-prix { font-size: clamp(3.4rem, 6vw, 5rem); }
.tarifs-eph .abonnement { justify-items: start; background: radial-gradient(120% 120% at 15% 0, rgba(227, 184, 87, .16), transparent 60%), #2e1524; text-align: left; }
.abonnement h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.meme-tarif { font: italic 400 clamp(1.2rem, 1.7vw, 1.4rem)/1.3 var(--serif); }
.avantages { display: grid; gap: 1rem; margin: .5rem 0; padding: 0; list-style: none; }
.avantages li { display: flex; align-items: flex-start; gap: 1rem; }
.avantages .icone { width: 2.4rem; height: 2.4rem; }
.avantages strong { display: block; font: 500 clamp(1.3rem, 1.8vw, 1.6rem)/1.15 var(--serif); color: var(--or); }
@media (min-width: 900px) { .tarifs-eph { grid-template-columns: 1fr 1fr; } }
.concept { padding-inline: var(--marge); padding-bottom: clamp(3rem, 8vh, 5rem); }
.fil-idee { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem clamp(.7rem, 1.6vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.fil-idee li { display: grid; gap: .5rem; align-content: start; justify-items: start; }
.fil-idee figure { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.fil-idee img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.fil-idee h3 { font-size: clamp(1.45rem, 2vw, 1.8rem); }
.fil-idee p { font-size: .98rem; line-height: 1.45; }
/* sur téléphone, la légende, sa seule photo couchée, reste centrée sur le cadre ; sur ordinateur, ses quatre images entières et à la même hauteur (2:3 et 3:2), rien n'est recadré */
.fil-idee li:last-child img { object-position: 37% 50%; }
@media (min-width: 1000px) {
	.fil-idee { grid-template-columns: repeat(3, 2fr) 4.5fr; }
	.fil-idee figure { aspect-ratio: 2 / 3; }
	.fil-idee li:last-child figure { aspect-ratio: 3 / 2; }
	.fil-idee li:last-child img { object-position: 50% 50%; }
}
/* les archives : le système de la bibliothèque, une étagère par année */
.repertoire { padding: var(--souffle) var(--marge); }
.etageres { display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(.6rem, 1.4vw, 1.2rem) clamp(.6rem, 1.4vw, 1.2rem) .2rem; background: linear-gradient(to bottom, #2c1a0f, #1b0f08); box-shadow: inset 0 0 0 1px rgba(236, 189, 107, .22), 0 1.4rem 3rem rgba(0, 0, 0, .6); }
.rayon-cadre { position: relative; }
.rayon-dos { display: flex; align-items: flex-end; justify-content: safe center; gap: .16rem; height: clamp(15rem, 36vh, 20rem); margin: 0; padding: 1.5rem .55rem 0; overflow-x: auto; list-style: none; background: radial-gradient(ellipse at 50% 0, rgba(255, 214, 150, .14), transparent 70%), #110804; border-bottom: .75rem solid #3d2615; box-shadow: inset 0 .7rem 1.2rem rgba(0, 0, 0, .75); scrollbar-width: thin; scrollbar-color: var(--or) transparent; }
.rayon-dos li { flex: none; width: calc(var(--l) * 1.2); height: var(--h); }
.edition-passee { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 100%; height: 100%; padding: .85rem .2rem .8rem; overflow: hidden; color: #f2cf80; cursor: pointer; background: linear-gradient(to right, rgba(0, 0, 0, .58), rgba(255, 255, 255, .14) 16%, rgba(255, 255, 255, .02) 46%, rgba(0, 0, 0, .52)), url(photos/grain.webp) 0 0 / 64px, var(--teinte); box-shadow: inset 0 .5rem 0 -.32rem var(--or), inset 0 -.5rem 0 -.32rem var(--or), inset 0 1.05rem 0 -.95rem var(--or), inset 0 -1.05rem 0 -.95rem var(--or); border-radius: .22rem .22rem 0 0; transition: transform .45s var(--souple), filter .45s; }
.edition-passee small { flex: none; font: italic 400 .8rem/1 var(--serif); color: #f8e0a4; }
.nom-edition { flex: 1; min-height: 0; writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); text-align: center; font: 400 clamp(1.02rem, 1.25vw, 1.24rem)/1.04 "Fondamento", var(--serif); }
.edition-passee .icone { width: 1.4rem; height: 1.4rem; stroke: currentColor; stroke-width: 1.3; }
.edition-passee:hover, .edition-passee:focus-visible { transform: translateY(-.8rem); filter: brightness(1.14); }
.plaque-annee { display: flex; align-items: baseline; justify-content: center; gap: .6rem; padding: .3rem 0 .75rem; font: italic 400 clamp(1.25rem, 1.7vw, 1.5rem)/1.2 var(--serif); color: var(--or); }
.plaque-annee small { font-size: .95rem; color: var(--ivoire); }
.fleche-rayon { position: absolute; top: 45%; z-index: 3; display: grid; place-items: center; width: 3rem; height: 3rem; margin-top: -1.5rem; padding: 0 0 .25rem; border: 1px solid var(--or); border-radius: 50%; background: rgba(23, 15, 20, .9); color: var(--or); font: 400 2rem/1 var(--serif); cursor: pointer; transition: opacity .3s; }
.fleche-rayon.gauche { left: .3rem; }
.fleche-rayon.droite { right: .3rem; }
.poussee .fleche-rayon.droite:not(:disabled) { animation: pousse 1.7s ease-in-out 3; }
@keyframes pousse { 50% { transform: translateX(.4rem); } }
.fleche-rayon:disabled { opacity: 0; pointer-events: none; }
.fleche-rayon[hidden], .geste-rayon[hidden] { display: none; }
.geste-rayon { margin-bottom: .7rem; text-align: center; font: italic 400 1.1rem/1.3 var(--serif); color: var(--or); }
.galerie-pop, .mini-galerie { width: min(62rem, 96vw); max-width: none; max-height: 94dvh; padding: 0; border: 0; background: var(--nuit); color: var(--ivoire); overflow: auto; overscroll-behavior: contain; }
.galerie-pop::backdrop, .mini-galerie::backdrop { background: rgba(10, 6, 8, .82); }
.galerie-pop[open], .mini-galerie[open] { animation: apparition .35s ease both; }
.galerie-pop .vignettes { display: block; columns: 3 13rem; column-gap: .7rem; }
.galerie-pop .vignettes img { margin-bottom: .7rem; break-inside: avoid; }
.vignettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .8rem; align-items: start; }
.vignettes img { width: 100%; background: var(--noir); }
/* les archives en maçonnerie : site.js range les photos dans ces colonnes, sans trou et sans rien recadrer */
.mini-galerie { width: min(78rem, 96vw); scrollbar-gutter: stable; }
.mini-galerie .vignettes { display: flex; align-items: flex-start; gap: .7rem; width: 100%; max-width: calc(var(--n, 9) * 30rem); margin-inline: auto; }
.colonne-photos { display: grid; flex: 1 1 0; gap: .7rem; min-width: 0; }
.mini-galerie .vignettes img { display: block; height: auto; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.histoire-passee { display: grid; gap: .7rem; max-width: 46em; }
.a-venir[hidden] { display: none; }
.photos-a-venir { min-height: 7rem; }
/* la fiche d'une édition, comme une page de livre */
.fiche { width: min(68rem, 96vw); max-width: none; max-height: 94dvh; padding: 0; border: 0; background: var(--nuit); color: var(--ivoire); overflow: auto; overscroll-behavior: contain; }
.fiche::backdrop { background: rgba(10, 6, 8, .82); }
.fiche[open] { animation: apparition .35s ease both; }
.feuillet { display: grid; gap: 1.2rem; padding: clamp(1.6rem, 4vw, 3.2rem); }
.feuillet .fermer { position: sticky; top: 0; z-index: 2; justify-self: end; padding: .4rem .7rem; border: 0; background: var(--nuit); cursor: pointer; font: 500 1rem/1 var(--sans); }
.feuillet h2 { font-size: clamp(2.3rem, 5vw, 4rem); }
.colonnes { display: grid; gap: clamp(1.4rem, 4vw, 3rem); }
.colonnes > div:first-child { display: grid; gap: .8rem; align-content: start; }
.feuillet h3 { margin-top: .6rem; font-size: clamp(1.4rem, 2vw, 1.75rem); color: var(--or); }
.images-fiche { display: grid; gap: 1rem; align-content: start; }
.images-fiche img { width: 100%; }
.images-fiche figcaption { padding-top: .35rem; font: italic 400 1.1rem/1.2 var(--serif); color: var(--sable); }
.colonnes > .texte-fiche { display: grid; gap: .8rem; align-content: start; }
@media (min-width: 800px) { .colonnes { grid-template-columns: 1.15fr 1fr; } }

/* ── portraits de vie ── */
/* l'ouverture : toute une vie en huit photos entières, de la même hauteur, jamais recadrées */
.tete-vie { display: grid; gap: clamp(2rem, 6vh, 3.5rem); padding: clamp(6.5rem, 15vh, 9rem) var(--marge) clamp(2.5rem, 6vh, 4rem); }
.tete-vie .texte { display: grid; gap: 1rem; justify-items: start; max-width: 60rem; }
.tete-vie h1 { font-size: clamp(2.8rem, 5.6vw, 5.6rem); }
.tete-vie .citation { margin-top: .6rem; }
/* les chapitres en haut de page, qui suivent la lecture */
.chapitres-vie { position: sticky; top: 0; z-index: 5; display: flex; justify-content: safe center; gap: .4rem .5rem; padding: .7rem var(--marge); overflow-x: auto; background: rgba(23, 15, 20, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); scrollbar-width: none; }
.chapitres-vie::-webkit-scrollbar { display: none; }
.chapitres-vie a { flex: none; padding: .55rem 1.15rem; border: 1px solid var(--filet); font: 500 clamp(1.15rem, 1.6vw, 1.4rem)/1.1 var(--serif); transition: background .3s, color .3s, border-color .3s; }
.chapitres-vie a span { margin-right: .25rem; font-style: italic; color: var(--or); transition: color .3s; }
.chapitres-vie a:hover { border-color: var(--or); }
.chapitres-vie a[aria-current="true"] { background: var(--or); border-color: var(--or); color: var(--encre); }
.chapitres-vie a[aria-current="true"] span { color: var(--encre); }
@media (max-width: 480px) {
	.chapitres-vie { gap: .3rem; padding-inline: .6rem; }
	.chapitres-vie a { padding: .45rem .55rem; font-size: 1.04rem; }
}
.volet-vie { padding: var(--souffle) var(--marge) clamp(3rem, 8vh, 5rem); }
.volet-vie .tete { justify-items: start; }
.volet-vie h2 small { font-size: .55em; font-weight: 400; color: var(--sable); }
/* la petite galerie : une rangée de hauteur égale, chaque photo entière ; le téléphone en fait deux rangées */
/* portraits de vie, « plus wahou » : la photo en grand, entière ; toutes en vignettes à côté, à la même hauteur qu'elle sur écran large */
.galerie-vedette { display: grid; gap: clamp(.6rem, 1.2vw, 1rem); max-width: 72rem; margin-inline: auto; }
.en-grand { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 78vh; padding: 0; border: 0; background: none; cursor: zoom-in; }
.en-grand img { width: 100%; height: 100%; object-fit: contain; }
.js .galerie-vedette .en-grand.change img { transition: opacity .28s ease; }
.js .galerie-vedette .en-grand.allumee img.passe { opacity: 0; }
.vignettes-vedette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.4rem, .8vw, .7rem); margin: 0; padding: 0; list-style: none; }
.vignette { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; overflow: hidden; background: var(--noir); cursor: pointer; opacity: .7; outline: 2px solid transparent; outline-offset: 3px; transition: opacity .35s, outline-color .35s; }
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.vignette:hover, .vignette:focus-visible, .vignette[aria-pressed="true"] { opacity: 1; }
.vignette[aria-pressed="true"], .vignette:focus-visible { outline-color: var(--or); }
.js .galerie-vedette .lumiere img { opacity: 0; transform: translateY(1.4rem); transition: opacity 1s ease calc(var(--i, 0) * .14s), transform 1.1s var(--souple) calc(var(--i, 0) * .14s); }
.js .galerie-vedette .lumiere.allumee img { opacity: 1; transform: none; }
.js .galerie-vedette .vignette.allumee:hover img { transform: scale(1.06); transition: transform .6s var(--souple); }
.en-grand:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
@media (min-width: 700px) {
	.galerie-vedette { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
	.en-grand { max-height: none; }
	.vignettes-vedette { contain: size; grid-template-rows: repeat(var(--rangs), minmax(0, 1fr)); }
	.vignette { height: 100%; aspect-ratio: auto; }
}
.mots-volet { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem .8rem; max-width: 60rem; margin: clamp(.9rem, 2vh, 1.3rem) auto 0; padding: 0; list-style: none; font: italic 400 clamp(1.15rem, 1.6vw, 1.35rem)/1.35 var(--serif); color: var(--or); }
.mots-volet li + li::before { content: "·"; margin-right: .8rem; }
@media (max-width: 640px) {
	.mots-volet { gap: .1rem 1.1rem; }
	.mots-volet li + li::before { display: none; }
}
.traversee .frise-vie { margin-top: clamp(2rem, 5vh, 3rem); }
.volet-vie .ligne-prix, .traversee .ligne-prix { margin-top: clamp(1.4rem, 3vh, 2.2rem); }
.libelle-frais { font: italic 400 clamp(1.15rem, 1.6vw, 1.35rem)/1.2 var(--serif); color: var(--sable); }
.ligne-prix { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.1rem; width: 100%; margin-top: .4rem; padding-top: .7rem; border-top: 1px solid var(--or-doux); }
.ligne-prix b { font: 500 clamp(1.5rem, 2.2vw, 1.95rem)/1.2 var(--serif); color: var(--or); }
.autre-moment { margin-top: clamp(1.8rem, 4vh, 2.8rem); font: italic 400 clamp(1.25rem, 1.8vw, 1.55rem)/1.3 var(--serif); text-align: center; }
.autre-moment .lien { margin-left: .4rem; font-style: normal; }
.traversee { padding: var(--souffle) var(--marge); }
.traversee .tete { justify-items: start; }
/* la frise : un fil d'or, de la première prise de contact aux premiers jours */
.frise-vie { position: relative; display: grid; gap: 2.4rem; margin: 0; padding: 0 0 0 1.6rem; list-style: none; }
.frise-vie::before { content: ""; position: absolute; inset: .35rem auto 0 .35rem; width: 1px; background: linear-gradient(to bottom, var(--or), var(--or) 85%, transparent); }
.etape { position: relative; display: grid; gap: .5rem; align-content: start; justify-items: start; }
.etape::before { content: ""; position: absolute; top: .35rem; left: -1.6rem; width: .7rem; height: .7rem; background: var(--or); transform: rotate(45deg); }
.moment { font: italic 400 1.25rem/1.2 var(--serif); color: var(--or); }
.etape h3 { font-size: clamp(1.75rem, 2.6vw, 2.4rem); }
.etape .atouts { width: 100%; }
.etape b { font: 500 clamp(1.5rem, 2.2vw, 1.95rem)/1.2 var(--serif); color: var(--or); }
@media (min-width: 1000px) {
	.frise-vie { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.2rem, 2.2vw, 2.2rem); padding: 2.1rem 0 0; }
	.frise-vie::before { inset: .35rem 0 auto 0; width: auto; height: 1px; background: linear-gradient(to right, var(--or), var(--or) 88%, transparent); }
	.etape::before { top: -2.1rem; left: 0; }
}

/* ── pros : on clique sur la catégorie, la page défile à l'horizontale ── */
.tete-pro { display: grid; gap: 1rem; justify-items: start; padding: clamp(6.5rem, 15vh, 9rem) var(--marge) clamp(2.4rem, 6vh, 3.6rem); }
.tete-pro h1 { max-width: 16em; font-size: clamp(2.8rem, 5.2vw, 5.2rem); }
.onglets-pro { position: sticky; top: 0; z-index: 5; display: flex; gap: .4rem .5rem; padding: .8rem var(--marge); overflow-x: auto; background: rgba(23, 15, 20, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); scrollbar-width: none; }
.onglets-pro::-webkit-scrollbar { display: none; }
.onglets-pro a { flex: none; padding: .6rem 1.1rem; border: 1px solid var(--filet); font: 500 1rem/1.1 var(--sans); transition: background .3s, border-color .3s, color .3s; }
.onglets-pro a:hover, .onglets-pro a:focus-visible { border-color: var(--or); color: var(--or); }
.js .onglets-pro a[aria-current="true"] { background: var(--or); border-color: var(--or); color: var(--encre); }
.fenetre-pro { padding-block: clamp(1.6rem, 4vh, 2.6rem) 0; }
.js .fenetre-pro { overflow: hidden; transition: height .55s var(--souple); }
.js .piste-pro { display: flex; align-items: flex-start; transition: transform .7s var(--souple); }
.panneau-pro { flex: 0 0 100%; display: grid; gap: clamp(1.4rem, 3vh, 2.2rem); min-width: 0; padding: 0 var(--marge) clamp(2.5rem, 7vh, 4.5rem); scroll-margin-top: 4.5rem; }
.bande { margin-block: 0; list-style: none; }
.bande img { width: auto; height: clamp(15rem, 40vh, 25rem); max-width: none; }
/* ce portrait est livré en médaillon, sur fond blanc */
.bande .medaillon img { clip-path: circle(49.3%); }
.fiche-pro { display: grid; gap: 1.4rem clamp(2rem, 4vw, 4rem); align-items: start; }
.fiche-tete { display: grid; gap: .8rem; justify-items: start; }
.fiche-tete h2 { font-size: clamp(2rem, 3vw, 2.8rem); }
.fiche-tete > p:not(.actions) { color: var(--sable); }
.deux-tarifs { display: grid; gap: 1.2rem clamp(1.5rem, 3vw, 3rem); width: 100%; }
.note-tarifs { margin-top: .7rem; }
.deux-tarifs .note-tarifs { grid-column: 1 / -1; margin-top: 0; }
.deux-tarifs h3 { margin-bottom: .35rem; font: italic 400 clamp(1.3rem, 1.7vw, 1.5rem)/1.2 var(--serif); color: var(--or); }
@media (min-width: 760px) { .deux-tarifs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fiche-pro { grid-template-columns: minmax(18rem, 1fr) 2.1fr; } }
/* la borne, remise en avant */
.borne-pro { scroll-margin-top: 4rem; }
.images-borne { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.5rem, 1vw, .9rem); align-items: start; }
.images-borne figure:first-child { grid-column: 1 / -1; }
.images-borne figure { overflow: hidden; }
.images-borne img { width: 100%; }
/* une ligne de tarif : ce que c'est à gauche, le prix à droite */
.tarifs { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.tarifs li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .58rem 0; border-bottom: 1px solid var(--filet); line-height: 1.3; }
.tarifs li > span { font-weight: 500; }
.tarifs small { display: block; font-size: .9rem; font-weight: 400; color: var(--sable); }
.tarifs b { flex: none; max-width: 55%; font: 500 clamp(1.2rem, 1.5vw, 1.35rem)/1.2 var(--serif); color: var(--or); text-align: right; }

/* ── collections ── */
.contenu-collection, .carte-tarifs { padding: var(--souffle) var(--marge); }
.contenu-collection .tete, .carte-tarifs .tete { justify-items: start; }
.contenu-collection .tete { margin-bottom: clamp(.8rem, 2vh, 1.3rem); }
.trois-parts { display: grid; gap: 1.8rem clamp(1.5rem, 3vw, 3rem); margin: 0; padding: 0; list-style: none; }
.trois-parts li { display: grid; gap: .5rem; align-content: start; justify-items: start; }
.trois-parts h3 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); }
.trois-parts p { color: var(--sable); }
@media (min-width: 800px) {
	.trois-parts { grid-template-columns: repeat(2, 1fr); }
	.trois-parts li:nth-child(3) { grid-column: 1 / -1; }
}
.renvoi { margin-top: 1.6rem; max-width: 52em; }
.les-collections { padding: var(--souffle) var(--marge); }
/* quatre collections côte à côte, de plus en plus grandes, chacune sa couleur */
.quatre-collections { display: grid; gap: clamp(.9rem, 1.6vw, 1.4rem); align-items: end; }
.quatre-collections .collection-carte { --e: 1; --coin: clamp(36px, 3vw, 50px); padding: clamp(1.5rem, 2vw, 2.1rem) clamp(1.3rem, 1.8vw, 1.8rem) clamp(2.2rem, 2.8vw, 2.9rem); }
/* « fais briller les fonds colorés » (06/11) : un satin éclairé par le haut, un halo de sa couleur autour de la carte, et un reflet qui passe sur le haut, jamais sous le texte */
.c-fable { --halo: 70, 170, 110; background: radial-gradient(120% 55% at 30% 0%, rgba(160, 240, 190, .3), transparent 64%), linear-gradient(160deg, #2c5b3c, #16301f 78%); }
.c-conte { --halo: 80, 130, 220; background: radial-gradient(120% 55% at 30% 0%, rgba(160, 200, 255, .3), transparent 64%), linear-gradient(160deg, #284a7a, #142844 78%); }
.c-legende { --halo: 160, 100, 230; background: radial-gradient(120% 55% at 30% 0%, rgba(215, 175, 255, .3), transparent 64%), linear-gradient(160deg, #523479, #2b1a42 78%); }
.c-mythe { --halo: 235, 165, 55; background: radial-gradient(120% 55% at 30% 0%, rgba(255, 222, 150, .32), transparent 64%), linear-gradient(160deg, #8d5a15, #66400e 78%); }
.quatre-collections .collection-carte { overflow: hidden; box-shadow: 0 0 2.6rem rgba(var(--halo), .34), 0 0 .6rem rgba(var(--halo), .2), inset 0 1px 0 rgba(255, 255, 255, .24); }
.quatre-collections .collection-carte > * { position: relative; z-index: 1; }
.quatre-collections .collection-carte.dorure::before { z-index: 2; }
.quatre-collections .collection-carte::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .32) 50%, transparent 64%); -webkit-mask-image: linear-gradient(to bottom, #000 18%, transparent 38%); mask-image: linear-gradient(to bottom, #000 18%, transparent 38%); transform: translateX(-120%); animation: reflet-carte 8s ease-in-out infinite; }
.quatre-collections .c-conte::after { animation-delay: 1.6s; }
.quatre-collections .c-legende::after { animation-delay: 3.2s; }
.quatre-collections .c-mythe::after { animation-delay: 4.8s; }
@keyframes reflet-carte { 0%, 60% { transform: translateX(-120%); } 86%, 100% { transform: translateX(120%); } }
.prix-collection del { margin-left: .35em; font-size: .6em; font-weight: 400; text-decoration-thickness: 1px; }
.quatre-collections .c-mythe .surtitre, .quatre-collections .c-mythe .prix-collection { color: #ffe9bd; }
.c-mythe.dorure::before { filter: brightness(1.4); }
.quatre-collections .nature-morte { height: calc(var(--e) * clamp(8.4rem, 10.4vw, 10.6rem)); }
.quatre-collections .collection-carte h3 { font-size: calc(var(--e) * clamp(1.65rem, 2vw, 2rem)); }
.quatre-collections .prix-collection { font-size: calc(var(--e) * 1.3rem); }
.quatre-collections .collection-carte .atouts { font-size: .94rem; }
.quatre-collections .atouts li { padding-block: .42rem; }
.c-fable .album { right: 18%; }
@media (min-width: 640px) { .quatre-collections { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) {
	.quatre-collections { grid-template-columns: 1fr 1.12fr 1.26fr 1.42fr; }
	.quatre-collections .c-conte { --e: 1.12; }
	.quatre-collections .c-legende { --e: 1.26; }
	.quatre-collections .c-mythe { --e: 1.42; }
}
.collection-carte { --coin: clamp(46px, 4.4vw, 70px); display: grid; gap: .55rem; align-content: start; padding: clamp(1.3rem, 1.8vw, 1.8rem); }
.collection-carte h3 { font-size: clamp(2rem, 2.8vw, 2.6rem); }
.collection-carte .atouts { font-size: .98rem; }
.prix-collection { font: 500 clamp(1.7rem, 2.3vw, 2.1rem)/1.2 var(--serif); color: var(--or); }
.note-acces { margin-top: 1.6rem; text-align: center; }
/* une petite nature morte, en attendant ses photos : les tableaux au mur, l'album posé devant */
.nature-morte { position: relative; height: clamp(10rem, 13vw, 12rem); margin-bottom: .6rem; }
.nature-morte .mural { position: absolute; left: 4%; top: 2%; height: 92%; aspect-ratio: 2 / 3; overflow: hidden; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .55); outline: 3px solid #1a0e08; }
.nature-morte .mural img, .nature-morte .album img { width: 100%; height: 100%; object-fit: cover; }
.nature-morte .m2 { left: 36%; top: 14%; height: 72%; }
.nature-morte .m3 { left: 62%; top: 4%; height: 54%; }
.nature-morte .album { position: absolute; right: 4%; bottom: 0; height: 56%; aspect-ratio: 1; box-shadow: 0 .6rem 1rem rgba(0, 0, 0, .6); border-left: 6px solid rgba(0, 0, 0, .3); }
.nature-morte .velours { background: radial-gradient(circle at 30% 25%, #6d3049, #3b1525 70%); outline: 1px solid rgba(236, 189, 107, .5); outline-offset: -5px; }
.nature-morte .velours::after { content: "CH"; position: absolute; inset: 0; display: grid; place-items: center; font: italic 500 clamp(1.1rem, 2vw, 1.8rem)/1 var(--serif); color: rgba(236, 189, 107, .75); }
.nature-morte .signature { background: linear-gradient(135deg, #2c1a0e, #17100a); outline: 1px solid #ecbd6b; outline-offset: -5px; }
.nature-morte .signature::after { content: "CH"; position: absolute; inset: 0; display: grid; place-items: center; font: italic 500 1.5rem/1 var(--serif); color: #ecbd6b; }
.nature-morte .book { overflow: hidden; }
.nature-morte.grande { height: clamp(20rem, 36vw, 32rem); }
.colonnes-carte { display: grid; gap: 2.4rem clamp(2rem, 4vw, 4rem); }
.bloc-carte { display: grid; gap: .8rem; align-content: start; min-width: 0; }
.bloc-carte h3 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
.bloc-carte h3 small { font-size: .55em; font-weight: 400; color: var(--sable); }
.bloc-carte .une-photo { margin-top: -.5rem; font: italic 400 clamp(1.05rem, 1.3vw, 1.2rem)/1.3 var(--serif); color: var(--sable); }
.bloc-carte .second { margin-top: 1.4rem; }
.bloc-carte h4 + .tarifs { margin-top: -.35rem; }
.bloc-carte h4 small { font-size: .8em; color: var(--sable); }
.bloc-carte h4 { margin-top: .4rem; font: italic 400 clamp(1.25rem, 1.6vw, 1.45rem)/1.2 var(--serif); color: var(--or); }
@media (min-width: 1100px) { .colonnes-carte { grid-template-columns: 1.15fr 1fr 1fr; } }
.a-venir { display: grid; place-items: center; min-height: 8rem; padding: 1.2rem; border: 1px dashed var(--or-doux); background: repeating-linear-gradient(135deg, rgba(247, 242, 234, .035) 0 8px, transparent 8px 16px); text-align: center; font: italic 400 1.15rem/1.3 var(--serif); color: var(--sable); }
.a-venir-grand { min-height: min(62vh, 34rem); }
.appel-final { display: grid; gap: 1.1rem; justify-items: center; padding: var(--souffle) var(--marge); text-align: center; }
.appel-final .actions { justify-content: center; }

/* ── le studio ── */
.pratique { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; padding: var(--souffle) var(--marge) clamp(3rem, 8vh, 5rem); }
.horaires { display: grid; gap: .85rem; justify-items: start; }
.horaires dl { display: grid; gap: .6rem; width: 100%; margin: 0; padding: .9rem 0; border-block: 1px solid var(--filet); }
.horaires dt { font: 500 clamp(1.3rem, 1.8vw, 1.55rem)/1.2 var(--serif); }
.horaires dd { margin: 0; color: var(--sable); }
.carte-studio { position: relative; overflow: hidden; aspect-ratio: 25 / 16; box-shadow: 0 0 0 1px var(--or-doux); }
.carte-studio img { width: 100%; height: 100%; object-fit: cover; }
.carte-studio .bouton { position: absolute; right: .8rem; bottom: .8rem; padding: .75rem 1.1rem; }
.carte-studio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) { .pratique { grid-template-columns: 1fr 1.35fr; } }
.anime { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; padding: 0 var(--marge) var(--souffle); }
.anime .texte { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.anime .texte > p:not(.surtitre) { max-width: 40em; }
.portrait-cecile { overflow: hidden; width: 100%; max-width: 28rem; justify-self: center; }
.portrait-cecile img { width: 100%; }
@media (min-width: 1000px) { .anime { grid-template-columns: minmax(16rem, 1fr) 1.7fr; } }
.suivre { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: var(--souffle) var(--marge); }
.suivre .texte { display: grid; gap: 1rem; justify-items: start; }
@media (min-width: 900px) { .suivre { grid-template-columns: 1fr 1.1fr; } }
/* trois images droites, entières, de la même hauteur */
.trio { display: flex; align-items: flex-start; gap: clamp(.35rem, .7vw, .6rem); margin: 0; padding: 0; list-style: none; }
.trio li { flex: var(--r) 1 0; min-width: 0; }
.trio img { width: 100%; }
.aussi-ici { display: grid; gap: 3rem clamp(2rem, 5vw, 5rem); padding: var(--souffle) var(--marge); }
.enseigne { display: grid; gap: .7rem; justify-items: start; align-content: start; }
.enseigne .trio { width: 100%; margin-bottom: .6rem; }
.aussi-ici h2 { font-size: clamp(2rem, 3vw, 2.7rem); }
.aussi-ici p:not(.actions) { color: var(--sable); }
@media (min-width: 800px) { .aussi-ici { grid-template-columns: 1fr 1fr; } }
.newsletter { display: grid; gap: 1.2rem clamp(2rem, 5vw, 5rem); align-items: center; margin: 0 var(--marge) var(--souffle); padding: clamp(1.8rem, 4vw, 3rem); background: var(--nuit); scroll-margin-top: 5rem; }
.newsletter .texte { display: grid; gap: .5rem; }
.newsletter h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
@media (min-width: 1000px) { .newsletter { grid-template-columns: 1fr 1.3fr; } }

/* ── le module de Fotostudio ── */
.module-reservation { padding: var(--souffle) var(--marge); }
.cadre-module { display: grid; place-items: center; min-height: 11rem; overflow: hidden; margin-bottom: .8rem; box-shadow: 0 0 0 1px var(--or-doux); }
.cadre-module[hidden] { display: none; }
.cadre-module > div { width: 100%; }
.module-court { min-height: 0; margin: 0; }
.recu-cadeau { padding: var(--souffle) var(--marge); }
.cadre-module:has(iframe) { background: #fff; }
.cadre-module iframe { display: block; width: 100%; height: min(86vh, 56rem); border: 0; }

/* ── mariage : la façon de travailler, la frise des moments, les élopements, les galeries ── */
.facon { display: grid; gap: clamp(1.8rem, 4vw, 4rem); align-items: center; padding: clamp(2.5rem, 7vh, 4.5rem) var(--marge) 0; }
.facon figure { overflow: hidden; max-width: 30rem; }
.facon figure img { width: 100%; }
.facon .tete { justify-items: start; }
@media (min-width: 1000px) { .facon { grid-template-columns: minmax(16rem, .7fr) 2fr; } }
.frise-jour { padding: var(--souffle) var(--marge); }
.frise-jour .tete { justify-items: center; max-width: none; text-align: center; }
.frise-jour .fleuron { margin-inline: auto; }
/* le fil d'or descend le long de la journée */
.moments { position: relative; display: grid; gap: clamp(2.5rem, 7vh, 4.5rem); max-width: 80rem; margin: 0 auto; padding: 0 0 0 1.5rem; list-style: none; }
.moments::before { content: ""; position: absolute; inset: .4rem auto 0 .3rem; width: 1px; background: linear-gradient(to bottom, var(--or), var(--or) 92%, transparent); }
.moment-jour { position: relative; display: grid; gap: 1rem; }
.moment-jour::before { content: ""; position: absolute; top: .55rem; left: calc(-1.5rem + .3rem - .33rem); width: .7rem; height: .7rem; background: var(--or); transform: rotate(45deg); }
.texte-moment { display: grid; gap: .4rem; align-content: start; }
.texte-moment h3 { font-size: clamp(1.8rem, 3vw, 2.7rem); }
.texte-moment p { max-width: 30em; color: var(--ivoire); }
.images-moment { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(.5rem, 1vw, .9rem); align-items: end; }
.images-moment img { width: 100%; height: auto; }
.images-moment img:first-child:not(:only-child) { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.images-moment img:last-child:not(:only-child) { aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; }
/* une seule image : elle prend toute la place, entière, sans dépasser l'écran */
.moments .moment-jour .images-moment:has(img:only-child) { grid-template-columns: 1fr; justify-items: center; }
.images-moment img:only-child { width: min(100%, 54.6vh); }
@media (min-width: 1000px) {
	.moments { padding: 0; }
	.moments::before { left: 50%; }
	.moment-jour { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
	.moment-jour::before { top: 50%; left: calc(50% - .33rem); }
	.moment-jour:nth-child(odd) .texte-moment { order: 2; }
	.moment-jour:nth-child(even) .texte-moment { justify-items: end; text-align: right; }
	.moment-jour:nth-child(even) .images-moment { grid-template-columns: 1fr 1.55fr; }
	.moment-jour:nth-child(even) .images-moment img:first-child { order: 2; }
}
.elopements { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: var(--souffle) var(--marge); }
.elopements figure { overflow: hidden; }
.elopements figure img { width: 100%; }
.elopements figcaption { padding-top: .5rem; font: italic 400 1.1rem/1.3 var(--serif); color: var(--sable); }
.elopements .texte { display: grid; gap: 1rem; justify-items: start; }
.elopements .texte > p:not(.surtitre, .actions, .chapo) { max-width: 36em; color: var(--sable); }
@media (min-width: 900px) { .elopements { grid-template-columns: 1.1fr 1fr; } }
.galeries-mariage { padding: 0 var(--marge) var(--souffle); }
.galeries-mariage h2 { margin-bottom: 1.4rem; font-size: clamp(1.9rem, 3vw, 2.7rem); }
.tuiles { display: grid; gap: clamp(.7rem, 1.4vw, 1.2rem); }
@media (min-width: 800px) { .tuiles { grid-template-columns: repeat(3, 1fr); } }
.tuile { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--nuit); }
.tuile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
a.tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 8, 10, .88), rgba(14, 8, 10, 0) 62%); }
.tuile > span { position: absolute; inset: auto 0 0; z-index: 1; display: grid; gap: .1rem; padding: .95rem 1.1rem; }
.tuile small { font-size: .9rem; color: var(--sable); }
.tuile strong { font: 500 clamp(1.35rem, 1.9vw, 1.7rem)/1.12 var(--serif); transition: color .3s; }
a.tuile:hover strong, a.tuile:focus-visible strong { color: var(--or); }
.tuile.a-venir { display: block; min-height: 0; padding: 0; font: 400 .95rem/1.3 var(--sans); text-align: left; }

/* ── contact ── */
.reservation { padding: clamp(6.5rem, 16vh, 9rem) var(--marge) clamp(2.2rem, 5vh, 3.5rem); }
.reservation .tete { justify-items: start; margin-bottom: 1.6rem; }
.reservation h1 { font-size: clamp(2.8rem, 5.6vw, 5.2rem); }
.portes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: .7rem; margin-bottom: 1rem; }
/* six portes depuis le 07/11 (photos d'identité) : deux rangs de trois plutôt que cinq et une seule au bout ; à revoir si leur nombre change */
@media (min-width: 700px) { .portes { grid-template-columns: repeat(3, 1fr); } }
.porte { display: grid; gap: .15rem; padding: 1.05rem 1.2rem; border: 1px solid var(--or-doux); background: rgba(247, 242, 234, .035); cursor: pointer; transition: background .3s, color .3s, transform .3s var(--souple); }
.porte strong { font: 500 clamp(1.45rem, 2vw, 1.8rem)/1.15 var(--serif); }
.porte small { font-size: .95rem; color: var(--sable); transition: color .3s; }
.porte:hover { transform: translateY(-2px); border-color: var(--or); }
.porte[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: var(--encre); }
.porte[aria-pressed="true"] small { color: var(--encre); }
.porte.secondaire { border-style: dashed; }
.reservation .joindre { margin-top: 1rem; }
.cadeaux-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-inline: var(--marge); padding: 1.3rem 1.6rem; background: var(--nuit); }
.cadeaux-contact h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.demande { padding: clamp(3rem, 8vh, 5rem) var(--marge) var(--souffle); }
.demande h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); }
/* les pages de texte : les CGV, la liste de travail */
.page-texte { padding: clamp(6.5rem, 15vh, 9rem) var(--marge) var(--souffle); }
.page-texte .tete { justify-items: start; }
.page-texte h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.texte-legal { display: grid; gap: .7rem; max-width: 54rem; white-space: pre-line; }
.texte-legal h2 { margin-top: 1.3rem; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.texte-legal h3 { margin-top: .5rem; font-size: clamp(1.3rem, 1.9vw, 1.6rem); color: var(--or); }
.texte-legal p { color: var(--sable); }
.fournir { white-space: normal; max-width: none; }
.liste-fournir { columns: 1; column-gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 800px) { .liste-fournir { columns: 2; } }
.liste-fournir li { display: flex; align-items: baseline; gap: .6rem; padding: .22rem 0; border-bottom: 1px dotted var(--filet); break-inside: avoid; }
.liste-fournir small { color: var(--sable); }
.liste-fournir b { margin-left: auto; font-weight: 500; }
.liste-fournir .manque b { color: var(--or); }
/* la bibliothèque : un meuble de bois sombre, les livres à venir de face, ceux de l'année sur la tranche */
.salle-lecture { padding: clamp(6.5rem, 15vh, 9rem) var(--marge) var(--souffle); }
.salle-lecture .tete { justify-items: start; }
.salle-lecture h1 { font-size: clamp(2.8rem, 5.6vw, 5.2rem); }
.meuble { padding: clamp(.7rem, 1.6vw, 1.3rem) clamp(.7rem, 1.6vw, 1.3rem) .3rem; background: linear-gradient(to bottom, #2c1a0f, #1b0f08); box-shadow: inset 0 0 0 1px rgba(236, 189, 107, .22), 0 1.4rem 3rem rgba(0, 0, 0, .6); }
.rayon-livres { display: flex; align-items: flex-end; justify-content: safe center; gap: .16rem; height: clamp(15rem, 36vh, 22rem); padding: 1.2rem .8rem 0; overflow-x: auto; overflow-y: hidden; background: radial-gradient(ellipse at 50% 0, rgba(255, 214, 150, .14), transparent 70%), #110804; border-bottom: .75rem solid #3d2615; box-shadow: inset 0 .7rem 1.2rem rgba(0, 0, 0, .75); scrollbar-width: thin; scrollbar-color: var(--or) transparent; }
.rayon-livres.face { gap: clamp(.9rem, 2.6vw, 2.6rem); height: clamp(19rem, 44vh, 27rem); }
.etiquette { padding: .35rem 0 .9rem; text-align: center; font: italic 400 1.15rem/1.2 var(--serif); color: var(--or); }
.tome { flex: none; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .45s var(--souple), filter .45s; }
.tome:hover, .tome:focus-visible { transform: translateY(-.8rem); filter: brightness(1.2); }
.tranche { width: var(--l); height: var(--h); }
.dos { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 100%; height: 100%; padding: .9rem .25rem; overflow: hidden; color: var(--or); background: linear-gradient(to right, rgba(0, 0, 0, .58), rgba(255, 255, 255, .14) 16%, rgba(255, 255, 255, .02) 46%, rgba(0, 0, 0, .52)), url(photos/grain.webp) 0 0 / 64px, var(--teinte); box-shadow: inset 0 .5rem 0 -.32rem var(--or), inset 0 -.5rem 0 -.32rem var(--or), inset 0 1.05rem 0 -.95rem var(--or), inset 0 -1.05rem 0 -.95rem var(--or); border-radius: .22rem .22rem 0 0; }
.dos small { flex: none; font: 500 .95rem/1 var(--serif); }
.dos strong { flex: 1; min-height: 0; writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); text-align: center; font: 500 clamp(1rem, 1.3vw, 1.3rem)/1.02 var(--serif); }
.de-face { position: relative; height: 94%; overflow: hidden; box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .7); }
.de-face img { width: auto; height: 100%; max-width: none; }
.de-face::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(0, 0, 0, .55), rgba(255, 255, 255, .1) 5%, transparent 12%); pointer-events: none; }
.plaque { position: absolute; inset: auto 0 0; z-index: 2; display: grid; gap: .05rem; padding: 1.6rem .7rem .7rem; background: linear-gradient(to top, rgba(10, 6, 8, .96) 45%, transparent); opacity: 0; transition: opacity .35s; }
.plaque small { font-style: italic; color: var(--or); }
.plaque strong { font: 500 1.25rem/1.1 var(--serif); }
.tome:hover .plaque, .tome:focus-visible .plaque { opacity: 1; }
@media (hover: none) { .plaque { opacity: 1; } }
/* le livre ouvert, en grand */
.lecteur { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12, 7, 5, .97); color: var(--ivoire); overflow: hidden; }
.lecteur::backdrop { background: rgba(12, 7, 5, .97); }
.lecteur[open] { display: grid; place-items: center; animation: apparition .4s ease both; }
.lecteur .fermer { position: absolute; top: .9rem; right: max(1rem, env(safe-area-inset-right)); z-index: 8; padding: .5rem .7rem; border: 0; background: none; color: var(--ivoire); cursor: pointer; font: 500 1rem/1 var(--sans); }
.lecteur .fermer:hover { color: var(--or); }
.pupitre { width: min(96vw, 76rem); }
.js .tome-ouvert.pret .volume { width: min(70rem, 100%, 122vh); transition: transform .95s cubic-bezier(.45, .05, .25, 1); }
.js .tome-ouvert.pret .ecrit { justify-items: start; align-content: center; gap: .7rem; height: 100%; margin: 0; padding: clamp(1.2rem, 3.4vw, 3rem); overflow: auto; text-align: left; }
.tome-ouvert .ecrit h3 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); }
.tome-ouvert .ecrit p { max-width: none; font: 400 clamp(1.08rem, 1.5vw, 1.34rem)/1.42 var(--serif); }
.tome-ouvert .ecrit .numero { font: italic 400 clamp(1.2rem, 1.6vw, 1.45rem)/1.2 var(--serif); }
.tome-ouvert .numero { color: #7c5716; }
.tome-ouvert .ecrit .date-livre { font: italic 400 clamp(1.25rem, 1.8vw, 1.6rem)/1.2 var(--serif); color: #7c5716; }
.prix-tome { font: 500 clamp(1.6rem, 2.4vw, 2.2rem)/1.2 var(--serif); }
.js .tome-ouvert.pret .fin-tome .ecrit { justify-items: center; text-align: center; }
.fin-tome .lien { border-color: #a37720; }
.fin-tome .bouton { background: var(--encre-page); color: var(--ivoire); }
.fin-tome .bouton:focus-visible { outline-color: var(--encre-page); }
.couverture .image-etroite.pleine img { width: 100%; height: 100%; object-fit: cover; }
/* au dos des pages, une image se montre entière : un moodboard ne se recadre pas */
.js .tome-ouvert.pret .verso { background: #1a0f15; }
.js .tome-ouvert.pret .verso img { object-fit: contain; }
.js .livret.pret .verso.garde { background: url(ornements/lettrine.svg?v=49e76f9a) center / 46% no-repeat, #2a121e; }
@media (min-width: 800px) {
	.js .tome-ouvert.pret .feuille.couverture .image-etroite { display: block; height: 100%; }
	.js .tome-ouvert.pret .premiere { display: none; }
	.js .tome-ouvert.ferme .volume { transform: translateX(-25%); }
	.tome-ouvert .tourner[data-sens="-1"] { left: max(.2rem, calc(50% - min(35rem, 61vh) - 4.2rem)); }
	.tome-ouvert .tourner[data-sens="1"] { right: max(.2rem, calc(50% - min(35rem, 61vh) - 4.2rem)); }
	.js .tome-ouvert.ferme .volume::before, .js .tome-ouvert.ferme .volume::after { opacity: 0; }
	.js .tome-ouvert.pret .volume::before, .js .tome-ouvert.pret .volume::after { transition: opacity .6s .3s; }
}
@media (max-width: 799px) {
	.js .tome-ouvert.pret .volume { width: min(100%, 62vh); }
	.js .tome-ouvert.pret .recto { display: flex; flex-direction: column; background: #1a0f15; }
	.js .tome-ouvert.pret .image-etroite { position: relative; flex: 0 0 36%; }
	.js .tome-ouvert.pret .image-etroite::after { display: none; }
	.js .tome-ouvert.pret .couverture .image-etroite { flex: 1 1 100%; }
	.js .tome-ouvert.pret .ecrit { flex: 1; min-height: 0; }
	.tome-ouvert .numero, .tome-ouvert .ecrit .date-livre, .tome-ouvert .ecrit .numero { color: var(--or); }
	.js .tome-ouvert.pret .ecrit { align-content: start; }
	.fin-tome .bouton { background: var(--or); color: var(--encre); }
	.fin-tome .bouton:focus-visible { outline-color: var(--or); }
}
.joindre { display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.mariage-choix { display: grid; gap: 1.1rem; }
.mariage-choix[hidden], .devis-recu[hidden], .sans-devis[hidden] { display: none; }
.devis-recu { display: grid; gap: .6rem; justify-items: start; padding: 1.1rem 1.2rem; border: 1px solid var(--or-doux); }
.devis-recu .detail { width: 100%; }
.total-devis { font: 500 1.5rem/1.2 var(--serif); }
.pour-frais[hidden], .pour-ephemeres[hidden] { display: none; }
.demande .tete { justify-items: start; }
.formulaire { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.etapes { display: grid; gap: 1.5rem; }
.univers-choix { display: grid; gap: 1.5rem; }
.univers-choix[hidden] { display: none; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset[hidden] { display: none; }
legend { padding: 0 0 .6rem; font: 500 clamp(1.35rem, 2vw, 1.7rem)/1.2 var(--serif); color: var(--ivoire); }
.pastilles { display: flex; flex-wrap: wrap; gap: .4rem .45rem; }
.pastilles label { position: relative; display: block; cursor: pointer; }
.pastilles input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pastilles span { display: block; padding: .55rem 1rem; border: 1px solid var(--filet); color: var(--ivoire); transition: background .25s, color .25s, border-color .25s; }
.pastilles label:hover span { border-color: var(--or); }
.pastilles input:checked + span { background: var(--or); border-color: var(--or); color: var(--encre); }
.pastilles input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 2px; }
.engagement { display: flex; align-items: flex-start; gap: .7rem; padding: 1rem 1.1rem; border: 1px solid var(--or-doux); cursor: pointer; color: var(--ivoire); }
.engagement[hidden] { display: none; }
.engagement input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--or); }
.erreur { color: #ffb4a0; }
.erreur[hidden] { display: none; }
.apercu-mail { display: grid; gap: .6rem; padding: clamp(3.4rem, 5vw, 4.6rem) clamp(2.8rem, 4.6vw, 4.2rem); background: var(--nuit); }
.envoye { padding: .8rem 1rem; border-left: 2px solid var(--or); background: rgba(247, 242, 234, .05); font: italic 400 1.15rem/1.4 var(--serif); }
.envoye[hidden] { display: none; }
.apercu-mail pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 400 1rem/1.5 var(--sans); color: var(--sable); }
@media (min-width: 1000px) {
	.formulaire { grid-template-columns: 1.15fr 1fr; }
	.apercu-mail { position: sticky; top: 5.5rem; }
}

/* pied */
.pied { display: grid; gap: 1.5rem; justify-items: center; padding: 3rem var(--marge) 6.5rem; text-align: center; font-size: 1rem; color: var(--sable); }
.pied .logo-pied { width: 130px; }
.pied .adresse { display: grid; gap: .15rem; }
.pied .adresse p:first-child { font: 500 1.4rem/1.3 var(--serif); color: var(--ivoire); }
.pied .adresse p:nth-child(2) { color: var(--ivoire); }
.pied .adresse a { color: var(--ivoire); }
.instagram { display: inline-flex; align-items: center; gap: .5rem; color: var(--ivoire); transition: color .3s; }
.infolettre { display: grid; gap: .3rem; justify-items: center; }
.pied nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; color: var(--ivoire); }
.pied nav a { cursor: pointer; }
.pied a:hover { color: var(--or); }
.pied .mentions { font-size: .92rem; }
.pied .apercu { max-width: 44em; font-size: .9rem; line-height: 1.55; }
@media (min-width: 1280px) { .pied { padding-bottom: 3.5rem; } }

/* réserver, à portée de pouce sur le téléphone dès qu'on remonte */
.reserver-tel {
	position: fixed; inset: auto .75rem calc(.7rem + env(safe-area-inset-bottom)); z-index: 25; padding: .95rem 1rem; background: var(--or); color: var(--encre); box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .45);
	outline: 1px solid rgba(33, 20, 27, .38); outline-offset: -5px; text-align: center; cursor: pointer; font: 500 1.02rem/1.15 var(--sans);
	transform: translateY(calc(100% + 1.5rem)); transition: transform .5s var(--souple);
}
.champ-quand[hidden] { display: none; }
.reserver-tel.visible, .reserver-tel:focus-visible { transform: none; }
.reserver-tel:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
@media (min-width: 1280px) { .reserver-tel { display: none; } }

/* la page encore fermée */
.annonce {
	position: fixed; left: 50%; bottom: 5.2rem; z-index: 60; width: min(90vw, 30rem); padding: 1rem 1.4rem; background: var(--nuit); border: 1px solid var(--filet); text-align: center;
	font: italic 400 1.2rem/1.35 var(--serif); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .4s, transform .4s var(--souple);
}
.annonce.visible { opacity: 1; transform: translate(-50%, 0); }

/* la visionneuse */
.visionneuse { touch-action: pinch-zoom; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(14, 9, 12, .97); color: var(--ivoire); overflow: hidden; }
.visionneuse::backdrop { background: rgba(14, 9, 12, .97); }
.visionneuse[open] { display: grid; place-items: center; animation: apparition .35s ease both; }
.visionneuse img { max-width: 100vw; max-height: 100dvh; width: auto; height: auto; object-fit: contain; }
@media (min-width: 800px) { .visionneuse img { max-width: calc(100vw - 9rem); max-height: calc(100dvh - 3rem); } }
.visionneuse button { position: absolute; padding: 1rem; background: none; border: 0; color: var(--ivoire); cursor: pointer; font: 400 2.2rem/1 var(--serif); opacity: .75; transition: opacity .3s, color .3s; }
.visionneuse button:hover { opacity: 1; color: var(--or); }
.visionneuse .fermer { top: .6rem; right: max(1rem, env(safe-area-inset-right)); font: 500 1.02rem/1 var(--sans); }
.visionneuse .precedent { left: .5rem; top: 50%; transform: translateY(-50%); }
.visionneuse .suivant { right: .5rem; top: 50%; transform: translateY(-50%); }
.visionneuse .compte { position: absolute; left: max(1.4rem, env(safe-area-inset-left)); top: 1.25rem; font: 400 .95rem/1 var(--sans); color: var(--sable); }
@media (hover: none) { .visionneuse .precedent, .visionneuse .suivant { opacity: .45; } }

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

/* ── le thème WordPress : les articles, le blog et les pages de WordPress, dans la coquille du site ── */
.coquille { padding: clamp(6.5rem, 14vh, 9rem) var(--marge) var(--souffle); }
.article, .liste-articles, .page-wp { display: grid; gap: 1.3rem; max-width: 46rem; margin-inline: auto; }
.tete-article { display: grid; gap: .6rem; }
.tete-article h1, .liste-articles h1, .page-wp h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.corps-article { display: grid; gap: 1rem; line-height: 1.65; color: var(--sable); }
.corps-article :where(h2, h3, h4) { margin-top: .8rem; color: var(--ivoire); }
.corps-article h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.corps-article h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.corps-article img, .corps-article video, .corps-article iframe { max-width: 100%; height: auto; }
.corps-article a { border-bottom: 1px solid var(--or); }
.corps-article a:hover, .corps-article a:focus-visible { color: var(--or); }
.corps-article :where(ul, ol) { padding-left: 1.3rem; }
.corps-article blockquote { margin: 0; padding: .6rem 1rem; border-left: 2px solid var(--or); font: italic 400 1.2rem/1.45 var(--serif); }
.corps-article .wp-block-image, .corps-article figure { margin: 0; }
.corps-article figcaption { padding-top: .35rem; font: italic 400 1rem/1.3 var(--serif); color: var(--sable); }
.liste-articles ul { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.liste-articles li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--filet); }
.liste-articles li a { font: 400 clamp(1.2rem, 1.8vw, 1.45rem)/1.3 var(--serif); }
.liste-articles li a:hover, .liste-articles li a:focus-visible { color: var(--or); }
.liste-articles small { flex: none; color: var(--sable); }
.pagination-articles { display: flex; justify-content: space-between; gap: 1rem; }
.pagination-articles a { border-bottom: 1px solid var(--or); }
.article:has(.galerie-portfolio) { max-width: 72rem; }
.galerie-portfolio { columns: 3 16rem; column-gap: .8rem; }
.galerie-portfolio img { display: block; width: 100%; height: auto; margin-bottom: .8rem; break-inside: avoid; background: var(--noir); }
.m-ambre { --mur: #3d2815; }
.m-cuivre { --mur: #613c1d; }
.m-rouille { --mur: #4e201a; }
.m-brun { --mur: #411308; }
.m-nuit { --mur: #153141; }
.m-nil { --mur: #5b361b; }