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

/* Sticky Footer */
html, body {
  height: 100%;
}

/* Global color palette */
:root{
  --color-bg:#FAF9F7;
  --color-text:#222222;
  --color-title:#5E6F82;
  --color-secondary:#5E6F82;
  --color-secondary-opacity:0.55;
  --color-home-title:#1a1a1a;
  --color-block-a:#E7E6E2;
  --color-block-b:#EFEDE8;
  --color-block-c:#E3E0DA;
}

/* Common section titles */
.section-title {
  font-family: Garamond, "EB Garamond", Georgia, serif;
  font-size: 29px;
  font-weight: 600;
  margin: 0 0 24px;
  white-space: pre-line;
  color: var(--color-title);
}

h1, h2, h3 {
  color: var(--color-title);
}

body {
  display: flex;
  flex-direction: column;
}

body[data-page-title="Services"],
body[data-page-title="Studio"],
body[data-page-title="Offres et process"] {
  overflow-x: hidden;
}

p,
li {
  line-height: 1.5;
}

.site-footer {
  margin-top: auto;
}

/* Services/Studio Feature (cadre sous l’image) */
.services .feature-frame, .studio .feature-frame{width:calc(100% + var(--services-overshoot-right));margin-right:calc(-1 * var(--services-overshoot-right));aspect-ratio:var(--services-ar-w)/var(--services-ar-h);background:var(--color-block-a);display:grid;grid-template-columns:35% 65%;gap:0}
/* Services: center the second block (feature) perfectly horizontally */
.services .feature-image, .studio .feature-image{position:relative;overflow:hidden}
.services .feature-content, .studio .feature-content{padding:24px var(--site-pad);display:flex;align-items:center}
.services .feature-content p, .studio .feature-content p{margin:0;line-height:1.5;white-space:pre-line}
/* Projects: Hero Frame */
.project-hero { margin-top: 70px; margin-bottom: 20px; }
.project-hero .hero-frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  aspect-ratio: auto;
}

/* Projects: Images Grid */
.project-images {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0px auto 0px;
  width: 100%;
}

.project-image {
  width: 100%;
}

/* Default: full width */
.project-image.columns-1 {
  width: 100%;
  flex-basis: 100%;
}

/* 2 columns: 50% width each */
.project-image.columns-2 {
  width: calc(50% - 10px);
  flex-basis: calc(50% - 10px);
}

@media (max-width: 475px) {
  .project-image.columns-2 {
    width: 100%;
    flex-basis: 100%;
  }
}

.project-image img {
  width: 100%;
  height: auto;
  display: block;
}
.project-hero .hero-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.project-hero .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-hero .hero-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.project-hero .hero-content h1 {
  margin: 0 0 8px;
  font-family: Garamond, "EB Garamond", Georgia, serif;
  font-size: 29px;
  font-weight: 400;
}
.project-hero .hero-subtitle {
  margin: 0 0 16px;
  font-family: Garamond, "EB Garamond", Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.8;
}
.project-hero .hero-content p {
  margin: 0 0 32px;
  font-size: 19px;
  line-height: 1.5;
  opacity: 0.9;
  max-width: 60ch;
}
.project-hero .hero-content a{text-decoration:underline;text-underline-offset:3px}
.project-hero .hero-meta {
  display: flex;
  gap: 40px;
  font-size: 16px;
}
.project-hero .hero-meta-item {
  display: flex;
  flex-direction: column;
}
.project-hero .hero-meta-label {
  opacity: 0.7;
  font-size: 12px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 1100px) {
  .project-hero .hero-frame {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .project-hero .hero-image {
    aspect-ratio: 16 / 9;
  }
  .project-hero .hero-content {
    padding: 0;
  }
}

@media (max-width: 1100px) {
  .project-hero .hero-content {
    padding: 0;
    max-width: 100%;
  }
}

@media (max-width: 475px) {
  main.container { width: 100vw; margin: 0; padding: 0; }
  .project-page { padding: 0; width: 100vw; margin: 0; }
  .project-images { margin: 0px 0; width: 100vw; }
  .project-image { width: 100vw; }
  .project-image img { width: 100vw; display: block; }
  
  .project-hero .hero-frame {
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }
  .project-hero .hero-image {
    aspect-ratio: 16 / 9;
  }
  .project-hero .hero-content {
    padding: 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 100%;
  }
  .project-hero .hero-content h1 {
    font-size: 20px;
  }
  .project-hero .hero-content p {
    font-size: 12px;
  }
}

@media (max-width: 620px) {
  .project-hero .hero-frame {
    gap: 20px;
  }
  .project-hero .hero-content h1 {
    font-size: 20px;
  }
  .project-hero .hero-content p {
    font-size: 12px;
  }
}

/* Feature responsive behavior (Services/Studio) */
@media (max-width: 1100px){
  .services .feature-frame, .studio .feature-frame{grid-template-columns:1fr;aspect-ratio:auto}
  .services .feature-image, .studio .feature-image{grid-row:1}
  .services .feature-image img, .studio .feature-image img{width:100%;height:auto}
  /* Override uniquement pour Studio feature-3: conserver l'adaptation de l'image */
  .services .feature-content, .studio .feature-content{grid-row:2;display:block;text-align:left;margin-top:46px;margin-bottom:50px}
}




/* Stacks (Services/Studio) */
.services .stack-item, .studio .stack-item{position:relative;height:var(--services-stack-h);background:#e0e0e0;overflow:hidden}
.services .stack-item .item-head, .studio .stack-item .item-head{position:absolute;z-index:1;left:0;right:0;top:0;height:30%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--site-pad);text-align:center}
.services .stack-item .item-title, .studio .stack-item .item-title{margin:0 0 4px;font-weight:700;font-size:calc(var(--services-stack-title-size) * 1.3)}
.services .stack-item .item-sub, .studio .stack-item .item-sub{margin:0;font-size:var(--services-text-size);opacity:.9;white-space:pre-line;text-align:center}
.services .stack-item .item-image, .studio .stack-item .item-image{position:absolute;left:0;right:0;bottom:0;height:70%;overflow:hidden}
.services .stack-item .item-image img, .studio .stack-item .item-image img{width:100%;height:100%;object-fit:cover;display:block}
/* Services: enlarge Modules (3rd stack item) image by 30% */
/* Module image should match block width exactly; no scaling */

/* Studio: 3e bloc en deux colonnes (texte gauche, image droite) */
  position:static;
  height:auto;
  padding:24px var(--site-pad);
  text-align:left;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}
  position:static;
  height:auto;
}
  width:100%;
  height:auto;
  object-fit:cover;
}


/* Responsive - Stacks (Services/Studio) */
@media (max-width: 1200px){
  .services .stack-item, .studio .stack-item{height:950px}
  .services .stack-item .item-head, .studio .stack-item .item-head{height:34%}
  .services .stack-item .item-image, .studio .stack-item .item-image{height:66%}
}
@media (max-width: 720px){
  .services .stack-item, .studio .stack-item{height:810px}
  .services .stack-item .item-head, .studio .stack-item .item-head{height:38%}
  .services .stack-item .item-image, .studio .stack-item .item-image{height:62%}
}
*{box-sizing:border-box}
html,body{height:100%}
:root{--site-pad:clamp(60px,4vw,100px);--gap-x:28px;--gap-y:96px;--services-overshoot-right:14px;--services-title-size:38px;--services-text-size:20px;--header-h:92px;--services-ar-w:1677;--services-ar-h:800;--services-bottom-gap:40px;--services-center-size:30px;--services-stack-gap:50px;--services-stack-h:1050px;--services-stack-title-size:19px;--studio-feature1-delta:50px;--studio-feature2-delta:50px}
body{margin:0;padding:0;font-family:'DMSans', sans-serif;color:var(--color-text);background:var(--color-bg)}
/* Offset content for fixed header */
body{padding-top:var(--header-h)}
img{max-width:100%;display:block}
.img-fade{opacity:0;transition:opacity .4s ease}
.img-fade.is-visible{opacity:1}
@media (prefers-reduced-motion: reduce){
  .img-fade{transition:none}
}
a{color:inherit;text-decoration:none}

.container{width:100%;margin:0 auto}

/* Header */
.site-header{position:fixed;left:0;right:0;top:0;z-index:30;background:var(--color-bg)}
.nav-container{min-height:92px;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;padding:10px var(--site-pad) 0;padding-right:calc(var(--site-pad) + var(--services-overshoot-right))}
.nav{justify-self:end;display:flex;gap:24px}
.logo{font-weight:600;letter-spacing:0;justify-self:start;position:relative;z-index:20;display:grid;grid-template-columns:auto 1fr;grid-auto-rows:auto;align-items:center;column-gap:20px}
.logo img{height:30px;display:block;position:static;grid-row:1;grid-column:1;transform:translateY(-5px);flex:0 0 auto}
.logo .header-tagline{grid-row:1;grid-column:2;margin-top:5px;font-family: Garamond, "EB Garamond", Georgia, serif;font-size:15px;line-height:1.2;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width: 1110px){
  .logo .header-tagline{display:none}
}
.site-header .header-right{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:10px;margin-right:-14px}
.site-header .header-right .page-h1{margin:0;font-family:'Poppins','DMSans',sans-serif;font-size:24px;line-height:1.2;font-weight:600;color:var(--color-home-title)}
/* Reset any grid placement previously applied to page-h1 */
.site-header .page-h1{grid-row:auto;grid-column:auto;justify-self:auto}
/* Normalize margins when inside right wrapper */
.site-header .header-right .burger{margin-right:-8px}
.site-header .header-right .close-btn{margin-right:0px}
.burger{justify-self:end;display:inline-flex;flex-direction:column;gap:5px;background:transparent;border:0;padding:8px;margin-right:-22px;margin-top:3px;cursor:pointer}
.burger span{width:26px;height:4px;background:var(--color-text);display:block}

/* Close button (X) aligné au burger */
.close-btn{justify-self:end;background:transparent;border:0;padding:8px;margin-right:-12px;margin-top:5px;line-height:1;color:var(--color-text);display:none;position:relative;z-index:20;width:26px;height:26px;cursor:pointer}
.close-btn span{position:absolute;left:0;right:0;top:50%;margin:0 auto;width:26px;height:4px;background:var(--color-text);display:block}
.close-btn span:first-child{transform:translateY(-50%) rotate(45deg)}
.close-btn span:last-child{transform:translateY(-50%) rotate(-45deg)}

/* Overlay de menu */
.menu-overlay{position:fixed;left:0;right:0;top:0;height:350px;background:#bfb9ae;z-index:20;transform:translateY(-100%);transition:transform .28s ease}
.menu-overlay .overlay-inner{height:100%;padding:0 var(--site-pad);display:grid;grid-template-columns:1fr auto;column-gap:40px}
.menu-overlay .overlay-left{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.menu-overlay .overlay-address{margin:0;padding-top:136px;white-space:pre-line;font-size:20px;line-height:1.5}
.menu-overlay .overlay-address br{display:block;content:'';height:0px}
.menu-overlay .overlay-email{margin:2px 0 0 0;font-size:20px;line-height:1.5}
.menu-overlay .overlay-phone{margin:2px 0 0 0;font-size:20px;line-height:1.5}
.menu-overlay .overlay-email{font-size:20px;line-height:1.5;cursor:pointer;user-select:none}
.menu-overlay .overlay-email:hover{opacity:0.7}
.menu-overlay .overlay-phone{font-size:20px;line-height:1.5;cursor:pointer;user-select:none}
.menu-overlay .overlay-phone:hover{opacity:0.7}
.menu-overlay .overlay-nav{display:flex;align-items:center;justify-content:flex-end;padding-right:0;margin-right:-12px;height:100%}
.menu-overlay .overlay-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;text-align:right}
.menu-overlay .overlay-nav a{font-size:24px;line-height:1}

/* État ouvert */
body.menu-open .menu-overlay{transform:translateY(0)}
body.menu-open .burger{display:none}
body.menu-open .close-btn{display:inline-block}
body.menu-open .site-header{background:transparent}
body.menu-open .site-header .header-right .page-h1{transform: translateX(-8px)}

/* Main */
.main{padding:18px var(--site-pad) 96px}
.main.services, .main.studio, .main.home {
  /* Apply overshoot to all main containers for consistency */
  width: calc(100% + var(--services-overshoot-right));
  margin-right: calc(-1 * var(--services-overshoot-right));
  padding-right: calc(var(--site-pad) + var(--services-overshoot-right));
}
/* .main.services override retiré pour conserver le comportement par défaut */

/* Footer */
.site-footer{background:var(--color-bg)}
.footer-center{display:grid;place-items:center;gap:12px;padding:36px var(--site-pad)}
.footer-links{display:flex;gap:16px;align-items:center;justify-content:center}
.footer-links a{opacity:.8;display:inline-block}
.footer-links a:hover{opacity:1}
.socials{display:flex;gap:10px;justify-content:center}
.socials a{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:all 0.2s ease;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-color:transparent;
  border:none;
  border-radius:0;
}
.socials a:hover{
  opacity:0.7;
}
#linkedin-link{
  background-image:url('/assets/favico/linkedin.png');
}

/* Responsive */
@media (max-width:870px){
  .nav-container{height:64px;grid-template-columns:1fr auto 1fr}
  .nav-categories{display:none}
  .burger{margin-right:0}
}

@media (max-width:475px){
  .footer-links{font-size:11px; text-align:center; justify-content:center}
  .footer-links a{font-size:11px}
  .footer-center{font-size:10px; text-align:center}
  .menu-overlay{height:auto}
  .menu-overlay .overlay-inner{padding-top:100px;padding-bottom:20px;padding-left:10px;padding-right:10px}
  .menu-overlay .overlay-address{font-size:15px;padding-top:20px}
  .menu-overlay .overlay-email{font-size:15px}
  .menu-overlay .overlay-phone{font-size:15px}
  .menu-overlay .overlay-nav ul{gap:10px}
  .menu-overlay .overlay-nav{margin-right:0;padding-right:0}
  .menu-overlay .overlay-nav a{font-size:18px}
}

/* Header mobile adjustments */
@media (max-width: 1560px) and (min-width: 801px){
  .nav-container{grid-template-columns:minmax(0, 1.6fr) minmax(0, 0.4fr) auto}
  .logo{justify-self:stretch; width:100%}
}
@media (max-width: 800px){
  /* Keep the logo vertically fixed by centering it in a fixed-height area */
  .nav-container{height:64px; align-items:center}
  .logo{display:flex;align-items:center;position:relative;height:64px;flex:0 0 auto}
  .logo img{top:0}
}
@media (max-width: 400px){
  /* Let the H1 near the burger shrink first, not the logo */
  .site-header .header-right .page-h1{max-width:40vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* H1 near burger: smaller on narrow screens */
@media (max-width: 700px){
  .site-header .header-right .page-h1{font-size:16px}
}
@media (max-width: 576px){
}
@media (max-width: 480px){
  /* Shared mobile text width for Services content */
  :root{ --mobile-text-w:70vw }
  /* Keep logo, H1 and burger vertically centered even when tagline is hidden */
  .nav-container{align-items:center; padding-left:10px; padding-right:10px !important}
  .logo img{top:0}
  /* Ensure burger aligns to 10px from right edge */
  .site-header .header-right{ margin-right:0 !important }
  .site-header .header-right .burger{margin-right:0}
  .site-header .header-right .close-btn{margin-right:0}
  /* Services: remove parent padding; rely on frame widths for gutters */
  .main.services, .services, .main.home {padding-left:0; padding-right:0}
  /* Make all main containers and feature frames full-width on mobile */
  .main.services,
  .main.home,
  .services .hero-frame,
  .services .feature-frame {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    aspect-ratio: auto;
    box-sizing: border-box;
  }
  /* Center-text blocks: reduce font size and keep centered width */
  .services .center-text,
  .studio .center-text{
    font-size:19px;
    width:var(--mobile-text-w); max-width:var(--mobile-text-w);
    margin-left:auto; margin-right:auto; display:block;
  }
  /* Titles sizing on mobile - all section titles */
  .section-title,
  .services .feature-title,
  .services .stack .item-title {
    font-size: 20px !important;
  }
  /* Paragraph size only (global) */
  p{ font-size:17px !important }


  /* Remove global heading centering to avoid shifting first block; headings centered only in second block above */
}

/* Home Intro Text */
.home-intro {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
  padding: 0 var(--site-pad);
}

.home-intro .home-h1 {
  font-family: "Poppins", "DMSans", sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--color-home-title);
}

.home-intro .intro-text {
  font-family: Garamond, "EB Garamond", Georgia, serif;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  max-width: 830px;
  margin-left: auto;
  margin-right: auto;
  white-space: pre-line;
}

@media (max-width: 768px) {
  .home-intro .intro-text {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .home-intro .home-h1 {
    font-size: 17px;
  }
  .home-intro .intro-text {
    font-size: 20px;
  }
}

/* ========================================
   MENTIONS LÉGALES
   ======================================== */

.legal-notes {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px var(--site-pad);
  text-align: center;
}

.project-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 100px;
  padding-top: 40px;
}

.legal-notes-content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 700px;
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
}

/* Privacy Policy: reduce container width to 600px */
main.legal-notes.privacy-policy .legal-notes-content {
  max-width: 600px;
}

.legal-notes-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 22px;
  font-family: Garamond, "EB Garamond", Georgia, serif;
}

.legal-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.legal-section-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 22px;
  font-family: Garamond, "EB Garamond", Georgia, serif;
}

.legal-editor-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.6;
}

.legal-section-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-item {
  margin: 0;
  line-height: 1.5;
  font-size: 16px;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .legal-notes {
    padding: 40px 24px;
    min-height: auto;
    justify-content: flex-start;
  }

  .legal-notes-title {
    font-size: 28px;
  }

  .legal-section-title {
    font-size: 18px;
  }
}