/* ============================================================
   Page La Boutique — design premium « La Maison-Galerie »
   Intégré depuis premium-boutique.html (preview validée).
   Tout est scopé sous .premium-boutique (classe sur <main>).
   Charte Maison de Tara : terracotta / vieux rose / sauge /
   sable / laiton / encre / blanc cassé. Aucune autre couleur.
   Fonts chargées par le head du site : Playfair Display
   400/500/600 (+ italiques), La Belle Aurore 400,
   Inter 300/400/500 — aucun autre poids utilisé ici.
   Les !important ciblés répondent aux !important globaux de
   mdt-override.css (h1-h6 : color/font-weight ; .eyebrow :
   letter-spacing/font-size).
   ============================================================ */

.premium-boutique{
  --terracotta:#79301E;
  --rose:#BA7770;
  --sauge:#8A976C;
  --sable:#F0ECDB;
  --laiton:#B8924D;
  --encre:#2c2419;
  --blanc:#FBF7EC;

  --f-titre:"Playfair Display", Georgia, serif;
  --f-main:"La Belle Aurore", cursive;
  --f-corps:"Inter", system-ui, sans-serif;

  --maxw:1240px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

.premium-boutique,
.premium-boutique *,
.premium-boutique *::before,
.premium-boutique *::after{ box-sizing:border-box; }

/* base (équivalent html/body de la preview, scopé) */
.premium-boutique{
  margin:0;
  font-family:var(--f-corps);
  font-weight:300;
  font-size:clamp(1rem, .95rem + .25vw, 1.0625rem);
  line-height:1.75;
  color:var(--encre);
  background:var(--blanc);
  -webkit-font-smoothing:antialiased;
}

/* ré-affirmation typo : le template Wandau style les balises nues
   avant nous (les :where + :not(.mdt-footer *) protègent le footer
   inclus dans <main> sans gonfler la spécificité) */
.premium-boutique :where(p:not(.mdt-footer *)){
  font-family:var(--f-corps);
  font-weight:300;
  line-height:1.75;
  color:var(--encre);
  margin:0;
}
.premium-boutique :where(h1,h2,h3){
  font-family:var(--f-titre);
  text-transform:none;
  margin:0;
}
.premium-boutique :where(figure){ margin:0; }
.premium-boutique img{ display:block; max-width:100%; height:auto; }
.premium-boutique :where(a:not(.mdt-footer *)){ color:inherit; }
.premium-boutique :focus-visible{
  outline:2px solid var(--laiton);
  outline-offset:4px;
  border-radius:2px;
}
.premium-boutique ::selection{ background:var(--sauge); color:var(--blanc); }

.premium-boutique :where(.container:not(.mdt-footer *)){
  width:min(var(--maxw), 100% - 2*var(--gutter));
  max-width:none;
  margin-inline:auto;
  padding-inline:0;
}

/* ---------- Texture florale légère (charte, opacité ≤ .1) ---------- */
.premium-boutique .floral{position:relative}
.premium-boutique .floral::before{
  content:"";
  position:absolute;inset:0;
  background:url("../../assets-premium-lp/wallpaper-tara-green.jpg") center/420px repeat;
  opacity:.07;
  pointer-events:none;
}
.premium-boutique .floral > *{position:relative}

/* ---------- Filet laiton & motif block print (CSS pur) ---------- */
.premium-boutique .filet{
  display:flex;align-items:center;gap:1.25rem;
  margin:clamp(2rem,5vw,3.5rem) auto;
  max-width:420px;
}
.premium-boutique .filet::before,
.premium-boutique .filet::after{
  content:"";flex:1;height:1px;background:var(--laiton);opacity:.6;
}
.premium-boutique .filet span{
  width:9px;height:9px;
  background:var(--laiton);
  transform:rotate(45deg);
  flex:none;
}
.premium-boutique .blockprint-row{
  height:14px;
  background-image:
    radial-gradient(circle 2px at 50% 50%, var(--laiton) 98%, transparent),
    radial-gradient(circle 1px at 50% 50%, var(--rose) 98%, transparent);
  background-size:28px 14px, 28px 14px;
  background-position:0 0, 14px 0;
  opacity:.55;
}

/* ============================================================
   Hero éditorial — la maison qu'on visite
   ============================================================ */
.premium-boutique .hero{
  padding-block:clamp(3.5rem,8vw,6.5rem) 0;
  background:var(--blanc);
}
.premium-boutique .hero-head{
  max-width:62ch;
}
.premium-boutique .eyebrow{
  display:inline-flex;align-items:center;gap:.9rem;
  font-family:var(--f-corps);
  font-size:.75rem !important;
  font-weight:500;
  letter-spacing:.32em !important;
  text-transform:uppercase;
  color:var(--laiton);
  margin-bottom:1.5rem;
}
.premium-boutique .eyebrow::before{
  content:"";width:3rem;height:1px;background:var(--laiton);
}
.premium-boutique .hero h1{
  font-family:var(--f-titre);
  font-weight:500 !important;
  font-size:clamp(2.6rem, 1.8rem + 4.2vw, 5.25rem);
  line-height:1.04;
  letter-spacing:-.01em;
  color:var(--terracotta) !important;
}
.premium-boutique .hero h1 .ligne2{
  display:block;
  font-style:italic;
  font-weight:400;
  color:var(--encre);
}

/* Récit en exergue littéraire — colonne unique :
   exergue → devanture verte → suite (retour client) */
.premium-boutique .recit{
  max-width:48rem;
  margin:clamp(2.5rem,6vw,4.5rem) auto 0;
}
.premium-boutique .recit-lead{
  font-family:var(--f-titre);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.35rem, 1.15rem + 1vw, 1.9rem);
  line-height:1.5;
  color:var(--encre);
}
.premium-boutique .recit-lead::first-letter{
  font-family:var(--f-titre);
  font-style:normal;
  float:left;
  font-size:3.2em;
  line-height:.82;
  padding-right:.12em;
  color:var(--terracotta);
}
.premium-boutique .recit-suite{
  max-width:46ch;
  margin-inline:auto;
  border-left:1px solid var(--laiton);
  padding-left:clamp(1.25rem,2.5vw,2rem);
  color:color-mix(in srgb, var(--encre) 86%, var(--blanc));
}

/* double-bordure laiton décalée */
.premium-boutique .double-bordure{position:relative}
.premium-boutique .double-bordure::before{
  content:"";
  position:absolute;
  inset:0;
  transform:translate(10px,10px);
  border:1px solid var(--laiton);
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
}
/* Devanture verte de la maison, au cœur du récit (retour client) */
.premium-boutique .hero-devanture{
  max-width:34rem;
  margin:clamp(2rem,4.5vw,3.2rem) auto;
}
.premium-boutique .hero-devanture .cadre{overflow:hidden}
.premium-boutique .hero-devanture img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
}
.premium-boutique .hero-devanture figcaption,
.premium-boutique .legende-libre{
  font-size:.8125rem;
  letter-spacing:.04em;
  margin-top:.9rem;
  color:color-mix(in srgb, var(--encre) 70%, var(--blanc));
}
.premium-boutique .legende-libre .main{
  font-family:var(--f-main);
  font-weight:400;
  font-size:1.35rem;
  color:var(--laiton);
  display:block;
  line-height:1.1;
}

/* ============================================================
   Galerie éditoriale — les 6 univers, pièces accrochées
   ============================================================ */
.premium-boutique .galerie{
  padding-block:clamp(4rem,9vw,7.5rem);
  background:var(--sable);
}
.premium-boutique .galerie-titre{
  text-align:center;
  max-width:36ch;
  margin-inline:auto;
  margin-bottom:clamp(3rem,7vw,5.5rem);
}
.premium-boutique .surtitre{
  font-family:var(--f-main);
  font-weight:400;
  font-size:clamp(1.4rem,1.2rem + 1vw,2rem);
  color:var(--laiton);
  display:block;
  margin-bottom:.5rem;
}
.premium-boutique .galerie-titre h2{
  font-family:var(--f-titre);
  font-weight:500 !important;
  font-size:clamp(1.9rem, 1.4rem + 2.4vw, 3.4rem);
  line-height:1.12;
  color:var(--terracotta) !important;
}

.premium-boutique .murs{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1.5rem,3.5vw,3rem) clamp(1rem,3vw,2.5rem);
}

/* Une « pièce » accrochée */
.premium-boutique .piece{margin:0;position:relative}
.premium-boutique .piece .cadre{
  position:relative;
  overflow:hidden;
  background:var(--encre);
}
.premium-boutique .piece .cadre img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.6s var(--ease);
}
.premium-boutique .piece:hover .cadre img{transform:scale(1.06)}
.premium-boutique .piece .cadre::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to top, color-mix(in srgb, var(--encre) 28%, transparent), transparent 45%);
  opacity:0;
  transition:opacity .8s var(--ease);
  pointer-events:none;
}
.premium-boutique .piece:hover .cadre::after{opacity:1}

.premium-boutique .piece figcaption{
  margin-top:1.1rem;
  transition:transform .8s var(--ease);
}
.premium-boutique .piece:hover figcaption{transform:translateX(8px)}
.premium-boutique .piece .num{
  font-family:var(--f-main);
  font-weight:400;
  font-size:1.75rem;
  line-height:1;
  color:var(--laiton);
  display:inline-block;
  margin-right:.5rem;
  vertical-align:baseline;
}
.premium-boutique .piece h3{
  display:inline;
  font-family:var(--f-titre);
  font-weight:500 !important;
  font-size:clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  color:var(--terracotta) !important;
}
.premium-boutique .piece p{
  margin-top:.35rem;
  max-width:38ch;
  font-size:.95rem;
  color:color-mix(in srgb, var(--encre) 82%, var(--blanc));
}

/* formats variés */
.premium-boutique .cadre--arche{border-radius:999px 999px 0 0}
.premium-boutique .cadre--portrait img{aspect-ratio:3/4}
.premium-boutique .cadre--paysage img{aspect-ratio:16/10}
.premium-boutique .cadre--arche img{aspect-ratio:3/4.1}

/* accrochage asymétrique */
.premium-boutique .piece--01{grid-column:1 / span 5;grid-row:1}
.premium-boutique .piece--02{grid-column:7 / span 6;grid-row:1;margin-top:clamp(3rem,8vw,7rem)}
.premium-boutique .piece--interlude{
  grid-column:2 / span 4;grid-row:2;
  margin-top:clamp(-2rem,-3vw,-3.5rem); /* chevauchement léger */
  z-index:2;
}
.premium-boutique .piece--03{grid-column:7 / span 5;grid-row:2;margin-top:clamp(1.5rem,4vw,3rem)}
.premium-boutique .piece--04{grid-column:1 / span 5;grid-row:3;margin-top:clamp(1rem,3vw,2.5rem)}
.premium-boutique .piece--05{grid-column:6 / span 7;grid-row:3;margin-top:clamp(4rem,9vw,8rem)}
.premium-boutique .piece--06{grid-column:3 / span 5;grid-row:4;margin-top:clamp(1.5rem,4vw,3rem)}
.premium-boutique .piece--accent{
  grid-column:9 / span 3;grid-row:4;
  align-self:end;
  margin-bottom:clamp(1rem,3vw,2.5rem);
  z-index:2;
}
.premium-boutique .piece--accent .cadre{box-shadow:0 18px 40px -22px color-mix(in srgb, var(--encre) 45%, transparent)}
.premium-boutique .piece--accent img{aspect-ratio:1/1}

/* légende d'interlude (photo d'ambiance sans univers) */
.premium-boutique .piece--interlude figcaption,
.premium-boutique .piece--accent figcaption{
  font-size:.8125rem;
  color:color-mix(in srgb, var(--encre) 68%, var(--blanc));
}
.premium-boutique .piece--interlude .main,
.premium-boutique .piece--accent .main{
  font-family:var(--f-main);
  font-weight:400;
  font-size:1.3rem;
  color:var(--laiton);
  display:block;line-height:1.15;
}

/* ============================================================
   Bande artisanat — immersion block print
   ============================================================ */
.premium-boutique .artisanat{
  position:relative;
  isolation:isolate;
  padding-block:clamp(5rem,11vw,9rem);
  color:var(--blanc);
  text-align:center;
  overflow:hidden;
}
.premium-boutique .artisanat .fond{
  position:absolute;inset:0;z-index:-2;
}
.premium-boutique .artisanat .fond img{
  width:100%;height:100%;object-fit:cover;
}
.premium-boutique .artisanat::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb, var(--sauge) 84%, var(--encre));
  opacity:.92;
}
.premium-boutique .artisanat .container{max-width:62rem}
.premium-boutique .artisanat .surtitre{color:var(--sable)}
.premium-boutique .artisanat h2{
  font-family:var(--f-titre);
  font-weight:500 !important;
  font-size:clamp(1.8rem, 1.3rem + 2.4vw, 3.2rem);
  line-height:1.15;
  margin-bottom:1.75rem;
  color:var(--blanc) !important;
}
.premium-boutique .artisanat p{
  max-width:64ch;
  margin-inline:auto;
  font-size:clamp(1rem, .95rem + .35vw, 1.15rem);
  line-height:1.85;
  color:color-mix(in srgb, var(--blanc) 94%, var(--sauge));
}
.premium-boutique .artisanat .filet::before,
.premium-boutique .artisanat .filet::after{background:var(--sable)}
.premium-boutique .artisanat .filet span{background:var(--laiton)}

/* ============================================================
   Finale — l'invitation calligraphiée
   ============================================================ */
.premium-boutique .invitation{
  padding-block:clamp(4.5rem,10vw,8rem);
  background:var(--blanc);
  text-align:center;
}
.premium-boutique .invitation .carte{
  position:relative;
  max-width:46rem;
  margin-inline:auto;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,5vw,4rem);
  background:var(--sable);
  border:1px solid color-mix(in srgb, var(--laiton) 55%, transparent);
}
.premium-boutique .invitation .carte.double-bordure::before{
  z-index:0;
  transform:translate(10px,10px);
}
.premium-boutique .invitation .carte > *{position:relative;z-index:1}
.premium-boutique .invitation .main-titre{
  font-family:var(--f-main);
  font-weight:400;
  font-size:clamp(2.2rem, 1.6rem + 3vw, 3.8rem);
  line-height:1.05;
  color:var(--terracotta);
  display:block;
  margin-bottom:1.75rem;
}
.premium-boutique .invitation p{
  max-width:56ch;
  margin-inline:auto;
  margin-bottom:1.25rem;
}
.premium-boutique .invitation strong{
  font-weight:500;
  color:var(--terracotta);
}
.premium-boutique .btn{
  display:inline-block;
  margin-top:1.25rem;
  padding:1rem 2.5rem;
  font-family:var(--f-corps);
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--blanc);
  background:var(--terracotta);
  border:1px solid var(--terracotta);
  border-radius:999px;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.premium-boutique .btn:hover{
  background:transparent;
  color:var(--terracotta);
}

/* ============================================================
   Reveals au scroll
   ============================================================ */
.premium-boutique .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.premium-boutique .reveal.is-visible{
  opacity:1;
  transform:none;
}
.premium-boutique .reveal[data-delay="1"]{transition-delay:.12s}
.premium-boutique .reveal[data-delay="2"]{transition-delay:.24s}
.premium-boutique .reveal[data-delay="3"]{transition-delay:.36s}
@media (prefers-reduced-motion: reduce){
  .premium-boutique .reveal{opacity:1;transform:none;transition:none}
  .premium-boutique .piece .cadre img,
  .premium-boutique .piece figcaption,
  .premium-boutique .btn{transition:none}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px){
  .premium-boutique .recit-suite{max-width:60ch}
  .premium-boutique .murs{grid-template-columns:repeat(6,1fr)}
  .premium-boutique .piece--01{grid-column:1 / span 5;grid-row:auto}
  .premium-boutique .piece--02{grid-column:2 / span 5;grid-row:auto;margin-top:0}
  .premium-boutique .piece--interlude{grid-column:1 / span 4;grid-row:auto;margin-top:0}
  .premium-boutique .piece--03{grid-column:2 / span 5;grid-row:auto;margin-top:0}
  .premium-boutique .piece--04{grid-column:1 / span 5;grid-row:auto;margin-top:0}
  .premium-boutique .piece--05{grid-column:1 / span 6;grid-row:auto;margin-top:0}
  .premium-boutique .piece--06{grid-column:1 / span 5;grid-row:auto;margin-top:0}
  .premium-boutique .piece--accent{grid-column:3 / span 4;grid-row:auto;margin-bottom:0}
}
@media (max-width: 560px){
  .premium-boutique .murs{grid-template-columns:1fr}
  .premium-boutique .piece--01,
  .premium-boutique .piece--02,
  .premium-boutique .piece--interlude,
  .premium-boutique .piece--03,
  .premium-boutique .piece--04,
  .premium-boutique .piece--05,
  .premium-boutique .piece--06,
  .premium-boutique .piece--accent{grid-column:1}
}

/* Contraste (revue expert 12/06) */
.premium-boutique .eyebrow{color:#8A6A30}
.premium-boutique .galerie .surtitre{color:#8A6A30}