/* ============================================================
   COLLECTION ÉLIXIRS v2 · 12/09/2026 — validée par Samy
   Une seule zone produit : le sélecteur transforme la vitrine,
   aucune fiche empilée. Ivoire = choix et achat ; noir = rupture
   (Coffret) ; chaque Signature teinte très subtilement la page.
   Visuels : packshots officiels dans leurs univers (assets Samy)
   + langage sensoriel de navigation (assets/elixirs/sensoriel/).
   Maquette d'origine : elixirs-proposition.html.

   POLISH 12/09/2026 (passe de finition) :
   · système typographique — 4 voix au lieu de 26 combinaisons ;
   · température par Signature sur TOUTE la page, pas seulement
     la vitrine : changer d'Élixir change l'atmosphère ;
   · chorégraphie atmosphère → produit → texte (prix et CTA ne
     disparaissent jamais) ;
   · continuité : plus de filets entre sections, rythme asymétrique,
     comparateur et Atelier fondus en une seule séquence.
   ============================================================ */

:root {
  --p-fond: #F4F0E8; --p-encre: #1A1611; --p-encre-2: rgba(26,22,17,.64);
  --p-or: #C9A24D; --p-or-fonce: #7A6228;  /* AA sur les ivoires (5,2:1) */
  --p-noir: #0A0704; --p-ivoire: #F7F2EA;
  --u-accent: #3F5E82; --u-teinte: #EDF1F4;

  /* ── Les quatre voix typographiques ───────────────────────
     DISPLAY (serif) : émotion — titre de page, nom de Signature,
     bénéfice. UI (sans) : compréhension, prix, action. EYEBROW :
     territoire. BODY : explication. Rien d'autre. */
  --t-display: clamp(31px, 8.6vw, 40px);
  --t-titre:   clamp(24px, 6.4vw, 29px);
  --t-sous:    23px;   /* = .v18-panneau__promesse de l'accueil */
  --t-nom:     20px;
  --t-ui:      15.5px; /* = corps de l'accueil, Inter 300 */
  --t-micro:   13px;
  --t-eyebrow: 11px;   /* = .v20-choix__mot de l'accueil */
  --e-eyebrow: .24em;
}

/* Le fond : ivoire chaud, matière papier — pas un blanc froid.
   Chaque Signature ne fait que réchauffer ou refroidir cette base
   d'un souffle : on la ressent plus qu'on ne la voit. */


/* Température de la page : très subtile, elle suit la Signature.
   Le fond, la teinte de vitrine et l'accent virent ensemble. */
.px-collection {
  background: var(--p-fond); color: var(--p-encre);
  transition: background-color 700ms ease;
}
.px-collection[data-sig="perle"]   { --p-fond:#F1F1EC; --u-teinte:#EAEFF1; --u-accent:#3F5E82; }
.px-collection[data-sig="velours"] { --p-fond:#F6EFE5; --u-teinte:#F5EBE0; --u-accent:#7F4E2E; }
.px-collection[data-sig="nectar"]  { --p-fond:#F7F1E1; --u-teinte:#F6EEDA; --u-accent:#7A5A14; }
.px-collection[data-sig="musc"]    { --p-fond:#F2EFEE; --u-teinte:#EFECEF; --u-accent:#5C5270; }

.p-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; min-height: 56px; padding: 0 26px;
  background: var(--p-or); color: #14100A; border: 0; border-radius: 2px;
  font-family: var(--f-sans); font-size: 13px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 260ms ease, transform 180ms ease;
}
/* La flèche avance de quelques pixels — rien d'autre. */
.p-cta::after {
  content: '→'; font-size: 15px; letter-spacing: 0;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
}
.p-cta:active { transform: scale(.988); background-color: #BD9642; }
.p-cta:active::after { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  .p-cta:hover { background-color: #D2AC59; }
  .p-cta:hover::after { transform: translateX(4px); }
}

/* ── 1 · TÊTE — le produit arrive dès le premier écran ─────── */
.p-tete { padding: 76px 24px 20px; text-align: center; }
.p-tete__eyebrow {
  font-family: var(--f-sans); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: var(--e-eyebrow); text-transform: uppercase; color: var(--p-or-fonce);
}
.p-tete__titre {
  margin: 12px 0 10px; font-family: var(--f-serif); font-weight: 400;
  font-size: var(--t-display); line-height: 1.08; letter-spacing: -.01em;
  color: var(--p-encre);
}
/* Le titre se compose : chaque ligne se dévoile derrière son masque. */
.p-tete__titre .l { display: block; overflow: hidden; }
.p-tete__titre .l > span {
  display: block;
  transform: translateY(105%);
  animation: v-lever 880ms cubic-bezier(.19,1,.22,1) forwards;
}
.p-tete__titre .l:nth-child(2) > span { animation-delay: 110ms; }
@keyframes v-lever { to { transform: none; } }
.p-tete__micro { margin: 0; font-family: var(--f-sans); font-weight: 400; font-size: var(--t-micro); color: var(--p-encre-2); }

/* ── 2 · SÉLECTEUR — quatre portes sensorielles, pas des boutons ── */
/* Une palette d'atmosphères, pas quatre cartes : les visuels se
   touchent, seul un cheveu de fond les sépare. Plus d'image, moins
   de composants — et la grille se lit comme un seul objet. */
.p-sel {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--p-fond); transition: background-color 700ms ease;
}
.p-sel__bt {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  min-height: 132px; width: 100%; padding: 13px 14px 12px; border: 0;
  overflow: hidden; isolation: isolate; cursor: pointer;
  background: none; text-align: left; -webkit-tap-highlight-color: transparent;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
}
.p-sel__bt img {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001); filter: saturate(.84) brightness(.93);
  transition: transform 600ms cubic-bezier(.22,.61,.36,1), filter 500ms ease;
}
.p-sel__bt::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(176deg, rgba(8,6,5,.6), rgba(8,6,5,.2) 46%, rgba(8,6,5,.6) 74%, rgba(8,6,5,.88) 100%);
  transition: background 420ms ease;
}
.p-sel__bt span { position: relative; z-index: 1; }
.p-sel__mot {
  font-family: var(--f-sans); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: var(--e-eyebrow); text-transform: uppercase;
  color: rgba(247,242,234,.82); text-shadow: 0 1px 8px rgba(0,0,0,.8);
  transition: color 420ms ease;
}
.p-sel__nom {
  margin-top: auto; font-family: var(--f-serif); font-size: var(--t-nom);
  color: #F7F2EA; text-shadow: 0 1px 12px rgba(0,0,0,.75);
}
/* L'état actif : la scène s'éclaircit et s'approche, le territoire
   passe à l'or. Évident sans être criard. */
.p-sel__bt[aria-pressed="true"] img { filter: none; }
/* Le choix se marque par la lumière et un filet d'or intérieur —
   pas par une bordure de bouton. */
.p-sel__bt[aria-pressed="true"]::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--p-or);
}
.p-sel__bt[aria-pressed="true"] img { transform: scale(1.06); }
.p-sel__bt[aria-pressed="true"] .p-sel__mot { color: var(--p-or); }
.p-sel__bt[aria-pressed="true"]::before {
  background: linear-gradient(176deg, rgba(8,6,5,.46), rgba(8,6,5,.04) 44%, rgba(8,6,5,.58) 74%, rgba(8,6,5,.9) 100%);
}
.p-sel__bt:active { transform: scale(.985); }
.p-sel__bt:focus-visible { outline: 1px solid var(--p-or); outline-offset: 2px; }

/* L'invitation : une ligne discrète, juste au-dessus des choix. */
.p-sel__invite {
  margin: 0; padding: 0 24px 12px; text-align: center;
  font-family: var(--f-sans); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: var(--e-eyebrow); text-transform: uppercase; color: var(--p-encre-2);
  transition: opacity 600ms ease;
}
.px-collection.a-choisi .p-sel__invite { opacity: .38; }

/* ── 3 · VITRINE — une scène, pas quatre composants ────────── */
.p-vitrine {
  position: relative; padding: 0 0 44px; background: var(--u-teinte);
  transition: background-color 700ms ease;
}
/* Le bas de la scène se fond dans l'ivoire de la page : la section
   suivante commence sans qu'aucune frontière ne se dessine. */
.p-vitrine::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 120px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--p-fond));
  transition: background 700ms ease;
}
.p-vitrine > * { position: relative; z-index: 1; }
.p-vitrine > *:not(.p-vitrine__cadre) { margin-inline: 24px; }
/* L'image ne se pose pas dans un cadre : elle émerge de l'univers.
   Son pied se dissout dans la teinte de la Signature. */
.p-vitrine__cadre { position: relative; overflow: hidden; }
.p-vitrine__cadre::after {
  content: ''; position: absolute; inset: auto 0 -1px 0; height: 22%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--u-teinte));
  transition: background 700ms ease;
}
.p-vitrine__cadre img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  transform: scale(1); opacity: 1;
  transition: opacity 420ms ease 90ms, transform 640ms cubic-bezier(.22,.61,.36,1) 90ms;
}
.p-vitrine__ident, .p-vitrine__vente {
  opacity: 1; transform: none; clip-path: inset(0 0 -14% 0);
  transition: opacity 340ms ease, transform 480ms cubic-bezier(.19,1,.22,1),
              clip-path 560ms cubic-bezier(.19,1,.22,1);
}
.p-vitrine__ident { transition-delay: 200ms; }
.p-vitrine__vente { transition-delay: 280ms; }
/* Pendant le changement : tout se retire vite, le prix et le CTA
   restent en place — on ne coupe jamais le chemin d'achat. */
.p-vitrine.chg .p-vitrine__cadre img {
  opacity: 0; transform: scale(1.03);
  transition: opacity 200ms ease, transform 0ms;
}
.p-vitrine.chg .p-vitrine__ident,
.p-vitrine.chg .p-vitrine__vente {
  opacity: 0; transform: translateY(9px); clip-path: inset(0 0 100% 0);
  transition-duration: 190ms; transition-delay: 0ms;
}

.p-vitrine__mot {
  display: block; margin-top: 20px;
  font-family: var(--f-sans); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: var(--e-eyebrow); text-transform: uppercase; color: var(--u-accent);
  transition: color 700ms ease;
}
.p-vitrine__nom {
  margin: 6px 0 10px; font-family: var(--f-serif); font-weight: 400;
  font-size: var(--t-display); line-height: 1.06; letter-spacing: -.012em;
  color: var(--p-encre);
}
.p-vitrine__benef {
  margin: 0 0 10px; font-family: var(--f-serif); font-weight: 400;
  font-size: var(--t-sous); line-height: 1.2; letter-spacing: -.005em;
  color: var(--p-encre);
}
.p-vitrine__desc {
  margin: 0 0 18px; font-family: var(--f-sans); font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--p-encre-2);
}
/* La preuve : une ligne, jamais trois blocs. */
.p-faits {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 22px;
  font-family: var(--f-sans); font-size: var(--t-micro); color: var(--p-encre-2);
}
.p-faits span { display: inline-flex; align-items: center; }
.p-faits span + span::before { content: '·'; margin-right: 12px; color: var(--u-accent); }
.p-faits strong { font-weight: 600; color: var(--p-encre); margin-right: 5px; }
.p-vitrine__achat { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.p-vitrine__prix { font-family: var(--f-serif); font-size: 26px; font-weight: 400; color: var(--p-encre); }
.p-vitrine__vol {
  font-family: var(--f-sans); font-size: var(--t-eyebrow); font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: var(--p-encre-2);
}
.p-vitrine__buy { width: calc(100% - 48px); box-sizing: border-box; }

.p-accordeons { margin-top: 22px; border-top: 1px solid rgba(28,23,18,.12); }
.p-accordeons details { border-bottom: 1px solid rgba(28,23,18,.12); }
.p-accordeons summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 50px; cursor: pointer; list-style: none;
  font-family: var(--f-sans); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--p-encre);
}
.p-accordeons summary::-webkit-details-marker { display: none; }
.p-accordeons summary::after { content: '+'; font-size: 17px; font-weight: 400; color: var(--p-or-fonce); }
.p-accordeons details[open] summary::after { content: '–'; }
.p-accordeons p { margin: 0 0 16px; font-family: var(--f-sans); font-weight: 300; font-size: var(--t-ui); line-height: 1.6; color: var(--p-encre-2); }
.p-vitrine__fiche {
  display: inline-block; margin-top: 18px;
  font-family: var(--f-sans); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--p-encre);
  text-decoration: underline; text-underline-offset: 4px;
}

/* ── 4 · DÉCIDER — comparateur et Atelier, une seule séquence ──
   « Voici les différences » → « rien ne vous correspond ? » →
   « créez la vôtre ». Pas deux sections indépendantes. */
.p-decider { padding: 8px 24px 30px; }
.p-decider__titre {
  margin: 0 0 18px; font-family: var(--f-serif); font-weight: 400;
  font-size: var(--t-titre); line-height: 1.14; letter-spacing: -.008em;
  color: var(--p-encre);
}
.p-comp__ligne {
  display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center;
  width: 100%; padding: 11px 0; border: 0; background: none; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 300ms ease;
}
.p-comp__ligne + .p-comp__ligne { border-top: 1px solid rgba(28,23,18,.09); }
.p-comp__ligne img { width: 52px; height: 52px; border-radius: 2px; object-fit: cover; }
.p-comp__nom { font-family: var(--f-serif); font-style: italic; font-size: var(--t-nom); color: var(--p-encre); }
.p-comp__mot {
  display: block; margin-top: 2px; font-family: var(--f-sans); font-size: 11.5px;
  font-weight: 600; letter-spacing: var(--e-eyebrow); text-transform: uppercase;
}
.p-comp__desc { display: block; margin-top: 2px; font-family: var(--f-sans); font-size: var(--t-micro); color: var(--p-encre-2); }
.p-comp__ligne:focus-visible { outline: 1px solid var(--p-or); outline-offset: 2px; }
/* L'Atelier prolonge la comparaison : un filet d'or, pas un cadre. */
.p-atelier {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(201,162,77,.45);
}
.p-atelier__titre {
  margin: 0 0 6px; font-family: var(--f-sans); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--p-or-fonce);
}
.p-atelier__texte { margin: 0 0 10px; font-family: var(--f-sans); font-weight: 300; font-size: var(--t-ui); line-height: 1.6; color: var(--p-encre-2); }
.p-atelier__lien {
  display: inline-block; font-family: var(--f-sans); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--p-encre);
  text-decoration: underline; text-underline-offset: 4px;
}

/* ── 5 · AMBIANCE — respiration avant l'upsell ──────────────── */
/* Le pont : l'image touche les bords comme la mosaïque, et le noir
   du Coffret monte dans son pied — la page bascule, elle ne saute pas. */
.p-ambiance { position: relative; padding: 0; margin-top: 34px; }
.p-ambiance img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 60%; display: block; }
.p-ambiance::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 16%; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--p-fond), transparent);
  transition: background 700ms ease;
}
.p-ambiance::after {
  content: ''; position: absolute; inset: auto 0 -1px 0; height: 42%; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(10,7,4,.55) 58%, var(--p-noir));
}

/* ── 6 · COFFRET — climax commercial, rupture noire ────────── */
.p-coffret {
  margin-top: 0; padding: 12px 24px 54px;
  background: var(--p-noir); color: var(--p-ivoire);
}
.p-coffret__titre {
  margin: 0 0 18px; font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(29px, 7.8vw, 37px); line-height: 1.1; letter-spacing: -.012em;
  color: var(--p-ivoire);
}
/* Le second temps prend la voix italique de la maison — même
   traitement que le CTA final de l'accueil (.v13-final__title em) :
   Cormorant 300, or, sur sa propre ligne. */
.p-coffret__titre em {
  display: block; font-family: var(--f-italic); font-style: italic;
  font-weight: 300; font-size: 1.06em; letter-spacing: -.004em;
  color: var(--p-or);
}
.p-coffret__moments { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.p-coffret__moments li { font-family: var(--f-sans); font-weight: 300; font-size: var(--t-ui); line-height: 1.6; color: rgba(247,242,234,.8); }
.p-coffret__moments strong {
  font-weight: 600; color: var(--p-or); letter-spacing: var(--e-eyebrow);
  text-transform: uppercase; font-size: var(--t-eyebrow); margin-right: 8px;
}
.p-coffret__img { margin: 0 0 20px; border-radius: 2px; overflow: hidden; }
.p-coffret__img img { width: 100%; display: block; }
.p-coffret__label { font-family: var(--f-sans); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--e-eyebrow); text-transform: uppercase; color: var(--p-or); }
.p-coffret__prixligne { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 4px; }
.p-coffret__prix { font-family: var(--f-serif); font-size: 32px; font-weight: 400; color: var(--p-ivoire); }
.p-coffret__barre { font-family: var(--f-sans); font-size: var(--t-micro); color: rgba(247,242,234,.5); text-decoration: line-through; }
.p-coffret__eco { margin: 0 0 20px; font-family: var(--f-sans); font-size: var(--t-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--p-or); }
.p-coffret .p-cta { width: 100%; box-sizing: border-box; }

/* Desktop : sélection à gauche, vitrine à droite, même logique. */
@media (min-width: 900px) {
  .p-appareil { display: grid; grid-template-columns: 380px 1fr; gap: 40px; max-width: 1120px; margin: 0 auto; padding: 0 40px; align-items: start; }
  .p-sel { grid-template-columns: 1fr; padding: 0; gap: 1px; }
  .p-sel__bt { min-height: 96px; flex-direction: row; align-items: center; gap: 12px; }
  .p-sel__nom { margin: 0 0 0 auto; }
  .p-vitrine { border-radius: 2px; }
  .p-decider, .p-ambiance { max-width: 720px; margin-inline: auto; }
  .p-coffret > * { max-width: 720px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .px-collection, .p-vitrine, .p-vitrine__cadre img, .p-vitrine__ident,
  .p-vitrine__vente, .p-sel__bt, .p-sel__bt img, .p-sel__bt::before,
  .p-sel__mot, .p-vitrine__mot, .p-comp__ligne { transition: none !important; }
  .p-vitrine.chg .p-vitrine__cadre img,
  .p-vitrine.chg .p-vitrine__ident,
  .p-vitrine.chg .p-vitrine__vente { opacity: 1; transform: none; clip-path: none; }
  .p-tete__titre .l > span { animation: none !important; transform: none !important; }
  .p-cta, .p-cta::after { transition: none !important; }
}