/* =========================================================
   CAZDECO — design system v2
   Direction : épuré, feutré, confiance — pas de pilules
   criardes ni d'ombres épaisses. Palette neutre, hairlines,
   grande respiration. Palette placeholder à ajuster avec la
   charte graphique réelle de Céliane si besoin.
   ========================================================= */

:root{
  --bg: #FAF8F4;
  --bg-alt: #F2EDE5;
  --ink: #1D1B18;
  --ink-soft: #6B6459;
  --accent: #A9673D;
  --accent-text: #8A5029;
  --accent-soft: #E8DCCB;
  --sage: #7C8567;
  --sage-soft: #E7EAE0;
  --line: rgba(29,27,24,0.12);
  --line-soft: rgba(29,27,24,0.07);
  --white: #FFFFFF;

  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  --radius: 2px;
  --wrap: 1180px;
  --section-y: clamp(4rem, 8vw, 7rem);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

/* Accessibility: visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Scroll-reveal micro-interaction */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform: none; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
a, button, summary, .btn{ cursor: pointer; }
h1,h2,h3{
  font-family: var(--font-display);
  font-weight:500;
  line-height:1.18;
  letter-spacing: -0.01em;
  margin:0 0 .6em;
  color: var(--ink);
}
h1{ font-size: clamp(2.1rem, 3.6vw, 3.1rem); font-weight:400; }
h2{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight:400; }
h3{ font-size: 1.1rem; font-weight:500; letter-spacing:0; }
p{ margin:0 0 1em; color: var(--ink-soft); }

.wrap{ max-width: var(--wrap); margin:0 auto; padding:0 1.75rem; }
.center{ text-align:center; }
.center p, .center h2{ margin-left:auto; margin-right:auto; }

.eyebrow{
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight:600;
  color: var(--accent-text);
  margin-bottom: .9em;
}

/* Buttons — rectangular, understated, no pills */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding: .95em 2em;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight:600;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: all .25s ease;
  border: 1px solid var(--ink);
  white-space: nowrap;
}
.btn-primary{ background: var(--ink); color: var(--white); }
.btn-primary:hover{ background: var(--accent); border-color: var(--accent); }
.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--white); }
.cta-group{ display:flex; align-items:center; gap:1.75rem; flex-wrap:wrap; margin-top:2rem; }
.cta-group.center{ justify-content:center; }

.link-arrow{
  font-weight:600; font-size:.85rem; color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: .2em;
  display:inline-block; margin-top:.5em;
  transition: border-color .2s ease, color .2s ease;
}
.link-arrow:hover{ color: var(--accent); border-color: var(--accent); }

/* Header */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(250,248,244,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 1rem 1.75rem; gap:1.5rem; transition: padding .3s ease; }
.logo{ display:flex; align-items:center; }
.logo-img{ height: 54px; width:auto; transition: opacity .2s ease; }
.footer-brand .logo-img{ height: 58px; }
.logo-img-white{ display:none; }
.main-nav ul{ list-style:none; display:flex; gap:2.3rem; margin:0; padding:0; }
.main-nav a{
  font-weight:500; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em;
  padding-bottom:.35em; border-bottom:1px solid transparent; transition: color .3s ease, border-color .3s ease;
}
.main-nav a:hover, .main-nav a.active{ border-color: var(--ink); }
.header-cta{ flex-shrink:0; }

/* Transparent header over the full-bleed home hero, solidifies on scroll */
body.home .site-header{
  position: absolute; top:0; left:0; right:0; background: transparent;
  border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease;
}
body.home .site-header .logo-img-color{ display:none; }
body.home .site-header .logo-img-white{ display:block; }
body.home .site-header .main-nav a{ color: var(--white); }
body.home .site-header .main-nav a:hover, body.home .site-header .main-nav a.active{ border-color: var(--white); }
body.home .site-header .header-cta{ background:transparent; border-color: var(--white); color: var(--white); }
body.home .site-header .header-cta:hover{ background: var(--white); color: var(--ink); }
body.home .site-header .nav-toggle span{ background: var(--white); }

body.home .site-header.scrolled{
  position: fixed;
  background: rgba(250,248,244,0.94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-soft);
}
body.home .site-header.scrolled .logo-img-color{ display:block; }
body.home .site-header.scrolled .logo-img-white{ display:none; }
body.home .site-header.scrolled .main-nav a{ color: var(--ink); }
body.home .site-header.scrolled .main-nav a:hover, body.home .site-header.scrolled .main-nav a.active{ border-color: var(--ink); }
body.home .site-header.scrolled .header-cta{ background: var(--ink); border-color: var(--ink); color: var(--white); }
body.home .site-header.scrolled .header-cta:hover{ background: var(--accent); border-color: var(--accent); }
body.home .site-header.scrolled .nav-toggle span{ background: var(--ink); }
body.home main{ padding-top:0; }
body.home .hero-full{ height: 100vh; }
/* Mobile menu panel is always solid, so its links stay dark regardless of scroll state */
body.home .site-header .main-nav.open a{ color: var(--ink); }
body.home .site-header .main-nav.open a:hover, body.home .site-header .main-nav.open a.active{ border-color: var(--ink); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:none; cursor:pointer;
}
.nav-toggle span{ display:block; height:1px; width:100%; background: var(--ink); }

/* Hero — full-bleed image, first thing seen */
.hero-full{
  position: relative;
  height: calc(100vh - 85px);
  min-height: 520px;
  max-height: 900px;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-full-media{ position:absolute; inset:0; z-index:1; }
.hero-full-media img{ width:100%; height:100%; object-fit:cover; }
.hero-full-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(29,27,24,0.72) 0%, rgba(29,27,24,0.28) 42%, rgba(29,27,24,0.05) 65%);
}
.hero-full-content{
  position:relative; z-index:2; color: var(--white);
  padding: 0 1.75rem 4.5rem;
  max-width: var(--wrap); margin:0 auto; width:100%;
}
.hero-full-content .eyebrow{ color: var(--accent-soft); }
.hero-full-content h1{ color: var(--white); max-width:720px; }
.hero-full-content .hero-lead{ color: rgba(255,255,255,.88); max-width:560px; }
.hero-keywords{
  color: var(--white); font-size: clamp(1.4rem, 3.6vw, 3.1rem); font-weight:400;
  letter-spacing: -0.01em; max-width:none; margin-bottom:.4em; white-space:nowrap;
}
.hero-full .btn-ghost{ border-color: var(--white); color: var(--white); }
.hero-full .btn-ghost:hover{ background: var(--white); color: var(--ink); }
.hero-full .link-arrow{ color: var(--white); border-color: rgba(255,255,255,.5); }
.hero-full .link-arrow:hover{ color: var(--accent-soft); border-color: var(--accent-soft); }

.hero{ padding: var(--section-y) 0 calc(var(--section-y) * 0.7); }
.hero-inner{ max-width:760px; }
.hero-lead{ font-size:1.05rem; max-width:560px; }

.page-hero{ padding: 3.75rem 0 3.25rem; border-bottom: 1px solid var(--line-soft); }
.page-hero .hero-lead{ max-width:680px; }
.breadcrumb{ font-size:.78rem; color: var(--ink-soft); margin-bottom:1.5rem; letter-spacing:.02em; }
.breadcrumb a{ border-bottom: 1px solid var(--line); }
.breadcrumb a:hover{ color: var(--accent); border-color: var(--accent); }

/* Stats bar — thin bordered strip, not a solid block */
.stats-bar{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.stats-inner{ display:flex; justify-content:center; }
.stat{
  flex:1; max-width:220px; text-align:center; padding: 2.2rem 1.5rem;
  border-left: 1px solid var(--line-soft);
}
.stat:first-child{ border-left:none; }
.stat-value{ display:block; font-family: var(--font-display); font-weight:400; font-size:1.9rem; color: var(--ink); }
.stat-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--ink-soft); }

/* Intro */
.intro{ padding: var(--section-y) 0; position:relative; }
.intro-inner{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items:center; }
.intro-image{ position:relative; }
.intro-image::before{
  content:""; position:absolute; top:-1.2rem; left:-1.2rem; right:1.2rem; bottom:1.2rem;
  background: var(--sage-soft); z-index:0;
}
.intro-image img{ position:relative; z-index:1; border: 1px solid var(--line-soft); }
.intro-text{ max-width:520px; }

.intention-quote{ margin: 1.4rem 0 1.8rem; border:none; padding:0; }
.intention-quote p{
  font-family: var(--font-display); font-style:italic; font-size:1.3rem;
  color: var(--ink); line-height:1.5; margin-bottom:.8em;
}
.intention-quote cite{ font-family: var(--font-display); font-style:italic; color: var(--accent-text); font-size:1.05rem; }

.one-line{ white-space: nowrap; }

/* Photo collage — like printed photos scattered on a table */
.photo-collage{ position:relative; width:100%; max-width:420px; aspect-ratio: 1 / 1; margin: 0 auto; }
.collage-photo{
  position:absolute; width:56%; height:auto; object-fit:cover;
  border: 8px solid var(--white); box-shadow: 0 16px 34px rgba(29,27,24,.16);
  background: var(--white);
}
.collage-1{ top:0; left:4%; width:52%; aspect-ratio: 4/3; object-fit:cover; transform: rotate(-6deg); z-index:1; }
.collage-2{ top:6%; right:0; width:46%; aspect-ratio: 3/4; object-fit:cover; transform: rotate(5deg); z-index:2; }
.collage-3{ bottom:2%; left:14%; width:50%; aspect-ratio: 3/4; object-fit:cover; transform: rotate(3deg); z-index:3; }
.collage-4{ bottom:0; right:6%; width:42%; aspect-ratio: 4/3; object-fit:cover; transform: rotate(-4deg); z-index:2; }

/* Layered split hero — portrait + offset card (Faisons connaissance) */
.split-hero{ padding: 3rem 0 var(--section-y); }
.split-hero-inner{ display:grid; grid-template-columns: 0.7fr 1.3fr; align-items:center; gap: 1rem; }
.split-portrait{ position:relative; max-width: 340px; }
.split-portrait::before{
  content:""; position:absolute; top:-1rem; left:-1rem; right:1rem; bottom:1rem;
  background: var(--sage-soft); z-index:0;
}
.split-portrait img{ position:relative; z-index:1; width:100%; height:auto; aspect-ratio: 3/4; object-fit:cover; border: 1px solid var(--line-soft); }
.split-card-wrap{ position:relative; }
.split-card{
  position:relative; z-index:1;
  padding: clamp(1rem, 3vw, 2rem); display:flex; flex-direction:column; justify-content:center;
}
.split-card .icon-mark{ width:56px; height:auto; margin-bottom:1.5rem; }
.split-card h1{ font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.split-card .rule{ width:48px; height:1px; background: var(--accent); border:none; margin: 0 0 1.5rem; }
.split-card p{ font-size:.96rem; }
.split-card .btn{ margin-top:1rem; align-self:flex-start; }

/* Services */
.services-preview, .services-full{ padding: var(--section-y) 0; background: var(--bg-alt); }
.services-preview h2, .services-full h2{ max-width:600px; margin-left:auto; margin-right:auto; }
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 3rem; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card{
  background: transparent; padding: 2.4rem 2.2rem;
  display:flex; flex-direction:column; gap:.3rem;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition: background .25s ease;
}
.service-card:hover{ background: rgba(255,255,255,0.55); }
.service-location{ font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-soft); margin: .6em 0 .3em; }

/* Why me / values */
.why-me{ padding: var(--section-y) 0; }
.values-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:3rem; margin: 3rem 0; }
.value-card{ padding-top:1.5rem; border-top: 1px solid var(--ink); }
.value-card h3{ margin-bottom:.5em; }

/* FAQ — hairline dividers, no cards */
.faq{ padding: var(--section-y) 0; background: var(--bg-alt); }
.faq-list{ max-width: 760px; margin: 3rem auto 0; border-top:1px solid var(--line); }
.faq-list details{ border-bottom:1px solid var(--line); padding: 1.3rem 0; }
.faq-list summary{
  font-weight:500; cursor:pointer; list-style:none; position:relative; padding-right:2rem;
  font-family: var(--font-display); font-size:1.05rem;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:"+"; position:absolute; right:0; top:0; font-size:1.2rem; color: var(--accent);
  transition: transform .2s ease;
}
.faq-list details[open] summary::after{ content:"–"; }
.faq-list p{ margin-top:1rem; margin-bottom:0; max-width:640px; }

/* Projects */
.projects-preview{ padding: var(--section-y) 0; }
.projects-preview h2{ max-width:600px; margin-left:auto; margin-right:auto; }
.projects-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 3rem; }
.project-card{ display:block; }
.project-card .project-card-body{ padding: 1.2rem 0 0; }
.project-card > img, .project-card .project-cover-wrap{
  overflow:hidden; background: var(--bg-alt);
}
.project-card img{ width:100%; height: 260px; object-fit: cover; transition: transform .5s ease; }
.project-card:hover img{ transform: scale(1.04); }
.project-category{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color: var(--accent-text); font-weight:600; }
.project-card-body h3{ margin: .5em 0 .15em; }
.project-card-body p{ margin:0; font-size:.9rem; }

/* Project detail page — Kléber-style white-frame gallery */
.project-gallery-section{ padding: 2.5rem 0 var(--section-y); }
.project-gallery{
  display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px;
  grid-auto-flow: row dense; gap: 1.4rem;
}
.gallery-frame{
  background: var(--white); padding: 10px; box-shadow: 0 2px 18px rgba(29,27,24,.08);
  display:flex; position:relative;
}
.gallery-frame img{ width:100%; height:100%; object-fit:cover; }
.gallery-frame-btn{
  border:none; background:none; padding:0; margin:0; width:100%; height:100%;
  display:block; position:relative; cursor: zoom-in;
}
.gallery-frame-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset:2px; }
.gallery-badge{
  position:absolute; top:20px; left:20px; z-index:2;
  background: rgba(29,27,24,.72); color: var(--white);
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.35em .8em; border-radius:2px;
}
.gallery-pending{ background: var(--sage-soft); padding: 2.5rem; text-align:center; }
.gallery-credit{
  position:absolute; bottom:20px; right:20px; z-index:2;
  background: rgba(29,27,24,.55); color: var(--white);
  font-size:.62rem; letter-spacing:.02em;
  padding:.3em .6em; border-radius:2px;
}
.gallery-span-a{ grid-row: span 2; }
.gallery-span-b{ grid-column: span 2; }
.gallery-span-c{ }
.gallery-span-d{ grid-row: span 2; }

.gallery-text-card{
  background: var(--sage-soft); padding: 2.2rem; display:flex; flex-direction:column;
  justify-content:center; overflow:auto;
}
.gallery-text-card h1{ font-size: clamp(1.5rem, 2.4vw, 2rem); margin: .2em 0 .5em; }
.gallery-text-card .eyebrow{ margin-bottom:.4em; }
.project-story{ font-size:.95rem; margin:0 0 .9em; }
.project-story:last-child{ margin-bottom:0; }

.gallery-text-span-single{ grid-column: span 2; grid-row: span 2; }
.gallery-text-span-sm{ grid-column: span 1; grid-row: span 2; }
.gallery-text-span-lg{ grid-column: span 2; grid-row: span 3; }

.project-back{ padding: 0 0 var(--section-y); }

/* Testimonials — dark editorial break */
.testimonials{ padding: var(--section-y) 0; background: var(--ink); color: var(--white); }
.testimonials .eyebrow{ color: var(--accent); }
.testimonials h2{ color: var(--white); max-width:600px; margin-left:auto; margin-right:auto; }
.testimonials-track{
  display:flex; gap: 0; overflow-x:auto; margin-top: 3rem;
  scroll-snap-type: x mandatory;
  border-top: 1px solid rgba(255,255,255,.14);
}
.testimonial-card{
  flex: 0 0 360px; scroll-snap-align:start;
  padding: 2.2rem; margin:0; text-align:center;
  border-right: 1px solid rgba(255,255,255,.14);
}
.testimonial-card p{
  color: rgba(255,255,255,.92); font-family: var(--font-display); font-style: italic;
  font-size: 1.1rem; font-weight:400; line-height:1.5;
}
.testimonial-card footer{ font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color: rgba(255,255,255,.6); margin-top:1rem; }
.testimonial-card .dash{ opacity:.5; }

/* Final CTA */
.final-cta{ padding: var(--section-y) 0; }
.final-cta h2, .final-cta h1{ max-width:520px; margin-left:auto; margin-right:auto; }

/* Legal pages */
.legal-page{ padding: var(--section-y) 0; }
.legal-content{ max-width:760px; }
.legal-content h2{ font-size:1.2rem; margin: 2.2em 0 .6em; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ font-size:.95rem; line-height:1.7; color: var(--ink-soft); }
.legal-content a{ color: var(--accent-text); border-bottom:1px solid var(--line); }
.legal-content a:hover{ border-color: var(--accent-text); }
.legal-content ul{ margin: 0 0 1.2em; padding-left: 1.2em; }
.legal-content li{ font-size:.95rem; line-height:1.7; color: var(--ink-soft); margin-bottom:.5em; }

/* Footer — dark editorial close */
.site-footer{ background: var(--ink); color: rgba(255,255,255,.75); padding: 5rem 0 2rem; }
.footer-inner{ display:grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; }
.footer-brand p{ max-width: 320px; font-size:.9rem; color: rgba(255,255,255,.6); margin-top:1.2rem; }
.footer-brand p a[href^="mailto"]{ color: rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.25); padding-bottom:.1em; }
.footer-brand p a[href^="mailto"]:hover{ color: var(--accent-soft); border-color: var(--accent-soft); }
.social-links{ display:flex; gap:1.2rem; margin-top:1.2rem; }
.social-links a{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: rgba(255,255,255,.75); border-bottom:1px solid rgba(255,255,255,.25); padding-bottom:.2em; }
.social-links a:hover{ color: var(--accent-soft); border-color: var(--accent-soft); }
.footer-nav h3, .footer-contact h3{
  font-family: var(--font-body); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.1em; font-weight:600; margin-bottom:1.3rem; color: rgba(255,255,255,.45);
}
.footer-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.footer-nav a{ font-size:.9rem; color: rgba(255,255,255,.75); }
.footer-nav a:hover{ color: var(--accent-soft); }
.footer-contact .btn{ margin-bottom: 1.2rem; }
.footer-contact p{ font-size:.9rem; }
.footer-contact a[href^="mailto"]{ color: rgba(255,255,255,.75); border-bottom:1px solid rgba(255,255,255,.25); }
.site-footer .btn-primary{ background: var(--accent); border-color: var(--accent); color: var(--white); }
.site-footer .btn-primary:hover{ background: var(--white); border-color: var(--white); color: var(--ink); }
.footer-legal{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  margin-top: 3.5rem; padding-top: 1.75rem; border-top:1px solid rgba(255,255,255,.14);
  font-size:.76rem; color: rgba(255,255,255,.45);
}
.footer-legal ul{ list-style:none; display:flex; gap:1.4rem; margin:0; padding:0; }
.footer-legal a:hover{ color: var(--accent-soft); }

/* Prestations — editorial numbered offers */
.service-block{ padding: var(--section-y) 0; border-bottom: 1px solid var(--line); }
.service-block:last-of-type{ border-bottom:none; }
.service-block-inner{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 4rem; }
.service-number{
  font-family: var(--font-display); font-size: 4.5rem; font-weight:400;
  color: var(--accent-soft); line-height:1; margin-bottom: .3rem;
}
.service-block-meta{ align-self:start; position:sticky; top: 110px; }
.service-block-meta .eyebrow{ margin-bottom:.4em; }
.service-block-location{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); margin-top:1rem; }
.service-block-body h3{ font-family: var(--font-display); font-size:1.5rem; font-weight:400; margin-bottom:.7em; }
.service-block-quote{
  font-family: var(--font-display); font-style:italic; font-size:1.15rem; color: var(--ink);
  border-left: 2px solid var(--accent); padding-left:1.3rem; margin: 1.6rem 0;
}
.service-list{ list-style:none; margin: 1.5rem 0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.service-list li{ padding-left:1.4rem; position:relative; color: var(--ink-soft); font-size:.94rem; }
.service-list li::before{ content:"—"; position:absolute; left:0; color: var(--accent); }
.price-box{ border: 1px solid var(--line); padding: 1.5rem 1.75rem; margin-top:1.8rem; }
.price-box .eyebrow{ margin-bottom:.5em; }
.price-box strong{ font-family: var(--font-display); font-size:1.3rem; font-weight:400; color: var(--ink); }

.image-break{ height: clamp(280px, 42vw, 460px); overflow:hidden; }
.image-break img{ width:100%; height:100%; object-fit:cover; }

/* Portfolio grid (Sélection de projets) */
.portfolio{ padding: var(--section-y) 0; }
.portfolio-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2.75rem 2rem; }
.portfolio-item{ display:block; text-align:center; }
.portfolio-thumb{ aspect-ratio: 1 / 1; overflow:hidden; background: var(--bg-alt); margin-bottom:1.1rem; }
.portfolio-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.portfolio-item:hover .portfolio-thumb img{ transform: scale(1.05); }
.portfolio-item h3{ font-size:1rem; letter-spacing:.02em; }
.portfolio-thumb-pending{ display:flex; align-items:center; justify-content:center; border:1px dashed var(--line); }
.portfolio-thumb-pending span{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft); }
.portfolio-item-pending h3{ color: var(--ink-soft); }

/* Contact page */
.contact-body{ padding: var(--section-y) 0; }
.contact-layout{ display:grid; grid-template-columns: 0.7fr 1.3fr; gap: 4.5rem; align-items:start; }
.contact-image{ position:relative; }
.contact-image::before{
  content:""; position:absolute; top:-1rem; left:-1rem; right:1rem; bottom:1rem;
  background: var(--sage-soft); z-index:0;
}
.contact-image img{ position:relative; z-index:1; width:100%; border: 1px solid var(--line-soft); }

.contact-form{ display:flex; flex-direction:column; gap:1.6rem; max-width:560px; }
.form-row{ display:flex; flex-direction:column; gap:.5rem; }
.form-row label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); }
.form-row input[type="email"], .form-row input[type="tel"], .form-row input[type="text"],
.form-row select, .form-row textarea{
  font-family: var(--font-body); font-size:.98rem; color: var(--ink);
  border:none; border-bottom: 1px solid var(--line); background:transparent;
  padding: .6rem .1rem; transition: border-color .2s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none; border-color: var(--accent);
}
.form-row textarea{ resize: vertical; }
.form-row-checkbox{ flex-direction:row; align-items:flex-start; gap:.7rem; }
.checkbox-label{ display:flex; gap:.7rem; align-items:flex-start; font-size:.82rem; color: var(--ink-soft); cursor:pointer; }
.checkbox-label input{ margin-top:.2rem; accent-color: var(--accent); }
.checkbox-label a{ text-decoration:underline; }
.contact-form .btn{ align-self:flex-start; margin-top:.5rem; }

/* Responsive */
@media (max-width: 900px){
  .intro-inner{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .values-grid, .projects-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-inner{ grid-template-columns: 1fr; gap:2.5rem; }
  .project-body-inner{ grid-template-columns: 1fr; }
  .stat{ max-width:none; }
  .split-hero-inner{ grid-template-columns: 1fr; }
  .split-portrait{ max-width: 220px; margin: 0 auto; }
  .service-block-inner{ grid-template-columns: 1fr; gap:1.5rem; }
  .service-block-meta{ position:static; }
  .contact-layout{ grid-template-columns: 1fr; gap:2.5rem; }
  .contact-image{ max-width:320px; }
  .portfolio-grid{ grid-template-columns: repeat(2, 1fr); gap:2rem 1.25rem; }
  .project-gallery{ grid-template-columns: 1fr; grid-auto-rows: 320px; }
  .gallery-span-a, .gallery-span-b, .gallery-span-c, .gallery-span-d{ grid-column: span 1; grid-row: span 1; }
  .gallery-text-span-single, .gallery-text-span-sm, .gallery-text-span-lg{ grid-column: span 1; grid-row: span 2; }
}
@media (max-width: 720px){
  .main-nav{
    position:fixed; top:70px; left:0; right:0; bottom:0;
    background: var(--bg); padding: 2rem 1.75rem;
    transform: translateX(100%); transition: transform .25s ease;
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; gap:1.4rem; }
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .services-grid{ grid-template-columns: 1fr; }
  .values-grid, .projects-grid{ grid-template-columns: 1fr; }
  .stats-inner{ flex-direction:column; }
  .stat{ border-left:none; border-top:1px solid var(--line-soft); }
  .stat:first-child{ border-top:none; }
  .hero-full{ height: 82vh; min-height:460px; }
  .hero-full-content{ padding-bottom: 2.75rem; }
  .one-line{ font-size: 5.4vw; }
  .hero-keywords{ font-size: 6vw; }
}

/* Lightbox */
body.lightbox-open{ overflow:hidden; }
.lightbox{
  position:fixed; inset:0; z-index:100; background: rgba(29,27,24,.92);
  display:flex; align-items:center; justify-content:center; padding: 2rem;
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:100%; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.lightbox-close{
  position:absolute; top:1.2rem; right:1.5rem; background:none; border:none;
  color: var(--white); font-size:2.2rem; line-height:1; cursor:pointer; padding:.4rem .7rem;
}
.lightbox-close:hover{ color: var(--accent-soft); }