/* Pages solutions (Greg 07/10). Les styles communs (variables, menu, boutons,
   pied de page, FAQ, cadre vidéo) viennent de base.css, extrait de l'accueil. */

.sp-page main { overflow-x: clip; }
.sp-centre { text-align: center; margin-left: auto; margin-right: auto; }

/* Titres de section : même typographie que l'accueil (Fraunces + italique bleu). */
/* Marges haut/bas seulement : un raccourci « margin » écraserait les marges
   automatiques de .sp-centre et collerait les titres centrés à gauche. */
.sp-h2 {
  margin-top: 0;
  margin-bottom: 16px;
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  font-weight: 600;
  max-width: 920px;
}
/* Lignes équilibrées : pas de mot seul sur la dernière ligne d'un titre. */
.sp-h2, .sp-hero h1, .sp-bande h3, .sp-carte h3 { text-wrap: balance; }
.sp-h2 .serif,
.sp-hero h1 .serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--brand-600);
}
.sp-surtitre {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-600);
}

/* ----- Hero ----- */
.sp-hero { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 72px; }
@media (min-width: 1024px) { .sp-hero { padding: 88px 0 104px; } }
.sp-hero-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 22px;
}
.sp-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); }
.sp-hero h1 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink-900);
  font-weight: 600;
}
.sp-sous { margin: 0 0 28px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--ink-500); max-width: 560px; }
.sp-ctas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Ligne de confiance : texte puis logo Shopify (Greg 08/10). */
.sp-confiance { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-500); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sp-confiance .logo-shopify { display: inline-block; height: 15px; width: auto; }
.sp-confiance-fin { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Lien d'installation sous chaque bande, comme sur l'accueil. */
.sp-lien-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink-900);
  text-decoration: none;
  border-bottom: 2px solid var(--ink-900);
  padding-bottom: 3px;
}
.sp-lien-cta svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease-out); }
.sp-lien-cta:hover svg { transform: translateX(4px); }
/* Bouton d'installation au milieu de la page (après le comparatif, après l'installation). */
.sp-cta-milieu { margin-top: 44px; }
.sp-cta-milieu .sp-ctas, .sp-final .sp-ctas { justify-content: center; }
.sp-cta-milieu .sp-confiance, .sp-final .sp-confiance { justify-content: center; }
.sp-probleme-texte { margin: 0; max-width: 780px; font-size: 17px; line-height: 1.7; color: var(--ink-500); }
.sp-final-texte { margin: 0 auto 26px; max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--ink-500); }
.sp-points li > span { display: flex; flex-direction: column; gap: 3px; }
.sp-points strong { font-weight: 600; color: var(--ink-900); }
.sp-points li > span > span { color: var(--ink-500); font-size: 15px; }
.sp-hero-visuel .parcours-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-500); text-align: center; }
.sp-ecran video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #f6f7fb; }
/* Lecture refusée par le navigateur (iPhone en économie d'énergie) ou animations réduites :
   bouton de lecture au centre de la vidéo, sous la barre d'adresse (Greg 23/10). */
.sp-ecran { position: relative; }
.sp-ecran.sp-bloquee { cursor: pointer; }
.sp-lecture { position: absolute; left: 50%; top: calc(50% + 20px); transform: translate(-50%, -50%); display: none; place-items: center; width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%; background: var(--brand-600); color: #fff; cursor: pointer; box-shadow: 0 14px 34px -10px rgba(15,30,80,.55); -webkit-tap-highlight-color: transparent; }
.sp-lecture svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.sp-lecture:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sp-ecran.sp-bloquee .sp-lecture { display: grid; }
@media (max-width: 640px) { .sp-lecture { top: calc(50% + 15px); width: 58px; height: 58px; } .sp-lecture svg { width: 26px; height: 26px; margin-left: 3px; } }
.sp-image { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(15,30,80,.08); box-shadow: 0 30px 80px -30px rgba(15,30,80,.28), 0 8px 24px -12px rgba(15,30,80,.12); }
.sp-image img { display: block; width: 100%; height: auto; }

/* ----- Problème : la chaîne de la perte ----- */
.sp-probleme { padding: 96px 0 72px; background: #fff; }
.sp-chaine { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: maillon; }
.sp-chaine li { position: relative; padding: 26px 24px 24px; border-radius: 20px; background: var(--ink-50); border: 1px solid var(--ink-100); }
.sp-chaine li:last-child { background: #fef2f2; border-color: #fee2e2; }
.sp-chaine li + li::before {
  content: '→';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ink-200);
  color: var(--ink-500);
  font-size: 13px;
}
.sp-chaine-num { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 1px solid var(--ink-200); font-size: 13px; font-weight: 600; color: var(--ink-700); margin-bottom: 14px; }
.sp-chaine h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900); }
.sp-chaine p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-500); }

/* ----- Définition ----- */
.sp-def { padding: 72px 0; background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); }
.sp-def-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sp-def-texte { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-500); }
.sp-puces { list-style: none; margin: 0; padding: 26px; display: grid; gap: 16px; border-radius: 22px; background: #fff; border: 1px solid var(--ink-100); box-shadow: 0 24px 60px -36px rgba(15,30,80,.3); }
.sp-puces li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--ink-700); }
.sp-coche { flex-shrink: 0; display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-50); color: var(--brand-600); }
.sp-coche svg { width: 14px; height: 14px; }

/* ----- Capacités : bandes texte / visuel + cartes ----- */
.sp-capacites { padding: 88px 0 64px; background: #f8fafc; }
.sp-bande { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; margin-bottom: 72px; }
.sp-bande-inverse .sp-bande-texte { order: 2; }
.sp-bande h3 { margin: 0 0 14px; font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.025em; color: var(--ink-900); font-weight: 600; }
.sp-bande p { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--ink-500); }
.sp-bande-visuel .parcours-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-500); text-align: center; }
.sp-cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Encadré sous le texte d'une bande, bloc titré à cartes (Quiz IA, 08/10). */
.sp-encart { margin: 22px 0 0; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--ink-100); border-left: 3px solid var(--brand-500); box-shadow: 0 18px 40px -32px rgba(15,30,80,.35); }
.sp-encart h4 { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900); text-wrap: balance; }
.sp-bande .sp-encart p { font-size: 15px; line-height: 1.6; }
.sp-bloc { margin: 0 0 80px; }
.sp-bande-puces { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.sp-bande-puces li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.sp-suite { padding-top: 96px; }
/* Étiquettes sous le texte d'une bande, duo de cartes pour les sections courtes (Support, 08/10). */
.sp-etiquettes { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-etiquettes li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-700); background: #fff; border: 1px solid var(--ink-200); border-radius: 999px; padding: 7px 13px; }
.sp-etiquettes li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); flex-shrink: 0; }
.sp-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 80px; }
.sp-duo-carte { padding: 34px; border-radius: 24px; background: #fff; border: 1px solid var(--ink-100); box-shadow: 0 24px 60px -40px rgba(15,30,80,.35); }
.sp-duo-carte .nav-sol-ico { margin-bottom: 18px; }
.sp-duo-carte h3 { margin: 0 0 12px; font-family: var(--display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; color: var(--ink-900); text-wrap: balance; }
.sp-duo-carte p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-500); }
.sp-suite .sp-bande:last-child { margin-bottom: 24px; }
.sp-bloc-titre { margin-top: 0; margin-bottom: 14px; max-width: 760px; font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.025em; color: var(--ink-900); font-weight: 600; text-wrap: balance; }
.sp-bloc-texte { margin-top: 0; margin-bottom: 32px; max-width: 720px; font-size: 16.5px; line-height: 1.7; color: var(--ink-500); }
.sp-cartes-3 { grid-template-columns: repeat(3, 1fr); }
.sp-cartes-6 { grid-template-columns: repeat(3, 1fr); }
/* Cartes numérotées 01, 02… (Données, « de la donnée à l'action »). */
.sp-cartes-numeros { counter-reset: carte; }
.sp-cartes-numeros .sp-carte::before { counter-increment: carte; content: "0" counter(carte); display: block; margin-bottom: 12px; font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--brand-600); }
.sp-encart + .sp-encart { margin-top: 12px; }
.sp-etiquettes-titre { margin: 20px 0 0 !important; font-size: 14px !important; font-weight: 600; color: var(--ink-900) !important; }
.sp-etiquettes-titre + .sp-etiquettes { margin-top: 10px; }
/* Boucle dessinée en HTML (Données, 08/10) : étapes reliées par des flèches, la dernière mise en avant. */
.sp-flux { list-style: none; margin: 0; padding: 36px 28px; display: flex; flex-direction: column; align-items: center; border-radius: 24px; background: radial-gradient(60% 60% at 50% 40%, #fff 0%, rgba(255,255,255,0) 75%), linear-gradient(160deg, #e8f1ff, #d6e6ff); border: 1px solid rgba(59,130,246,.12); }
.sp-flux li { position: relative; width: min(100%, 300px); padding: 14px 18px; border-radius: 14px; background: #fff; text-align: center; font-size: 15.5px; font-weight: 600; color: var(--ink-900); box-shadow: 0 16px 34px -22px rgba(30,64,175,.45); }
.sp-flux li + li { margin-top: 34px; }
.sp-flux li + li::before { content: ""; position: absolute; left: 50%; top: -28px; width: 2px; height: 20px; background: var(--brand-500); transform: translateX(-50%); }
.sp-flux li + li::after { content: ""; position: absolute; left: 50%; top: -12px; border: 6px solid transparent; border-top-color: var(--brand-500); transform: translateX(-50%); }
.sp-flux li:last-child { background: var(--brand-600); color: #fff; }
.sp-carte { padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--ink-100); box-shadow: 0 18px 40px -32px rgba(15,30,80,.35); }
.sp-carte h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900); }
.sp-carte p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-500); }

/* ----- Avec / sans ----- */
.sp-comp { padding: 96px 0; background: #fff; }
.sp-table { margin: 40px auto 0; max-width: 1000px; border: 1px solid var(--ink-200); border-radius: 22px; overflow: hidden; background: #fff; }
.sp-ligne { display: grid; grid-template-columns: 1fr 1fr 1.15fr; }
.sp-ligne + .sp-ligne { border-top: 1px solid var(--ink-100); }
.sp-ligne > span { padding: 18px 20px; font-size: 15px; line-height: 1.5; display: flex; gap: 10px; align-items: flex-start; }
.sp-tete > span { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); background: var(--ink-50); padding-top: 14px; padding-bottom: 14px; }
.sp-tete .sp-avec { color: var(--brand-700); background: var(--brand-50); }
.sp-moment { font-weight: 600; color: var(--ink-900); }
.sp-ligne .sp-sans { color: var(--ink-500); }
.sp-ligne .sp-avec { color: var(--ink-900); background: rgba(239, 246, 255, 0.55); }
.sp-ligne i { flex-shrink: 0; display: inline-flex; width: 20px; height: 20px; margin-top: 1px; }
.sp-ligne i svg { width: 100%; height: 100%; }
.sp-sans i { color: #f87171; }
.sp-avec i { color: var(--brand-600); }

/* ----- Garde-fous ----- */
.sp-controle { padding: 32px 0 96px; background: #fff; }
.sp-controle-grille { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ----- Étapes ----- */
.sp-etapes { padding: 96px 0; background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); }
.sp-etapes-sous { margin: 0 auto; font-size: 17px; color: var(--ink-500); max-width: 620px; }
.sp-etapes-grille { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sp-etape { padding: 28px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--ink-100); box-shadow: 0 18px 40px -32px rgba(15,30,80,.35); }
.sp-etape-num { display: block; font-family: var(--display); font-size: 34px; font-weight: 600; color: var(--brand-600); letter-spacing: -0.03em; margin-bottom: 12px; }
.sp-etape h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900); }
.sp-etape p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-500); }

/* ----- Les autres solutions ----- */
.sp-autres { padding: 96px 0; background: #fff; }
.sp-autres-grille { margin-top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.sp-autre { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; border-radius: 20px; border: 1px solid var(--ink-100); background: #fff; text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease-out); }
.sp-autre:hover { border-color: var(--brand-200); box-shadow: 0 24px 50px -32px rgba(37,99,235,.45); transform: translateY(-2px); }
.sp-autre-titre { font-size: 16px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.015em; }
.sp-autre-desc { font-size: 14px; line-height: 1.55; color: var(--ink-500); flex: 1; }
.sp-autre-lien { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--brand-600); }
.sp-autre-lien svg { width: 13px; height: 13px; }

/* ----- FAQ (styles .fq de base.css) + appel final ----- */
.sp-page .fq { padding: 96px 0 72px; background: #f8fafc; }
.sp-final { padding: 96px 0 112px; background: radial-gradient(ellipse 900px 400px at 50% 0%, rgba(99,102,241,.12), transparent 70%), #fff; }
.sp-final .sp-ctas { justify-content: center; margin-top: 12px; }
.sp-final .sp-confiance { text-align: center; }

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  .sp-autres-grille { grid-template-columns: repeat(3, 1fr); }
  .sp-cartes { grid-template-columns: repeat(2, 1fr); }
  .sp-cartes-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .sp-hero-grille, .sp-def-grille, .sp-bande { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sp-bande-inverse .sp-bande-texte { order: 0; }
  .sp-duo { grid-template-columns: minmax(0, 1fr); }
  .sp-cartes-3 { grid-template-columns: minmax(0, 1fr); }
  .sp-hero-texte { text-align: center; }
  .sp-sous { margin-left: auto; margin-right: auto; }
  .sp-ctas, .sp-hero-texte .sp-confiance { justify-content: center; }
  .sp-chaine { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sp-chaine li + li::before { content: '↓'; left: 50%; top: -20px; transform: translateX(-50%); }
  .sp-controle-grille, .sp-etapes-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sp-hero { padding: 36px 0 56px; }
  .sp-probleme, .sp-comp, .sp-etapes, .sp-autres, .sp-page .fq, .sp-final { padding: 64px 0; }
  .sp-capacites { padding: 64px 0 48px; }
  .sp-bande { margin-bottom: 52px; }
  .sp-cartes, .sp-autres-grille { grid-template-columns: minmax(0, 1fr); }
  .sp-ctas .btn { width: 100%; }
  /* Confiance sur deux lignes : la note Shopify et son logo passent dessous. */
  .sp-confiance { row-gap: 4px; }
  .sp-sep-coupe { flex-basis: 100%; height: 0; overflow: hidden; font-size: 0; }
  /* Le tableau devient une pile de cartes : moment, puis sans, puis avec. */
  .sp-tete { display: none; }
  .sp-ligne { grid-template-columns: minmax(0, 1fr); }
  .sp-ligne > span { padding: 12px 18px; }
  .sp-ligne .sp-moment { padding-top: 18px; padding-bottom: 4px; }
  .sp-ligne .sp-avec { padding-bottom: 18px; }
}

/* Liens sous une bande : installation, et sur les pages Solutions le produit qui porte la capacité (08/10). */
.sp-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 22px; }
.sp-liens .sp-lien-cta { margin-top: 0; }
.sp-lien-produit { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--brand-600); text-decoration: none; }
.sp-lien-produit svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease-out); }
.sp-lien-produit:hover svg { transform: translateX(3px); }
.sp-controle-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .sp-controle-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 960px) { .sp-controle-4 { grid-template-columns: minmax(0, 1fr); } }

/* ───── Landing pages Solutions (Greg 08/10) : preuve sociale, chiffres, étude de cas, avis, offre ───── */
.lp-preuve { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-500); }
.sp-final .lp-preuve { justify-content: center; text-align: center; }
.lp-logos-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 40px; }
.lp-logos-liste li { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-700); opacity: 0.75; }
.lp-chiffres { padding: 56px 0 28px; background: #fff; }
.lp-chiffres-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-chiffre { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 18px; background: var(--brand-50); }
.lp-chiffre strong { font-family: var(--display); font-size: clamp(30px, 3.2vw, 40px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--brand-700); }
.lp-chiffre span { font-size: 14px; line-height: 1.45; color: var(--ink-700); }
.lp-source { margin: 14px auto 0; max-width: 760px; font-size: 12px; line-height: 1.5; text-align: center; color: var(--ink-500); }
.lp-leviers .lp-leviers-sous { margin-bottom: 56px; }
.lp-cas { padding: 8px 0 88px; background: #f8fafc; }
.lp-cas-carte { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 44px; border-radius: 28px; background: #0f172a; color: #fff; }
.lp-cas-texte .sp-surtitre { color: #93c5fd; }
.lp-cas blockquote { margin: 14px 0 0; }
.lp-cas blockquote p { margin: 0; font-family: var(--display); font-size: clamp(20px, 2vw, 26px); line-height: 1.35; letter-spacing: -0.015em; color: #fff; }
.lp-cas-auteur { margin: 18px 0 0; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: #cbd5e1; }
.lp-cas-auteur strong { font-size: 15px; color: #fff; }
.lp-cas-chiffres { display: grid; gap: 14px; }
.lp-cas-chiffres .lp-chiffre { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.lp-cas-chiffres .lp-chiffre strong { color: #fff; }
.lp-cas-chiffres .lp-chiffre span { color: #cbd5e1; }
.lp-temoignages { padding: 96px 0; background: #fff; }
.lp-avis-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.lp-avis { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 20px; background: #fff; border: 1px solid var(--ink-100); box-shadow: 0 24px 50px -40px rgba(15, 30, 80, 0.35); }
.lp-avis blockquote { margin: 0; flex: 1; }
.lp-avis blockquote p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-900); }
.lp-avis figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink-500); }
.lp-avis figcaption strong { font-size: 14.5px; color: var(--ink-900); }
.lp-traduit { font-style: italic; }
.lp-traduit:empty { display: none; }
.lp-offre { padding: 0 0 96px; background: #fff; }
.lp-offre-carte { max-width: 760px; margin: 0 auto; padding: 44px; border-radius: 28px; text-align: center; background: linear-gradient(160deg, #eff6ff, #dbeafe); border: 1px solid rgba(59, 130, 246, 0.15); }
.lp-offre-liste { list-style: none; margin: 24px auto 28px; padding: 0; display: grid; gap: 12px; max-width: 520px; text-align: left; }
.lp-offre-liste li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--ink-900); }
.lp-offre-carte .sp-ctas, .lp-offre-carte .sp-confiance { justify-content: center; }
@media (max-width: 1100px) { .lp-chiffres-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .sp-hero-texte .lp-preuve { justify-content: center; text-align: center; }
  .lp-cas-carte { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .lp-avis-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lp-chiffres-grille { gap: 10px; }
  .lp-chiffre { padding: 16px; }
  .lp-offre-carte { padding: 28px 20px; }
  .lp-logos-liste { gap: 8px 22px; }
  .lp-logos-liste li { font-size: 16px; }
}
/* Témoignage seul (sans chiffres client) : une colonne centrée. */
.lp-cas-carte--seul { grid-template-columns: minmax(0, 1fr); max-width: 880px; margin: 0 auto; text-align: center; }
.lp-cas-carte--seul .lp-cas-auteur { align-items: center; }

/* ───── Landing « Augmenter les ventes » en sales page (Greg 08/10) ───── */
.lp-ico { flex-shrink: 0; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 14px; background: var(--brand-50); color: var(--brand-600); }
.lp-ico svg { width: 22px; height: 22px; }
/* Solution : la transition, avec une vraie conversation en grand. */
.lp-solution { padding: 96px 0 8px; background: #f8fafc; }
.lp-solution-texte { margin: 0 auto; max-width: 680px; font-size: 18px; line-height: 1.65; color: var(--ink-500); }
.lp-solution-visuel { margin: 44px auto 0; max-width: 980px; }
.lp-leviers--suite { padding-top: 96px; }
/* Moments : cherche → hésite → prêt. */
.lp-moments { padding: 96px 0; background: #fff; }
.lp-moments-grille { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.lp-moment { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--ink-100); box-shadow: 0 18px 40px -32px rgba(15, 30, 80, 0.35); }
.lp-moment h3 { margin: 6px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900); }
.lp-moment p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-500); }
.lp-moment + .lp-moment::before { content: '→'; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 1px solid var(--ink-200); color: var(--ink-500); font-size: 13px; z-index: 1; }
.lp-moment:last-child { background: linear-gradient(160deg, #2563eb, #1d4ed8); border-color: transparent; }
.lp-moment:last-child h3 { color: #fff; }
.lp-moment:last-child p { color: #dbeafe; }
.lp-moment:last-child .lp-ico { background: rgba(255, 255, 255, 0.16); color: #fff; }
.lp-moments + .lp-cas { padding-top: 88px; }
/* Témoignage : logo de la marque en blanc sur la carte sombre. */
.lp-cas-logo { display: block; width: auto; max-width: 200px; filter: brightness(0) invert(1); opacity: 0.92; }
/* Résultats : la preuve ROI au centre. */
.lp-resultats { padding: 104px 0; background: radial-gradient(ellipse 900px 520px at 78% 45%, rgba(59, 130, 246, 0.12), transparent 70%), #f8fbff; }
.lp-resultats-grille { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.lp-mesures { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.lp-mesures li { display: flex; gap: 14px; align-items: flex-start; }
.lp-mesures strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); }
.lp-mesures li > span:last-child > span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.55; color: var(--ink-500); }
.lp-resultats-phrase { margin: 28px 0 0; padding: 16px 18px; border-left: 3px solid var(--brand-500); border-radius: 0 12px 12px 0; background: #fff; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink-900); }
/* Installation : trois étapes, trois garanties, un bouton. */
.lp-etape-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lp-etape-tete .sp-etape-num { margin-bottom: 0; }
.lp-garanties { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.lp-garanties li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--ink-900); }
.lp-installation-cta { margin-top: 32px; }
/* Pour qui. */
.lp-pourqui { padding: 96px 0 24px; background: #fff; }
.lp-pourqui-grille { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp-pourqui-carte { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px; }
.lp-pourqui-carte h3 { margin: 6px 0 0; font-size: 18px; }
.lp-pourqui-carte p { font-size: 15px; }
.lp-pourqui-phrase { margin: 32px auto 0; max-width: 760px; font-size: 16px; line-height: 1.65; color: var(--ink-500); }
@media (max-width: 960px) {
  .lp-resultats-grille { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .lp-moments-grille, .lp-pourqui-grille { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lp-moment + .lp-moment::before { content: '↓'; left: 50%; top: -21px; transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .lp-solution { padding: 64px 0 0; }
  .lp-solution-visuel { margin-top: 32px; }
  .lp-leviers--suite { padding-top: 64px; }
  .lp-moments, .lp-resultats { padding: 64px 0; }
  .lp-moments + .lp-cas { padding-top: 56px; }
  .lp-pourqui { padding: 64px 0 8px; }
  .lp-garanties { flex-direction: column; align-items: center; }
}

/* ───── Hero centré + mini témoignage, chiffres de l'accueil, vidéo en grand (Greg 08/10) ───── */
.lp-hero-centre { max-width: 1040px; text-align: center; }
.lp-hero-centre h1 { max-width: 980px; margin-left: auto; margin-right: auto; font-size: clamp(40px, 5.6vw, 74px); }
.lp-hero-centre .sp-sous { max-width: 660px; margin-left: auto; margin-right: auto; margin-bottom: 30px; }
.lp-hero-centre .sp-ctas { justify-content: center; }
.lp-hero-essai { justify-content: center; }
.lp-hero-preuve { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 36px; margin-top: 30px; }
.lp-temoin { margin: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
.lp-temoin-logo { flex-shrink: 0; display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 1px solid var(--ink-100); box-shadow: 0 6px 16px -10px rgba(15, 30, 80, 0.35); }
.lp-temoin-logo img { width: 34px; height: auto; }
.lp-temoin blockquote { margin: 0; }
/* Police réduite (Greg 11/10) : le témoignage appuie le bouton sans lui disputer l'attention. */
.lp-temoin blockquote p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-700); max-width: 300px; }
.lp-temoin figcaption { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ink-900); }
.lp-hero-note { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink-900); white-space: nowrap; }
.lp-hero-note .lp-etoiles { font-size: 18px; letter-spacing: 2px; }
.lp-hero-note .logo-shopify { display: inline-block; height: 17px; width: auto; }
/* Section chiffres de l'accueil (styles repris de index.html). */
.sp-page .bfs { padding: 88px 0 72px; background: #fff; }
.bfs-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.bfs-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 10px; border-radius: 999px; background: #f0f7ec; color: #3f6b25; font-weight: 700; font-size: 14px; margin-bottom: 26px; }
.bfs-badge svg { height: 21px; width: auto; }
.bfs h2 { margin: 0 0 16px; font-family: var(--display); font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.03em; color: var(--ink-900); font-weight: 600; }
.bfs h2 .serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; color: var(--brand-600); white-space: nowrap; }
.bfs-stats { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 880px; margin: 44px auto 0; }
.bfs-stat { padding: 10px 16px; text-align: center; }
.bfs-stat + .bfs-stat { border-left: 1px solid var(--ink-200); }
.bfs-num { display: block; font-size: clamp(40px, 4.6vw, 60px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--ink-900); }
.bfs-lbl { display: block; margin-top: 12px; font-size: 16px; color: var(--ink-500); }
.bfs .cta-stack { margin-top: 48px; }
/* La vidéo en grand, juste après la preuve. */
.lp-demo { padding: 0 0 96px; background: #fff; }
.lp-demo .lp-solution-visuel { margin-top: 0; }
/* Bandeau de confiance sous la vidéo (Greg 11/10) : Shopify Partners, pastilles clients,
   5/5 sur Shopify. Sans crochets d'angle (retirés par Greg le même jour). */
.lp-bande-preuve { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px 34px; max-width: 940px; margin: 36px auto 0; }
.lp-partenaire { display: inline-flex; align-items: center; gap: 5px; padding: 13px 20px; border: 1px solid var(--ink-100); border-radius: 12px; background: #fff; }
.lp-partenaire .logo-shopify { display: block; height: 24px; width: auto; }
/* Inter est chargée sans italique : on incline le mot (comme le logo Shopify Partners). */
.lp-partenaire-mot { display: inline-block; transform: skewX(-12deg); font-size: 22px; font-weight: 300; line-height: 1; letter-spacing: -0.01em; color: #111827; }
.lp-pastilles { list-style: none; margin: 0; padding: 0; display: flex; }
/* Le chevauchement (8 px) ne recouvre que le bord blanc : le logo reste dans les 70 % centraux. */
.lp-pastilles li { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ink-100), 0 6px 16px -10px rgba(15, 30, 80, 0.35); overflow: hidden; }
.lp-pastilles li + li { margin-left: -8px; }
.lp-pastilles img { display: block; max-width: 70%; max-height: 56%; width: auto; height: auto; object-fit: contain; }
.lp-bande-note { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink-900); white-space: nowrap; }
.lp-bande-note .lp-etoiles { font-size: 19px; letter-spacing: 2px; }
.lp-bande-note .logo-shopify { display: inline-block; height: 18px; width: auto; }
@media (max-width: 640px) {
  .lp-bande-preuve { flex-direction: column; gap: 16px; margin-top: 28px; }
}
@media (max-width: 640px) {
  .lp-hero-preuve { flex-direction: column; gap: 16px; margin-top: 26px; }
  .lp-temoin blockquote p { max-width: 260px; }
  .sp-page .bfs { padding: 64px 0 56px; }
  .bfs-stats { grid-template-columns: 1fr; margin-top: 32px; }
  .bfs-stat { padding: 18px 0; }
  .bfs-stat + .bfs-stat { border-left: 0; border-top: 1px solid var(--ink-200); }
  .lp-demo { padding-bottom: 64px; }
}

/* Mini témoignage du hero : citation sur une ligne, filet avant la note (Greg 08/10). */
@media (min-width: 641px) {
  .lp-hero-preuve { gap: 28px; }
  .lp-temoin blockquote p { max-width: none; white-space: nowrap; }
  .lp-hero-note { align-self: stretch; padding-left: 28px; border-left: 1px solid var(--ink-200); }
}
/* ───── Mur d'avis qui défile (Greg 08/10) ───── */
.lp-mur { padding: 96px 0; background: #fff; overflow: hidden; }
.lp-mur-rangs { margin-top: 40px; display: grid; gap: 4px; }
.lp-mur-rang { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.lp-mur-piste { list-style: none; margin: 0; padding: 6px 0 22px; display: flex; align-items: stretch; width: max-content; animation: lp-mur 90s linear infinite; }
.lp-mur-rang--inverse .lp-mur-piste { animation-direction: reverse; }
.lp-mur-rangs:hover .lp-mur-piste { animation-play-state: paused; }
.lp-mur-carte { flex-shrink: 0; width: 340px; margin-right: 18px; display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--ink-100); box-shadow: 0 14px 34px -26px rgba(15, 30, 80, 0.35); }
.lp-mur-carte blockquote { margin: 0; flex: 1; }
.lp-mur-carte blockquote p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-900); }
.lp-mur-auteur { margin: 0; display: flex; align-items: center; gap: 10px; }
.lp-mur-auteur strong { font-size: 14.5px; color: var(--ink-900); }
/* Logo de la boutique en pastille (Greg 11/10), même forme que le témoignage du hero. */
.lp-mur-pastille { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--ink-100); box-shadow: 0 6px 16px -10px rgba(15, 30, 80, 0.35); overflow: hidden; }
.lp-mur-pastille img { display: block; max-width: 76%; max-height: 60%; width: auto; height: auto; object-fit: contain; }
.lp-mur-initiale { background: var(--ink-50, #f8fafc); color: var(--ink-700); font-size: 17px; font-weight: 700; }
@keyframes lp-mur { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lp-mur-piste { animation: none; } .lp-mur-rang { overflow-x: auto; } }
@media (max-width: 640px) {
  .lp-mur { padding: 64px 0; }
  .lp-mur-carte { width: 288px; margin-right: 14px; padding: 18px; }
}

/* ───── Retours Greg 08/10 (2) : numéros des produits, « Recommandé », accroches, note du mur, chapitres ───── */
.sp-surtitre .lp-num { display: inline-block; margin-right: 10px; padding-right: 10px; border-right: 1px solid currentColor; opacity: 0.55; }
.lp-solution--seule { padding-bottom: 0; }
.lp-solution--seule + .lp-leviers--suite { padding-top: 64px; }
.sp-tete .sp-avec { align-items: center; flex-wrap: wrap; }
.sp-reco { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--brand-600); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; }
.sp-etape .lp-etape-accroche { margin: 0 0 8px; font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--ink-900); }
.lp-mur-note { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 0 auto 22px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--ink-200); background: #fff; font-size: 15px; color: var(--ink-700); }
.lp-mur-note .logo-shopify { display: inline-block; height: 18px; width: auto; }
.lp-mur-note .lp-etoiles { font-size: 17px; letter-spacing: 2px; }
.lp-mur-note strong { color: var(--ink-900); }
.lp-mur-note-sep { color: var(--ink-300, #cbd5e1); }
.bfs-num { font-variant-numeric: tabular-nums; }
/* Mini témoignage : le bloc prend la largeur de son texte (pas de vide avant la note) ;
   un avis long passe sur deux lignes au-delà de 560 px. */
@media (min-width: 641px) {
  .lp-temoin blockquote p { white-space: normal; width: max-content; max-width: 560px; text-wrap: pretty; }
}
@media (max-width: 640px) {
  .lp-mur-note { font-size: 13.5px; padding: 8px 14px; }
}

/* ===== Copy B2B des landing pages (Greg 10/10) ===== */
.lp-hero-surtitre { margin: 0 0 16px; text-wrap: balance; }
.lp-hero-surtitre .lp-shopify { white-space: nowrap; }
/* Le sac Shopify allonge le sur-titre : une seule ligne sur téléphone (Greg 11/10). */
@media (max-width: 420px) { .lp-hero-surtitre { font-size: 12px; letter-spacing: 0.06em; } }
.lp-hero-surtitre .ico-shopify { width: 1.05em; height: 1.2em; margin-right: 0.3em; vertical-align: -0.25em; }
.sp-probleme-texte + .sp-probleme-texte { margin-top: 14px; }
.sp-probleme-accent { margin: 22px 0 0; max-width: 780px; padding: 16px 18px; border-left: 3px solid var(--brand-500); border-radius: 0 12px 12px 0; background: #f8fbff; font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--ink-900); }
.lp-leviers-cta { text-align: center; }
.lp-preuve-texte { margin: 18px 0 0; max-width: 520px; font-size: 17px; line-height: 1.65; color: var(--ink-500); }
.lp-preuve .sp-lien-cta { margin-top: 22px; }
/* Calculateur de temps économisé (Automatiser le support) */
.lp-calc { padding: 96px 0; background: #f8fbff; }
.lp-calc-carte { margin: 36px auto 0; max-width: 920px; padding: 32px; border-radius: 24px; background: #fff; border: 1px solid rgba(15, 30, 80, 0.07); box-shadow: 0 24px 60px -32px rgba(15, 30, 80, 0.3); }
.lp-calc-reglages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: end; } /* un libellé sur deux lignes ne décale pas sa réglette */
.lp-calc-reglage label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink-700); }
.lp-calc-reglage output { font-size: 18px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-calc-reglage input[type="range"] { display: block; width: 100%; margin: 14px 0 6px; accent-color: var(--brand-600); cursor: pointer; }
.lp-calc-reperes { position: relative; height: 18px; font-size: 12px; color: var(--ink-500); }
.lp-calc-reperes > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.lp-calc-reperes > span:first-child { transform: none; }
.lp-calc-reperes > span:last-child { transform: translateX(-100%); }
.lp-calc-resultat { margin-top: 28px; padding: 22px 24px; border-radius: 18px; background: #eff6ff; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.lp-calc-resultat-titre { font-size: 16px; font-weight: 600; color: var(--ink-700); }
.lp-calc-resultat strong { font-family: var(--display); font-size: clamp(34px, 4vw, 48px); line-height: 1; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.lp-calc-note { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-500); }
@media (max-width: 860px) { .lp-calc-reglages { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
@media (max-width: 640px) { .lp-calc { padding: 64px 0; } .lp-calc-carte { padding: 22px 18px; } }

/* ===== Schéma entrées → agent → sorties (Fiches produits, Augmenter les ventes, Greg 24/10) =====
   Sources de la boutique → agent → ce que voit le visiteur, reliés par des courbes animées. */
.fp-mini { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.fp-schema-grille { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) 72px 248px 72px minmax(0, 1fr); grid-template-areas: "tg . . . td" "lg cg ce cd ld"; row-gap: 14px; }
.fp-schema-grille + .sp-controle-grille { margin-top: 56px; }
.fp-schema-tete--g { grid-area: tg; }
.fp-schema-tete--d { grid-area: td; }
.fp-schema-tete h3 { margin: 6px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900); }
.fp-schema-tete .fp-mini { color: var(--brand-600); font-size: 11.5px; }
.fp-schema-liste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-rows: repeat(4, 1fr); }
.fp-schema-liste--g { grid-area: lg; }
.fp-schema-liste--d { grid-area: ld; }
.fp-noeud { padding: 7px 0; }
.fp-noeud-carte { height: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--ink-100); box-shadow: 0 14px 34px -28px rgba(15, 30, 80, 0.4); }
.fp-noeud-ico { flex-shrink: 0; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: var(--brand-50); color: var(--brand-600); }
.fp-noeud-ico svg { width: 20px; height: 20px; }
.fp-noeud-ico .ico-shopify { width: 19px; height: 22px; }
.fp-noeud-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fp-noeud-txt strong { font-size: 14.5px; font-weight: 600; color: var(--ink-900); }
.fp-noeud-txt span { font-size: 13px; line-height: 1.4; color: var(--ink-500); }
.fp-tag { flex-shrink: 0; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--ink-100); background: var(--ink-50); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; }
.fp-courbes { width: 100%; height: 100%; overflow: visible; fill: none; stroke-width: 1.6; stroke-dasharray: 4 5; }
.fp-courbes--g { grid-area: cg; stroke: #60a5fa; }
.fp-courbes--d { grid-area: cd; stroke: var(--brand-600); }
.fp-courbes path { vector-effect: non-scaling-stroke; animation: fp-flux 1.4s linear infinite; }
@keyframes fp-flux { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) { .fp-courbes path { animation: none; } }
.fp-schema-centre { grid-area: ce; align-self: center; padding: 26px 18px 18px; border-radius: 24px; text-align: center; background: #fff; border: 1px solid var(--ink-100); box-shadow: 0 30px 70px -36px rgba(37, 99, 235, 0.45); }
.fp-schema-logo { display: inline-flex; width: 76px; height: 76px; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle, #dbeafe 0%, #eff6ff 70%); box-shadow: 0 0 0 8px rgba(239, 246, 255, 0.7); }
.fp-schema-logo img { width: 40px; height: 40px; border-radius: 10px; }
.fp-schema-marque { display: block; height: 26px; width: auto; margin: 16px auto 6px; }
.fp-schema-centre ol { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fp-schema-centre li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--ink-100); font-size: 13.5px; font-weight: 600; color: var(--ink-900); text-align: left; }
.fp-schema-num { font-size: 11.5px; font-weight: 600; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.fp-schema-centre li i { margin-left: auto; width: 36px; height: 3px; border-radius: 2px; background: var(--ink-100); }
.fp-schema-centre li:first-child i { background: linear-gradient(90deg, var(--brand-500) 60%, var(--ink-100) 60%); }
.fp-schema-pied { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-500); }
@media (max-width: 1024px) {
  .fp-schema-grille { grid-template-columns: minmax(0, 1fr) 48px 220px 48px minmax(0, 1fr); }
  .fp-tag { display: none; }
}
@media (max-width: 960px) {
  .fp-schema-grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tg" "lg" "ce" "td" "ld"; max-width: 560px; margin-left: auto; margin-right: auto; }
  .fp-courbes { display: none; }
  .fp-schema-centre { width: 100%; max-width: 300px; margin: 22px auto 30px; box-sizing: border-box; }
  .fp-tag { display: inline-block; }
}
@media (max-width: 640px) {
  .fp-schema-grille { margin-top: 36px; }
  .fp-schema-grille + .sp-controle-grille { margin-top: 36px; }
}
/* Schéma sous le texte de « La solution » (page Fiches produits, Greg 24/10). */
.lp-solution--schema { padding-bottom: 32px; }
@media (max-width: 640px) { .lp-solution--schema { padding-bottom: 8px; } }

/* « Le problème » des landings, façon Sorank (Greg 24/10) : cartes rouges de ce que
   la boutique perd, carte bleue AgonRise. Remplace le comparatif. */
.lp-pertes { padding: 88px 0; }
.lp-pertes-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: 20px; max-width: 1060px; margin: 40px auto 0; align-items: stretch; }
.lp-pertes-sans { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.lp-perte { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 86px; padding: 18px 20px; border: 1px solid #e5484d; border-radius: 12px; background: linear-gradient(90deg, #fff1f2 0%, #fff7f7 55%, #fff 100%); }
.lp-perte-texte { font-size: 16px; line-height: 1.45; color: var(--ink-900); }
.lp-perte-tag { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 14px; font-weight: 600; color: #dc2626; white-space: nowrap; }
.lp-perte-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(15,30,80,.12); }
.lp-perte-ico svg { width: 16px; height: 16px; }
.lp-pertes-avec { display: flex; flex-direction: column; gap: 16px; padding: 24px 16px 16px; border-radius: 14px; background: radial-gradient(120% 90% at 85% 0%, #7fb0ff 0%, rgba(127,176,255,0) 55%), linear-gradient(160deg, #3b82f6 0%, #2563eb 100%); box-shadow: 0 30px 60px -30px rgba(37,99,235,.55); }
.lp-pertes-logo { height: 26px; width: auto; align-self: flex-start; margin-left: 4px; filter: brightness(0) invert(1); }
.lp-pertes-liste { flex: 1; padding: 18px 18px 20px; border-radius: 12px; background: #fff; }
.lp-pertes-titre { margin: 0 0 12px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink-900); }
.lp-pertes-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-pertes-liste li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; color: var(--ink-700, #374151); }
.lp-pertes-coche { display: inline-grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #eef4ff; color: #3b82f6; }
.lp-pertes-coche svg { width: 17px; height: 17px; }
@media (max-width: 860px) {
  .lp-pertes { padding: 64px 0; }
  .lp-pertes-grille { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
  .lp-perte { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 16px; }
  .lp-perte-tag { white-space: normal; }
}