@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&family=Jost:wght@300;400;500&display=swap');

/* =====================================================================
   Brief Parfum — v1.3
   La mise en page ne dépend plus des container queries : le JavaScript
   mesure la largeur réelle et pose .is-w-mid (≥700px) ou .is-w-wide
   (≥1000px). Ajout d'un blindage contre les largeurs imposées par le thème.
   Palette : nuit #14101B · ambre #C9A227 · poivre #C8867F · vélin #EDE7DC
   ===================================================================== */

#brief-parfum {
  --bp-nuit: #14101b;
  --bp-encre: #1c1626;
  --bp-encre-2: #241d30;
  --bp-ambre: #c9a227;
  --bp-ambre-clair: #efd693;
  --bp-poivre: #c8867f;
  --bp-velin: #ede7dc;
  --bp-fumee: #8a8194;
  --bp-ligne: rgba(237, 231, 220, 0.14);
  --bp-serif: 'Bodoni Moda', 'Didot', Georgia, serif;
  --bp-sans: 'Jost', 'Futura', 'Helvetica Neue', Arial, sans-serif;

  display: block;
  width: 100%;
  background: radial-gradient(120% 80% at 82% -10%, #2a2036 0%, var(--bp-nuit) 55%);
  color: var(--bp-velin);
  font-family: var(--bp-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  scroll-margin-top: 24px;
  overflow-wrap: break-word;
}

#brief-parfum *,
#brief-parfum *::before,
#brief-parfum *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------
   BLINDAGE : neutralise les largeurs, flottements et colonnes que
   certains thèmes appliquent à tout ce qui se trouve dans le contenu.
   Sélecteurs par ID : ils l'emportent sur les règles de thème classiques.
   ------------------------------------------------------------------- */
#brief-parfum .bp,
#brief-parfum .bp-main,
#brief-parfum .bp-form,
#brief-parfum .bp-step,
#brief-parfum .bp-fields,
#brief-parfum .bp-field,
#brief-parfum .bp-chips,
#brief-parfum .bp-nav,
#brief-parfum .bp-done {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  float: none;
  clear: none;
  columns: auto;
  margin-left: 0;
  margin-right: 0;
  position: static;
}

/* Élargissement plein écran (shortcode : largeur="plein") */
#brief-parfum.is-fullbleed {
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---------- Ossature ---------- */
.bp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1180px;
  margin: 0 auto;
}
#brief-parfum .bp { max-width: 1180px; margin: 0 auto; }

#brief-parfum.is-w-wide .bp { grid-template-columns: 300px minmax(0, 1fr); }
#brief-parfum.is-w-wide .bp-rail { display: block; }
#brief-parfum.is-w-wide .bp-mobar { display: none; }
#brief-parfum.is-w-wide .bp-main { padding: 64px 48px 96px 72px; }

#brief-parfum.is-w-mid .bp-main { padding: 52px 36px 84px; }
#brief-parfum.is-w-mid .bp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#brief-parfum.is-w-mid .bp-field { grid-column: 1 / -1; }
#brief-parfum.is-w-mid .bp-field--half { grid-column: span 1; }
#brief-parfum.is-w-mid .bp-title { font-size: 40px; }
#brief-parfum.is-w-wide .bp-title { font-size: 48px; }

/* ---------- Rail : flacon + sommaire ---------- */
.bp-rail {
  display: none;
  min-width: 0;
  padding: 60px 32px 60px 40px;
  border-right: 1px solid var(--bp-ligne);
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow: hidden auto;
  scrollbar-width: none;
}
.bp-rail::-webkit-scrollbar { display: none; }

.bp-rail__mark {
  margin: 0 0 26px;
  font-family: var(--bp-serif);
  font-size: 25px;
  letter-spacing: 0.04em;
}

.bp-flacon { width: 88px; height: auto; display: block; margin: 0 auto; }
.bp-flacon__cap { fill: var(--bp-encre-2); stroke: var(--bp-ligne); stroke-width: 1; }
.bp-flacon__neck { fill: var(--bp-encre-2); }
.bp-flacon__collar { fill: none; stroke: rgba(201, 162, 39, 0.55); stroke-width: 1.2; }
.bp-flacon__glass { fill: none; stroke: rgba(237, 231, 220, 0.28); stroke-width: 1.2; }
.bp-flacon__shine { stroke: rgba(237, 231, 220, 0.16); stroke-width: 3; stroke-linecap: round; }
.bp-flacon__liquid,
.bp-flacon__waveY { transition: y 900ms cubic-bezier(.22,.7,.2,1), transform 900ms cubic-bezier(.22,.7,.2,1); }
.bp-flacon__wave { animation: bp-drift 7s linear infinite; }

@keyframes bp-drift { from { transform: translateX(0); } to { transform: translateX(80px); } }

.bp-rail__pct {
  margin: 16px 0 34px;
  text-align: center;
  font-family: var(--bp-serif);
  font-size: 28px;
  color: var(--bp-ambre-clair);
}
.bp-rail__pctsign { font-size: 14px; margin-left: 2px; opacity: 0.7; }

.bp-rail__list { list-style: none; margin: 0; padding: 0; counter-reset: bp; }
.bp-rail__item { counter-increment: bp; margin: 0; }
.bp-rail__item::before,
.bp-rail__item::marker { content: none; }
.bp-rail__item button {
  display: block;
  width: 100%;
  padding: 7px 0 7px 26px;
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  color: var(--bp-fumee);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  transition: color 220ms ease;
}
.bp-rail__item button::before {
  content: counter(bp, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.55;
}
.bp-rail__item button:hover { color: var(--bp-velin); background: none; }
.bp-rail__item.is-past button { color: rgba(237, 231, 220, 0.62); }
.bp-rail__item.is-current button { color: var(--bp-ambre-clair); }
.bp-rail__item.is-current button::before { opacity: 1; }

/* ---------- Colonne principale ---------- */
.bp-main { padding: 36px 20px 72px; }

.bp-mobar { height: 2px; background: var(--bp-ligne); margin-bottom: 32px; }
.bp-mobar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--bp-ambre), var(--bp-ambre-clair));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 700ms cubic-bezier(.22,.7,.2,1);
}

#brief-parfum .bp-pot { position: absolute; left: -9999px; opacity: 0; height: 0; }

.bp-eyebrow {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bp-ambre);
}

.bp-title {
  margin: 0 0 14px;
  font-family: var(--bp-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--bp-velin);
  hyphens: manual;          /* plus de coupure « connais-sance » */
  overflow-wrap: break-word;
}

.bp-lead {
  margin: 0 0 44px;
  max-width: 46ch;
  color: rgba(237, 231, 220, 0.66);
  font-size: 16px;
}

/* ---------- Champs ---------- */
.bp-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px 28px;
}

.bp-label {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 400;
  color: var(--bp-velin);
  text-transform: none;
  letter-spacing: normal;
}

.bp-req {
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bp-poivre);
  white-space: nowrap;
  vertical-align: 2px;
}

.bp-help {
  margin: -4px 0 12px;
  font-size: 13.5px;
  color: var(--bp-fumee);
  max-width: 52ch;
}

#brief-parfum .bp-input {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 10px 2px;
  background: transparent;
  background-image: none;
  border: 0;
  border-bottom: 1px solid var(--bp-ligne);
  border-radius: 0;
  box-shadow: none;
  color: var(--bp-velin);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 260ms ease, box-shadow 260ms ease;
  resize: vertical;
}
#brief-parfum .bp-input::placeholder { color: rgba(138, 129, 148, 0.75); }
#brief-parfum .bp-input:hover { border-bottom-color: rgba(237, 231, 220, 0.32); }
#brief-parfum .bp-input:focus {
  outline: none;
  background: transparent;
  border-bottom-color: var(--bp-ambre);
  box-shadow: 0 1px 0 0 var(--bp-ambre);
}

/* ---------- Choix ---------- */
.bp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
#brief-parfum .bp-chip__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

#brief-parfum .bp-chip {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--bp-ligne);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.35;
  color: rgba(237, 231, 220, 0.8);
  cursor: pointer;
  user-select: none;
  text-transform: none;
  transition: border-color 220ms ease, color 220ms ease, background-color 220ms ease, transform 220ms ease;
}
#brief-parfum .bp-chip > span { overflow-wrap: break-word; min-width: 0; }
#brief-parfum .bp-chip:hover { border-color: rgba(201, 162, 39, 0.6); color: var(--bp-velin); transform: translateY(-1px); }
#brief-parfum .bp-chip__input:checked + .bp-chip {
  background: linear-gradient(180deg, var(--bp-ambre-clair), var(--bp-ambre));
  border-color: transparent;
  color: #1a1409;
}
#brief-parfum .bp-chip__input:focus-visible + .bp-chip { outline: 2px solid var(--bp-ambre-clair); outline-offset: 3px; }

/* ---------- Erreurs ---------- */
.bp-error { margin: 8px 0 0; font-size: 13px; color: var(--bp-poivre); }
.bp-field.has-error .bp-input { border-bottom-color: var(--bp-poivre); }
.bp-field.has-error .bp-label { color: var(--bp-poivre); }

/* ---------- Navigation ---------- */
.bp-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--bp-ligne);
}
.bp-nav__count { margin: 0 auto 0 0; font-size: 13px; letter-spacing: 0.1em; color: var(--bp-fumee); }
.bp-nav [data-prev] { order: -1; }

#brief-parfum .bp-btn {
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bp-velin);
  color: var(--bp-nuit);
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease, transform 220ms ease, opacity 220ms ease;
}
#brief-parfum .bp-btn:hover { transform: translateY(-1px); background: var(--bp-velin); color: var(--bp-nuit); }
#brief-parfum .bp-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
#brief-parfum .bp-btn:focus-visible { outline: 2px solid var(--bp-ambre-clair); outline-offset: 3px; }

#brief-parfum .bp-btn--ghost { background: transparent; border-color: var(--bp-ligne); color: var(--bp-fumee); }
#brief-parfum .bp-btn--ghost:hover { background: transparent; border-color: rgba(237, 231, 220, 0.4); color: var(--bp-velin); }

#brief-parfum .bp-btn--send,
#brief-parfum .bp-btn--send:hover {
  background: linear-gradient(180deg, var(--bp-ambre-clair), var(--bp-ambre));
  color: #1a1409;
}

.bp-status { margin: 20px 0 0; font-size: 14px; color: var(--bp-fumee); }
.bp-status.is-error { color: var(--bp-poivre); }

/* ---------- Animations d'entrée ---------- */
.bp-step,
.bp-done { animation: bp-enter 620ms cubic-bezier(.22,.7,.2,1) both; }
.bp-step.is-in-back { animation-name: bp-enter-back; }

@keyframes bp-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes bp-enter-back {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}

.bp-step .bp-field { animation: bp-enter 560ms cubic-bezier(.22,.7,.2,1) both; }
.bp-step .bp-field:nth-child(1) { animation-delay: 60ms; }
.bp-step .bp-field:nth-child(2) { animation-delay: 110ms; }
.bp-step .bp-field:nth-child(3) { animation-delay: 160ms; }
.bp-step .bp-field:nth-child(4) { animation-delay: 210ms; }
.bp-step .bp-field:nth-child(5) { animation-delay: 260ms; }
.bp-step .bp-field:nth-child(6) { animation-delay: 310ms; }
.bp-step .bp-field:nth-child(7) { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  #brief-parfum *,
  #brief-parfum *::before,
  #brief-parfum *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}