:root { --accent:#6E5327; --accent-l:#A98650; --ink:#1C1A17; --ground:#F2EFE8;
        --maxw:1320px; --gut:120px; --head:88px; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); -webkit-font-smoothing: antialiased;
       font-family: Jost, "Avenir Next", system-ui, sans-serif; }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/bodoni-moda-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/bodoni-moda-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/jost-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/jost-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/jost-latin-500.woff2') format('woff2'); }
img { max-width: 100%; min-width: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Pleine largeur : bandes bord a bord, contenu centre ---- */
.page-root { width: 100% !important; max-width: none !important; height: auto !important;
             min-height: 0 !important; margin: 0 !important; overflow-x: clip; }
.page-root > section, .page-root > header, .page-root > footer {
  flex: 0 0 auto !important; min-height: 0 !important;
  padding-left: max(var(--gut), calc((100% - var(--maxw)) / 2)) !important;
  padding-right: max(var(--gut), calc((100% - var(--maxw)) / 2)) !important; }
.page-root > section { scroll-margin-top: calc(var(--head) + 8px); }

/* ---- En-tete collant ---- */
.page-root > header { position: sticky; top: 0; z-index: 60;
  background: rgba(242,239,232,.88); backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent !important;
  transition: border-color .4s ease, box-shadow .4s ease; }
.page-root > header.scrolled { border-bottom-color: #D8D2C6 !important;
  box-shadow: 0 1px 24px rgba(28,26,23,.06); }
.site-nav a { position: relative; transition: color .25s ease; }
.site-nav a:not([style*="background"]):hover { color: var(--accent) !important; }
.site-nav a:not([style*="background"])::after { content: ""; position: absolute; left: 0;
  bottom: -5px; width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.site-nav a:not([style*="background"]):hover::after { transform: scaleX(1); }

/* ---- Hero plein ecran ---- */
@media (min-width: 1101px) { #hero { min-height: calc(100vh - var(--head)) !important; } }

  /* ---- Ecran d'ouverture plein ecran ---- */
  #intro-cover { height: 100vh !important; min-height: 520px; margin: 0 !important;
    padding: 0 !important; margin-top: calc(-1 * var(--head)) !important; }
  #intro-cover h1 { font-size: 112px; }
  #intro-cover .scroll-hint span:last-child { animation: hintpulse 2.4s ease-in-out infinite; }
  @keyframes hintpulse { 0%,100% { opacity: .35; transform: scaleY(.7); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); } }
  @media (max-width: 760px) { #intro-cover h1 { font-size: 64px !important; } }
  @media (max-width: 480px) { #intro-cover h1 { font-size: 52px !important; } }
  @media (prefers-reduced-motion: reduce) { #intro-cover .scroll-hint span:last-child { animation: none; } }

/* ---- Visuels ---- */
figure { overflow: hidden; min-width: 0; }
/* Les colonnes de visuels occupent la place restante sans ecraser le texte */
.page-root section > figure, .page-root section > div[style*="flex-grow: 1"],
.page-root section > form { flex-basis: 0 !important; min-width: 0 !important; }
.page-root section > div:not([style*="flex-grow"]) { flex-shrink: 0 !important; }
.ph { display: block; overflow: hidden; width: 100%; will-change: transform;
      transform: translate3d(0, var(--py, 0px), 0); }
figure img { display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--s, 1.10)); transform-origin: center;
  transition: transform 1.6s cubic-bezier(.22,.61,.36,1); will-change: transform; }
figure:hover img { --s: 1.14; }

/* Filet de progression de lecture, logé sous l'en-tete */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: transparent; pointer-events: none; }
.progress > span { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, transparent, var(--accent-l), var(--accent));
  transition: width .12s linear; }

/* ---- Boutons, tableau, champs ---- */
a[href="#contact"], a[href="#surfaces"], button[type="submit"] {
  transition: background-color .3s ease, color .3s ease, transform .3s ease,
              box-shadow .3s ease; }
a[href="#contact"]:hover, a[href="#surfaces"]:hover, button[type="submit"]:hover {
  transform: translateY(-2px); box-shadow: 0 8px 22px rgba(28,26,23,.14); }
tbody tr { transition: background-color .3s ease; }
tbody tr:hover { background: rgba(28,26,23,.035); }
input, textarea { transition: border-color .3s ease, background-color .3s ease; }
input:focus, textarea:focus { border-color: var(--accent-l) !important; }

/* ---- Apparitions au defilement ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translate3d(0, 26px, 0);
    transition: opacity 1.1s cubic-bezier(.16,.84,.34,1),
                transform 1.1s cubic-bezier(.16,.84,.34,1); }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal figure img { --s: 1.2; }
  .reveal.is-in figure img { --s: 1.10; }
  /* Les titres se devoilent par le bas, legerement apres leur bloc */
  .reveal h1, .reveal h2 { clip-path: inset(0 0 102% 0);
    transition: clip-path 1.2s cubic-bezier(.16,.84,.34,1) .08s; }
  .reveal.is-in h1, .reveal.is-in h2 { clip-path: inset(0 0 -12% 0); }
  /* Les lignes du tableau arrivent en cascade */
  tbody tr.row-in { opacity: 0; transition: opacity .8s ease; }
  tbody tr.row-in.is-in { opacity: 1; }
  /* Premiere image : leger recadrage a l'ouverture */
  #hero figure img { --s: 1.16; transition: transform 2.6s cubic-bezier(.16,.84,.34,1); }
  #hero figure img.settled { --s: 1.10; }
}

/* ---- Menu mobile ---- */
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer;
              color: #1C1A17; }
.nav-toggle svg { display: block; }

@media (max-width: 1240px) { :root { --gut: 64px; } }

@media (max-width: 1100px) {
  :root { --gut: 44px; }
  .nav-toggle { display: block; }
  .site-nav { display: none !important; width: 100% !important;
      flex-direction: column !important; align-items: flex-start !important;
      gap: 20px !important; padding: 22px 0 10px !important; }
  .site-nav.open { display: flex !important; }
  .page-root > header { height: auto !important; min-height: 72px !important;
      padding-top: 16px !important; padding-bottom: 16px !important; flex-wrap: wrap !important; }
  .page-root > section { padding-top: 76px !important; padding-bottom: 76px !important; }
  .flex-row { flex-wrap: wrap !important; gap: 44px !important; }
  .flex-row > div, .flex-row > figure { width: 100% !important; flex: 1 1 100% !important; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  h1 { font-size: 46px !important; }
  h2 { font-size: 34px !important; }
}

@media (max-width: 760px) {
  :root { --gut: 22px; --head: 68px; }
  .page-root > section { padding-top: 58px !important; padding-bottom: 58px !important; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
  .page-root [style*="display: flex"] { flex-wrap: wrap !important; }
  .page-root footer { gap: 18px !important; }
  .page-root footer > div { flex-wrap: wrap !important; gap: 14px !important; }
  h1 { font-size: 34px !important; line-height: 1.12 !important; }
  h2 { font-size: 26px !important; }
  .page-root figure .ph { height: auto !important; min-height: 0 !important;
      aspect-ratio: 4 / 3; }
  .page-root figure img { height: 100% !important; min-height: 0 !important; }
  table { display: block; }
  thead { display: none; }
  tbody, tr, td { display: block; width: 100%; }
  tr { padding: 14px 0; border-bottom: 1px solid #D8D2C6; }
  td { border: 0 !important; padding: 2px 0 !important; }
  td::before { content: attr(data-l); display: block; font-size: 11px; letter-spacing: .12em;
      text-transform: uppercase; color: #6B665C; margin-bottom: 2px; }
  td:first-child::before { content: none; }
  .stack-sm { flex-direction: column !important; align-items: flex-start !important;
      gap: 16px !important; }
}

@media print { .nav-toggle, .site-nav { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; } }