/* ════════════════════════════════════════════════════════════════
   CARAT V2 — LE COFFRET (index.html #coffret, packs.html #coffret-elixirs)
   Un seul composant, mêmes classes sur les deux pages, d'après les deux
   maquettes de Samy (13/11) :
   · < 900 px  : maquette « téléphone » — photo en haut fondue dans le brun,
                 surtitre, titre, phrase, contenu à glyphes + encart, prix, capsule.
   · ≥ 900 px  : maquette « grand écran » — panneau sombre dont la photo est
                 le fond, texte posé sur le haut calme de l'image, quatre
                 réassurances, ligne prix + capsule.
   Chargée en dernier. Les anciennes règles .v8-coffret* / .pks-* ne
   s'appliquent plus (le HTML n'utilise plus ces classes) ; seules les
   enveloppes de section sont surchargées, par leur id.
   Une seule feuille à retirer (et le bloc HTML à restaurer) pour revenir en arrière.
   ════════════════════════════════════════════════════════════════ */
.cfx {
  --cfx-nuit: #140E0A;
  --cfx-ivoire: #F4EBDD;
  --cfx-texte: rgba(244, 235, 221, .86);
  --cfx-doux: rgba(244, 235, 221, .68);
  --cfx-or: #DDBD85;
  --cfx-filet: rgba(221, 189, 133, .38);
  /* Capsule d'achat V2 : celle de L'Atelier (« Recevoir ma Signature »), Jost capitales interlettrées. */
  --cfx-capsule: linear-gradient(180deg, #EBD3A0 0%, #C9A45F 100%);
  --cfx-capsule-encre: #1E1611;
  --cfx-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --cfx-sans: 'Jost', 'Inter', system-ui, -apple-system, sans-serif;
  --cfx-ease: cubic-bezier(.22, .61, .36, 1);
  position: relative;
  color: var(--cfx-texte);
  background: var(--cfx-nuit);
  text-align: center;
}
.cfx *, .cfx *::before, .cfx *::after { box-sizing: border-box; }
.cfx svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* ── Enveloppes de section (anciens fonds et marges neutralisés) ── */
#coffret.cfx-section,
#coffret-elixirs.cfx-section { padding: 0; background: #140E0A; overflow: hidden; }
/* Un lien d'ancre (#coffret, #coffret-elixirs) arrête la section sous la barre fixe :
   le surtitre reste visible. Valeurs mesurées : accueil 56 px, packs 34 + 60 px. */
#coffret.cfx-section { scroll-margin-top: 56px; }
#coffret-elixirs.cfx-section { scroll-margin-top: 94px; }
/* Accueil, téléphone (T15) : la section Coffret prend la nuit de la page (#0D0906 au lieu
   de #140E0A) pour que L'Atelier, le Coffret et la FAQ partagent un seul fond, sans ligne. */
@media (max-width: 899px) {
  .v2.cro-flow #coffret.cfx-section,
  .v2.cro-flow #coffret.cfx-section > .cfx { --cfx-nuit: var(--v2-nuit, #0D0906); background: var(--v2-nuit, #0D0906); }
}

/* ── Photo ───────────────────────────────────────────────────────
   Téléphone : photo v2 recadrée serré (×1,21) — les quatre flacons
   occupent ~86 % de la largeur, gâchettes et flacons d'extrémité entiers.
   Aucun voile sur les flacons : le fondu vers le brun commence sous leurs bases. */
.cfx__media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 987 / 896; }
.cfx__media picture { display: block; }
.cfx__media img {
  position: absolute; top: 0; left: 0; display: block;
  width: 121.1%; max-width: none; height: auto; aspect-ratio: 1195 / 896;
  transform: translateX(-11.46%);
}
.cfx__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 14, 10, 0) 85%, rgba(20, 14, 10, .55) 93%, var(--cfx-nuit) 100%);
}

/* ── Texte ───────────────────────────────────────────────────── */
.cfx__body { position: relative; z-index: 1; margin-top: -12px; padding: 0 22px 44px; }
.cfx__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 16px; white-space: nowrap;
  margin: 0 0 14px; color: var(--cfx-or);
  font: 500 11.5px/1.4 var(--cfx-sans); letter-spacing: .34em; text-transform: uppercase;
}
.cfx__eyebrow::before, .cfx__eyebrow::after { content: ''; flex: 0 1 52px; height: 1px; background: var(--cfx-filet); }
.cfx__title {
  margin: 0 0 16px; color: var(--cfx-ivoire);
  font: 500 clamp(36px, 11.2vw, 50px)/1.02 var(--cfx-serif); letter-spacing: -.005em;
}
.cfx__title em { display: block; color: var(--cfx-or); font-style: italic; font-weight: 500; }
.cfx__desc {
  max-width: 34ch; margin: 0 auto 28px; color: var(--cfx-texte);
  font: 400 18.5px/1.42 var(--cfx-serif);
}

/* Contenu du coffret (téléphone) : liste à glyphes + encart */
.cfx__detail {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; justify-content: center;
  max-width: 460px; margin: 0 auto 30px; text-align: left;
}
.cfx__list { margin: 0; padding: 0 12px 0 0; list-style: none; }
.cfx__list li {
  display: flex; align-items: center; gap: 9px; min-height: 34px;
  color: var(--cfx-ivoire); font: 400 16.5px/1.25 var(--cfx-serif); white-space: nowrap;
}
.cfx__glyph { flex: none; width: 26px; height: 21px; color: var(--cfx-or); }
.cfx__aside {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 6px 0 6px 14px; border-left: 1px solid var(--cfx-filet); text-align: center;
}
.cfx__aside svg { width: 32px; height: 32px; color: var(--cfx-or); }
.cfx__aside-txt { margin: 0; color: var(--cfx-ivoire); font: italic 400 16.5px/1.25 var(--cfx-serif); }
.cfx__format {
  margin: 2px 0 0; padding: 8px 11px; border: 1px solid var(--cfx-filet); border-radius: 6px;
  color: var(--cfx-ivoire); font: 500 11px/1 var(--cfx-sans); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
}

/* Réassurances (grand écran seulement) */
.cfx__perks { display: none; }

/* Prix */
.cfx__price {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 9px;
  max-width: 460px; margin: 0 auto 22px;
}
.cfx__now { color: var(--cfx-ivoire); font: 600 clamp(36px, 10.4vw, 46px)/1 var(--cfx-serif); letter-spacing: -.01em; white-space: nowrap; }
.cfx__old {
  color: var(--cfx-doux); font: 400 18px/1 var(--cfx-serif); white-space: nowrap;
  text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(244, 235, 221, .55);
}
.cfx__save {
  position: relative; display: inline-flex; align-items: center; min-height: 30px; margin-left: 10px; padding: 6px 8px;
  border: 1px solid var(--cfx-filet); border-radius: 6px; color: var(--cfx-or);
  font: 500 10.5px/1 var(--cfx-sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
/* Filet vertical entre le prix barré et la pastille (maquette téléphone). */
.cfx__save::before { content: ''; position: absolute; left: -11px; top: 3px; bottom: 3px; width: 1px; background: var(--cfx-filet); }
.cfx__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Capsule champagne : le bouton d'achat principal du site V2 */
.cfx .cfx__cta {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 58px; min-height: 58px; margin: 0; padding: 0 28px;
  border: 0; border-radius: 999px; color: var(--cfx-capsule-encre); background: var(--cfx-capsule);
  box-shadow: 0 16px 28px -18px rgba(201, 164, 95, .9);
  font: 600 13px/1 var(--cfx-sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; transition: transform .25s var(--cfx-ease), box-shadow .25s var(--cfx-ease);
}
.cfx .cfx__cta::before, .cfx .cfx__cta::after { content: none; }
.cfx .cfx__cta svg { width: 20px; height: 20px; stroke-width: 1.4; transition: transform .25s var(--cfx-ease); }
.cfx .cfx__cta:hover { background: var(--cfx-capsule); border: 0; color: var(--cfx-capsule-encre); filter: brightness(1.05); }
.cfx .cfx__cta:active { transform: scale(.98); }
.cfx .cfx__cta:focus-visible { outline: 2px solid var(--cfx-or); outline-offset: 3px; }
@media (hover: hover) {
  .cfx .cfx__cta:hover { transform: translateY(-1px); }
  .cfx .cfx__cta:hover svg { transform: translateX(3px); }
}
.cfx__more {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 0 6px;
  color: var(--cfx-texte); text-decoration: none;
  font: 500 11.5px/1 var(--cfx-sans); letter-spacing: .2em; text-transform: uppercase;
}
.cfx__more span { color: var(--cfx-or); transition: transform .25s var(--cfx-ease); }
.cfx__more:hover { color: var(--cfx-ivoire); }
.cfx__more:hover span { transform: translateX(3px); }
.cfx__more:focus-visible { outline: 2px solid var(--cfx-or); outline-offset: 2px; border-radius: 4px; }

/* Petits téléphones : l'encart passe sous la liste. */
@media (max-width: 369px) {
  .cfx__body { padding: 0 18px 40px; }
  .cfx__eyebrow { gap: 12px; letter-spacing: .26em; }
  .cfx__eyebrow::before, .cfx__eyebrow::after { flex-basis: 28px; }
  .cfx__detail { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .cfx__list { padding: 0; }
  .cfx__list li { font-size: 17px; }
  .cfx__detail { max-width: 300px; }
  .cfx__aside { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--cfx-filet); width: 100%; }
  .cfx__aside-txt { flex: 1 1 100%; }
  .cfx__now { font-size: 42px; }
}

/* Tablette portrait : la même composition, plus aérée, avec la photo v3
   (servie dès 600 px par le <source> du HTML) recadrée serré (×1,4). */
@media (min-width: 600px) and (max-width: 899px) {
  .cfx__media { aspect-ratio: 1097 / 831; }
  .cfx__media img { width: 140%; aspect-ratio: 1536 / 1024; transform: translate(-14.13%, -18.55%); }
  .cfx__media::after { background: linear-gradient(to bottom, rgba(20, 14, 10, 0) 80%, rgba(20, 14, 10, .55) 91%, var(--cfx-nuit) 100%); }
  .cfx__body { margin-top: -16px; padding: 0 48px 64px; }
  .cfx__title { font-size: 58px; }
  .cfx__desc { font-size: 20px; }
  .cfx__list li { font-size: 18px; }
  .cfx__aside-txt { font-size: 18px; }
  .cfx__actions { max-width: 460px; margin: 0 auto; }
}

/* ── Grand écran : la photo devient le fond du panneau ─────────── *
   La photo (3:2) occupe le haut du panneau à sa largeur naturelle ; le
   texte se pose sur son haut calme, les réassurances commencent sous la
   base des flacons (≈ 53 % de la largeur du panneau, d'où les unités cqw),
   le bas de l'image se fond dans le brun qui porte la ligne d'achat. */
@media (min-width: 900px) {
  #coffret.cfx-section,
  #coffret-elixirs.cfx-section { padding: 56px 32px 80px; }
  /* Accueil (T15) : le panneau photographique est posé dans la même nuit que L'Atelier
     et la FAQ ; plus de dégradé brun → ivoire autour de lui. */
  .v2.cro-flow #coffret.cfx-section { background: var(--v2-nuit, #0D0906); }
  #coffret-elixirs.cfx-section { background: #0B0B0A; }
  /* Ancre : la marge haute de la section (56 px) passe sous la barre fixe (≈ 106 px),
     le panneau s'arrête juste dessous, surtitre visible. */
  #coffret.cfx-section, #coffret-elixirs.cfx-section { scroll-margin-top: 50px; }
  /* Packs : le lien du héros passe par main.js (décalage fixe de 80 px, ignore scroll-margin).
     Une marge haute de 24 px garde la capsule dans un écran 1440×900 après ce saut. */
  #coffret-elixirs.cfx-section { padding-top: 24px; scroll-margin-top: 82px; }

  .cfx {
    container-type: inline-size;
    max-width: 1180px; margin: 0 auto;
    border-radius: 4px; overflow: hidden; isolation: isolate;
    box-shadow: 0 40px 80px -48px rgba(20, 14, 10, .7);
  }
  /* Le haut de la photo (mur sombre) est rogné de 2,5 % de la largeur : flacons un peu plus hauts. */
  .cfx__media { position: absolute; top: -2.5cqw; left: 0; right: 0; z-index: -1; overflow: visible; aspect-ratio: auto; }
  .cfx__media img { position: static; width: 100%; aspect-ratio: 1536 / 1024; transform: none; }
  .cfx__media::after {
    background:
      linear-gradient(to bottom, rgba(20, 14, 10, .8) 0, rgba(20, 14, 10, .45) 17%, rgba(20, 14, 10, 0) 29%),
      linear-gradient(to bottom, rgba(20, 14, 10, 0) 74%, rgba(20, 14, 10, .62) 82%, rgba(20, 14, 10, .9) 91%, var(--cfx-nuit) 100%);
  }
  .cfx__head { position: absolute; top: 0; left: 0; right: 0; padding: 3.3cqw 48px 0; }
  /* Bases des flacons à 49,9cqw ; la bande de réassurances commence 32 px plus bas (≈ 14 px avant). */
  .cfx__body { margin: 0; padding: calc(51.1cqw + 20px) 52px 22px; }
  .cfx__eyebrow { margin-bottom: 10px; font-size: 12px; }
  .cfx__eyebrow::before, .cfx__eyebrow::after { flex-basis: 64px; }
  /* Une ligne sur grand écran : les quatre gâchettes restent dégagées. */
  .cfx__title { margin-bottom: 10px; font-size: clamp(44px, 5.4cqw, 64px); line-height: 1.04; }
  .cfx__title em { display: inline; }
  .cfx__desc { max-width: 64ch; margin-bottom: 0; color: var(--cfx-texte); font: 400 17px/1.5 var(--cfx-sans); }
  .cfx__detail { display: none; }

  .cfx__perks {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0; padding: 0; list-style: none;
  }
  .cfx__perks li {
    display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 12px;
    color: var(--cfx-ivoire); font: 400 15px/1.35 var(--cfx-sans);
  }
  .cfx__perks li + li { border-left: 1px solid var(--cfx-filet); }
  .cfx__perks svg { width: 30px; height: 30px; color: var(--cfx-or); }

  .cfx__buy {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(221, 189, 133, .2);
  }
  .cfx__price { flex-wrap: nowrap; justify-content: flex-start; max-width: none; margin: 0; gap: 18px; }
  .cfx__now { font-size: 52px; }
  .cfx__old { font-size: 20px; }
  .cfx__save { margin-left: 0; padding: 6px 12px; font-size: 11px; letter-spacing: .2em; }
  .cfx__save::before { content: none; }
  .cfx__actions {
    display: flex; flex-direction: column; align-items: center;
    padding-left: 28px; border-left: 1px solid var(--cfx-filet);
  }
  .cfx .cfx__cta { width: 340px; height: 58px; }
  .cfx__more { margin-top: 0; font-size: 11px; }
}
/* Petits ordinateurs : marges et tailles resserrées. */
@media (min-width: 900px) and (max-width: 1199px) {
  #coffret.cfx-section, #coffret-elixirs.cfx-section { padding-left: 24px; padding-right: 24px; }
  .cfx__head { padding-left: 32px; padding-right: 32px; }
  .cfx__body { padding-left: 32px; padding-right: 32px; }
  .cfx__perks li { font-size: 14px; padding: 0 8px; }
  .cfx__price { gap: 12px; }
  .cfx__now { font-size: 44px; }
  .cfx__actions { padding-left: 20px; }
  .cfx .cfx__cta { width: 270px; }
}

@media (prefers-reduced-motion: reduce) {
  .cfx .cfx__cta, .cfx .cfx__cta svg, .cfx__more span { transition: none; }
  .cfx .cfx__cta:hover, .cfx .cfx__cta:hover svg, .cfx__more:hover span { transform: none; }
}