/* ============================================================
   ÔMEE — enhancement layer (added on top of the Wix export)
   - hero auto-slideshow (JS-free CSS animation)
   - mobile burger menu + responsive fixes
   - Processus anchor scroll offset
   ============================================================ */

html { scroll-behavior: smooth; }

/* ============================================================
   BRAND FONT — Glacial Indifference everywhere
   (replaces the Wix / Blaze Type fonts to avoid licensing issues)
   ============================================================ */
@font-face{
  font-family:'Glacial Indifference';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('font/glacial-indifference-regular.woff') format('woff');
}
@font-face{
  font-family:'Glacial Indifference';
  font-style:normal; font-weight:700; font-display:swap;
  src:url('font/glacial-indifference-bold.woff') format('woff');
}
/* apply to all text; leave icons / svg / flags untouched */
body,
body *:not(svg):not(path):not(g):not(use):not(defs):not([class*="icon"]):not([class*="Icon"]):not([class*="flag"]){
  font-family:'Glacial Indifference','Helvetica Neue',Arial,sans-serif !important;
}
/* Wix hard-codes the Joly serif with `#comp-XXX :is(p,h1,…) !important`
   rules (specificity 1,1,1) inside mobile media queries. Beat them with an
   id-scoped rule bumped via :not(#_) so its specificity is higher. */
#site-root [class*="font_"]:not(#_),
#site-root :is(p,h1,h2,h3,h4,h5,h6,ul,ol,li,a,blockquote,label,figcaption,button,span[data-attr-richtext-marker]):not(#_),
#SITE_CONTAINER [class*="font_"]:not(#_),
#SITE_CONTAINER :is(p,h1,h2,h3,h4,h5,h6,ul,ol,li,a,blockquote,label,figcaption,button,span[data-attr-richtext-marker]):not(#_){
  font-family:'Glacial Indifference','Helvetica Neue',Arial,sans-serif !important;
}

/* ---- Processus / in-page anchor: offset for the fixed header ---- */
#comp-mmb1c1c1 { scroll-margin-top: 110px; }

/* ============================================================
   ATELIER PROSE LOGO (replaces the ÔMEE wordmark)
   ============================================================ */
.omee-logo-link{ display:inline-flex; align-items:center; line-height:0; }
.omee-logo-img{
  height:40px; width:auto; display:block;
}
.omee-logo-footer{
  width:auto !important; height:auto !important;
  max-width:190px !important; max-height:110px !important;
  object-fit:contain !important;
}
@media screen and (max-width:1000px){
  .omee-logo-img{ height:34px; }
  .omee-logo-footer{ max-width:150px !important; }
}

/* ============================================================
   HERO SLIDESHOW  (#comp-miq6mp0a1 is the slideshow container)
   ============================================================ */
.omee-slides{
  position:absolute; inset:0; overflow:hidden; z-index:3;
  background:#cfc9bf center/cover no-repeat;
}
.omee-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:translateY(100%);
  transition:transform .85s cubic-bezier(.65,0,.35,1);
  will-change:transform;
}

/* ============================================================
   MOBILE BURGER MENU
   ============================================================ */
.omee-burger{ display:none; }
.omee-mobile-nav{ display:none; }

@media screen and (max-width:1000px){
  /* hide the wix desktop horizontal menu on small screens */
  nav[class*="StylableHorizontalMenu"]{ display:none !important; }

  .omee-burger{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:14px; right:16px; z-index:10001;
    width:46px; height:46px; padding:0; margin:0;
    background:transparent; border:0; cursor:pointer;
  }
  .omee-burger span{
    position:absolute; left:9px; right:9px; height:2px;
    background:#1a2912; border-radius:2px; transition:transform .3s ease, opacity .2s ease;
  }
  .omee-burger span:nth-child(1){ top:15px; }
  .omee-burger span:nth-child(2){ top:22px; }
  .omee-burger span:nth-child(3){ top:29px; }
  .omee-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .omee-burger.is-open span:nth-child(2){ opacity:0; }
  .omee-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .omee-mobile-nav{
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    position:fixed; inset:0; z-index:10000;
    background:#f3efe7;
    transform:translateX(100%); transition:transform .35s ease;
    padding:0 32px;
  }
  .omee-mobile-nav.is-open{ transform:translateX(0); }
  .omee-mobile-nav a{
    font-family:'Cormorant Garamond','Times New Roman',serif;
    font-size:30px; letter-spacing:.06em; text-transform:uppercase;
    color:#1a2912; text-decoration:none; padding:14px 0;
    border-bottom:1px solid rgba(26,41,18,.12);
  }
  body.omee-nav-open{ overflow:hidden; }
}

/* keep the logo from being clipped on small screens */
@media screen and (max-width:1000px){
  #SITE_HEADER, [data-mesh-id*="SITE_HEADER"]{ overflow:visible !important; }
  /* the ÔMEE logo bleeds ~8px off the left edge by design; nudge it in on mobile */
  [id$="comp-miq5mttx"]{ margin-left:24px !important; }
}

/* ============================================================
   MOBILE TYPOGRAPHY FIX
   Wix sizes text in "spx" (calc(N * 100cqw / 1280)) which Wix's
   stripped JS used to clamp for phones; without it, body text
   collapses to ~5px. Re-assert readable sizes per font preset.
   ============================================================ */
@media screen and (max-width:1000px){
  .font_0,.font_0 *{ font-size:38px !important; line-height:1.15 !important; }
  .font_1,.font_1 *{ font-size:32px !important; line-height:1.2 !important; }
  .font_2,.font_2 *{ font-size:30px !important; line-height:1.2 !important; }
  .font_3,.font_3 *{ font-size:23px !important; line-height:1.3 !important; }
  .font_4,.font_4 *{ font-size:20px !important; line-height:1.3 !important; }
  .font_5,.font_5 *{ font-size:24px !important; line-height:1.3 !important; }
  .font_6,.font_6 *{ font-size:19px !important; line-height:1.4 !important; }
  .font_7,.font_7 *{ font-size:18px !important; line-height:1.5 !important; }
  .font_8,.font_8 *{ font-size:16px !important; line-height:1.6 !important; }
  .font_9,.font_9 *{ font-size:13px !important; line-height:1.5 !important; }
  .font_10,.font_10 *{ font-size:14px !important; line-height:1.5 !important; }
}

/* ============================================================
   MOBILE FOOTER — force the fixed 6/7-column grid to stack
   (shared component class `comp-kbgakgyt-container` on every page)
   ============================================================ */
@media screen and (max-width:1000px){
  [class*="comp-kbgakgyt-container"]{
    display:flex !important; flex-direction:column !important;
    align-items:flex-start !important; gap:18px !important;
    width:100% !important; box-sizing:border-box !important;
    padding:36px 28px 28px !important;
  }
  [class*="comp-kbgakgyt-container"] > *{
    grid-area:auto !important; grid-column:auto !important; grid-row:auto !important;
    position:relative !important; left:auto !important; top:auto !important;
    transform:none !important; margin:0 !important;
    width:100% !important; max-width:100% !important; min-width:0 !important;
  }
  /* footer text/links: readable, no per-word wrapping */
  [class*="comp-kbgakgyt-container"] p,
  [class*="comp-kbgakgyt-container"] a,
  [class*="comp-kbgakgyt-container"] span{
    white-space:normal !important; word-break:normal !important;
    overflow-wrap:normal !important;
  }
}

/* ============================================================
   MOBILE HERO — Wix's spx sizing makes the home hero image
   ~730px tall, pushing the heading far down. Cap it so the
   "Atelier de design d'intérieur" text is reached quickly.
   ============================================================ */
@media screen and (max-width:1000px){
  #comp-miq6mp0a1{ height:56vh !important; min-height:300px !important; max-height:560px !important; }
}

/* ============================================================
   MOBILE HOME HERO — reapproach: kill the empty top strip and the
   500px grid gap so image + heading + body + CTA form one compact
   hero instead of an image floating above far-away text.
   ============================================================ */
@media screen and (max-width:1000px){
  /* redundant banner image section stacked above the real hero -> hide on phones
     so the rotating slideshow + heading + CTA read as one clean hero */
  #comp-ljpox75j{ display:none !important; }
  /* collapse the hero's internal grid -> natural vertical flow */
  [class*="comp-miq6mp00-container"]{
    display:block !important; height:auto !important; min-height:0 !important;
    grid-template-rows:none !important; grid-template-columns:none !important;
  }
  [class*="comp-miq6mp00-container"] > *{
    position:relative !important; grid-area:auto !important; grid-row:auto !important;
    width:100% !important; max-width:100% !important; left:auto !important; top:auto !important;
  }
  /* a touch shorter hero image on phones so the heading is in reach */
  #comp-miq6mp0a1{
    height:46vh !important; min-height:260px !important; max-height:420px !important;
    overflow:hidden !important;   /* clip the parked slideshow slides */
  }
  #comp-miq6mp0a1 .omee-slides{ overflow:hidden !important; }
}

/* ============================================================
   MOBILE FORMS — full-width, readable fields
   ============================================================ */
@media screen and (max-width:1000px){
  form input:not([type=checkbox]):not([type=radio]),
  form textarea, form select,
  [class*="wixui-text-input"] input,
  [class*="wixui-text-box"] textarea{
    width:100% !important; box-sizing:border-box !important;
    font-size:16px !important; min-height:44px !important;
  }
  [data-testid="buttonElement"], button[type=submit], a[class*="wixui-button"]{
    font-size:16px !important;
  }
}

/* ============================================================
   MOBILE PRO-GALLERY — Wix's image galleries are laid out by JS
   (absolute items at fixed ~919px desktop widths inside a clipped
   350px box). Without JS, mobile shows slivers and many images
   never lazy-load. Collapse the whole gallery to a clean stack.
   ============================================================ */
@media screen and (max-width:1000px){
  [id^="pro-gallery-margin-container"],
  [id^="pro-gallery-container"],
  [id^="pro-gallery-comp"],
  .pro-gallery-parent-container, .pro-gallery-wix-wrapper,
  [class*="ProGallery"][class*="__root"]{
    width:100% !important; max-width:100% !important; height:auto !important;
    min-height:0 !important; overflow:visible !important;
  }
  [data-hook="item-link-wrapper"]{
    width:100% !important; height:auto !important; display:block !important;
  }
  [data-hook="item-container"], [data-hook="item-wrapper"], [data-hook="image-item"],
  .gallery-item-content, .gallery-item-container{
    position:relative !important; width:100% !important; max-width:100% !important;
    height:auto !important; left:auto !important; top:auto !important;
    transform:none !important; margin:0 auto 14px !important;
  }
  [data-hook="gallery-item-image-img"], img.gallery-item, .gallery-item-content img{
    position:relative !important; width:100% !important; max-width:100% !important;
    height:auto !important; left:auto !important; top:auto !important;
    transform:none !important; object-fit:contain !important; display:block !important;
  }
  /* the picture wrapper around each gallery img */
  [data-hook="item-wrapper"] picture{ display:block !important; width:100% !important; }

  /* projects.html: the gallery section is a fixed ~2567px tall (sized for the
     desktop 2x2 grid); the stacked mobile gallery is shorter, leaving a huge
     blank below Chemin Alpin. Let the section shrink to its content. */
  #comp-lkpez11r, [id$="comp-kzve32de"], [id$="comp-kzve32dj"]{
    height:auto !important; min-height:0 !important;
    grid-template-rows:auto !important;
  }
  #comp-lkpez11r > *, [id$="comp-kzve32de"] > *, [id$="comp-kzve32dj"] > *{
    height:auto !important; min-height:0 !important;
  }
}

/* ============================================================
   CONTACT INFO BLOCK (replaces the old contact form)
   ============================================================ */
.omee-contact-info{
  max-width:560px; margin:6px 0 0;
  font-family:'Cormorant Garamond','Times New Roman',serif; color:#1a2912;
}
.omee-contact-intro{ font-size:21px; line-height:1.5; margin:0 0 26px; color:#1a2912; }
.omee-contact-item{
  display:flex; flex-direction:column; gap:3px;
  padding:18px 0; border-top:1px solid rgba(26,41,18,.16);
  text-decoration:none; color:#1a2912;
}
.omee-contact-item:last-child{ border-bottom:1px solid rgba(26,41,18,.16); }
.omee-contact-label{
  font-family:Arial,Helvetica,sans-serif; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; opacity:.55;
}
.omee-contact-value{ font-size:27px; line-height:1.2; word-break:break-word; }
a.omee-contact-item{ transition:opacity .2s ease; }
a.omee-contact-item:hover, a.omee-contact-item:focus{ opacity:.6; }
@media screen and (max-width:1000px){
  .omee-contact-info{ max-width:100%; }
  .omee-contact-intro{ font-size:18px; margin-bottom:20px; }
  .omee-contact-value{ font-size:22px; }
  .omee-contact-label{ font-size:11px; }
}

/* ============================================================
   BACK-TO-PROJECTS BUTTON (project detail pages)
   ============================================================ */
.omee-back{
  position:fixed; bottom:22px; left:22px; z-index:9000;
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 16px 10px 11px;
  background:#1a2912; color:#f3efe7;
  border-radius:999px; text-decoration:none;
  font-family:'Cormorant Garamond','Times New Roman',serif;
  font-size:16px; letter-spacing:.04em;
  box-shadow:0 6px 18px rgba(26,41,18,.22);
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.omee-back:hover, .omee-back:focus{ transform:translateX(-3px); background:#243a17; }
.omee-back svg{ display:block; }
.omee-back span{ line-height:1; padding-bottom:1px; }
@media screen and (max-width:1000px){
  .omee-back{ bottom:16px; left:16px; padding:9px 14px 9px 10px; font-size:15px; }
}

/* ============================================================
   MOBILE NAVBAR — thinner bar, burger aligned with the logo
   ============================================================ */
@media screen and (max-width:1000px){
  [id$="comp-lk9fm7rj"], [id$="comp-lk9oj2j6"], [id$="comp-lk9oj2j6-pinned-layer"]{
    min-height:62px !important; height:62px !important;
  }
  /* the inner header grid still reserves a 128px row -> collapse it so the
     align-self:center logo re-centres inside the 62px bar */
  [id$="comp-lk9fm7rj"]{ grid-template-rows:62px !important; }
  /* match the burger to the logo's new centre */
  .omee-burger{ top:10px !important; width:42px !important; height:42px !important; }
}

/* ============================================================
   MOBILE CONTACT — shorten the sticky hero so the form is in view,
   and make the overlaid intro text readable.
   ============================================================ */
@media screen and (max-width:1000px){
  /* show only a band (~25%) of the blueprint at the very top, then let the
     contact text sit on the cream background below it (readable, phone no
     longer clipped by the fixed header) */
  #comp-mmaw8z2u{ background:#efe9dd !important; height:auto !important; min-height:0 !important; }
  /* image + contact text are stacked in one overlapping grid cell -> un-stack */
  [class*="comp-mmaw8z2u-container"]{
    display:block !important; height:auto !important; min-height:0 !important;
    grid-template-rows:none !important; grid-template-columns:none !important;
  }
  [class*="comp-mmaw8z2u-container"] > *{
    position:relative !important; grid-area:auto !important; grid-row:auto !important;
    width:100% !important; max-width:100% !important; left:auto !important; top:auto !important;
  }
  #comp-mmaw8z2x{
    height:170px !important; min-height:170px !important; max-height:170px !important;
  }
  #comp-mmaxfblt{ margin:28px 0 8px !important; }
  /* contact text was cream (for the dark image) -> darken it for the cream bg */
  #comp-mmaxfblt, #comp-mmaxfblt *{ color:#1a2912 !important; }
}

/* ============================================================
   MOBILE STUDIO — un-overlap the "Alexandra / designer d'intérieur"
   byline from the body text (Wix stacks them in one grid cell).
   ============================================================ */
@media screen and (max-width:1000px){
  /* the intro's heading, "Alexandra" byline and body all live in one Wix grid
     (class `comp-mmb0spd7-container`) in overlapping cells. Stack them. */
  [class*="comp-mmb0spd3-container"], [class*="comp-mmb0spd7-container"]{
    display:block !important; height:auto !important; min-height:0 !important;
    grid-template-rows:none !important; grid-template-columns:none !important;
  }
  [class*="comp-mmb0spd3-container"] > *, [class*="comp-mmb0spd7-container"] > *{
    position:relative !important; grid-area:auto !important; grid-row:auto !important;
    grid-column:auto !important; width:100% !important; max-width:100% !important;
    left:auto !important; top:auto !important; transform:none !important;
  }
  #comp-mmb0spdc11{ text-align:left !important; margin:6px 0 16px 0 !important; }
}