*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:125px}body{margin:0;color:#202020;background:#fff;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}body:has(dialog[open]){overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid #997044;outline-offset:5px}button{border-radius:0}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}h2{font-size:clamp(30px,3.4vw,50px);line-height:1.18;letter-spacing:-.035em}.eyebrow{font-size:12px;letter-spacing:.19em;line-height:1.5}.header{position:absolute;z-index:20;top:0;left:0;width:100%;color:white;border-bottom:1px solid #ffffff40;background:linear-gradient(#0003,transparent)}.header-row{height:90px;padding:0 3.7vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.header-row>:last-child{justify-self:end}.wordmark{font-size:clamp(18px,2vw,31px);font-weight:600;letter-spacing:.11em;white-space:nowrap}.quiet{display:inline-flex;align-items:center;gap:12px;background:none;border:0;padding:8px 0;font-size:14px}.menu-trigger{justify-self:start}.hamburger{width:20px;height:10px;border-top:1px solid;border-bottom:1px solid}.desktop-links{display:flex;justify-content:center;gap:40px;padding:0 20px 20px;font-size:13px}.desktop-links a:hover{text-decoration:underline;text-underline-offset:5px}.hero{min-height:720px;height:100svh;position:relative;isolation:isolate;color:white;background:#657d8c;overflow:hidden}.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}.hero-video{z-index:-2;opacity:0}.hero.is-playing .hero-video{opacity:1}.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0008,transparent 56%)}.hero-copy{position:absolute;bottom:100px;left:7vw;max-width:620px}.hero-copy h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,5.1vw,76px);line-height:1.05;letter-spacing:-.035em;margin:18px 0 28px}.light-button,.dark-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 28px;border:1px solid #fff;font-size:14px;line-height:1.4;transition:background .25s}.light-button{color:#fff;background:#0001}.light-button:hover{background:white;color:#222}.dark-button{background:#202020;color:#fff;border-color:#202020}.dark-button:hover{background:#454545}.hero-controls{position:absolute;bottom:25px;left:3.7vw;right:3.7vw;display:flex;align-items:center;justify-content:space-between}.slide-controls{display:flex;align-items:center;gap:25px;font-size:12px;letter-spacing:.1em}.slide-controls button{font-size:22px;padding:4px 10px}.section{padding:95px 3.7vw}.section-heading{text-align:center;max-width:900px;margin:0 auto 65px}.section-heading h2{margin:16px 0 20px}.section-heading>p:last-child:not(.eyebrow){color:#696969;font-size:16px}.collection-toolbar{display:flex;justify-content:space-between;border-bottom:1px solid #ddd;padding-bottom:17px;margin-bottom:24px;font-size:13px}.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.product-image{width:100%;aspect-ratio:3/4;position:relative;padding:0;overflow:hidden;border:0;background:#f1f0ed}.product-image img{width:100%;height:100%;object-fit:cover;object-position:76% center;transition:transform .7s}.product-image:hover img{transform:scale(1.045)}.product-image span{position:absolute;bottom:16px;left:18px;color:white;font-size:12px;text-shadow:0 1px 6px #000}.view-two img{object-position:68% center}.view-three img{object-position:82% center}.view-four img{object-position:72% center}.product-meta{display:flex;justify-content:space-between;align-items:start;gap:10px;margin-top:18px}.product-meta h3{font-size:15px}.product-meta p{font-size:12px;color:#777;margin-top:4px}.product-meta>span{font-size:12px;white-space:nowrap;padding-top:3px}.maison{display:grid;grid-template-columns:1fr 1fr;background:#f6f5f2}.maison-image{min-height:650px;overflow:hidden}.maison-image img{width:100%;height:100%;object-fit:cover;object-position:78% center}.maison-copy{align-self:center;padding:80px 6.5vw}.maison-copy h2{font-family:Georgia,serif;font-size:clamp(38px,4vw,62px);margin:25px 0 30px}.maison-copy>p:not(.eyebrow){max-width:450px;color:#666;margin:0 0 20px;font-size:15px}.underlined{display:inline-block;border-bottom:1px solid;padding-bottom:5px;margin-top:20px;font-size:14px}.values{display:grid;grid-template-columns:repeat(3,1fr);max-width:1250px;margin:auto}.values article{padding:25px 45px;border-right:1px solid #ddd}.values article:last-child{border:0}.values article>span{font-size:12px;color:#888}.values h3{font-family:Georgia,serif;font-size:30px;margin:30px 0 15px}.values p{font-size:15px;color:#666}.closing{text-align:center;background:#f4f4f3;padding:95px 20px}.closing h2{font-family:Georgia,serif;font-size:clamp(40px,5vw,70px);margin:24px 0 35px}footer{padding:65px 5vw 25px}.footer-mark{display:block;text-align:center;font-size:24px;letter-spacing:.13em;font-weight:600;margin-bottom:70px}.footer-columns{display:grid;grid-template-columns:repeat(3,1fr);max-width:1200px;margin:auto;gap:30px}.footer-columns h3{font-size:14px;margin-bottom:20px}.footer-columns a,.footer-columns p,.text-button{display:block;font-size:13px;color:#666;margin:10px 0}.text-button{border:0;background:none;padding:0}.footer-bottom{border-top:1px solid #ddd;margin-top:55px;padding-top:25px;display:flex;justify-content:space-between;font-size:12px;color:#777}dialog{border:0;padding:0;max-height:100svh;color:#222}dialog::backdrop{background:#0006}.dialog-close{position:absolute;right:22px;top:15px;border:0;background:#fff9;font-size:30px;z-index:2;width:40px;height:40px;line-height:1}.side-dialog{margin:0;width:min(440px,100%);height:100svh;max-width:100%;padding:85px 40px}.side-dialog nav{display:flex;flex-direction:column;gap:25px;margin-top:50px;font-size:25px}.bag{margin-left:auto;margin-right:0}.bag h2{font-size:30px;margin-bottom:35px}.bag-row{padding:20px 0;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;gap:10px;font-size:14px}.bag-row button{border:0;background:none;font-size:12px;text-decoration:underline}.bag-note{font-size:13px;color:#777;margin-top:30px}#bagTotal{font-weight:bold;margin-top:25px}.product-dialog{width:min(900px,92vw)}.product-dialog[open]{display:grid;grid-template-columns:1fr 1fr}.product-dialog>img{width:100%;height:100%;min-height:450px;object-fit:cover;object-position:75% center}.detail-copy{padding:70px 40px}.detail-copy h2{font-family:Georgia,serif;margin:15px 0 25px;font-size:40px}.detail-copy>p:not(.eyebrow){font-size:15px;color:#666}.detail-copy strong{display:block;margin:25px 0}.detail-copy .dark-button{width:100%}#addedStatus{min-height:25px;margin-top:15px}[hidden]{display:none!important}
@media(max-width:1000px){.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 18px}.header-row{height:80px}.desktop-links{gap:25px}.maison-copy{padding:55px 6vw}.values article{padding:20px 25px}}
@media(max-width:650px){html{scroll-padding-top:20px}.header-row{padding:0 20px;grid-template-columns:32px 1fr auto;gap:14px;height:80px}.wordmark{font-size:16px;letter-spacing:.06em;justify-self:center}.menu-trigger>span:last-child{display:none}.header-row>:last-child{font-size:12px}.desktop-links{gap:24px;padding-bottom:15px;font-size:12px}.desktop-links a:last-child{display:none}.hero{min-height:620px;height:94svh}.hero-poster,.hero-video{object-position:66% center}.hero-copy{left:7vw;right:7vw;bottom:105px}.hero-copy h1{font-size:45px}.hero-copy .eyebrow{font-size:10px}.hero-shade{background:linear-gradient(0deg,#0009,transparent 80%)}.section{padding:65px 5vw}.section-heading{margin-bottom:40px}.section-heading h2{font-size:32px}.section-heading>p:last-child:not(.eyebrow){font-size:14px}.product-meta{display:block}.product-meta h3{font-size:14px}.product-meta>span{display:block;margin-top:7px}.product-image span{left:10px;font-size:11px}.maison{grid-template-columns:1fr}.maison-image{min-height:0;height:450px}.maison-copy{padding:55px 8vw}.values{grid-template-columns:1fr}.values article{padding:30px 10px;border-right:0;border-bottom:1px solid #ddd}.values h3{margin-top:15px}.closing{padding:70px 20px}.footer-mark{font-size:19px}.footer-columns{grid-template-columns:1fr 1fr;gap:25px}.footer-bottom{flex-direction:column;gap:10px}.product-dialog[open]{display:block}.product-dialog>img{min-height:0;height:260px}.detail-copy{padding:30px}.detail-copy h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ==========================================================
   COLLECTION D’ORÉ — FINITIONS INTERACTIVES
   Variables, composants, états et adaptations responsive.
   ========================================================== */

:root {
  --font-interface: "Manrope", Arial, sans-serif;
  --font-heading: "DM Sans", Arial, sans-serif;
  --ink: #202020;
  --muted: #73736f;
  --surface: #ffffff;
  --surface-soft: #f7f7f5;
  --stroke: rgba(32, 32, 32, .12);
  --accent: #997044;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --duration-fast: 180ms;
  --duration-medium: 360ms;
  --duration-slow: 700ms;
  --radius-card: 6px;
  --radius-control: 3px;
  --shadow-card: 0 18px 48px -25px rgba(30, 30, 25, .28);
  --shadow-dialog: 0 30px 90px rgba(0, 0, 0, .2);
}

body {
  font-family: var(--font-interface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: #dac4a6;
  color: #202020;
}

h2,
h3 {
  text-wrap: balance;
}

.section-heading h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -.045em;
}

.eyebrow {
  font-weight: 600;
}

/* Navigation : surface translucide au défilement. */
.header {
  position: fixed;
  transition:
    background var(--duration-medium),
    color var(--duration-medium),
    box-shadow var(--duration-medium),
    border-color var(--duration-medium);
}

.header.is-scrolled {
  color: var(--ink);
  background: rgba(255, 255, 255, .97);
  border-color: var(--stroke);
  box-shadow: 0 6px 28px rgba(0, 0, 0, .035);
}

@supports (backdrop-filter: blur(18px)) {
  .header.is-scrolled {
    background: rgba(255, 255, 255, .87);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
}

.header-row {
  transition: height var(--duration-medium) var(--ease-out);
}

.header.is-scrolled .header-row {
  height: 72px;
}

.wordmark {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .13em;
}

.desktop-links a {
  position: relative;
  padding-bottom: 4px;
  opacity: .83;
  transition: opacity var(--duration-fast);
}

.desktop-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-medium) var(--ease-out);
}

.desktop-links a:hover,
.desktop-links a[aria-current="location"] {
  text-decoration: none;
  opacity: 1;
}

.desktop-links a:hover::after,
.desktop-links a[aria-current="location"]::after {
  transform: scaleX(1);
}

.quiet {
  gap: 9px;
  transition: opacity var(--duration-fast), transform var(--duration-fast);
}

.quiet:hover {
  opacity: .72;
}

.quiet:active {
  transform: scale(.96);
}

#bagCount {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Hero : le visuel reste la pièce principale. */
.hero-copy h1 {
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .09);
}

.hero-copy .eyebrow {
  letter-spacing: .22em;
}

.hero-controls {
  font-family: var(--font-interface);
}

.slide-controls {
  gap: 18px;
}

.slide-controls button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  font-size: 18px;
  transition: background var(--duration-fast), transform var(--duration-fast);
}

.slide-controls button:hover {
  background: rgba(255, 255, 255, .16);
}

#slideNumber {
  min-width: 55px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#videoToggle {
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 24px;
  background: rgba(0, 0, 0, .1);
}

/* Boutons : contraste, mouvement bref et focus visible. */
.light-button,
.dark-button {
  position: relative;
  gap: 12px;
  border-radius: var(--radius-control);
  font-weight: 500;
  letter-spacing: .015em;
  transition:
    transform var(--duration-medium) var(--ease-out),
    background var(--duration-medium),
    color var(--duration-medium),
    box-shadow var(--duration-medium);
}

.light-button:hover,
.dark-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}

.light-button:active,
.dark-button:active {
  transform: translateY(0) scale(.985);
}

.light-button:focus-visible {
  outline-color: white;
}

.dark-button:disabled {
  opacity: .55;
  cursor: default;
  transform: none;
}

/* Cartes : photographie, profondeur légère et bord fin. */
.collection-toolbar {
  border-color: var(--stroke);
  color: var(--muted);
  letter-spacing: .025em;
}

.collection-toolbar span:first-child {
  color: var(--ink);
  font-weight: 600;
}

.product {
  min-width: 0;
}

.product-image {
  border-radius: var(--radius-card);
  outline: 1px solid rgba(0, 0, 0, .035);
  outline-offset: -1px;
  transition: box-shadow var(--duration-medium), transform var(--duration-medium);
}

.product-image::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .32));
  pointer-events: none;
}

.product-image img {
  transition: transform 900ms var(--ease-out);
}

.product-image:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.product-image:hover img {
  transform: scale(1.045);
}

.product-image span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  font-weight: 500;
  letter-spacing: .025em;
}

.product-image span i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  transition: background var(--duration-medium);
}

.product-image:hover span i {
  background: rgba(255, 255, 255, .2);
}

.product-meta {
  padding: 0 2px;
}

.product-meta h3 {
  font-weight: 500;
  letter-spacing: -.025em;
}

.product-meta > span {
  font-variant-numeric: tabular-nums;
}

.product-meta p {
  color: var(--muted);
}

/* Blocs éditoriaux. */
.maison-copy .underlined {
  padding-bottom: 8px;
  transition: color var(--duration-medium), border-color var(--duration-medium);
}

.underlined:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.values article {
  transition: background var(--duration-medium);
}

.values article:hover {
  background: var(--surface-soft);
}

.values article > span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--stroke);
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}

.footer-columns a,
.footer-columns .text-button {
  width: fit-content;
  transition: color var(--duration-fast);
}

.footer-columns a:hover,
.footer-columns .text-button:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Dialogues natifs : rendu de panneaux applicatifs. */
dialog {
  box-shadow: var(--shadow-dialog);
}

dialog::backdrop {
  background: rgba(17, 17, 17, .4);
  backdrop-filter: blur(4px);
}

.side-dialog[open] {
  animation: panel-enter 380ms var(--ease-out) both;
}

.bag[open] {
  animation-name: bag-enter;
}

.product-dialog {
  border-radius: 8px;
  overflow: auto;
}

.product-dialog[open] {
  animation: detail-enter 320ms var(--ease-out) both;
}

.dialog-close {
  border: 1px solid var(--stroke);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  transition: transform var(--duration-medium), background var(--duration-medium);
}

.dialog-close:hover {
  transform: rotate(90deg);
  background: white;
}

.side-dialog nav a {
  font-family: var(--font-heading);
  letter-spacing: -.025em;
  transition: transform var(--duration-medium) var(--ease-out);
}

.side-dialog nav a:hover {
  transform: translateX(6px);
}

.bag-row {
  align-items: center;
  padding: 22px 0;
  border-color: var(--stroke);
}

.bag-row button {
  padding: 8px;
  color: var(--muted);
  text-underline-offset: 4px;
}

#addedStatus {
  font-size: 13px;
  color: #355c43;
}

/* Apparition progressive : le contenu reste visible sans JS. */
.reveal-pending {
  opacity: 0;
  transform: translateY(24px);
}

.reveal-in {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

@keyframes panel-enter {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes bag-enter {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes detail-enter {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile : garder les actions accessibles au doigt. */
@media (max-width: 1000px) {
  .product-meta {
    flex-wrap: wrap;
  }
}

@media (max-width: 650px) {
  html {
    scroll-padding-top: 125px;
  }

  .wordmark {
    font-size: clamp(12px, 3.3vw, 16px);
    letter-spacing: .045em;
  }

  .header-row {
    padding: 0 16px;
    gap: 10px;
  }

  .header.is-scrolled .header-row {
    height: 68px;
  }

  .header-row > :last-child {
    font-size: 11px;
    gap: 5px;
  }

  .header-row > :last-child i {
    display: none;
  }

  .product-image span {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .product-image span i {
    width: 26px;
    height: 26px;
  }

  .slide-controls button {
    width: 44px;
    height: 44px;
  }

  .product-dialog {
    border-radius: 6px;
  }

  .hero-copy h1 {
    font-size: clamp(38px, 10.5vw, 45px);
  }
}

@media (hover: none) {
  .product-image:hover,
  .light-button:hover,
  .dark-button:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-pending,
  .reveal-in {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}