/* =========================================================================
   Corpus & Artifex — feuille de style unique
   Grammaire visuelle reprise de la maquette de référence validée avec le
   client : fond anthracite uni, titres didone en capitales très grandes qui
   débordent sur la photo, texte gris en colonne étroite, ornements en traits
   fins, aucune couleur saturée. L'or du logo n'apparaît qu'en filet.
   Typographies : Bodoni Moda (titres) + Inter (texte).
   ========================================================================= */

/* --- 1. Jetons ---------------------------------------------------------- */
:root {
  --fond: #1A191C;
  --fond-2: #1F1E22;
  --fond-3: #141317;
  --encre: #E8E6E3;
  --encre-2: #A6A29C;
  --encre-3: #6F6B67;
  --or: #B99A55;
  --prune: #4A2352;
  --filet: rgba(232, 230, 227, 0.14);

  --ff-titre: "Fraunces", "Georgia", "Times New Roman", serif;
  --ff-texte: "Inter", "Helvetica Neue", Arial, sans-serif;

  --marge: clamp(1.25rem, 0.5rem + 3.5vw, 5.5rem);
  --section: clamp(4rem, 2rem + 6vw, 8.5rem);
  --transition: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre-2);
  font-family: var(--ff-texte);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.menu-ouvert { overflow: hidden; }

img, picture, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--encre); text-decoration: none; }

h1, h2, h3 {
  font-family: var(--ff-titre);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--encre);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0 0 0.45em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

h1 { font-size: clamp(1.95rem, 1.1rem + 3vw, 3.4rem); max-width: 20ch; line-height: 1.06; }
h2 {
  font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.3rem);
  font-weight: 500;
  line-height: 1.06;
  max-width: 24ch;
}
h3 {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.02em;
}
h4 {
  font-family: var(--ff-texte);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin: 0 0 1.4rem;
}

p { margin: 0 0 1.3em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--encre); font-weight: 400; }

::selection { background: var(--encre); color: var(--fond); }
:focus-visible { outline: 1px solid var(--or); outline-offset: 4px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--encre); color: var(--fond); padding: 0.8rem 1.2rem; }
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- 3. Grille ---------------------------------------------------------- */
.enveloppe { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--marge); }

.section { padding-block: var(--section); position: relative; }
.section--serre { padding-block: clamp(3.5rem, 2rem + 6vw, 8rem); }

/* Colonne de texte étroite, comme sur la référence : jamais toute la largeur */
.colonne { max-width: 46ch; }
.colonne--large { max-width: 52ch; }

.duo {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.duo > * { grid-row: 1; }
.duo__texte { grid-column: 1 / span 5; }
.duo__media { grid-column: 7 / span 6; max-height: 72vh; overflow: hidden; }
.duo--inverse .duo__texte { grid-column: 8 / span 5; }
.duo--inverse .duo__media { grid-column: 1 / span 6; max-height: 72vh; overflow: hidden; }
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
  .duo > * { grid-row: auto; }
  .duo__texte, .duo__media, .duo--inverse .duo__texte, .duo--inverse .duo__media { grid-column: 1; }
  .colonne { max-width: none; }
}

/* Titre de section : pleine largeur au-dessus du contenu, jamais dans la colonne */
.titre-section {
  margin-bottom: clamp(1.8rem, 1rem + 2.5vw, 3.2rem);
  max-width: 26ch;
}
.titre-section span { display: block; }
.titre-section span:nth-child(2) { padding-left: clamp(1rem, 5vw, 6rem); }

/* --- 4. Ornements en traits fins --------------------------------------- */
.eventail { display: block; width: min(100%, 820px); margin: clamp(1.5rem, 3vw, 3rem) auto 0; height: auto; color: var(--filet); }
.filet { height: 1px; background: var(--filet); border: 0; margin: 0; }

.etiquette {
  font-family: var(--ff-texte);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--encre-3);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.6rem;
}
.etiquette svg { width: 0.95rem; height: 0.95rem; color: var(--or); }

/* --- 5. Boutons --------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--filet);
  border-radius: 999px;
  color: var(--encre);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  background: transparent;
  cursor: pointer;
  font-family: var(--ff-texte);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.bouton svg { width: 0.95rem; height: 0.95rem; flex: none; opacity: 0.8; }
.bouton:hover { border-color: var(--encre); background: var(--encre); color: var(--fond); }
.bouton:hover svg { opacity: 1; }
.bouton--plein { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.bouton--plein:hover { background: transparent; color: var(--encre); border-color: var(--filet); }
.boutons { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* Lien texte souligné à l'apparition */
.lien {
  position: relative;
  color: var(--encre);
  padding-bottom: 2px;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lien::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--transition); }
.lien:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- 6. Navigation ------------------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: clamp(1rem, 2vw, 1.8rem) var(--marge);
  transition: background 0.4s ease, padding 0.4s ease;
}
.nav--compacte { background: rgba(26, 25, 28, 0.9); backdrop-filter: blur(12px); padding-block: 0.8rem; }

.nav__monogramme { display: block; line-height: 0; }
/* Même autocollant que dans le pied, en plus petit : le cercle noir du logo
   disparaîtrait sinon sur la barre anthracite. */
.nav__monogramme img {
  width: 72px; height: auto;
  filter:
    drop-shadow(0.8px 0 0 #FFFDF8) drop-shadow(-0.8px 0 0 #FFFDF8)
    drop-shadow(0 0.8px 0 #FFFDF8) drop-shadow(0 -0.8px 0 #FFFDF8)
    drop-shadow(0.6px 0.6px 0 #FFFDF8) drop-shadow(-0.6px 0.6px 0 #FFFDF8)
    drop-shadow(0.6px -0.6px 0 #FFFDF8) drop-shadow(-0.6px -0.6px 0 #FFFDF8);
  transition: transform var(--transition);
}
.nav__monogramme:hover img { transform: scale(1.06); }
.nav--compacte .nav__monogramme img { width: 56px; }
.nav__liens { display: flex; justify-content: center; gap: clamp(1rem, 2vw, 2.2rem); }
.nav__liens a {
  position: relative;
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--encre-2);
  padding-block: 0.3rem;
  white-space: nowrap;
}
.nav__liens a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--transition); }
.nav__liens a:hover, .nav__liens a[aria-current="page"] { color: var(--encre); }
.nav__liens a:hover::after, .nav__liens a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__droite { display: flex; justify-content: flex-end; align-items: center; gap: 0.8rem; }
.nav__tel { font-size: 0.92rem; color: var(--encre-2); }
.nav__tel:hover { color: var(--encre); }

.nav__burger { display: none; width: 44px; height: 44px; border: 1px solid var(--filet); border-radius: 999px; background: transparent; cursor: pointer; padding: 0; place-items: center; }
.nav__burger span { display: block; width: 15px; height: 1px; background: var(--encre); margin: 3px auto; transition: transform 0.35s ease, opacity 0.25s ease; }
body.menu-ouvert .nav__burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu-ouvert .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-ouvert .nav__burger span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__liens, .nav__tel, .nav__droite .bouton { display: none; }
  .nav__burger { display: grid; }
}

.menu-plein {
  position: fixed; inset: 0; z-index: 85;
  background: var(--fond);
  padding: 6rem var(--marge) 3rem;
  display: flex; flex-direction: column; justify-content: center; gap: 0.2rem;
  transform: translateY(-101%);
  visibility: hidden;
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.7s;
  overflow-y: auto;
}
body.menu-ouvert .menu-plein { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.menu-plein a {
  font-family: var(--ff-titre);
  text-transform: uppercase;
  font-size: clamp(1.6rem, 1rem + 4vw, 2.6rem);
  color: var(--encre-2);
  padding-block: 0.35rem;
  line-height: 1.1;
}
.menu-plein a:hover, .menu-plein a[aria-current="page"] { color: var(--encre); }
/* Le bouton du menu mobile est un <a> : il héritait de la typo géante des
   liens du menu. On lui redonne les dimensions d'un bouton. */
.menu-plein .bouton {
  align-self: flex-start;
  margin-top: 1.8rem;
  font-family: var(--ff-texte);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0.06em;
  padding: 0.95rem 1.7rem;
  color: var(--encre);
}
.menu-plein .bouton svg { width: 0.95rem; height: 0.95rem; }

/* --- 7. Bandeau d'accueil ---------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(6rem, 14vh, 9rem) 0 clamp(2rem, 5vh, 4rem);
  overflow: hidden;
}
.hero__titre {
  font-weight: 500;
  position: relative;
  z-index: 3;
  text-align: center;
  font-size: clamp(2rem, 8.4vw, 9.6rem);
  line-height: 0.9;
  margin: 0;
  padding-inline: var(--marge);
  pointer-events: none;
}
.hero__scene {
  position: relative;
  z-index: 2;
  margin-top: clamp(-3rem, -3vw, -1rem);
  height: clamp(300px, 46vh, 540px);
}
/* L'arche : photo verticale découpée en plein cintre */
.hero__arche {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(196px, 27vw, 348px);
  height: 100%;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--fond-2);
  z-index: 2;
}
.hero__arche img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; filter: contrast(1.04) saturate(1.02); }
.hero__arche::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(26,25,28,0.5), rgba(26,25,28,0) 34%, rgba(26,25,28,0.55));
}
/* Le logo complet, en filigrane derrière l'arche : jamais rogné */
.hero__fond {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(300px, 40vw, 600px);
  max-width: 88vw;
  opacity: 0.22;
  pointer-events: none;
  border-radius: 50%;
}

.hero__cote {
  position: absolute;
  z-index: 1;
  width: clamp(160px, 23vw, 350px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(0.25) brightness(1);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.hero__cote--gauche { left: 6%; bottom: 14%; }
.hero__cote--droite { right: 6%; bottom: 26%; }
@media (max-width: 900px) { .hero__cote { display: none; } }

.hero__pied {
  position: relative;
  z-index: 5;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.5rem;
  align-items: flex-end;
  justify-content: space-between;
}
.hero__pied p { max-width: 40ch; margin: 0; font-size: 0.95rem; }

/* --- 8. En-tête des pages intérieures ---------------------------------- */
.entete {
  position: relative;
  min-height: clamp(78vh, 88vh, 92vh);
  display: grid;
  align-items: end;
  padding: clamp(8rem, 16vh, 12rem) var(--marge) clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}
.entete__fond { position: absolute; inset: 0; z-index: 0; }
.entete__fond img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; filter: grayscale(0.3); }
.entete::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(26,25,28,0.75) 0%, rgba(26,25,28,0.35) 38%, rgba(26,25,28,0.94) 88%, var(--fond) 100%);
}
.entete__contenu { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; align-items: end; width: 100%; }
.entete h1 { grid-column: 1 / span 8; margin: 0; }
.entete__intro { grid-column: 9 / span 4; }
.entete__intro p { font-size: 0.95rem; margin: 0; }
@media (max-width: 900px) {
  .entete h1, .entete__intro { grid-column: 1 / -1; }
  .entete__intro { margin-top: 1.5rem; }
}

.ariane { position: absolute; top: clamp(6rem, 12vh, 9rem); left: var(--marge); z-index: 2; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--encre-3); }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; }
.ariane li + li::before { content: "/"; margin-right: 0.45rem; }
.ariane a { color: var(--encre-3); }
.ariane a:hover { color: var(--encre); }

/* Titre de page centré, façon page galerie de la référence */
.entete--centre { align-items: center; text-align: center; min-height: 72vh; }
.entete--centre .entete__contenu { display: block; }
.entete--centre h1 { font-weight: 500; font-size: clamp(2.6rem, 7.6vw, 6.4rem); max-width: 16ch; margin-inline: auto; line-height: 0.98; }
.entete--centre .entete__intro { max-width: 46ch; margin: 2rem auto 0; }

/* --- 9. Chiffres -------------------------------------------------------- */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.chiffre b { display: block; font-family: var(--ff-titre); font-weight: 400; font-size: clamp(2.4rem, 1rem + 4vw, 4.4rem); color: var(--encre); line-height: 1; }
.chiffre span { display: block; margin-top: 0.7rem; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--encre-3); }

/* --- 10. Listes et blocs de contenu ------------------------------------ */
.liste { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: 0.9rem; }
.liste li { position: relative; padding-left: 1.5rem; }
.liste li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 8px; height: 1px; background: var(--or); }

.etapes { list-style: none; counter-reset: e; margin: 0; padding: 0; }
.etapes li { counter-increment: e; display: grid; grid-template-columns: 4rem 1fr; gap: clamp(1rem, 2vw, 2.5rem); padding-block: clamp(1.4rem, 2vw, 2.2rem); border-top: 1px solid var(--filet); }
.etapes li:last-child { border-bottom: 1px solid var(--filet); }
.etapes li::before { content: counter(e, decimal-leading-zero); font-family: var(--ff-titre); font-size: 1.1rem; color: var(--encre-3); }
.etapes h3 { margin-bottom: 0.4rem; }
.etapes p { max-width: 52ch; margin: 0; }

.encart { border-left: 1px solid var(--or); padding: 0.2rem 0 0.2rem clamp(1rem, 2vw, 2rem); margin-block: clamp(1.5rem, 3vw, 2.5rem); }
.encart h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.encart p { max-width: 52ch; margin: 0; }

/* --- 11. Tarifs --------------------------------------------------------- */
.tarifs { margin: 0; }
.tarifs__ligne { display: flex; align-items: baseline; gap: 1.2rem; padding-block: clamp(0.9rem, 1.5vw, 1.4rem); border-top: 1px solid var(--filet); }
.tarifs__ligne:last-child { border-bottom: 1px solid var(--filet); }
.tarifs__ligne dt { margin: 0; font-family: var(--ff-titre); font-weight: 500; text-transform: uppercase; font-size: clamp(0.98rem, 0.94rem + 0.4vw, 1.2rem); letter-spacing: 0.01em; color: var(--encre); }
.tarifs__ligne .points { flex: 1; }
.tarifs__ligne dd { margin: 0; font-family: var(--ff-titre); font-weight: 500; font-size: clamp(0.98rem, 0.94rem + 0.4vw, 1.2rem); color: var(--encre); white-space: nowrap; }
.tarifs__note { margin-top: 1.4rem; font-size: 0.86rem; color: var(--encre-3); max-width: 52ch; }

/* --- 12. Photos --------------------------------------------------------- */
figure { margin: 0; }
.photo { overflow: hidden; background: var(--fond-2); position: relative; }
/* L'image dépasse son cadre : c'est ce débord qui autorise le défilement interne */
.photo img[data-parallaxe], .duo__media img[data-parallaxe], .entete__fond img[data-parallaxe] {
  height: 118%;
  width: 100%;
  object-fit: cover;
  will-change: transform;
}
.duo__media { position: relative; overflow: hidden; }
.duo__media img { height: 118%; }
.photo img { width: 100%; height: 100%; max-height: 76vh; object-fit: cover; filter: grayscale(0.15); transition: transform 1.2s cubic-bezier(0.22,1,0.36,1), filter var(--transition); }
.photo:hover img { filter: grayscale(0); }
.photo--arche { border-radius: 999px 999px 0 0; }
.photo figcaption { margin-top: 0.9rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--encre-3); }

/* Grappe asymétrique */
.grappe { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.8rem, 1.6vw, 2rem); }
.grappe .g1 { grid-column: 1 / span 5; aspect-ratio: 3 / 4; }
.grappe .g2 { grid-column: 7 / span 4; aspect-ratio: 1 / 1; margin-top: clamp(3rem, 10vw, 9rem); }
.grappe .g3 { grid-column: 11 / span 2; aspect-ratio: 2 / 3; margin-top: clamp(1rem, 4vw, 4rem); }
.grappe .g4 { grid-column: 2 / span 3; aspect-ratio: 1 / 1; margin-top: clamp(-3rem, -3vw, 0rem); }
.grappe .g5 { grid-column: 6 / span 6; aspect-ratio: 4 / 3; }
@media (max-width: 820px) {
  .grappe { grid-template-columns: repeat(2, 1fr); }
  .grappe figure { grid-column: span 1 !important; margin-top: 0 !important; aspect-ratio: 3 / 4 !important; }
}

/* Galerie et filtres */
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.2rem, 3vw, 3.2rem); margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.filtres button {
  background: none; border: 0; padding: 0.4rem 0; cursor: pointer;
  font-family: var(--ff-texte); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--encre-3);
  display: inline-flex; align-items: center; gap: 0.55rem;
  transition: color var(--transition);
}
.filtres button svg { width: 0.9rem; height: 0.9rem; }
.filtres button[aria-pressed="true"], .filtres button:hover { color: var(--encre); }

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: clamp(0.8rem, 1.5vw, 1.6rem); }
.galerie figure { overflow: hidden; background: var(--fond-2); }
.galerie img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; filter: grayscale(0.2); transition: transform 1.2s cubic-bezier(0.22,1,0.36,1), filter var(--transition); }
.galerie figure:hover img { transform: scale(1.04); filter: grayscale(0); }
.galerie figcaption { padding: 0.9rem 0 1.4rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--encre-3); }
.galerie figcaption b { display: block; font-family: var(--ff-titre); font-size: 1rem; letter-spacing: 0.02em; color: var(--encre); font-weight: 400; margin-bottom: 0.3rem; }
.galerie figure[hidden] { display: none; }

/* --- 13. FAQ ------------------------------------------------------------ */
.faq details { border-top: 1px solid var(--filet); }
.faq details:last-of-type { border-bottom: 1px solid var(--filet); }
.faq summary {
  display: flex; align-items: baseline; gap: 1.5rem;
  padding-block: clamp(1.2rem, 2vw, 1.8rem);
  font-family: var(--ff-titre); text-transform: uppercase;
  font-size: clamp(1rem, 0.96rem + 0.45vw, 1.3rem);
  font-weight: 500;
  color: var(--encre); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-family: var(--ff-texte); font-weight: 200; font-size: 1.4rem; color: var(--encre-3); transition: transform 0.4s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__reponse { padding-bottom: 1.8rem; max-width: 62ch; }

/* --- 14. Avis ----------------------------------------------------------- */
.avis blockquote { margin: 0 0 1.2rem; font-family: var(--ff-titre); font-size: clamp(1.2rem, 1rem + 1vw, 1.9rem); line-height: 1.3; color: var(--encre); text-transform: none; }
.avis figcaption { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--encre-3); }
.emplacement-avis { border: 1px dashed var(--filet); padding: clamp(1.4rem, 3vw, 2.4rem); color: var(--encre-3); font-size: 0.9rem; }

/* --- 15. Formulaires ---------------------------------------------------- */
.formulaire { display: grid; gap: 1.6rem; max-width: 46rem; }
.champ { display: grid; gap: 0.5rem; }
.champ label { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--encre-3); }
.champ input, .champ select, .champ textarea {
  font-family: var(--ff-texte); font-size: 0.95rem; font-weight: 300; color: var(--encre);
  background: transparent; border: 0; border-bottom: 1px solid var(--filet);
  padding: 0.7rem 0; width: 100%; border-radius: 0;
  transition: border-color var(--transition);
}
.champ textarea { min-height: 8rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--encre); }
.champ select option { background: var(--fond-2); }
.champ--double { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.6rem; }
.champ-case { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.85rem; }
.champ-case .lien { text-transform: none; letter-spacing: 0; font-size: inherit; }
.champ-case input { width: 1rem; height: 1rem; margin-top: 0.3rem; accent-color: var(--or); flex: none; }
.pot-de-miel { position: absolute; left: -9999px; }

/* --- 16. Coordonnées ---------------------------------------------------- */
.nap { font-style: normal; display: grid; gap: 1.6rem; }
.nap b { display: block; font-family: var(--ff-texte); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--encre-3); margin-bottom: 0.4rem; }
.nap a { color: var(--encre); }
.nap a:hover { color: var(--or); }
.carte-gmaps { border: 1px solid var(--filet); overflow: hidden; }
.carte-gmaps iframe { width: 100%; height: clamp(280px, 40vh, 460px); border: 0; display: block; filter: grayscale(1) invert(0.9) contrast(0.85); }

/* --- 17. Pied de page --------------------------------------------------- */
.page-suivante { display: block; text-align: center; padding-block: clamp(4rem, 3rem + 7vw, 10rem); border-top: 1px solid var(--filet); }
.page-suivante small { font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--encre-3); }
.page-suivante strong { display: block; margin-top: 1rem; font-family: var(--ff-titre); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 1rem + 4.4vw, 4.6rem); line-height: 1; color: var(--encre-2); transition: color var(--transition); }
.page-suivante:hover strong { color: var(--encre); }

.pied { border-top: 1px solid var(--filet); padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem; }
.pied__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: clamp(2rem, 4vw, 4rem); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pied a { color: var(--encre-2); font-size: 0.9rem; }
.pied a:hover { color: var(--encre); }
.pied__marque img {
  width: 96px;
  height: auto;
  margin-bottom: 1.2rem;
  /* Contour blanc épais qui épouse la forme du logo : effet autocollant,
     indispensable sur fond anthracite où le cercle noir disparaissait. */
  filter:
    drop-shadow(0.8px 0 0 #FFFDF8) drop-shadow(-0.8px 0 0 #FFFDF8)
    drop-shadow(0 0.8px 0 #FFFDF8) drop-shadow(0 -0.8px 0 #FFFDF8)
    drop-shadow(0.6px 0.6px 0 #FFFDF8) drop-shadow(-0.6px 0.6px 0 #FFFDF8)
    drop-shadow(0.6px -0.6px 0 #FFFDF8) drop-shadow(-0.6px -0.6px 0 #FFFDF8);
}
.pied__marque p { font-size: 0.86rem; max-width: 34ch; }
.pied__bas { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between; font-size: 0.78rem; color: var(--encre-3); }
.pied__bas a { font-size: 0.78rem; color: var(--encre-3); }
.pied__bas a:hover { color: var(--encre); }
.reseaux { display: flex; gap: 1.4rem; margin-top: 1.4rem; }
.reseaux a { color: var(--encre-2); }
.reseaux a:hover { color: var(--encre); }
.reseaux svg { width: 1.05rem; height: 1.05rem; }

/* --- 18. Barre mobile --------------------------------------------------- */
.barre-mobile { position: fixed; inset: auto 0 0 0; z-index: 80; display: none; gap: 0.6rem; padding: 0.7rem; background: rgba(26,25,28,0.95); backdrop-filter: blur(12px); border-top: 1px solid var(--filet); }
.barre-mobile .bouton { flex: 1; justify-content: center; }
@media (max-width: 720px) { .barre-mobile { display: flex; } body { padding-bottom: 4.6rem; } }

/* --- 19. Curseur (repris du site Le Torey, aux couleurs de Corpus) ------ */
.curseur { position: fixed; top: 0; left: 0; z-index: 1100; pointer-events: none; }
.curseur__rond, .curseur__point { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); }
.curseur__rond {
  width: 34px; height: 34px;
  border: 1px solid var(--encre-2);
  border-radius: 50%;
  transition: width 0.3s var(--courbe), height 0.3s var(--courbe), background 0.3s var(--courbe), border-color 0.3s var(--courbe);
}
.curseur__point { width: 5px; height: 5px; background: var(--encre); border-radius: 50%; transition: opacity 0.3s var(--courbe); }
body.curseur-actif .curseur__rond { width: 62px; height: 62px; background: var(--or); border-color: var(--or); }
body.curseur-actif .curseur__point { opacity: 0; }
.curseur__fleche {
  position: absolute; top: 0; left: 0;
  width: 22px; height: 22px;
  color: var(--fond);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  transition: opacity 0.3s var(--courbe), transform 0.3s var(--courbe);
}
body.curseur-actif .curseur__fleche { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none), (max-width: 900px) { .curseur { display: none; } }
html.sans-anim .curseur { display: none !important; }

/* --- 20. Animations ----------------------------------------------------- */
html.js [data-anim] { opacity: 0; will-change: transform, opacity; }
html.js [data-anim="monte"] { transform: translateY(34px); }
html.js [data-anim="gauche"] { transform: translateX(-38px); }
html.js [data-anim="droite"] { transform: translateX(38px); }
html.js [data-anim="zoom"] { transform: scale(0.96); }
html.sans-anim [data-anim] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-anim] { opacity: 1 !important; transform: none !important; }
  .curseur { display: none; }
}

/* --- 21. Divers --------------------------------------------------------- */
.ancre-retour { position: fixed; right: var(--marge); bottom: clamp(1.2rem, 3vw, 2.5rem); z-index: 70; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--filet); border-radius: 50%; color: var(--encre-2); background: rgba(26,25,28,0.8); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease, color var(--transition), border-color var(--transition); }
.ancre-retour.visible { opacity: 1; visibility: visible; }
.ancre-retour:hover { color: var(--encre); border-color: var(--encre); }
.ancre-retour svg { width: 1rem; height: 1rem; }
@media (max-width: 720px) { .ancre-retour { bottom: 5.6rem; } }

.tableau-conteneur { overflow-x: auto; }
.tableau-simple { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tableau-simple th, .tableau-simple td { text-align: left; padding: 1rem 1.2rem 1rem 0; border-bottom: 1px solid var(--filet); vertical-align: top; }
.tableau-simple th { font-family: var(--ff-texte); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--encre-3); }

.maillage { display: grid; gap: 0; }
.maillage a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.3rem; border-top: 1px solid var(--filet); color: var(--encre-2); font-size: 0.95rem; transition: color var(--transition), padding var(--transition); }
.maillage a:last-child { border-bottom: 1px solid var(--filet); }
.maillage a:hover { color: var(--encre); padding-left: 0.6rem; }
.maillage svg { width: 1rem; height: 1rem; flex: none; opacity: 0.6; }

.article-corps { max-width: 62ch; }
.article-corps h2 { margin-top: 2.2em; font-size: clamp(1.6rem, 1rem + 2.4vw, 2.6rem); }
.article-meta { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--encre-3); margin-bottom: 1.5rem; }

.cta { text-align: center; padding-block: clamp(5rem, 4rem + 8vw, 11rem); border-top: 1px solid var(--filet); }
.cta h2 { max-width: 16ch; margin-inline: auto; }
.cta p { max-width: 46ch; margin-inline: auto; }
.cta .boutons { justify-content: center; margin-top: 2.2rem; }

/* --- 22. Liste des prestations (accueil) -------------------------------- */
.prestations { display: grid; }
.presta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto 1.4rem;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.3rem, 2.4vw, 2.2rem);
  border-top: 1px solid var(--filet);
  color: var(--encre-2);
  transition: padding var(--transition), color var(--transition);
}
.prestations .presta:last-child { border-bottom: 1px solid var(--filet); }
.presta__nom { font-family: var(--ff-titre); font-weight: 500; text-transform: uppercase; font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem); color: var(--encre); line-height: 1.05; }
.presta__detail { font-size: 0.9rem; }
.presta__prix { font-family: var(--ff-titre); font-size: clamp(1rem, 1rem + 0.4vw, 1.3rem); color: var(--encre); white-space: nowrap; }
.presta svg { width: 1rem; height: 1rem; opacity: 0.35; transition: opacity var(--transition), transform var(--transition); }
.presta:hover { padding-left: 0.8rem; color: var(--encre); }
.presta:hover svg { opacity: 1; transform: translateX(4px); }
@media (max-width: 760px) {
  .presta { grid-template-columns: 1fr auto; gap: 0.4rem 1rem; }
  .presta__detail { grid-column: 1 / -1; }
  .presta svg { display: none; }
}


/* --- 23. Trame graphique : numéros, filets, ornements ------------------- */
main { counter-reset: sec; }

.titre-section {
  position: relative;
  padding-top: 2.6rem;
}
.titre-section::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--ff-texte);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--or);
}
.titre-section::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 3.2rem;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--filet), transparent 70%);
}

/* Ornement de séparation entre deux sections */
.ornement {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-inline: var(--marge);
  max-width: 1440px;
  margin-inline: auto;
  color: var(--filet);
}
.ornement::before, .ornement::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.ornement span {
  width: 7px; height: 7px;
  border: 1px solid var(--or);
  transform: rotate(45deg);
  flex: none;
}

/* Sections sans photo : simple fond, aucun filigrane */
.section--filigrane { position: relative; }

/* Rail vertical dans la marge : le nom de la marque, à la verticale */
.rail {
  position: absolute;
  left: calc(var(--marge) * 0.28);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 0.64rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--encre-3);
  opacity: 0.6;
  pointer-events: none;
}
.rail::after {
  content: "";
  display: block;
  width: 1px;
  height: clamp(2rem, 6vw, 5rem);
  margin: 1rem auto 0;
  background: linear-gradient(var(--filet), transparent);
}
@media (max-width: 1100px) { .rail { display: none; } }

/* Bande de marbre : séparateur texturé, repris de l'affiche tarifaire */
.bande-marbre {
  height: clamp(90px, 14vh, 190px);
  background-image: linear-gradient(rgba(26,25,28,0.72), rgba(26,25,28,0.92)), url("../img/texture-marbre-bande.webp");
  background-size: cover;
  background-position: center;
  border-block: 1px solid var(--filet);
}

/* La colonne de texte seule ne laisse plus un vide : un panneau texturé l'accompagne */
.duo__vide {
  grid-column: 7 / span 6;
  align-self: stretch;
  min-height: clamp(180px, 26vh, 320px);
  background-image: linear-gradient(rgba(26,25,28,0.7), rgba(26,25,28,0.94)), url("../img/texture-marbre-carre.webp");
  background-size: 420px;
  border: 1px solid var(--filet);
  position: relative;
}
.duo__vide::after {
  content: "";
  position: absolute; inset: 1.2rem;
  border: 1px solid rgba(185,154,85,0.18);
}

@media (max-width: 900px) { .duo__vide { display: none; } }


/* --- 24. Schéma technique (dessin vectoriel) ---------------------------- */
.schema { margin: 0; padding: clamp(1.2rem, 2.5vw, 2.6rem); display: grid; gap: 1.2rem; width: 100%; }
.schema svg { width: 100%; height: auto; display: block; }
.schema figcaption {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--encre-3);
  max-width: 36ch;
  border-top: 1px solid var(--filet);
  padding-top: 0.9rem;
}
.duo__vide:has(.schema) { display: grid; place-items: center; min-height: clamp(360px, 46vh, 560px); }
/* Un panneau qui reçoit le formulaire redevient un simple fond sobre */
.duo__vide:has(.formulaire) { background: none; border: 0; min-height: 0; padding: 0; }
.duo__vide:has(.formulaire)::after { display: none; }
.duo__vide:has(.formulaire) .formulaire { max-width: none; }


/* --- 25. Mosaïque de photos (panneaux) ---------------------------------- */
.mosaique { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.5rem, 1vw, 0.9rem); width: 100%; padding: clamp(0.6rem, 1.2vw, 1rem); }
.mosaique__case { margin: 0; overflow: hidden; background: var(--fond-3); }
.mosaique__case img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(0.1); transition: transform 1s cubic-bezier(0.22,1,0.36,1); }
.mosaique__case:hover img { transform: scale(1.05); }
.mosaique__case figcaption { padding: 0.55rem 0 0.9rem; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--encre-3); }
.duo__vide:has(.mosaique) { background: none; border: 0; min-height: 0; }
.duo__vide:has(.mosaique)::after { display: none; }


/* --- 26. Bloc d'informations en deux colonnes -------------------------- */
.infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); width: 100%; padding: clamp(1.2rem, 2.4vw, 2.4rem); }
.infos__col h3 { font-size: 0.72rem; font-family: var(--ff-texte); font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--or); margin-bottom: 1.2rem; }
.infos__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.infos__col li { position: relative; padding-left: 1.4rem; font-size: 0.92rem; line-height: 1.6; border-top: 1px solid var(--filet); padding-top: 0.9rem; }
.infos__col li:first-child { border-top: 0; padding-top: 0; }
.infos__col li::before { content: ""; position: absolute; left: 0; top: 1.5rem; width: 8px; height: 1px; background: var(--or); }
.infos__col li:first-child::before { top: 0.62rem; }
.duo__vide:has(.infos) { background: none; border: 0; min-height: 0; }
.duo__vide:has(.infos)::after { display: none; }
@media (max-width: 600px) { .infos { grid-template-columns: 1fr; } }

/* --- Avis repris de la fiche Google ------------------------------------- */
.avis-liste { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.avis { margin: 0; padding: 1.6rem 1.5rem; border: 1px solid var(--filet); background: var(--fond-2); }
.avis p { font-size: 0.95rem; color: var(--encre); margin: 0 0 1rem; }
.avis cite { font-style: normal; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--or); }
.note-avis { margin-top: 1.4rem; font-size: 0.82rem; color: var(--encre-3); }

/* --- Horaires de la boutique -------------------------------------------- */
.horaires { margin-top: 2rem; }
.horaires b { display: block; font-family: var(--ff-titre); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-3); margin-bottom: 0.7rem; }
.horaires table { width: 100%; border-collapse: collapse; max-width: 24rem; }
.horaires th, .horaires td { text-align: left; padding: 0.55rem 0; border-bottom: 1px solid var(--filet); font-weight: 400; font-size: 0.9rem; }
.horaires th { color: var(--encre-2); }
.horaires td { color: var(--encre); text-align: right; }
.horaires small { display: block; margin-top: 0.8rem; font-size: 0.78rem; color: var(--encre-3); max-width: 30ch; }

/* --- Réservation en ligne (Cal.com chargé au clic) ---------------------- */
.reservation { border: 1px solid var(--filet); background: var(--fond-2); }
.reservation__annonce { padding: clamp(1.8rem, 4vw, 2.8rem); display: grid; gap: 1rem; justify-items: start; }
.reservation__annonce p { max-width: 58ch; margin: 0; }
.reservation__mention { font-size: 0.8rem; color: var(--encre-3); }
.reservation__cadre { width: 100%; height: clamp(620px, 78vh, 880px); border: 1px solid var(--filet); display: block; background: var(--fond-2); }

/* --- Agenda de réservation ---------------------------------------------- */
.reservation { border: 1px solid var(--filet); background: var(--fond-2); }
.reservation__annonce { display: grid; gap: clamp(2rem, 4vw, 3rem); padding: clamp(1.8rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.reservation__etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.reservation__etapes li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.reservation__n { font-family: var(--ff-titre); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--or); padding-top: 0.18rem; }
.reservation__etapes b { display: block; font-family: var(--ff-titre); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.3rem; }
.reservation__etapes p { margin: 0; font-size: 0.9rem; color: var(--encre-2); max-width: 40ch; }
.reservation__action { display: grid; gap: 1rem; justify-items: start; align-content: center; padding-left: clamp(0rem, 2vw, 2rem); border-left: 1px solid var(--filet); }
.reservation__mention { font-size: 0.8rem; color: var(--encre-3); max-width: 46ch; margin: 0; }
.reservation__agenda { min-height: clamp(620px, 78vh, 900px); padding: clamp(0.6rem, 2vw, 1.2rem); }
@media (max-width: 860px) { .reservation__action { border-left: 0; padding-left: 0; } }
/* Agenda affiché d'emblée : les trois étapes passent en bandeau au-dessus du
   calendrier, qui occupe toute la largeur du cadre. */
.reservation--directe { display: grid; }
.reservation--directe .reservation__etapes {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  border-bottom: 1px solid var(--filet);
}
.reservation--directe .reservation__mention {
  max-width: none;
  padding: 0 clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.4rem, 3vw, 2rem);
}

/* --- Boutique : réserver en ligne, régler au retrait --------------------- */
.etapes-boutique { list-style: none; counter-reset: pas; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.etapes-boutique li { counter-increment: pas; position: relative; padding-top: 2.4rem; border-top: 1px solid var(--filet); }
.etapes-boutique li::before { content: counter(pas, decimal-leading-zero); position: absolute; top: 0.8rem; left: 0; font-family: var(--ff-titre); font-size: 0.8rem; letter-spacing: 0.12em; color: var(--or); }
.etapes-boutique b { display: block; font-family: var(--ff-titre); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
.etapes-boutique p { margin: 0; font-size: 0.9rem; color: var(--encre-2); }

.boutique__tete { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: end; justify-content: space-between; margin-bottom: 2rem; }
.recherche input { background: var(--fond-2); border: 1px solid var(--filet); color: var(--encre); font: inherit; font-size: 0.92rem; padding: 0.7rem 1rem; width: min(100%, 22rem); border-radius: 2px; }
.recherche input::placeholder { color: var(--encre-3); }
.recherche input:focus-visible { outline: 1px solid var(--or); outline-offset: 2px; }

.filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.filtre { background: transparent; border: 1px solid var(--filet); color: var(--encre-2); font: inherit; font-size: 0.8rem; letter-spacing: 0.04em; padding: 0.45rem 0.9rem; border-radius: 999px; cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition); }
.filtre span { color: var(--encre-3); font-size: 0.72rem; margin-left: 0.35rem; }
.filtre:hover { color: var(--encre); border-color: var(--encre-3); }
.filtre.est-actif { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.filtre.est-actif span { color: var(--fond); opacity: 0.6; }

.boutique__compte { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-3); margin: 0 0 1.4rem; }
.boutique__vide { color: var(--encre-2); max-width: 46ch; }

.grille-produits { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.produit { border: 1px solid var(--filet); background: var(--fond-2); display: flex; flex-direction: column; overflow: hidden; }
.produit[hidden] { display: none; }
.produit__voir { display: block; padding: 0; border: 0; background: #0E0D10; cursor: pointer; width: 100%; }
.produit__photo { width: 100%; display: block; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.produit__voir:hover .produit__photo { transform: scale(1.05); }
.produit__voir:focus-visible { outline: 1px solid var(--or); outline-offset: -2px; }
.produit__bas { padding: 0.9rem 1rem 1rem; display: grid; gap: 0.45rem; align-content: start; flex: 1; }
.produit__bas h3 { font-family: var(--ff-titre); font-size: 0.95rem; font-weight: 600; line-height: 1.25; margin: 0; }
.produit__prix { margin: 0; font-size: 0.82rem; color: var(--or); letter-spacing: 0.04em; }
.produit__ajout { margin-top: auto; background: transparent; border: 1px solid var(--filet); color: var(--encre); font: inherit; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.5rem 0.8rem; cursor: pointer; transition: background var(--transition), color var(--transition); }
.produit__ajout:hover { background: var(--encre); color: var(--fond); }

/* Fiche produit en panneau */
.fiche { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.fiche[hidden] { display: none; }
.fiche__fond { position: absolute; inset: 0; background: rgba(8, 7, 9, 0.82); backdrop-filter: blur(6px); }
.fiche__panneau { position: relative; z-index: 1; background: var(--fond-2); border: 1px solid var(--filet); max-width: 54rem; width: 100%; max-height: 88vh; overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.fiche__image img { width: 100%; height: 100%; object-fit: cover; display: block; background: #0E0D10; }
.fiche__texte { padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; gap: 0.9rem; align-content: start; }
.fiche__famille { margin: 0; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-3); }
.fiche__texte h2 { font-family: var(--ff-titre); font-size: clamp(1.4rem, 1rem + 1.4vw, 1.9rem); font-weight: 600; margin: 0; }
.fiche__prix { margin: 0; color: var(--or); font-size: 1.05rem; }
.fiche__specs { margin: 0.6rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.2rem; font-size: 0.86rem; }
.fiche__specs dt { color: var(--encre-3); }
.fiche__specs dd { margin: 0; color: var(--encre-2); }
.fiche__note { margin: 0; font-size: 0.78rem; color: var(--encre-3); }
.fiche__fermer { position: absolute; top: 0.4rem; right: 0.7rem; z-index: 2; background: transparent; border: 0; color: var(--encre); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem; }
body.fiche-ouverte { overflow: hidden; }

/* Panier flottant */
.panier { position: fixed; right: clamp(0.8rem, 2vw, 1.6rem); bottom: clamp(0.8rem, 2vw, 1.6rem); z-index: 55; width: min(21rem, calc(100vw - 1.6rem)); background: var(--fond-2); border: 1px solid var(--or); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); }
.panier[hidden] { display: none; }
.panier__tete { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; border-bottom: 1px solid var(--filet); font-family: var(--ff-titre); font-size: 0.9rem; }
.panier__reduire { background: transparent; border: 0; color: var(--encre-3); font: inherit; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.panier__liste { list-style: none; margin: 0; padding: 0.6rem; display: grid; gap: 0.4rem; max-height: 15rem; overflow: auto; }
.panier__liste li { display: grid; grid-template-columns: 34px 1fr auto; gap: 0.6rem; align-items: center; font-size: 0.84rem; }
.panier__liste img { width: 34px; height: 34px; object-fit: cover; background: #0E0D10; }
.panier__retirer { background: transparent; border: 0; color: var(--encre-3); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; }
.panier__retirer:hover { color: var(--encre); }
.panier__bas { padding: 0.8rem 1rem 1rem; border-top: 1px solid var(--filet); display: grid; gap: 0.6rem; }
.panier__total { margin: 0; font-size: 0.82rem; color: var(--or); letter-spacing: 0.04em; }
.panier__vider { background: transparent; border: 0; color: var(--encre-3); font: inherit; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.panier__vider:hover { color: var(--encre); }
.panier.est-reduit .panier__liste, .panier.est-reduit .panier__bas { display: none; }

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

/* --- Page d'un bijou ----------------------------------------------------- */
.entete--produit { min-height: 0; padding-block: clamp(5.5rem, 4rem + 4vw, 7rem) 0; }
.section--haut { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.produit-page { display: grid; gap: clamp(2rem, 4vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.produit-page__image { margin: 0; border: 1px solid var(--filet); background: #0E0D10; overflow: hidden; }
.produit-page__image img { width: 100%; height: auto; display: block; aspect-ratio: 1/1; object-fit: cover; }
.produit-page__texte { display: grid; gap: 1rem; align-content: start; }
.produit-page__famille { margin: 0; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or); }
.produit-page__texte h1 { font-family: var(--ff-titre); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); font-weight: 600; line-height: 1.12; margin: 0; }
.produit-page__prix { margin: 0; font-size: 1.3rem; color: var(--encre); }
.produit-page__texte p { max-width: 52ch; }
.produit-page__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.6rem; }
.produit-page__actions .bouton { cursor: pointer; }
.produit-page__note { font-size: 0.82rem; color: var(--encre-3); max-width: 46ch; }
.produit__voir { display: block; }
.produit__bas h3 a { color: inherit; }
.produit__bas h3 a:hover { color: var(--or); }