/* =========================================================
   STYLES PROPRES À CHAQUE PAGE
   ========================================================= */

/* ================= ACCUEIL ================= */

/* Ancres : le header collant ne doit pas masquer le titre */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* 1. Ouverture : grande image, un seul appel à l'action */
.hero {
  position: relative;
  margin-inline: var(--gutter);
  height: calc(100svh - var(--header-h) - var(--announce-h) - var(--gutter));
  min-height: 520px;
  max-height: 1000px;
  overflow: hidden;
  background: var(--night);
  color: var(--paper);
}
.hero__img { position: absolute; inset: 0; }
.hero__img::after {
  content: "";
  position: absolute; inset: 0;
  /* voile progressif : le texte en bas reste lisible, le haut de l'image reste pur */
  background: linear-gradient(to top, rgba(20, 18, 16, 0.62) 0%, rgba(20, 18, 16, 0.2) 45%, rgba(20, 18, 16, 0.08) 100%);
}
/* Léger recul de l'image à l'arrivée (sans fondu : l'image s'affiche immédiatement) */
.hero__img img { width: 100%; height: 100%; object-fit: cover; animation: hero-in 2.4s var(--ease) both; }
@keyframes hero-in { from { transform: scale(1.04); } to { transform: none; } }
.hero__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-4) var(--space-3);
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  animation: fade-up 1s 0.15s var(--ease) both;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero__title { font-size: var(--fs-hero); line-height: 1.05; text-wrap: balance; }
.hero__text { max-width: 28rem; font-size: var(--fs-md); font-weight: 300; line-height: 1.7; opacity: 0.94; text-wrap: pretty; }
.hero .btn { margin-top: var(--space-1); min-width: 240px; }
@media (min-width: 1024px) {
  .hero__content { padding: var(--space-5) 8vw; gap: var(--space-3); }
}

/* Bloc 50/50 : image | panneau texte */
.split { display: grid; margin-inline: var(--gutter); }
.split__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-warm); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__panel {
  background: var(--paper-warm);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
}
.split__title { font-size: var(--fs-xl); line-height: 1.15; max-width: 22ch; text-wrap: balance; }
.split__text { max-width: var(--text-max); color: var(--ink-soft); font-size: var(--fs-md); font-weight: 300; line-height: 1.8; text-wrap: pretty; }
@media (min-width: 768px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split__media { aspect-ratio: auto; min-height: 640px; }
  .split__panel { padding: var(--space-5) 6vw; }
}

/* 8. Les six pièces */
.pieces { margin-block: var(--space-6); }
.pieces .grid-products { max-width: 1400px; margin-inline: auto; }
.pieces__foot { display: grid; gap: var(--space-3); justify-items: center; text-align: center; margin-top: var(--space-5); }
.grid-products[aria-busy="true"] { min-height: 60vh; }

/* ================= EN-TÊTE DE PAGE (collection, panier...) ================= */
.page-head {
  padding: var(--space-5) var(--gutter) var(--space-4);
  text-align: center;
  display: grid;
  gap: var(--space-1);
  justify-items: center;
}
.page-head h1 { font-size: var(--fs-xl); }
.page-head p { color: var(--ink-soft); }
.page-head__intro { max-width: 32rem; font-size: var(--fs-md); font-weight: 300; line-height: 1.8; text-wrap: balance; }
.collection .grid-products { max-width: 1400px; margin-inline: auto; }

/* ================= FICHE PRODUIT ================= */
/* minmax(0, …) : les colonnes ne s'élargissent jamais pour suivre la taille des photos
   (sur Safari, sans ça, la colonne photo grossit quand les grandes images se chargent : effet de « zoom ») */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr); }
.gallery, .pdp__info { min-width: 0; }

/* Galerie : carrousel horizontal sur mobile, images empilées sur ordinateur */
.gallery { position: relative; }
.gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: var(--paper-warm);
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; aspect-ratio: 4 / 5; overflow: hidden; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
/* 1re photo = la pièce seule : posée sur le fond chaud, comme dans les cartes */
.gallery__item--first img { object-fit: contain; padding: 8% 14%; mix-blend-mode: multiply; }
.gallery__dots {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 2px;
}
.gallery__dot { width: 28px; height: 28px; display: grid; place-items: center; }
.gallery__dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  transition: background-color var(--dur-fast);
}
.gallery__dot[aria-current="true"]::before { background: var(--ink); }

.pdp__info {
  padding: var(--space-4) var(--gutter) var(--space-5);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.breadcrumb { display: flex; gap: 8px; color: var(--ink-soft); font-size: var(--fs-xs); }
.breadcrumb a:hover { color: var(--ink); }
.pdp__title { font-size: var(--fs-xl); }
.pdp__category { color: var(--ink-soft); margin-top: 6px; }
.pdp__price { font-size: var(--fs-md); }
.pdp__desc { color: var(--ink-soft); line-height: 1.8; max-width: 30rem; }

.option { display: grid; gap: var(--space-1); }
.option__legend { display: flex; gap: 8px; font-size: var(--fs-xs); color: var(--ink-soft); letter-spacing: 0.06em; margin-bottom: 4px; }
.option__legend strong { font-weight: 400; color: var(--ink); }
.option__list { display: flex; flex-wrap: wrap; gap: 4px 2px; }

/* Épaisseurs : simple rangée de texte soulignée (comme les tailles de la maquette jelabacash) */
.ply {
  min-width: 44px; min-height: 44px;
  padding: 0 10px;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.ply:hover { color: var(--ink); }
.ply[aria-checked="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.option__legend .muted { margin-left: 6px; }
.pdp__colours { color: var(--ink-soft); }
.pdp__note { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.6; }
.pdp__question { justify-self: start; font-size: var(--fs-xs); min-height: 32px; display: inline-flex; align-items: center; }

.pdp__add { display: grid; gap: var(--space-1); }

/* Accordéons (Description, Composition, Livraison) */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 52px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 1rem; font-weight: 300; transition: transform var(--dur) var(--ease); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion__body { padding-bottom: var(--space-3); color: var(--ink-soft); line-height: 1.8; display: grid; gap: var(--space-1); }
.accordion__body ul { display: grid; gap: 4px; }
.accordion__body li::before { content: "— "; color: var(--stone-3); }

/* Barre « Commander » collée en bas de l'écran (mobile uniquement) */
.sticky-order {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}
.sticky-order.is-visible { transform: none; }
.sticky-order__name { min-width: 0; font-size: var(--fs-xs); line-height: 1.4; }
.sticky-order__name .muted { white-space: nowrap; }
.sticky-order .btn { padding-inline: var(--space-2); flex-shrink: 0; }

@media (min-width: 1024px) {
  .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: var(--gutter); gap: 0; }
  .gallery__track { flex-direction: column; overflow: visible; scroll-snap-type: none; gap: var(--gutter); background: none; }
  /* en colonne, la hauteur vient du format 4/5 et non d'une base de 100 % */
  .gallery__item { flex: none; width: 100%; background: var(--paper-warm); }
  .gallery__dots { display: none; }
  .pdp__info {
    position: sticky;
    top: calc(var(--header-h) + var(--space-3));
    align-self: start;
    padding: var(--space-5) 0 var(--space-4) 8vw;
    max-width: calc(30rem + 8vw);
  }
  .sticky-order { display: none; }
}

.related { margin-top: var(--space-6); }
.related .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .related .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Sur mobile on n'affiche que 2 suggestions pour garder une grille propre */
@media (max-width: 1023px) { .related .card:nth-child(3) { display: none; } }

.notice { padding: var(--space-6) var(--gutter); text-align: center; display: grid; gap: var(--space-3); justify-items: center; }
.notice__title { font-size: var(--fs-xl); text-wrap: balance; }
[data-product][aria-busy="true"] { min-height: 80vh; }


/* ================= CONTACT ================= */
.contact {
  display: grid;
  gap: var(--space-5);
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--space-5) var(--gutter) 0;
}
.contact__intro { display: grid; gap: var(--space-2); align-content: start; }
.contact__title { font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); line-height: 1.1; text-wrap: balance; }
.contact__lead { color: var(--ink-soft); font-size: var(--fs-md); font-weight: 300; line-height: 1.8; max-width: 26rem; }
.contact__aside { display: grid; gap: 8px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); max-width: 26rem; }
.contact__aside a { justify-self: start; font-size: var(--fs-md); }

.contact-form { display: grid; gap: var(--space-4); }
.contact-form[aria-busy="true"] { opacity: 0.7; transition: opacity var(--dur) var(--ease); }
.fields { display: grid; gap: var(--space-3) var(--space-3); }
@media (min-width: 640px) {
  .fields { grid-template-columns: 1fr 1fr; }
  .fields .field--full { grid-column: 1 / -1; }
}
.field--choices { display: grid; gap: 10px; }
.field__input--area { min-height: 140px; resize: vertical; line-height: 1.6; }
.field__input::placeholder { color: var(--ink-soft); opacity: 0.85; }

/* Choix en pastilles (objet, profil) */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast), background-color var(--dur-fast);
}
.pill:hover span { border-color: var(--stone-3); color: var(--ink); }
.pill input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.pill input:focus-visible + span { outline: 1px solid var(--eclipse); outline-offset: 3px; }
.field--error .pill span { border-color: var(--error); }

/* Case à cocher au trait fin */
.check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; cursor: pointer; color: var(--ink-soft); line-height: 1.6; }
.check input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: 2px 0 0;
  border: 1px solid var(--ink-soft);
  display: grid; place-items: center;
  cursor: pointer;
}
.check input::before { content: ""; width: 10px; height: 10px; background: var(--ink); transform: scale(0); transition: transform var(--dur-fast) var(--ease); }
.check input:checked::before { transform: scale(1); }
.check input:focus-visible { outline: 1px solid var(--eclipse); outline-offset: 3px; }

.contact-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.contact-form__send .btn { min-width: 200px; }
.contact-form__status { color: var(--error); font-size: var(--fs-sm); line-height: 1.6; max-width: 30rem; }
.contact-form__status:empty { display: none; }
.contact-form__status:focus { outline: none; }
.contact-form__privacy { line-height: 1.7; }

.contact-done { display: grid; gap: var(--space-3); justify-items: start; align-content: start; padding: var(--space-4); background: var(--paper-warm); }
.contact-done:focus { outline: none; }
.contact-done__title { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--ls-display); line-height: 1.4; max-width: 28rem; }

@media (min-width: 1024px) {
  .contact { grid-template-columns: 5fr 7fr; gap: 8vw; padding-top: var(--space-6); }
  .contact__intro { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}

/* ================= PAGES SIMPLES (mentions, confidentialité, 404) ================= */
.legal { max-width: 46rem; margin-inline: auto; padding: var(--space-5) var(--gutter) 0; }
.legal__title { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); line-height: 1.1; margin-bottom: var(--space-4); }
.legal__body { display: grid; gap: var(--space-4); }
.legal__body section { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.legal__body h2 { font-size: var(--fs-lg); }
.legal__body p { color: var(--ink-soft); font-size: var(--fs-md); font-weight: 300; line-height: 1.8; }
.legal__intro { color: var(--ink) !important; }
.legal__list { display: grid; grid-template-columns: minmax(0, 14rem) 1fr; gap: 10px var(--space-3); margin: 0; font-size: var(--fs-md); }
.legal__list dt { color: var(--ink-soft); font-weight: 300; }
.legal__list dd { margin: 0; }
@media (max-width: 539px) { .legal__list { grid-template-columns: 1fr; gap: 2px; } .legal__list dd { margin-bottom: 10px; } }
.pending { display: inline-block; padding: 0 8px; border: 1px dashed var(--eclipse); color: #7a5f22; font-size: var(--fs-sm); }
.notice--page { min-height: 50vh; align-content: center; }

/* ================= ACCUEIL — blocs repris de la maquette jelabacash ================= */

/* Bande des valeurs de la maison */
.values { padding: var(--space-5) var(--gutter) 0; text-align: center; }
.values__list {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  line-height: 2;
  max-width: 60rem;
  margin-inline: auto;
  text-wrap: balance;
}

/* Lien d'appel des blocs 50/50 */
.split__cta, .maison__cta {
  margin-top: var(--space-1);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-xs);
  justify-self: center;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.split__packshot { width: min(220px, 55%); aspect-ratio: 4 / 5; object-fit: contain; mix-blend-mode: multiply; margin-bottom: var(--space-2); }
.split__price { color: var(--ink-soft); }

/* Citation */
.quote { padding: var(--space-6) var(--gutter); text-align: center; }
.quote blockquote { margin: 0 auto; max-width: 46rem; display: grid; gap: var(--space-3); }
.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1rem + 2.4vw, 3rem);
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-wrap: balance;
}
.quote footer { color: var(--ink-soft); }

/* La maison (aperçu) */
.maison { display: grid; gap: var(--space-4); margin-inline: var(--gutter); }
.maison__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-warm); }
.maison__media img { width: 100%; height: 100%; object-fit: cover; }
.maison__text { display: grid; gap: var(--space-2); align-content: center; justify-items: start; max-width: var(--text-max); }
.maison__title { font-size: var(--fs-xl); line-height: 1.15; text-wrap: balance; }
.maison__body { color: var(--ink-soft); font-size: var(--fs-md); font-weight: 300; line-height: 1.8; }
.maison__cta { justify-self: start; }
@media (min-width: 768px) {
  .maison { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 8vw; align-items: center; }
  .maison__media { max-height: 82vh; }
}

/* Professionnels : une seule ligne discrète */
.pro-line {
  margin: var(--space-6) var(--gutter) 0;
  padding: var(--space-5) var(--space-3);
  background: var(--paper-warm);
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
}
.pro-line__text { max-width: 40rem; color: var(--ink-soft); font-size: var(--fs-md); font-weight: 300; line-height: 1.8; text-wrap: balance; }
.pro-line__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.pro-line__links a { min-height: 32px; display: inline-flex; align-items: center; }
@media (max-width: 539px) { .pro-line__links { flex-direction: column; align-items: center; } .pro-line__sep { display: none; } }

/* ================= LA MAISON (About us) : version minimaliste, blocs de la maquette jelabacash ================= */
.maison + .quote, .quote + .maison { margin-top: 0; }
.maison__body { display: grid; gap: var(--space-2); }
.maison__note { margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--line); color: var(--ink); }
@media (min-width: 768px) {
  .maison--reverse { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
  .maison--reverse .maison__media { order: 2; }
}
.quote__small { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem) !important; line-height: 1.5 !important; }
.about-close { max-width: 38rem; margin: 0 auto; padding: var(--space-5) var(--gutter) 0; display: grid; gap: var(--space-2); justify-items: center; text-align: center; }
.about-close h2 { font-family: var(--font-text); font-size: var(--fs-xs); letter-spacing: var(--ls-caps); }
.about-close__text { color: var(--ink-soft); font-size: var(--fs-md); font-weight: 300; line-height: 1.85; text-wrap: pretty; }
.about-close__signature { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: 0.06em; margin-top: var(--space-1); }

/* Deux univers : titre commun, puis un bloc photo + texte par personne */
.about-worlds-head { margin-top: var(--space-6); margin-bottom: var(--space-5); padding-inline: var(--gutter); }
.maison + .maison { margin-top: var(--space-6); }