@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root { --ink:#172019; --paper:#faf9f6; --warm:#efede7; --accent:#d7a066; --muted:#687069; --line:rgba(23,32,25,.15); --content:1200px; --pad:clamp(1.25rem,4vw,3rem); --section:clamp(4.5rem,9vw,8rem); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:5.5rem; } body { margin:0; min-width:320px; overflow-x:hidden; color:var(--ink); background:var(--paper); font-family:'DM Sans',Arial,sans-serif; line-height:1.6; } img,video { display:block; max-width:100%; } img { height:auto; } a { color:inherit; text-decoration:none; } button,input,textarea { font:inherit; } button { cursor:pointer; } ul { margin:0; padding:0; list-style:none; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:'Playfair Display',Georgia,serif; line-height:1.08; letter-spacing:-.035em; } h1 { margin-bottom:1.5rem; font-size:clamp(2.75rem,7vw,6.4rem); max-width:13ch; } h1 span { display:block; } h2 { margin-bottom:1.25rem; font-size:clamp(2.25rem,4.6vw,4.5rem); max-width:14ch; } h3 { font-size:clamp(1.5rem,2.3vw,2rem); } .container { width:min(var(--content),calc(100% - (var(--pad) * 2))); margin-inline:auto; }
.button,.button-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:3.2rem; padding:.75rem 1.2rem; border:1px solid transparent; font-size:.9rem; font-weight:700; line-height:1.2; transition:background-color .2s,color .2s,border-color .2s,transform .2s; } .button { color:#fff; background:var(--ink); } .button-secondary { color:var(--ink); border-color:var(--ink); } .button:hover,.button:focus-visible { color:var(--ink); background:var(--accent); } .button-secondary:hover,.button-secondary:focus-visible { color:#fff; background:var(--ink); } .button:hover,.button-secondary:hover { transform:translateY(-2px); } :focus-visible { outline:3px solid var(--accent); outline-offset:4px; }

.header { position:absolute; z-index:20; width:100%; color:#fff; border-bottom:1px solid rgba(255,255,255,.2); } .header-inner { display:flex; align-items:center; justify-content:space-between; min-height:5.5rem; gap:1.5rem; } .logo { font-family:'Playfair Display',Georgia,serif; font-size:1.35rem; font-weight:700; white-space:nowrap; } .desktop-navigation ul { display:flex; gap:clamp(1rem,2.5vw,2.25rem); } .desktop-navigation a,.footer a { transition:color .2s; } .desktop-navigation a:hover,.footer a:hover { color:var(--accent); } .menu-toggle,.mobile-navigation { display:none; }
.hero { position:relative; isolation:isolate; display:grid; align-items:end; min-height:max(680px,100svh); color:#fff; background:#283128; } .hero-background,.hero-overlay { position:absolute; z-index:-1; inset:0; width:100%; height:100%; } .hero-background { object-fit:cover; } .hero-overlay { background:linear-gradient(180deg,rgba(10,15,10,.33),rgba(10,15,10,.18) 38%,rgba(10,15,10,.78)); } .hero-content { padding-top:9rem; padding-bottom:clamp(2.5rem,7vw,5.5rem); } .hero-label,.section-label,.project-category { font-size:.72rem; font-weight:700; letter-spacing:.13em; line-height:1.6; text-transform:uppercase; } .hero-label { margin-bottom:1.4rem; } .hero-text { max-width:38rem; margin-bottom:2rem; font-size:clamp(1rem,1.6vw,1.2rem); } .hero-actions { display:flex; flex-wrap:wrap; gap:.9rem; } .hero .button-secondary { color:#fff; border-color:rgba(255,255,255,.72); } .hero .button-secondary:hover,.hero .button-secondary:focus-visible { color:var(--ink); background:#fff; } .hero-numbers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:34rem; margin-top:clamp(3rem,9vw,8rem); border-top:1px solid rgba(255,255,255,.45); } .hero-number { padding:1rem .75rem 0 0; } .hero-number + .hero-number { padding-left:.75rem; border-left:1px solid rgba(255,255,255,.45); } .hero-number strong { display:block; font-family:'Playfair Display',Georgia,serif; font-size:2rem; } .hero-number span { display:block; font-size:.76rem; line-height:1.3; }

section:not(.hero) { padding-block:var(--section); } .section-heading { max-width:44rem; margin-bottom:clamp(2.25rem,5vw,4rem); } .section-label { margin-bottom:1rem; color:#8a5d2d; } .section-heading > p:last-child { max-width:39rem; color:var(--muted); } .projects-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2.2vw,2rem); } .project-card { overflow:hidden; background:#fff; border:1px solid var(--line); } .project-card a { display:block; height:100%; } .project-image { overflow:hidden; aspect-ratio:4/5; background:var(--warm); } .project-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s; } .project-card:hover .project-image img { transform:scale(1.04); } .project-content { padding:1.4rem; } .project-content h3 { margin-bottom:.75rem; } .project-content p:not(.project-category) { color:var(--muted); } .project-content span { display:inline-block; margin-top:.5rem; font-weight:700; } .section-button { margin-top:2.25rem; text-align:center; }
.services { color:#fff; background:var(--ink); } .services .section-label { color:var(--accent); } .services .section-heading > p:last-child { color:rgba(255,255,255,.72); } .services-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.2); } .service-card { min-height:23rem; padding:clamp(1.5rem,4vw,3rem); background:var(--ink); } .service-number { margin-bottom:3rem; color:var(--accent); font-size:.8rem; font-weight:700; letter-spacing:.1em; } .service-card > p { max-width:30rem; color:rgba(255,255,255,.72); } .service-card ul { margin-top:1.5rem; } .service-card li { padding:.55rem 0; border-top:1px solid rgba(255,255,255,.2); }
.about { background:var(--warm); } .about-layout,.contact-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); align-items:center; gap:clamp(2rem,8vw,8rem); } .about-content > p:not(.section-label) { max-width:36rem; color:var(--muted); } .about-photo { overflow:hidden; aspect-ratio:4/5; background:#d9d6cc; } .about-photo img { width:100%; height:100%; object-fit:cover; } .clients { text-align:center; } .clients .section-heading { margin-inline:auto; } .clients .section-heading h2 { margin-inline:auto; } .clients-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); } .client-card { display:grid; place-items:center; min-height:9rem; padding:1.5rem; border-right:1px solid var(--line); } .client-card:last-child { border-right:0; } .client-card img { width:min(100%,9rem); max-height:4rem; object-fit:contain; filter:grayscale(1); opacity:.78; } .client-card p { margin:0; font-family:'Playfair Display',Georgia,serif; font-size:1.25rem; }
.contact { color:#fff; background:#263028; } .contact .section-label { color:var(--accent); } .contact-content > p:not(.section-label) { max-width:34rem; color:rgba(255,255,255,.74); } .contact-informations { display:grid; gap:1.25rem; margin-top:2.25rem; } .contact-informations span { display:block; margin-bottom:.2rem; color:var(--accent); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .contact-informations p { margin:0; } .contact-informations a:hover,.social-links a:hover { color:var(--accent); } .social-links { display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:2rem; font-size:.9rem; font-weight:700; } .contact-form-wrapper { padding:clamp(1.25rem,4vw,2.5rem); color:var(--ink); background:var(--paper); } .contact-form-wrapper form { display:grid; gap:.5rem; } .contact-form-wrapper label { margin-top:.7rem; font-size:.85rem; font-weight:700; } .contact-form-wrapper input,.contact-form-wrapper textarea { width:100%; padding:.8rem .9rem; border:1px solid #b7b9b5; border-radius:0; color:var(--ink); background:#fff; } .contact-form-wrapper textarea { min-height:9rem; resize:vertical; } .contact-form-wrapper .button { margin-top:1rem; }
.footer { padding-top:4rem; color:#fff; background:#111812; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; padding-bottom:3rem; } .footer-brand p { margin-top:1rem; color:rgba(255,255,255,.66); } .footer h3 { margin-bottom:1rem; font-family:'DM Sans',Arial,sans-serif; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; } .footer li + li { margin-top:.55rem; } .footer-bottom { padding-block:1.25rem; border-top:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.62); font-size:.82rem; } .footer-bottom p { margin:0; }

@media (max-width:760px) { .desktop-navigation,.header-button { display:none; } .menu-toggle { display:grid; width:2.75rem; height:2.75rem; padding:.7rem; border:0; background:transparent; gap:.28rem; } .menu-toggle span { display:block; width:100%; height:1px; background:currentColor; transition:transform .2s,opacity .2s; } .header.menu-open { color:var(--ink); background:var(--paper); border-bottom-color:var(--line); } .header.menu-open .menu-toggle span:nth-child(1) { transform:translateY(.38rem) rotate(45deg); } .header.menu-open .menu-toggle span:nth-child(2) { opacity:0; } .header.menu-open .menu-toggle span:nth-child(3) { transform:translateY(-.38rem) rotate(-45deg); } .mobile-navigation { display:grid; grid-template-rows:0fr; overflow:hidden; color:var(--ink); background:var(--paper); transition:grid-template-rows .25s; } .mobile-navigation > * { min-height:0; overflow:hidden; } .header.menu-open .mobile-navigation { grid-template-rows:1fr; } .mobile-navigation ul { padding:1rem var(--pad) .5rem; border-top:1px solid var(--line); } .mobile-navigation li { border-bottom:1px solid var(--line); } .mobile-navigation li a { display:block; padding:.9rem 0; font-family:'Playfair Display',Georgia,serif; font-size:1.5rem; } .mobile-navigation .button { width:calc(100% - (var(--pad) * 2)); margin:1rem var(--pad) 1.5rem; } .projects-grid { grid-template-columns:1fr; } .project-image { aspect-ratio:16/10; } .about-layout,.contact-layout { grid-template-columns:1fr; } .about-content { order:1; } .about-photo { order:2; max-height:35rem; } .clients-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .client-card:nth-child(2) { border-right:0; } .client-card:nth-child(-n+2) { border-bottom:1px solid var(--line); } .footer-grid { grid-template-columns:1fr 1fr; } .footer-brand { grid-column:1/-1; } }
@media (max-width:480px) { h1 { font-size:clamp(2.55rem,13vw,3.6rem); } .hero { min-height:43rem; } .hero-actions > * { width:100%; } .hero-numbers { margin-top:3.5rem; } .hero-number strong { font-size:1.55rem; } .services-grid { grid-template-columns:1fr; } .service-card { min-height:auto; } .footer-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }

/* Desktop composition and graceful media fallbacks */
.hero { background: radial-gradient(circle at 78% 28%, rgba(215,160,102,.20), transparent 27%), linear-gradient(128deg, #111914 0%, #263128 56%, #151e18 100%); }
.project-image.media-missing, .about-photo.media-missing, .client-card.media-missing { position: relative; overflow: hidden; background: linear-gradient(135deg, #d4b287, #7d6042); }
.project-image.media-missing::after, .about-photo.media-missing::after, .client-card.media-missing::after { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; color: rgba(255,255,255,.92); content: 'Visuel prochainement disponible'; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-align: center; text-transform: uppercase; background: linear-gradient(135deg, rgba(21,30,24,.12), rgba(21,30,24,.45)); }
.media-missing img { opacity: 0; }
@media (min-width: 761px) {
  .hero { min-height: clamp(43rem, 100svh, 52rem); }
  .hero-content { display: grid; grid-template-columns: minmax(0, 48rem) 1fr; column-gap: clamp(2rem, 8vw, 8rem); }
  .hero-label, .hero-content h1, .hero-text, .hero-actions { grid-column: 1; }
  .hero-content h1 { max-width: 15ch; margin-bottom: 1.25rem; font-size: clamp(3.7rem, 5.8vw, 5.6rem); line-height: 1.02; }
  .hero-text { max-width: 34rem; }
  .hero-numbers { grid-column: 1 / -1; max-width: 100%; margin-top: clamp(3rem, 6vw, 5rem); }
  .hero-number { padding-right: 1.5rem; }
  .hero-number + .hero-number { padding-left: 1.5rem; }
}