/* ════════════════════════════════════════════════════════════════
   CARAT V2 — COLLECTION ÉLIXIRS (prototype)
   Suit la maquette « Section Élixirs — mobile-first » de Samy (12/11) :
   1 entrée immersive · 2 sélecteur rapide · 3 cartes produit avec accords ·
   4 apparitions douces · 5 comparatif · L'Atelier · le Coffret ensuite.
   Chargée après elixirs-v2.css, portée par main.v2c.
   ════════════════════════════════════════════════════════════════ */

.v2c {
  --v2-encre: #211B15; --v2-encre-2: rgba(33, 27, 21, .7); --v2-filet: rgba(33, 27, 21, .12);
  --v2-or-clair: #D9B77C; --v2-nuit: #1A100B; --v2-ease: cubic-bezier(.22, .61, .36, 1);
}
.v2c .nw { white-space: nowrap; }
.v2c svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.v2c-eyebrow { display: block; font: 500 11px/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; }

/* ── 1 · Entrée immersive : une matière chaude, le titre, quatre faits ──
   Photographie de satin générée (Codex, 12/11) : aucun produit dans l'image.
   Le voile sombre par-dessus garantit la lecture du titre et des quatre faits. */
.v2c-tete {
  position: relative; isolation: isolate; overflow: hidden; padding: 86px 22px 64px; text-align: center; color: #F7EFE2;
  background:
    linear-gradient(to bottom, rgba(18, 11, 8, .46) 0%, rgba(18, 11, 8, .22) 40%, rgba(18, 11, 8, .56) 66%, rgba(18, 11, 8, .64) 90%, rgba(18, 11, 8, .3) 100%),
    #1A100B url('/assets/elixirs/collection-v2/tete-satin-mobile.webp') center bottom / cover no-repeat;
}
.v2c-tete::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
/* Le bas de l'entrée se fond dans l'ivoire de la page. */
.v2c-tete::after { inset: auto 0 0; height: 66px; background: linear-gradient(to bottom, rgba(244, 240, 232, 0), var(--p-fond, #F4F0E8)); }
.v2c-tete .v2c-eyebrow { color: var(--v2-or-clair); }
.v2c-tete h1 { margin: 12px 0 10px; font: 500 clamp(33px, 9.2vw, 44px)/1.08 var(--f-serif); letter-spacing: 0; }
.v2c-tete h1 em { display: block; color: var(--v2-or-clair); font-style: italic; font-weight: 500; }
.v2c-tete p { margin: 0 auto; max-width: 30ch; color: rgba(247, 239, 226, .88); font: 300 15px/1.55 var(--f-sans); }
.v2c-faits { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 18px -6px 0; padding: 0; }
.v2c-faits li { color: rgba(247, 239, 226, .92); font: 400 11px/1.35 var(--f-sans); }
.v2c-faits span { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 6px; border-radius: 50%; color: var(--v2-or-clair); box-shadow: inset 0 0 0 1px rgba(217, 183, 124, .55); }
.v2c-faits svg { width: 20px; height: 20px; }

/* ── 2 · Sélecteur rapide : quatre matières, quatre ancres ──────── */
.v2c-selecteur { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: -46px; padding: 0 16px; }
.v2c-selecteur a { display: block; color: var(--v2-encre); text-align: center; text-decoration: none; }
.v2c-selecteur img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 22px -14px rgba(40, 24, 12, .7); transition: transform .4s var(--v2-ease); }
.v2c-selecteur span { display: block; margin-top: 9px; font: 500 14.5px/1.15 var(--f-serif); }
.v2c-selecteur a:active img { transform: scale(.96); }
.v2c-selecteur a:focus-visible { outline: 2px solid var(--p-or-fonce); outline-offset: 4px; border-radius: 12px; }

/* ── 3 · Cartes produit : image à gauche, tout pour choisir à droite ── */
.v2c-grille { display: grid; gap: 16px; padding: 20px 16px 10px; }
.v2c-carte {
  display: grid; grid-template-columns: 41% minmax(0, 1fr); min-width: 0; scroll-margin-top: 96px;
  background: #FBF8F3; border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(33, 27, 21, .05), 0 18px 36px -24px rgba(60, 40, 22, .45);
}
.v2c-carte__visuel { display: block; min-height: 100%; overflow: hidden; background: var(--teinte); }
.v2c-carte__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; }
.v2c-carte__visuel:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.v2c-carte__visuel--attente { display: grid; place-content: center; text-align: center; padding: 0 10px; background: radial-gradient(120% 90% at 30% 18%, #FBF5F1 0%, #EDDDD6 62%, #E3D0C8 100%); color: #6E544C; font: italic 500 19px/1.2 var(--f-italic); }
.v2c-carte__visuel--attente small { display: block; margin-top: 8px; font: 500 10px/1.4 var(--f-sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.v2c-carte__corps { display: flex; flex-direction: column; min-width: 0; padding: 16px 14px 14px; }
.v2c-carte h2 { margin: 0 0 6px; color: var(--p-encre); font: 500 23px/1.1 var(--f-serif); letter-spacing: 0; }
.v2c-carte h2 a { color: inherit; text-decoration: none; }
.v2c-carte__promesse { margin: 0; color: var(--v2-encre); font: 300 13.5px/1.42 var(--f-sans); }
.v2c-carte__mots { margin: 9px 0 0; color: var(--v2-encre); font: 500 11px/1.4 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; }
/* Les accords : ce que l'on y sent, en trois repères. */
.v2c-carte__accords { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; padding: 0; }
.v2c-carte__accords li { color: var(--v2-encre-2); font: 400 11px/1.25 var(--f-sans); text-align: center; }
.v2c-carte__accords span { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 5px; border-radius: 50%; background: var(--teinte); color: var(--accent); }
.v2c-carte__accords svg { width: 18px; height: 18px; }
.v2c-carte__accords li:only-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; text-align: left; font-style: italic; }
.v2c-carte__accords li:only-child span { margin: 0; flex: none; }
/* Accords photographiés (mêmes matières que les fiches) : une pastille ronde,
   cerclée d'ivoire, posée sur la teinte de la carte. Le libellé reste à côté. */
.v2c-carte__accords--photo li { color: var(--v2-encre); text-wrap: balance; }
.v2c-carte__accords img {
  display: block; width: 40px; height: 40px; margin: 0 auto 6px; border-radius: 50%; object-fit: cover;
  background: var(--teinte);
  box-shadow: 0 0 0 2px #FBF8F3, 0 0 0 3px rgba(33, 27, 21, .1), 0 6px 12px -8px rgba(60, 40, 22, .55);
}
.v2c-carte__prix { margin: 12px 0 0; color: var(--p-encre); font: 600 20px/1.2 var(--f-serif); }
.v2c-carte__prix small { color: var(--v2-encre-2); font: 400 12.5px var(--f-sans); }
.v2c-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin-top: 12px; padding: 0 6px;
  border-radius: 999px; color: #251910; white-space: nowrap;
  background: linear-gradient(180deg, #F7EDDA 0%, #EBD6B0 46%, #D6B784 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 14px -8px rgba(120, 84, 34, .55);
  font: 600 16.5px/1 var(--f-italic); letter-spacing: 0;
  transition: transform .25s var(--v2-ease), background-color .25s;
}
.v2c-cta::before {
  content: ''; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8z'/%3E%3Cpath d='M9 8V7a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8z'/%3E%3Cpath d='M9 8V7a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.v2c-cta.est-ajoute { background: #211B15; color: #F7EDDA; box-shadow: none; }
.v2c-cta.est-ajoute::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E");
}
.v2c-cta:active { transform: scale(.975); }
.v2c-cta:focus-visible { outline: 2px solid var(--p-or-fonce); outline-offset: 3px; }
.v2c-cta[disabled] { background: none; box-shadow: inset 0 0 0 1px rgba(33, 27, 21, .22); color: #5A4A40; cursor: default; font-size: 15.5px; }
.v2c-cta[disabled]::before { display: none; }
@media (hover: hover) { .v2c-cta:not([disabled]):hover { transform: translateY(-1px); } }

/* ── 4 · Apparitions : la carte monte, l'image se pose, les accords suivent ── */
.v2c--anime .v2c-carte, .v2c--anime .v2c-repere { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--v2-ease), transform .7s var(--v2-ease); }
.v2c--anime .v2c-carte__visuel img { transform: scale(1.08); transition: transform 1.3s var(--v2-ease); }
.v2c--anime .v2c-carte__accords li { opacity: 0; transform: scale(.86); transition: opacity .5s var(--v2-ease), transform .5s var(--v2-ease); }
.v2c--anime .est-vue { opacity: 1; transform: none; }
.v2c--anime .est-vue .v2c-carte__visuel img { transform: none; }
.v2c--anime .est-vue .v2c-carte__accords li { opacity: 1; transform: none; }
.v2c--anime .est-vue .v2c-carte__accords li:nth-child(1) { transition-delay: .25s; }
.v2c--anime .est-vue .v2c-carte__accords li:nth-child(2) { transition-delay: .36s; }
.v2c--anime .est-vue .v2c-carte__accords li:nth-child(3) { transition-delay: .47s; }

/* ── 5 · Comparatif : quatre repères, trois points ──────────────── */
.v2c-repere { margin: 26px 16px 0; padding: 26px 18px 6px; background: #FBF8F3; border-radius: 18px; box-shadow: 0 1px 0 rgba(33, 27, 21, .05), 0 18px 36px -26px rgba(60, 40, 22, .4); }
.v2c-repere h2 { margin: 0 0 4px; color: var(--p-encre); font: 500 27px/1.15 var(--f-serif); letter-spacing: 0; }
.v2c-repere > p { margin: 0; color: var(--v2-encre-2); font: 300 14px/1.5 var(--f-sans); }
.v2c-repere__table { width: 100%; margin-top: 16px; border-collapse: collapse; table-layout: fixed; }
.v2c-repere__table thead td { width: 33%; }
.v2c-repere__table thead th { padding: 0 0 10px; color: var(--accent); font: 600 14px/1.1 var(--f-serif); text-align: center; vertical-align: bottom; }
.v2c-repere__table thead small { display: block; font: 400 11px/1.2 var(--f-sans); color: var(--v2-encre-2); }
.v2c-repere__table tbody tr { border-top: 1px solid var(--v2-filet); }
.v2c-repere__table tbody th { padding: 13px 0; color: var(--v2-encre); font: 400 14px/1.2 var(--f-sans); text-align: left; white-space: nowrap; }
.v2c-repere__table tbody th span { display: inline-grid; place-items: center; width: 22px; margin-right: 6px; vertical-align: -5px; color: var(--v2-encre-2); }
.v2c-repere__table tbody th svg { width: 19px; height: 19px; }
.v2c-repere__table tbody td { text-align: center; white-space: nowrap; }
.v2c-repere__table tbody td i { display: inline-block; width: 7px; height: 7px; margin: 0 1.5px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--accent); opacity: .55; }
.v2c-repere__table tbody td i.on { background: var(--accent); opacity: 1; }
.v2c-atelier { margin-top: 18px; padding: 22px 0 18px; border-top: 1px solid rgba(124, 97, 39, .32); }
.v2c-atelier .v2c-atelier__titre { margin: 0 0 8px; color: var(--p-encre); font: italic 500 24px/1.2 var(--f-italic); }
.v2c-atelier p { margin: 0; max-width: 40ch; color: var(--v2-encre-2); font: 300 14.5px/1.6 var(--f-sans); }
.v2c-lien { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; color: var(--p-or-fonce); font: 600 11px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(124, 97, 39, .45); }
.v2c-lien:focus-visible { outline: 2px solid var(--p-or-fonce); outline-offset: 3px; }

/* La respiration photographique avant le Coffret reste, plus courte. */
.v2c .p-ambiance { margin-top: 34px; }
.v2c .p-ambiance img { aspect-ratio: 5 / 4; object-position: 50% 78%; }

@media (min-width: 720px) {
  /* Entrée resserrée (12/11) : à 1440 × 900, le premier bouton d'achat remonte dans l'écran. */
  .v2c-tete::after { height: 90px; }
  .v2c-tete { padding: 128px 40px 90px; background-image: linear-gradient(to bottom, rgba(18, 11, 8, .4) 0%, rgba(18, 11, 8, .2) 50%, rgba(18, 11, 8, .34) 100%), url('/assets/elixirs/collection-v2/tete-satin-desktop.webp'); background-position: center, center 62%; }
  .v2c-tete h1 em { display: inline; }
  .v2c-faits { max-width: 620px; margin-inline: auto; }
  .v2c-selecteur { max-width: 620px; margin: -60px auto 0; gap: 18px; }
  .v2c-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1180px; margin-inline: auto; padding: 44px 40px 10px; }
  .v2c-carte h2 { font-size: 27px; }
  .v2c-carte__corps { padding: 24px 22px 22px; }
  .v2c-carte__accords img { width: 46px; height: 46px; }
  .v2c-repere { max-width: 760px; margin: 40px auto 0; padding: 34px 34px 10px; }
}
@media (prefers-reduced-motion: reduce) { .v2c-cta, .v2c-selecteur img { transition: none; } }