@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@300;400;600;700&display=swap');

/* Affichage recadré du logo maître sand-interiors-logo.svg. */
.brand,
.projects-brand,
.contact-brand,
.detail-brand,
.detail-footer > a,
.projects-list + footer > a,
.contact-layout + footer > a {
  display: block;
  width: 170px;
  height: 42px;
  overflow: hidden;
}

.brand img,
.projects-brand img,
.contact-brand img,
.detail-brand img,
.detail-footer img,
.projects-list + footer img,
.contact-layout + footer img {
  display: block !important;
  width: 170px !important;
  max-width: none;
  height: auto !important;
  transform: translateY(-2px);
}

.brand::after { content: none !important; }
.projects-brand img,
.contact-brand img { filter: invert(1); }
.detail-header.scrolled .detail-brand img,
.menu-open .detail-header .detail-brand img { filter: invert(1); }

@media (max-width: 600px) {
  .brand,
  .projects-brand,
  .contact-brand,
  .detail-brand { width: 145px; height: 37px; }
  .brand img,
  .projects-brand img,
  .contact-brand img,
  .detail-brand img { width: 145px !important; }
}

/* Bouton de menu sans contour circulaire. */
.menu-toggle,
.projects-toggle,
.contact-toggle,
.about-toggle,
.detail-toggle {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-header .menu-toggle,
.projects-header .projects-toggle,
.contact-header .contact-toggle,
.about-header .about-toggle,
.detail-header .detail-toggle {
  position: absolute;
  right: calc(var(--gutter) + 46px);
}

/* Navigation symétrique autour du logo central. */
.site-header,
.projects-header,
.contact-header,
.about-header,
.detail-header,
.detail-header.scrolled,
.menu-open .detail-header {
  background: #191919 !important;
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
  backdrop-filter: none !important;
}

.site-header .brand img,
.projects-header .projects-brand img,
.contact-header .contact-brand img,
.about-header .about-brand img,
.detail-header .detail-brand img,
.detail-header.scrolled .detail-brand img,
.menu-open .detail-header .detail-brand img {
  filter: none !important;
}

.site-header nav a,
.projects-header nav a,
.contact-header nav a,
.about-header nav a,
.detail-header nav a,
.header-lang {
  color: #fff !important;
}

.site-header nav a::after,
.projects-header nav a::after,
.contact-header nav a::after,
.about-header nav a::after,
.detail-header nav a::after {
  background: #fff !important;
}

.menu-toggle span,
.projects-toggle span,
.contact-toggle span,
.about-toggle span,
.detail-toggle span {
  background: #fff !important;
  box-shadow: none !important;
}

.site-header.home-header {
  background: transparent !important;
  border-bottom-color: transparent !important;
}

.site-header .brand,
.projects-header .projects-brand,
.contact-header .contact-brand,
.about-header .about-brand,
.detail-header .detail-brand {
  position: absolute;
  z-index: 65;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

.site-header .desktop-nav,
.projects-header .projects-nav,
.contact-header .contact-nav,
.about-header .about-nav,
.detail-header .detail-nav {
  position: absolute;
  left: 50%;
  width: min(760px, 66vw);
  transform: translateX(-50%);
  justify-content: center;
  gap: clamp(25px, 3vw, 48px);
}

.site-header .desktop-nav > :nth-child(2),
.projects-header .projects-nav > :nth-child(2),
.contact-header .contact-nav > :nth-child(2),
.about-header .about-nav > :nth-child(2),
.detail-header .detail-nav > :nth-child(2) {
  margin-right: clamp(155px, 15vw, 225px);
}

.header-lang {
  position: absolute;
  z-index: 70;
  top: 0;
  right: calc(var(--gutter) + 39px);
  display: flex;
  align-items: center;
  height: 90px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.music-toggle {
  position: absolute;
  z-index: 70;
  top: 0;
  right: var(--gutter);
  width: 27px;
  height: 90px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.music-toggle span {
  width: 1px;
  height: 8px;
  background: currentColor;
  opacity: .58;
  transform-origin: center;
}

.music-toggle.is-playing span { animation: music-level .8s ease-in-out infinite alternate; }
.music-toggle.is-playing span:nth-child(2) { animation-delay: -.55s; }
.music-toggle.is-playing span:nth-child(3) { animation-delay: -.25s; }
.music-toggle:hover span,
.music-toggle:focus-visible span { opacity: 1; }

@keyframes music-level {
  from { transform: scaleY(.45); }
  to { transform: scaleY(1.55); }
}

.site-header,
.projects-header,
.contact-header,
.about-header,
.detail-header {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
  height: 90px;
  padding-right: var(--gutter);
  padding-left: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Même en-tête sur toutes les pages : dimensions et rythme de l'accueil. */
.site-header .brand,
.projects-header .projects-brand,
.contact-header .contact-brand,
  .about-header .about-brand,
  .detail-header .detail-brand {
  display: block;
  width: 170px;
  height: 56px;
  overflow: hidden;
}

.site-header .brand img,
.projects-header .projects-brand img,
.contact-header .contact-brand img,
.about-header .about-brand img,
.detail-header .detail-brand img {
  display: block !important;
  width: 170px !important;
  max-width: none;
  height: auto !important;
  transform: translateY(-49px);
}

.site-header .menu-toggle,
.projects-header .projects-toggle,
.contact-header .contact-toggle,
.about-header .about-toggle,
.detail-header .detail-toggle {
  position: absolute;
  z-index: 70;
  left: var(--gutter);
  right: auto;
  display: block;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
}

.site-header .menu-toggle span,
.projects-header .projects-toggle span,
.contact-header .contact-toggle span,
.about-header .about-toggle span,
.detail-header .detail-toggle span {
  position: absolute;
  left: 9px;
  display: block;
  width: 26px;
  height: 2px;
  transition: top .4s ease, transform .4s ease, opacity .25s ease;
}

.site-header .menu-toggle span:nth-child(1),
.projects-header .projects-toggle span:nth-child(1),
.contact-header .contact-toggle span:nth-child(1),
.about-header .about-toggle span:nth-child(1),
.detail-header .detail-toggle span:nth-child(1) { top: 14px; }
.site-header .menu-toggle span:nth-child(2),
.projects-header .projects-toggle span:nth-child(2),
.contact-header .contact-toggle span:nth-child(2),
.about-header .about-toggle span:nth-child(2),
.detail-header .detail-toggle span:nth-child(2) { top: 21px; }
.site-header .menu-toggle span:nth-child(3),
.projects-header .projects-toggle span:nth-child(3),
.contact-header .contact-toggle span:nth-child(3),
.about-header .about-toggle span:nth-child(3),
.detail-header .detail-toggle span:nth-child(3) { top: 28px; }

.site-header .desktop-nav > a,
.projects-header .projects-nav > a,
.contact-header .contact-nav > a,
.about-header .about-nav > a,
.detail-header .detail-nav > a {
  min-width: 82px;
  text-align: center;
}

@media (max-width: 900px) {
  .site-header .desktop-nav,
  .projects-header .projects-nav,
  .contact-header .contact-nav,
  .about-header .about-nav,
  .detail-header .detail-nav {
    display: none;
  }

  .site-header .menu-toggle,
  .projects-header .projects-toggle,
  .contact-header .contact-toggle,
  .about-header .about-toggle,
  .detail-header .detail-toggle {
    left: var(--gutter);
    right: auto;
  }

  .header-lang {
    display: flex !important;
    right: calc(var(--gutter) + 37px);
    height: 78px;
  }

  .music-toggle { right: var(--gutter); height: 78px; }

  .site-header,
  .projects-header,
  .contact-header,
  .about-header,
  .detail-header { height: 78px; }

  .site-header .brand,
  .projects-header .projects-brand,
  .contact-header .contact-brand,
  .about-header .about-brand,
  .detail-header .detail-brand { width: 145px; height: 47px; }

  .site-header .brand img,
  .projects-header .projects-brand img,
  .contact-header .contact-brand img,
  .about-header .about-brand img,
  .detail-header .detail-brand img { width: 145px !important; transform: translateY(-42px); }
}

/* Menu plein écran identique à celui de l'accueil sur chaque page. */
.mobile-menu,
.projects-menu,
.about-menu,
.contact-menu,
.detail-menu {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 110px var(--gutter) 40px;
  background: #111 !important;
  color: #fff !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility .45s ease;
}

.menu-open .mobile-menu,
.menu-open .projects-menu,
.menu-open .about-menu,
.menu-open .contact-menu,
.menu-open .detail-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu nav,
.projects-menu nav,
.about-menu nav,
.contact-menu nav,
.detail-menu nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.5vh, 26px);
  text-align: center;
}

.mobile-menu nav a,
.projects-menu nav a,
.about-menu nav a,
.contact-menu nav a,
.detail-menu nav a {
  color: #fff !important;
  font-size: clamp(38px, 6vw, 82px) !important;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: none;
}

.mobile-menu nav a::after,
.projects-menu nav a::after,
.about-menu nav a::after,
.contact-menu nav a::after,
.detail-menu nav a::after { content: none !important; }

.mobile-menu > p,
.projects-menu > p,
.about-menu > p,
.contact-menu > p,
.detail-menu > p {
  position: absolute;
  bottom: 32px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: #999;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Footer éditorial commun. */
.site-footer {
  min-height: clamp(400px, 27vw, 550px) !important;
  padding: clamp(58px, 4vw, 82px) clamp(36px, 3.42vw, 70px) 18px !important;
  display: block !important;
  background: #191919 !important;
  color: #fff !important;
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 24.8% 24.8% 23.6% 26.8%;
  grid-template-rows: clamp(68px, 4.8vw, 92px) auto;
  column-gap: 0;
  row-gap: clamp(48px, 3.7vw, 76px);
  align-items: start;
}

.site-footer .footer-logo {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.site-footer .footer-offices {
  grid-column: 1 / 4;
  grid-row: 2;
}

.site-footer .footer-grid > div:last-child {
  grid-column: 4;
  grid-row: 1 / 3;
  padding-top: clamp(32px, 2.5vw, 51px);
}

.site-footer .footer-offices {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 !important;
}

.site-footer .footer-offices p b {
  display: block;
  margin-bottom: 7px;
  color: rgba(255,255,255,.88);
  font-weight: 500;
}

.site-footer .footer-logo {
  display: block;
  width: clamp(205px, 13.2vw, 270px);
  height: clamp(68px, 4.8vw, 92px);
  overflow: hidden;
}

.site-footer .footer-logo img {
  display: block !important;
  width: clamp(205px, 13.2vw, 270px) !important;
  max-width: none;
  height: auto !important;
  transform: translateY(-32%);
}

.site-footer .footer-grid p,
.site-footer .footer-grid a,
.site-footer .footer-grid strong {
  margin: 0;
  color: rgba(255, 255, 255, .55) !important;
  font-size: clamp(11px, .83vw, 17px) !important;
  font-weight: 300;
  line-height: 2.15;
  letter-spacing: .14em;
  text-align: left !important;
  text-transform: uppercase;
}

.site-footer .footer-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.site-footer .footer-grid > div:last-child > a {
  font-size: clamp(12px, .98vw, 20px) !important;
}

.site-footer .footer-grid strong {
  margin-top: clamp(9px, .65vw, 13px);
  color: rgba(255, 255, 255, .9) !important;
  font-size: clamp(12px, .93vw, 19px) !important;
  font-weight: 600;
}

.site-footer .footer-grid a:hover { color: #fff !important; }

.site-footer .social-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.75vw, 36px);
}

.site-footer .social-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-footer .social-links a::before {
  content: "";
  display: block;
  width: clamp(17px, 1.22vw, 25px);
  height: clamp(17px, 1.22vw, 25px);
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.site-footer .social-instagram::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm11 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
}

.site-footer .social-linkedin::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5.2 3.5A2.2 2.2 0 1 1 5.2 8a2.2 2.2 0 0 1 0-4.5ZM3.3 9.5h3.8V21H3.3V9.5Zm6.1 0H13v1.6h.1c.5-.9 1.7-2 3.5-2 3.8 0 4.5 2.5 4.5 5.7V21h-3.8v-5.5c0-1.3 0-3-1.9-3s-2.2 1.4-2.2 2.9V21H9.4V9.5Z'/%3E%3C/svg%3E");
}

.site-footer > small {
  display: block;
  margin-top: clamp(48px, 4vw, 82px) !important;
  padding-top: clamp(15px, 1vw, 20px) !important;
  border-top: 1px solid rgba(255, 255, 255, .14) !important;
  color: rgba(255, 255, 255, .38) !important;
  font-size: clamp(9px, .68vw, 14px) !important;
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.footer-mail-open { overflow: hidden; }

.footer-mail-dialog {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 9, 9, .72);
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(8px);
  transition: opacity .35s ease, visibility .35s ease;
}

.footer-mail-dialog.is-open { opacity: 1; visibility: visible; }

.footer-mail-panel {
  position: relative;
  width: min(620px, 100%);
  padding: clamp(42px, 6vw, 78px);
  background: #f1efe9;
  color: #191919;
  transform: translateY(18px);
  transition: transform .4s cubic-bezier(.22, .7, .2, 1);
}

.footer-mail-dialog.is-open .footer-mail-panel { transform: none; }
.footer-mail-panel > p { margin: 0 0 28px; color: #777; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.footer-mail-panel h2 { margin: 0 0 clamp(32px, 5vw, 54px); font-family: "MuseoModerno", "Helvetica Neue", sans-serif; font-size: clamp(32px, 5vw, 58px); line-height: 1; letter-spacing: -.045em; }
.footer-mail-address { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid rgba(25,25,25,.4); font-size: clamp(13px, 1.5vw, 17px); font-weight: 300; }
.footer-mail-action { display: flex; align-items: center; gap: 16px; width: max-content; margin-top: clamp(36px, 5vw, 58px); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.footer-mail-action i { width: 42px; height: 1px; background: currentColor; transition: width .3s ease; }
.footer-mail-action:hover i { width: 62px; }
.footer-mail-close { position: absolute; top: 18px; right: 21px; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: inherit; font: 300 34px/1 Arial, sans-serif; cursor: pointer; }

@media (max-width: 600px) {
  .footer-mail-panel { padding: 48px 28px 38px; }
  .footer-mail-panel h2 { font-size: 34px; }
}

@media (max-width: 700px) {
  .site-footer { min-height: 0 !important; padding: 65px 24px 35px !important; }
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 38px; }
  .site-footer .footer-offices { grid-template-columns: 1fr !important; gap: 22px !important; }
  .site-footer .footer-logo,
  .site-footer .footer-offices,
  .site-footer .footer-grid > div:last-child { grid-column: 1; }
  .site-footer .footer-logo { grid-row: 1; }
  .site-footer .footer-offices { grid-row: 2; }
  .site-footer .footer-grid > div:last-child { grid-row: 3; padding-top: 0; }
  .site-footer .footer-logo { width: 220px; height: 74px; }
  .site-footer .footer-logo img { width: 220px !important; transform: translateY(-32%); }
  .site-footer .footer-grid p,
  .site-footer .footer-grid a,
  .site-footer .footer-grid strong,
  .site-footer .footer-grid > div:last-child > a { font-size: 11px !important; }
  .site-footer .footer-grid strong { font-size: 12px !important; }
  .site-footer > small { margin-top: 55px !important; }
}

@media (min-width: 701px) and (max-width: 1050px) {
  .site-footer { min-height: 440px !important; }
  .site-footer .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 45px;
    row-gap: 70px;
  }
  .site-footer .footer-offices { gap: 24px !important; }
  .site-footer > small { margin-top: 50px !important; }
}

/* Cursor Style 3 — minimal dot and inertial ring. */
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor, html.has-custom-cursor body,
  html.has-custom-cursor a, html.has-custom-cursor button,
  html.has-custom-cursor label, html.has-custom-cursor input,
  html.has-custom-cursor textarea, html.has-custom-cursor select { cursor: none !important; }

  .sand-cursor-dot, .sand-cursor-ring {
    position: fixed; z-index: 2147483647; top: 0; left: 0;
    border-radius: 50%; pointer-events: none; opacity: 0;
    mix-blend-mode: difference; will-change: transform;
  }
  .sand-cursor-dot { width: 5px; height: 5px; background: #fff; }
  .sand-cursor-ring {
    width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.9);
    transition: width .28s ease, height .28s ease, opacity .2s ease;
  }
  .sand-cursor-dot.is-visible, .sand-cursor-ring.is-visible { opacity: 1; }
  .sand-cursor-ring.is-interactive { width: 52px; height: 52px; }
  .sand-cursor-ring.is-pressed { width: 24px; height: 24px; }

  /* Style 2 — cycling S A N D, 70% smaller than the original version. */
  .sand-cursor-letter {
    position: fixed; z-index: 2147483647; top: 0; left: 0;
    width: 1.05em; height: 1.05em; pointer-events: none; opacity: 0;
    color: #fff; font-family: "MuseoModerno", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(15px, 1.56vw, 26px); font-weight: 300; line-height: 1;
    text-align: center; letter-spacing: -.08em; mix-blend-mode: difference;
    will-change: transform; transition: opacity .16s ease, font-size .28s ease;
  }
  .sand-cursor-letter.is-visible { opacity: 1; }
  .sand-cursor-letter.is-changing { opacity: 0; }
  .sand-cursor-letter.is-interactive { font-size: clamp(20px, 1.95vw, 32px); font-weight: 400; }
  .sand-cursor-letter.is-pressed { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .sand-cursor-dot, .sand-cursor-ring, .sand-cursor-letter { display: none !important; }
}

/* Global typography system. */
body, button, input, textarea, select {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3,
.project-title, .project_title, .thumbnail_title,
.related-card span, .next-copy strong,
.test-project-nav strong {
  font-family: "MuseoModerno", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
}

h2, h3,
.about-page .expertise h2,
.contact-lead,
.project-intro--reference .fact strong {
  font-size: clamp(18px, 1.55vw, 27px) !important;
  font-weight: 700 !important;
}

/* Project location labels: 40% smaller and light. */
.project-card p,
.hero-copy p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(11px, .93vw, 16px) !important;
  font-weight: 300 !important;
}

/* Projects index: rebalance project names and locations. */
.project-card h2 {
  font-size: clamp(16px, 1.4vw, 24px) !important;
}

.project-card p {
  font-size: clamp(12px, 1.02vw, 18px) !important;
}

.about-text p,
.contact-details dd,
.field input, .field textarea,
.project-intro--reference .intro-content > p,
.project_about p, .project_credits {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 300 !important;
}