:root{
  --bg:#f7f4ef;
  --soft:#f2eee8;
  --text:#171717;
  --muted:#66625d;
  --muted-2:#7c7670;
  --line:rgba(0,0,0,.06);
  --shadow-sm:0 8px 24px rgba(0,0,0,.06);
  --shadow-lg:0 20px 80px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.container{width:min(1280px, calc(100% - 48px));margin:0 auto}
.section{padding:80px 0}
.section-border{border-top:1px solid var(--line)}
.section-soft{background:var(--soft)}

.site-header{
  position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);
  background:rgba(247,244,239,.9);backdrop-filter:blur(10px)
}
.header-inner{
  min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px
}
.brand{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  line-height:1.1;
}

/* ligne principale */
.brand-main{
  font-size:0.9rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:500;
  color:inherit;
}

/* baseline */
.brand-sub{
  font-size:0.7rem;
  letter-spacing:0.53em; /* ← augmente la largeur */
  text-transform:uppercase;
  color:#8c857d;
  margin-top:4px;
}.main-nav{display:flex;align-items:center;gap:32px;font-size:.95rem;color:#5f5b55}
.main-nav a:hover{color:#111}
.mobile-menu-btn{
  display:none;
  width:40px;
  height:40px;
  padding:0;
  border:none;
  background:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}

.mobile-menu-btn span{
  display:block;
  width:18px;
  height:1px;
  background:#111;
}

.scroll-top{
  position:fixed;
  right:20px;
  bottom:20px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.1);
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(6px);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:1rem;
  color:#111;

  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:all .3s ease;

  z-index:60;
}

/* visible */
.scroll-top.active{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* hover */
.scroll-top:hover{
  background:#111;
  color:#fff;
}

/* MENU MOBILE */
.mobile-menu{
  position:fixed;
  inset:0;
  background:#f7f4ef;
  z-index:100;
  display:none;
  opacity:0;
  transition:opacity .3s ease;
}

.mobile-menu.active{
  display:flex;
  opacity:1;
}

.mobile-menu-inner{
  width:100%;
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

/* bouton fermer */
.mobile-menu-close{
  position:absolute;
  top:20px;
  right:20px;
  font-size:2rem;
  background:none;
  border:none;
  cursor:pointer;
}

/* navigation */
.mobile-menu-nav{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.mobile-menu-nav a{
  font-size:1.6rem;
  letter-spacing:0.04em;
  text-decoration:none;
  color:#111;
}

.mobile-menu-nav a:hover{
  opacity:0.6;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;transition:.25s ease
}
.btn-outline{border:1px solid #111}
.btn-outline:hover{background:#111;color:#f7f4ef}
.btn-solid{background:#111;color:#f7f4ef}
.btn-solid:hover{opacity:.92}
.btn-light{background:#f7f4ef;color:#111;border:none}
.btn-light:hover{opacity:.92}
.btn-ghost-light{border:1px solid rgba(255,255,255,.18);color:#f7f4ef}
.btn-ghost-light:hover{background:#fff;color:#111}

.eyebrow{
  margin:0 0 16px;color:var(--muted-2);font-size:.8rem;letter-spacing:.28em;text-transform:uppercase
}
.eyebrow-dark{color:#aaa39a}
h1,h2,h3,p,blockquote{margin:0}
h1{font-size:clamp(3rem,6.2vw,6.2rem);line-height:.92;letter-spacing:-.03em;font-weight:700}.hero-title{max-width:none}.hero-title span{display:block;white-space:nowrap}
h2{font-size:clamp(2rem,4vw,3rem);line-height:1.05;letter-spacing:-.03em}
h3{font-size:1.65rem;line-height:1.1;letter-spacing:-.03em}

.hero-grid{display:grid;grid-template-columns:5fr 7fr;gap:32px}
.hero-copy{display:flex;flex-direction:column;justify-content:space-between;min-height:620px}
.hero-lead{margin-top:24px;max-width:720px;color:var(--muted);font-size:1rem;line-height:1.75}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-visuals{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hero-visual{border-radius:2rem;box-shadow:var(--shadow-sm)}
.hero-visual-large{
  min-height:620px;padding:24px;display:flex;align-items:flex-end;
  background:linear-gradient(180deg,#d9d3ca 0%,#c9c2b6 100%)
}
.hero-caption{
  max-width:18rem;border-radius:1.5rem;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);color:#2a2825;padding:24px;line-height:1.6
}
.hero-stack{display:grid;gap:16px}
.hero-visual-small{min-height:220px;background:linear-gradient(180deg,#ece7df 0%,#ddd5c9 100%)}
.card{border:1px solid var(--line);background:#fff;border-radius:1.75rem;box-shadow:var(--shadow-sm)}
.quote-card{min-height:220px;padding:32px}
.quote-card blockquote{margin-top:24px;font-size:1.7rem;line-height:1.45;letter-spacing:-.03em}
.quote-source{margin-top:16px;color:var(--muted-2);font-size:.95rem}

.pantone-block{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#f1f1f1;
}

/* grande zone vide en haut */
.pantone-swatch{
  flex:1 1 auto;
  min-height:190px;
  padding:26px 28px 18px;
  background:#f1f1f1;
  display:flex;
  align-items:flex-start;
}

/* texte du haut */
.pantone-header{
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#6f6a64;
  font-weight:500;
}

/* cartouche bas type Pantone */
.pantone-info{
  padding:18px 28px 22px;
  background:#f7f7f7;
  border-top:1px solid rgba(0,0,0,0.08);
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* bloc typographique */
.pantone-name{
  font-size:1.05rem;
  line-height:1.05;
  font-weight:800;
  color:#000;
  letter-spacing:-0.01em;
}

.pantone-ref{
  font-size:0.9rem;
  line-height:1.15;
  color:#3f3f3f;
  font-weight:500;
}

.pantone-title{
  font-size:0.98rem;
  line-height:1.15;
  color:#2a2a2a;
  font-weight:700;
}

.two-col-intro{display:grid;grid-template-columns:4fr 8fr;gap:40px}
.intro-paragraph{max-width:48rem;color:#68625d;font-size:1.125rem;line-height:1.8}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.stat-card{padding:24px}
.stat-value{font-size:1.8rem;letter-spacing:-.03em}
.stat-card p:last-child{margin-top:10px;color:var(--muted);font-size:.95rem;line-height:1.6}

.projects-grid{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.project-card{overflow:hidden}
.project-thumb{
  position:relative;display:block;width:100%;min-height:280px;border:none;
  transition:transform .3s ease;background-size:cover;background-position:center
}
.project-card:hover .project-thumb{transform:scale(1.01)}
.project-thumb::after{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:.2s ease
}
.project-card:hover .project-thumb::after{background:rgba(0,0,0,.08)}
.project-count{
  position:absolute;left:16px;bottom:16px;z-index:1;border-radius:999px;
  background:rgba(255,255,255,.85);color:#49453f;padding:6px 12px;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.24em;backdrop-filter:blur(8px)
}
.project-content{padding:24px}
.project-meta{color:#8c857c;font-size:.78rem;text-transform:uppercase;letter-spacing:.24em}
.project-content h3{margin-top:12px;font-size:1.85rem}
.project-content p:last-of-type{margin-top:12px;color:var(--muted);line-height:1.6}
.project-link{
  margin-top:18px;border:none;background:none;padding:0;color:#111;
  display:inline-flex;gap:8px;align-items:center
}
.project-link:hover{opacity:.72}

.method-grid{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.method-card{padding:28px}
.step{color:#aaa39a;font-size:.95rem}
.method-card h3{margin-top:18px}
.method-card p:last-child{margin-top:12px;color:var(--muted);line-height:1.6}

.about-grid{display:grid;grid-template-columns:4fr 5fr 3fr;gap:32px}
.about-text{color:#68625d;font-size:1.125rem;line-height:1.8}
.about-visual{
  min-height:280px;border-radius:2rem;box-shadow:var(--shadow-sm);
  background:linear-gradient(180deg,#ddd7cf 0%,#c9c2b7 100%)
}

.contact-section{background:#111;color:#f7f4ef}
.contact-head{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact-intro{margin-top:24px;max-width:34rem;color:#c9c2b9;line-height:1.75}
.contact-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.contact-card{
  border-radius:2rem;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.04);
  padding:28px;box-shadow:0 6px 24px rgba(0,0,0,.12);backdrop-filter:blur(6px)
}
.contact-label{color:#9f988f;font-size:.7rem;text-transform:uppercase;letter-spacing:.24em}
.contact-value{margin-top:16px;color:#e4ddd4;font-size:1.125rem;line-height:1.65}
.contact-form-wrap{margin-top:48px}
.contact-form{
  position:relative;overflow:hidden;border-radius:2.5rem;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.04) 100%);
  box-shadow:var(--shadow-lg);backdrop-filter:blur(10px);padding:40px
}
.contact-form::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at top left,rgba(255,255,255,.08),transparent 38%);
  pointer-events:none
}
.contact-form-grid{position:relative;display:grid;grid-template-columns:4fr 8fr;gap:40px}
.contact-form-intro h3{margin-top:16px;color:#fff;font-size:clamp(2rem,3vw,2.6rem)}
.contact-form-intro p:last-child{margin-top:20px;max-width:20rem;color:#c9c2b9;line-height:1.75}
.fields-two{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.field{margin-top:20px}
.fields-two .field{margin-top:0}
.field label{
  display:block;margin-bottom:10px;color:#9f988f;font-size:.7rem;text-transform:uppercase;letter-spacing:.24em
}
.field input,.field textarea{
  width:100%;border-radius:1.4rem;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:#fff;padding:16px 18px;outline:none
}
.field textarea{border-radius:1.75rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#7f7870}
.field input:focus,.field textarea:focus{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.1)}
.contact-form-meta{margin-top:24px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start}
.captcha-box{
  border-radius:1.2rem;
  background:#fff;
  color:#111;
  padding:14px 18px;
  box-shadow:var(--shadow-sm);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:420px;
}
.captcha-label{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:0.95rem;
}
.captcha-label span{flex:1}
.captcha-brand{
  text-align:right;
  color:#aaa39a;
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  line-height:1.2;
}
.captcha-brand small{display:block;margin-top:4px;text-transform:none;letter-spacing:normal}
.consent-box{
  display:flex;align-items:flex-start;gap:12px;border-radius:1.5rem;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:#c9c2b9;padding:16px;line-height:1.6
}
.form-status{margin-top:16px;color:#c9c2b9;min-height:1.5em}
.form-actions{margin-top:0;display:flex;justify-content:flex-start;flex-wrap:wrap;gap:12px}
.site-footer{background:var(--bg)}
.footer-inner{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  padding:28px 0;color:#8f887f;font-size:.95rem
}
.footer-inner a{text-decoration:underline}
.footer-inner a:hover{opacity:.7}

.lightbox{position:fixed;inset:0;z-index:100;display:none}
.lightbox.is-open{display:flex;align-items:center;justify-content:center;padding:16px}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px)}
.lightbox-panel{
  position:relative;width:min(1280px,calc(100% - 32px));background:var(--bg);
  border-radius:2rem;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);z-index:1
}
.lightbox-close{
  position:absolute;top:16px;right:16px;z-index:3;width:48px;height:48px;border:none;border-radius:999px;
  background:rgba(255,255,255,.85);color:#111;font-size:1.8rem;line-height:1;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)
}
.lightbox-grid{display:grid;grid-template-columns:1.4fr .6fr}
.lightbox-media-wrap{
  position:relative;
  min-height:60vh;
  background:#111;
}

.lightbox-media{
  width:100%;
  height:100%;
  min-height:60vh;
  object-fit:cover;
}
.lightbox-arrow{
  position:absolute;top:50%;transform:translateY(-50%);border:none;border-radius:999px;
  background:rgba(255,255,255,.9);color:#111;padding:14px 16px;font-size:1.2rem
}
.lightbox-prev{left:16px}
.lightbox-next{right:16px}
.lightbox-counter{
  position:absolute;left:16px;bottom:16px;border-radius:999px;background:rgba(0,0,0,.55);
  color:#e4ddd4;padding:10px 16px;backdrop-filter:blur(8px)
}
.lightbox-aside{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:32px}
.lightbox-title{margin-top:12px;font-size:2rem}
.lightbox-text{margin-top:16px;color:var(--muted);line-height:1.6}
.lightbox-alt{margin-top:20px;color:#8f887f;line-height:1.6}
.lightbox-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lightbox-thumb{
  min-height:88px;border-radius:1.25rem;border:1px solid var(--line);
  background:none;padding:0;overflow:hidden
}
.lightbox-thumb img{width:100%;height:100%;object-fit:cover}
.lightbox-thumb.active{border-color:#111;box-shadow:inset 0 0 0 1px #111}

@media (max-width: 760px){

  /* panneau global */
  .lightbox-panel{
    height:90vh;
    max-height:90vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  /* structure */
  .lightbox-grid{
    display:flex;
    flex-direction:column;
    height:100%;
  }

  /* zone image */
  .lightbox-media-wrap{
    flex:0 0 auto;
    height:50vh;
    min-height:50vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#111;
  }

  /* image */
  .lightbox-media{
    max-height:100%;
    max-width:100%;
    object-fit:contain;
  }

  /* partie texte */
  .lightbox-aside{
    flex:1 1 auto;
    overflow-y:auto;
    padding:20px;
  }

  /* bouton fermer toujours visible */
  .lightbox-close{
    top:12px;
    right:12px;
  }

}



.tone-1{background:linear-gradient(180deg,#d7d0c5 0%,#c9c0b1 100%)}
.tone-2{background:linear-gradient(180deg,#e8e1d7 0%,#d7ccbc 100%)}
.tone-3{background:linear-gradient(180deg,#d6d5cf 0%,#c3c2ba 100%)}
.tone-4{background:linear-gradient(180deg,#ece6dd 0%,#dcd2c5 100%)}
.tone-5{background:linear-gradient(180deg,#ddd7ce 0%,#cdc3b5 100%)}
.tone-6{background:linear-gradient(180deg,#e9e2d9 0%,#d6cabd 100%)}
.tone-7{background:linear-gradient(180deg,#d8d8d2 0%,#c8c7bf 100%)}
.tone-8{background:linear-gradient(180deg,#e5e0d8 0%,#d1c8bc 100%)}
.tone-9{background:linear-gradient(180deg,#d5d1ca 0%,#c4bdb3 100%)}
.tone-10{background:linear-gradient(180deg,#ddd7cf 0%,#c9c2b7 100%)}
.tone-11{background:linear-gradient(180deg,#ebe4da 0%,#d8cebf 100%)}
.tone-12{background:linear-gradient(180deg,#d8d4ce 0%,#c7c0b5 100%)}
.tone-13{background:linear-gradient(180deg,#e7e1d7 0%,#d4cabd 100%)}
.tone-14{background:linear-gradient(180deg,#d7d2c8 0%,#c8bfae 100%)}
.tone-15{background:linear-gradient(180deg,#e8e4dc 0%,#d8d0c5 100%)}
.tone-16{background:linear-gradient(180deg,#d8d6d0 0%,#c4c2b8 100%)}
.tone-17{background:linear-gradient(180deg,#ebe5dc 0%,#d7ccbe 100%)}
.tone-18{background:linear-gradient(180deg,#ddd6cc 0%,#cbc0b2 100%)}

@media (max-width:1080px){
  .hero-grid,.two-col-intro,.about-grid,.contact-head,.contact-form-grid,.lightbox-grid{grid-template-columns:1fr}
  .hero-copy{min-height:auto}
  .hero-visual-large{min-height:420px}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .method-grid{grid-template-columns:repeat(2,1fr)}
  .contact-form-meta{grid-template-columns:1fr}
}

@media (max-width: 760px){
  .site-footer .footer-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:8px !important;
  }

  .site-footer .footer-inner p{
    width:100%;
    margin:0;
    text-align:center !important;
  }
}

@media (max-width: 760px){

  .lightbox-panel{
    width:calc(100% - 16px);
    height:auto;
    max-height:90vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
  }

  .lightbox-grid{
    display:block;
    width:100%;
  }

  .lightbox-aside{
    display:none;
  }

  .lightbox-media-wrap{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    background:#eae7e2;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:1.2rem;
    overflow:hidden;
  }

  .lightbox-media{
    width:100%;
    height:100%;
    object-fit:cover; /* au lieu de contain */
    object-position:center;
  }

  .lightbox-close{
    top:10px;
    right:10px;
    width:40px;
    height:40px;
    font-size:1.4rem;
    background:rgba(255,255,255,0.9);
  }

  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }

  .lightbox-arrow{
    padding:10px 12px;
    font-size:.9rem;
    background:rgba(255,255,255,0.9);
  }

  .lightbox-counter{
    bottom:10px;
    left:10px;
    font-size:.8rem;
    background:rgba(0,0,0,0.4);
  }
}
@media (max-width:760px){
  .container{width:min(100% - 32px,1280px)}
  .section{padding:28px 0}
  .header-inner{flex-wrap:wrap;padding:14px 0}
  .main-nav{display:none}
  .hero-visuals,.stats-grid,.projects-grid,.method-grid,.contact-cards,.fields-two,.lightbox-thumbs{grid-template-columns:1fr}
  .lightbox-panel{width:calc(100% - 16px)}
  .footer-inner{align-items:flex-start;flex-direction:column}
}
@media (max-width: 760px){
  .header-contact-btn{
    display:none !important;
  }

  .mobile-menu-btn{
    display:flex !important;
  }

  .main-nav{
    display:none !important;
  }
}

.form-footer{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}
.form-note{
  margin:0;
  font-size:0.75rem;
  color:#9f988f;
  letter-spacing:0.08em;
  text-align:left;
}