/*
 * Homepage maquette 2026 — desktop + mobile.
 * Typo : Sweet Sans Pro uniquement (pas de Cochin sur la home).
 */

html:has(body.dr-home-maquette){
  margin:0;
  padding:0;
  width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  background:#000;
  min-height:100%;
  min-height:-webkit-fill-available;
}

body.dr-home-maquette{
  --dr-hm-bg:#F7F6F4;
  --dr-hm-bg-warm:#EFECEA;
  --dr-hm-black:#000;
  /* Titres section (HUILES, LA MAISON…) — une seule taille */
  --dr-hm-title:clamp(26px,7.5vw,34px);
  /* Corps (réf. DOUCE VANILLE / /001) — une seule taille partout */
  --dr-hm-body:clamp(11px,2.8vw,13px);
  --dr-hm-pad-x:clamp(20px,5vw,52px);
  --dr-hm-split-layering:clamp(180px,22vh,264px);
  --dr-hm-split-labo:clamp(380px,44vh,540px);
  background:var(--dr-hm-bg);
  color:var(--dr-hm-black);
  font-family:var(--dr-font-sans),sans-serif!important;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  min-height:-webkit-fill-available;
}

body.dr-home-maquette .dr-hm{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
}

body.dr-home-maquette .dr-hm,
body.dr-home-maquette .dr-hm *{
  font-family:var(--dr-font-sans),sans-serif;
  text-transform:uppercase;
}

body.dr-home-maquette .dr-hm-only-desk{display:none!important}
body.dr-home-maquette .dr-hm-only-mob{display:block!important}

/* ── Nav : logo + liens + hamburger noirs ── */
body.dr-home-maquette .dr-nav{
  background:transparent!important;
  border-bottom:0!important;
  backdrop-filter:none!important;
}
body.dr-home-maquette .dr-nav-left a,
body.dr-home-maquette .dr-nav-right a:not(.dr-nav-icon){
  color:#000!important;
}
body.dr-home-maquette .dr-nav-left a:hover,
body.dr-home-maquette .dr-nav-right a:not(.dr-nav-icon):hover{
  opacity:.55!important;
  color:#000!important;
}
body.dr-home-maquette .dr-nav-icon,
body.dr-home-maquette .dr-nav-icon svg{color:#000!important;stroke:#000!important}
body.dr-home-maquette #drNav .dr-hamburger span,
body.dr-home-maquette.dr-home2026 #drNav .dr-hamburger span,
body.dr-home-maquette .dr-nav:has(.dr-nav-mega:hover) #drNav .dr-hamburger span{
  background:#000!important;
}
body.dr-home-maquette .dr-nav:has(.dr-nav-mega:hover) .dr-nav-left a,
body.dr-home-maquette .dr-nav:has(.dr-nav-mega:hover) .dr-nav-right a:not(.dr-nav-icon){color:#000!important}
body.dr-home-maquette .dr-nav:has(.dr-nav-mega:hover){
  background:#EFECEA!important;
  border-bottom:1px solid rgba(0,0,0,.07)!important;
}

/* ── 1 · Hero plein écran (mobile) ── */
body.dr-home-maquette .dr-hm-hero{
  position:relative;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:var(--dr-hm-bg);
}
body.dr-home-maquette .dr-hm-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
body.dr-home-maquette .dr-hm-hero__video--desk{display:none}
body.dr-home-maquette .dr-hm-hero__video--mob{display:block}

/* ── 2–4 · Huiles ── */
body.dr-home-maquette .dr-hm-huiles{
  padding:clamp(32px,8vw,48px) var(--dr-hm-pad-x) clamp(24px,6vw,40px);
  background:var(--dr-hm-bg);
}
body.dr-home-maquette .dr-hm-huiles__head{
  margin-bottom:clamp(20px,5vw,28px);
}
body.dr-home-maquette .dr-hm-huiles__title{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0;
  line-height:1.02;
}
body.dr-home-maquette .dr-hm-huiles__title-line{
  display:block;
  font-size:var(--dr-hm-title);
  font-weight:700;
  letter-spacing:.04em;
}
body.dr-home-maquette .dr-hm-huiles__grid{
  display:flex;
  flex-direction:column;
  gap:clamp(36px,9vw,52px);
}
body.dr-home-maquette .dr-hm-product__row,
body.dr-home-maquette .dr-hm-product__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:clamp(10px,2.5vw,14px);
}
body.dr-home-maquette .dr-hm-product__name,
body.dr-home-maquette .dr-hm-product__index,
body.dr-home-maquette .dr-hm-maison__intro,
body.dr-home-maquette .dr-hm-maison__caption,
body.dr-home-maquette .dr-hm-maison__vol,
body.dr-home-maquette .dr-hm-layering__cta,
body.dr-home-maquette .dr-hm-labo__quote{
  font-size:var(--dr-hm-body);
  font-weight:400;
  letter-spacing:.14em;
}
body.dr-home-maquette .dr-hm-product__name,
body.dr-home-maquette .dr-hm-product__index{
  letter-spacing:.14em;
}
body.dr-home-maquette .dr-hm-product__foot{
  display:flex;
  justify-content:flex-end;
  width:100%;
  margin-top:clamp(8px,1.2vw,12px);
}
body.dr-home-maquette .dr-hm-product__visual{
  display:flex;
  flex-direction:column;
  width:100%;
}
body.dr-home-maquette .dr-hm-product__link{
  display:block;
  text-decoration:none;
  line-height:0;
  width:100%;
}
body.dr-home-maquette .dr-hm-product__media{
  display:grid;
  width:100%;
  overflow:hidden;
}
body.dr-home-maquette .dr-hm-product__media img{
  grid-area:1/1;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio:4/5;
  transition:opacity .3s ease;
}
body.dr-home-maquette .dr-hm-product__media img.is-hover{
  opacity:0;
}

/* ── Split 50/50 (layering + labo) ── */
body.dr-home-maquette .dr-hm-split{
  display:grid;
  grid-template-columns:1fr;
  width:100%;
}
body.dr-home-maquette .dr-hm-split__media{
  position:relative;
  overflow:hidden;
  background:var(--dr-hm-black);
  line-height:0;
}
body.dr-home-maquette .dr-hm-split__media img,
body.dr-home-maquette .dr-hm-split__media video{
  width:100%;
  display:block;
  object-fit:cover;
}
body.dr-home-maquette .dr-hm-layering .dr-hm-split__media{
  aspect-ratio:9/16;
}
body.dr-home-maquette .dr-hm-layering .dr-hm-split__media img{
  width:100%;
  height:100%;
  aspect-ratio:9/16;
  object-fit:cover;
}
body.dr-home-maquette .dr-hm-layering__cta{
  font-weight:400;
  letter-spacing:.14em;
  text-decoration:none;
  color:#fff;
  transition:opacity .25s ease;
  white-space:nowrap;
}
body.dr-home-maquette .dr-hm-layering__cta:hover{opacity:.65}
body.dr-home-maquette .dr-hm-layering__cta.dr-hm-only-mob{
  position:absolute;
  left:50%;
  bottom:clamp(28px,7vw,44px);
  transform:translateX(-50%);
}
body.dr-home-maquette .dr-hm-split__panel--dark{
  background:var(--dr-hm-black);
}
body.dr-home-maquette .dr-hm-split__panel--light{
  background:#fff;
}
body.dr-home-maquette .dr-hm-labo__quote{
  margin:0 auto;
  font-weight:400;
  line-height:1.9;
  text-align:center;
  color:var(--dr-hm-black);
  width:max-content;
  max-width:calc(100% - 40px);
}
body.dr-home-maquette .dr-hm-labo__mob-video{
  background:var(--dr-hm-black);
  line-height:0;
}
body.dr-home-maquette .dr-hm-labo__mob-video video{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:9/16;
  object-fit:cover;
}
body.dr-home-maquette .dr-hm-split--labo .dr-hm-split__media img{
  aspect-ratio:1/1;
}

/* ── 6–8 · Maison ── */
body.dr-home-maquette .dr-hm-maison{
  padding:clamp(40px,9vw,72px) var(--dr-hm-pad-x);
  background:var(--dr-hm-bg-warm);
}
body.dr-home-maquette .dr-hm-maison__head{
  margin-bottom:clamp(24px,6vw,36px);
  text-align:left;
}
body.dr-home-maquette .dr-hm-maison__title{
  margin:0 0 clamp(16px,4vw,24px);
  font-size:var(--dr-hm-title);
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.05;
}
body.dr-home-maquette .dr-hm-maison__intro{
  margin:0;
  line-height:1.75;
}
body.dr-home-maquette .dr-hm-maison__scene{
  display:block;
  margin:0 0 clamp(28px,7vw,36px);
  line-height:0;
  text-decoration:none;
}
body.dr-home-maquette .dr-hm-maison__scene img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  aspect-ratio:4/5;
}
body.dr-home-maquette .dr-hm-maison__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px,3.5vw,22px);
  align-items:stretch;
  width:100%;
}
body.dr-home-maquette .dr-hm-maison__item{
  display:flex;
  flex-direction:column;
  gap:clamp(8px,2vw,12px);
  text-decoration:none;
  color:var(--dr-hm-black);
  min-width:0;
}
body.dr-home-maquette .dr-hm-maison__media--product{
  background:#fff;
  padding:clamp(14px,3.5vw,22px);
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1/1;
}
body.dr-home-maquette .dr-hm-maison__media--product img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
body.dr-home-maquette .dr-hm-maison__vol{
  text-align:center;
}
body.dr-home-maquette .dr-hm-maison__item--deck{
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none;
  color:var(--dr-hm-black);
  min-width:0;
}
body.dr-home-maquette .dr-hm-maison__card{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
}
body.dr-home-maquette .dr-hm-maison__media--deck{
  display:grid;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--dr-hm-bg-warm);
  align-items:stretch;
  justify-items:stretch;
}
body.dr-home-maquette .dr-hm-maison__media--deck img{
  grid-area:1/1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transition:opacity .35s ease;
}
body.dr-home-maquette .dr-hm-maison__media--deck img.is-hover{opacity:0}
body.dr-home-maquette .dr-hm-maison__caption{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin-top:clamp(20px,2.5vw,32px);
}
body.dr-home-maquette .dr-hm-maison__caption .dr-hm-maison__label{
  flex:0 1 auto;
  text-align:left;
}
body.dr-home-maquette .dr-hm-maison__item--deck .dr-hm-maison__caption .dr-hm-maison__vol{
  flex:0 0 auto;
  margin-left:auto;
  text-align:right;
}

/* ── Labo ── */
body.dr-home-maquette .dr-hm-labo{background:var(--dr-hm-bg)}

/* ── Mobile : hero plein écran iPhone Safari ── */
@media (max-width:899px){
  body.dr-home-maquette #drNav .dr-hamburger span,
  body.dr-home-maquette.dr-home2026 #drNav .dr-hamburger span,
  body.dr-home2026.dr-home-maquette:not(.maison-page-nav) #drNav .dr-hamburger span{
    background:#000!important;
  }

  body.dr-home-maquette #drNav.dr-nav{
    padding-top:max(14px,env(safe-area-inset-top))!important;
    padding-right:max(16px,env(safe-area-inset-right))!important;
    padding-bottom:14px!important;
    padding-left:max(16px,env(safe-area-inset-left))!important;
  }

  body.dr-home-maquette .dr-hm-hero{
    position:relative;
    aspect-ratio:unset;
    width:100%;
    max-width:100%;
    margin:0;
    margin-top:calc(0px - env(safe-area-inset-top,0px));
    padding:0;
    overflow:hidden;
    background:#000;
    min-height:calc(100lvh + env(safe-area-inset-top,0px));
    min-height:calc(100dvh + env(safe-area-inset-top,0px));
    min-height:-webkit-fill-available;
    height:calc(100lvh + env(safe-area-inset-top,0px));
    height:calc(100dvh + env(safe-area-inset-top,0px));
  }

  body.dr-home-maquette .dr-hm-hero__video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center top;
    display:block;
  }

  body.dr-home-maquette .dr-hm-labo__mob-video{
    margin-bottom:0;
  }

  body.dr-home-maquette footer.dr-footer2{
    margin-bottom:0;
    padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))!important;
  }

  body.dr-home-maquette .dr-hm-maison__grid{
    grid-template-columns:1fr 1fr;
  }

  body.dr-home-maquette .dr-hm-maison__item--product{
    width:100%;
  }
}

/* ── Desktop ── */
@media (min-width:900px){
  body.dr-home-maquette{
    --dr-hm-title:clamp(22px,2vw,30px);
    --dr-hm-body:clamp(10px,0.85vw,12px);
    --dr-hm-split-layering:clamp(360px,40vh,500px);
    --dr-hm-split-labo:clamp(360px,40vh,500px);
  }

  body.dr-home-maquette .dr-hm-only-desk{display:block!important}
  body.dr-home-maquette .dr-hm-only-mob{display:none!important}
  body.dr-home-maquette span.dr-hm-product__media{display:grid!important}
  body.dr-home-maquette a.dr-hm-maison__item--deck{
    display:flex!important;
    flex-direction:column!important;
    height:100%;
  }

  body.dr-home-maquette .dr-hm-split__panel.dr-hm-only-desk{
    display:flex!important;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  body.dr-home-maquette .dr-hm-hero{
    aspect-ratio:16/7;
    min-height:clamp(480px,78vh,900px);
  }
  body.dr-home-maquette .dr-hm-hero__video--desk{display:block}
  body.dr-home-maquette .dr-hm-hero__video--mob{display:none}

  body.dr-home-maquette .dr-hm-huiles{
    padding:clamp(48px,5vw,72px) clamp(40px,4.5vw,64px) clamp(40px,4vw,64px);
  }
  body.dr-home-maquette .dr-hm-huiles__head{margin-bottom:clamp(28px,3vw,40px)}
  body.dr-home-maquette .dr-hm-product{display:flex;flex-direction:column}
  body.dr-home-maquette .dr-hm-huiles__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(16px,2vw,28px);
  }
  body.dr-home-maquette .dr-hm-product__media,
  body.dr-home-maquette .dr-hm-product__media img{aspect-ratio:1/1}
  @media (hover:hover) and (pointer:fine){
    body.dr-home-maquette .dr-hm-product__link:hover .is-main{opacity:0}
    body.dr-home-maquette .dr-hm-product__link:hover .is-hover{opacity:1}
    body.dr-home-maquette .dr-hm-maison__item--deck:hover .is-main{opacity:0}
    body.dr-home-maquette .dr-hm-maison__item--deck:hover .is-hover{opacity:1}
  }

  /* Split 50/50 */
  body.dr-home-maquette .dr-hm-split--half{
    grid-template-columns:1fr 1fr;
    align-items:stretch;
  }

  /* Layering : hauteur FIXE (l'image ne peut plus étirer la section) */
  body.dr-home-maquette .dr-hm-layering .dr-hm-split__media{
    aspect-ratio:unset;
  }
  body.dr-home-maquette .dr-hm-layering .dr-hm-split--half{
    height:var(--dr-hm-split-layering);
    max-height:var(--dr-hm-split-layering);
    overflow:hidden;
  }
  body.dr-home-maquette .dr-hm-layering .dr-hm-split__media,
  body.dr-home-maquette .dr-hm-layering .dr-hm-split__panel--dark{
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  body.dr-home-maquette .dr-hm-layering .dr-hm-split__media img{
    width:100%;
    height:100%;
    min-height:0!important;
    aspect-ratio:unset!important;
    object-fit:cover;
    object-position:center center;
  }
  body.dr-home-maquette .dr-hm-layering .dr-hm-split__panel--dark.dr-hm-only-desk{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body.dr-home-maquette .dr-hm-layering .dr-hm-split__panel--dark .dr-hm-layering__cta{
    position:static!important;
    transform:none!important;
    bottom:auto!important;
    left:auto!important;
    display:inline-block!important;
    margin:0!important;
  }

  /* Labo : texte 4 lignes + panneau centré */
  body.dr-home-maquette .dr-hm-labo .dr-hm-split__panel--light.dr-hm-only-desk{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body.dr-home-maquette .dr-hm-labo__quote{
    padding:0 clamp(16px,2vw,32px);
    line-height:1.9;
    letter-spacing:.14em;
  }

  /* Maison : carrés identiques alignés haut/bas + légendes sous chaque image */
  body.dr-home-maquette .dr-hm-maison__grid{
    grid-template-columns:1fr 1fr;
    gap:clamp(28px,3.5vw,48px);
    align-items:stretch;
  }
  body.dr-home-maquette .dr-hm-maison__card{
    width:100%;
    height:100%;
  }
  body.dr-home-maquette .dr-hm-maison__media--deck{
    aspect-ratio:1/1;
    width:100%;
  }
  body.dr-home-maquette .dr-hm-maison__caption{
    margin-top:clamp(24px,3vw,40px);
  }

  /* Labo vidéo */
  body.dr-home-maquette .dr-hm-labo .dr-hm-split--half .dr-hm-split__media,
  body.dr-home-maquette .dr-hm-labo .dr-hm-split--half .dr-hm-split__panel{
    min-height:var(--dr-hm-split-labo);
  }
  body.dr-home-maquette .dr-hm-labo .dr-hm-split--half .dr-hm-split__media video{
    width:100%;
    height:100%;
    min-height:var(--dr-hm-split-labo);
    object-fit:cover;
  }

  /* Maison */
  body.dr-home-maquette .dr-hm-maison{
    padding:clamp(64px,7vw,96px) clamp(48px,5vw,80px);
  }
  body.dr-home-maquette .dr-hm-maison__head{
    text-align:center;
    margin-bottom:clamp(40px,4.5vw,64px);
  }
  body.dr-home-maquette .dr-hm-maison__title{
    margin:0 0 clamp(22px,2.4vw,34px);
  }
}

@media (min-width:900px){
  body.dr-home-maquette .dr-nav{padding:22px 52px!important}
}