@font-face{font-family:"Geist Mono";font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/GeistMono-Light.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/GeistMono-Regular.woff2) format("woff2")}
h1.ttl{margin:0;font-weight:300;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.3;letter-spacing:.08em;text-transform:uppercase;text-wrap:balance}

/* Layout: fond blanc, photos avec une marge, accroche dans l'en-tête, séries en grille libre façon magazine d'architecture, pied de page sable profond avec texte blanc. */
:root {
  --bg: #FDFCF9;
  --sand: #C8C0AF;
  --taupe: #7E7560;
  --ink: #151412;
  --ink-soft: #5C5649;
  --white: #FFFFFF;
  --font: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --breath: clamp(6rem, 15vw, 14rem);
  --measure: 62ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.85;
  letter-spacing: 0.01em;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
img { display: block; width: 100%; height: auto; }
figure { margin: 0; min-width: 0; }
p { margin: 0; }

.label {
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.soft { color: var(--ink-soft); }
.pad { padding-inline: var(--gutter); }
.wrap { max-width: 96rem; margin-inline: auto; }

/* Photos atténuées : un léger voile pour un rendu argentique mat */
.film img { opacity: 0.88; filter: sepia(0.06); }

/* En-tête */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "brand brand" "title fig";
  column-gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.25rem, 2.4vw, 2rem) clamp(1rem, 2vw, 2rem);
}
.brand { grid-area: brand; display: grid; gap: 0.9rem; align-content: start; justify-items: center; text-align: center; min-width: 0; padding-bottom: clamp(1.5rem, 3vw, 3rem); }
.brand .name {
  text-decoration: none;
  font-size: clamp(1.3rem, 3.4vw, 3.4rem);
  font-weight: 300;
  letter-spacing: 0.16em;
  line-height: 1.2;
}
.brand nav { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(0.8rem, 2vw, 1.8rem); white-space: nowrap; }
.brand nav a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.brand nav a:hover { border-color: var(--ink); }
.hero figure { grid-area: fig; background: var(--bg); }
.hero-title .label { margin-top: 1.6rem; }
.hero-title { grid-area: title; align-self: end; min-width: 0; padding-bottom: clamp(0.5rem, 2vw, 2rem); }
h1 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(1.35rem, 2.8vw, 3rem);
  line-height: 1.22;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Sections */
h2 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
}
.prose { max-width: var(--measure); display: grid; gap: 1.6rem; text-wrap: pretty; }

/* À propos */
.about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: var(--breath);
  align-items: center;
}
.about > * { min-width: 0; }
.about figure img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; }
.about .text { display: grid; gap: 2.4rem; }

/* Prestations */
.band { background: var(--sand); color: var(--white); margin-top: var(--breath); padding-block: clamp(5rem, 11vw, 10rem); }
.band .soft, .band .group li p { color: var(--white); }
.band .wrap { padding-inline: calc(var(--gutter) + clamp(0rem, 9vw, 10rem)); }
.services-head { display: grid; gap: 1.2rem; max-width: 40rem; }
.groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 7vw, 7rem);
  margin-top: clamp(3rem, 7vw, 6rem);
}
.group { display: grid; gap: 2.2rem; align-content: start; }
.group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.2rem; }
.group li h3 {
  margin: 0 0 0.5rem;
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.group li p { max-width: 44ch; color: var(--ink-soft); }
.note { margin-top: clamp(3rem, 6vw, 5rem); max-width: 48ch; }

/* Séries : grille libre sur 12 colonnes */
.series-head { margin-top: var(--breath); display: grid; gap: 1.2rem; max-width: 44rem; }
.series {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(0.5rem, 1.2vw, 1rem);
  row-gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(3rem, 7vw, 6rem);
  align-items: start;
}
.series figcaption { padding-top: 0.7rem; }
.ph { position: relative; overflow: hidden; outline-offset: 4px; }
.cap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: clamp(0.8rem, 1.6vw, 1.4rem);
  background: linear-gradient(to top, rgba(21, 20, 18, 0.55), rgba(21, 20, 18, 0) 55%);
  color: var(--white);
  text-shadow: 0 1px 12px rgba(21, 20, 18, 0.35);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.ph.on .cap, .ph:focus-visible .cap { opacity: 1; }
@media (hover: hover) {
  .ph:hover .cap { opacity: 1; }
}
.series .film img { opacity: 0.94; }
.series .film.soft img { opacity: 0.96; }
.s1 { grid-column: 1 / 5; }
.s2 { grid-column: 6 / 13; align-self: end; }
.s3 { grid-column: 2 / 5; }
.s4 { grid-column: 6 / 11; margin-top: clamp(2rem, 6vw, 6rem); }
.s5 { grid-column: 1 / 6; }
.s6 { grid-column: 8 / 11; margin-top: clamp(3rem, 8vw, 8rem); }
.s7 { grid-column: 2 / 5; margin-top: clamp(2rem, 6vw, 6rem); }
.s8 { grid-column: 7 / 12; }
.s9 { grid-column: 1 / 5; }
.s10 { grid-column: 6 / 10; margin-top: clamp(3rem, 9vw, 9rem); }

/* Pied de page */
.foot {
  background: var(--bg);
  color: var(--ink);
  margin-top: var(--breath);
  padding-block: 0 clamp(1.5rem, 3vw, 2.5rem);
}
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}
.contact > * { min-width: 0; }
.contact .intro { display: grid; gap: 1.6rem; }
.contact .intro .lead { max-width: 38ch; }
.reach { display: grid; gap: 0; margin-top: 0.4rem; }
.reach a {
  font-size: 0.9375rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.85;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  justify-self: start;
}
.identity { display: grid; gap: 1.6rem; align-content: start; }
.identity .name { font-size: 1.0625rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.6; }
.facts { display: grid; gap: 0.2rem; }
.social { line-height: 1.8; max-width: 44ch; }
.social a { text-underline-offset: 0.25em; }
.bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; margin-top: clamp(3.5rem, 7vw, 6rem); }
.bottom a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.bottom a:hover { border-color: var(--ink); }
.identity .facts { margin-top: 0.6rem; }


@media (max-width: 64rem) {
  .band .wrap { padding-inline: var(--gutter); }
  .series { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 1.75rem; }
  .s1 { grid-column: 1 / 6; }
  .s2 { grid-column: 1 / 7; align-self: start; }
  .s3 { grid-column: 1 / 4; }
  .s4 { grid-column: 3 / 7; margin-top: 0; }
  .s5 { grid-column: 1 / 6; }
  .s6 { grid-column: 4 / 7; margin-top: 0; }
  .s7 { grid-column: 2 / 6; margin-top: 0; }
  .s8 { grid-column: 3 / 7; }
  .s9 { grid-column: 1 / 5; }
  .s10 { grid-column: 2 / 6; margin-top: 0; }
}
@media (max-width: 52rem) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "brand" "fig" "title"; }
  .hero { padding-top: 0.9rem; }
  .brand { gap: 0.3rem; padding-bottom: 1.4rem; }
  .brand .name { font-size: clamp(1.35rem, 6.2vw, 2.2rem); letter-spacing: 0.1em; }
  .brand nav { font-size: 0.625rem; letter-spacing: 0.1em; gap: 0.8rem; }
  .hero-title { padding-top: 2.4rem; }
  .about, .contact, .groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 52rem) {
  .series { display: flex; flex-direction: column; align-items: center; row-gap: 2.25rem; }
  .series figure { width: 88%; max-width: 30rem; margin-top: 0; margin-inline: auto; align-self: center; }
  .series figcaption { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Page : politique de confidentialité et mentions légales */
.legal-top { padding-block: clamp(1.25rem, 2.4vw, 2rem) clamp(1rem, 2vw, 2rem); }
.legal-head { display: grid; gap: 1.2rem; max-width: 52rem; margin-top: clamp(3rem, 7vw, 6rem); }
.legal-head h1 { font-size: clamp(1.35rem, 2.8vw, 2.6rem); }
.lg-list { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); margin-top: clamp(3rem, 7vw, 6rem); }
.lg { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1rem, 5vw, 5rem); }
.lg > * { min-width: 0; }
.lg h2 { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.18em; line-height: 1.7; }
.lg-body { display: grid; gap: 1.1rem; max-width: var(--measure); text-wrap: pretty; align-content: start; }
.lg-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.lg-body li { position: relative; padding-left: 1.5rem; }
.lg-body li::before { content: "\2013"; position: absolute; left: 0; }
.lg-body strong { font-weight: 400; }
.lg-body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.todo { background: rgba(200, 192, 175, 0.5); padding-inline: 0.3em; }
@media (max-width: 52rem) {
  .legal-top { padding-top: 0.9rem; }
  .lg { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
}

/* ===== Structure en pages ===== */
html{scroll-behavior:auto}
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:clamp(1rem,2vw,1.6rem) var(--gutter);color:var(--ink);transition:color .4s}
body[data-theme=light] .top{color:#fff}
.top .name{text-decoration:none;font-size:clamp(.8rem,1.5vw,1.1rem);letter-spacing:.16em}
.burger{appearance:none;background:none;border:0;color:inherit;cursor:pointer;width:2.75rem;height:2.75rem;display:grid;place-items:center;padding:0;margin-right:-.6rem}
.burger span{display:block;width:1.7rem;height:1px;background:currentColor;transition:transform .35s,opacity .3s}
.burger i{display:grid;gap:.5rem}
body.menu-open .burger span:nth-child(1){transform:translateY(.75rem) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-.75rem) rotate(-45deg)}
body.menu-open .top{color:var(--ink)}
.menu{position:fixed;inset:0;z-index:45;background:var(--bg);display:grid;align-content:center;justify-items:end;padding:6rem var(--gutter) 3rem;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
body.menu-open .menu{opacity:1;visibility:visible}
.menu ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.8rem,2.2vw,1.6rem);text-align:right}
.menu a{font-size:clamp(1.4rem,4vw,2.6rem);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;font-weight:300;border-bottom:1px solid transparent;transition:border-color .25s}
.menu a:hover,.menu a[aria-current=page]{border-color:var(--ink)}
.menu .sub{margin-top:2.5rem;text-align:right}
.menu .sub a{font-size:.6875rem;letter-spacing:.18em}
.view[hidden]{display:none}
/* Accueil : diaporama */
.slides{position:fixed;inset:0;background:#1b1a17;overflow:hidden}
.frame{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:#1b1a17;opacity:0;transition:opacity 1.1s ease}
.frame.on{opacity:1}
.frame.duo{grid-template-columns:repeat(3,minmax(0,1fr))}
.frame img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:sepia(.06) brightness(.82);display:block}
.slides::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,20,18,.55),rgba(21,20,18,0) 55%),linear-gradient(to bottom,rgba(21,20,18,.35),rgba(21,20,18,0) 22%)}
.intro-home{position:fixed;left:var(--gutter);right:var(--gutter);bottom:clamp(2rem,7vh,5rem);z-index:5;color:#fff;max-width:60rem}
.intro-home h1{color:#fff;font-size:clamp(1.5rem,4.2vw,4rem);line-height:1.15;letter-spacing:.05em}
.intro-home p{margin-top:1.2rem;color:#fff}
/* Pages intérieures */
.page{padding-top:clamp(6rem,11vw,9rem);min-height:100svh}
.page .about{margin-top:0}
.page .band{margin:0;background:transparent;padding-block:0 clamp(3rem,6vw,5rem)}
.page .series-head{margin-top:0}
body[data-view=prestations]{background:var(--sand);color:#fff}
body[data-view=prestations] .top{color:#fff}
body[data-view=prestations] .sitefoot a,body[data-view=prestations] .sitefoot p{color:#fff}
.page-contact h2{margin-top:1.2rem}
.sitefoot{padding:clamp(3rem,6vw,5rem) var(--gutter) 1.5rem}
.sitefoot .bottom{margin-top:0}
body[data-view=accueil] .sitefoot{display:none}
@media(max-width:52rem){.page .about{gap:2rem}.menu{justify-items:end}}
@media(prefers-reduced-motion:reduce){.frame{transition:none}}