/* Version simplifiée — compléments de style (chargé après styles.css, prototype uniquement). */

/* S01 */
.hero-s .eyebrow { align-items: flex-start; letter-spacing: .22em; line-height: 1.55; margin-bottom: calc(var(--u) * 1.5); }
.hero-s .eyebrow::before { margin-top: .55em; }
.hero-s .eyebrow b { font-weight: 700; }
.cta-micro { margin-top: calc(var(--u) * 1.1); font-size: max(12.5px, calc(var(--u) * .9)); color: var(--ink-3); }

/* micro-ligne sous les cartes */
.cards-note {
  position: absolute; left: 40.55%; top: 55.5%; width: calc(var(--u) * 31.3);
  padding: calc(var(--u) * .85) calc(var(--u) * 1.3) calc(var(--u) * .85) calc(var(--u) * 3.4);
  border-radius: calc(var(--u) * .7);
  font-size: max(12.5px, calc(var(--u) * .92)); line-height: 1.35; color: var(--ink);
  background: linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(255, 250, 243, .6));
  border: 1px solid rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 2.4) calc(var(--u) * -1.6) rgba(90, 60, 20, .45);
}
.cards-note::before { content: ""; position: absolute; left: calc(var(--u) * 1.3); top: 50%; width: calc(var(--u) * 1.4); height: 2px; margin-top: -1px; background: var(--gold); }

/* header : petit CTA à la place du filet décoratif */
.header-cta { display: inline-flex; align-items: center; flex: none; margin-left: auto; padding: .62em 1.2em; border-radius: 999px; font-size: max(12.5px, calc(var(--u) * .88)); font-weight: 600; white-space: nowrap; color: var(--ink); background: rgba(255, 253, 249, .7); box-shadow: inset 0 0 0 1.5px var(--gold); transition: background-color .25s; }
.header-cta:hover { background: var(--gold); }
.parent-brand { margin-left: calc(var(--u) * 1.6); }
/* le header gagne de la place : nav plus proche du logo, liens insécables, signature masquée sous 1400px */
.nav { margin-left: calc(var(--u) * 4.5); }
.nav ul { gap: calc(var(--u) * 2.2); }
.nav a { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1399px) { .nav ul { gap: calc(var(--u) * 1.8); } }

/* S02 — cinq douleurs, une ligne chacune */
.pain-panel--short li { align-items: center; padding: calc(var(--u) * 1.05) 0; }
.pain-panel--short h3 { font-size: max(14.5px, calc(var(--u) * 1.08)); font-weight: 500; line-height: 1.3; }

/* S03 — quatre cartes reliées */
.opportunity { position: absolute; left: 34%; right: 3.5%; top: 50%; translate: 0 -50%; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: calc(var(--u) * 3); }
.opp-card {
  position: relative; text-align: center;
  min-height: calc(var(--u) * 17);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 1.2) calc(var(--u) * 2.2);
  border-radius: calc(var(--u) * .9);
  background: linear-gradient(180deg, rgba(255, 252, 247, .86), rgba(252, 246, 238, .76));
  border: 1px solid rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 calc(var(--u) * 2.4) calc(var(--u) * 5) calc(var(--u) * -2.6) rgba(80, 50, 15, .55);
}
.opp-card > .icon { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); margin: 0 auto calc(var(--u) * 1.4); stroke-width: 1.25; }
.opp-card h3 { font-size: max(16px, calc(var(--u) * 1.3)); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.opp-card p { margin-top: calc(var(--u) * .6); font-size: max(13px, calc(var(--u) * .95)); color: var(--ink-3); }
.opp-card:last-child { background: linear-gradient(180deg, rgba(236, 188, 108, .92), rgba(201, 141, 64, .9)); border-color: rgba(255, 255, 255, .6); }
.opp-card:last-child p { color: rgba(14, 27, 42, .75); }
.opp-join { position: absolute; z-index: 2; right: calc(var(--u) * -2.6); top: 50%; translate: 0 -50%; display: grid; place-items: center; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); color: var(--gold-lo); }
.opp-join .icon { width: 100%; height: 100%; stroke-width: 2; filter: drop-shadow(0 1px 6px rgba(255, 255, 255, .7)); }

/* S06 — liste « brings » + ligne de preuve */
.brings__label { margin-top: calc(var(--u) * 2); font-size: max(10.5px, calc(var(--u) * .78)); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-hi); }
.brings { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .5) calc(var(--u) * 2); width: calc(var(--u) * 30); max-width: 100%; margin-top: calc(var(--u) * 1); }
.brings li { display: flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .7) 0; border-bottom: 1px solid rgba(255, 255, 255, .18); font-size: max(14px, calc(var(--u) * 1.08)); font-weight: 500; }
.brings .icon { width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); stroke-width: 1.4; color: var(--gold-hi); }
.proofline { max-width: calc(var(--u) * 30); margin-top: calc(var(--u) * 2.2); font-size: max(13px, calc(var(--u) * .95)); line-height: 1.4; color: rgba(255, 255, 255, .8); }
.proofline span { display: block; margin-top: calc(var(--u) * .7); font-size: max(11px, calc(var(--u) * .8)); letter-spacing: .22em; text-transform: uppercase; color: #fff; }

/* prototype switcher (partagé) */
.proto-switch { position: fixed; left: 14px; bottom: 14px; z-index: 90; display: flex; align-items: center; gap: 4px; padding: 5px 6px 5px 12px; border-radius: 999px; background: rgba(14, 27, 42, .92); color: #fff; font: 500 12px/1 var(--sans); letter-spacing: .04em; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.proto-switch span { opacity: .6; margin-right: 6px; }
.proto-switch a { padding: 7px 11px; border-radius: 999px; color: #fff; }
.proto-switch a:hover { background: rgba(255, 255, 255, .12); }
.proto-switch a.is-on { background: var(--gold); color: var(--ink); font-weight: 700; }

/* ── Sous 1100px ──────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .header-cta { margin-right: 14px; padding: 9px 14px; font-size: 13px; }
  .burger { margin-left: 0; }
  .cards-note { position: static; width: auto; margin: 18px var(--pad) 0; padding: 12px 16px 12px 42px; border-radius: 12px; }
  .cards-note::before { left: 16px; width: 16px; }
}
@media (max-width: 419px) {
  .header-cta { display: none; }   /* le menu burger contient déjà le bouton */
}

/* ── Tablette ─────────────────────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1099px) {
  .cards-note { margin-top: -30px; margin-bottom: 40px; }
  .opportunity { position: relative; inset: auto; translate: none; z-index: 2; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: -96px var(--pad) 64px; }
  .opp-card { min-height: 0; padding: 28px 18px 26px; border-radius: 14px; }
  .opp-join { display: none; }
  .brings { width: auto; }
}

/* ── Téléphone ────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .hero-s .eyebrow { letter-spacing: .2em; font-size: 11px; }
  .cards-note { margin-top: 14px; font-size: .9rem; }
  .cta-micro { text-align: center; margin-top: 12px; }
  .hero-s .slide__shade { background: linear-gradient(180deg, rgba(var(--cream-rgb), .95) 0%, rgba(var(--cream-rgb), .92) 48%, rgba(var(--cream-rgb), .6) 60%, rgba(var(--cream-rgb), 0) 74%); }
  .pain-panel--short li { padding: 12px 0; }
  .pain-panel--short h3 { font-size: .98rem; }
  .solution-s .slide__inner { padding-bottom: 56px; }
  .opportunity { position: static; translate: none; grid-template-columns: 1fr; row-gap: 34px; margin-top: 30px; }
  .opp-card { display: grid; grid-template-columns: 29% 1fr; align-items: center; text-align: left; min-height: 0; padding: 20px 16px 20px 0; border-radius: 20px; background: rgba(255, 253, 249, .9); }
  .opp-card > .icon { grid-row: span 2; width: 44px; height: 44px; margin: 0 auto; }
  .opp-card h3 { padding-left: 18px; border-left: 1px solid var(--hair); font-size: 1.2rem; }
  .opp-card p { grid-column: 2; margin-top: 4px; padding-left: 18px; border-left: 1px solid var(--hair); font-size: .95rem; }
  .opp-card:last-child h3, .opp-card:last-child p { border-left-color: rgba(14, 27, 42, .18); }
  .opp-join { right: auto; left: 50%; top: auto; bottom: -37px; translate: -50% 0; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: linear-gradient(160deg, #e2a552, #b9782f); box-shadow: 0 6px 14px rgba(120, 72, 16, .35); }
  .opp-join .icon { width: 20px; height: 20px; stroke-width: 2.2; filter: none; }
  .brings { grid-template-columns: 1fr; width: auto; gap: 0; }
  .brings li { gap: 14px; padding: 13px 0; font-size: 1.02rem; }
  .brings .icon { width: 30px; height: 30px; }
  .proofline { max-width: none; margin-top: 30px; font-size: .95rem; }
  .proto-switch { left: 10px; bottom: 10px; font-size: 11px; }
}