/*
Theme Name: L'empreinte contemporaine
Theme URI: https://lempreinte-contemporaine.fr
Author: Quentin Léonard André
Description: Thème éditorial sur-mesure pour L'empreinte contemporaine — créateur d'ambiance et de confort. Palette « Nuit cuivrée », typographie Didone à fort contraste. Blocs de sections personnalisés, paramètres globaux via le Customizer.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: empreinte
*/

/* ==========================================================================
   TOKENS — issus du JSON de design (palette « Nuit cuivrée »)
   ========================================================================== */
:root {
  /* Couleurs */
  --emp-fond-base:      #15110d;
  --emp-fond-profond:   #0e0b08;
  --emp-surface:        #1d1812;
  --emp-surface-2:      #251f17;
  --emp-ivoire:         #f1ece2;
  --emp-ivoire-2:       #e7e0d3;
  --emp-texte:          #ece6dc;
  --emp-texte-attenue:  #a39888;
  --emp-encre:          #241e16;
  --emp-encre-attenuee: #6c6253;
  --emp-cuivre:         #c69262;
  --emp-cuivre-clair:   #dcab78;
  --emp-cuivre-fonce:   #a9764a;
  --emp-filet:          rgba(236,230,220,0.12);
  --emp-filet-fort:     rgba(236,230,220,0.22);
  --emp-filet-encre:    rgba(36,30,22,0.16);
  --emp-degrade-wordmark: linear-gradient(100deg,#e7c39a,#c69262 55%,#a9764a);

  /* Typographie */
  --emp-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --emp-sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --emp-mono:  ui-monospace, "SF Mono", Menlo, monospace;

  /* Espacement */
  --emp-max-largeur:      1320px;
  --emp-pad-x:            clamp(24px, 5vw, 72px);
  --emp-pad-y:            clamp(56px, 7vw, 96px);
  --emp-gap-univers:      clamp(14px, 1.6vw, 24px);
  --emp-gap-produits:     clamp(16px, 1.8vw, 28px);
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--emp-fond-base);
  color: var(--emp-texte);
  font-family: var(--emp-sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--emp-serif);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--emp-cuivre-clair);
  outline-offset: 3px;
}

.emp-wrap {
  width: 100%;
  max-width: var(--emp-max-largeur);
  margin-inline: auto;
  padding-inline: var(--emp-pad-x);
}

.emp-section { padding-block: var(--emp-pad-y); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   ÉLÉMENTS COMMUNS — eyebrow, boutons, lien-flèche, placeholder image
   ========================================================================== */
.emp-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--emp-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--emp-cuivre-clair);
}
.emp-eyebrow--ivoire { color: var(--emp-cuivre-fonce); }

.emp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--emp-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1.05em 1.9em;
  min-height: 44px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.emp-btn--primary {
  background: var(--emp-cuivre);
  color: #1a130c;
}
.emp-btn--primary:hover {
  background: var(--emp-cuivre-clair);
  transform: translateY(-1px);
}
.emp-btn--ghost {
  background: transparent;
  color: var(--emp-texte);
  border-color: var(--emp-filet-fort);
}
.emp-btn--ghost:hover {
  border-color: var(--emp-cuivre);
  color: var(--emp-cuivre-clair);
}

.emp-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  font-family: var(--emp-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emp-cuivre-clair);
}
.emp-link-arrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--emp-cuivre);
  transition: width .3s ease;
}
.emp-link-arrow:hover::before { width: 54px; }

/* Message d'état vide (aucune fiche mise en avant) */
.emp-empty {
  font-family: var(--emp-sans);
  color: var(--emp-texte-attenue);
  font-size: 0.95rem;
  padding: 2rem 0;
}

/* Fil d'Ariane (par défaut sur fond sombre). */
.emp-breadcrumb { margin-bottom: clamp(20px, 3vw, 36px); }
.emp-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.55rem;
  font-family: var(--emp-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.emp-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--emp-texte-attenue);
}
/* Séparateur « › » avant chaque item sauf le premier. */
.emp-breadcrumb__item + .emp-breadcrumb__item::before {
  content: "\203A";
  color: var(--emp-texte-attenue);
  opacity: 0.6;
}
.emp-breadcrumb a {
  color: var(--emp-texte-attenue);
  text-decoration: none;
  transition: color .2s ease;
}
.emp-breadcrumb a:hover { color: var(--emp-cuivre-clair); }
.emp-breadcrumb [aria-current="page"] { color: var(--emp-texte); }

/* Placeholder image (motif rayé + légende monospace) */
.emp-ph {
  position: relative;
  background-color: var(--emp-surface);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 11px);
  border: 1px solid var(--emp-filet);
  overflow: hidden;
}
.emp-ph__label {
  position: absolute;
  inset: auto 12px 12px auto;
  font-family: var(--emp-sans);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--emp-texte-attenue);
  background: rgba(14,11,8,0.5);
  padding: 4px 8px;
}
.emp-ph--ivoire {
  background-color: #ded5c5;
  background-image: repeating-linear-gradient(135deg, rgba(36,30,22,0.04) 0 1px, transparent 1px 11px);
  border-color: var(--emp-filet-encre);
}
.emp-ph--ivoire .emp-ph__label { color: var(--emp-encre-attenuee); background: rgba(241,236,226,0.5); }
.emp-ph img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   BARRE UTILITAIRE + NAVIGATION
   ========================================================================== */
.emp-topbar {
  background: var(--emp-fond-profond);
  border-bottom: 1px solid var(--emp-filet);
  font-size: 0.76rem;
  color: var(--emp-texte-attenue);
}
.emp-topbar .emp-wrap {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.emp-topbar__left { display: flex; gap: 1.5rem; align-items: center; }
.emp-topbar__left strong { color: var(--emp-texte); font-weight: 600; }
/* Pas de retour à la ligne ni de troncature : chaque info s'affiche en entier
   ou pas du tout (le JS la masque par crans si la place manque). */
.emp-topbar__left > span { white-space: nowrap; }
.emp-topbar__phone {
  color: var(--emp-cuivre-clair);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex: 0 0 auto;
}

.emp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(21,17,13,0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--emp-filet);
}
.emp-nav .emp-wrap {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.emp-nav__menu { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.emp-nav__menu a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--emp-texte);
  padding-block: 0.4em;
  position: relative;
  transition: color .2s ease;
}
.emp-nav__menu a:hover { color: var(--emp-cuivre-clair); }
.emp-nav__menu .current-menu-item > a,
.emp-nav__menu .current_page_item > a { color: var(--emp-cuivre-clair); }

/* Trait animé identique aux liens « flèche » de la page : il se déploie de
   la gauche vers la droite au survol, et reste affiché sur l'item actif. */
.emp-nav__menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--emp-cuivre);
  transition: width .3s ease;
}
.emp-nav__menu a:hover::after,
.emp-nav__menu .current-menu-item > a::after,
.emp-nav__menu .current_page_item > a::after { width: 100%; }

/* Logo placeholder (empreinte + wordmark) */
.emp-logo { display: inline-flex; align-items: center; gap: 0.7rem; }
.emp-logo__mark {
  width: 42px; height: 42px;
  border: 1px solid var(--emp-cuivre);
  display: grid; place-items: center;
  position: relative;
  flex: 0 0 auto;
}
.emp-logo__mark::before,
.emp-logo__mark::after {
  content: "";
  position: absolute;
  border: 1px solid var(--emp-cuivre);
  border-radius: 50%;
}
.emp-logo__mark::before { width: 22px; height: 22px; opacity: .8; }
.emp-logo__mark::after  { width: 12px; height: 12px; }
.emp-logo__mark span {
  width: 5px; height: 5px;
  background: var(--emp-cuivre-clair);
  border-radius: 50%;
  z-index: 1;
}
.emp-logo__words { line-height: 1; }
.emp-logo__words .w1 {
  font-family: var(--emp-serif);
  font-style: italic;
  font-size: 1.25rem;
  background: var(--emp-degrade-wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}
.emp-logo__words .w2 {
  font-family: var(--emp-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--emp-texte-attenue);
  display: block;
  margin-top: 2px;
}
.emp-logo img { max-height: 48px; width: auto; }

.emp-burger {
  display: none;
  background: none;
  border: 1px solid var(--emp-filet-fort);
  width: 44px; height: 44px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.emp-burger span { width: 20px; height: 1px; background: var(--emp-texte); transition: .25s; }

/* ==========================================================================
   DRAWER — panneau de navigation latéral droit (mobile)
   ========================================================================== */
.emp-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(14, 11, 8, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .4s ease;
}
.emp-drawer-overlay.is-visible { opacity: 1; }

.emp-drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 201;
  height: 100dvh;
  width: min(86vw, 360px);
  background: var(--emp-fond-base);
  border-left: 1px solid var(--emp-filet-fort);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 5vw, 32px);
  transform: translateX(100%);
  /* Courbe « ease-out » douce : démarrage franc, fin amortie. */
  transition:
    transform .42s cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear .42s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  will-change: transform;
}
.emp-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform .42s cubic-bezier(.16, 1, .3, 1),
    visibility 0s;
}

/* Le contenu interne glisse et se révèle avec un léger décalage,
   pour un effet d'ouverture plus organique que le seul panneau. */
.emp-drawer__head,
.emp-drawer__nav,
.emp-drawer__foot {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.emp-drawer.is-open .emp-drawer__head { transition-delay: .12s; opacity: 1; transform: none; }
.emp-drawer.is-open .emp-drawer__nav  { transition-delay: .17s; opacity: 1; transform: none; }
.emp-drawer.is-open .emp-drawer__foot { transition-delay: .22s; opacity: 1; transform: none; }

.emp-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.emp-drawer__title {
  font-family: var(--emp-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emp-texte-attenue);
}
.emp-drawer__close {
  position: relative;
  width: 40px; height: 40px;
  background: none;
  border: 1px solid var(--emp-filet-fort);
  cursor: pointer;
  flex: 0 0 auto;
}
.emp-drawer__close span {
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 1px;
  background: var(--emp-texte);
}
.emp-drawer__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.emp-drawer__close span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }

.emp-drawer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.emp-drawer__menu a {
  display: block;
  font-family: var(--emp-serif);
  font-size: 1.5rem;
  color: var(--emp-texte);
  padding-block: 0.55em;
  border-bottom: 1px solid var(--emp-filet);
  transition: color .2s ease;
}
.emp-drawer__menu a:hover,
.emp-drawer__menu .current-menu-item > a,
.emp-drawer__menu .current_page_item > a { color: var(--emp-cuivre-clair); }

.emp-drawer__foot {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.emp-drawer__foot .emp-btn { width: 100%; text-align: center; }
.emp-drawer__phone {
  color: var(--emp-cuivre-clair);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Verrou de défilement du corps quand le drawer est ouvert.
   On compense la largeur de la scrollbar masquée (--emp-sbw, posée en JS)
   par un padding équivalent : le contenu de la page ne se décale pas.
   Les éléments position:fixed (nav sticky, overlay, drawer) ignorent ce
   padding et restent ancrés au viewport. */
body.emp-no-scroll {
  overflow: hidden;
  padding-right: var(--emp-sbw, 0px);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.emp-hero {
  position: relative;
  min-height: min(86vh, 760px);
  display: flex;
  align-items: flex-end;
  background: var(--emp-fond-profond);
  overflow: hidden;
}
.emp-hero__media { position: absolute; inset: 0; max-width: 2000px; margin-inline: auto; }
.emp-hero__media .emp-ph { width: 100%; height: 100%; border: 0; }
.emp-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.emp-hero__scrim {
  position: absolute; inset: 0;
  background:
    /* renfort vertical sous le contenu (aligné bas-gauche) */
    linear-gradient(to top, rgba(14,11,8,0.85) 0%, rgba(14,11,8,0.35) 42%, transparent 72%),
    /* scrim latéral gauche→droite, plus dense et tenant plus longtemps */
    linear-gradient(100deg, rgba(14,11,8,0.96) 0%, rgba(14,11,8,0.88) 30%, rgba(14,11,8,0.55) 62%, rgba(14,11,8,0.18) 100%);
}
.emp-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(48px, 8vw, 96px);
}
.emp-hero__content { max-width: 680px; }
.emp-hero h1 {
  font-size: clamp(3.2rem, 7.2vw, 6.4rem);
  font-weight: 500;
  margin-top: 1.2rem;
}
.emp-hero h1 .italic {
  display: block;
  font-style: italic;
  font-size: 0.46em;
  font-weight: 400;
  color: var(--emp-cuivre-clair);
  letter-spacing: -0.01em;
  margin-top: 0.3em;
}
.emp-hero__sub {
  max-width: 52ch;
  margin-top: 1.6rem;
  font-size: 1.08rem;
  color: var(--emp-texte);
  opacity: .92;
}
.emp-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.emp-hero__mention {
  margin-top: 2rem;
  font-family: var(--emp-sans);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--emp-texte-attenue);
}

/* --- Hero de collection (variante du hero d'accueil) --------------------- */
.emp-hero--cat { min-height: min(60vh, 520px); }
.emp-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sans média : fond sombre uni, hauteur réduite (le voile reste cohérent). */
.emp-hero--nomedia { min-height: min(42vh, 380px); background: var(--emp-fond-base); }
.emp-hero--cat h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.emp-hero__meta {
  margin-top: 1rem;
  font-family: var(--emp-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emp-cuivre-clair);
}
/* Fil d'Ariane sous le hero de collection. */
.emp-single__crumbs { padding-top: clamp(20px, 3vw, 32px); }

/* ==========================================================================
   PHILOSOPHIE
   ========================================================================== */
.emp-philo { background: var(--emp-ivoire); color: var(--emp-encre); }
.emp-philo h2 { color: var(--emp-encre); }
.emp-philo .emp-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.emp-philo h2 { font-size: clamp(2.3rem, 4vw, 3.5rem); margin: 1.2rem 0 1.6rem; }
.emp-philo__text { color: var(--emp-encre); opacity: .92; font-size: 1.06rem; margin-bottom: 2rem; }
.emp-philo .emp-link-arrow { color: var(--emp-cuivre-fonce); }
.emp-philo .emp-link-arrow::before { background: var(--emp-cuivre-fonce); }
.emp-philo__media { aspect-ratio: 5/4; }
.emp-philo__media .emp-ph { width: 100%; height: 100%; }

/* ==========================================================================
   UNIVERS
   ========================================================================== */
.emp-univers__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.emp-univers__head h1,
.emp-univers__head h2 { font-size: clamp(2.3rem, 4vw, 3.5rem); margin-top: 1rem; }
.emp-univers__intro {
  margin-top: 1.2rem;
  max-width: 56ch;
  color: var(--emp-texte-attenue);
  font-size: 1.04rem;
  line-height: 1.6;
}
.emp-univers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--emp-gap-univers);
}
.emp-card-univers {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  display: block;
  border: 1px solid var(--emp-filet);
}
.emp-card-univers .emp-ph { position: absolute; inset: 0; border: 0; }
.emp-card-univers .emp-ph img,
.emp-card-univers__img { transition: transform .6s ease; }
.emp-card-univers:hover .emp-ph img,
.emp-card-univers:hover .emp-card-univers__img { transform: scale(1.04); }
.emp-card-univers__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,11,8,0.85) 0%, rgba(14,11,8,0.1) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: clamp(20px, 3vw, 34px);
  z-index: 2;
}
.emp-card-univers__overlay h3 { font-size: 1.7rem; color: var(--emp-texte); }
.emp-card-univers__cta {
  margin-top: 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emp-cuivre-clair);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.emp-card-univers:hover .emp-card-univers__cta { opacity: 1; transform: translateY(0); }

/* Variante listing (page Univers) : carte + description sous l'image. */
.emp-card-univers-wrap { display: flex; flex-direction: column; }
.emp-card-univers__desc {
  margin-top: 0.9rem;
  font-family: var(--emp-sans);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--emp-texte-attenue);
}

/* ==========================================================================
   ÉDITORIAL (texte SEO + maillage) — mise en page 2 colonnes, fond ivoire
   ========================================================================== */
.emp-editorial { background: var(--emp-ivoire); color: var(--emp-encre); }
.emp-editorial .emp-editorial__titre { color: var(--emp-encre); }
.emp-editorial .emp-prose { color: var(--emp-encre); opacity: .92; }
.emp-editorial .emp-link-arrow { color: var(--emp-cuivre-fonce); }
.emp-editorial .emp-link-arrow::before { background: var(--emp-cuivre-fonce); }
.emp-editorial__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.emp-editorial__aside { align-self: start; }
.emp-editorial__titre {
  font-family: var(--emp-serif);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.08;
  margin: 1rem 0 0;
  max-width: 16ch;
}
.emp-editorial__main { max-width: 62ch; }
.emp-editorial__prose p { margin: 0 0 1.2rem; font-size: 1.04rem; }
.emp-editorial__prose a { color: var(--emp-cuivre-fonce); text-decoration: underline; text-underline-offset: 3px; }
.emp-editorial__liens {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.4rem;
}
.emp-editorial__liens li { margin: 0; }
.emp-editorial__cta { margin-top: 2.2rem; }

/* La colonne titre se fige discrètement au défilement sur grand écran. */
@media (min-width: 981px) {
  .emp-editorial__aside { position: sticky; top: 96px; }
}
/* Empilement sur petits écrans. */
@media (max-width: 900px) {
  .emp-editorial__grid { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px); }
  .emp-editorial__titre { max-width: 22ch; }
  .emp-editorial__main { max-width: none; }
}

/* ==========================================================================
   PRODUITS (section ivoire)
   ========================================================================== */
.emp-produits { background: var(--emp-ivoire); color: var(--emp-encre); }
.emp-produits h2, .emp-produits h3 { color: var(--emp-encre); }
.emp-produits__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.emp-produits__head h1,
.emp-produits__head h2 { font-size: clamp(2.3rem, 4vw, 3.5rem); margin-top: 1rem; }
.emp-produits__intro {
  margin-top: 1.2rem;
  max-width: 56ch;
  color: var(--emp-encre-attenuee);
  font-size: 1.04rem;
  line-height: 1.6;
}
.emp-produits .emp-link-arrow { color: var(--emp-cuivre-fonce); }
.emp-produits .emp-link-arrow::before { background: var(--emp-cuivre-fonce); }
.emp-produits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--emp-gap-produits);
}
.emp-card-produit__img {
  aspect-ratio: 1/1;
  margin-bottom: 1.1rem;
  transition: border-color .3s ease;
}
.emp-card-produit:hover .emp-card-produit__img { border-color: var(--emp-cuivre); }
.emp-card-produit__cat {
  font-family: var(--emp-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emp-encre-attenuee);
}
.emp-card-produit__nom {
  font-family: var(--emp-serif);
  font-size: 1.32rem;
  margin: 0.35rem 0 0.5rem;
  transition: color .25s ease;
}
.emp-card-produit:hover .emp-card-produit__nom { color: var(--emp-cuivre-fonce); }
.emp-card-produit__prix { color: var(--emp-cuivre-fonce); font-weight: 600; font-size: 1rem; }

/* Variante sombre du LISTING produits (page archive), comme le listing Univers.
   Ne s'applique qu'à la grille d'archive — pas au bloc d'accueil ni au slider
   « Dans la même collection » (qui restent sur fond ivoire). */
.emp-produits--archive { background: var(--emp-fond-base); color: var(--emp-texte); }
.emp-produits--archive h1,
.emp-produits--archive h2,
.emp-produits--archive h3 { color: var(--emp-texte); }
.emp-produits--archive .emp-produits__intro { color: var(--emp-texte-attenue); }
.emp-produits--archive .emp-link-arrow { color: var(--emp-cuivre-clair); }
.emp-produits--archive .emp-link-arrow::before { background: var(--emp-cuivre-clair); }
.emp-produits--archive .emp-card-produit__cat { color: var(--emp-texte-attenue); }
.emp-produits--archive .emp-card-produit:hover .emp-card-produit__nom { color: var(--emp-cuivre-clair); }
.emp-produits--archive .emp-card-produit__prix { color: var(--emp-cuivre-clair); }

/* ==========================================================================
   SAVOIR-FAIRE
   ========================================================================== */
.emp-savoir { background: var(--emp-surface); border-block: 1px solid var(--emp-filet); }
.emp-savoir__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.emp-savoir__item {
  position: relative;
  padding: clamp(14px, 2vw, 24px) clamp(20px, 2.5vw, 38px);
  border-left: 1px solid var(--emp-filet);
  overflow: hidden;
  isolation: isolate;
}
.emp-savoir__item:first-child { padding-left: 0; border-left: 0; }

/* Chiffre géant en filigrane derrière le contenu (effet éditorial). */
.emp-savoir__item::before {
  content: attr(data-num);
  position: absolute;
  z-index: -1;
  top: -0.35em;
  right: -0.08em;
  font-family: var(--emp-serif);
  font-weight: 600;
  font-size: 7.5rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--emp-cuivre);
  opacity: 0.16;
  transform: translateY(0);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
/* Sous pilotage JS, le filigrane part masqué puis se révèle avec l'item. */
.emp-js-reveal .emp-savoir__item[data-emp-reveal]::before {
  opacity: 0;
  transform: translateY(8px);
  transition-delay: calc(var(--i, 0) * 120ms);
}

/* Trait vertical cuivre qui sépare/anime les colonnes (sauf 1re). */
.emp-savoir__item:not(:first-child)::after {
  content: "";
  position: absolute;
  left: -0.5px;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--emp-cuivre), transparent);
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  transition: transform .6s ease, opacity .6s ease;
  transition-delay: calc(var(--i, 0) * 120ms + 120ms);
}

.emp-savoir__num {
  position: relative;
  display: inline-block;
  font-family: var(--emp-serif);
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--emp-cuivre);
  line-height: 1;
  transition: color .3s ease, transform .4s cubic-bezier(.2,.7,.2,1), text-shadow .3s ease;
}
/* Filet cuivre sous le numéro. Visible par défaut (scaleX(1)) ; masqué et
   animé seulement quand JS pilote le reveal (voir règles plus bas). */
.emp-savoir__num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--emp-cuivre), var(--emp-cuivre-clair));
  transform-origin: left;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 120ms + 240ms);
}
.emp-savoir__titre { font-family: var(--emp-sans); font-weight: 700; font-size: 1.1rem; margin: 1.2rem 0 0.7rem; color: var(--emp-texte); }
.emp-savoir__txt { color: var(--emp-texte-attenue); font-size: 0.96rem; }

/* --- Révélation au défilement (séquence en couches) ---------------------- */
/* L'état masqué n'est appliqué que lorsque JS pilote le reveal (emp-js-reveal),
   garantissant l'affichage complet sans JS / en reduced-motion. */
.emp-js-reveal .emp-savoir__item[data-emp-reveal] .emp-savoir__num {
  opacity: 0;
  transform: translateY(14px) scale(.82);
  filter: blur(6px);
  transition: opacity .55s ease, transform .6s cubic-bezier(.2,.8,.2,1), filter .55s ease, color .3s ease;
  transition-delay: calc(var(--i, 0) * 120ms);
}
.emp-js-reveal .emp-savoir__item[data-emp-reveal] .emp-savoir__titre,
.emp-js-reveal .emp-savoir__item[data-emp-reveal] .emp-savoir__txt {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.emp-js-reveal .emp-savoir__item[data-emp-reveal] .emp-savoir__titre {
  transition-delay: calc(var(--i, 0) * 120ms + 160ms);
}
.emp-js-reveal .emp-savoir__item[data-emp-reveal] .emp-savoir__txt {
  transition-delay: calc(var(--i, 0) * 120ms + 260ms);
}

/* État révélé : on libère chaque couche. Les sélecteurs reprennent le préfixe
   « .emp-js-reveal …[data-emp-reveal] » pour avoir une spécificité ≥ à celle
   des règles masquées ci-dessus (sinon opacity:0 l'emporte et reste vide). */
.emp-js-reveal .emp-savoir__item[data-emp-reveal].is-in .emp-savoir__num {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.emp-js-reveal .emp-savoir__item[data-emp-reveal].is-in .emp-savoir__titre,
.emp-js-reveal .emp-savoir__item[data-emp-reveal].is-in .emp-savoir__txt {
  opacity: 1;
  transform: translateY(0);
}
.emp-js-reveal .emp-savoir__item[data-emp-reveal].is-in::before {
  opacity: 0.16;
  transform: translateY(0);
}
.emp-js-reveal .emp-savoir__item[data-emp-reveal].is-in:not(:first-child)::after {
  transform: scaleY(1);
  opacity: 1;
}

/* Le filet sous le numéro : visible par défaut (sans JS) ; masqué tant que JS
   pilote, puis tracé au reveal. Préfixes alignés pour la spécificité. */
.emp-savoir__num::after { transform: scaleX(1); }
.emp-js-reveal .emp-savoir__item[data-emp-reveal] .emp-savoir__num::after { transform: scaleX(0); }
.emp-js-reveal .emp-savoir__item[data-emp-reveal].is-in .emp-savoir__num::after { transform: scaleX(1); }

/* --- Survol : la carte « s'allume » -------------------------------------- */
.emp-savoir__item:hover .emp-savoir__num {
  color: var(--emp-cuivre-clair);
  transform: translateY(-4px);
  text-shadow: 0 8px 24px rgba(220,171,120,0.35);
}
.emp-savoir__item:hover::before {
  opacity: 0.28;
  transform: translateY(-4px) scale(1.04);
}

/* ==========================================================================
   FAQ (accordéon sur fond ivoire)
   ========================================================================== */
.emp-faq { background: var(--emp-ivoire); color: var(--emp-encre); }
.emp-faq__wrap { max-width: 820px; }
.emp-faq__head { text-align: center; margin-bottom: clamp(32px, 4vw, 52px); }
.emp-faq__titre {
  font-family: var(--emp-serif);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  margin: 1rem 0 0;
  color: var(--emp-encre);
}
.emp-faq__list { border-top: 1px solid var(--emp-filet-encre); }
.emp-faq__item { border-bottom: 1px solid var(--emp-filet-encre); }
.emp-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  font-family: var(--emp-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--emp-encre);
  transition: color .2s ease;
}
.emp-faq__q::-webkit-details-marker { display: none; }
.emp-faq__item:hover .emp-faq__q { color: var(--emp-cuivre-fonce); }
.emp-faq__q:focus-visible { outline: 2px solid var(--emp-cuivre-fonce); outline-offset: 4px; }

/* Icône +/− dessinée en CSS, pivote à l'ouverture. */
.emp-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.emp-faq__icon::before,
.emp-faq__icon::after {
  content: "";
  position: absolute;
  background: var(--emp-cuivre-fonce);
  transition: transform .3s ease, opacity .3s ease;
}
.emp-faq__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }       /* barre horizontale */
.emp-faq__icon::after  { left: 8px; top: 0; width: 2px; height: 18px; }        /* barre verticale  */
.emp-faq__item[open] .emp-faq__icon::after { transform: rotate(90deg); opacity: 0; }

/* Panneau réponse. Sans JS, <details> reste natif (panneau visible si [open]).
   Avec JS (classe emp-js-faq), la hauteur est animée en max-height mesurée par
   le script — interpolation fluide et fin d'animation nette (pas de saccade). */
.emp-faq__panel { overflow: hidden; }
.emp-js-faq .emp-faq__panel {
  max-height: 0;
  opacity: 0;
  transition: max-height .4s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
  will-change: max-height;
}

.emp-faq__a {
  color: var(--emp-encre-attenuee);
  font-family: var(--emp-sans);
  line-height: 1.65;
  padding: 0 0 1.4rem;
  max-width: 64ch;
}
.emp-faq__a p { margin: 0; }

/* Icône : la rotation suit l'état piloté par JS (is-open) quand dispo. */
.emp-js-faq .emp-faq__item[open] .emp-faq__icon::after { transform: none; opacity: 1; }
.emp-js-faq .emp-faq__item.is-open .emp-faq__icon::after { transform: rotate(90deg); opacity: 0; }

/* ==========================================================================
   CRÉATEURS (portraits des fondateurs — fond ivoire)
   ========================================================================== */
.emp-createurs { background: var(--emp-ivoire); color: var(--emp-encre); }
.emp-createurs__head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.emp-createurs__titre {
  font-family: var(--emp-serif);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  margin: 1rem 0 0;
  color: var(--emp-encre);
}
.emp-createurs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 290px));
  justify-content: center;
  gap: clamp(28px, 4vw, 56px);
  margin: 0 auto;
}
.emp-createur { text-align: left; }
.emp-createur__media {
  aspect-ratio: 4 / 5;
  margin-bottom: 1.3rem;
  overflow: hidden;
  border: 1px solid var(--emp-filet-encre);
}
.emp-createur__img { width: 100%; height: 100%; }
.emp-createur__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.emp-createur:hover .emp-createur__img img { transform: scale(1.04); }
.emp-createur__nom {
  font-family: var(--emp-serif);
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
  color: var(--emp-encre);
}
.emp-createur__role {
  font-family: var(--emp-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emp-cuivre-fonce);
  margin: 0 0 0.9rem;
}
.emp-createur__bio {
  font-family: var(--emp-sans);
  color: var(--emp-encre-attenuee);
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================================
   SHOWROOM
   ========================================================================== */
.emp-showroom { background: var(--emp-surface); }
.emp-showroom__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  min-height: 600px;
}

/* --- Panneau gauche : tête / coordonnées / action ----------------------- */
/* Le contenu du panneau s'aligne sur le container (max 1320px) tandis que la
   colonne média file jusqu'au bord droit de l'écran (full-bleed à droite). */
.emp-showroom__panel {
  background: var(--emp-surface);
  padding: clamp(36px, 4.5vw, 72px);
  padding-inline-start: max(var(--emp-pad-x), (100vw - var(--emp-max-largeur)) / 2);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}
.emp-showroom__panel h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); margin: 1rem 0 1.2rem; }
.emp-showroom__text { color: var(--emp-texte); opacity: .82; margin: 0; max-width: 46ch; }

/* Coordonnées : lignes à icône, lisibles d'un coup d'œil */
.emp-showroom__coords {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 2px;
}
.emp-showroom__coord {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.05rem 0;
}
.emp-showroom__coord + .emp-showroom__coord { border-top: 1px solid var(--emp-filet); }
.emp-showroom__coord-ic {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--emp-filet-fort);
  color: var(--emp-cuivre-clair);
  transition: border-color .25s ease, color .25s ease;
}
.emp-showroom__coord-ic svg { width: 18px; height: 18px; }
.emp-showroom__coord-body { display: flex; flex-direction: column; gap: 0.25rem; }
.emp-showroom__coord-key {
  font-family: var(--emp-sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emp-texte-attenue);
}
.emp-showroom__coord-val { color: var(--emp-texte); font-size: 1.02rem; line-height: 1.4; }
.emp-showroom__coord-val--link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--emp-cuivre-clair);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
.emp-showroom__coord-val--link:hover { color: #f0c79b; border-color: currentColor; }
.emp-showroom__coord:hover .emp-showroom__coord-ic { border-color: var(--emp-cuivre); color: var(--emp-cuivre); }

/* Action : CTA + réassurance */
.emp-showroom__action { display: flex; flex-direction: column; gap: 1rem; }
.emp-showroom__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.emp-showroom__cta .emp-btn--primary { flex: 1 1 auto; }
.emp-showroom__reassurance {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--emp-texte-attenue);
}
.emp-showroom__reassurance svg { width: 16px; height: 16px; color: var(--emp-cuivre); flex: 0 0 auto; }

/* --- Média droit -------------------------------------------------------- */
.emp-showroom__media { position: relative; min-height: 600px; overflow: hidden; }
.emp-showroom__media .emp-ph { position: absolute; inset: 0; height: 100%; border: 0; }
.emp-showroom__media-tag {
  position: absolute;
  left: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(14,11,8,0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--emp-filet-fort);
  color: var(--emp-texte);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: border-color .25s ease, color .25s ease;
}
.emp-showroom__media-tag svg { width: 15px; height: 15px; color: var(--emp-cuivre-clair); }
.emp-showroom__media-tag:hover { border-color: var(--emp-cuivre); color: var(--emp-cuivre-clair); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.emp-footer { background: var(--emp-fond-profond); border-top: 1px solid var(--emp-filet); padding-block: clamp(56px, 7vw, 96px) 0; }
.emp-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(48px, 6vw, 72px);
}
.emp-footer__desc { color: var(--emp-texte-attenue); font-size: 0.94rem; margin-top: 1.2rem; max-width: 34ch; }
.emp-footer__baseline { font-family: var(--emp-serif); font-style: italic; color: var(--emp-cuivre-clair); margin-top: 0.8rem; }
.emp-footer__col h4 {
  font-family: var(--emp-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emp-texte-attenue);
  margin-bottom: 1.3rem;
}
.emp-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.emp-footer__col a { color: var(--emp-texte); font-size: 0.84rem; transition: color .2s; }
.emp-footer__col a:hover { color: var(--emp-cuivre-clair); }
.emp-footer__social { display: flex; gap: 0.8rem; }
.emp-footer__social a {
  width: 40px; height: 40px;
  border: 1px solid var(--emp-filet-fort);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--emp-texte-attenue);
  transition: border-color .25s, color .25s, background-color .25s, transform .25s;
}
.emp-footer__social a svg { display: block; }
.emp-footer__social a:hover {
  border-color: var(--emp-cuivre);
  color: var(--emp-cuivre-clair);
  background: rgba(198,146,98,0.08);
  transform: translateY(-2px);
}
.emp-footer__bottom {
  border-top: 1px solid var(--emp-filet);
  padding-block: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--emp-texte-attenue);
}
.emp-footer__bottom-links { display: flex; gap: 1rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: 0.78rem; }
.emp-footer__bottom-links li { margin: 0; }
.emp-footer__bottom-links a { color: inherit; }
.emp-footer__bottom-links a:hover { color: var(--emp-cuivre-clair); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Bascule menu inline ↔ burger.
   Avec JS actif (<html class="emp-js">), c'est le JS qui décide, à TOUTE
   largeur, selon le débordement réel du menu (classe sur <body>). */
body.emp-nav-collapsed .emp-nav__primary { display: none; }
body.emp-nav-collapsed .emp-nav__cta { display: none; }
body.emp-nav-collapsed .emp-burger { display: flex; }

/* Pendant la mesure initiale (avant décision JS), on garde la nav inline
   visible mais on cache le burger pour ne pas afficher les deux. */
.emp-nav--measuring .emp-burger { visibility: hidden; }

/* Repli sans JavaScript : bascule classique sur breakpoint. */
@media (max-width: 980px) {
  html:not(.emp-js) .emp-nav__primary { display: none; }
  html:not(.emp-js) .emp-nav__cta { display: none; }
  html:not(.emp-js) .emp-burger { display: flex; }
}

@media (max-width: 980px) {
  .emp-philo .emp-wrap { grid-template-columns: 1fr; }
  .emp-philo__media { order: -1; }
  .emp-univers__grid { grid-template-columns: repeat(2, 1fr); }
  .emp-produits__grid { grid-template-columns: repeat(2, 1fr); }
  .emp-savoir__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(32px,5vw,48px) 0; }
  .emp-savoir__item:nth-child(2) { border-left: 0; }
  .emp-showroom__grid { grid-template-columns: 1fr; min-height: 0; }
  .emp-showroom__panel { padding-inline-start: var(--emp-pad-x); }
  .emp-showroom__media { order: -1; min-height: 340px; }
  .emp-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Crans de dégradation de la topbar, pilotés en JS selon la place réelle.
   Priorité d'affichage : téléphone > adresse > horaires. */
.emp-topbar.is-hide-hours .emp-topbar__hours { display: none; }
.emp-topbar.is-hide-address .emp-topbar__left { display: none; }
/* Quand il ne reste que le téléphone, on le centre. */
.emp-topbar.is-hide-address .emp-wrap { justify-content: center; gap: 0; }

@media (max-width: 600px) {
  .emp-univers__grid { grid-template-columns: 1fr; }
  .emp-savoir__grid { grid-template-columns: 1fr; }
  .emp-savoir__item { border-left: 0; border-top: 1px solid var(--emp-filet); padding: 2rem 0 0; }
  .emp-savoir__item:first-child { border-top: 0; padding-top: 0; }
  .emp-footer__grid { grid-template-columns: 1fr; }
  .emp-hero__cta .emp-btn { flex: 1 1 100%; }
  .emp-showroom__cta { flex-direction: column; align-items: stretch; }
  .emp-showroom__cta .emp-btn { width: 100%; }
}

/* ==========================================================================
   FICHES SINGLE — produit & collection
   ========================================================================== */
.emp-single__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.emp-single__img { aspect-ratio: 4 / 5; }

/* Le visuel reste visible au défilement pendant la lecture du descriptif. */
@media (min-width: 861px) {
  .emp-single__media { position: sticky; top: 96px; }
}
.emp-single__title {
  font-family: var(--emp-serif);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin: 0.6rem 0 1rem;
}
.emp-single__prix {
  font-family: var(--emp-sans);
  font-size: 1.4rem;
  color: var(--emp-cuivre-clair);
  margin: 0 0 1.5rem;
}
.emp-single__back { margin-top: 2rem; }

/* Caractéristiques produit : liste de paires libellé / valeur. */
.emp-single__specs {
  margin: 2rem 0 0;
  border-top: 1px solid var(--emp-filet);
}
.emp-single__spec {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--emp-filet);
}
.emp-single__spec dt {
  font-family: var(--emp-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emp-texte-attenue);
  margin: 0;
}
.emp-single__spec dd {
  margin: 0;
  font-family: var(--emp-sans);
  color: var(--emp-texte);
  line-height: 1.5;
}

/* Bloc d'appel à l'action sous les caractéristiques. */
.emp-single__cta {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 1.8rem;
}
.emp-single__phone {
  font-family: var(--emp-sans);
  font-size: 0.95rem;
  color: var(--emp-texte-attenue);
}
.emp-single__phone strong { color: var(--emp-cuivre-clair); white-space: nowrap; }

/* Section produits associés : un filet supérieur pour la détacher (fond ivoire). */
.emp-produits--related { border-top: 1px solid var(--emp-filet-encre); }

/* --------------------------------------------------------------------------
   SLIDER PRODUITS (section associés)
   -------------------------------------------------------------------------- */
/* Barre de boutons prev/next, alignée à droite dans l'en-tête de section. */
.emp-slider__nav { display: flex; gap: 0.6rem; }
.emp-slider__btn {
  width: 46px; height: 46px;
  border: 1px solid var(--emp-encre-attenuee);
  background: transparent;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease, opacity .25s ease;
}
.emp-slider__btn:hover { border-color: var(--emp-cuivre-fonce); background: rgba(166,118,74,0.08); }
.emp-slider__btn:focus-visible { outline: 2px solid var(--emp-cuivre-fonce); outline-offset: 2px; }
.emp-slider__btn:disabled { opacity: 0.3; cursor: default; }
.emp-slider__btn:disabled:hover { border-color: var(--emp-encre-attenuee); background: transparent; }
/* Chevron en pseudo-bordure pivotée. */
.emp-slider__btn span {
  width: 9px; height: 9px;
  border-top: 1.5px solid var(--emp-encre);
  border-right: 1.5px solid var(--emp-encre);
}
.emp-slider__btn--prev span { transform: translateX(2px) rotate(-135deg); }
.emp-slider__btn--next span { transform: translateX(-2px) rotate(45deg); }

/* Piste défilante horizontale avec accroche (scroll-snap). */
.emp-slider__track {
  display: flex;
  gap: var(--emp-gap-produits);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Marge verticale pour ne pas rogner l'ombre / le focus des cartes. */
  padding: 4px 0;
  /* Masque la barre de défilement native (le pilotage se fait aux boutons). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.emp-slider__track::-webkit-scrollbar { display: none; }
.emp-slider__slide {
  flex: 0 0 auto;
  width: calc((100% - var(--emp-gap-produits) * 3) / 4);
  scroll-snap-align: start;
}
.emp-slider__foot { margin-top: 2rem; }

/* La barre de boutons est cachée tant que JS n'a pas confirmé le débordement. */
.emp-slider__nav[hidden] { display: none; }

@media (max-width: 980px) {
  .emp-slider__slide { width: calc((100% - var(--emp-gap-produits) * 2) / 2.4); }
}
@media (max-width: 600px) {
  .emp-slider__slide { width: 78%; }
}

/* --------------------------------------------------------------------------
   CTA GLOBAL SHOWROOM (bandeau pied de fiche, fond sombre)
   -------------------------------------------------------------------------- */
.emp-cta-showroom {
  background: var(--emp-fond-profond);
  color: var(--emp-texte);
  border-top: 1px solid var(--emp-filet);
}
.emp-cta-showroom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
}
.emp-cta-showroom__title {
  font-family: var(--emp-serif);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  margin: 0.8rem 0 0;
  max-width: 18ch;
}
.emp-cta-showroom__sub {
  margin: 0.9rem 0 0;
  max-width: 46ch;
  color: var(--emp-texte-attenue);
  line-height: 1.6;
}
.emp-cta-showroom__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.8rem;
  flex: 0 0 auto;
}
.emp-cta-showroom__phone {
  font-family: var(--emp-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--emp-cuivre-clair);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .emp-cta-showroom__actions { width: 100%; }
}

/* Compteur de pièces sous le titre d'une collection (place du prix produit). */
.emp-single__count {
  font-family: var(--emp-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emp-texte-attenue);
  margin: 0;
}

/* En-tête de fiche collection : asymétrique, aligné à gauche.
   Titre à gauche, intro décalée en seconde colonne (rcompt l'effet « tout centré »). */
.emp-collection-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
  gap: clamp(24px, 5vw, 72px);
  padding-top: clamp(8px, 2vw, 20px);
}
.emp-collection-head .emp-single__title { margin: 0.6rem 0 1rem; }
.emp-collection-head__intro {
  max-width: 48ch;
  margin: 0;
  padding-bottom: 0.4rem;
  color: var(--emp-texte-attenue);
  font-size: 1.04rem;
  line-height: 1.6;
}
@media (max-width: 820px) {
  .emp-collection-head { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
}

.emp-prose {
  font-family: var(--emp-sans);
  color: var(--emp-texte-attenue);
  line-height: 1.7;
  max-width: 60ch;
}
.emp-prose p { margin: 0 0 1rem; }

@media (max-width: 860px) {
  .emp-single__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CONTACT (fond sombre — en-tête centré + formulaire / coordonnées)
   ========================================================================== */
.emp-contact__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.emp-contact__title {
  font-family: var(--emp-serif);
  font-size: clamp(2.3rem, 4vw, 3.5rem);
  margin: 0.6rem 0 0;
}
.emp-contact__intro {
  max-width: 56ch;
  margin: 1.2rem 0 0;
  color: var(--emp-texte-attenue);
  font-size: 1.04rem;
  line-height: 1.6;
}
.emp-contact__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* --- Formulaire ---------------------------------------------------------- */
.emp-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.emp-form__field { display: block; margin-bottom: 1.2rem; }
.emp-form__label {
  display: block;
  font-family: var(--emp-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emp-texte-attenue);
  margin-bottom: 0.5rem;
}
.emp-form__req { color: var(--emp-cuivre-clair); }
.emp-form input[type="text"],
.emp-form input[type="email"],
.emp-form input[type="tel"],
.emp-form textarea {
  width: 100%;
  font-family: var(--emp-sans);
  font-size: 1rem;
  color: var(--emp-texte);
  background: rgba(236,230,220,0.04);
  border: 1px solid var(--emp-filet-fort);
  border-radius: 0;
  padding: 0.9rem 1rem;
  transition: border-color .2s ease, background-color .2s ease;
}
.emp-form textarea { resize: vertical; min-height: 150px; }
.emp-form input:hover,
.emp-form textarea:hover { border-color: var(--emp-cuivre-fonce); }
.emp-form input:focus,
.emp-form textarea:focus {
  outline: none;
  border-color: var(--emp-cuivre);
  background: rgba(236,230,220,0.07);
}
.emp-form input::placeholder,
.emp-form textarea::placeholder { color: var(--emp-texte-attenue); }

.emp-form__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  margin-top: 0.6rem;
}
.emp-form__hint { font-family: var(--emp-sans); font-size: 0.82rem; color: var(--emp-texte-attenue); }

/* Honeypot : retiré du flux et invisible, sans display:none (certains bots
   l'ignorent) — positionné hors écran. */
.emp-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Messages d'état après soumission. */
.emp-form__notice {
  font-family: var(--emp-sans);
  font-size: 0.95rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid;
  margin: 0 0 1.6rem;
}
.emp-form__notice--ok { color: var(--emp-cuivre-clair); border-color: var(--emp-cuivre-fonce); background: rgba(198,146,98,0.08); }
.emp-form__notice--ko { color: #e7b4a0; border-color: #8a4b39; background: rgba(138,75,57,0.12); }

/* --- Confirmation après envoi ------------------------------------------- */
.emp-success {
  text-align: center;
  padding: clamp(8px, 2vw, 24px) 0;
  animation: emp-success-in .5s ease both;
}
.emp-success__icon {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 1.4rem;
  border-radius: 50%;
  color: var(--emp-fond-profond);
  background: linear-gradient(135deg, var(--emp-cuivre-clair), var(--emp-cuivre));
  box-shadow: 0 12px 34px -10px rgba(198,146,98,0.45);
}
.emp-success__title {
  font-family: var(--emp-serif);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin: 0 0 0.8rem;
}
.emp-success__text {
  font-family: var(--emp-sans);
  color: var(--emp-texte-attenue);
  line-height: 1.6;
  max-width: 42ch;
  margin: 0 auto 2rem;
}
.emp-success__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.emp-success__actions .emp-link-arrow { color: var(--emp-cuivre-clair); }
.emp-success__actions .emp-link-arrow::before { background: var(--emp-cuivre-clair); }
@keyframes emp-success-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Coordonnées (colonne droite, plus courte => sticky) ----------------- */
.emp-contact__aside {
  border-left: 1px solid var(--emp-filet);
  padding-left: clamp(24px, 3vw, 44px);
}
.emp-contact__aside-title {
  font-family: var(--emp-serif);
  font-size: 1.6rem;
  margin: 0.8rem 0 1.6rem;
}
.emp-contact__coords { list-style: none; margin: 0 0 2rem; padding: 0; }
.emp-contact__coords li { margin-bottom: 1.2rem; }
.emp-contact__coord-label {
  display: block;
  font-family: var(--emp-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emp-texte-attenue);
  margin-bottom: 0.35rem;
}
.emp-contact__coord-val { font-family: var(--emp-sans); color: var(--emp-texte); line-height: 1.5; }
.emp-contact__coord-link { color: var(--emp-cuivre-clair); text-decoration: none; }
.emp-contact__coord-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* La colonne courte (coordonnées) reste visible pendant le défilement du
   formulaire, sur grand écran uniquement. */
@media (min-width: 861px) {
  .emp-contact__aside { position: sticky; top: 96px; }
}

@media (max-width: 860px) {
  .emp-contact__grid { grid-template-columns: 1fr; }
  .emp-contact__aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--emp-filet); padding-top: clamp(24px, 5vw, 40px); }
}
@media (max-width: 560px) {
  .emp-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   SERVICES (en-tête centré, contenu éditeur + CTA)
   ========================================================================== */
/* En-tête plus resserré vers le bas pour enchaîner avec la bande savoir-faire. */
/* En-têtes Services / À propos : alignés à gauche, titre généreux, intro
   décalée — on casse la monotonie « tout centré ». Un filet cuivre souligne
   le bloc titre pour la signature éditoriale. */
.emp-services { padding-bottom: clamp(24px, 3vw, 40px); }
.emp-services__head,
.emp-apropos__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 880px;
}
.emp-services__title,
.emp-apropos__title {
  font-family: var(--emp-serif);
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.04;
  margin: 0.8rem 0 0;
  max-width: 16ch;
}
.emp-services__intro,
.emp-apropos__intro {
  max-width: 54ch;
  margin: 1.4rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--emp-filet);
  color: var(--emp-texte-attenue);
  font-size: 1.06rem;
  line-height: 1.65;
}

/* ==========================================================================
   ACTUALITÉS (listing articles + article single)
   ========================================================================== */
/* En-tête centré du journal (même esprit que Services / À propos). */
.emp-actus__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 880px;
}
.emp-actus__title {
  font-family: var(--emp-serif);
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.04;
  margin: 0.8rem 0 0;
}
.emp-actus__intro {
  max-width: 54ch;
  margin: 1.4rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--emp-filet);
  color: var(--emp-texte-attenue);
  font-size: 1.06rem;
  line-height: 1.65;
}
.emp-actus__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(28px, 4vw, 48px);
}

/* --- Bloc « Derniers articles » (page d'accueil) ------------------------- */
.emp-articles-bloc__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.emp-articles-bloc__head h2 { font-size: clamp(2.3rem, 4vw, 3.5rem); margin-top: 1rem; }
.emp-articles-bloc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 48px);
}

/* Premier article : disposition 2 colonnes (image à gauche, texte à droite)
   sur toute la largeur de la grille — mise en avant sobre, sans surdimension.
   Sélecteur doublé (.emp-card-article.emp-card-article--hero) pour garder une
   spécificité supérieure à la règle de base « display:flex » déclarée après. */
.emp-card-article.emp-card-article--hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
.emp-card-article.emp-card-article--hero .emp-card-article__img { aspect-ratio: 4 / 3; margin-bottom: 0; }
.emp-card-article.emp-card-article--hero .emp-card-article__body { padding-top: 0; }
@media (max-width: 720px) {
  .emp-card-article.emp-card-article--hero { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* --- Carte article ------------------------------------------------------- */
.emp-card-article { display: flex; flex-direction: column; }
.emp-card-article__link { display: block; overflow: hidden; }
.emp-card-article__img {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--emp-filet);
}
.emp-card-article__img img { transition: transform .6s ease; }
.emp-card-article__link:hover .emp-card-article__img img { transform: scale(1.04); }
.emp-card-article__body { padding-top: 1.1rem; }
.emp-card-article__meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--emp-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emp-texte-attenue);
}
.emp-card-article__cat { color: var(--emp-cuivre-clair); font-weight: 600; }
.emp-card-article__titre {
  font-family: var(--emp-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0.6rem 0 0.7rem;
}
.emp-card-article__titre a { color: var(--emp-texte); transition: color .2s ease; }
.emp-card-article__titre a:hover { color: var(--emp-cuivre-clair); }
.emp-card-article__extrait { color: var(--emp-texte-attenue); line-height: 1.6; margin: 0 0 1rem; }

/* --- Pagination ---------------------------------------------------------- */
.emp-pagination { margin-top: clamp(40px, 5vw, 64px); }
.emp-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.emp-pagination a,
.emp-pagination .current {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 0.9rem;
  font-family: var(--emp-sans);
  font-size: 0.9rem;
  border: 1px solid var(--emp-filet-fort);
  color: var(--emp-texte);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.emp-pagination a:hover { border-color: var(--emp-cuivre); color: var(--emp-cuivre-clair); }
.emp-pagination .current {
  background: var(--emp-cuivre);
  border-color: var(--emp-cuivre);
  color: var(--emp-fond-profond);
  font-weight: 600;
}

/* --- Article single ------------------------------------------------------ */
/* overflow-x: clip permet aux blocs full-bleed (citation) de déborder en
   100vw sans créer de barre de défilement horizontale. */
.emp-article { overflow-x: clip; }
.emp-article__wrap { max-width: 880px; }
.emp-article__head { margin-bottom: clamp(24px, 3vw, 36px); }
.emp-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--emp-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emp-texte-attenue);
  margin-bottom: 1rem;
}
.emp-article__cat { color: var(--emp-cuivre-clair); font-weight: 600; }
.emp-article__title {
  font-family: var(--emp-serif);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.1;
  margin: 0;
}
.emp-article__cover {
  margin: 0 0 clamp(28px, 4vw, 44px);
  border: 1px solid var(--emp-filet);
  overflow: hidden;
}
.emp-article__cover img { width: 100%; height: auto; display: block; }
.emp-article__content { max-width: none; }
.emp-article__content > p { margin: 0 0 1.2rem; font-size: 1.06rem; }
.emp-article__content h2 { font-family: var(--emp-serif); font-size: 1.7rem; margin: 2.2rem 0 0.8rem; color: var(--emp-texte); }
.emp-article__content h3 { font-family: var(--emp-serif); font-size: 1.35rem; margin: 1.6rem 0 0.6rem; color: var(--emp-texte); }
.emp-article__content a { color: var(--emp-cuivre-clair); text-decoration: underline; text-underline-offset: 3px; }
.emp-article__content img { max-width: 100%; height: auto; }
.emp-article__content ul,
.emp-article__content ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.emp-article__content li { margin: 0 0 0.4rem; }
.emp-article__content ul li::marker { color: var(--emp-cuivre); }
.emp-article__content blockquote:not(.emp-citation__texte) {
  margin: 1.8rem 0;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--emp-filet-fort);
  background: rgba(236,230,220,0.03);
  font-style: italic;
  color: var(--emp-texte);
}
.emp-article__content blockquote:not(.emp-citation__texte) p:last-child { margin-bottom: 0; }
.emp-article__content hr {
  border: 0;
  height: 1px;
  background: var(--emp-filet-fort);
  margin: 2.4rem 0;
}
.emp-article__content figcaption {
  font-family: var(--emp-sans);
  font-size: 0.85rem;
  color: var(--emp-texte-attenue);
  text-align: center;
  margin-top: 0.6rem;
}
.emp-article__content table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: 0.95rem; }
.emp-article__content th,
.emp-article__content td { border: 1px solid var(--emp-filet-fort); padding: 0.6rem 0.8rem; text-align: left; }
.emp-article__content th { color: var(--emp-texte); font-weight: 600; }
.emp-article__tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.2rem; }
.emp-tag {
  font-family: var(--emp-sans);
  font-size: 0.82rem;
  color: var(--emp-texte-attenue);
  border: 1px solid var(--emp-filet-fort);
  padding: 0.3rem 0.8rem;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.emp-tag:hover { border-color: var(--emp-cuivre); color: var(--emp-cuivre-clair); }
.emp-article__back { margin-top: 2.4rem; }

/* --- Articles liés (pied d'article) -------------------------------------- */
.emp-related-articles { border-top: 1px solid var(--emp-filet); }
.emp-related-articles__head { margin-bottom: clamp(28px, 4vw, 44px); }
.emp-related-articles__titre {
  font-family: var(--emp-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 1rem 0 0;
  color: var(--emp-texte);
}
.emp-related-articles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

/* --- Blocs de rédaction d'article ---------------------------------------- */
.emp-article-block { margin: 2rem 0; }

/* Bloc Texte : sous-titre optionnel + paragraphes. */
.emp-texte__titre {
  font-family: var(--emp-serif);
  color: var(--emp-texte);
  margin: 0 0 0.8rem;
}
.emp-texte__titre:is(h2) { font-size: 1.7rem; margin-top: 0.6rem; }
.emp-texte__titre:is(h3) { font-size: 1.35rem; }
.emp-texte__corps { color: var(--emp-texte-attenue); line-height: 1.75; }
.emp-texte__corps p { margin: 0 0 1.2rem; font-size: 1.06rem; }
.emp-texte__corps p:last-child { margin-bottom: 0; }
.emp-texte__corps a { color: var(--emp-cuivre-clair); text-decoration: underline; text-underline-offset: 3px; }
.emp-texte__corps ul,
.emp-texte__corps ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.emp-texte__corps li { margin: 0 0 0.4rem; }
.emp-texte__corps ul li::marker { color: var(--emp-cuivre); }

/* Encadré (callout) : boîte cadrée avec liseré cuivre en haut. */
.emp-callout {
  position: relative;
  background: rgba(198,146,98,0.06);
  border: 1px solid var(--emp-filet-fort);
  padding: 1.5rem 1.6rem;
}
.emp-callout::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--emp-cuivre), var(--emp-cuivre-clair));
}
.emp-callout__titre {
  font-family: var(--emp-sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--emp-cuivre-clair);
  margin: 0 0 0.6rem;
}
.emp-callout__texte { color: var(--emp-texte); line-height: 1.7; }
.emp-callout__texte p { margin: 0 0 0.8rem; }
.emp-callout__texte p:last-child { margin-bottom: 0; }

/* Citation éditoriale : FOND pleine largeur (césure), CONTENU centré dans le
   container. Le bloc s'échappe de la colonne de lecture pour le fond, mais le
   texte reste aligné sur la largeur de contenu du site. Aucune bordure. */
.emp-citation {
  /* Full-bleed : déborde le conteneur centré pour occuper 100vw. */
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: clamp(40px, 6vw, 80px);
  margin-bottom: clamp(40px, 6vw, 80px);
  padding-block: clamp(48px, 7vw, 96px);
  background: var(--emp-surface);
}
/* Contenu ramené à la largeur du container, centré. */
.emp-citation__inner {
  max-width: var(--emp-max-largeur);
  margin-inline: auto;
  padding-inline: var(--emp-pad-x);
  text-align: center;
}
.emp-citation::before {
  content: "\201C";
  display: block;
  font-family: var(--emp-serif);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  line-height: 0.5;
  color: var(--emp-cuivre);
  text-align: center;
  margin-bottom: 1.2rem;
}
/* Réinitialise l'encadré hérité du blockquote natif : pas de bordure ici. */
.emp-citation__texte {
  font-family: var(--emp-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.3;
  color: var(--emp-texte);
  margin: 0 auto;
  max-width: 32ch;
  padding: 0;
  border: 0;
  background: none;
}
.emp-citation__auteur {
  margin-top: 1.6rem;
  font-family: var(--emp-sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emp-cuivre-clair);
}
.emp-citation__auteur::before { content: "— "; }

/* Image légendée. */
.emp-img-legende { margin: 2.4rem 0; text-align: center; }
.emp-img-legende img {
  max-width: 100%;
  /* Plafonne la hauteur : une image portrait ne devient pas démesurée. */
  max-height: 70vh;
  width: auto;
  height: auto;
  display: inline-block;
  border: 1px solid var(--emp-filet);
}
.emp-img-legende__cap {
  margin-top: 0.7rem;
  font-family: var(--emp-sans);
  font-size: 0.85rem;
  color: var(--emp-texte-attenue);
  text-align: center;
}

/* Bon à savoir : encadré conseil avec icône. */
.emp-bas {
  display: flex;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  background: var(--emp-surface);
  border: 1px solid var(--emp-filet-fort);
}
.emp-bas__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--emp-cuivre-clair);
  border: 1px solid var(--emp-cuivre-fonce);
}
.emp-bas__label {
  font-family: var(--emp-sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--emp-cuivre-clair);
  margin: 0 0 0.4rem;
}
.emp-bas__texte { color: var(--emp-texte); line-height: 1.7; }
.emp-bas__texte p { margin: 0 0 0.8rem; }
.emp-bas__texte p:last-child { margin-bottom: 0; }

/* ==========================================================================
   PAGE LÉGALE / TEXTE (mentions légales, CGV, confidentialité…)
   ========================================================================== */
.emp-legal__wrap { max-width: 800px; }
.emp-legal__title {
  font-family: var(--emp-serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin: 0 0 clamp(24px, 4vw, 40px);
}
.emp-legal__content { max-width: none; }
.emp-legal__content > p { margin: 0 0 1.1rem; }
.emp-legal__content h2 {
  font-family: var(--emp-serif);
  font-size: 1.5rem;
  margin: 2rem 0 0.7rem;
  color: var(--emp-texte);
}
.emp-legal__content h3 {
  font-family: var(--emp-serif);
  font-size: 1.2rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--emp-texte);
}
.emp-legal__content a { color: var(--emp-cuivre-clair); text-decoration: underline; text-underline-offset: 3px; }
.emp-legal__content ul,
.emp-legal__content ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.emp-legal__content li { margin: 0 0 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}