/* ===========================================================
   SOLITCHI v2 — pages Offres & Ressources
   Composants propres à ces pages, sur les tokens v2.
   =========================================================== */

/* ---------- Hero court (pages internes) ---------- */
.hero2--page { min-height: auto; padding-top: clamp(140px, 20vh, 200px); padding-bottom: clamp(40px, 6vw, 70px); }
.hero2--page .hero2__title { font-size: clamp(2rem, 4.4vw, 4rem); max-width: 24ch; }
.hero2--page .hero2__sub { max-width: 58ch; }

/* ---------- VSL : cadre verre rose, aperçu muet, bouton son ---------- */
.vsl2 { padding: 0 0 clamp(60px, 8vw, 100px); position: relative; z-index: 2; }
.vsl2__glass {
  width: min(1240px, 94vw); margin: 0 auto; padding: clamp(10px, 1.5vw, 22px);
  border-radius: clamp(24px, 3vw, 38px);
  background: linear-gradient(155deg, rgba(238, 28, 122, .20), rgba(255, 255, 255, .04) 42%, rgba(238, 28, 122, .12));
  border: 1px solid rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .55), 0 0 80px rgba(238, 28, 122, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.vsl2__frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: clamp(16px, 2vw, 26px);
  background: linear-gradient(135deg, #2a1420, #1b1023);
}
.vsl2__player { position: absolute; inset: 0; }
.vsl2__player iframe { position: absolute; bottom: 0; left: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 100%; pointer-events: none; }
.vsl2__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity .8s var(--ease-out); }
.vsl2__poster.is-hidden { opacity: 0; pointer-events: none; }
.vsl2__shield { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; background: transparent; cursor: pointer; }
.vsl2__play {
  position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(closest-side, rgba(10, 10, 12, .22), transparent); transition: opacity .4s var(--ease-out);
}
.vsl2__play.is-hidden { opacity: 0; pointer-events: none; }
.vsl2__btn {
  width: clamp(72px, 7vw, 104px); height: clamp(72px, 7vw, 104px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 10, 16, .32); border: 2px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4), 0 0 0 8px rgba(255, 255, 255, .06);
  transition: transform .35s var(--ease-out), background .35s var(--ease-out), border-color .35s var(--ease-out);
}
.vsl2__btn svg { width: 34%; height: 34%; margin-left: 5%; }
.vsl2__play:hover .vsl2__btn { transform: scale(1.08); background: var(--rose); border-color: var(--rose); box-shadow: var(--shadow-rose), 0 0 0 8px rgba(238, 28, 122, .18); }
.vsl2__mute {
  position: absolute; z-index: 4; top: clamp(12px, 2vw, 26px); right: clamp(12px, 2vw, 26px);
  width: clamp(44px, 4.4vw, 64px); height: clamp(44px, 4.4vw, 64px); border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.vsl2__mute[hidden], .vsl2__shield[hidden] { display: none; }
.vsl2__mute:hover { background: rgba(238, 28, 122, .55); transform: scale(1.05); }
.vsl2__mute svg { width: 42%; height: 42%; }
.vsl2__mute .ico-on, .vsl2__mute.is-on .ico-off { display: none; }
.vsl2__mute.is-on .ico-on { display: block; }

/* ---------- Comparatif des 2 offres ---------- */
.offers2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; }
.offer2 {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(28px, 3.4vw, 44px);
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.offer2:hover { border-color: var(--rose-line); transform: translateY(-4px); }
.offer2--feat { background: linear-gradient(180deg, rgba(238,28,122,.08), var(--surface) 40%); border-color: var(--rose-line); }
.offer2__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
.offer2__stage { display: flex; width: fit-content; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 20px; border-radius: 999px; background: #ff1f8f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 8px 30px rgba(255, 31, 143, .55), 0 0 60px rgba(255, 31, 143, .35); font-size: clamp(16px, 1.4vw, 19px); font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.offer2__stage em { font-style: normal; font-weight: 600; color: rgba(255, 255, 255, .9); }
.offer2__name { margin-top: 14px; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.offer2__name .ser { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--rose); }
.offer2__for { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.offer2__price { margin-top: 26px; display: flex; align-items: baseline; gap: 8px; font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 600; letter-spacing: -0.03em; }
.offer2__price small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.offer2__terms { margin-top: 6px; color: var(--muted); font-size: 14px; }
.offer2__list { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); list-style: none; display: grid; gap: 12px; }
.offer2__list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; color: var(--text); }
.offer2__list li::before { content: ''; position: absolute; left: 0; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--rose); border-bottom: 2px solid var(--rose); transform: rotate(-45deg); }
.offer2__g { margin-top: 24px; padding: 16px 18px; border-radius: var(--radius); background: var(--rose-soft); border: 1px solid var(--rose-line); font-size: 14px; line-height: 1.5; color: var(--text); }
.offer2__g b { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); margin-bottom: 6px; font-weight: 500; }
.offer2__cta { margin-top: auto; padding-top: 28px; }
.offer2__cta .btn2 { width: 100%; justify-content: center; }

/* ---------- Pour qui (section flip) ---------- */
.who2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.who2__col { background: var(--surface-light); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 40px); }
.who2__col h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.015em; color: var(--text-on-light); }
.who2__col h3 .ser { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--rose-2); }
.who2__sub { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-light); }
.who2__col ul { list-style: none; margin-top: 10px; display: grid; gap: 10px; }
.who2__col li { position: relative; padding-left: 24px; color: var(--text-on-light); font-size: 15px; line-height: 1.45; }
.who2__col li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.who2__oui li::before { content: '✓'; color: #1f9d55; }
.who2__non li::before { content: '✕'; color: var(--rose-2); }

/* ---------- FAQ ---------- */
.faq2 { max-width: 860px; }
.faq2 details { border-bottom: 1px solid var(--border); }
.faq2 summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
  font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em;
}
.faq2 summary::-webkit-details-marker { display: none; }
.faq2 summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--rose); transition: transform .3s var(--ease-out); }
.faq2 details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq2 details p { padding: 0 0 24px; color: var(--muted); line-height: 1.6; max-width: 70ch; }

/* ---------- Ressources ---------- */
.res2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.res2__card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; transition: border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.res2__card:hover { border-color: var(--rose-line); transform: translateY(-4px); }
.res2__cover {
  position: relative; aspect-ratio: 16 / 8; overflow: hidden;
  background: radial-gradient(420px 220px at 25% 20%, rgba(238,28,122,.35), transparent 60%), radial-gradient(380px 240px at 85% 90%, rgba(238,28,122,.16), transparent 60%), var(--surface-2);
  display: flex; align-items: flex-end; padding: 26px;
}
.res2__cover::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 34px 34px; opacity: .35; mask-image: linear-gradient(180deg, #000, transparent 85%); }
.res2__big { position: relative; z-index: 1; font-family: var(--font-display); font-style: italic; font-size: clamp(3rem, 6vw, 4.6rem); line-height: .9; color: #fff; }
.res2__big small { display: block; font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); margin-top: 10px; }
.res2__lock { position: absolute; z-index: 1; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(10,10,12,.6); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.res2__lock svg { width: 12px; height: 12px; }
.is-unlocked .res2__lock { color: #4ade80; border-color: rgba(74,222,128,.35); }
.res2__body { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; flex: 1; }
.res2__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
.res2__body h3 { margin-top: 12px; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.res2__body > p { margin-top: 10px; color: var(--muted); line-height: 1.55; }
.res2__body ul { list-style: none; margin: 18px 0 0; display: grid; gap: 9px; }
.res2__body li { position: relative; padding-left: 22px; font-size: 15px; }
.res2__body li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); }
.res2__cta { margin-top: auto; padding-top: 26px; }
.res2__cta .btn2 { width: 100%; justify-content: center; }

/* ---------- Formulaire de déblocage ---------- */
.gate2 {
  max-width: 760px; margin: clamp(48px, 6vw, 72px) auto 0; padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--rose-line);
  box-shadow: var(--shadow-card);
}
.gate2 h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.gate2 h3 .ser { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--rose); }
.gate2 > p { margin-top: 10px; color: var(--muted); }
.gate2__form { margin-top: 26px; display: grid; gap: 14px; }
.gate2__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gate2__field { display: grid; gap: 6px; }
.gate2__field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.gate2__field input {
  width: 100%; padding: 15px 16px; border-radius: 12px; font: inherit; font-size: 16px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); outline: none; transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.gate2__field input:focus { border-color: var(--rose); box-shadow: 0 0 0 4px var(--rose-soft); }
.gate2__field.is-err input { border-color: #ff5d6c; }
.gate2__msg { font-size: 13px; color: #ff7a87; min-height: 0; }
.gate2__consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; cursor: pointer; }
.gate2__consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--rose); flex: none; }
.gate2__consent a { color: var(--text); text-decoration: underline; }
.gate2__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gate2__err { font-size: 14px; color: #ff7a87; min-height: 1px; }
.gate2__form .btn2 { justify-content: center; margin-top: 6px; }
.gate2__form .btn2[disabled] { opacity: .6; cursor: progress; }
.gate2__hint { text-align: center; font-size: 13px; color: var(--faint); }
.gate2__done { text-align: center; }
.gate2__done .gate2__check { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--rose-soft); border: 1px solid var(--rose-line); color: var(--rose); font-size: 28px; }
.gate2__links { margin-top: 24px; display: grid; gap: 12px; }
.gate2__links .btn2 { justify-content: center; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .offers2, .who2, .res2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gate2__duo { grid-template-columns: 1fr; }
  .offer2__price { font-size: 2.3rem; }
}

/* Offres : hero compact, la VSL est visible dès l'ouverture de la page */
.hero2--vsl { padding-top: clamp(104px, 14vh, 140px); padding-bottom: clamp(22px, 3vw, 34px); }
.hero2--vsl .hero2__eyebrow { margin-bottom: clamp(14px, 2vw, 22px); }
.hero2--vsl .hero2__title { font-size: clamp(1.9rem, 3.8vw, 3.4rem); max-width: 26ch; }
.hero2--vsl + .vsl2 .vsl2__glass { width: min(1520px, calc(100vw - 2 * clamp(16px, 4vw, 72px))); }

/* Étiquette rose inclinée dans le titre (même effet que les pages ads) */
.hero2__title .h1-box {
  display: inline-block; position: relative;
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400;
  letter-spacing: -0.01em; color: #fff;
  background: linear-gradient(135deg, #ff4b8d, var(--rose) 55%, #c8155a);
  padding: 0 .22em .04em; margin: 0 .04em; border-radius: .16em; line-height: 1.12;
  box-shadow: 0 14px 44px rgba(238, 28, 122, .45);
  transform: rotate(-1.5deg);
}
.hero2--vsl .hero2__title .line-mask { padding: .14em .2em .24em; margin: -.14em -.2em -.24em; }

/* Offres : premier écran sur fond blanc, dégradé rose litchi */
.hero2--vsl {
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(238, 28, 122, .22), transparent 62%),
    radial-gradient(760px 460px at 8% 115%, rgba(238, 28, 122, .14), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #fff3f8 100%);
}
.hero2--vsl .hero2__grid {
  background-image: linear-gradient(rgba(10, 10, 12, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 10, 12, .07) 1px, transparent 1px);
  opacity: .6;
}
.hero2--vsl .hero2__glow--1 { background: radial-gradient(circle, rgba(238, 28, 122, .22), transparent 70%); }
.hero2--vsl .hero2__glow--2 { background: radial-gradient(circle, rgba(238, 28, 122, .14), transparent 70%); }
.hero2--vsl .hero2__title { color: var(--text-on-light); }
.hero2--vsl .hero2__eyebrow { color: var(--rose-2); }
.hero2--vsl + .vsl2 { background: linear-gradient(180deg, #fff3f8 0%, #fde4ee 38%, #f6c9dc 62%, var(--bg) 100%); }
.hero2--vsl + .vsl2 .vsl2__glass { box-shadow: 0 40px 110px rgba(80, 10, 40, .35), 0 0 80px rgba(238, 28, 122, .18), inset 0 1px 0 rgba(255, 255, 255, .25); }

/* Offres : boutons sous la VSL */
.vsl2__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 36px); padding: 0 16px; }

/* Offres : 2 guides à télécharger */
.dl2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.dl2__card {
  display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 34px);
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.dl2__card:hover { border-color: var(--rose-line); transform: translateY(-4px); }
.dl2__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
.dl2__card b { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.dl2__cta { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--rose); }
.dl2__card:hover .btn2__arrow { transform: translateY(3px); }
@media (max-width: 900px) { .dl2 { grid-template-columns: 1fr; } }
/* 3 guides côte à côte sur ordinateur */
.res2--3, .dl2--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .res2--3, .dl2--3 { grid-template-columns: 1fr; } }
.dl2--3 .dl2__card b, .dl2--3 .dl2__tag { padding-right: 56px; }

/* Appel final : lien vers l'appel découverte */
.cta2__alt { margin-top: 22px; color: var(--muted); font-size: 15px; }
.cta2__alt a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.cta2__alt a:hover { color: var(--rose); }

/* Offres : têtes des clients qui flottent autour du titre */
.ofh__heads { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ofh__head {
  position: absolute; width: var(--s); height: var(--s); border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 14px 34px rgba(160, 20, 80, .28), 0 0 0 1px rgba(238, 28, 122, .25);
  background: #fff; animation: ofh-bob 6.5s ease-in-out infinite;
  transition: translate .9s var(--ease-out);
}
.ofh__head img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ofh__head i { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); font-style: normal; font-size: 9px; letter-spacing: 1px; color: #f5a400; white-space: nowrap; }
@keyframes ofh-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.ofh__proof {
  margin-top: clamp(14px, 2vw, 20px); display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 16px 7px 8px; border-radius: 999px; font-size: 13.5px; color: var(--muted-on-light);
  background: rgba(255, 255, 255, .75); border: 1px solid rgba(238, 28, 122, .18);
  box-shadow: 0 10px 30px rgba(160, 20, 80, .10);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ofh__proof:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(160, 20, 80, .16); }
.ofh__proof b { color: #f5a400; font-weight: 700; letter-spacing: .5px; }
.ofh__stack { display: flex; }
.ofh__stack img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -9px; }
.ofh__stack img:first-child { margin-left: 0; }
@media (max-width: 1100px) { .ofh__head:nth-child(4), .ofh__head:nth-child(8) { display: none; } }
@media (min-width: 761px) and (max-width: 1360px) { .ofh__head:nth-child(2), .ofh__head:nth-child(6) { display: none; } }
@media (max-width: 1600px) { .ofh__head:nth-child(8) { display: none; } }
@media (max-width: 760px) {
  .ofh__head { --s: 38px !important; opacity: .9; }
  .ofh__head:nth-child(2), .ofh__head:nth-child(3), .ofh__head:nth-child(6), .ofh__head:nth-child(7) { display: none; }
  .ofh__head i { display: none; }
  .ofh__proof { font-size: 12px; flex-direction: column; gap: 6px; border-radius: 16px; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { .ofh__head { animation: none; } }

/* Offres & Ressources : en-têtes de section centrés */
.sec__head { margin-left: auto; margin-right: auto; text-align: center; }
.sec__head .sec__kicker { justify-content: center; }
.sec__head .sec__lead { margin-left: auto; margin-right: auto; }

/* ---------- Offres : illustrations légères ---------- */
.ofi-wrap { position: relative; }
.ofi { position: absolute; inset: 0 0 auto; height: 340px; pointer-events: none; }
.ofi__card {
  position: absolute; top: 70px; padding: 14px 18px; border-radius: 16px; min-width: 150px;
  background: linear-gradient(160deg, rgba(36, 28, 42, .8), rgba(20, 18, 24, .9)); border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.ofi__card--nous { left: 0; rotate: -4deg; }
.ofi__card--vous { right: 0; rotate: 4deg; transition-delay: .15s; }
.ofi.is-in .ofi__card { opacity: 1; transform: translateY(0); animation: ofi-bob 7s ease-in-out 1s infinite; }
.ofi.is-in .ofi__card--vous { animation-delay: -2.5s; }
@keyframes ofi-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.ofi__card small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
.ofi__card ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.ofi__card li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--text); opacity: .35; transition: opacity .5s var(--ease-out); }
.ofi__card li::before { content: '✓'; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: #fff; background: rgba(255, 255, 255, .08); transition: background .5s var(--ease-out); }
.ofi.is-in li { opacity: 1; }
.ofi.is-in li::before { background: var(--rose); }
.ofi.is-in li:nth-child(1) { transition-delay: .7s; } .ofi.is-in li:nth-child(1)::before { transition-delay: .7s; }
.ofi.is-in li:nth-child(2) { transition-delay: 1.1s; } .ofi.is-in li:nth-child(2)::before { transition-delay: 1.1s; }
.ofi.is-in li:nth-child(3) { transition-delay: 1.5s; } .ofi.is-in li:nth-child(3)::before { transition-delay: 1.5s; }
@media (max-width: 1180px) { .ofi { display: none; } }

.offer2 { overflow: hidden; }
.offer2__art { position: absolute; top: clamp(22px, 3vw, 34px); right: clamp(22px, 3vw, 34px); pointer-events: none; }
/* Lancement : anneau qui se remplit jusqu'à J+30 */
.ofa-launch { width: 78px; height: 78px; display: grid; place-items: center; }
.ofa-launch svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.ofa-ring__bg, .ofa-ring { fill: none; stroke-width: 5; }
.ofa-ring__bg { stroke: rgba(255, 255, 255, .08); }
.ofa-ring { stroke: var(--rose); stroke-linecap: round; stroke-dasharray: 170; stroke-dashoffset: 170; filter: drop-shadow(0 0 6px rgba(238, 28, 122, .55)); transition: stroke-dashoffset 1.8s var(--ease-out) .3s; }
.ofa-launch.is-in .ofa-ring { stroke-dashoffset: 0; }
.ofa-launch span { position: relative; text-align: center; font-size: 7px; line-height: 1.2; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; max-width: 54px; }
.ofa-launch b { display: block; font-size: 15px; color: var(--text); letter-spacing: -0.02em; text-transform: none; }
/* Go to market : agenda qui se remplit + 2 canaux */
.ofa-cal { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ofa-cal__grid { display: grid; grid-template-columns: repeat(5, 12px); gap: 4px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.ofa-cal__grid i { width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .07); transition: background .4s var(--ease-out), box-shadow .4s var(--ease-out), transform .4s var(--ease-out); }
.ofa-cal.is-in .ofa-cal__grid i.r { background: var(--rose); box-shadow: 0 0 8px rgba(238, 28, 122, .6); transform: scale(1); }
.ofa-cal__grid i.r { transform: scale(.6); }
.ofa-cal.is-in .ofa-cal__grid i.r:nth-child(2) { transition-delay: .3s; } .ofa-cal.is-in .ofa-cal__grid i.r:nth-child(4) { transition-delay: .45s; }
.ofa-cal.is-in .ofa-cal__grid i.r:nth-child(5) { transition-delay: .6s; } .ofa-cal.is-in .ofa-cal__grid i.r:nth-child(7) { transition-delay: .75s; }
.ofa-cal.is-in .ofa-cal__grid i.r:nth-child(9) { transition-delay: .9s; } .ofa-cal.is-in .ofa-cal__grid i.r:nth-child(10) { transition-delay: 1.05s; }
.ofa-cal.is-in .ofa-cal__grid i.r:nth-child(12) { transition-delay: 1.2s; } .ofa-cal.is-in .ofa-cal__grid i.r:nth-child(13) { transition-delay: 1.35s; }
.ofa-cal.is-in .ofa-cal__grid i.r:nth-child(15) { transition-delay: 1.5s; }
.ofa-cal__ch { display: flex; gap: 5px; }
.ofa-cal__ch em { font-style: normal; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: rgba(238, 28, 122, .25); border: 1px solid var(--rose-line); animation: ofa-pulse 2.4s ease-in-out infinite; }
.ofa-cal__ch em:last-child { animation-delay: 1.2s; background: rgba(10, 102, 194, .35); border-color: rgba(10, 102, 194, .6); }
@keyframes ofa-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (max-width: 560px) { .offer2__art { position: relative; top: auto; right: auto; align-self: flex-start; margin-bottom: 14px; } .ofa-launch { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) {
  .ofi__card, .ofa-ring, .ofa-cal__grid i, .ofi__card li, .ofi__card li::before { transition: none !important; }
  .ofi.is-in .ofi__card, .ofa-cal__ch em { animation: none !important; }
}