/* ==========================================================================
   Boutique — "petit site frère" du portfolio (oct. 2026)
   En-tête avec emplacement logo + nom de marque, image d'ouverture,
   grille de projets sur toute la largeur, galerie au clic.
   S'appuie sur les couleurs et polices de style.css.
   ========================================================================== */
body.boutique{ background: var(--bg); }

/* En-tête */
.b-header{
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgba(248,245,239,.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.b-header-inner{
  padding: 0 clamp(16px, 3vw, 40px); height: 78px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}

/* Emplacement de marque : pastille logo + nom + sous-titre */
.b-brand{ display:flex; align-items:center; gap: 14px; text-decoration:none; color: var(--ink); min-width:0; }
.b-brand-mark{
  flex-shrink:0; width: 50px; height: 50px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border: 1.5px dashed var(--accent-soft); background: rgba(169,137,90,.07);
}
.b-brand-mark-ph{ font-family: var(--sans); font-size: 9.5px; letter-spacing:.18em; text-transform: uppercase; color: var(--accent-soft); }
.b-brand-mark.has-logo{ border: 0; background: none; border-radius: 0; width: auto; max-width: 64px; }
.b-brand-mark.has-logo img{ display:block; max-height: 50px; width:auto; }
.b-brand-text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.b-brand-name{
  font-family: var(--serif); font-size: 23px; letter-spacing:.02em; color: var(--ink-faint); font-style: italic;
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
}
.b-brand.has-name .b-brand-name{ color: var(--ink); font-style: normal; }
.b-brand-sub{ margin-top: 4px; font-family: var(--sans); font-size: 10px; letter-spacing:.2em; text-transform: uppercase; color: var(--ink-soft); }

.b-nav{ display:flex; align-items:center; gap: 22px; flex-shrink:0; }
.b-nav a{ font-size: 12.5px; letter-spacing:.08em; text-transform: uppercase; color: var(--ink); text-decoration:none; white-space:nowrap; }
.b-nav a:hover{ color: var(--accent); }
@media (max-width: 720px){
  .b-header-inner{ height: 66px; }
  .b-brand{ gap: 10px; }
  .b-brand-mark{ width: 40px; height: 40px; }
  .b-brand-name{ font-size: 16px; }
  .b-brand-sub{ font-size: 8.5px; letter-spacing:.14em; }
  .b-contact, .b-long{ display:none; }
  .b-nav{ gap: 12px; }
  .b-nav a{ font-size: 11px; letter-spacing:.04em; }
}

/* Page d'accueil de la boutique : une grande image plein écran par série */
.b-series{
  position: relative; display:flex; align-items:flex-end;
  min-height: 100vh; min-height: 100svh;
  background-size: cover; background-position: center 55%; background-repeat: no-repeat;
  color:#fff; text-decoration:none; overflow:hidden;
}
.b-series::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(18,14,12,.08) 0%, rgba(18,14,12,.18) 45%, rgba(18,14,12,.78) 100%);
  transition: background .6s ease;
}
.b-series:hover::before{ background: linear-gradient(180deg, rgba(18,14,12,.12) 0%, rgba(18,14,12,.28) 45%, rgba(18,14,12,.84) 100%); }
.b-series-text{ position:relative; display:flex; flex-direction:column; width:100%; padding: 0 clamp(16px, 4vw, 64px) clamp(56px, 9vh, 110px); }
.b-series .eyebrow{ color: rgba(255,255,255,.72); margin-bottom: 14px; }
.b-series-title{ font-family: var(--serif); font-size: clamp(28px, 3.9vw, 54px); line-height: 1.1; max-width: 20ch; }
.b-series-sub{ margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2vw, 26px); color: rgba(255,255,255,.86); }
.b-series-cta{
  margin-top: 30px; align-self:flex-start;
  font-family: var(--sans); font-size: 12.5px; letter-spacing:.14em; text-transform: uppercase; font-weight:600;
  padding: 13px 22px; border: 1px solid rgba(255,255,255,.75); border-radius: 999px;
  transition: background .3s ease, color .3s ease;
}
.b-series:hover .b-series-cta{ background:#fff; color: var(--ink); }

/* Page d'une série : titre */
.b-series-head{ text-align:center; padding: calc(78px + clamp(48px, 9vh, 96px)) 16px 10px; }
.b-series-head .eyebrow{ display:block; margin-bottom: 14px; }
.b-series-head h1{ font-size: clamp(28px, 3.4vw, 44px); line-height:1.12; margin: 0 auto 14px; max-width: 24ch; }
.b-series-head-sub{ font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2vw, 24px); color: var(--ink-soft); margin: 0; }
.b-series-head-line{ display:block; width: 54px; height:1px; background: var(--accent); margin: 30px auto 0; }

/* Page d'une série : créations alternées gauche / droite */
.b-flow{ max-width: 1520px; margin: 0 auto; padding: 30px clamp(16px, 3vw, 48px) 10px; }
.piece{
  display:grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 80px); align-items: center;
  padding: clamp(40px, 7vh, 80px) 0;
  opacity: 0; transform: translateY(50px);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.piece.is-in{ opacity: 1; transform: none; }
.piece.is-flip{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); }
.piece.is-flip .piece-media{ order: 2; justify-self: start; }
/* Taille de l'image dans la page (réglée dans l'outil, par création) */
.piece.size-l{ grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
.piece.size-l.is-flip{ grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); }
.piece.size-xl{ grid-template-columns: minmax(0, 3.4fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); }
.piece.size-xl.is-flip{ grid-template-columns: minmax(0, 1fr) minmax(0, 3.4fr); }
.piece.size-full, .piece.size-full.is-flip{ grid-template-columns: minmax(0, 1fr); gap: 26px; }
.piece.size-full .piece-media{
  order: 0; justify-self: start;
  width: min(100vw, calc(90vh * var(--r, 1.25)));
  margin-left: calc((100% - min(100vw, calc(90vh * var(--r, 1.25)))) / 2); /* centré, peut déborder jusqu'aux bords de l'écran */
}
.piece.size-full .piece-media{ border-radius: 0; }
body.boutique main{ overflow-x: clip; }
.piece.size-full .piece-text, .piece.size-full.is-flip .piece-text{ justify-self: center; text-align: center; max-width: 60ch; }
.piece.size-full .piece-ask{ margin-left: auto; margin-right: auto; }
.piece-media{
  position: relative; display:block; width:100%; padding:0; border:0; background:#1b1612; cursor: zoom-in;
  aspect-ratio: var(--r, 1.25); width: min(100%, calc(84vh * var(--r, 1.25))); justify-self: end; /* photo en hauteur : collée côté texte */
  border-radius: var(--radius); overflow:hidden;
  box-shadow: 0 30px 60px -30px rgba(30,20,10,.45);
}
.piece-media .ph-visual-real{
  position:absolute; inset:0; background-size: cover; background-position: center; background-repeat:no-repeat;
  opacity: 0; transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.piece-media .ph-visual-real.is-on{ opacity: 1; }
.piece-media:hover .ph-visual-real{ transform: scale(1.03); }
.piece-dots{ position:absolute; left: 16px; bottom: 18px; z-index:1; display:flex; gap:6px; }
.piece-dots i{ width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,.5); transition: all .4s ease; }
.piece-dots i.is-on{ background:#fff; width:18px; border-radius:4px; }
.piece-zoom{
  position:absolute; right: 14px; bottom: 14px; z-index:1;
  font-family: var(--sans); font-size: 11px; letter-spacing:.08em; text-transform: uppercase;
  color: #fff; background: rgba(18,14,12,.55); padding: 6px 11px; border-radius: 999px;
  opacity: .85; transition: opacity .3s ease;
}
.piece-media:hover .piece-zoom, .piece-media:focus-visible .piece-zoom{ opacity: 1; }
.piece-text{ max-width: 42ch; }
.piece.is-flip .piece-text{ justify-self: end; }
.piece-num{ font-family: var(--sans); font-size: 12px; letter-spacing: .2em; color: var(--accent); font-weight: 600; }
.piece-text h2{ font-size: clamp(26px, 2.7vw, 38px); line-height: 1.12; margin: 12px 0 14px; }
.piece-text p{ font-size: 16.5px; color: var(--ink-soft); margin: 0; }
.piece-ask{
  display:block; width: fit-content; margin-top: 22px; padding: 0 0 3px; border:0; border-bottom: 1px solid currentColor; background:none; cursor:pointer;
  font-family: var(--sans); font-size: 12.5px; letter-spacing:.06em; font-weight:600; color: var(--accent);
}
@media (max-width: 860px){
  .piece, .piece.is-flip{ grid-template-columns: 1fr; gap: 20px; padding: 26px 0 38px; }
  .piece.is-flip .piece-media, .piece .piece-media{ order: 0; justify-self: center; }
  .piece.is-flip .piece-text{ justify-self: start; }
  .piece-zoom{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){ .piece{ opacity:1; transform:none; transition:none; } }

/* Fin de page */
.b-end{ text-align:center; padding: 70px 16px 90px; }
.b-end-title{ font-family: var(--serif); font-size: 22px; color: var(--ink); max-width: 34ch; margin: 0 auto 22px; }
.b-footer{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: 10px;
  padding: 26px clamp(16px, 3vw, 40px) 34px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-faint);
}
.b-footer a{ color: var(--ink-soft); text-decoration:none; }
.b-footer a:hover{ color: var(--accent); }

/* Boutons de fin de page : contact + Etsy */
.b-end-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap: 12px; }
.b-etsy{ position: relative; }
.b-etsy.is-soon{ opacity: .55; cursor: default; }
.b-etsy.is-soon:hover{ background: transparent; color: var(--ink); }
.b-etsy-soon{
  display:none; margin-left: 6px; font-size: 10px; letter-spacing:.12em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color:#fff;
}
.b-etsy.is-soon .b-etsy-soon{ display:inline-block; }

/* Fiche d'une création : description + détails pratiques */
.piece-details{ margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.piece-details > div{ display:flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.piece-details dt{ flex: 0 0 96px; color: var(--ink-faint); font-family: var(--sans); font-size: 11px; letter-spacing:.1em; text-transform: uppercase; padding-top: 2px; }
.piece-details dd{ margin:0; color: var(--ink-soft); }
.piece-details dd.is-todo{ color: var(--ink-faint); font-style: italic; }

/* Page d'une série "sur mesure" (une grande image + texte + contact) */
.b-custom{ max-width: 1240px; margin: 0 auto; padding: 20px clamp(16px, 3vw, 40px) 10px; display:grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: clamp(28px,5vw,72px); align-items:center; }
.b-custom-img{ width:100%; border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(30,20,10,.45); display:block; max-height: 82vh; object-fit: cover; }
.b-custom-text p{ font-size: 16.5px; color: var(--ink-soft); }
.b-custom-text .btn{ margin-top: 10px; }
@media (max-width: 860px){ .b-custom{ grid-template-columns: 1fr; } }

/* Téléphone : une seule colonne, quelle que soit la taille choisie */
@media (max-width: 860px){
  .b-flow .piece.piece.piece{ grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .b-flow .piece.piece:not(.size-full) .piece-text{ justify-self: start; text-align: left; }
}

/* Retour vers l'accueil du portfolio (à la place du logo de la marque, en attendant) */
.b-home{ display:flex; align-items:center; gap: 12px; text-decoration:none; color: var(--ink); min-width:0; }
.b-home-arrow{ font-size: 18px; color: var(--accent); transition: transform .3s ease; }
.b-home:hover .b-home-arrow{ transform: translateX(-4px); }
.b-home-text{ display:flex; flex-direction:column; line-height:1.15; }
.b-home .logo{ font-size: 16px; }
.b-home-sub{ margin-top: 4px; font-family: var(--sans); font-size: 10px; letter-spacing:.2em; text-transform: uppercase; color: var(--ink-soft); }
.b-home .logo{ white-space: nowrap; }
@media (max-width: 600px){ .b-home{ gap: 8px; } .b-home .logo{ font-size: 13px; letter-spacing: .12em; } .b-home-sub{ font-size: 9px; } }

/* ==========================================================================
   TÉLÉPHONE (nov. 2026) — l'accueil de la boutique montre les trois séries
   d'un coup (chacune occupe un tiers de l'écran, en bande paysage), et les
   photos des créations se feuillettent avec des flèches ou du doigt.
   L'affichage sur ordinateur ne change pas.
   ========================================================================== */
.piece-arrow{ display:none; }
@media (max-width: 760px){
  .b-series{
    min-height: 0; height: calc((100vh - 66px - 12px - 30px) / 3); height: calc((100svh - 66px - 12px - 30px) / 3); min-height: 160px;
    margin: 0 12px 10px; border-radius: 8px;
  }
  main > .b-series:first-child{ margin-top: 78px; }
  .b-series::before{ background: linear-gradient(180deg, rgba(18,14,12,0) 35%, rgba(18,14,12,.72) 100%); }
  .b-series-text{ padding: 0 14px 12px; }
  .b-series .eyebrow{ font-size: 8.5px; margin-bottom: 4px; }
  .b-series-title{ font-size: 17px; line-height: 1.2; max-width: none; }
  .b-series-cta{ margin-top: 7px; padding: 0 0 2px; border:0; border-bottom: 1px solid rgba(255,255,255,.6); border-radius:0; font-size: 9.5px; }

  /* flèches sur les photos d'une création */
  .piece-media{ touch-action: pan-y; }
  .piece-arrow{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:50%; z-index:2; width:34px; height:34px; margin-top:-17px;
    border-radius:50%; background: rgba(18,14,12,.42); color:#fff;
    font-size:20px; line-height:1; cursor:pointer;
  }
  .piece-arrow.prev{ left:8px; } .piece-arrow.next{ right:8px; }
}