/* Landing page Docuse — charte noir / blanc / orange, cohérente avec l'application. */

:root {
  --orange: #f97316;
  --orange-dark: #ea580c;
  --orange-soft: #fff7ed;
  --black: #000000;
  --text: #333333;
  --muted: #666666;
  --bg: #f5f5f5;
  --border: #e5e5e5;
  --danger: #b91c1c;
  --r-lg: 25px;
  --r-md: 12px;
  --shadow: 0 4px 16px rgba(0, 0, 0, .10);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, .04);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--orange-dark); }
a:hover { color: var(--black); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
img, svg { max-width: 100%; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Structure ───────────────────────────────────────────────────────── */
.lp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.lp-section { padding: clamp(56px, 8vw, 96px) 24px; }
.lp-section--grey { background: var(--bg); }
.lp-section--hero { padding: clamp(48px, 7vw, 96px) 24px clamp(40px, 6vw, 80px); }
.lp-intro { max-width: 62ch; }

.lp-eyebrow {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  background: var(--orange-soft); color: var(--orange-dark);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.lp-section--grey .lp-eyebrow { background: #fff; }

h1, h2, h3, h4 { color: var(--black); text-wrap: pretty; }
.lp-h1 {
  margin: 20px 0 0; font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.08; letter-spacing: -.03em; font-weight: 700;
}
.lp-h2 {
  margin: 18px 0 0; font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.15; letter-spacing: -.02em; font-weight: 700;
}
.lp-lead {
  margin: 20px 0 0; font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6; color: var(--muted); max-width: 52ch; text-wrap: pretty;
}

.lp-grid { display: grid; gap: 20px; margin-top: 40px; }
.lp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.lp-grid--features { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.lp-grid--steps { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.lp-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px;
}
.lp-card--shadow { box-shadow: var(--shadow-soft); }
.lp-card h3 { margin: 12px 0 8px; font-size: 19px; font-weight: 600; }
.lp-card p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.lp-num { font-size: 13px; font-weight: 600; color: var(--orange); letter-spacing: .06em; }

.lp-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-md); background: var(--orange-soft);
}
.lp-feature h3 { margin: 18px 0 8px; font-size: 18px; }
.lp-step h3 { margin: 16px 0 8px; font-size: 17px; }
.lp-step p { font-size: 15px; line-height: 1.6; }
.lp-badge-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: var(--black); color: #fff; font-size: 15px; font-weight: 700;
}
.lp-badge-num--orange { background: var(--orange); }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: var(--r-md);
  font-family: inherit; font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lp-btn--primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.lp-btn--primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }
.lp-btn--outline { background: #fff; border-color: var(--black); color: var(--black); }
.lp-btn--outline:hover { background: var(--black); color: #fff; }
.lp-btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }

/* ── En-tête ─────────────────────────────────────────────────────────── */
.lp-header {
  position: sticky; top: 0; z-index: 60;
  background: #fff; border-bottom: 1px solid var(--border);
}
.lp-header-in {
  max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.lp-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--black); }
.lp-logo:hover { color: var(--black); }
.lp-logo-mark {
  width: 28px; height: 28px; border-radius: 9px; background: var(--orange);
  display: inline-flex; align-items: center; justify-content: center;
}
.lp-logo-txt { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.lp-nav { display: flex; align-items: center; gap: 28px; }
.lp-nav a { font-size: 15px; font-weight: 500; color: var(--text); text-decoration: none; }
.lp-nav a:hover { color: var(--black); }
.lp-header-right { display: flex; align-items: center; gap: 12px; }
.lp-login { font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; padding: 10px 6px; }
.lp-login:hover { color: var(--black); }

/* ── Hero ────────────────────────────────────────────────────────────── */
.lp-hero {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 64px);
}
.lp-hero-col { flex: 1 1 420px; min-width: 0; }
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.lp-mockup { width: 100%; height: auto; display: block; border-radius: var(--r-lg); box-shadow: var(--shadow); }

/* ── Apparition au défilement ────────────────────────────────────────── */
.lp-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.lp-reveal.is-visible { opacity: 1; transform: none; }
.no-js .lp-reveal { opacity: 1; transform: none; }

/* ── Configurateur ───────────────────────────────────────────────────── */
.cfg-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; margin-top: 40px; }
.cfg-main { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.cfg-block {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow-soft);
}
.cfg-block h3 { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.cfg-block > p { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--muted); }

.cfg-offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cfg-offre {
  border: 2px solid var(--border); background: #fff; border-radius: var(--r-md);
  padding: 20px; cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color .2s ease, background .2s ease;
}
.cfg-offre[aria-checked="true"] { border-color: var(--orange); background: var(--orange-soft); }
.cfg-offre-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cfg-offre-nom { font-size: 18px; font-weight: 700; color: var(--black); }
.cfg-dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 2px solid var(--border); background: #fff;
}
.cfg-offre[aria-checked="true"] .cfg-dot {
  border-color: var(--orange); background: var(--orange); box-shadow: inset 0 0 0 3px #fff;
}
/* Un bouton ne peut contenir que du contenu en ligne : ces span sont donc
   repassés en bloc pour retrouver un empilement vertical et des marges actives. */
.cfg-offre-desc, .cfg-offre-prix, .cfg-offre-inclus { display: block; }
.cfg-offre-desc { margin: 8px 0 14px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.cfg-offre-prix { font-size: 28px; font-weight: 700; color: var(--black); letter-spacing: -.02em; line-height: 1.1; }
.cfg-offre-prix span { display: inline; font-size: 15px; font-weight: 500; color: var(--muted); }
.cfg-offre-inclus { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

.cfg-row {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding: 22px 0; border-top: 1px solid var(--border); margin-top: 14px;
}
.cfg-row:last-child { padding-bottom: 4px; }
.cfg-row-txt { flex: 1 1 260px; min-width: 0; }
.cfg-row label { display: block; font-size: 16px; font-weight: 600; color: var(--black); }
.cfg-row-sub { margin: 2px 0 0; font-size: 14px; font-weight: 500; color: var(--text); }
.cfg-row-help { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.cfg-row-max { margin: 8px 0 0; font-size: 13px; font-weight: 500; color: var(--orange-dark); }
.cfg-row-max[hidden] { display: none; }

.cfg-stepper { display: flex; align-items: center; gap: 8px; }
.cfg-stepper button {
  width: 44px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: #fff; color: var(--black); font-size: 20px; font-weight: 600;
  cursor: pointer; line-height: 1; font-family: inherit; transition: border-color .15s ease;
}
.cfg-stepper button:hover:not(:disabled) { border-color: var(--black); }
.cfg-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.cfg-stepper input {
  width: 76px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: #fff; text-align: center; font-family: inherit;
  font-size: 17px; font-weight: 600; color: var(--black);
}

.cfg-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.cfg-champ--full { grid-column: 1 / -1; }
.cfg-champ label { display: block; font-size: 14px; font-weight: 600; color: var(--black); margin-bottom: 6px; }
.cfg-champ input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: #fff;
  font-family: inherit; font-size: 15px; color: var(--black);
}
.cfg-champ input[aria-invalid="true"] { border-color: var(--danger); }
.cfg-aide { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.cfg-erreur { margin: 4px 0 0; font-size: 13px; font-weight: 500; color: var(--danger); }
.cfg-erreur[hidden] { display: none; }

.cfg-roles { background: var(--orange-soft); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); }
.cfg-roles h3 { margin: 0 0 16px; font-size: 17px; font-weight: 700; }
.cfg-roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.cfg-roles h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.cfg-roles p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); }

/* ── Récapitulatif ───────────────────────────────────────────────────── */
.cfg-aside { flex: 1 1 340px; min-width: 0; max-width: 440px; position: sticky; top: 96px; }
.cfg-recap {
  background: var(--black); color: #fff; border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow);
}
.cfg-recap h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.cfg-recap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cfg-recap-periode { font-size: 13px; font-weight: 500; opacity: .72; }
.cfg-lignes { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.cfg-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cfg-ligne-titre { font-size: 15px; font-weight: 600; }
.cfg-ligne-detail { font-size: 13px; line-height: 1.5; opacity: .68; margin-top: 2px; }
.cfg-ligne-montant { font-size: 15px; font-weight: 600; white-space: nowrap; }
.cfg-sep { height: 1px; background: #333; margin: 22px 0; }
.cfg-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15px; }
.cfg-total + .cfg-total { margin-top: 10px; }
.cfg-total span:first-child { opacity: .72; }
.cfg-total span:last-child { font-weight: 600; }
.cfg-ttc {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid #333;
}
.cfg-ttc-label { font-size: 16px; font-weight: 600; }
.cfg-ttc-val { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--orange); }
.cfg-mention { margin: 8px 0 0; font-size: 13px; line-height: 1.5; opacity: .68; }
.cfg-submit {
  width: 100%; min-height: 54px; margin-top: 22px; border-radius: var(--r-md);
  background: var(--orange); border: 2px solid var(--orange); color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.cfg-submit:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.cfg-alerte { margin: 12px 0 0; font-size: 13px; font-weight: 500; color: var(--orange); }
.cfg-statut { margin: 12px 0 0; font-size: 13px; line-height: 1.5; opacity: .8; }
.cfg-alerte[hidden], .cfg-statut[hidden] { display: none; }
.cfg-engagement { margin: 14px 0 0; font-size: 12px; line-height: 1.5; opacity: .55; }

/* ── Questions fréquentes ────────────────────────────────────────────── */
.lp-faq { max-width: 860px; margin: 0 auto; }
.lp-faq h2 { margin: 18px 0 32px; }
.lp-faq-list { display: flex; flex-direction: column; gap: 12px; }
.lp-faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.lp-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-align: left; padding: 22px 26px; background: #fff; border: 0;
  font-family: inherit; font-size: 17px; font-weight: 600; color: var(--black); cursor: pointer;
}
.lp-faq-plus {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  background: var(--orange-soft); color: var(--orange);
  display: grid; place-items: center;
}
/* Un tracé vectoriel plutôt qu'un caractère « + » : les métriques d'une police
   ne centrent jamais ce glyphe exactement dans sa boîte. */
.lp-faq-plus svg { display: block; width: 14px; height: 14px; }
.lp-faq-q[aria-expanded="true"] .lp-faq-plus { transform: rotate(45deg); }
.lp-faq-a { margin: 0; padding: 0 26px 24px; font-size: 15px; line-height: 1.7; color: var(--muted); }

/* ── Réassurance ─────────────────────────────────────────────────────── */
.lp-trust {
  max-width: 1200px; margin: 0 auto; background: var(--orange-soft);
  border-radius: var(--r-lg); padding: clamp(28px, 4vw, 48px);
}
.lp-trust h2 { margin: 0 0 28px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
.lp-trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.lp-trust-item { display: flex; gap: 12px; align-items: flex-start; }
.lp-trust-item svg { flex: none; margin-top: 2px; }
.lp-trust-item h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.lp-trust-item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); }

/* ── Pied de page ────────────────────────────────────────────────────── */
.lp-footer { background: var(--black); color: #fff; padding: 56px 24px 48px; }
.lp-footer-in { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.lp-footer-brand { flex: 1 1 260px; min-width: 0; }
.lp-footer-brand p { margin: 14px 0 0; font-size: 14px; line-height: 1.65; opacity: .65; max-width: 38ch; }
.lp-footer-col { flex: 0 1 200px; }
.lp-footer-col h3 {
  margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; opacity: .55;
}
.lp-footer-links { display: flex; flex-direction: column; gap: 10px; }
.lp-footer-links a { font-size: 14px; color: #fff; text-decoration: none; opacity: .85; }
.lp-footer-links a:hover { opacity: 1; color: var(--orange); }
.lp-footer-bottom {
  max-width: 1200px; margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid #333; font-size: 13px; opacity: .5;
}

/* ── Barre de total sur mobile ───────────────────────────────────────── */
.cfg-barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none;
  background: #fff; border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .10);
  padding: 12px 16px; align-items: center; justify-content: space-between; gap: 12px;
}
.cfg-barre-lbl { font-size: 12px; color: var(--muted); }
.cfg-barre-val { font-size: 20px; font-weight: 700; color: var(--black); letter-spacing: -.02em; }
.cfg-barre button {
  min-height: 48px; padding: 0 20px; border-radius: var(--r-md);
  background: var(--orange); border: 2px solid var(--orange); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
}

@media (max-width: 899px) {
  /* La navigation par ancres et l'appel à l'action du header disparaissent,
     mais le lien de connexion reste : c'est la porte d'entrée des clients.
     L'appel à l'action est repris par le hero et par la barre fixe du bas. */
  .lp-nav { display: none; }
  .lp-header-right .lp-btn { display: none; }
  .cfg-aside { position: static; max-width: none; }
  .cfg-barre { display: flex; }
  body { padding-bottom: 84px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOUVEMENT ET INTERACTIONS
   Toutes les animations n'agissent que sur transform, opacity et filter,
   donc sur le compositeur, sans provoquer de recalcul de mise en page.
   Chaque effet est neutralisé par prefers-reduced-motion, tout en bas.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Sortie exponentielle : démarrage franc, arrivée très douce. C'est cette
     courbe qui donne l'impression de matière plutôt que de simple fondu. */
  --sortie: cubic-bezier(.16, 1, .3, 1);
  --ressort: cubic-bezier(.34, 1.4, .64, 1);
}

/* ── Progression de lecture ──────────────────────────────────────────── */
.lp-progres {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--orange), var(--orange-dark));
  z-index: 80; pointer-events: none;
}

/* ── En-tête qui se compacte ─────────────────────────────────────────── */
.lp-header {
  transition: box-shadow .4s var(--sortie), background-color .4s var(--sortie);
}
.lp-header-in { transition: height .4s var(--sortie); }
.lp-header.est-compact {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 24px rgba(0, 0, 0, .07);
}
.lp-header.est-compact .lp-header-in { height: 60px; }

/* ── Titre révélé mot à mot ──────────────────────────────────────────── */
.est-anime .mot {
  display: inline-block;
  opacity: 0;
  transform: translateY(.45em);
  filter: blur(10px);
  animation: motApparait .95s var(--sortie) forwards;
  animation-delay: calc(var(--i, 0) * 42ms);
}
@keyframes motApparait {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* Entrée en cascade des éléments du hero, après le titre */
.lp-entree {
  opacity: 0;
  transform: translateY(18px);
  animation: entree .9s var(--sortie) forwards;
  animation-delay: calc(240ms + var(--i, 0) * 110ms);
}
@keyframes entree {
  to { opacity: 1; transform: none; }
}

/* ── Maquette du tableau de bord qui se construit ────────────────────── */
.lp-mockup { opacity: 0; transform: translateY(26px) scale(.985); }
.lp-mockup.est-visible {
  animation: mockupEntree 1.1s var(--sortie) .15s forwards;
}
@keyframes mockupEntree {
  to { opacity: 1; transform: none; }
}
/* Les barres du graphique montent du sol, l'une après l'autre */
.lp-mockup .barre { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.lp-mockup.est-visible .barre {
  animation: barreMonte .85s var(--ressort) forwards;
  animation-delay: calc(700ms + var(--i, 0) * 85ms);
}
@keyframes barreMonte { to { transform: scaleY(1); } }
/* Les tuiles d'indicateurs se posent ensuite */
.lp-mockup .tuile { transform-box: fill-box; opacity: 0; transform: translateY(10px); }
.lp-mockup.est-visible .tuile {
  animation: entree .7s var(--sortie) forwards;
  animation-delay: calc(450ms + var(--i, 0) * 110ms);
}
/* Léger flottement continu, à peine perceptible */
.lp-mockup.est-visible { will-change: transform; }
.lp-flotte { animation: flotte 9s ease-in-out 1.6s infinite; }
@keyframes flotte {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ── Révélation au défilement, avec décalage en cascade ──────────────── */
.lp-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .85s var(--sortie) calc(var(--i, 0) * 90ms),
    transform .85s var(--sortie) calc(var(--i, 0) * 90ms);
}
.lp-reveal.is-visible { opacity: 1; transform: none; }
.no-js .lp-reveal { opacity: 1; transform: none; }

/* ── Cartes : élévation et halo qui suit le curseur ──────────────────── */
.lp-card, .cfg-block, .cfg-offre {
  position: relative;
  transition:
    transform .5s var(--sortie),
    box-shadow .5s var(--sortie),
    border-color .35s ease;
}
.lp-card::after, .cfg-offre::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(249, 115, 22, .10), transparent 65%
  );
}
@media (hover: hover) {
  .lp-card:hover, .cfg-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .09);
    border-color: #d6d6d6;
  }
  .lp-card:hover::after, .cfg-offre:hover::after { opacity: 1; }
}

/* Le numéro d'étape se remplit d'orange au survol de sa carte */
.lp-step .lp-badge-num { transition: background-color .35s ease, transform .5s var(--ressort); }
@media (hover: hover) {
  .lp-step:hover .lp-badge-num { background: var(--orange); transform: scale(1.1); }
}

/* Gros chiffres de la section « Le problème » */
.lp-num {
  font-size: 15px; letter-spacing: .1em;
  transition: letter-spacing .5s var(--sortie), color .3s ease;
}
@media (hover: hover) { .lp-card:hover .lp-num { letter-spacing: .22em; } }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.lp-btn { position: relative; overflow: hidden; isolation: isolate; }
/* Le bouton bordé se remplit depuis le bas */
.lp-btn--outline::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--black); transform: translateY(101%);
  transition: transform .45s var(--sortie);
}
.lp-btn--outline:hover::before { transform: translateY(0); }
.lp-btn--outline:hover { background: #fff; color: #fff; }
/* Le bouton plein reçoit un halo au survol */
.lp-btn--primary { transition: transform .4s var(--sortie), box-shadow .4s var(--sortie), background-color .2s; }
@media (hover: hover) {
  .lp-btn--primary:hover { box-shadow: 0 10px 28px rgba(249, 115, 22, .34); }
}
.lp-btn:active { transform: scale(.975); }

/* Attraction magnétique du curseur, pilotée en JS */
.lp-magnetique { transition: transform .35s var(--sortie); }

/* ── Configurateur ───────────────────────────────────────────────────── */
.cfg-offre { overflow: hidden; }
.cfg-offre[aria-checked="true"] { box-shadow: 0 10px 30px rgba(249, 115, 22, .14); }
.cfg-dot { transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease; }
.cfg-offre[aria-checked="true"] .cfg-dot { animation: pastille .45s var(--ressort); }
@keyframes pastille {
  0% { transform: scale(.6); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.cfg-stepper button { transition: border-color .2s ease, background-color .2s ease, transform .3s var(--ressort); }
.cfg-stepper button:active:not(:disabled) { transform: scale(.88); }
.cfg-stepper input { transition: border-color .25s ease, box-shadow .25s ease; }
.cfg-stepper input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249, 115, 22, .16); }

/* Les lignes du récapitulatif entrent par la droite */
.cfg-ligne { animation: ligneEntre .5s var(--sortie) backwards; }
@keyframes ligneEntre {
  from { opacity: 0; transform: translateX(14px); }
}
/* Le total pulse brièvement quand il change */
.cfg-ttc-val { transition: transform .45s var(--ressort); display: inline-block; }
.cfg-ttc-val.a-change { animation: totalPulse .55s var(--ressort); }
@keyframes totalPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.cfg-recap { transition: box-shadow .5s var(--sortie); }
.cfg-submit { position: relative; overflow: hidden; transition: background-color .2s, transform .35s var(--sortie), box-shadow .4s var(--sortie); }
@media (hover: hover) {
  .cfg-submit:hover { box-shadow: 0 12px 30px rgba(249, 115, 22, .4); transform: translateY(-2px); }
}
.cfg-submit:active { transform: scale(.98); }
.cfg-champ input { transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.cfg-champ input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249, 115, 22, .14); }

/* ── Questions fréquentes : ouverture fluide ─────────────────────────── */
.lp-faq-item { transition: border-color .35s ease, box-shadow .4s var(--sortie); }
.lp-faq-item:has(.lp-faq-q[aria-expanded="true"]) {
  border-color: #d6d6d6; box-shadow: 0 8px 26px rgba(0, 0, 0, .06);
}
.lp-faq-reponse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--sortie); }
.lp-faq-reponse.est-ouverte { grid-template-rows: 1fr; }
.lp-faq-reponse > div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s .45s;
}
.lp-faq-reponse.est-ouverte > div { visibility: visible; transition: visibility 0s; }
/* Sans JavaScript, aucun bouton ne fonctionne : on laisse tout ouvert. */
.no-js .lp-faq-reponse { grid-template-rows: 1fr; }
.no-js .lp-faq-reponse > div { visibility: visible; }
.lp-faq-plus { transition: transform .4s var(--ressort), background-color .3s ease, color .3s ease; }
.lp-faq-q[aria-expanded="true"] .lp-faq-plus { background: var(--orange); color: #fff; }

/* ── Réassurance : les coches se tracent ─────────────────────────────── */
.lp-trust-item svg polyline { stroke-dasharray: 22; stroke-dashoffset: 22; }
.lp-trust.est-visible svg polyline {
  animation: trace .7s var(--sortie) forwards;
  animation-delay: calc(200ms + var(--i, 0) * 130ms);
}
@keyframes trace { to { stroke-dashoffset: 0; } }
.lp-trust-item svg circle { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); }
.lp-trust.est-visible svg circle {
  animation: pastille .6s var(--ressort) forwards;
  animation-delay: calc(120ms + var(--i, 0) * 130ms);
}

/* ── Liens de pied de page ───────────────────────────────────────────── */
.lp-footer-links a {
  position: relative; width: fit-content;
  transition: opacity .25s ease, color .25s ease, transform .35s var(--sortie);
}
@media (hover: hover) { .lp-footer-links a:hover { transform: translateX(3px); } }
.lp-nav a { position: relative; }
.lp-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .4s var(--sortie);
}
.lp-nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ── Respect du réglage système de réduction des animations ──────────── */
@media (prefers-reduced-motion: reduce) {
  .lp-progres { display: none; }
  .est-anime .mot, .lp-entree, .lp-mockup, .lp-mockup .barre, .lp-mockup .tuile,
  .lp-trust.est-visible svg polyline, .lp-trust.est-visible svg circle, .cfg-ligne {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    stroke-dashoffset: 0 !important;
  }
  .lp-flotte { animation: none !important; }
  .lp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-faq-reponse { transition: none; }
  .lp-card:hover, .cfg-block:hover, .cfg-submit:hover, .lp-btn--primary:hover { transform: none; }
}

/* ── Ambiance lumineuse du hero ──────────────────────────────────────── */
/* Un halo orange très dilué qui respire lentement : il donne de la profondeur
   sans introduire de couleur supplémentaire ni de dégradé visible. */
.lp-section--hero { position: relative; overflow: hidden; }
.lp-section--hero::before {
  content: ''; position: absolute; z-index: -1;
  top: -22%; right: -12%; width: 62vw; height: 62vw; max-width: 820px; max-height: 820px;
  background: radial-gradient(circle, rgba(249, 115, 22, .10), transparent 62%);
  pointer-events: none;
  animation: respire 16s ease-in-out infinite;
}
@keyframes respire {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.14) translate(-2%, 3%); opacity: 1; }
}
.lp-section--hero > * { position: relative; }

/* ── Fil conducteur entre les étapes ─────────────────────────────────── */
.lp-step { position: relative; }
.lp-step::before {
  content: ''; position: absolute; top: 47px; left: 100%; width: 20px; height: 2px;
  background: var(--border); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .7s var(--sortie) calc(var(--i, 0) * 90ms + 350ms);
}
.lp-step.is-visible::before { transform: scaleX(1); }
.lp-step:last-child::before { content: none; }
@media (max-width: 1000px) { .lp-step::before { content: none; } }

/* ── Le configurateur entre aussi en scène ───────────────────────────── */
/* will-change est réservé aux blocs du formulaire : sur le récapitulatif, qui
   est collant, il créerait un bloc conteneur et perturberait le maintien. */
.cfg-main > .lp-reveal { will-change: transform, opacity; }
.cfg-aside.lp-reveal { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .lp-section--hero::before { animation: none; }
  .lp-step::before { transition: none; transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION LÉSIONS
   ═══════════════════════════════════════════════════════════════════════ */
.lp-lesions-grille {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.lp-liste-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.lp-liste-points li {
  position: relative; padding-left: 34px;
  font-size: 15.5px; line-height: 1.6; color: var(--text);
}
.lp-liste-points li::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--orange-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5,13 10,18 19,7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.lp-silhouette-hote { position: relative; display: grid; place-items: center; }
.lp-silhouette { width: 100%; max-width: 330px; height: auto; overflow: visible; }

/* Le squelette se dessine trait après trait */
.lp-silhouette .trait > * { stroke-dasharray: var(--l, 400); stroke-dashoffset: var(--l, 400); }
.lp-silhouette.est-visible .trait > * {
  animation: traceTrait 1s var(--sortie) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes traceTrait { to { stroke-dashoffset: 0; } }

/* Les points de lésion se posent ensuite, avec un halo qui respire */
.lp-silhouette .lesion { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.4); }
.lp-silhouette.est-visible .lesion {
  animation: poseLesion .6s var(--ressort) forwards;
  animation-delay: calc(1150ms + var(--i) * 190ms);
}
@keyframes poseLesion { to { opacity: 1; transform: scale(1); } }
.lp-silhouette .point { fill: var(--orange); }
.lp-silhouette .halo { fill: var(--orange); opacity: .18; transform-box: fill-box; transform-origin: 50% 50%; }
.lp-silhouette.est-visible .halo {
  animation: pulseHalo 2.6s ease-in-out infinite;
  animation-delay: calc(1450ms + var(--i) * 190ms);
}
@keyframes pulseHalo {
  0%, 100% { transform: scale(.75); opacity: .22; }
  50% { transform: scale(1.35); opacity: .05; }
}

.lp-etiquettes { position: absolute; inset: 0; pointer-events: none; }
.lp-etiquette {
  position: absolute; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
  font-size: 12.5px; font-weight: 600; color: var(--black);
  opacity: 0; transform: translateY(6px) scale(.94);
}
.lp-silhouette-hote.est-visible .lp-etiquette {
  animation: entreeEtiquette .55s var(--ressort) forwards;
  animation-delay: calc(1350ms + var(--i) * 190ms);
}
@keyframes entreeEtiquette { to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .lp-lesions-grille { grid-template-columns: 1fr; }
  .lp-silhouette { max-width: 260px; }
  .lp-etiquette { font-size: 11px; padding: 4px 9px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CYCLE DE VIE — le récit défile, la scène se transforme
   ═══════════════════════════════════════════════════════════════════════ */
.lp-cycle { background: var(--bg); padding: clamp(56px, 8vw, 96px) 0 0; }
.lp-cycle-entete { padding-bottom: clamp(24px, 4vw, 40px); }
.lp-cycle-collant { padding: 0 24px clamp(56px, 8vw, 96px); }
.lp-cycle-grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}

.lp-cycle-etapes { position: relative; list-style: none; margin: 0; padding: 0 0 0 30px; display: grid; gap: 8px; }
.lp-cycle-etapes > li {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--r-md);
  opacity: .38; transform: translateX(-4px);
  transition: opacity .5s var(--sortie), transform .5s var(--sortie), background-color .5s var(--sortie);
}
.lp-cycle-etapes > li.est-active { opacity: 1; transform: none; background: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, .06); }
.lp-cycle-etapes h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.lp-cycle-etapes p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 44ch; }
.lp-cycle-num {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: #e6e6e6; color: var(--muted);
  font-size: 14px; font-weight: 700;
  transition: background-color .45s var(--sortie), color .45s var(--sortie), transform .5s var(--ressort);
}
.est-active .lp-cycle-num { background: var(--orange); color: #fff; transform: scale(1.06); }

/* Jauge verticale : la progression du récit */
.lp-cycle-jauge {
  position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 2px; background: #e2e2e2; overflow: hidden;
}
.lp-cycle-jauge > span {
  display: block; width: 100%; height: 100%; border-radius: 2px;
  background: linear-gradient(180deg, var(--orange), var(--orange-dark));
  transform: scaleY(var(--part, 0)); transform-origin: 50% 0;
  transition: transform .35s linear;
}

.lp-cycle-scene {
  position: relative; aspect-ratio: 420 / 300;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .08); overflow: hidden;
}
.lp-vue {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transform: scale(.965) translateY(14px);
  transition: opacity .55s var(--sortie), transform .65s var(--sortie);
}
.lp-vue.est-active { opacity: 1; transform: none; }

/* Les animations internes ne se jouent que sur la vue affichée */
.lp-vue .champ, .lp-vue .curseur, .lp-vue .ligne,
.lp-vue .noeud > g, .lp-vue .tuile-kpi > g { opacity: 0; }
.lp-vue.est-active .champ { animation: entree .5s var(--sortie) forwards; animation-delay: calc(var(--i) * 90ms); }
.lp-vue.est-active .curseur { animation: saisie .45s var(--sortie) forwards; animation-delay: calc(320ms + var(--i) * 130ms); }
@keyframes saisie { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: scaleX(1); } }
.lp-vue .curseur { transform-box: fill-box; transform-origin: 0 50%; }

.lp-vue.est-active .ligne { animation: saisie .4s var(--sortie) forwards; animation-delay: calc(var(--i) * 95ms); }
.lp-vue .ligne { transform-box: fill-box; transform-origin: 0 50%; }
.lp-vue .tampon { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(2.2) rotate(-14deg); }
.lp-vue.est-active .tampon { animation: tamponne .5s var(--ressort) .75s forwards; }
@keyframes tamponne { to { opacity: 1; transform: scale(1) rotate(-14deg); } }

.lp-vue .branche > path { stroke-dasharray: 200; stroke-dashoffset: 200; }
.lp-vue.est-active .branche > path {
  animation: traceTrait .5s var(--sortie) forwards;
  animation-delay: calc(180ms + var(--i) * 80ms);
}
.lp-vue .noeud > g { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.9); }
.lp-vue.est-active .noeud > g {
  animation: poseLesion .5s var(--ressort) forwards;
  animation-delay: calc(var(--i) * 130ms);
}

.lp-vue .barre-kpi > rect { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.lp-vue.est-active .barre-kpi > rect {
  animation: barreMonte .7s var(--ressort) forwards;
  animation-delay: calc(380ms + var(--i) * 75ms);
}
.lp-vue.est-active .tuile-kpi > g { animation: entree .5s var(--sortie) forwards; animation-delay: calc(var(--i) * 110ms); }
.lp-vue.est-active .courbe { animation: traceTrait 1.1s var(--sortie) .9s forwards; }

@media (max-width: 980px) {
  /* Sur petit écran, le récit redevient une simple suite de blocs */
  .lp-cycle { min-height: 0 !important; }
  .lp-cycle-collant { position: static !important; height: auto !important; }
  .lp-cycle-grille { grid-template-columns: 1fr; }
  .lp-cycle-etapes > li { opacity: 1; transform: none; background: #fff; }
  .lp-cycle-etapes .lp-cycle-num { background: var(--orange); color: #fff; }
  .lp-cycle-jauge { display: none; }
  .lp-cycle-scene { order: -1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   INDICATEURS — rupture sombre
   ═══════════════════════════════════════════════════════════════════════ */
.lp-indicateurs {
  background: var(--black); color: #fff;
  padding: clamp(64px, 9vw, 112px) 24px;
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
  margin-top: -1px; position: relative; overflow: hidden;
}
.lp-indicateurs::before {
  content: ''; position: absolute; top: -30%; left: 50%; width: 80vw; height: 80vw;
  max-width: 900px; max-height: 900px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(249, 115, 22, .16), transparent 62%);
  pointer-events: none;
}
.lp-indicateurs > * { position: relative; }
.lp-eyebrow--sombre { background: rgba(249, 115, 22, .16); color: #fdba74; }
.lp-h2--clair { color: #fff; }
.lp-lead--clair { color: rgba(255, 255, 255, .7); max-width: 62ch; }

.lp-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px; margin: clamp(36px, 5vw, 56px) 0;
}
.lp-kpi {
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-lg);
  padding: 26px 24px; background: rgba(255, 255, 255, .035);
  opacity: 0; transform: translateY(20px);
  transition:
    opacity .8s var(--sortie) calc(var(--i) * 110ms),
    transform .8s var(--sortie) calc(var(--i) * 110ms),
    border-color .4s ease, background-color .4s ease;
}
.lp-indicateurs.est-visible .lp-kpi { opacity: 1; transform: none; }
@media (hover: hover) {
  .lp-kpi:hover { border-color: rgba(249, 115, 22, .5); background: rgba(249, 115, 22, .07); }
}
.lp-kpi-sigle {
  display: inline-block; padding: 3px 9px; border-radius: 7px;
  background: rgba(249, 115, 22, .16); color: #fdba74;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
}
.lp-kpi-val {
  display: block; margin: 16px 0 6px;
  font-size: clamp(38px, 5vw, 52px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.lp-kpi-lbl { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .6); }

.lp-bird {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(255, 255, 255, .1);
}
.lp-bird-txt h3 { margin: 0 0 12px; font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; color: #fff; }
.lp-bird-txt p { margin: 0 0 10px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .68); }
.lp-mention-exemple { font-size: 12.5px !important; color: rgba(255, 255, 255, .38) !important; }

.lp-bird-viz { display: grid; gap: 10px; justify-items: center; }
.lp-bird-niv {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; border-radius: 14px; color: #fff;
  font-size: 13.5px; font-weight: 500;
  opacity: 0; transform: scaleX(.75) translateY(10px); transform-origin: 50% 50%;
  transition:
    opacity .7s var(--sortie) calc(var(--i) * 130ms),
    transform .8s var(--ressort) calc(var(--i) * 130ms);
}
.lp-bird-niv b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-bird-niv:nth-child(1) { width: 46%; background: linear-gradient(135deg, #dc2626, #991b1b); }
.lp-bird-niv:nth-child(2) { width: 62%; background: linear-gradient(135deg, #ea580c, #c2410c); }
.lp-bird-niv:nth-child(3) { width: 80%; background: linear-gradient(135deg, #f97316, #ea580c); }
.lp-bird-niv:nth-child(4) { width: 100%; background: linear-gradient(135deg, #fb923c, #f97316); }
.lp-indicateurs.est-visible .lp-bird-niv { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .lp-bird { grid-template-columns: 1fr; }
  .lp-bird-niv { font-size: 12.5px; padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-silhouette .trait > *, .lp-silhouette .lesion, .lp-silhouette .halo,
  .lp-etiquette, .lp-vue .champ, .lp-vue .curseur, .lp-vue .ligne,
  .lp-vue .noeud > g, .lp-vue .tuile-kpi > g, .lp-vue .barre-kpi > rect,
  .lp-vue .branche > path, .lp-vue .tampon, .lp-vue .courbe {
    animation: none !important; opacity: 1 !important;
    transform: none !important; stroke-dashoffset: 0 !important;
  }
  .lp-kpi, .lp-bird-niv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-cycle-etapes > li { opacity: 1; }
}

/* ── Récit collant, uniquement sur grand écran ───────────────────────── */
@media (min-width: 981px) {
  /* Une hauteur d'écran par étape, plus une pour lire l'ensemble */
  .lp-cycle { min-height: 420vh; }
  .lp-cycle-collant {
    position: sticky; top: 0; min-height: 100vh;
    display: flex; align-items: center;
  }
}

/* ── Relief des cartes de fonctionnalités ────────────────────────────── */
/* Le survol passe par des variables : le script n'a qu'à écrire --rx et --ry,
   sans jamais entrer en conflit avec l'élévation gérée en CSS. */
.lp-grid--features { perspective: 1100px; }
.lp-feature {
  transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
}
@media (hover: hover) {
  .lp-card.lp-feature:hover { transform: translateY(var(--ty, -5px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .lp-feature:hover { --ty: -5px; }
}
.lp-feature > * { transform: translateZ(18px); }

@media (prefers-reduced-motion: reduce) {
  .lp-feature { transform: none !important; }
  .lp-feature > * { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODÈLE 3D — le vrai fichier de l'application, chargé en différé
   La silhouette SVG reste affichée tant que la 3D n'est pas prête, et
   définitivement si elle ne peut pas l'être.
   ═══════════════════════════════════════════════════════════════════════ */
.lp-corps3d {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .9s var(--sortie);
}
.lp-corps3d canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; }
.est-manipule .lp-corps3d canvas { cursor: grabbing; }

.est-en-3d .lp-corps3d { opacity: 1; pointer-events: auto; }
/* La silhouette et ses étiquettes s'effacent, mais gardent leur place :
   c'est elle qui donne sa hauteur au bloc, donc au canvas. */
.est-en-3d .lp-silhouette,
.est-en-3d .lp-etiquettes { opacity: 0; pointer-events: none; transition: opacity .6s ease; }

.lp-etiquettes3d { position: absolute; inset: 0; pointer-events: none; }
.lp-etiquette3d {
  position: absolute; top: 0; left: 0; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
  font-size: 12.5px; font-weight: 600; color: var(--black);
  opacity: 0; transition: opacity .25s ease;
  will-change: transform;
}

.lp-corps3d-aide {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  display: none; align-items: center; gap: 7px; margin: 0;
  font-size: 12.5px; font-weight: 500; color: var(--light);
}
.lp-corps3d-aide svg { width: 15px; height: 15px; }
.est-en-3d .lp-corps3d-aide { display: inline-flex; animation: entree .6s var(--sortie) .4s backwards; }
.est-manipule .lp-corps3d-aide { opacity: 0; transition: opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .lp-corps3d { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE DE CONFIRMATION DE SOUSCRIPTION
   ═══════════════════════════════════════════════════════════════════════ */
.sc-page { max-width: 660px; margin: 0 auto; }
.sc-entete { text-align: center; margin-bottom: 36px; }
.sc-coche {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 22px;
  border-radius: 20px; background: var(--orange-soft); color: var(--orange);
  animation: poseLesion .6s var(--ressort) backwards;
}
.sc-coche svg { width: 30px; height: 30px; }

.sc-bloc {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow-soft);
}
.sc-bloc + .sc-bloc { margin-top: 18px; }
.sc-bloc h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.sc-bloc--acces { border-color: var(--orange); box-shadow: 0 10px 34px rgba(249, 115, 22, .14); }

.sc-avertissement {
  margin: 0 0 20px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--orange-soft); color: #9a3412;
  font-size: 13.5px; line-height: 1.55;
}

.sc-champ {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid var(--border);
}
.sc-champ-lbl { flex: 0 0 150px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.sc-valeur {
  flex: 1 1 200px; min-width: 0; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--bg); border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; color: var(--black); word-break: break-all;
}
.sc-valeur--motdepasse { font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.sc-copier {
  flex: none; padding: 9px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.sc-copier:hover { border-color: var(--black); color: var(--black); }
.sc-copier.est-copie { background: var(--orange); border-color: var(--orange); color: #fff; }

.sc-recap { margin: 18px 0 0; display: grid; gap: 10px; }
.sc-recap > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sc-recap dt { font-size: 14px; color: var(--muted); margin: 0; }
.sc-recap dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--black); }
.sc-recap code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }
.sc-recap-total { padding-top: 12px; border-top: 1px solid var(--border); }
.sc-recap-total dd { font-size: 19px; }
.sc-recap-total dd span { font-size: 13.5px; font-weight: 500; color: var(--muted); }

.sc-note { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.sc-aide { margin: 24px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }

@media (max-width: 560px) {
  .sc-champ-lbl { flex: 1 1 100%; }
}

/* ── Rapports automatiques, dans la section sombre ───────────────────── */
.lp-rapports {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(255, 255, 255, .1);
}
.lp-rapport {
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-lg);
  padding: 24px; background: rgba(255, 255, 255, .035);
  transition: border-color .4s ease, background-color .4s ease;
}
@media (hover: hover) {
  .lp-rapport:hover { border-color: rgba(249, 115, 22, .5); background: rgba(249, 115, 22, .07); }
}
.lp-rapport-tag {
  display: inline-block; padding: 3px 9px; border-radius: 7px;
  background: rgba(249, 115, 22, .16); color: #fdba74;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.lp-rapport h3 { margin: 14px 0 8px; font-size: 18px; font-weight: 700; color: #fff; }
.lp-rapport p { margin: 0; font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .68); }