/* =========================================================================
   POTERIE DU BOUSQUET — Page "Maison" — layout styles (mobile-first)
   ========================================================================= */

/* ---- image-slot defaults ---- */
image-slot{background:var(--color-bg-2);box-shadow:var(--shadow-1);}
.photo{box-shadow:var(--shadow-1);}

/* =====================  HEADER  ===================== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklab, var(--color-bg-0) 88%, transparent);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--color-line);}
.site-header__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:64px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--color-text-0);}
.brand__mark{width:34px;height:34px;flex:none;color:var(--accent);}
.brand__txt{display:flex;flex-direction:column;line-height:1;}
.brand__name{font-family:var(--font-heading);font-size:1.18rem;font-weight:600;letter-spacing:.01em;}
.brand__sub{font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--color-text-2);margin-top:3px;}
.nav{display:none;align-items:center;gap:var(--space-6);}
.nav a{font-size:var(--fs-small);font-weight:600;color:var(--color-text-1);text-decoration:none;}
.nav a:hover{color:var(--color-text-0);}
.header-cta{display:none;}
@media (min-width:1024px){ .nav{display:flex;} .header-cta{display:inline-flex;} }

/* =====================  HERO  ===================== */
.hero{position:relative;padding-block:var(--space-7) var(--space-9);overflow:hidden;}
.hero__inner{display:grid;gap:var(--space-6);}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);}
.hero h1{font-size:var(--fs-display);max-width:13ch;letter-spacing:-.015em;}
.hero h1 em{font-style:italic;color:var(--accent-ink);}
.hero__lead{font-size:clamp(1.0625rem,1rem + .5vw,1.3125rem);line-height:1.5;color:var(--color-text-1);max-width:40ch;}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;}

/* media — A: stacked address shot + macro inset */
.hero__media{position:relative;}
.heroA{display:block;}
.heroA__main{border-radius:var(--radius-2);}
.heroA__inset{
  position:absolute;right:-6px;bottom:-18px;width:42%;max-width:220px;
  border-radius:var(--radius-1);box-shadow:var(--shadow-3);
  outline:6px solid var(--color-bg-0);
}
.hero__mediacap{margin-top:var(--space-5);}

/* media — B: dedans / dehors split */
.heroB{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);align-items:stretch;}
.heroB__col{position:relative;display:flex;flex-direction:column;gap:var(--space-3);}
.heroB__tag{
  position:absolute;top:12px;left:12px;z-index:2;
  background:color-mix(in oklab,var(--color-bg-0) 82%, transparent);
  backdrop-filter:blur(6px);
  padding:5px 12px;border-radius:var(--radius-pill);
  font-size:var(--fs-label);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent-ink);
}
.heroB__col:nth-child(2) .heroB__tag{color:var(--color-accent-1-ink);}

/* A/B switch */
.abswitch{display:inline-flex;align-items:center;gap:0;border:1px solid var(--color-line-strong);border-radius:var(--radius-pill);padding:3px;background:var(--color-bg-0);}
.abswitch button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-caption);font-weight:700;letter-spacing:.04em;
  color:var(--color-text-1);padding:7px 16px;border-radius:var(--radius-pill);
  transition:background var(--dur-fast),color var(--dur-fast);white-space:nowrap;
}
.abswitch button.is-on{background:var(--accent);color:var(--color-on-accent);}
.abswitch__label{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--color-text-2);font-weight:700;margin-right:4px;}

.hero__meta{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);align-items:center;margin-top:var(--space-4);padding-top:var(--space-5);border-top:1px solid var(--color-line);width:100%;}
.hero__meta .stat{display:flex;flex-direction:column;}
.hero__meta .stat b{font-family:var(--font-heading);font-size:1.5rem;font-weight:600;}
.hero__meta .stat span{font-size:var(--fs-caption);color:var(--color-text-2);}

@media (min-width:900px){
  .hero{padding-block:var(--space-8) var(--space-10);}
  .hero__inner{grid-template-columns:1.02fr 1fr;align-items:center;gap:var(--space-8);}
  .hero--mediaLeft .hero__media{order:-1;}
}

/* =====================  CHAPTER HEAD  ===================== */
.chapterhead{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-7);}
.chapterhead__num{display:flex;align-items:baseline;gap:var(--space-3);}
.chapterhead__roman{
  font-family:var(--font-heading);font-size:1.5rem;font-weight:500;color:var(--accent);
  border:1px solid var(--color-line-strong);border-radius:50%;
  width:48px;height:48px;display:grid;place-items:center;flex:none;
}
.chapterhead .t-lead{margin-top:var(--space-2);}

/* =====================  CHAPITRE I — ADRESSE  ===================== */
.adresse{display:grid;gap:var(--space-6);}
.adresse__media{position:relative;}
.adresse__inset{
  position:absolute;left:-8px;bottom:-20px;width:40%;max-width:200px;
  border-radius:var(--radius-1);outline:6px solid var(--color-bg-1);box-shadow:var(--shadow-2);
}
.adresse__facts{display:flex;flex-direction:column;gap:var(--space-5);}
.factrow{display:flex;gap:var(--space-4);align-items:flex-start;padding-block:var(--space-4);border-top:1px solid var(--color-line);}
.factrow:first-of-type{border-top:0;padding-top:0;}
.factrow__ic{color:var(--accent);flex:none;margin-top:2px;}
.factrow__t{font-family:var(--font-heading);font-size:1.25rem;font-weight:500;margin-bottom:2px;}
.factrow__d{font-size:var(--fs-small);color:var(--color-text-1);}

/* provenance card */
.provenance{
  margin-top:var(--space-5);border:1px solid var(--color-line);border-radius:var(--radius-1);
  background:var(--color-bg-0);padding:var(--space-5);
  display:flex;align-items:center;gap:var(--space-5);
}
.provenance__map{flex:none;width:120px;height:120px;border-radius:var(--radius-1);overflow:hidden;position:relative;background:
  radial-gradient(circle at 60% 40%, color-mix(in oklab,var(--color-accent-1) 22%, var(--color-bg-1)), var(--color-bg-1));}
.provenance__map svg{position:absolute;inset:0;width:100%;height:100%;}
.provenance__t{font-family:var(--font-heading);font-size:1.25rem;}
@media (min-width:900px){
  .adresse{grid-template-columns:1.1fr .9fr;gap:var(--space-8);align-items:center;}
}

/* =====================  CHAPITRE II — DIPTYQUE  ===================== */
.dipt-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6);}
.seg{display:inline-flex;border:1px solid var(--color-line-strong);border-radius:var(--radius-pill);padding:3px;background:var(--color-bg-0);}
.seg button{appearance:none;border:0;background:transparent;cursor:pointer;font-family:var(--font-body);
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.04em;color:var(--color-text-1);
  padding:8px 18px;border-radius:var(--radius-pill);transition:background var(--dur-fast),color var(--dur-fast);}
.seg button.is-on{background:var(--color-text-0);color:var(--color-bg-0);}

.diptych__pair{display:grid;grid-template-columns:1fr;gap:var(--space-5);}
.diptych__panel{position:relative;display:flex;flex-direction:column;gap:var(--space-3);margin:0;}
.diptych__tag{position:absolute;top:12px;left:12px;z-index:2;
  background:color-mix(in oklab,var(--color-bg-0) 82%, transparent);backdrop-filter:blur(6px);
  padding:5px 12px;border-radius:var(--radius-pill);color:var(--accent-ink);}
.diptych__tag[data-side="out"]{color:var(--color-accent-1-ink);}
.diptych__link{display:flex;align-items:center;gap:14px;margin-top:var(--space-5);justify-content:center;color:var(--color-text-2);font-size:var(--fs-caption);}
.diptych__link .ar{flex:1;height:1px;background:var(--color-line);max-width:120px;}
@media (min-width:760px){ .diptych__pair{grid-template-columns:1fr 1fr;gap:var(--space-6);} }

/* =====================  CHAPITRE III — COLLECTIONS  ===================== */
.collections{display:grid;grid-template-columns:1fr;gap:var(--space-6);}
.ccard{display:flex;flex-direction:column;}
.ccard__img{border-radius:var(--radius-1);}
.ccard__body{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-4);}
.ccard__name{margin:0;}
.ccard__tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:2px 0 0;}
.ccard__cta{align-self:flex-start;margin-top:var(--space-2);}
@media (min-width:680px){ .collections{grid-template-columns:1fr 1fr;} }
@media (min-width:1000px){ .collections{grid-template-columns:repeat(3,1fr);gap:var(--space-7);} }

/* =====================  CHAPITRE IV — COMPOSER (before/after)  ===================== */
.composer{display:grid;gap:var(--space-7);}
.composer__intro{display:flex;flex-direction:column;gap:var(--space-4);}
.ba{display:flex;flex-direction:column;gap:var(--space-4);}
.ba__stage{position:relative;border-radius:var(--radius-2);overflow:hidden;cursor:ew-resize;touch-action:pan-y;box-shadow:var(--shadow-2);}
.ba__layer{position:relative;inset:0;}
.ba__layer image-slot{box-shadow:none;}
.ba__layer--top{position:absolute;top:0;left:0;width:100%;height:100%;will-change:clip-path;}
.ba__layer--top image-slot{height:100%;}
.ba__chip{position:absolute;bottom:14px;z-index:3;background:color-mix(in oklab,var(--color-text-0) 78%, transparent);
  color:var(--color-bg-0);padding:6px 12px;border-radius:var(--radius-pill);backdrop-filter:blur(4px);}
.ba__chip--before{left:14px;}
.ba__chip--after{right:14px;}
.ba__handle{position:absolute;top:0;bottom:0;width:2px;background:var(--color-bg-0);box-shadow:0 0 0 1px rgba(42,34,30,.15);transform:translateX(-1px);z-index:4;}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;
  background:var(--color-bg-0);border:0;color:var(--accent);display:grid;place-items:center;cursor:ew-resize;box-shadow:var(--shadow-2);}
.ba__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);}
.ba__tabs{display:inline-flex;border:1px solid var(--color-line-strong);border-radius:var(--radius-pill);padding:3px;background:var(--color-bg-0);}
.ba__tab{appearance:none;border:0;background:transparent;cursor:pointer;font-family:var(--font-body);font-size:var(--fs-caption);
  font-weight:700;color:var(--color-text-1);padding:8px 16px;border-radius:var(--radius-pill);transition:background var(--dur-fast),color var(--dur-fast);}
.ba__tab.is-on{background:var(--accent);color:var(--color-on-accent);}
.ba__note{max-width:42ch;margin:0;}
@media (min-width:900px){ .composer{grid-template-columns:1fr;} .ba__stage{cursor:ew-resize;} }

/* =====================  CHAPITRE V — GESTES  ===================== */
.gestes{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);}
.geste{margin:0;display:flex;flex-direction:column;gap:var(--space-3);}
.geste__body{display:flex;flex-direction:column;gap:6px;}
.geste__body .t-h3{margin:0;}
@media (min-width:760px){ .gestes{grid-template-columns:repeat(4,1fr);gap:var(--space-6);} }

/* =====================  QUOTE  ===================== */
.quotewrap{display:grid;gap:var(--space-6);align-items:center;}
.quotewrap .quote{max-width:30ch;}
@media (min-width:900px){ .quotewrap{grid-template-columns:1.4fr 1fr;gap:var(--space-9);} }

/* =====================  FAQ  ===================== */
.faq{display:grid;gap:var(--space-6);}
.acc{display:flex;flex-direction:column;}
.acc__item{border-top:1px solid var(--color-line);}
.acc__item:last-child{border-bottom:1px solid var(--color-line);}
.acc__h{margin:0;}
.acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  background:none;border:0;cursor:pointer;text-align:left;padding:var(--space-5) 0;
  font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:500;color:var(--color-text-0);}
.acc__icon{position:relative;width:18px;height:18px;flex:none;}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;background:var(--accent);transition:transform var(--dur-base) var(--ease);}
.acc__icon::before{top:8px;left:0;width:18px;height:2px;}
.acc__icon::after{top:0;left:8px;width:2px;height:18px;}
.acc__item.is-open .acc__icon::after{transform:scaleY(0);}
.acc__panel{padding:0 0 var(--space-5);max-width:62ch;}
@media (min-width:900px){ .faq{grid-template-columns:.8fr 1.2fr;gap:var(--space-8);} }

/* =====================  FOOTER  ===================== */
.site-footer{background:var(--color-text-0);color:color-mix(in oklab,var(--color-bg-0) 86%, transparent);padding-block:var(--space-8) var(--space-6);}
.site-footer a{color:color-mix(in oklab,var(--color-bg-0) 78%, transparent);text-decoration:none;}
.site-footer a:hover{color:var(--color-bg-0);text-decoration:underline;text-underline-offset:3px;}
.footer__top{display:grid;grid-template-columns:1fr;gap:var(--space-7);padding-bottom:var(--space-7);border-bottom:1px solid color-mix(in oklab,var(--color-bg-0) 16%, transparent);}
.footer__brand .brand__name{color:var(--color-bg-0);}
.footer__brand .brand__sub{color:color-mix(in oklab,var(--color-bg-0) 55%, transparent);}
.footer__brand .brand__mark{color:var(--accent);}
.footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);}
.footer__col h4{font-family:var(--font-body);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--track-label);
  color:color-mix(in oklab,var(--color-bg-0) 55%, transparent);font-weight:700;margin-bottom:var(--space-3);}
.footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--fs-small);}
.footer__bottom{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);justify-content:space-between;align-items:center;
  padding-top:var(--space-5);font-size:var(--fs-caption);color:color-mix(in oklab,var(--color-bg-0) 55%, transparent);}
.footer__blurb{max-width:34ch;font-size:var(--fs-small);color:color-mix(in oklab,var(--color-bg-0) 70%, transparent);margin-top:var(--space-3);}
@media (min-width:760px){
  .footer__top{grid-template-columns:1.3fr 2fr;gap:var(--space-9);}
  .footer__cols{grid-template-columns:repeat(3,1fr);}
}

/* =====================  INSPIRATION — lookbook  ===================== */
.lookbook{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);}
.lb{margin:0;display:flex;flex-direction:column;gap:var(--space-3);}
.lb__media{border-radius:var(--radius-1);overflow:hidden;aspect-ratio:2 / 3;background:var(--color-bg-2);box-shadow:var(--shadow-1);}
.lb__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform var(--dur-slow) var(--ease);}
.lb:hover .lb__media img{transform:scale(1.04);}
.lb__cap{display:flex;flex-direction:column;gap:1px;}
.lb__t{font-family:var(--font-heading);font-size:1.05rem;font-weight:500;color:var(--color-text-0);line-height:1.2;}
.lb__d{font-size:var(--fs-caption);color:var(--color-text-2);}
@media (min-width:760px){ .lookbook{grid-template-columns:repeat(5,1fr);gap:var(--space-5);} }

/* =====================  reveal-on-scroll  ===================== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;} }