/* ============================================================
   Maison Joffre — Feuille de styles principale
   ============================================================ */


/* === Reset & base === */

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

html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  height: 100%;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

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

::selection {
  background: var(--color-terracotta);
  color: var(--color-cream);
}


/* === Variables === */

:root {
  /* Couleurs */
  --color-cream: #F5EFE6;
  --color-cream-dark: #EDE5D7;
  --color-walnut: #3E2A1F;
  --color-ink: #1A1614;
  --color-text-primary: #1A1614;
  --color-text-secondary: #5C4D43;
  --color-text-light: #F5EFE6;
  --color-text-muted: #6F5E4F;
  --color-terracotta: #B65B43;
  --color-terracotta-deep: #A14E37; /* Fond .btn-primary uniquement — cream cream 4.89:1 (WCAG AA) */
  --color-terracotta-text: #A14E37; /* Texte eyebrow terracotta sur fond clair — cream-dark 4.59:1, cream 5.02:1 (WCAG AA, V2.F) */
  --color-salvia: #8A9384;
  --color-rule: #D9CFC0;
  --color-rule-dark: #2A1F18;
  --color-cream-faded: #ACA096; /* Texte sur walnut, hiérarchie discrète — 5.36:1 (WCAG AA) */

  /* Espacements (base 8 px) */
  --space-xs: 0.5rem;   /* 8 px  */
  --space-sm: 1rem;     /* 16 px */
  --space-md: 2rem;     /* 32 px */
  --space-lg: 4rem;     /* 64 px */
  --space-xl: 8rem;     /* 128 px */
  --space-2xl: 12rem;   /* 192 px */
  --space-3xl: 16rem;   /* 256 px */

  /* Largeurs maximales */
  --width-text: 65ch;
  --width-narrow: 800px;
  --width-default: 1200px;
  --width-wide: 1600px;

  /* Transitions communes */
  --transition-fast: 0.2s ease;
  --transition-default: 0.4s ease;
  --transition-slow: 0.8s ease;
}


/* === Skip to content link (a11y — visible au focus clavier uniquement) === */

.skip-to-content {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--color-walnut);
  color: var(--color-cream);
  border-radius: 4px;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: 1rem;
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
}


/* === Typographies === */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* === Body de base === */

body {
  background: var(--color-cream);
  color: var(--color-text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 1.0625rem; /* 17 px */
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 768px) {
  body {
    font-size: 1rem;
  }
}


/* === Hiérarchie typographique === */

h1.hero {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
}

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

p {
  max-width: var(--width-text);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

p.lead {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
}

h1 em,
h2 em,
h3 em {
  font-style: italic;
  color: var(--color-walnut);
}

strong {
  font-weight: 500;
  color: var(--color-text-primary);
}

small,
.caption {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}


/* === Containers === */

.container {
  max-width: var(--width-default);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container-narrow {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container-wide {
  max-width: var(--width-wide);
  margin: 0 auto;
  padding: 0 var(--space-md);
}


/* === Sections === */

.section {
  padding: var(--space-2xl) 0;
}

.section-tight {
  padding: var(--space-xl) 0;
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-xl) 0;
  }
}


/* === Liens === */

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a.link-underline {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  display: inline-block;
}

a.link-underline:hover {
  color: var(--color-salvia);
}

a.link-arrow::after {
  content: " →";
  margin-left: 0.25em;
  display: inline-block;
  transition: transform var(--transition-fast);
}

a.link-arrow:hover::after {
  transform: translateX(4px);
}


/* === Boutons === */

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: all var(--transition-default);
}

.btn-primary {
  background: var(--color-terracotta-deep);
  color: var(--color-cream);
}

.btn-primary:hover {
  background: var(--color-walnut);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--color-cream);
  border: 1px solid var(--color-cream);
}

.btn-outline:hover {
  background: var(--color-cream);
  color: var(--color-walnut);
}


/* === Filets et règles === */

hr.rule {
  height: 1px;
  background: var(--color-rule);
  border: 0;
  margin: var(--space-lg) 0;
  max-width: 100px;
}

hr.rule-full {
  height: 1px;
  background: var(--color-rule);
  border: 0;
  margin: var(--space-2xl) 0;
}

.rule-dark {
  background: var(--color-rule-dark);
}


/* === Layouts utilitaires === */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

.text-center {
  text-align: center;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}


/* === Accessibilité === */

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

:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 4px;
}

/* Override focus sur fonds walnut — terracotta 2.95:1 KO WCAG, cream 12:1 OK */
.hero-fullscreen *:focus-visible,
.page-hero *:focus-visible,
.bureau-hero *:focus-visible,
.bureau-cta *:focus-visible,
.home-visit *:focus-visible,
.site-footer *:focus-visible {
  outline-color: var(--color-cream);
}


/* === Animations de base (préparation pour JS) === */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-slow);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

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


/* === Curseur custom (préparation pour JS) === */

@media (min-width: 1024px) {
  body.cursor-active a,
  body.cursor-active button {
    cursor: none;
  }

  .cursor-dot,
  .cursor-ring {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    transition: transform 0.15s ease;
  }
}


/* === Responsive — breakpoints === */
/*
   Mobile   : max-width 640px
   Tablette : max-width 1024px
   Desktop  : min-width 1025px
*/


/* === Header === */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--space-md);
  background: transparent;
  transition: all var(--transition-default);
}

.site-header.scrolled {
  background: var(--color-cream);
  box-shadow: 0 1px 0 var(--color-rule);
}

.site-header__brand {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-header__nav a {
  position: relative;
  padding: 0.5rem 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.site-header__nav a:hover {
  color: var(--color-salvia);
}

.site-header__nav a.active {
  color: var(--color-walnut);
}

/* Filet présent sur tous les liens nav, déployé uniquement sur .active.
   Transition scaleX 0 → 1 origin left ; respect prefers-reduced-motion. */
.site-header__nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-terracotta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease-out;
}

.site-header__nav a.active::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .site-header__nav a::after {
    transition: none;
  }
}

.site-header__burger {
  display: none;
}

@media (max-width: 768px) {
  .site-header__nav {
    display: none;
  }

  .site-header__burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
  }

  .site-header__burger span {
    width: 24px;
    height: 1px;
    background: var(--color-text-primary);
    transition: all var(--transition-fast);
  }

  body.menu-open {
    overflow: hidden;
  }

  body.menu-open .site-header__burger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  body.menu-open .site-header__burger span:nth-child(2) {
    opacity: 0;
  }

  body.menu-open .site-header__burger span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }

  body.menu-open .site-header__nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    background: var(--color-cream);
    animation: menuOpen 0.25s ease-out;
  }

  @keyframes menuOpen {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    body.menu-open .site-header__nav {
      animation: none;
    }
  }

  body.menu-open .site-header__nav a {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: 2rem;
  }
}


/* === Footer === */

.site-footer {
  background: var(--color-walnut);
  color: var(--color-text-light);
  padding: var(--space-xl) 0 var(--space-md);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  max-width: var(--width-default);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (max-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
}

@media (max-width: 640px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.site-footer__address {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-light);
  opacity: 0.85;
}

.site-footer__column h2,
.site-footer__column h3,
.site-footer__column h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-light);
  opacity: 0.6;
  margin-bottom: var(--space-sm);
}

.site-footer__column ul li {
  margin-bottom: 0.5rem;
}

.site-footer__column a {
  font-size: 0.9rem;
  color: var(--color-text-light);
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}

.site-footer__column a:hover {
  color: var(--color-cream);
  opacity: 1;
}

.site-footer__bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule-dark);
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.site-footer__bottom p {
  margin: 0 auto;
  max-width: none;
  color: var(--color-cream-faded);
}

.site-footer__bottom p + p {
  margin-top: 0.4rem;
}


/* === Page 404 === */

body.page-404 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-404__main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}

.page-404__content {
  max-width: 600px;
}

.page-404__eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-terracotta-text);
  margin-bottom: var(--space-md);
}

.page-404__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
}

.page-404__text {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}


/* === Page Accueil — Hero === */

.hero-fullscreen {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--color-walnut);
}

@keyframes pulseDown {
  0% {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0.6;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0.6;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 0.8;
    transform: translate(-50%, 0);
  }
}


/* === Page Accueil — Section Titre seul (silence) === */

.hero-title-only {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  background: var(--color-cream);
}

.hero-title-only__inner {
  max-width: var(--width-narrow);
  text-align: left;
}

.hero-title-only h1 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.hero-title-only h1 em {
  font-style: italic;
  color: var(--color-walnut);
}

.hero-title-only__since {
  margin: var(--space-md) 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-secondary);
}


/* === Page Accueil — Section Récit === */

.home-story {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
}

.home-story__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.home-story h2 {
  margin-bottom: var(--space-lg);
}

.home-story p {
  margin-bottom: var(--space-md);
  font-size: 1.0625rem;
  line-height: 1.7;
}


/* === Page Accueil — Section Plateau (grille des bureaux) === */

.home-plateau {
  padding: var(--space-2xl) 0;
  background: var(--color-cream-dark);
}

.home-plateau__intro {
  max-width: var(--width-narrow);
  margin: 0 auto var(--space-xl);
  padding: 0 var(--space-md);
}

.home-plateau__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  max-width: var(--width-default);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (max-width: 1024px) {
  .home-plateau__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .home-plateau__grid {
    grid-template-columns: 1fr;
  }
}

.bureau-card {
  display: block;
  position: relative;
  overflow: hidden;
  color: inherit;
  transition: transform var(--transition-default);
}

.bureau-card:hover {
  transform: translateY(-4px);
}

.bureau-card__image {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: var(--space-sm);
  overflow: hidden;
  background: var(--color-walnut);
}

.bureau-card__image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-walnut);
  transition: transform 0.6s ease;
}

.bureau-card:hover .bureau-card__image::before {
  transform: scale(1.03);
}

.bureau-card__surface {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 2;
  padding: 0.4rem 0.75rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cream);
  background: rgba(26, 22, 20, 0.5);
}

.bureau-card__name {
  display: inline-block;
  margin-top: var(--space-sm);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--color-text-primary);
  background-image: linear-gradient(var(--color-terracotta), var(--color-terracotta));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s ease;
}

.bureau-card:hover .bureau-card__name,
.bureau-card:focus-visible .bureau-card__name {
  background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  .bureau-card__name {
    transition: none;
  }
}

.bureau-card__number {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.home-plateau__link {
  display: block;
  margin-top: var(--space-xl);
  padding: 0 var(--space-md);
  text-align: center;
}


/* === Page Accueil — Section Trois arguments === */

.home-pillars {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
}

.home-pillars__inner {
  max-width: var(--width-default);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.home-pillars__title {
  margin-bottom: var(--space-xl);
  text-align: left;
}

.home-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 1024px) {
  .home-pillars__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

.pillar__number {
  display: block;
  margin-bottom: var(--space-md);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 2rem;
  color: var(--color-terracotta);
}

.pillar h3 {
  margin-bottom: var(--space-sm);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
}

.pillar p {
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}


/* === Page Accueil — Section Visiter (immersive sombre) === */

.home-visit {
  position: relative;
  padding: var(--space-2xl) 0;
  background: var(--color-walnut);
  color: var(--color-cream);
  text-align: center;
  overflow: hidden;
}

.home-visit__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-walnut);
  opacity: 0.25;
}

.home-visit__inner {
  position: relative;
  z-index: 2;
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.home-visit .eyebrow {
  color: var(--color-cream);
  opacity: 0.7;
}

.home-visit h2 {
  margin-bottom: var(--space-md);
  color: var(--color-cream);
}

.home-visit p {
  margin: 0 auto var(--space-lg);
  max-width: 600px;
  color: var(--color-cream);
  opacity: 0.9;
}

.home-visit__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}


/* === Page Accueil — Section Citation === */

.home-quote {
  padding: var(--space-2xl) 0 var(--space-3xl);
  background: var(--color-cream);
  text-align: center;
}

.home-quote__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.home-quote blockquote {
  margin: 0 0 var(--space-lg);
  max-width: 100%;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.5;
  color: var(--color-text-primary);
}

.home-quote__author {
  margin: 0 auto 0.25rem;
  max-width: 100%;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
}

.home-quote__source {
  margin: 0 auto;
  max-width: 100%;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.home-quote hr.rule {
  margin: var(--space-md) auto;
}


/* === Page Histoire — Hero === */

.page-hero {
  position: relative;
  height: 70vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  background: var(--color-walnut);
  color: var(--color-cream);
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-walnut);
  opacity: 0.4;
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--width-narrow);
}

.page-hero .eyebrow {
  margin-bottom: var(--space-md);
  color: var(--color-cream);
  opacity: 0.7;
}

.page-hero h1 {
  margin: 0 0 var(--space-md);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-cream);
}

.page-hero__subtitle {
  max-width: 600px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--color-cream);
  opacity: 0.9;
}


/* === Page Histoire — Sections narratives === */

.history-section {
  padding: var(--space-2xl) 0;
}

.history-section--cream {
  background: var(--color-cream);
}

.history-section--cream-dark {
  background: var(--color-cream-dark);
}

.history-section__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.history-section .eyebrow {
  color: var(--color-terracotta-text);
  font-weight: 500;
}

.history-section h2 {
  margin-bottom: var(--space-lg);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
}

.history-section p {
  margin-bottom: var(--space-md);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text-primary);
}

.history-section p strong {
  font-weight: 500;
  color: var(--color-text-primary);
}

.history-section p em {
  font-style: italic;
  color: var(--color-walnut);
}


/* === Page Histoire — Numérotation romaine décorative === */

.history-numeral {
  display: block;
  margin-bottom: var(--space-md);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 4rem;
  line-height: 1;
  color: var(--color-terracotta);
  opacity: 0.4;
}


/* === Page Histoire — Image dans une section === */

.history-image {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-lg);
  background: var(--color-walnut);
  overflow: hidden;
}

.history-image__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(to top, rgba(26, 22, 20, 0.7), transparent);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-cream);
}


/* === Page Histoire — Visuels d'archives patrimoniaux === */

/* Clearfix pour l'aside flottant (portrait) */
.history-section__inner::after {
  content: "";
  display: table;
  clear: both;
}

/* Portrait vertical en aside (Section I) */
.history-portrait {
  float: right;
  width: 38%;
  max-width: 300px;
  margin: 0.4rem 0 var(--space-md) var(--space-lg);
}

.history-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-rule);
}

/* Figure document pleine largeur (facture, Section II) */
.history-figure {
  margin: var(--space-lg) 0 0;
}

.history-figure img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--color-rule);
}

.history-portrait figcaption,
.history-figure figcaption {
  margin-top: var(--space-xs);
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.history-figure figcaption {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.history-figure__credit {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* Geste signature passé / présent — fond walnut */
.history-thennow {
  padding: var(--space-2xl) 0;
  background: var(--color-walnut);
  color: var(--color-cream);
  text-align: center;
}

.history-thennow__inner {
  max-width: var(--width-default);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.history-thennow .eyebrow {
  color: var(--color-cream);
}

.history-thennow__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  align-items: start;
}

.history-thennow__item {
  margin: 0;
  text-align: left;
}

.history-thennow__label {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-cream);
}

.history-thennow__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-rule-dark);
}

.history-thennow__item figcaption {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-cream);
}

.history-thennow__credit {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-cream-faded);
}

.history-thennow__caption {
  margin: var(--space-lg) auto 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--color-cream);
}

/* Clôture commerciale — fond cream */
.history-offer {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
  text-align: center;
}

.history-offer__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.history-offer .eyebrow {
  color: var(--color-terracotta-text);
}

.history-offer h2 {
  margin-bottom: var(--space-md);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
}

.history-offer p {
  max-width: 560px;
  margin: 0 auto var(--space-md);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text-primary);
}

.history-offer__cta {
  margin: var(--space-md) 0 0;
}

@media (max-width: 768px) {
  .history-portrait {
    float: none;
    width: auto;
    max-width: 240px;
    margin: 0 auto var(--space-md);
  }

  .history-thennow__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .history-thennow__item {
    text-align: center;
  }

  .history-thennow__caption {
    font-size: 1.25rem;
  }
}


/* === Page Histoire — Encadré "Pour aller plus loin" === */

.history-deepdive {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  background: transparent;
}

.history-deepdive__title {
  margin-bottom: var(--space-md);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-secondary);
}

.history-deepdive p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}


/* === Page Histoire — Navigation de bas de page === */

.page-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  max-width: var(--width-default);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

.page-nav a {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.page-nav a:hover {
  color: var(--color-salvia);
}

.page-nav__prev {
  margin-right: auto;
}

.page-nav__next {
  margin-left: auto;
}


/* === Page Bureau — Hero === */

.bureau-hero {
  position: relative;
  height: 70vh;
  min-height: 500px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--space-xl) var(--space-md);
  overflow: hidden;
  background: var(--color-walnut);
  color: var(--color-cream);
}

.bureau-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-walnut);
  opacity: 0.4;
}

.bureau-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--width-default);
}

.bureau-hero .eyebrow {
  margin-bottom: var(--space-sm);
  color: var(--color-cream);
  opacity: 0.85;
}

.bureau-hero h1 {
  margin: 0 0 var(--space-md);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-cream);
}

.bureau-hero__subtitle {
  margin: 0;
  max-width: 600px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: var(--color-cream);
  opacity: 0.9;
}


/* === Page Bureau — Section accroche === */

.bureau-intro {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
}

.bureau-intro__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.bureau-intro p {
  max-width: none;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}


/* === Page Bureau — Caractéristiques === */

.bureau-specs {
  padding: var(--space-2xl) 0;
  background: var(--color-cream-dark);
}

.bureau-specs__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.bureau-specs h2,
.bureau-specs .eyebrow {
  margin-bottom: var(--space-lg);
}

.bureau-specs__list {
  display: block;
}

.bureau-specs__row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-rule);
}

.bureau-specs__row:last-child {
  border-bottom: none;
}

.bureau-specs__label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
}

.bureau-specs__value {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-text-primary);
}

@media (max-width: 640px) {
  .bureau-specs__row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}


/* === Page Bureau — Section Usages === */

.bureau-usage {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
}

.bureau-usage__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.bureau-usage h2 {
  margin-bottom: var(--space-lg);
}

.bureau-usage p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}


/* === Page Bureau — Galerie === */

.bureau-gallery {
  padding: var(--space-2xl) 0;
  background: var(--color-cream-dark);
}

.bureau-gallery__inner {
  max-width: var(--width-default);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.bureau-gallery .eyebrow {
  margin-bottom: var(--space-lg);
  text-align: center;
}

.bureau-gallery__grid {
  display: grid;
  gap: var(--space-md);
}

.bureau-gallery__grid--2 {
  grid-template-columns: 1fr 1fr;
}

.bureau-gallery__grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .bureau-gallery__grid--2,
  .bureau-gallery__grid--3 {
    grid-template-columns: 1fr;
  }
}

.bureau-gallery__item {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-walnut);
  cursor: pointer;
}


/* === Page Bureau — Espaces partagés === */

.bureau-shared {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
}

.bureau-shared__inner {
  max-width: var(--width-default);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.bureau-shared__intro {
  max-width: var(--width-narrow);
  margin: 0 auto var(--space-xl);
  text-align: left;
}

.bureau-shared__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .bureau-shared__grid {
    grid-template-columns: 1fr;
  }
}

.bureau-shared__item {
  text-align: center;
}

.bureau-shared__item__image {
  aspect-ratio: 1 / 1;
  margin-bottom: var(--space-sm);
  background: var(--color-walnut);
}

.bureau-shared__item__name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-text-primary);
}


/* === Page Bureau — Conditions === */

.bureau-conditions {
  padding: var(--space-2xl) 0;
  background: var(--color-cream-dark);
}

.bureau-conditions__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.bureau-conditions__box {
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-cream);
}

.bureau-conditions__box .bureau-specs__row {
  padding: var(--space-sm) 0;
}


/* === Page Bureau — CTA final === */

.bureau-cta {
  padding: var(--space-2xl) 0;
  background: var(--color-walnut);
  color: var(--color-cream);
  text-align: center;
}

.bureau-cta__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.bureau-cta h2 {
  margin-bottom: var(--space-md);
  color: var(--color-cream);
}

.bureau-cta p {
  margin: 0 auto var(--space-lg);
  max-width: 500px;
  color: var(--color-cream);
  opacity: 0.85;
}

.bureau-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.bureau-cta__secondary {
  font-size: 0.9rem;
  color: var(--color-cream);
  opacity: 0.7;
}

.bureau-cta__secondary a {
  padding-bottom: 2px;
  color: var(--color-cream);
  border-bottom: 1px solid currentColor;
}


/* === Pages contextuelles — Tableau récapitulatif === */

.data-table {
  padding: var(--space-2xl) 0;
  background: var(--color-cream-dark);
}

.data-table__inner {
  max-width: var(--width-default);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.data-table__intro {
  max-width: var(--width-narrow);
  margin: 0 auto var(--space-xl);
}

.data-table__grid {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.data-table__row {
  display: table-row;
}

.data-table__row.is-total {
  background: var(--color-cream);
}

.data-table__row.is-total .data-table__cell {
  font-weight: 500;
  color: var(--color-walnut);
}

.data-table__cell {
  display: table-cell;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-rule);
  font-size: 0.95rem;
  vertical-align: top;
}

.data-table__cell:first-child {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.data-table__cell:last-child {
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .data-table__grid {
    display: block;
  }

  .data-table__row {
    display: block;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-rule);
  }

  .data-table__cell {
    display: block;
    padding: 0.25rem 0;
    border: none;
  }

  .data-table__cell:first-child {
    margin-bottom: 0.25rem;
  }
}


/* === Pages contextuelles — Encadré conditions === */

.conditions-box {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
}

.conditions-box__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.conditions-box__panel {
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-cream-dark);
}


/* === Pages contextuelles — Mention discrète bas de page === */

.discreet-note {
  padding: var(--space-xl) 0 var(--space-2xl);
  background: var(--color-cream);
}

.discreet-note__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
  text-align: center;
}

.discreet-note p {
  max-width: 600px;
  margin: 0 auto;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.discreet-note a {
  padding-bottom: 1px;
  color: var(--color-walnut);
  border-bottom: 1px solid currentColor;
}


/* === Pages contextuelles — Section avec image === */

.editorial-section {
  padding: var(--space-2xl) 0;
}

.editorial-section--cream {
  background: var(--color-cream);
}

.editorial-section--cream-dark {
  background: var(--color-cream-dark);
}

.editorial-section__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.editorial-section__image {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: var(--space-lg) 0;
  background: var(--color-walnut);
}


/* === Pages contextuelles — 3 colonnes === */

.three-cols {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
}

.three-cols__inner {
  max-width: var(--width-default);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.three-cols__intro {
  max-width: var(--width-narrow);
  margin: 0 auto var(--space-xl);
}

.three-cols__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 1024px) {
  .three-cols__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

.three-cols__col h3 {
  margin-bottom: var(--space-sm);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
}

.three-cols__col p {
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}


/* === Page Conception — Citation Émilie === */

.designer-quote {
  padding: var(--space-2xl) 0;
  background: var(--color-cream-dark);
  text-align: center;
}

.designer-quote__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.designer-quote blockquote {
  margin: 0 0 var(--space-md);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  line-height: 1.5;
  color: var(--color-text-primary);
}

.designer-quote__author {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
}


/* === Page Conception — Lien externe vers Émilie === */

.external-card {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
}

.external-card__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.external-card__panel {
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-cream-dark);
  text-align: center;
}

.external-card__panel h3 {
  margin-bottom: var(--space-sm);
}

.external-card__panel p {
  max-width: 100%;
  margin: 0 auto var(--space-md);
  color: var(--color-text-secondary);
}

.external-card__link {
  padding-bottom: 2px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-walnut);
  border-bottom: 1px solid currentColor;
}


/* === Page Prestations — Tableau des prestations === */

.services-table {
  padding: var(--space-2xl) 0;
}

.services-table--cream {
  background: var(--color-cream);
}

.services-table--cream-dark {
  background: var(--color-cream-dark);
}

.services-table__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.services-table__intro {
  margin-bottom: var(--space-xl);
}


/* === Page Visiter — Layout 2 colonnes (média + texte) === */

.visit-block {
  padding: var(--space-2xl) 0;
}

.visit-block--cream {
  background: var(--color-cream);
}

.visit-block--cream-dark {
  background: var(--color-cream-dark);
}

.visit-block__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  max-width: var(--width-default);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (max-width: 1024px) {
  .visit-block__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.visit-block--reverse .visit-block__media {
  order: 2;
}

@media (max-width: 1024px) {
  .visit-block--reverse .visit-block__media {
    order: 0;
  }
}

.visit-block__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-walnut);
}

.visit-block__media iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.visit-block__text h2 {
  margin-bottom: var(--space-md);
}

.visit-block__text p {
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.65;
}


/* === Page Visiter — Formulaire === */

.visit-form {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
}

.visit-form__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.visit-form__intro {
  margin-bottom: var(--space-xl);
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-text-primary);
  background: var(--color-cream);
  border: 1px solid var(--color-rule);
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-walnut);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
  font-family: 'Inter', sans-serif;
}

.form-group--honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form-rgpd {
  margin-top: var(--space-md);
  max-width: 100%;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.form-submit {
  margin-top: var(--space-md);
}

/* États d'envoi du formulaire (V3.1 — envoi serveur).
   La confirmation remplace les champs ; le message d'erreur reste
   affiché au-dessus de l'encart RGPD, bouton réactivé pour réessayer. */
.form-status {
  margin-top: var(--space-md);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-ink);
}

.form-status[hidden] {
  display: none;
}

.visit-form form.is-sent .form-group,
.visit-form form.is-sent .form-submit,
.visit-form form.is-sent .form-rgpd {
  display: none;
}

/* Alternative discrète sous le formulaire de contact.html — même registre
   typographique que l'encart RGPD. */
.form-alt {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}


/* === Page Contact — Email géant === */

.contact-email {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
  text-align: center;
}

.contact-email__inner {
  max-width: var(--width-default);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.contact-email__address {
  display: block;
  margin: 0 0 var(--space-md);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-walnut);
  word-break: break-word;
}

.contact-email__address:hover {
  color: var(--color-terracotta);
}

.contact-email__subtitle {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
}


/* === Page Contact — Adresse 2 colonnes === */

.contact-address {
  padding: var(--space-2xl) 0;
  background: var(--color-cream-dark);
}

.contact-address__inner {
  max-width: var(--width-default);
  margin: 0 auto;
  padding: 0 var(--space-md);
}


/* ============================================================
   V3 — Rendus du plateau (images/projet-3d)
   Montage des images dans les emplacements déjà prévus :
   fonds de hero sous le voile walnut existant, vignettes,
   galeries, blocs média. Tokens existants uniquement.
   ============================================================ */

/* --- Fonds de hero — l'image se glisse sous le voile (__bg, z-1) --- */

.page-hero__image,
.bureau-hero__image,
.hero-fullscreen__image,
.home-visit__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile renforcé quand le hero porte une image : le cream centré
   doit rester lisible sur les rendus clairs (leçon contraste V1). */
.page-hero:has(.page-hero__image) .page-hero__bg,
.bureau-hero:has(.bureau-hero__image) .bureau-hero__bg {
  opacity: 0.72;
}

/* Sur image, eyebrow et sous-titre repassent en cream plein :
   l'opacité réduite n'est calibrée que pour le fond walnut uni. */
.page-hero:has(.page-hero__image) .eyebrow,
.page-hero:has(.page-hero__image) .page-hero__subtitle,
.bureau-hero:has(.bureau-hero__image) .eyebrow,
.bureau-hero:has(.bureau-hero__image) .bureau-hero__subtitle {
  opacity: 1;
}

/* L'italique d'emphase des h1 de hero hérite du cream. La règle globale
   h1 em (walnut, calibrée pour fonds cream) rendait ces lignes illisibles
   sur les heros sombres — défaut préexistant, révélé par les images. */
.page-hero h1 em,
.bureau-hero h1 em {
  color: inherit;
}

/* Hero d'accueil — le couloir-galerie sous l'invitation gravée.
   L'image est sombre : légère atténuation vers le walnut de base. */
.hero-fullscreen__image {
  opacity: 0.85;
}

/* Scrim radial du hero d'accueil — fonce le cœur de l'image sous le
   bloc logo (le couloir semble fuir vers l'ombre, le scrim ne se voit
   pas en tant que tel). Sombre NEUTRE, jamais noyer : une teinte chaude
   à forte densité sépia-ifie le rendu (arbitrage 2026-07-15 — l'image
   doit garder ses couleurs d'origine, 1884 restauré à neuf). La densité
   est plafonnée bas ; la lisibilité est portée par les ombres du texte. */
.hero-fullscreen:has(.hero-fullscreen__image)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 78% 88% at 50% 46%,
      rgba(12, 10, 9, 0.55) 0%,
      rgba(12, 10, 9, 0.46) 40%,
      rgba(12, 10, 9, 0.2) 58%,
      rgba(12, 10, 9, 0) 73%);
  pointer-events: none;
}

/* Mobile : le wordmark occupe 65vw — l'ellipse s'élargit pour couvrir
   ses extrémités, qui atteignent sinon le mur éclairé de l'image. */
@media (max-width: 640px) {
  .hero-fullscreen:has(.hero-fullscreen__image)::before {
    background: radial-gradient(ellipse 105% 85% at 50% 46%,
        rgba(12, 10, 9, 0.55) 0%,
        rgba(12, 10, 9, 0.47) 45%,
        rgba(12, 10, 9, 0.22) 62%,
        rgba(12, 10, 9, 0) 75%);
  }
}

/* L'overlay d'animation repasse au-dessus de l'image et du scrim,
   fond translucide — le walnut de section reste la couleur porteuse. */
.hero-fullscreen .entry-animation {
  position: relative;
  z-index: 2;
  background: transparent;
}

/* Backdrop localisé derrière le bloc logo uniquement (dernier levier
   de l'arbitrage scrim neutre) : le scrim plafonné à 0,55 ne suffit
   pas seul à tenir 4,5:1 sur la lampe et le miroir. Même teinte
   neutre, fondu 0→100 % — se lit comme la continuité du vignettage,
   pas comme une plaque. z-index:-1 : sous le texte, sur l'image. */
.hero-fullscreen:has(.hero-fullscreen__image) .entry-animation::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 33% 29% at 50% 50%,
      rgba(12, 10, 9, 0.34) 0%,
      rgba(12, 10, 9, 0.22) 55%,
      rgba(12, 10, 9, 0) 100%);
  pointer-events: none;
}

@media (max-width: 640px) {
  .hero-fullscreen:has(.hero-fullscreen__image) .entry-animation::before {
    background: radial-gradient(ellipse 62% 26% at 50% 50%,
        rgba(12, 10, 9, 0.32) 0%,
        rgba(12, 10, 9, 0.19) 55%,
        rgba(12, 10, 9, 0) 100%);
  }
}

/* La lisibilité est portée par le texte, pas par le voile : double
   ombre NEUTRE sombre (une serrée nette + une diffuse) sur le
   monogramme, le wordmark (MAISON JOFFRE + trait + sous-titre), la
   tagline et le filet. Jamais de glow, jamais de teinte chaude. */
.entry-animation__monogram,
.entry-animation__wordmark {
  filter: drop-shadow(0 1px 3px rgba(12, 10, 9, 0.65))
          drop-shadow(0 2px 24px rgba(12, 10, 9, 0.45));
}

.entry-animation__tagline {
  text-shadow: 0 1px 3px rgba(12, 10, 9, 0.65),
               0 2px 24px rgba(12, 10, 9, 0.45);
}

.entry-animation__scroll-cue {
  filter: drop-shadow(0 1px 3px rgba(12, 10, 9, 0.65))
          drop-shadow(0 2px 12px rgba(12, 10, 9, 0.45));
}

/* Bloc immersif accueil — texture discrète sous le voile existant,
   calibrée pour préserver le contraste du corps de texte cream. */
.home-visit__image {
  opacity: 0.22;
}

/* --- Emplacements de contenu : l'image épouse le cadre prévu --- */

.bureau-card__image img,
.bureau-gallery__item img,
.bureau-shared__item__image img,
.editorial-section__image img,
.visit-block__media img,
.visit-block__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carte bureau : l'aplat ::before s'efface devant l'image réelle,
   le zoom lent au survol se transfère à l'image elle-même. */
.bureau-card__image:has(img)::before {
  display: none;
}

.bureau-card__image img {
  transition: transform 0.6s ease;
}

.bureau-card:hover .bureau-card__image img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .bureau-card__image img {
    transition: none;
  }
  .bureau-card:hover .bureau-card__image img {
    transform: none;
  }
}

/* --- Histoire — rappel de la visite filmée, greffé au CTA --- */

.history-offer__media {
  display: block;
  max-width: 560px;
  margin: var(--space-lg) auto 0;
}

.history-offer__media img {
  display: block;
  width: 100%;
  height: auto;
}

.history-offer__media-caption {
  display: inline-block;
  margin-top: var(--space-xs);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.history-offer__media:hover .history-offer__media-caption,
.history-offer__media:focus-visible .history-offer__media-caption {
  color: var(--color-walnut);
  border-bottom-color: currentColor;
}

.contact-address__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

@media (max-width: 768px) {
  .contact-address__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.contact-address__column h3 {
  margin-bottom: var(--space-md);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
}

.contact-address__column p {
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.7;
}


/* === Page Contact — SCI bloc === */

.contact-sci {
  padding: var(--space-xl) 0 var(--space-2xl);
  background: var(--color-cream);
}

.contact-sci__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.contact-sci__panel {
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-cream-dark);
}

.contact-sci__panel p {
  margin: 0;
  max-width: 100%;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
}


/* === Page Mentions légales === */

.legal {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
}

.legal__inner {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.legal h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal p {
  max-width: 100%;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text-primary);
}

.legal .placeholder {
  color: var(--color-terracotta);
  font-style: italic;
  font-weight: 500;
}


/* === Lightbox === */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: rgba(26, 22, 20, 0.92);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: default;
}

.lightbox__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-cream);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.lightbox__close:hover {
  opacity: 0.7;
}

body.lightbox-open {
  overflow: hidden;
}


/* === Curseur custom (états JS-driven) === */

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 8px;
  height: 8px;
  background: var(--color-walnut);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity var(--transition-fast);
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-walnut);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.5;
  transform: translate(-50%, -50%);
  transition: width var(--transition-fast), height var(--transition-fast), opacity var(--transition-fast), border-color var(--transition-fast);
}

.cursor-ring.is-hover {
  width: 48px;
  height: 48px;
  border-color: var(--color-terracotta);
  opacity: 0.8;
}

.cursor-dot.is-hover {
  opacity: 0;
}

@media (max-width: 1023px) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}


/* === Logo dans le header === */

.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-logo__img {
  display: block;
  width: auto;
  height: 56px;
  transition: opacity var(--transition-fast);
}

.site-logo:hover .site-logo__img {
  opacity: 0.85;
}

.site-logo__img--desktop {
  display: block;
}

.site-logo__img--mobile {
  display: none;
}

@media (max-width: 768px) {
  .site-logo__img--desktop {
    display: none;
  }

  .site-logo__img--mobile {
    display: block;
  }

  .site-logo__img {
    height: 40px;
  }
}


/* === Logo dans le footer === */

.site-footer__logo {
  display: block;
  margin-bottom: var(--space-md);
}

.site-footer__logo__img {
  width: auto;
  height: 48px;
  opacity: 0.95;
}


/* === Logo header : bascule cream / walnut au scroll === */

.site-header .site-logo__img--walnut { display: none; }
.site-header .site-logo__img--cream { display: block; }

.site-header.scrolled .site-logo__img--walnut { display: block; }
.site-header.scrolled .site-logo__img--cream { display: none; }

/* Verrouillage viewport — empêche la variante de mauvaise taille
   d'être affichée par les règles de couleur ci-dessus, quel que
   soit l'état scrolled. */
@media (min-width: 769px) {
  .site-header .site-logo__img--mobile,
  .site-header.scrolled .site-logo__img--mobile {
    display: none;
  }
}

@media (max-width: 768px) {
  .site-header .site-logo__img--desktop,
  .site-header.scrolled .site-logo__img--desktop {
    display: none;
  }
}



/* === Animation d'entrée "L'invitation gravée" === */
/* L'overlay vit DANS la section .hero-fullscreen et EN constitue l'état permanent.
   La timeline révèle progressivement le bloc logo, qui ne s'efface jamais ensuite.
   La tagline "Sur invitation" est l'élément transitoire ; le filet pulsant en
   bas-centre signale qu'il faut scroller. */

.entry-animation {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-walnut);
}

/* Contenu central */
.entry-animation__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.entry-animation__logo {
  display: flex;
  align-items: center;
  gap: 2rem;
  opacity: 0; /* JS pose à 1 à l'acte 1 ; reste à 1 ensuite */
}

.entry-animation__monogram {
  width: clamp(96px, 10vw, 160px);
  height: auto;
  opacity: 0;
}

.entry-animation__wordmark {
  width: auto;
  height: clamp(160px, 18vw, 240px);
  opacity: 0;
}

.entry-animation__tagline {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  text-transform: lowercase;
  color: var(--color-cream);
  opacity: 0;
}

/* Filet vertical pulsant — apparaît à l'acte 6, reste en boucle ensuite */
.entry-animation__scroll-cue {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 40px;
  background: var(--color-cream);
  opacity: 0;
  transform-origin: top;
}

.entry-animation__scroll-cue.is-pulsing {
  animation: pulseDown 2s ease infinite;
}

/* Mobile : stack vertical (Q1=b confirmé) — monogramme au-dessus, wordmark en-dessous */
@media (max-width: 768px) {
  .entry-animation__logo {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .entry-animation__monogram {
    width: clamp(96px, 30vw, 160px);
  }

  .entry-animation__wordmark {
    width: clamp(220px, 65vw, 360px);
    height: auto;
  }
}

/* Pendant l'animation, header masqué (visibilité ET focus retirés du tab order) */
.page-home.is-animating #site-header {
  visibility: hidden;
  opacity: 0;
}

/* Reduced motion : pas d'animation. État permanent affiché immédiatement.
   La tagline "Sur invitation" n'apparaît pas (transitoire par nature). */
@media (prefers-reduced-motion: reduce) {
  .entry-animation__logo,
  .entry-animation__monogram,
  .entry-animation__wordmark {
    opacity: 1;
  }
  .entry-animation__tagline {
    display: none;
  }
  .entry-animation__scroll-cue {
    opacity: 0.6;
    animation: pulseDown 2s ease infinite;
  }
}



/* === Header — bascule du menu de navigation et du burger ===
   État par défaut : nav + burger en cream (header transparent au-dessus
   du hero walnut). État scrolled : bascule en walnut (header sur fond crème).
   Menu mobile ouvert : fond cream, donc nav + burger en walnut. */

/* État par défaut — cream sur header transparent */
.site-header .site-header__nav a {
  color: var(--color-cream);
  opacity: 0.85;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.site-header .site-header__nav a:hover {
  color: var(--color-cream);
  opacity: 1;
}

.site-header .site-header__nav a.active {
  color: var(--color-cream);
  opacity: 1;
}

/* Burger spans : même bascule */
.site-header .site-header__burger span {
  background: var(--color-cream);
}

/* État scrolled — walnut sur fond crème densifié */
.site-header.scrolled .site-header__nav a {
  color: var(--color-walnut);
  opacity: 0.85;
}

.site-header.scrolled .site-header__nav a:hover {
  color: var(--color-walnut);
  opacity: 1;
}

.site-header.scrolled .site-header__nav a.active {
  color: var(--color-walnut);
  opacity: 1;
}

.site-header.scrolled .site-header__burger span {
  background: var(--color-walnut);
}

/* Menu mobile ouvert : nav fullscreen sur fond cream, donc liens et burger en walnut */
body.menu-open .site-header .site-header__nav a,
body.menu-open .site-header .site-header__nav a.active {
  color: var(--color-walnut);
  opacity: 0.85;
}

body.menu-open .site-header .site-header__nav a:hover,
body.menu-open .site-header .site-header__nav a.active {
  opacity: 1;
}

body.menu-open .site-header .site-header__burger span {
  background: var(--color-walnut);
}


/* === Email obfuscation — anti-spam scraping === */
/* Pattern Base64 : le href="#" placeholder est réécrit en mailto: au clic
   par revealMail() (cf. /js/main.js). Pas de dépendance externe. */
.protected-email {
  cursor: pointer;
}


/* === Affordance CTA "Nous écrire" — patterns Patek Philippe / Hermès === */

/* Bouton encadré (CTA principal) — type Patek Philippe / Loro Piana */
.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  background: transparent;
  color: var(--color-walnut);
  border: 1.5px solid var(--color-walnut);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-default), color var(--transition-default);
}

.btn-contact:hover {
  background: var(--color-walnut);
  color: var(--color-cream);
}

.btn-contact__arrow {
  display: inline-block;
  font-size: 1.2em;
  transition: transform var(--transition-default);
}

.btn-contact:hover .btn-contact__arrow {
  transform: translateX(4px);
}

/* Variante claire (pour fond walnut) */
.btn-contact--light {
  color: var(--color-cream);
  border-color: var(--color-cream);
}

.btn-contact--light:hover {
  background: var(--color-cream);
  color: var(--color-walnut);
}

/* Footer "Nous écrire" — soulignement subtil cream 40% → cream plein au hover (type Hermès) */
.site-footer .protected-email {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(245, 239, 230, 0.4);
  transition: text-decoration-color var(--transition-fast);
}

.site-footer .protected-email:hover {
  text-decoration-color: var(--color-cream);
}

/* Inline narrative — soulignement walnut 40% → walnut plein au hover */
.protected-email.inline-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(62, 42, 31, 0.4);
  transition: text-decoration-color var(--transition-fast);
}

.protected-email.inline-link:hover {
  text-decoration-color: var(--color-walnut);
}